-
`}render(){const t=Math.round(100*Math.min(1,Math.max(0,Number(this.opacity)||0))),e=Rt(this.color,"#607d8b"),i=this.showOpacity?`${this.label||"Color"}: ${e}, ${t}%`:`${this.label||"Color"}: ${e}`;return W`
- ${this.label?W`${this.label}`:G}
-
- ${this._open&&!this.disabled&&this._supportsPopover()?this._pickerTemplate(!0):G}
- `}}Ut.properties={label:{type:String},opacityLabel:{type:String,attribute:"opacity-label"},color:{type:String},opacity:{type:Number},disabled:{type:Boolean,reflect:!0},showOpacity:{type:Boolean,attribute:"show-opacity"},pickerLabels:{attribute:!1},_open:{state:!0},_hue:{state:!0},_saturation:{state:!0},_value:{state:!0},_hexDraft:{state:!0},_hexInvalid:{state:!0}},Ut.styles=o`
- :host {
- position: relative;
- display: inline-flex;
- align-items: center;
- gap: 6px;
- min-width: 0;
- }
- .label {
- font-size: 12px;
- color: var(--secondary-text-color, #9aa4ad);
- white-space: nowrap;
- }
- .trigger {
- width: 40px;
- height: 40px;
- flex: none;
- box-sizing: border-box;
- padding: 3px;
- border: 1px solid var(--divider-color, #666);
- border-radius: 7px;
- background:
- linear-gradient(45deg, #b8b8b8 25%, transparent 25%) 0 0 / 10px 10px,
- linear-gradient(45deg, transparent 75%, #b8b8b8 75%) 0 0 / 10px 10px,
- linear-gradient(45deg, transparent 75%, #b8b8b8 75%) 5px -5px / 10px 10px,
- linear-gradient(45deg, #b8b8b8 25%, #eee 25%) 5px 5px / 10px 10px;
- cursor: pointer;
- }
- :host([data-pointer-hover]) .trigger:hover {
- border-color: var(--primary-color, #03a9f4);
- }
- .trigger[aria-expanded='true'] {
- border-color: var(--primary-color, #03a9f4);
- outline: none;
- box-shadow: 0 0 0 1px var(--primary-color, #03a9f4);
- }
- .trigger:focus-visible {
- border-color: var(--primary-color, #03a9f4);
- outline: 2px solid var(--primary-color, #03a9f4);
- outline-offset: 2px;
- }
- .swatch {
- display: block;
- width: 100%;
- height: 100%;
- border-radius: 3px;
- box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.18);
- pointer-events: none;
- }
- .picker {
- /* The popover attribute promotes this surface into the browser top layer, outside
- hp-dialog's scrolling/clipping body. JS supplies viewport coordinates. */
- position: fixed;
- z-index: 2147483647;
- inset: auto;
- top: 0;
- left: 0;
- width: min(292px, calc(100vw - 16px));
- max-height: calc(100vh - 16px);
- margin: 0;
- box-sizing: border-box;
- display: grid;
- gap: 10px;
- padding: 12px;
- overflow: auto;
- color: var(--primary-text-color, #fff);
- background: var(--card-background-color, #202126);
- border: 1px solid var(--primary-color, #03a9f4);
- border-radius: 10px;
- box-shadow: 0 10px 28px rgb(0 0 0 / 0.34);
- }
- .picker[popover]:not(:popover-open) {
- /* Keep the author-level display:grid from exposing the surface for one
- frame before showPopover() promotes it into the top layer. */
- display: none;
- }
- .picker-head,
- .row,
- .control-head {
- display: flex;
- align-items: center;
- gap: 8px;
- min-width: 0;
- }
- .picker-head {
- justify-content: space-between;
- }
- .caption {
- flex: 1;
- min-width: 0;
- overflow: hidden;
- color: var(--secondary-text-color, #9aa4ad);
- font-size: 12px;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- .preview {
- width: 52px;
- height: 30px;
- flex: none;
- box-sizing: border-box;
- padding: 3px;
- border: 1px solid var(--divider-color, #666);
- border-radius: 7px;
- background:
- linear-gradient(45deg, #b8b8b8 25%, transparent 25%) 0 0 / 10px 10px,
- linear-gradient(45deg, transparent 75%, #b8b8b8 75%) 0 0 / 10px 10px,
- linear-gradient(45deg, transparent 75%, #b8b8b8 75%) 5px -5px / 10px 10px,
- linear-gradient(45deg, #b8b8b8 25%, #eee 25%) 5px 5px / 10px 10px;
- }
- .preview > span {
- display: block;
- width: 100%;
- height: 100%;
- border-radius: 3px;
- }
- .sv-field {
- position: relative;
- width: 100%;
- height: 132px;
- overflow: hidden;
- box-sizing: border-box;
- border: 1px solid var(--divider-color, #666);
- border-radius: 8px;
- background:
- linear-gradient(to top, #000, transparent),
- linear-gradient(to right, #fff, var(--hp-picker-hue, #f00));
- cursor: crosshair;
- touch-action: none;
- user-select: none;
- }
- .sv-thumb {
- position: absolute;
- left: var(--hp-picker-saturation, 0%);
- top: var(--hp-picker-value, 100%);
- width: 14px;
- height: 14px;
- box-sizing: border-box;
- border: 2px solid #fff;
- border-radius: 50%;
- box-shadow: 0 0 0 1px rgb(0 0 0 / .65), 0 1px 3px rgb(0 0 0 / .5);
- transform: translate(-50%, -50%);
- pointer-events: none;
- }
- .control {
- display: grid;
- gap: 2px;
- min-width: 0;
- }
- .control-value {
- flex: none;
- color: var(--secondary-text-color, #9aa4ad);
- font-size: 12px;
- }
- input[type='range'] {
- width: auto;
- height: 40px;
- min-width: 0;
- flex: 1;
- margin: -5px 0;
- accent-color: var(--primary-color, #03a9f4);
- touch-action: none;
- }
- .hue-range {
- accent-color: var(--hp-picker-hue, #f00);
- --hp-picker-hue-track: linear-gradient(to right,
- #f00 0%, #ff0 16.667%, #0f0 33.333%, #0ff 50%,
- #00f 66.667%, #f0f 83.333%, #f00 100%);
- --hp-picker-hue-thumb-shadow:
- 0 0 0 2px var(--card-background-color, #202126),
- 0 0 0 3px var(--primary-text-color, #fff);
- }
- .hue-range::-webkit-slider-runnable-track {
- height: 10px;
- box-sizing: border-box;
- border: 1px solid var(--divider-color, #666);
- border-radius: 999px;
- background: var(--hp-picker-hue-track);
- }
- .hue-range::-moz-range-track {
- height: 10px;
- box-sizing: border-box;
- border: 1px solid var(--divider-color, #666);
- border-radius: 999px;
- background: var(--hp-picker-hue-track);
- }
- .hue-range::-moz-range-progress {
- height: 10px;
- border: 0;
- border-radius: 999px;
- background: transparent;
- }
- .hue-range::-webkit-slider-thumb {
- border-radius: 50%;
- box-shadow: var(--hp-picker-hue-thumb-shadow);
- }
- .hue-range::-moz-range-thumb {
- border-radius: 50%;
- box-shadow: var(--hp-picker-hue-thumb-shadow);
- }
- input[type='text'],
- input[type='number'] {
- min-height: 40px;
- box-sizing: border-box;
- border: 1px solid var(--divider-color, #666);
- border-radius: 6px;
- padding: 6px 8px;
- color: var(--primary-text-color, #fff);
- background: var(--input-fill-color, transparent);
- font: inherit;
- }
- input[type='text'] {
- width: 100%;
- }
- input[type='number'] {
- width: 50px;
- flex: none;
- }
- input:focus-visible,
- .sv-field:focus-visible {
- outline: 2px solid var(--primary-color, #03a9f4);
- outline-offset: 1px;
- }
- input[aria-invalid='true'] {
- border-color: var(--error-color, #db4437);
- }
- .error {
- color: var(--error-color, #db4437);
- font-size: 11px;
- line-height: 1.25;
- }
- .pct {
- color: var(--secondary-text-color, #9aa4ad);
- font-size: 12px;
- }
- :host([disabled]) {
- opacity: .5;
- pointer-events: none;
- }
- @media (prefers-reduced-motion: reduce) {
- .picker { transition: none !important; }
- }
- @media (forced-colors: active) {
- .hue-range::-webkit-slider-runnable-track {
- border-color: ButtonText;
- background: Canvas;
- }
- .hue-range::-moz-range-track {
- border-color: ButtonText;
- background: Canvas;
- }
- .hue-range::-webkit-slider-thumb {
- box-shadow: none;
- }
- .hue-range::-moz-range-thumb {
- box-shadow: none;
- }
- }
- `,customElements.get("hp-color-opacity")||customElements.define("hp-color-opacity",Ut);let Gt=0;class Vt extends ht{constructor(){super(...arguments),this.text="",this.ariaLabel="",this.pointerHover=!1,this._open=!1,this._openTimer=0,this._closeTimer=0,this._positionRaf=0,this._forceFallback=!1,this._hoverOwned=!1,this._overlayDispose=null,this._scrollDialog=null,this._descriptionId="hp-help-description-"+ ++Gt,this._surfacePointerEnter=()=>{const t=this._window();this._closeTimer&&t?.clearTimeout(this._closeTimer),this._closeTimer=0},this._surfacePointerLeave=()=>{this._scheduleClose()},this._outsidePointerDown=t=>{if(!this._open)return;const e=t.composedPath();this._floating.containsPath(e)||this._closeHelp(!1,"outside")},this._dialogScroll=t=>{const e=this._floating.containsPath(t.composedPath()),i=t.target,s=this._dialog(),n=i instanceof Node&&(i===s||i instanceof Element&&i.contains(this));var o;this._open&&(o=n,!e&&o)&&this._closeHelp(!1,"scroll")},this._keyDown=t=>{if(!this._open||t.defaultPrevented)return;if("Escape"===t.key)return t.preventDefault(),t.stopImmediatePropagation(),void this._closeHelp(this._floating.ownsActiveElement(),"escape");const e=this.renderRoot.querySelector(".trigger");if(!e||!t.composedPath().includes(e))return;const i=this._surface();if(!i||i.scrollHeight<=i.clientHeight)return;const s=Math.max(40,.8*i.clientHeight),n={ArrowDown:40,ArrowUp:-40,PageDown:s,PageUp:-s};if("Home"===t.key)i.scrollTop=0;else if("End"===t.key)i.scrollTop=i.scrollHeight;else{if(!(t.key in n))return;i.scrollBy({top:n[t.key],behavior:"auto"})}t.preventDefault(),t.stopImmediatePropagation()},this._floating=new Wt(this,"help",this._keyDown),this._queuePosition=()=>{if(!this._open||this._positionRaf)return;const t=this._window();t&&(this._positionRaf=t.requestAnimationFrame(()=>{this._positionRaf=0,this._position()||this._closeHelp()}))}}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this._keyDown,!0)}willUpdate(){this.toggleAttribute("data-has-content",this._hasContent())}disconnectedCallback(){const t=this.ownerDocument.defaultView;this._unsubscribeOpenListeners(),this.removeEventListener("keydown",this._keyDown,!0),this._clearTimers(),this._positionRaf&&t?.cancelAnimationFrame(this._positionRaf),this._positionRaf=0,this._closeHelp(!1,"disconnect"),super.disconnectedCallback()}updated(t){if(t.has("pointerHover")&&!this.pointerHover){const t=this._window();this._openTimer&&t?.clearTimeout(this._openTimer),this._openTimer=0,this._hoverOwned&&this._closeHelp(!1,"outside")}this._hasContent()||!this._open?this._open&&t.has("text")&&(this._usesPopover()||this._renderFallback(),this._queuePosition()):this._closeHelp()}_window(){return this._floating.window()}_dialog(){return this._floating.dialog()}_usesPopover(){return this._floating.usesPopover(this._forceFallback)}_hasContent(){return t=this.text,e=this.ariaLabel,"string"==typeof t&&t.trim().length>0&&"string"==typeof e&&e.trim().length>0;var t,e}_clearTimers(){const t=this._window();this._openTimer&&t?.clearTimeout(this._openTimer),this._closeTimer&&t?.clearTimeout(this._closeTimer),this._openTimer=0,this._closeTimer=0}_scheduleOpen(){const t=this._window();this.pointerHover&&t&&!this._open&&!this._openTimer&&(this._closeTimer&&t.clearTimeout(this._closeTimer),this._closeTimer=0,this._openTimer=t.setTimeout(()=>{this._openTimer=0,this.isConnected&&(this._hoverOwned=!0,this._openHelp())},300))}_scheduleClose(){const t=this._window(),e=this.renderRoot.querySelector(".trigger");t&&!e?.matches(":focus-visible")&&(this._openTimer&&t.clearTimeout(this._openTimer),this._closeTimer&&t.clearTimeout(this._closeTimer),this._openTimer=0,this._closeTimer=t.setTimeout(()=>{this._closeTimer=0,this.isConnected&&this._closeHelp()},150))}_triggerPointerEnter(t){this.pointerHover&&"mouse"===t.pointerType&&this._scheduleOpen()}_triggerPointerLeave(t){"mouse"===t.pointerType&&this._scheduleClose()}_triggerFocus(){queueMicrotask(()=>{const t=this.renderRoot.querySelector(".trigger");t?.matches(":focus-visible")&&(this._hoverOwned=!1,this._openHelp())})}_triggerBlur(){this._scheduleClose()}_triggerClick(){this._open?this._closeHelp():(this._hoverOwned=!1,this._openHelp())}_subscribeOpenListeners(){this.ownerDocument.addEventListener("pointerdown",this._outsidePointerDown,!0),this.ownerDocument.addEventListener("keydown",this._keyDown,!0);const t=this._window();t?.addEventListener("resize",this._queuePosition),t?.addEventListener("orientationchange",this._queuePosition),t?.visualViewport?.addEventListener("resize",this._queuePosition),t?.visualViewport?.addEventListener("scroll",this._queuePosition),this._scrollDialog=this._dialog(),this._scrollDialog?.addEventListener("scroll",this._dialogScroll,!0)}_unsubscribeOpenListeners(){this.ownerDocument.removeEventListener("pointerdown",this._outsidePointerDown,!0),this.ownerDocument.removeEventListener("keydown",this._keyDown,!0);const t=this._window();t?.removeEventListener("resize",this._queuePosition),t?.removeEventListener("orientationchange",this._queuePosition),t?.visualViewport?.removeEventListener("resize",this._queuePosition),t?.visualViewport?.removeEventListener("scroll",this._queuePosition),this._scrollDialog?.removeEventListener("scroll",this._dialogScroll,!0),this._scrollDialog=null}async _openHelp(){!this._open&&this._hasContent()&&(this._clearTimers(),this._forceFallback=!1,this._open=!0,this._subscribeOpenListeners(),await this.updateComplete,this._open&&(this._usesPopover()||this._renderFallback(),this._position()?this._overlayDispose=this._dialog()?.registerOverlay({owner:this,group:"transient",close:t=>this._closeHelp("escape"===t&&this._floating.ownsActiveElement(),t)})||null:this._closeHelp()))}_closeHelp(t=!1,e="exclusive"){if(!this._open&&!this._floating.hasFallback)return;this._clearTimers();const i=this._overlayDispose;this._overlayDispose=null,i?.();const s=this.renderRoot.querySelector(".tooltip");if(s?.hidePopover)try{s.matches(":popover-open")&&s.hidePopover()}catch{}this._open=!1,this._hoverOwned=!1,this._unsubscribeOpenListeners(),this._floating.destroy(),t&&this.updateComplete.then(()=>this.renderRoot.querySelector(".trigger")?.focus())}_tooltipTemplate(t){return W``}_renderFallback(){const t=Vt.styles.cssText;this._floating.renderFallback(this._tooltipTemplate(!1),t)}_surface(){return this._floating.surface(".tooltip",this._usesPopover())}_position(){if(!this._open)return!1;const t=this._window(),e=this.renderRoot.querySelector(".trigger");let i=this._surface();if(!t||!e?.isConnected||!i?.isConnected)return!1;const s=Bt(t);if(i.style.maxWidth=`${Math.max(0,Math.min(320,s.width-16))}px`,i.style.maxHeight=`${Math.max(0,s.height-16)}px`,i.style.visibility="hidden",this._usesPopover()&&i.showPopover)try{i.matches(":popover-open")||i.showPopover()}catch{if(this._forceFallback=!0,this._renderFallback(),i=this._surface(),!i?.isConnected)return!1;i.style.visibility="hidden"}const n=e.getBoundingClientRect(),o=i.getBoundingClientRect();if(!(n.width&&n.height&&o.width&&o.height))return!1;const a=qt(n,o,s);return i.style.left=`${a.left}px`,i.style.top=`${a.top}px`,i.dataset.side=a.side,i.style.visibility="",!0}render(){if(!this._hasContent())return G;const t=this.ariaLabel.trim();return W`
- ${this.text}
-
- ${this._usesPopover()?this._tooltipTemplate(!0):G}
- `}}Vt.properties={text:{type:String},ariaLabel:{type:String,attribute:"aria-label"},pointerHover:{type:Boolean,attribute:"data-pointer-hover",reflect:!0},_open:{state:!0},_forceFallback:{state:!0}},Vt.styles=o`
- :host {
- display: none;
- flex: none;
- vertical-align: middle;
- }
-
- :host([data-has-content]) {
- display: inline-flex;
- }
-
- .trigger {
- width: 32px;
- height: 32px;
- display: inline-flex;
- align-items: center;
- justify-content: center;
- flex: none;
- box-sizing: border-box;
- padding: 0;
- color: var(--secondary-text-color, #9aa4ad);
- background: transparent;
- border: 0;
- border-radius: 50%;
- cursor: help;
- -webkit-tap-highlight-color: transparent;
- }
-
- .trigger svg {
- display: block;
- width: 18px;
- height: 18px;
- fill: currentColor;
- }
-
- :host([data-pointer-hover]) .trigger:hover,
- .trigger:focus-visible,
- .trigger[aria-expanded='true'] {
- color: var(--primary-text-color, #fff);
- background: rgb(127 127 127 / 0.18);
- outline: none;
- }
-
- .trigger:focus-visible {
- box-shadow: 0 0 0 2px var(--primary-color, #03a9f4);
- }
-
- .tooltip {
- position: fixed;
- z-index: 2147483647;
- inset: auto;
- top: 0;
- left: 0;
- width: max-content;
- max-width: min(320px, calc(100vw - 16px));
- max-height: calc(100vh - 16px);
- margin: 0;
- box-sizing: border-box;
- padding: 9px 11px;
- overflow: auto;
- color: var(--primary-text-color, #fff);
- background: var(--card-background-color, #202126);
- border: 1px solid var(--divider-color, rgb(255 255 255 / 0.2));
- border-radius: 9px;
- box-shadow: 0 8px 24px rgb(0 0 0 / 0.32);
- font: 400 13px/1.4 system-ui, sans-serif;
- text-align: start;
- white-space: normal;
- overflow-wrap: anywhere;
- opacity: 1;
- transform: translateY(0);
- transition: opacity 120ms ease, transform 120ms ease;
- }
-
- .tooltip[data-side='top'] {
- transform-origin: bottom center;
- }
-
- .tooltip[data-side='bottom'] {
- transform-origin: top center;
- }
-
- .tooltip[popover]:not(:popover-open) {
- display: none;
- }
-
- @starting-style {
- .tooltip {
- opacity: 0;
- transform: translateY(3px);
- }
- }
-
- .sr-only {
- /* Keep the accessibility-only description outside every dialog scroll
- container's overflow geometry. Toggling the hidden attribute on the former
- absolutely-positioned node made some browsers add a vertical
- scrollbar while help was open, even though the visible tooltip was
- already in the Popover top layer / fixed fallback portal. */
- position: fixed;
- inset: 0 auto auto 0;
- width: 1px;
- height: 1px;
- padding: 0;
- margin: 0;
- overflow: hidden;
- clip: rect(0, 0, 0, 0);
- clip-path: inset(50%);
- white-space: nowrap;
- border: 0;
- }
-
- @media (pointer: coarse) {
- .trigger {
- width: 40px;
- height: 40px;
- }
- }
-
- @media (prefers-reduced-motion: reduce) {
- .tooltip {
- transition: none;
- }
- }
- `,customElements.get("hp-help")||customElements.define("hp-help",Vt);const Kt=o`
- :host {
- --hp-bg: var(--card-background-color, #16212e);
- --hp-line: var(--divider-color, #2b3d4f);
- --hp-txt: var(--primary-text-color, #e6edf3);
- --hp-muted: var(--secondary-text-color, #8aa0b3);
- --hp-accent: var(--primary-color, #3ea6ff);
- --hp-on: #ffd45c;
- --hp-open: #ff9f43;
- /* design tokens (UI chrome only). The icon/plan scale math stays on
- --icon-size/--dev-size cqw units and never uses these. */
- /* spacing scale, fact-based; stray 3/5/7/9/13/14px values are unified
- onto the nearest step (max +-2px, the whole point of the pass) */
- --sp-1: 2px;
- --sp-2: 4px;
- --sp-3: 6px;
- --sp-4: 8px;
- --sp-5: 12px;
- --sp-6: 16px;
- /* px radii of dialogs/buttons/plates (the 22% badge radius is scale math) */
- --rad-s: 6px;
- --rad-m: 8px;
- --rad-l: 12px;
- /* font tiers: fine print+labels / body+buttons / title */
- --fs-s: 12px;
- --fs-m: 13px;
- --fs-l: 15px;
- /* elevation: badge / floating panel (menu, tip, toast) / dialog */
- --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.45);
- --shadow-2: 0 6px 22px rgba(0, 0, 0, 0.45);
- --shadow-3: 0 8px 30px rgba(0, 0, 0, 0.5);
- }
- ha-card {
- overflow: visible; /* overflow:hidden breaks position:sticky on the header */
- }
- .empty {
- padding: 40px 24px;
- color: var(--hp-txt);
- text-align: center;
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: var(--sp-4);
- }
- .empty .big {
- --mdc-icon-size: 56px;
- color: var(--hp-accent);
- opacity: 0.7;
- }
- .empty .muted {
- color: var(--hp-muted);
- font-size: var(--fs-m);
- margin: 0;
- }
- .empty .btn {
- margin-top: var(--sp-4);
- }
- .fixedfloor-loading {
- animation: fixedfloor-spin 1.1s linear infinite;
- }
- .fixedfloor-error p {
- max-width: 42rem;
- margin: 0;
- overflow-wrap: anywhere;
- }
- @keyframes fixedfloor-spin {
- to { transform: rotate(360deg); }
- }
- @media (prefers-reduced-motion: reduce) {
- .fixedfloor-loading { animation: none; }
- }
- .hdr {
- position: sticky;
- top: var(--header-height, 56px);
- z-index: 20;
- background: var(--card-background-color, var(--hp-bg));
- border-radius: var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px) 0 0;
- }
- .head {
- display: flex;
- align-items: center;
- gap: 10px;
- padding: 10px var(--sp-5);
- border-bottom: 1px solid var(--hp-line);
- flex-wrap: wrap;
- }
- .title {
- font-size: var(--fs-l);
- font-weight: 600;
- display: flex;
- align-items: center;
- gap: var(--sp-3);
- white-space: nowrap;
- }
- .title ha-icon {
- color: var(--hp-accent);
- --mdc-icon-size: 18px;
- }
- .tabs {
- display: flex;
- gap: var(--sp-2);
- background: rgba(127, 127, 127, 0.12);
- padding: var(--sp-2);
- border-radius: var(--rad-l);
- flex-wrap: wrap;
- }
- @media (max-width: 620px) {
- .head { gap: var(--sp-3); padding: var(--sp-4) 10px; }
- .head .count { display: none; }
- .head .title { font-size: var(--fs-m); }
- }
- .tab {
- border: 0;
- background: transparent;
- color: var(--hp-muted);
- display: inline-flex;
- align-items: center;
- padding: var(--sp-3) var(--sp-5);
- border-radius: var(--rad-m);
- font-size: var(--fs-m);
- font-weight: 600;
- cursor: pointer;
- transition: 0.15s;
- font-family: inherit;
- }
- :host([data-pointer-hover]) .tab:hover {
- color: var(--hp-txt);
- }
- .tab.active {
- background: var(--hp-accent);
- color: var(--text-primary-color, #fff);
- }
- .count {
- font-size: var(--fs-s);
- color: var(--hp-muted);
- }
- .spacer {
- flex: 1;
- }
- .btn {
- display: inline-flex;
- align-items: center;
- gap: var(--sp-3);
- border: 1px solid var(--hp-line);
- background: transparent;
- color: var(--hp-txt);
- padding: var(--sp-3) 10px;
- border-radius: var(--rad-m);
- cursor: pointer;
- transition: 0.15s;
- font-family: inherit;
- font-size: var(--fs-m);
- }
- .btn ha-icon {
- --mdc-icon-size: 17px;
- }
- :host([data-pointer-hover]) .btn:hover {
- border-color: var(--hp-accent);
- }
- .btn.on {
- background: var(--hp-accent);
- color: var(--text-primary-color, #fff);
- border-color: var(--hp-accent);
- }
- .btn.ghost {
- border: none;
- }
- .btn[disabled] {
- opacity: 0.5;
- pointer-events: none;
- }
- .stage.noplan {
- background: #ffffff;
- }
- /* Editors always keep the white drawing sheet — even when a backdrop
- image is loaded. Without this, a picture plan painted the theme card
- colour under the grid (owner 2026-08-05). View keeps the historical
- theme / .noplan split. */
- .stage.mode-plan,
- .stage.mode-devices,
- .stage.mode-decor {
- background: #ffffff;
- }
- .stage {
- position: relative;
- width: 100%;
- container-type: inline-size;
- overflow: hidden;
- touch-action: none; /* custom pinch/pan gestures */
- background: var(--ha-card-background, var(--card-background-color, #111));
- }
- .zoomwrap {
- position: absolute;
- inset: 0;
- z-index: 1;
- }
- .stage.mode-transition,
- .stage.mode-transition .zoomwrap {
- transition: none !important;
- }
- .stage.mode-transition .hp-view-only-layer,
- .stage.mode-transition .hp-editor-only-layer {
- pointer-events: none;
- will-change: opacity;
- }
- .stage.mode-transition .hp-paper {
- fill: var(--hp-mode-paper) !important;
- }
- /* Four-phase environment (#146): constant layers cross-fade because CSS
- gradients themselves are not reliably interpolated. Everything stays
- behind the plan; the plan tree is never dimmed, tinted or faded. */
- .hp-day-cycle-env {
- position: absolute;
- inset: 0;
- z-index: 0;
- overflow: hidden;
- pointer-events: none;
- isolation: isolate;
- }
- .hp-day-cycle-bg {
- position: absolute;
- inset: 0;
- opacity: 0;
- overflow: hidden;
- transition: opacity 1100ms cubic-bezier(.22, .61, .36, 1);
- }
- .hp-day-cycle-bg.active { opacity: 1; }
- .hp-day-cycle-sun {
- position: absolute;
- left: var(--hp-day-cycle-sun-x);
- top: var(--hp-day-cycle-sun-y);
- width: clamp(140px, 25cqw, 250px);
- height: clamp(140px, 25cqw, 250px);
- transform: translate(-50%, -50%);
- border-radius: 50%;
- filter: blur(10px);
- opacity: var(--hp-day-cycle-sun-opacity);
- transition:
- left 1100ms cubic-bezier(.22, .61, .36, 1),
- top 1100ms cubic-bezier(.22, .61, .36, 1),
- opacity 1100ms cubic-bezier(.22, .61, .36, 1);
- }
- .stage.mode-transition .hp-day-cycle-env { transition: none; }
- .stage.daycycle .hp-paperg,
- .hp-static-stage.daycycle .hp-paperg {
- filter:
- drop-shadow(0 0 1px var(--hp-day-cycle-outline-near))
- drop-shadow(0 0 5px var(--hp-day-cycle-outline-mid))
- drop-shadow(0 0 10px var(--hp-day-cycle-outline-far));
- transition: filter 1100ms cubic-bezier(.22, .61, .36, 1);
- }
- @media (prefers-reduced-motion: reduce) {
- .hp-day-cycle-bg,
- .hp-day-cycle-sun,
- .stage.daycycle .hp-paperg,
- .hp-static-stage.daycycle .hp-paperg {
- transition: none;
- }
- }
- .sunlayer {
- pointer-events: none;
- }
- /* the compass dial in the general settings (docs/SUN.md) */
- .sunrow {
- display: flex;
- align-items: center;
- gap: var(--sp-5);
- margin: var(--sp-3) 0;
- }
- .suncol {
- flex: 1;
- display: flex;
- flex-direction: column;
- gap: var(--sp-3);
- min-width: 0;
- }
- .compass {
- width: 120px;
- height: 120px;
- flex: none;
- touch-action: none;
- cursor: grab;
- user-select: none;
- }
- .compass:active {
- cursor: grabbing;
- }
- .compass .cring {
- fill: rgba(255, 255, 255, 0.04);
- stroke: var(--divider-color, #444);
- stroke-width: 2;
- }
- .compass .ctick {
- stroke: var(--secondary-text-color, #9aa4ad);
- stroke-width: 2;
- }
- .compass .ctick.minor {
- stroke-width: 1;
- opacity: 0.6;
- }
- .compass .cneedle line {
- stroke: var(--primary-color, #3ea6ff);
- stroke-width: 2.5;
- stroke-linecap: round;
- }
- .compass .cneedle path {
- fill: var(--primary-color, #3ea6ff);
- }
- .compass .cneedle text {
- fill: var(--text-primary-color, #fff);
- font-size: 11px;
- font-weight: 700;
- }
- .compass .cdeg {
- fill: var(--secondary-text-color, #9aa4ad);
- font-size: 13px;
- }
- .compass.unset .cneedle {
- opacity: 0.35;
- }
- /* HP-1552: first-open boot veil — the plan hides until the stage height settles */
- .stage.hpboot .zoomwrap,
- .stage.hpboot .zoombadge {
- visibility: hidden;
- }
- /* AUD-1552-02: post-veil grace — HA chrome landing after the cap moves
- the stage height smoothly; the viewport ResizeObserver refits the plan
- along the transition, so a late panel glides instead of jumping. */
- .stage.hpsettle {
- transition: height 0.25s ease;
- }
- .bootveil {
- position: absolute;
- inset: 0;
- z-index: 40;
- display: flex;
- align-items: center;
- justify-content: center;
- background: var(--hp-bg, #16212e);
- opacity: 1;
- transition: opacity 0.15s ease;
- pointer-events: none;
- }
- .bootveil.off {
- opacity: 0;
- }
- .bootveil .boothouse {
- position: static; /* the main .zoomwrap SVG is pinned to inset:0 — not this icon */
- width: 56px;
- height: 56px;
- fill: var(--hp-accent);
- opacity: 0.85;
- animation: hp-boot-pulse 1.3s ease-in-out infinite;
- }
- .recoveryoverlay {
- position: absolute;
- inset: 0;
- /* Above the contextual editor tray (70): recovery is the one state in
- which every stage-editing surface must be inert. Dialogs live outside
- the stage and retain their own higher card-level stacking context. */
- z-index: 75;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- gap: var(--sp-4);
- padding: var(--sp-6);
- box-sizing: border-box;
- /* The final solid layer guarantees an opaque recovery surface even when
- a custom HA theme exposes its card colour as rgba(). */
- background:
- linear-gradient(var(--ha-card-background, var(--card-background-color, #111)),
- var(--ha-card-background, var(--card-background-color, #111))),
- #111;
- color: var(--primary-text-color, #fff);
- text-align: center;
- pointer-events: auto;
- transition: opacity 0.15s ease;
- }
- .recoveryoverlay.phase-entering,
- .recoveryoverlay.phase-leaving {
- opacity: 0;
- }
- .recoveryoverlay.phase-fading-in,
- .recoveryoverlay.phase-opaque {
- opacity: 1;
- }
- .recoveryoverlay ha-icon {
- --mdc-icon-size: 44px;
- color: var(--hp-accent);
- }
- @keyframes hp-boot-pulse {
- 0%, 100% { opacity: 0.3; transform: scale(0.94); }
- 50% { opacity: 0.9; transform: scale(1); }
- }
- @media (prefers-reduced-motion: reduce) {
- .bootveil .boothouse {
- animation: none;
- opacity: 0.7;
- }
- .recoveryoverlay {
- transition: none;
- }
- .stage.hpsettle {
- transition: none;
- }
- }
- .zoomctl {
- display: inline-flex;
- gap: var(--sp-1);
- background: rgba(127, 127, 127, 0.12);
- border-radius: var(--rad-m);
- padding: var(--sp-1);
- }
- .zoomctl .zb {
- border: none;
- padding: var(--sp-3) var(--sp-4);
- }
- .zoomctl .zb[disabled] {
- opacity: 0.4;
- pointer-events: none;
- }
- .projection-toggle {
- min-width: 44px;
- min-height: 44px;
- justify-content: center;
- padding: var(--sp-3);
- }
- /* docs/CANVAS.md §4.1: objects an order of magnitude away from the plan
- do not decide the opening view — one quiet chip says so and offers to
- take them in. Never a modal (owner). */
- .farhint {
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
- bottom: var(--sp-4);
- z-index: 12;
- display: flex;
- align-items: center;
- gap: var(--sp-2);
- max-width: calc(100% - var(--sp-8));
- background: var(--card-background-color, var(--hp-bg));
- opacity: 0.94;
- color: var(--hp-txt);
- border: 1px solid var(--divider-color, #33404d);
- border-radius: var(--rad-m);
- padding: var(--sp-1) var(--sp-3);
- font-size: var(--fs-s);
- }
- .farhint ha-icon {
- --mdc-icon-size: 18px;
- color: var(--hp-warn, #e2a03f);
- flex: none;
- }
- .farhint span {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- /* docs/CANVAS.md §5: the plane has no edges, so you can pan until nothing
- is on screen. One pointer home, one click back. */
- .homearrow {
- position: absolute;
- z-index: 12;
- transform: translate(-50%, -50%);
- width: 40px;
- height: 40px;
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- cursor: pointer;
- background: var(--card-background-color, var(--hp-bg));
- color: var(--hp-accent);
- border: 1px solid var(--hp-accent);
- opacity: 0.9;
- padding: 0;
- }
- .homearrow ha-icon {
- --mdc-icon-size: 22px;
- line-height: 1;
- }
- .zoombadge {
- position: absolute;
- z-index: 12;
- left: var(--sp-4);
- bottom: var(--sp-4);
- background: var(--card-background-color, var(--hp-bg));
- opacity: 0.92;
- color: var(--hp-txt);
- border: 1px solid var(--hp-accent);
- border-radius: var(--rad-m);
- padding: var(--sp-1) var(--sp-4);
- font-size: var(--fs-s);
- font-weight: 600;
- pointer-events: none;
- }
- /* Only the plan canvas owns the whole zoom wrapper. Context trays now live
- inside .stage as well, and may contain small SVG previews (furniture in
- particular); the old descendant-wide stage-SVG selector stretched every
- preview over the tray and stacked them into one blocking artefact. The
- vacuum trail/fit overlays have their own explicit geometry below. */
- .zoomwrap > svg {
- position: absolute;
- inset: 0;
- width: 100%;
- height: 100%;
- display: block;
- }
- .plan-svg { z-index: 1; }
- .iso-underlay-svg { z-index: 0; overflow: visible; }
- .iso-shadows-svg { z-index: 3; overflow: visible; }
- .iso-walls-svg {
- z-index: 4;
- overflow: visible;
- }
- .iso-underlay-svg,
- .iso-shadows-svg,
- .iso-walls-svg,
- .iso-underlay,
- .iso-shadows,
- .iso-walls,
- .iso-openings {
- pointer-events: none;
- }
- .iso-side-hi { stop-color: #b9bdbe; }
- .iso-side-lo { stop-color: #969c9f; }
- .iso-top-hi { stop-color: #fafaf7; }
- .iso-top-lo { stop-color: #e2e4e2; }
- .iso-wall-side {
- fill: url(#hp-iso-wall-side) #a8acae;
- stroke: #92989b;
- stroke-width: 0.7;
- vector-effect: non-scaling-stroke;
- }
- .iso-wall-top {
- fill: url(#hp-iso-wall-top) #f3f3f1;
- stroke: #d7d9d8;
- stroke-width: 0.8;
- vector-effect: non-scaling-stroke;
- }
- .iso-floor-side {
- fill: #858b8d;
- stroke: #71787b;
- stroke-width: 0.7;
- vector-effect: non-scaling-stroke;
- }
- .iso-opening-panel {
- fill: #d7d9d7;
- fill-opacity: 0.96;
- stroke: #7f878b;
- stroke-width: 0.9;
- vector-effect: non-scaling-stroke;
- }
- .iso-opening-panel.iso-window {
- fill: #dfeff4;
- fill-opacity: 0.72;
- stroke: #8aa7b1;
- }
- .iso-ambient-shadow {
- fill: rgba(15, 21, 25, 0.22);
- filter: url(#hp-iso-ambient-shadow);
- }
- .iso-contact-shadow {
- fill: none;
- stroke: rgba(22, 28, 31, 0.25);
- stroke-width: 3;
- filter: url(#hp-iso-contact-shadow);
- vector-effect: non-scaling-stroke;
- }
- .iso-leaf-shadow {
- fill: none;
- stroke: rgba(18, 23, 27, 0.24);
- stroke-width: 4;
- filter: url(#hp-iso-leaf-shadow);
- vector-effect: non-scaling-stroke;
- }
- @media (prefers-color-scheme: dark) {
- .iso-side-hi { stop-color: #4c555a; }
- .iso-side-lo { stop-color: #343c40; }
- .iso-top-hi { stop-color: #687176; }
- .iso-top-lo { stop-color: #50585d; }
- .iso-wall-side { stroke: #30373b; }
- .iso-wall-top { stroke: #7b858a; }
- .iso-floor-side { fill: #2d3438; stroke: #20272a; }
- .iso-opening-panel { fill: #626b70; stroke: #899399; }
- .iso-opening-panel.iso-window { fill: #75919b; stroke: #abc6ce; }
- .iso-ambient-shadow { fill: rgba(0, 0, 0, 0.34); }
- .iso-contact-shadow, .iso-leaf-shadow { stroke: rgba(0, 0, 0, 0.38); }
- }
- @media (forced-colors: active) {
- .iso-wall-side, .iso-wall-top, .iso-floor-side, .iso-opening-panel {
- fill: Canvas;
- stroke: CanvasText;
- forced-color-adjust: auto;
- }
- .iso-ambient-shadow, .iso-contact-shadow, .iso-leaf-shadow { display: none; }
- }
- @supports not (filter: blur(1px)) {
- .iso-ambient-shadow, .iso-contact-shadow, .iso-leaf-shadow { display: none; }
- }
- /* Opaque plan paper (owner 2026-08-03): the scene bg_color / daynight sky
- shows ONLY around the plan, never through it. The colour is the
- pre-bg_color canvas — the theme card background under an image plan,
- plain white for a hand-drawn one (.stage.noplan). On drawn plans the
- paper is per-room shapes following the room contours — fill only,
- never a stroke, so the paper cannot poke past a wall. Night dimming
- comes from the .zoomwrap brightness filter, never from alpha
- (docs/SUN.md). */
- .hp-paper {
- fill: var(--ha-card-background, var(--card-background-color, #111));
- stroke: none;
- }
- .stage.noplan .hp-paper,
- .stage.mode-plan .hp-paper,
- .stage.mode-devices .hp-paper,
- .stage.mode-decor .hp-paper {
- fill: #ffffff;
- }
- /* Owner 2026-08-04: «углы границ комнат всё ещё с зубцами». A miter join
- on a 30-45° corner shoots a spike far past the wall (and flips to an
- ugly bevel once past the miter limit) — the same defect the decor lines
- had before they got round caps. Every room border, in EVERY renderer
- that reuses these styles (plan view, plan editor, static space-card),
- joins its walls with a ROUND join instead: the corner reads as the
- stroke's own radius, never as a tooth. The linecap matters only for the
- open outlines below, but it costs nothing to state it here. */
- .room {
- transition: 0.12s;
- cursor: default; /* v1.40.1: rooms are not clickable — the label's link icon is */
- stroke-linejoin: round;
- stroke-linecap: round;
- }
- .room.overlay {
- fill: transparent;
- stroke: transparent;
- stroke-width: calc(2px * var(--hp-cell-visual-scale, 1));
- }
- :host([data-pointer-hover]) .stage.mode-view .room.overlay:not(.styled):hover {
- stroke: var(--hp-accent);
- stroke-opacity: 1;
- }
- .room.yard {
- fill: rgba(75, 140, 90, 0.14);
- stroke: #4b8c5a;
- stroke-width: calc(2px * var(--hp-cell-visual-scale, 1));
- }
- :host([data-pointer-hover]) .stage.mode-view .room.yard:not(.styled):hover {
- stroke: var(--hp-accent);
- stroke-opacity: 1;
- }
- .room.styled {
- stroke: var(--room-stroke, transparent);
- stroke-opacity: var(--room-stroke-op, 0);
- stroke-width: calc(2.5px * var(--hp-cell-visual-scale, 1));
- fill: var(--room-fill, transparent);
- fill-opacity: var(--room-fill-op, 0);
- }
- .glow-base-layer,
- .glow-base-tunnels,
- .glow-pools-frame,
- .glow-pools,
- .glow-spot {
- pointer-events: none;
- }
- /* The parent isolates all source spots from the room data fill, Glow base,
- paper and backdrop. A spot is one circle clipped to the floor its lamp
- can see, so the whole spot screen-blends as a single primitive — there is
- no mask left to be dropped on a promoted layer. Per-stop alpha already
- contains the shared 0.7 ceiling; the spot opacity below only animates
- between 0 and 1 and is never another persistent alpha ceiling. */
- .glow-pools-frame,
- .glow-pools,
- .glow-spot {
- isolation: isolate;
- }
- .glow-pools.blend-screen .glow-spot {
- mix-blend-mode: screen;
- }
- .glow-spot {
- opacity: 1;
- transition: opacity 500ms ease;
- }
- .glow-spot.is-entering,
- .glow-spot.is-leaving {
- opacity: 0;
- }
- @media (prefers-reduced-motion: reduce) {
- .glow-spot {
- transition: none;
- }
- }
- /* The explicit late room-hover layer owns the wash and halo. Keeping CSS
- filters off room paths prevents Chromium from recompositing the sibling
- screen-blended Glow layer for one bright frame on every hover. */
- :host([data-pointer-hover]) .stage.mode-view .room.styled:hover {
- stroke: var(--hp-accent);
- stroke-opacity: 1;
- }
- /* doors, windows & gates */
- .op-leaf {
- transition: transform 0.6s ease;
- }
- .op-arc {
- stroke-width: calc(1.5px * var(--hp-cell-visual-scale, 1));
- transition: stroke-dashoffset 0.6s ease;
- }
- /* hover affordance: a rounded outline hugging the wall strip + a grab cursor */
- .op-outline {
- fill: none;
- stroke: var(--hp-accent);
- stroke-width: calc(1.5px * var(--hp-cell-visual-scale, 1));
- opacity: 0;
- transition: opacity 0.15s;
- pointer-events: none;
- }
- :host([data-pointer-hover]) .stage.markup g.opening:hover .op-outline {
- opacity: 0.9;
- }
- /* openings are pure status graphics outside Plan mode: no cursor, no hover,
- no hit target — View must not interact with them at all */
- .op-hit {
- fill: transparent;
- pointer-events: none;
- cursor: default;
- }
- .stage.markup .op-hit {
- pointer-events: auto;
- cursor: grab;
- touch-action: none; /* drags, not scrolls, on touch */
- }
- .stage.markup .op-hit:active {
- cursor: grabbing;
- }
- .stage.markup .opening.orphan {
- pointer-events: auto;
- cursor: pointer;
- color: var(--error-color, #db4437);
- }
- .stage.markup .opening.orphan circle {
- fill: var(--hp-bg);
- stroke: currentColor;
- stroke-width: calc(2px * var(--hp-cell-visual-scale, 1));
- }
- .stage.markup .opening.orphan text {
- fill: currentColor;
- font-weight: 800;
- font-size: calc(12px * var(--hp-cell-visual-scale, 1));
- pointer-events: none;
- }
- /* HP-1550-04: in the resize tool the wall handles own the hit test — the
- transparent .op-hit of a door at the midpoint of a wall used to sit ON
- TOP of the handle and made that wall ungrabbable for both rooms.
- Openings are not editable in this tool (they ride along with the wall),
- so their hit area goes fully inert; every other Plan tool is untouched. */
- .stage.markup.tool-resize .op-hit {
- pointer-events: none;
- cursor: default;
- }
- .oplock {
- --oplock-size: calc(var(--icon-size, 2.5cqw) * 0.62);
- --oplock-core-size: calc(var(--oplock-size) / 1.26875);
- --oplock-stroke-ratio: 0.01875;
- --oplock-stroke-width: max(1px, calc(var(--oplock-core-size) * var(--oplock-stroke-ratio)));
- --oplock-core-bg: light-dark(#fff, #252525);
- --oplock-core-fg: light-dark(#252525, #fff);
- --oplock-shell-stroke: light-dark(#BCBCBC, rgb(37 37 37 / 75%));
- --oplock-shell-shadow:
- 0 calc(var(--oplock-core-size) * .025) calc(var(--oplock-core-size) * .05) rgb(37 40 45 / 12%),
- 0 calc(var(--oplock-core-size) * .1) calc(var(--oplock-core-size) * .175)
- calc(var(--oplock-core-size) * -.025) rgb(37 40 45 / 18%);
- --oplock-core-shadow: 0 0 0 0 transparent;
- pointer-events: none; /* inert while editing; clickable in View (rule below) */
- position: absolute;
- transform: translate(-50%, -50%);
- width: var(--oplock-size);
- height: var(--oplock-size);
- display: grid;
- place-items: center;
- border: 0;
- background: transparent;
- z-index: 1;
- }
- .oplock.theme-light {
- --oplock-core-bg: #fff;
- --oplock-core-fg: #252525;
- --oplock-shell-stroke: #BCBCBC;
- }
- .oplock.theme-dark {
- --oplock-core-bg: #252525;
- --oplock-core-fg: #fff;
- --oplock-shell-stroke: rgb(37 37 37 / 75%);
- --oplock-core-shadow:
- inset 0 calc(var(--oplock-core-size) * .0125)
- calc(var(--oplock-core-size) * .0125) rgb(255 255 255 / 70%);
- }
- .stage.mode-view .oplock {
- pointer-events: auto;
- cursor: pointer;
- }
- .oplock-shell {
- box-sizing: border-box;
- width: 100%;
- height: 100%;
- border: var(--oplock-stroke-width) solid var(--oplock-shell-stroke);
- border-radius: 50%;
- background: transparent;
- box-shadow: var(--oplock-shell-shadow);
- display: grid;
- place-items: center;
- pointer-events: none;
- backdrop-filter: none;
- }
- .oplock-core {
- width: var(--oplock-core-size);
- height: var(--oplock-core-size);
- border-radius: 50%;
- background: var(--oplock-core-bg);
- color: var(--oplock-core-fg);
- box-shadow: var(--oplock-core-shadow);
- display: grid;
- place-items: center;
- pointer-events: none;
- }
- .oplock ha-icon {
- --mdc-icon-size: calc(var(--oplock-core-size) * 0.55);
- display: flex;
- line-height: 0;
- }
- .oplock.locked {
- --oplock-core-bg: #66D17A;
- --oplock-core-fg: light-dark(#fff, #252525);
- --oplock-shell-stroke: #66D17A;
- }
- .oplock.theme-light.locked { --oplock-core-fg: #fff; }
- .oplock.theme-dark.locked {
- --oplock-core-fg: #252525;
- --oplock-stroke-ratio: .025;
- }
- .oplock.unlocked {
- --oplock-core-bg: #F0410C;
- --oplock-core-fg: light-dark(#fff, #252525);
- --oplock-shell-stroke: #F0410C;
- }
- .oplock.theme-light.unlocked { --oplock-core-fg: #fff; }
- .oplock.theme-dark.unlocked {
- --oplock-core-fg: #252525;
- --oplock-stroke-ratio: .025;
- }
- .oplock.unknown { --oplock-core-fg: var(--hp-muted); }
- .btn.lockact {
- width: 100%;
- justify-content: center;
- display: flex;
- align-items: center;
- gap: var(--sp-3);
- margin-top: var(--sp-4);
- }
- .btn.lockact.warn {
- color: var(--error-color, #d33);
- border-color: var(--error-color, #d33);
- }
- .oprow {
- display: flex;
- align-items: center;
- gap: var(--sp-4);
- padding: var(--sp-3) 0;
- }
- .oprow b { margin-left: auto; }
- .oprow.ok b { color: #66d17a; }
- .oprow.warn b { color: var(--hp-open); }
- @media (prefers-reduced-motion: reduce) {
- .op-leaf, .op-arc { transition: none; }
- }
- /* Unified device activity: alarm, short event and continuous state all
- share this one renderer. No static rings are allowed. */
- .dev ha-icon {
- position: relative;
- z-index: 1;
- }
- .device-pulse {
- position: absolute;
- left: 50%;
- top: 50%;
- width: var(--dev-size);
- height: var(--dev-size);
- transform: translate(-50%, -50%);
- pointer-events: none;
- z-index: 0;
- }
- .device-pulse i {
- position: absolute;
- inset: 0;
- border-radius: 50%;
- border: 2px solid var(--ripple-color, var(--hp-accent));
- opacity: 0;
- }
- /* A witnessed edge: exactly three waves over the 3.3 s runtime window. */
- .device-pulse.short i {
- animation: hp-pulse-short 1.1s cubic-bezier(.22,.61,.36,1) 1 forwards;
- }
- .device-pulse.short i:nth-child(2) { animation-delay: 1.1s; }
- .device-pulse.short i:nth-child(3) { animation-delay: 2.2s; }
- .device-pulse.short.gen2 i { animation-name: hp-pulse-short-b; }
- .device-pulse.continuous i:nth-child(n + 2),
- .device-pulse.alarm i:nth-child(n + 3) { display: none; }
- .device-pulse.continuous i:first-child {
- animation: hp-pulse-continuous 3.6s cubic-bezier(.45,.05,.55,.95) infinite;
- }
- .device-pulse.alarm i {
- border-width: 3px;
- border-color: #F0410C;
- animation: hp-pulse-alarm 2.4s cubic-bezier(.22,.61,.36,1) infinite;
- }
- .device-pulse.alarm i:nth-child(2) { animation-delay: 1.2s; }
- @keyframes hp-pulse-short {
- 0% { transform: scale(1); opacity: 0.55; }
- 70% { opacity: 0.22; }
- 100% { transform: scale(var(--ripple-scale, 1.5)); opacity: 0; }
- }
- /* Alternate identity: a rapid retrigger restarts the browser timeline. */
- @keyframes hp-pulse-short-b {
- 0% { transform: scale(1); opacity: 0.55; }
- 70% { opacity: 0.22; }
- 100% { transform: scale(var(--ripple-scale, 1.5)); opacity: 0; }
- }
- @keyframes hp-pulse-continuous {
- 0% { transform: scale(1); opacity: 0.55; }
- 65% { opacity: 0.18; }
- 100% { transform: scale(var(--ripple-scale, 1.5)); opacity: 0; }
- }
- @keyframes hp-pulse-alarm {
- 0% { transform: scale(1); opacity: 0.72; }
- 100% { transform: scale(1.5); opacity: 0; }
- }
- .activity-dot {
- position: absolute;
- right: 8%;
- bottom: 8%;
- width: 18%;
- height: 18%;
- min-width: 4px;
- min-height: 4px;
- border-radius: 50%;
- background: var(--ripple-color, var(--hp-accent));
- border: 1px solid color-mix(in srgb, var(--hp-bg) 82%, transparent);
- pointer-events: none;
- z-index: 3;
- }
- .roomlabel {
- pointer-events: none; /* draggable only in plan mode (rule below) */
- position: absolute;
- transform: translate(-50%, -50%);
- font-size: calc(var(--rl-icon-size, var(--icon-size, 2.5cqw)) * 0.5 * var(--rl-scale, 1) * var(--rl-font, 1) * var(--rl-space, 1));
- font-weight: 700;
- letter-spacing: 0.04em;
- white-space: nowrap;
- cursor: grab;
- user-select: none;
- z-index: 1;
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 0.15em;
- text-align: center;
- }
- .rlname {
- display: inline-flex;
- align-items: center;
- gap: 0.25em;
- font-size: calc(1em * var(--rl-name, 1));
- }
- /* Space changes keep their direction, but travel only a few percent: the
- motion explains what changed without making the whole plan fly around. */
- @keyframes hp-slide-left {
- 0% { transform: translateX(4%); opacity: 0.72; }
- 100% { transform: translateX(0); opacity: 1; }
- }
- @keyframes hp-slide-right {
- 0% { transform: translateX(-4%); opacity: 0.72; }
- 100% { transform: translateX(0); opacity: 1; }
- }
- .zoomwrap.slide-left { animation: hp-slide-left 0.18s cubic-bezier(0.2, 0.7, 0.2, 1); }
- .zoomwrap.slide-right { animation: hp-slide-right 0.18s cubic-bezier(0.2, 0.7, 0.2, 1); }
- @media (prefers-reduced-motion: reduce) {
- .zoomwrap.slide-left,
- .zoomwrap.slide-right { animation: none; }
- }
- /* The name is the anchor: the label box is centred on the room point, so
- anything that takes part in its layout SHIFTS THE NAME. The gear button
- and the metrics hang below as absolutes — the name renders in exactly
- the same place in view mode and in the plan editor (owner's request),
- and the button sits at the very bottom of the card. */
- /* Standalone, centred on the room, sized from the device icon: icon-size
- already rescales with the view, so the button zooms WITH the plan
- instead of keeping a constant screen size (owner's spec). */
- .rlgearbtn {
- --gear-h: calc(var(--icon-size, 2.5cqw) * 0.77); /* owner: half the previous size */
- position: absolute;
- /* dead-centred on the room, both axes (owner's spec) */
- transform: translate(-50%, -50%);
- display: inline-flex;
- align-items: center;
- gap: 0.35em;
- height: var(--gear-h);
- padding: 0 calc(var(--gear-h) * 0.38);
- border: 0;
- border-radius: 999px;
- background: var(--hp-accent);
- color: var(--text-primary-color, #fff);
- font: inherit;
- font-size: calc(var(--gear-h) * 0.42);
- font-weight: 600;
- line-height: 1;
- white-space: nowrap;
- cursor: pointer;
- pointer-events: auto;
- opacity: 0.92;
- box-shadow: var(--shadow-1);
- z-index: 2;
- }
- .rlgearbtn { transition: opacity 0.15s, filter 0.15s; }
- :host([data-pointer-hover]) .rlgearbtn:hover { opacity: 1; filter: brightness(1.18); }
- .rlgearbtn ha-icon { --mdc-icon-size: calc(var(--gear-h) * 0.55); display: inline-flex; }
- .rlgear {
- --mdc-icon-size: 0.9em;
- display: inline-flex;
- margin-right: 0.2em;
- opacity: 0.6;
- cursor: pointer;
- pointer-events: auto;
- }
- :host([data-pointer-hover]) .rlgear:hover { opacity: 1; }
- .rlgo {
- --mdc-icon-size: 0.85em;
- display: inline-flex;
- opacity: 0.55;
- }
- .stage.mode-view .rlgo {
- pointer-events: auto;
- cursor: pointer;
- }
- :host([data-pointer-hover]) .stage.mode-view .rlgo:hover { opacity: 1; }
- .roomlabel .rlmetrics {
- position: absolute; /* below the name, outside the centring math */
- top: calc(100% + 0.15em);
- left: 50%;
- transform: translateX(-50%);
- white-space: nowrap;
- display: flex;
- align-items: center;
- gap: 0.55em;
- font-size: calc(0.75em * var(--rl-meta, 1)); /* feedback: 0.62 was unreadable on a tablet */
- font-weight: 600;
- letter-spacing: 0.02em;
- opacity: 0.9;
- }
- .roomlabel .rlm {
- display: inline-flex;
- align-items: center;
- gap: 0.12em;
- }
- .roomlabel .rlm ha-icon {
- --mdc-icon-size: 1.05em;
- display: inline-flex;
- }
- .roomlabel .rlm.lit { opacity: 1; }
- .bindharow {
- display: flex;
- align-items: center;
- gap: var(--sp-5);
- flex-wrap: wrap;
- }
- .bindharow .entcheck { opacity: 0.9; }
- .dropbtn {
- display: flex;
- align-items: center;
- gap: var(--sp-4);
- width: 100%;
- text-align: left;
- border: 1px solid var(--hp-muted);
- border-radius: var(--rad-m);
- background: transparent;
- color: var(--hp-txt);
- padding: var(--sp-4) 10px;
- cursor: pointer;
- font-family: inherit;
- font-size: var(--fs-m);
- margin-top: var(--sp-3);
- }
- .dropbtn .ref { color: var(--hp-muted); font-size: var(--fs-s); margin-left: auto; }
- .dropbtn ha-icon { --mdc-icon-size: 18px; margin-left: var(--sp-2); }
- .dropbtn.open { border-color: var(--hp-accent); }
- .droppanel {
- border: 1px solid var(--hp-accent);
- border-top: none;
- border-radius: 0 0 var(--rad-m) var(--rad-m);
- padding: var(--sp-3);
- margin-top: -4px;
- }
- .ctrlchips { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-2) 0; }
- .ctrlchip {
- display: inline-flex; align-items: center; gap: var(--sp-2);
- background: var(--hp-accent); color: var(--text-primary-color, #fff);
- border-radius: var(--rad-l); padding: var(--sp-2) var(--sp-4); font-size: var(--fs-s);
- }
- .ctrlchip ha-icon { --mdc-icon-size: 14px; cursor: pointer; }
- .ctrllist { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-2); }
- .ctrlopt {
- display: flex; align-items: center; gap: var(--sp-4); text-align: left;
- border: 0; background: transparent; color: var(--hp-txt);
- padding: var(--sp-3) var(--sp-4); border-radius: var(--rad-s); cursor: pointer; font-family: inherit; font-size: var(--fs-m);
- }
- :host([data-pointer-hover]) .ctrlopt:hover {
- background: var(--secondary-background-color, rgba(128,128,128,0.15));
- }
- .ctrlopt .sub { color: var(--hp-muted); font-size: var(--fs-s); margin-left: auto; }
- .ctrlopt ha-icon { --mdc-icon-size: 16px; }
- .ctrlstates { display: flex; flex-direction: column; gap: var(--sp-2); }
- .ctrlstate { display: inline-flex; align-items: center; gap: var(--sp-3); color: var(--hp-muted); }
- .ctrlstate.on { color: var(--hp-txt); }
- .ctrlstate ha-icon { --mdc-icon-size: 15px; }
- .cardpreview {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: var(--sp-2);
- margin: var(--sp-4) 0 var(--sp-1);
- padding: 10px;
- border: 1px dashed var(--hp-muted);
- border-radius: var(--rad-m);
- }
- .cardpreview .cpname { font-weight: 700; letter-spacing: 0.04em; }
- .cardpreview .cpmeta {
- display: inline-flex;
- align-items: center;
- gap: 0.3em;
- font-weight: 600;
- opacity: 0.85;
- }
- .cardpreview .cpmeta ha-icon { --mdc-icon-size: 1.05em; }
- .iconauto {
- display: flex;
- align-items: center;
- gap: var(--sp-3);
- font-size: var(--fs-s);
- margin: var(--sp-2) 0 0;
- }
- .iconauto ha-icon { --mdc-icon-size: 18px; }
- .iconauto span { flex: 1; }
- .iconauto .btn { min-height: 32px; padding: 0 var(--sp-3); }
- .rlhandle {
- display: none;
- position: absolute;
- width: 9px;
- height: 9px;
- border-radius: 2px;
- background: var(--hp-accent);
- border: 1px solid var(--card-background-color, #fff);
- z-index: 2;
- }
- .rlhandle.tl { left: -6px; top: -6px; cursor: nwse-resize; }
- .rlhandle.br { right: -6px; bottom: -6px; cursor: nwse-resize; }
- .rlhandle.tr { right: -6px; top: -6px; cursor: nesw-resize; }
- .rlhandle.bl { left: -6px; bottom: -6px; cursor: nesw-resize; }
- :host([data-pointer-hover]) .stage.markup .roomlabel:hover .rlhandle { display: block; }
- .stage.markup .roomlabel { pointer-events: auto; }
- .roomlabel:active { cursor: grabbing; }
- .measurelayer {
- position: absolute;
- inset: 0;
- pointer-events: none;
- }
- .alignline {
- stroke: var(--hp-accent);
- stroke-width: calc(1.2px * var(--hp-cell-visual-scale, 1));
- stroke-dasharray:
- calc(4px * var(--hp-cell-visual-scale, 1))
- calc(4px * var(--hp-cell-visual-scale, 1));
- pointer-events: none;
- opacity: 0.9;
- }
- .aligndot {
- fill: var(--hp-accent);
- pointer-events: none;
- }
- .measurelabel.on45 {
- color: #4bd28f;
- border-color: #4bd28f;
- }
- .hdr.kioskhide { display: none; }
- .kioskdots {
- position: absolute;
- left: 50%;
- bottom: var(--sp-5);
- transform: translateX(-50%);
- display: flex;
- gap: var(--sp-4);
- z-index: 5;
- pointer-events: none;
- }
- .kdot {
- width: 9px;
- height: 9px;
- border-radius: 50%;
- background: var(--hp-muted);
- opacity: 0.55;
- }
- .kdot.on { background: var(--hp-accent); opacity: 1; }
- .measurelabel {
- position: absolute;
- transform: translate(12px, -150%);
- font-size: var(--fs-s);
- font-weight: 600;
- padding: 1px var(--sp-3);
- border-radius: var(--rad-s);
- background: rgba(0, 0, 0, 0.72);
- color: #fff;
- white-space: nowrap;
- pointer-events: none;
- user-select: none;
- z-index: 3;
- }
- .measurelabel.opdimension {
- transform: translate(
- calc(-50% + var(--op-label-shift-x, 0px)),
- calc(-50% + var(--op-label-shift-y, -12px))
- );
- border: 1px solid var(--hp-open, #ff9800);
- }
- /* decor (background) layer */
- .decorlayer .dshape { pointer-events: none; }
- .stage.mode-decor .decorlayer .dshape {
- pointer-events: visiblePainted;
- cursor: pointer;
- }
- .stage.mode-decor.dtool-select .decorlayer .dshape { cursor: move; }
- /* …but a DRAWING tool owns the canvas: existing shapes stop being targets
- entirely, so a new line can start exactly on the end of an old one
- instead of grabbing it (owner, 2026-08-04). Same for the picture tool —
- a shape lying over the plan must not block the picture's own drag.
- Only select (move) and erase (delete) keep the shapes clickable. */
- .stage.mode-decor.dtool-line .decorlayer .dshape,
- .stage.mode-decor.dtool-rect .decorlayer .dshape,
- .stage.mode-decor.dtool-ellipse .decorlayer .dshape,
- .stage.mode-decor.dtool-text .decorlayer .dshape,
- .stage.mode-decor.dtool-furniture .decorlayer .dshape,
- .stage.mode-decor.dtool-backdrop .decorlayer .dshape { pointer-events: none; }
- /* the furniture tool is a stamp: the press must reach the stage even when
- it lands on a sofa that is already there (docs/FURNITURE.md §4) */
- .stage.mode-decor.dtool-furniture { cursor: copy; }
- /* ONE exception (owner, 2026-08-04): under the TEXT tool an existing LABEL
- is a target again — pressing it opens its editor instead of starting a
- new label on top of the old one. Only labels: a line or a rectangle
- under the text tool stays inert, so the press reaches the stage and a
- new label is created there. */
- .stage.mode-decor.dtool-text .decorlayer .dshape.dtext,
- .stage.mode-decor.dtool-select .decorlayer .dshape.dtext,
- .stage.mode-decor.dtool-erase .decorlayer .dshape.dtext {
- /* A label is one logical decor object. SVG's visiblePainted would hit
- only the ink of individual glyphs, so spaces, counters and the area
- inside its selection glow behaved like empty canvas. */
- pointer-events: visiblePainted;
- pointer-events: bounding-box;
- }
- .stage.mode-decor.dtool-text .decorlayer .dshape.dtext {
- cursor: text;
- }
- /* Erasing a hairline must not require pixel-perfect aim. The duplicate
- geometry is invisible and exists only while Erase is active. A
- non-scaling stroke keeps the target comfortably wide at every zoom. */
- .decorlayer .derasehit {
- fill: none;
- stroke: transparent;
- stroke-width: 16px;
- stroke-linecap: round;
- stroke-linejoin: round;
- vector-effect: non-scaling-stroke;
- pointer-events: none;
- }
- .stage.mode-decor.dtool-erase .decorlayer .derasehit {
- pointer-events: stroke;
- }
- /* A dashed line must remain selectable across its gaps. This proxy also
- makes the only entry to line-style properties — double click in Select —
- practical for hairlines at every zoom. */
- .decorlayer .dselecthit {
- fill: none;
- stroke: transparent;
- stroke-width: 16px;
- stroke-linecap: round;
- vector-effect: non-scaling-stroke;
- pointer-events: none;
- }
- .stage.mode-decor.dtool-select .decorlayer .dselecthit {
- pointer-events: stroke;
- cursor: move;
- }
- .decorlayer .dsel {
- filter: drop-shadow(0 0 3px var(--hp-accent));
- }
- .decorlayer .ddraft {
- stroke-dasharray:
- calc(6px * var(--hp-cell-visual-scale, 1))
- calc(5px * var(--hp-cell-visual-scale, 1));
- pointer-events: none;
- }
- .decorlayer text {
- font-weight: 600;
- user-select: none;
- dominant-baseline: middle;
- text-anchor: middle;
- }
- .stage.mode-decor {
- outline: 2px solid #26a69a;
- outline-offset: -2px;
- }
- /* backdrop transform frame (docs/BACKDROP.md §2). Editor chrome: the
- outline never takes a pointer, the four corner handles do — and they are
- finger-sized (r = 2 % of the visible view), because this is dragged on a
- tablet as often as with a mouse. */
- .bdframe .bdbox {
- fill: none;
- stroke: var(--hp-accent);
- stroke-width: 2;
- stroke-dasharray: 10 7;
- vector-effect: non-scaling-stroke;
- pointer-events: none;
- opacity: 0.9;
- }
- /* the HIT circle: invisible, finger-sized, the only thing that takes a
- pointer. The visible bead is .bdknob, a quarter of its radius — the same
- visual/hit split .dthandle + .dtknob and .rszhandle + .rszicon use. */
- .bdframe .bdhandle {
- fill: transparent;
- stroke: none;
- pointer-events: all;
- touch-action: none;
- }
- .bdframe .bdknob {
- fill: var(--hp-accent);
- stroke: #fff;
- stroke-width: 1;
- vector-effect: non-scaling-stroke;
- pointer-events: none;
- }
- :host([data-pointer-hover]) .bdframe .bdhandle:hover + .bdknob {
- fill: #fff;
- stroke: var(--hp-accent);
- }
- .bdframe .bd-nwse { cursor: nwse-resize; }
- .bdframe .bd-nesw { cursor: nesw-resize; }
- /* the picture itself is the drag target for a move (grab, then grabbing) */
- .stage.mode-decor.bdgrab { cursor: grab; }
- .stage.mode-decor.bdgrabbing,
- .stage.mode-decor.bdgrabbing .bdframe .bdhandle { cursor: grabbing; }
- .measurelabel.bdmeasure {
- transform: translate(-50%, -50%);
- border: 1px solid var(--hp-accent);
- }
- /* the selected decor object's frame — same chrome rules as the backdrop's:
- the outline never takes a pointer, the handles always do, and they are
- finger-sized because this is dragged on a tablet too */
- .dtframe .dtbox {
- fill: none;
- stroke: var(--hp-accent);
- stroke-width: 1.5;
- stroke-dasharray: 7 5;
- vector-effect: non-scaling-stroke;
- pointer-events: none;
- opacity: 0.85;
- }
- .dtframe .dtstem,
- .bdframe .dtstem {
- stroke: var(--hp-accent);
- stroke-width: 1.5;
- vector-effect: non-scaling-stroke;
- pointer-events: none;
- opacity: 0.85;
- }
- /* the HIT circle: invisible, finger-sized, the only thing that takes a
- pointer. The visible bead is .dtknob, a quarter of its radius — the
- same visual/hit split .rszhandle + .rszicon use. */
- .dtframe .dthandle {
- fill: transparent;
- stroke: none;
- pointer-events: all;
- touch-action: none;
- }
- .dtframe .dtknob {
- fill: var(--hp-accent);
- stroke: #fff;
- stroke-width: 1;
- vector-effect: non-scaling-stroke;
- pointer-events: none;
- }
- :host([data-pointer-hover]) .dtframe .dthandle:hover + .dtknob {
- fill: #fff;
- stroke: var(--hp-accent);
- }
- .dtframe .dt-nwse { cursor: nwse-resize; }
- .dtframe .dt-nesw { cursor: nesw-resize; }
- .dtframe .dtrot { cursor: grab; }
- .dtframe .dtendpoint { cursor: crosshair; }
- .bdframe .dtrot { cursor: grab; }
- .dtarea {
- resize: vertical;
- min-height: 3.4em;
- font: inherit;
- line-height: 1.35;
- }
- .stage.mode-decor.dtool-line, .stage.mode-decor.dtool-rect,
- .stage.mode-decor.dtool-ellipse, .stage.mode-decor.dtool-text {
- cursor: crosshair;
- }
- .stage.mode-decor.dtool-erase,
- .stage.mode-decor.dtool-erase .decorlayer .dshape {
- cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg transform='rotate(-45 12 12)'%3E%3Crect x='7' y='2' width='10' height='18' rx='2' fill='%23fff' stroke='%23111' stroke-width='1.5'/%3E%3Cpath d='M7 13h10v5a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2z' fill='%23ff9f43' stroke='%23111' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E") 5 22, pointer;
- }
- .stage.mode-decor .room, .stage.mode-decor .devlayer { pointer-events: none; }
- .stage.mode-decor .oplock { pointer-events: none; }
- /* Backdrop-editor de-emphasis is a shared mode-transition coordinate.
- It multiplies whole presentation groups and never changes Glow source
- alpha, additive blending, or the underlying resolved state. */
- .stage .room,
- .stage .devlayer,
- .stage .opening,
- .stage .room-outline,
- .stage .wallbodies,
- .stage .opening-tunnels,
- .stage .glow-base-layer,
- .stage .glow-pools-frame,
- .stage .openwalls {
- opacity: var(--hp-mode-architecture-opacity, 1);
- }
- .decorbar .dcolor {
- width: 30px; height: 26px; padding: 0; border: none; background: none; cursor: pointer;
- }
- .decorbar .dwidth {
- font-family: inherit; font-size: var(--fs-s); border-radius: var(--rad-s);
- background: var(--hp-bg2, transparent); color: var(--hp-txt); border: 1px solid var(--hp-muted);
- padding: var(--sp-2) var(--sp-3);
- }
- .decorbar .bdhint {
- font-size: var(--fs-s);
- color: var(--hp-muted);
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- .decorbar .dfill {
- display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-s); cursor: pointer;
- }
- .decorbar .dfill input[type="checkbox"] {
- width: 16px;
- height: 16px;
- flex: none;
- margin: 0;
- padding: 0;
- }
- .decorbar hp-color-opacity { flex: 0 0 auto; }
- hp-dialog .dfill {
- display: inline-flex;
- align-items: center;
- gap: var(--sp-3);
- cursor: pointer;
- }
- .opening-preview {
- opacity: 0.5;
- pointer-events: none;
- }
- .opening-preview[data-kind="passage"] {
- opacity: 1;
- }
- .passage-preview-cut {
- fill: var(--wall-fill, #ffffff);
- fill-opacity: 0.35;
- stroke: none;
- pointer-events: none;
- }
- .passage-preview-boundary {
- stroke: var(--hp-open, #ff9800);
- stroke-width: calc(2.5px * var(--hp-cell-visual-scale, 1));
- pointer-events: none;
- }
- .opening-preview .op-leaf,
- .opening-preview .op-arc {
- transition: none;
- }
- .opening-preview-dot {
- fill: var(--hp-open, #ff9800);
- pointer-events: none;
- }
- .opening-dimensions,
- .opening-dimension {
- pointer-events: none;
- }
- .opening-dimension-line,
- .opening-dimension-tick {
- fill: none;
- stroke: var(--hp-open, #ff9800);
- stroke-width: 1.5;
- vector-effect: non-scaling-stroke;
- pointer-events: none;
- }
- .opening-dimension-tick {
- stroke-width: 2;
- }
- .stage.edit .room {
- pointer-events: none;
- }
- .stage.markup {
- cursor: crosshair;
- }
- /* room-picking stages: merge (both clicks) and split before a room is chosen */
- .stage.markup.tool-merge,
- .stage.markup.tool-split.pickstage,
- .stage.markup.tool-delroom {
- cursor: pointer;
- }
- .stage.markup.tool-wallthick { cursor: default; }
- .stage.markup.tool-wallthick.wallhot { cursor: pointer; }
- /* Solid wall colour sits under the hatch (owner: both, not either/or). */
- .wallbody-fill {
- fill: var(--wall-fill, #ffffff);
- fill-opacity: var(--wall-fill-op, 1);
- fill-rule: evenodd;
- stroke: none;
- pointer-events: none;
- }
- .wallbody {
- fill: url(#hp-wall-hatch);
- fill-rule: evenodd;
- stroke: var(--room-stroke, var(--hp-muted));
- stroke-width: calc(0.6px * var(--hp-cell-visual-scale, 1));
- pointer-events: none;
- }
- /* Thin-on-screen: hatch collapses into noise — fill alone, stroke from fill path's sibling. */
- .wallbody.solid {
- fill: none;
- }
- .wallthick-hover {
- fill: var(--accent-color, #03a9f4);
- fill-opacity: 0.38;
- stroke: var(--accent-color, #03a9f4);
- stroke-width: calc(2.5px * var(--hp-cell-visual-scale, 1));
- stroke-linejoin: round;
- stroke-linecap: round;
- pointer-events: none;
- }
- .wallthick-dlg {
- position: absolute;
- z-index: 40;
- min-width: 200px;
- transform: translate(-50%, 8px);
- padding: 10px 12px;
- border-radius: 10px;
- background: var(--card-background-color, #fff);
- box-shadow: 0 8px 28px rgba(0,0,0,.22);
- display: flex;
- flex-direction: column;
- gap: 8px;
- pointer-events: auto;
- }
- .wallthick-hover.isopen {
- fill: var(--error-color, #f44336);
- stroke: var(--error-color, #f44336);
- }
- .wallthick-dlg .row {
- display: flex;
- align-items: center;
- gap: 8px;
- }
- .wallthick-dlg input[type="number"] {
- width: 5.5em;
- padding: 4px 6px;
- border: 1px solid var(--divider-color, #ccc);
- border-radius: 6px;
- background: var(--input-fill, transparent);
- color: var(--primary-text-color);
- }
- /* Boundary is neutral off-target, then advertises its resolved action. */
- .stage.markup.tool-boundary { cursor: default; }
- .stage.markup.tool-boundary.boundary-solid { cursor: crosshair; }
- .stage.markup.tool-boundary.boundary-open { cursor: pointer; }
- .stage.markup.tool-boundary.boundary-invalid { cursor: not-allowed; }
- .openwall {
- stroke: var(--ow-stroke, var(--hp-muted));
- stroke-width: calc(2.5px * var(--hp-cell-visual-scale, 1));
- stroke-dasharray:
- calc(7px * var(--hp-cell-visual-scale, 1))
- calc(7px * var(--hp-cell-visual-scale, 1));
- stroke-linecap: butt;
- pointer-events: none;
- opacity: 0.9;
- }
- /* Rooms with open/thick stretches: the polygon's own stroke is fully off.
- The trimmed .room-outline draws normal walls; View hover gets its own
- top overlay after the wall bodies. */
- .room.noedge {
- stroke-opacity: 0 !important;
- }
- /* rooms with open boundaries draw their walls as separate M..L subpaths,
- so a corner between two of them is two stroke ENDS meeting: round caps
- fill it in the same way a round join fills a closed contour's corner
- (owner 2026-08-04 — no teeth anywhere on a room border). */
- .room-outline {
- fill: none;
- stroke-width: calc(2.5px * var(--hp-cell-visual-scale, 1));
- stroke-linejoin: round;
- stroke-linecap: round;
- pointer-events: none;
- }
- /* Plan editor: trimmed outlines use the markup blue */
- .room-outline.outlined {
- stroke: rgba(62, 166, 255, 0.55);
- stroke-opacity: 1;
- }
- /* The wash is rendered directly above the resolved room fill but below
- tunnels, Glow, sun and walls. Black at 22% reproduces the old
- brightness(.78) contract without filtering/promoting an SVG ancestor or
- changing the room's hue. The halo/outline are rendered again late, above
- the wall bodies. */
- .room-hover-fill {
- fill: #000;
- fill-opacity: 0.22;
- pointer-events: none;
- }
- .room-hover-halo {
- fill: none;
- stroke: var(--hp-accent);
- stroke-opacity: 0.28;
- stroke-width: calc(8px * var(--hp-cell-visual-scale, 1));
- stroke-linejoin: round;
- stroke-linecap: round;
- pointer-events: none;
- }
- .room-hover-outline {
- fill: none;
- stroke: var(--hp-accent);
- stroke-width: calc(3px * var(--hp-cell-visual-scale, 1));
- stroke-linejoin: round;
- stroke-linecap: round;
- pointer-events: none;
- }
- .openwall-preview {
- stroke: #ffc14d;
- stroke-width: calc(5px * var(--hp-cell-visual-scale, 1));
- stroke-dasharray:
- calc(7px * var(--hp-cell-visual-scale, 1))
- calc(7px * var(--hp-cell-visual-scale, 1));
- stroke-linecap: round;
- pointer-events: none;
- opacity: 0.95;
- }
- .openwall-preview.boundary-range.invalid {
- stroke: var(--error-color, #f44336);
- }
- .openwall-preview.boundary-restore {
- fill: rgba(255, 193, 77, 0.28);
- fill-rule: evenodd;
- stroke: #ffc14d;
- stroke-width: calc(2.5px * var(--hp-cell-visual-scale, 1));
- stroke-dasharray: none;
- stroke-linejoin: round;
- }
- .boundary-point {
- fill: #ffc14d;
- stroke: #24262d;
- stroke-width: 1.5;
- vector-effect: non-scaling-stroke;
- pointer-events: none;
- }
- .boundary-point.invalid circle {
- fill: var(--error-color, #f44336);
- }
- .boundary-point.invalid path {
- fill: none;
- stroke: #fff;
- stroke-width: 1.7;
- vector-effect: non-scaling-stroke;
- }
- .stage.markup .room {
- pointer-events: none;
- }
- .stage.markup .devlayer .dev {
- display: none; /* in plan mode the icons do not get in the way; labels stay */
- }
- /* mode frames: the edit modes are visible at a glance */
- .stage.mode-plan {
- outline: 2px solid #ffc14d;
- outline-offset: -2px;
- }
- .stage.mode-devices {
- outline: 2px solid var(--hp-accent);
- outline-offset: -2px;
- }
- .modes {
- display: inline-flex;
- gap: var(--sp-1);
- background: rgba(127, 127, 127, 0.12);
- border-radius: var(--rad-l);
- padding: var(--sp-2);
- }
- .modetab {
- display: inline-flex;
- align-items: center;
- gap: var(--sp-3);
- border: 0;
- background: transparent;
- color: var(--hp-muted);
- padding: var(--sp-3) 10px; /* 10px h-padding kept: +2px would wrap the header modes row */
- border-radius: var(--rad-m);
- font-size: var(--fs-m);
- font-weight: 600;
- cursor: pointer;
- font-family: inherit;
- transition: background-color 0.14s ease, color 0.14s ease, transform 0.14s ease;
- }
- .modetab:active { transform: scale(0.97); }
- .modetab ha-icon { --mdc-icon-size: 15px; }
- /* issue #220: a tab can be dragged to a new position in the editors */
- .tab[data-reorderable] { cursor: grab; }
- .tab.dragging { cursor: grabbing; opacity: 0.55; }
- .tab.drop-before { box-shadow: inset 2px 0 0 0 var(--primary-color, #03a9f4); }
- .tab.drop-after { box-shadow: inset -2px 0 0 0 var(--primary-color, #03a9f4); }
- .modetab .closex {
- --mdc-icon-size: 13px;
- box-sizing: border-box;
- display: inline-flex;
- align-items: center;
- justify-content: center;
- width: 24px;
- height: 24px;
- min-width: 24px;
- min-height: 24px;
- /* Keep the old 13 × 13 flex footprint (+2 px left margin) while the
- pointer target grows around it. Header width, height and wrapping do
- not move; only near-misses that used to hit the active tab reach X. */
- margin: -5.5px -5.5px -5.5px -3.5px;
- opacity: 0.75;
- cursor: pointer;
- border-radius: var(--rad-s);
- }
- :host([data-pointer-hover]) .modetab .closex:hover { opacity: 1; }
- .editbar .barclose {
- box-sizing: border-box;
- width: 40px;
- height: 40px;
- padding: 0;
- margin: 0;
- min-width: 40px;
- min-height: 40px;
- justify-content: center;
- gap: 0;
- line-height: 0;
- }
- .editbar .barclose ha-icon { flex: none; margin: 0; }
- .modetab.active {
- background: var(--hp-accent);
- color: var(--text-primary-color, #fff);
- }
- @media (max-width: 720px) {
- .modetab .ml { display: none; }
- }
- .room.outlined {
- stroke: rgba(62, 166, 255, 0.55);
- fill: rgba(62, 166, 255, 0.06);
- }
- /* AFTER .outlined: same specificity — source order decides (gotcha x4) */
- .room.picked {
- stroke: #ffc14d;
- stroke-width: calc(3px * var(--hp-cell-visual-scale, 1));
- fill: rgba(255, 193, 77, 0.25);
- }
- /* Owner 2026-08-04: the grid is a HINT, not content — at full strength the
- dots argued with the plan on white paper. Both levels are muted, the
- hierarchy is kept (major still denser than fine). */
- .griddot {
- fill: var(--hp-accent);
- opacity: 0.35;
- stroke: rgba(0, 0, 0, 0.35);
- stroke-width: 0.4;
- }
- /* docs/CANVAS.md §7: every coarse node (5x/10x the live step) keeps a
- bigger, more opaque dot, so zoomed far out the grid still reads as a
- grid instead of a grey wash. */
- .griddot.major {
- opacity: 0.5;
- stroke-width: 0;
- }
- /* the contour being drawn in the Plan editor: each wall is its own
- ${this.label||n.title}
-
-
-
-
-
-
-
- ${this.showOpacity?W`
- ${this.opacityLabel}
- this._setOpacity(Number(t.target.value)/100)}
- @keydown=${t=>this._shiftRangeKey(t,e,0,100,t=>this._setOpacity(t/100))} />
- this._setOpacity(Number(t.target.value)/100)} />
- %
-
`:G}
-
- ${this._t("marker.preview.title")}
-
- ${this._t(e?"marker.preview.example":"marker.preview.actual")}
-
-
-
-
- ${t.visualSources.length||t.criticalSources.length?W`
-
-
-
-
- ${Ko(i,{disabledTitle:this._reason("ha_disabled")})}
-
-
-
- ${this._t("marker.preview.integration")}${this._providerSummary(s)}
- ${this._t("marker.preview.source")}${this._sourceSummary(t)}
- ${this._t("marker.preview.current_state")}${this._stateSummary(t)}
- ${this._t("marker.preview.result")}${g}
- ${t.fallbackReason?W`${this._reason(t.fallbackReason)}
`:G} - ${t.explanation.notices.map(t=>W`${this._reason(t)}
`)} - ${h<1?W`${this._t("marker.preview.scaled",{n:d})}
`:G} - ${e&&this._reducedMotion?W`${this._t("marker.preview.reduced_motion")}
`:G} -
-
`:G}
- ${"icon_ripple"===t.display?W`${this._t("marker.preview.details")}
-
- ${[...t.visualSources,...t.criticalSources].map(t=>W`
-
-
- ${t.name}
`)}
- ${t.eid}
- ${t.stateText||t.state}
- ${this._sourceProvider(t.eid)}
-
-
-
-
`:G}
-
- ${la(t,"editor.default_floor_missing",{id:s})}
-
`:G}
- ${n(i.slice(3))}
- `}_valueChanged(t){const e={...this._config,...t.detail.value};""===e.floor?delete e.floor:e.floor===this._floorToken&&(e.floor=this._config?.floor);const i=new Event("config-changed",{bubbles:!0,composed:!0});i.detail={config:e},this.dispatchEvent(i)}}function jp(t){const e=t.length/2,i=t.face.cm>0?t.face.cm/t.cellCm*t.gridPitch/2:hc(4,t.cellCm),s="gate"===t.type?Math.sin(10*Math.PI/180)*e:0;return{half:e,jambHalf:i,gateDepth:s,outlineHalf:Math.max(hc(16,t.cellCm),i+hc(8,t.cellCm),s+hc(8,t.cellCm)),hitHalf:Math.max(hc(20,t.cellCm),i+hc(10,t.cellCm),s+hc(12,t.cellCm))}}function Up(t){if("passage"===t.type)return j``;const e=Math.max(0,Math.min(1,t.amount)),{half:i,jambHalf:s}=jp(t),n=cc(t.cellCm),o=1.75*n,a=t.flipH?-1:1,r=t.flipV?-1:1,l="gate"===t.type?1:r;t.type,t.flipV,t.angle,t.face;let c;if("window"===t.type){const o=Math.PI/2*i,a=t.face.cm>0?j`
- ${Ko(p,{})}
-
`}),R=i.showNames?e.rooms.filter(t=>t.name).map(s=>{const n=jc(s,e.id,t.layout,t.cfg),o=(n.x-b[0])/b[2]*100,a=(n.y-b[1])/b[3]*100,r=Math.min(1,i.opacity+.25);return W`${s.name}
`}):[],I=e.bg?t.displayUrl?t.displayUrl(e.bg.href):e.bg.href:"",A=t.cfg.spaces.find(e=>e.id===t.spaceId)?.settings||{},F="daynight"===Qa(t.cfg?.settings,A)?qa(r,t.dayCycleNow??new Date):null,E=hs(t.cfg?.settings,i),z=!!(_.length||v.length&&i.showBorders),O=z?Dh(x.length?{rooms:e.rooms,walls:_,extras:v,cellCm:g,passages:x.map(t=>({x:t.rx,y:t.ry,angle:t.angle,length:t.rlen})),hostedCompositeOpenings:S}:{rooms:e.rooms,walls:_,extras:v,cellCm:g}):"",N=z?function(t,e,i,s){let n=pu.get(t);n||(n=new Map,pu.set(t,n));const o=n.get(e);if(o?.fingerprint===i)return o.value;const a=s();return n.set(e,{fingerprint:i,value:a}),a}(t.cfg,e.id,O,()=>Tl(e.rooms,_,[],[...x.filter(t=>!t.host).map(t=>({x:t.rx,y:t.ry,angle:t.angle,length:t.rlen})),...S],$c,g,xc,uc,v)):null,H=x.length&&_.length?function(t,e,i,s,n,o,a,r=1){return[n,o,a,r].every(Number.isFinite)&&o>0&&r>0&&i?.length?Hl(Il(t,i,s,n,o,a,r),e):e.map(()=>null)}(e.rooms,x.map(t=>({x:t.rx,y:t.ry,angle:t.angle,length:t.rlen})),_,[],$c,g,xc,uc):x.map(()=>null),L=x.length?du({openings:x,geometries:H,fillsByRoomId:k,idPrefix:`${e.id}-static-data`,groupClass:"opening-tunnels static-opening-tunnels",dataLayer:"data"}):G,B=x.length?du({openings:x,geometries:H,fillsByRoomId:D,idPrefix:`${e.id}-static-glow`,groupClass:"opening-tunnels glow-base-tunnels static-opening-tunnels",dataLayer:"glow-base"}):G,q=_.length&&N?.paperD?[{path:N.paperD}]:di(e.rooms),U=i.showBorders?N:null,V=t.stageWidth&&b[2]?t.stageWidth/b[2]:1,K=yr(g),Y=!!U&&(vr(U.depthUnits,V)||br(K,V)),X=i.color||"#607d8b",J=i.hideOpenings?[]:m.map(t=>{const e=t.opening,i="passage"!==e.type&&e.contact?r.states?.[e.contact]?.state:null,s=gi(e.type,i,!!e.invert),n=s>0&&!!e.contact,o="gate"===e.type?!e.flip_v:!!e.flip_v,a={type:e.type,length:t.length,angle:t.angle,amount:s,flipH:!!e.flip_h,flipV:!!e.flip_v,base:X,tone:n?"var(--hp-open)":X,cellCm:g,gridPitch:xc,face:zd(t,o)};return j`
- ${nr(F)}
-
- ${""}
-
- `}let mu=null,fu=null,vu=0,yu=-1,bu=null,wu=[];const ku=new Set,xu=(t,e)=>{"function"==typeof t&&e.push(t)};function $u(){if(mu)return mu;try{const t=JSON.parse(localStorage.getItem("houseplan_card_cfg_v1")||"null");if(t&&t.config&&Array.isArray(t.config.spaces)){const e=t.layout||{};return{config:t.config,rev:t.rev||0,configFingerprint:t.config_fingerprint||Dh(t.config),layout:e,layoutRev:t.layout_rev||0,layoutFingerprint:t.layout_fingerprint||Dh(e),virtualLights:gn(t.virtual_lights,t.rev||0)}}}catch{}return null}function Su(t,e=!1){if(e&&(mu=null,vu++,fu))return fu.catch(()=>null).then(()=>Su(t,!1));if(mu)return Promise.resolve(mu);if(fu)return yu!==vu?fu.catch(()=>null).then(()=>Su(t,!1)):fu;return yu=vu,fu=async function(t,e){const[i,s]=await Promise.all([t.callWS({type:"houseplan/config/get"}),t.callWS({type:"houseplan/layout/get"})]),n=i?.rev??0,o=mu?mn(mu.virtualLights,i?.virtual_lights,n,!!i&&"virtual_lights"in i):gn(i?.virtual_lights,n),a={config:i?.config??null,rev:n,configFingerprint:Dh(i?.config??null),layout:s?.layout??{},layoutRev:s?.rev??0,layoutFingerprint:Dh(s?.layout??{}),virtualLights:o};e===vu&&(mu=a);const r=t.connection;if(r?.subscribeEvents&&bu!==r){for(const t of wu)t();wu=[],bu=r;const t=()=>{mu=null,vu++,ku.forEach(t=>t())},e=[];try{if(xu(await r.subscribeEvents(t,"houseplan_config_updated"),e),xu(await r.subscribeEvents(t,"houseplan_layout_updated"),e),xu(await r.subscribeEvents(t=>{if(mu){const e=wn(mu.virtualLights,t?.data);if(e===mu.virtualLights)return;mu={...mu,virtualLights:e}}else vu++;ku.forEach(t=>t())},"houseplan_virtual_light_updated"),e),bu===r)wu=e;else for(const t of e)t()}catch{for(const t of e)t();bu===r&&(bu=null)}}return a}(t,vu).finally(()=>{fu=null,yu=-1}),fu}const Mu=3300;function Cu(t,e){return{sources:t,last:Object.fromEntries(e.map(t=>[t.eid,t.state])),flashTs:0,flashKind:null,timer:0,gen:0,expiresAt:0,alarmActive:"alarm"===dn(e).status}}function Du(t,e,i,s){s(t.timer);const n=Cu(e,i);Object.assign(t,n)}function Tu(t,e,i,s,n){t.flashTs&&i-t.flashTs${P}${R}
- ${t}
- ${o}
`:G}
-
- ${s}
- ${this._renderRecoveryOverlay()}
-
- ${a?W`
-
-
`:G}
- this._groupKeydown(t)}>
- ${t.items.map(e=>W``)}
-
`}}runContext(t,e,i){t===e&&i()}render(t,e){this._currentModel=t,this._blocked=e;const i=t?.kind||"hidden";return W`
-
`}afterRender(){const t=this.host.root();this._blocked&&(this._openGroupId?this.closeGroup(!1):"palette"===this._currentModel?.kind&&this._currentModel.dismiss?.()),this._syncGlobalDismissListener();const e=t.querySelector(".editor-secondary"),i=this._renderedContext,s=e?.dataset.contextId||"";if(s&&i&&s!==i&&!window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches&&(this._contentAnimation?.cancel(),this._contentAnimation=e?.querySelector(".editor-secondary-content")?.animate([{opacity:.35,transform:"translateY(-4px)"},{opacity:1,transform:"translateY(0)"}],{duration:100,easing:"ease-out"})),this._renderedContext=s,i&&s!==i&&this._focusOwned){const i=s?e?.querySelector('[tabindex="0"], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled])'):t.querySelector(".editbar-tools");i?.focus?.(),this._focusOwned=!!s}if("palette"===this._currentModel?.kind&&this._currentModel.launcherId){const e=[...t.querySelectorAll("[data-editor-palette]")].find(t=>t.dataset.editorPalette===this._currentModel?.launcherId);e&&null!==e.offsetParent||this._currentModel.dismiss?.()}if(!this._openGroupId)return;const n=[...t.querySelectorAll("[data-editor-group]")].find(t=>t.dataset.editorGroup===this._openGroupId);n&&null!==n.offsetParent||this.closeGroup(!0)}handleOutsideDismiss(t){if(zu(t,t=>t.hasAttribute("data-editor-navigation")))return"pointerdown"===t.type?this.closeForNavigation():"click"===t.type&&this._dismissPointerTarget&&this._clearDismissClick(),!1;if("click"===t.type&&this._dismissPointerTarget){return!!(t.composedPath?.()||[t.target]).includes(this._dismissPointerTarget)&&(this._clearDismissClick(),t.preventDefault(),t.stopImmediatePropagation(),!0)}const e=this._openGroupId||this._blocked||"palette"!==this._currentModel?.kind?null:this._currentModel;if("pointerdown"===t.type&&(this._openGroupId||e)){const i=zu(t,t=>t.classList.contains("editor-secondary")),s=zu(t,t=>!!t.dataset.editorGroup),n=zu(t,t=>!!t.dataset.editorPalette),o=zu(t,t=>t.classList.contains("stage"));if(!(i||s||n||"stay-open-on-canvas"===e?.dismissPolicy&&o))return t.preventDefault(),t.stopImmediatePropagation(),this._dismissPointerTarget=t.target,clearTimeout(this._dismissTimer),this._dismissTimer=window.setTimeout(()=>{this._clearDismissClick()},800),this._openGroupId?this.closeGroup(!1):e?.dismiss?.(),this._syncGlobalDismissListener(),!0}return!1}_activateGroupItem(t,e,i){if(t.id!==this._openGroupId)return;const s=t.items.find(t=>t.id===e);if(!s||s.disabled)return;const n="toggle"===s.role&&"stay-open"===s.closePolicy,o=0===i.detail;n||(this._openGroupId=null,this.host.requestUpdate(),this._syncGlobalDismissListener()),s.invoke(),!n&&o&&this.host.updateComplete().then(()=>{const e=[...this.host.root().querySelectorAll("[data-editor-group]")].find(e=>e.dataset.editorGroup===t.id&&null!==e.offsetParent);e?.focus()})}_groupKeydown(t){if(!["ArrowLeft","ArrowRight","Home","End"].includes(t.key))return;const e=[...t.currentTarget.querySelectorAll(".editor-group-item:not([disabled])")];if(!e.length)return;t.preventDefault();const i=e.indexOf(this.host.root().activeElement),s="Home"===t.key?0:"End"===t.key?e.length-1:"ArrowLeft"===t.key?i<=0?e.length-1:i-1:(i+1)%e.length;e[s]?.focus()}_clearDismissClick(){this._dismissPointerTarget=null,clearTimeout(this._dismissTimer),this._dismissTimer=void 0,this._syncGlobalDismissListener()}_syncGlobalDismissListener(){const t=!this._blocked&&"palette"===this._currentModel?.kind,e=!!this._openGroupId||t||!!this._dismissPointerTarget;e!==this._globalDismissListening&&(this._globalDismissListening=e,e?(window.addEventListener("pointerdown",this._globalDismissGuard,!0),window.addEventListener("click",this._globalDismissGuard,!0)):(window.removeEventListener("pointerdown",this._globalDismissGuard,!0),window.removeEventListener("click",this._globalDismissGuard,!0)))}}const Nu=t=>t.stopPropagation(),Hu=4.166666666666667e-9;function Lu(t){return Number.isFinite(t)?Math.round(t/$c)*$c:t}const Bu=(t,e,i,s)=>Math.hypot(i-t,s-e),qu=(t,e,i,s,n,o,a,r)=>Math.hypot(Math.max(Math.abs(n-t),Math.abs(n+a-(t+i))),Math.max(Math.abs(o-e),Math.abs(o+r-(e+s)))),Wu=(t,e,i,s,n,o,a)=>{const r=Math.max(Number(s)||0,0)/2,l=Math.PI/180,c=Math.cos(i*l)*r,h=Math.sin(i*l)*r,d=Math.cos(a*l)*r,p=Math.sin(a*l)*r,u=Math.max(Bu(t+c,e+h,n+d,o+p),Bu(t-c,e-h,n-d,o-p)),_=Math.max(Bu(t+c,e+h,n-d,o-p),Bu(t-c,e-h,n+d,o+p));return Math.min(u,_)},ju=t=>{const e=Number(t?.cell_cm);return e>0?e:5};const Uu=10**9;function Gu(t){if(Array.isArray(t))return t.map(t=>Gu(t));if(null!==t&&"object"==typeof t){const e={};for(const[i,s]of Object.entries(t))e[i]=Gu(s);return e}return t}function Vu(t){if("number"!=typeof t||!Number.isFinite(t))return t;const e=(t<0||Object.is(t,-0)?-1:1)*(Math.floor(Math.abs(t)*Uu+.5)/Uu);return 0===e?0:e}function Ku(t){return null===t||"object"!=typeof t||Array.isArray(t)?null:t}function Yu(t){return Array.isArray(t)?t.filter(t=>null!==Ku(t)):[]}function Xu(t,e){for(const i of e)Object.prototype.hasOwnProperty.call(t,i)&&(t[i]=Vu(t[i]))}function Ju(t){if(Array.isArray(t))for(let e=0;ethis._focusOwned=!0}
- @focusout=${t=>{const e=t.relatedTarget;e&&t.currentTarget.contains(e)||(this._focusOwned=!1)}}
- @pointerenter=${()=>this.host.clearTip()}
- @pointerdown=${Nu}
- @pointerup=${Nu}
- @pointercancel=${Nu}
- @click=${Nu}
- @dblclick=${Nu}
- @wheel=${Nu}>
- ${t?.visibleLabel?W`${t.visibleLabel}`:G}
-
- ${t?.content||G}
-
-
`}_renderHomeArrow(){if(this._booting)return G;const t=this._view;if(!t||!t.w||!t.h)return G;const e=this._baseVb(),i=e[0],s=e[1],n=e[2],o=e[3];if(!(i+n<=t.x||i>=t.x+t.w||s+o<=t.y||s>=t.y+t.h))return G;const a=Math.atan2(s+o/2-(t.y+t.h/2),i+n/2-(t.x+t.w/2)),r=50+38*Math.cos(a),l=50+38*Math.sin(a);return W``}_stageAspect(){const t=this._stageEl,e=this._baseVb();return t&&t.clientHeight?t.clientWidth/t.clientHeight:e[2]/e[3]}_viewOr(t){return this._view&&this._view.w?this._view:Oi(t,this._stageAspect())}_roomLabelReferenceViewWidth(t){if(!this._markup)return t.w;const e=this._stageEl,i=this.renderRoot.querySelector(".editorchrome");if(!e||e.clientWidth<=0||e.clientHeight<=0)return t.w;const s=e.clientHeight+(i?.getBoundingClientRect().height||0);return s<=0?t.w:this._viewForModeTarget(this._zoom,void 0,void 0,e.clientWidth,s).w}_screenToVb(t,e){const i=this._stageEl,s=this._viewOr(this._baseVb()),n=i?.clientWidth||1,o=i?.clientHeight||1;return[s.x+t/n*s.w,s.y+e/o*s.h]}_clampView(t,e){const i=(t,e,i,s)=>{const n=1*Math.max(e,s),o=i-n,a=i+s-e+n;return Math.max(Math.min(o,a),Math.min(Math.max(o,a),t))};return{w:t.w,h:t.h,x:i(t.x,t.w,e.x,e.w),y:i(t.y,t.h,e.y,e.h)}}_applyView(t,e,i){const s=this._baseVb(),n=Oi(s,this._stageAspect()),o=Math.min($m.ZOOM_MAX,Math.max($m.ZOOM_MIN,t)),a=n.w/o,r=n.h/o,l=this._viewOr(s),c=e??l.x+l.w/2,h=i??l.y+l.h/2,d=this._clampView({x:c-a/2,y:h-r/2,w:a,h:r},n);return!(this._view&&Math.abs(this._zoom-o)<1e-9&&Math.abs(this._view.x-d.x)<1e-6&&Math.abs(this._view.y-d.y)<1e-6&&Math.abs(this._view.w-d.w)<1e-6&&Math.abs(this._view.h-d.h)<1e-6)&&("opening"===this._tool&&(this._cursorPt=null,this._clearOpeningPlacement(!1)),this._zoom=o,this._view=d,!0)}_bootWatch(){clearTimeout(this._bootTimer),this._bootStart=Date.now(),this._bootLastH=-1,this._bootLastChange=this._bootStart;const t=()=>{if(!this._booting)return;const e=Date.now(),i=this._stageEl?this._stageEl.clientHeight:0;i!==this._bootLastH&&(this._bootLastH=i,this._bootLastChange=e);const s=e-this._bootStart;s>=1200||s>=700&&i>0&&e-this._bootLastChange>=250?this._bootSettled():this._bootTimer=window.setTimeout(t,100)};this._bootTimer=window.setTimeout(t,100)}_bootSettled(){this._booting&&!this._bootSettling&&(this._bootSettling=!0,this._refitView(),this._bootSettleRaf=requestAnimationFrame(()=>{this._bootSettleRaf=0,this._finishBootSettled()}))}_finishBootSettled(){if(!this._booting)return;this._refitView(),this._booting=!1,this._bootSettling=!1;const t=this._stageEl?.clientHeight??0;!this._config?.kiosk&&t>0&&this._warmPatch({hdrH:this._hdrH,stageH:t,vp:this._warmViewportState()},!0),this._bootFading=!0,this._bootTimer=window.setTimeout(()=>{this._bootFading=!1},220),this._bootSoft=!0,clearTimeout(this._bootSoftTimer),this._bootSoftTimer=window.setTimeout(()=>{this._bootSoft=!1},tm)}_bootSoftCancel(){this._bootSoft&&(clearTimeout(this._bootSoftTimer),this._bootSoft=!1)}_beginResumeSettle(){this._booting||this._resumeSettling||(this._modeTransitionPreparing?this._modeTransitionForceAtomic=!0:this._cancelModeTransition(!0),this._viewportInvalidAt=0,this._beginContinuityCandidate("warm-resume",!1),this._loading?this.requestUpdate():this._loadFromServer())}_refitView(){if(this._modeTransitionBusy)return;const t=this._stageEl;if(!t||"visible"!==document.visibilityState||t.clientWidth<=0||t.clientHeight<=0)return void(this._viewportInvalidAt||(this._viewportInvalidAt=Date.now()));const e=[t.clientWidth,t.clientHeight],i=this._lastValidStageSize,s=!!i&&Math.abs(i[0]-e[0])<=.5&&Math.abs(i[1]-e[1])<=.5,n=this._viewportInvalidAt?Date.now()-this._viewportInvalidAt:0;if(this._viewportInvalidAt=0,!i)return this._lastValidStageSize=e,void(this._view||this._applyView(this._zoom));s?this._pendingRefitSize=null:(this._pendingRefitSize=e,this._refitRaf||(this._refitRaf=requestAnimationFrame(()=>{this._refitRaf=0;const t=this._pendingRefitSize;this._pendingRefitSize=null;const e=this._stageEl;if(!t||!e||e.clientWidth<=0||e.clientHeight<=0)return;if(Math.abs(e.clientWidth-t[0])>.5||Math.abs(e.clientHeight-t[1])>.5)return void this._refitView();const i=this._lastValidStageSize;if(i&&Math.abs(i[0]-t[0])<=.5&&Math.abs(i[1]-t[1])<=.5)return;this._lastValidStageSize=t;const s=this._view;n>=kh?this._beginContinuityCandidate("stage-size-restored",!0,"stage-size"):this._continuity.hasCompleteFrame&&this._beginContinuityCandidate("stage-resize",!0,"stage-size"),this._applyView(this._zoom,s?s.x+s.w/2:void 0,s?s.y+s.h/2:void 0)})))}_zoomAt(t,e,i){const s=this._stageEl;if(!s)return;const n=Oi(this._baseVb(),this._stageAspect()),o=Math.min($m.ZOOM_MAX,Math.max($m.ZOOM_MIN,i));"opening"===this._tool&&(this._cursorPt=null,this._clearOpeningPlacement(!1));const a=s.clientWidth,r=s.clientHeight,l=this._screenToVb(t,e),c=n.w/o,h=n.h/o;this._zoom=o,this._view=this._clampView({x:l[0]-t/a*c,y:l[1]-e/r*h,w:c,h:h},n)}_onWheel(t){const e=this._stageEl;if(!e)return;t.preventDefault();const i=e.getBoundingClientRect(),s=t.deltaY<0?1.15:1/1.15;this._zoomAt(t.clientX-i.left,t.clientY-i.top,this._zoom*s),this._saveZoom()}_stepZoom(t){const e=this._stageEl;e&&(this._zoomAt(e.clientWidth/2,e.clientHeight/2,this._zoom*(t>0?1.4:1/1.4)),this._saveZoom())}_resetZoom(){const t=this._baseVb();"opening"===this._tool&&(this._cursorPt=null,this._clearOpeningPlacement(!1)),this._zoom=1,this._view=Oi(t,this._stageAspect()),this._saveZoom()}_saveZoom(){if("view"===this._mode){this._zoomBySpace={...this._zoomBySpace,[this._space]:this._zoom};try{localStorage.setItem(hm,JSON.stringify(this._zoomBySpace))}catch{}}}_restoreZoom(){const t=this._zoomBySpace[this._space]||1;this._zoom=t;const e=this._stageEl;if(e&&e.clientHeight){const e=this._baseVb();return this._applyView(t,e[0]+e[2]/2,e[1]+e[3]/2),void this.requestUpdate()}this._view=null,requestAnimationFrame(()=>{if(!this._stageEl)return;const e=this._baseVb();this._applyView(t,e[0]+e[2]/2,e[1]+e[3]/2),this.requestUpdate()})}_stagePointerDown(t){if(this._vacFit)return;if(this._kiosk&&(this._cyclePausedUntil=Date.now()+6e4,0===this._pointers.size?(this._swipeStart={x:t.clientX,y:t.clientY,id:t.pointerId},t.target.closest?.(".dev, .roomlabel, .oplock")||(clearTimeout(this._kioskHoldTimer),this._kioskHoldTimer=window.setTimeout(()=>{this._kioskDialog=!0,this._swipeStart=null},3e3))):(this._swipeStart=null,clearTimeout(this._kioskHoldTimer))),this._drag)return;if(this._markup&&t.target.closest?.(".roomlabel, .rlhandle, .rszhandle, .dev, .oplock, .op-hit, button"))return;if("devices"===this._mode&&t.target.closest(".dev"))return;if("decor"===this._mode&&this._decorPointerDown(t))return;this._pointers.set(t.pointerId,{x:t.clientX,y:t.clientY});const e=this._viewOr(this._baseVb());if(1===this._pointers.size)this._panStart={sx:t.clientX,sy:t.clientY,vx:e.x,vy:e.y},this._panLock=null,this._suppressClick=!1;else if(2===this._pointers.size){this._cancelBoundaryAnchor(),"opening"===this._tool?(this._cursorPt=null,this._clearOpeningPlacement(!1)):"draw"===this._tool&&this._clearPlanSnapHover();const t=[...this._pointers.values()],e=Math.hypot(t[0].x-t[1].x,t[0].y-t[1].y);this._pinchStart={dist:e,zoom:this._zoom},this._panStart=null,this._panLock=null}}get _swipeZone(){return!this._hasFixedFloor&&this._kiosk&&this._zoom<=1.001&&this._model.length>1}_stagePointerMove(t){if(this._physicalRotate?.pid!==t.pointerId)if(this._physicalDrag?.pid!==t.pointerId)if(this._dtDrag?.pid!==t.pointerId)if(this._bdDrag?.pid!==t.pointerId){if(this._decorDraft?.pid===t.pointerId){const e=this._decorDraft;let i=this._decorSnap(this._svgPoint(t),t.pointerType);if(t.shiftKey&&("rect"===e.kind||"ellipse"===e.kind)){const t=i[0]-e.a[0],s=i[1]-e.a[1],n=Math.max(Math.abs(t),Math.abs(s));i=this._snap([e.a[0]+(t<0?-n:n),e.a[1]+(s<0?-n:n)])}return void(this._decorDraft={...e,b:i})}if(this._decorMove?.pid!==t.pointerId)if(this._pointers.has(t.pointerId)){if(this._pointers.set(t.pointerId,{x:t.clientX,y:t.clientY}),this._markup&&1===this._pointers.size&&this._markupMove(t),this._pinchStart&&this._pointers.size>=2){"opening"===this._tool?(this._cursorPt=null,this._clearOpeningPlacement(!1)):"draw"===this._tool&&this._clearPlanSnapHover();const t=[...this._pointers.values()],e=Math.hypot(t[0].x-t[1].x,t[0].y-t[1].y)/(this._pinchStart.dist||1),i=this._stageEl.getBoundingClientRect(),s=(t[0].x+t[1].x)/2-i.left,n=(t[0].y+t[1].y)/2-i.top;this._zoomAt(s,n,this._pinchStart.zoom*e),this._suppressClick=!0,this._saveZoom()}else if(this._panStart){const e=t.clientX-this._panStart.sx,i=t.clientY-this._panStart.sy;Math.abs(e)+Math.abs(i)>4&&(this._suppressClick=!0,clearTimeout(this._holdTimer),"opening"===this._tool?(this._cursorPt=null,this._clearOpeningPlacement(!1)):"draw"===this._tool&&this._clearPlanSnapHover()),null===this._panLock&&Math.abs(e)+Math.abs(i)>8&&(this._panLock=this._swipeZone&&Math.abs(e)>1.5*Math.abs(i)?"swipe":"pan");const s=this._stageEl;if("pan"===this._panLock&&s){const t=this._baseVb(),n=this._viewOr(t),o=Oi(t,this._stageAspect());this._view=this._clampView({x:this._panStart.vx-e/(s.clientWidth||1)*n.w,y:this._panStart.vy-i/(s.clientHeight||1)*n.h,w:n.w,h:n.h},o)}}}else this._markupMove(t);else this._decorMoveUpdate(t)}else this._bdMove(t);else this._dtMove(t);else this._physicalMove(t);else this._physicalRotateMove(t)}_stagePointerLeave(t){this._markup&&("opening"===this._tool?(this._cursorPt=null,this._clearOpeningPlacement(!1)):"draw"===this._tool&&this._clearPlanSnapHover())}_stagePointerUp(t){if(this._kiosk){clearTimeout(this._kioskHoldTimer);const e=this._swipeStart;if(this._swipeStart=null,e&&e.id===t.pointerId){const i=t.clientX-e.x,s=t.clientY-e.y;if(Math.abs(i)+Math.abs(s)<8){const t=Date.now();t-this._lastTap<350&&this._resetZoom(),this._lastTap=t}const n="pan"===this._panLock?null:function(t,e,i,s,n,o=60){if(i>1.001||s.length<2)return null;if(Math.abs(t)t.stopPropagation()}>
-
`}get _bdBase(){const t=this._curSpaceCfg;return t?.plan_url?{..._c(t.plan_aspect,gm)}:null}get _bdRect(){const t=this._curSpaceCfg;return t?.plan_url?fc(t,gm):null}get _bdParams(){const t=this._curSpaceCfg,e=Number(t?.plan_x),i=Number(t?.plan_y),s=Number(t?.plan_scale),n=Number(t?.plan_scale_x),o=Number(t?.plan_scale_y),a=Number.isFinite(s)&&s>0?s:1;return{dx:Number.isFinite(e)?e:0,dy:Number.isFinite(i)?i:0,sx:Number.isFinite(n)&&n>0?n:a,sy:Number.isFinite(o)&&o>0?o:a,angle:rr(t?.plan_angle)}}_openBackdropDialog(t){if(!this._bdMovable||!this._bdRect)return;t?.preventDefault(),t?.stopPropagation(),this._bdDrag=null;const e=this._bdRect;this._backdropDialog={widthCm:hr(e.w,this._cellCm,this._gridPitch),heightCm:hr(e.h,this._cellCm,this._gridPitch),angle:this._angleField(e.angle)}}_saveBackdropDialog(){const t=this._backdropDialog,e=this._bdBase,i=this._bdRect;if(!t||!e||!i)return;const s=rr(t.angle),n=this._geometrySnapshot(),o=Math.min(e.w*mc,Math.max(e.w*gc,ri(cr(t.widthCm,this._cellCm,this._gridPitch),this._gridPitch))),a=Math.min(e.h*mc,Math.max(e.h*gc,ri(cr(t.heightCm,this._cellCm,this._gridPitch),this._gridPitch))),r=lr({x:i.x+i.w/2-o/2,y:i.y+i.h/2-a/2},s,t=>this._snap(t));this._bdApply((r[0]-e.x)/gm,(r[1]-e.y)/gm,o/e.w,a/e.h,s),this._backdropDialog=null,this._recordGeometry(this._t("history.backdrop_transform"),n),this._saveConfig()}get _bdActive(){return"decor"===this._mode&&!!this._bdRect&&"backdrop"===this._decorTool}get _bdMovable(){return"decor"===this._mode&&"backdrop"===this._decorTool&&!!this._bdRect}_bdApply(t,e,i,s,n){const o=this._curSpaceCfg;if(!o)return;o.plan_x=Number(Dc(t).toFixed(6)),o.plan_y=Number(Dc(e).toFixed(6)),delete o.plan_scale,o.plan_scale_x=Number(Math.min(mc,Math.max(gc,i)).toFixed(6)),o.plan_scale_y=Number(Math.min(mc,Math.max(gc,s)).toFixed(6));const a=rr(n);a?o.plan_angle=Number(a.toFixed(2)):delete o.plan_angle,this._cfgEpoch++,this.requestUpdate()}_bdStart(t,e,i=!1){const s=this._bdBase,n=this._bdRect;if(!s||!n)return!1;const o=this._svgPoint(t),a=e?e[0]:0,r=e?e[1]:0,l=a>0?n.x:n.x+n.w,c=r>0?n.y:n.y+n.h;return this._bdDrag={kind:i?"rotate":e?"scale":"move",pid:t.pointerId,sx:o[0],sy:o[1],base:s,p0:this._bdParams,fx:l,fy:c,sgx:a,sgy:r,rect0:{x:n.x,y:n.y,w:n.w,h:n.h,angle:n.angle},before:this._geometrySnapshot(),moved:!1},xm(t),!0}_bdMove(t){const e=this._bdDrag;if(!e)return;const i=this._svgPoint(t),s=e.base;if("move"===e.kind){const t=e.rect0.x,n=e.rect0.y,o=this._snap([t+(i[0]-e.sx),n+(i[1]-e.sy)]),a=Math.abs(o[0]-t)>1e-9||Math.abs(o[1]-n)>1e-9;if(!a&&!e.moved)return;return e.moved||=a,void this._bdApply((o[0]-s.x)/gm,(o[1]-s.y)/gm,e.p0.sx,e.p0.sy,e.p0.angle)}if("rotate"===e.kind){const s=e.rect0.x+e.rect0.w/2,n=e.rect0.y+e.rect0.h/2,o=180*Math.atan2(e.sy-n,e.sx-s)/Math.PI;let a=e.p0.angle+(180*Math.atan2(i[1]-n,i[0]-s)/Math.PI-o);t.shiftKey||(a=5*Math.round(a/5)),a=rr(a);const r=Math.abs(a-e.p0.angle)>1e-9;if(!r&&!e.moved)return;return e.moved||=r,void this._bdApply(e.p0.dx,e.p0.dy,e.p0.sx,e.p0.sy,a)}const n=gr(e.rect0,e.sgx,e.sgy,i[0],i[1],!t.shiftKey,this._gridPitch,Math.min(s.w,s.h)*gc),o=n.w/Math.max(1e-9,s.w),a=n.h/Math.max(1e-9,s.h),r=Math.abs(o-e.p0.sx)>1e-9||Math.abs(a-e.p0.sy)>1e-9||Math.abs(n.x-e.rect0.x)>1e-9||Math.abs(n.y-e.rect0.y)>1e-9;if(!r&&!e.moved)return;e.moved||=r;const l=lr(n,e.p0.angle,t=>this._snap(t));this._bdApply((l[0]-s.x)/gm,(l[1]-s.y)/gm,o,a,e.p0.angle)}get _bdMoved(){if("decor"!==this._mode||!this._bdRect)return!1;const t=this._bdParams;return 0!==t.dx||0!==t.dy||1!==t.sx||1!==t.sy||0!==t.angle}_bdReset(){const t=this._curSpaceCfg;if(!t)return;const e=this._geometrySnapshot();delete t.plan_x,delete t.plan_y,delete t.plan_scale,delete t.plan_scale_x,delete t.plan_scale_y,delete t.plan_angle,this._bdDrag=null,this._recordGeometry(this._t("history.backdrop_transform"),e),this._saveConfig(),this._showToast(this._t("decor.backdrop_reset_done")),this.requestUpdate()}_bdUp(){const t=this._bdDrag;this._bdDrag=null,t?.moved&&(this._recordGeometry(this._t("history.backdrop_transform"),t.before),this._saveConfig()),this.requestUpdate()}get _bdLive(){if(!this._bdDrag)return null;const t=this._bdRect;return t?{x:t.x+t.w/2,y:t.y+t.h/2,text:`${this._fmtLen([0,0],[t.w,0])} × ${this._fmtLen([0,0],[0,t.h])}`}:null}_renderBackdropFrame(t){const e=this._bdRect;if(!this._bdActive||!e)return G;const i=.02*Math.max(t.w,t.h),s=i/4,n=e.x+e.w/2,o=e.y+e.h/2,a=rr(e.angle),r=2.2*i;return j`
-
-
- ${Uc.map(e=>W`
-
- ${t?W`${this._t(`furn.group_${e}`)}
-
- ${Yc(e).map(e=>W``)}
-
`)}
-
-
- this._furnPalette={...t,w:this._furnFieldToCm(Number(e.target.value))}} />
-
- this._furnPalette={...t,h:this._furnFieldToCm(Number(e.target.value))}} />
- ${this._t("furn.place_hint")}
-
`:W`${this._t("furn.pick_hint")}
`}
- ${this._t("confirm.erase_decor",{kind:e})}
-
-
-
-
-
-
- ${""}
-
- this._decorTextDialog={...t,...e.detail}}>
-
-
- this._decorTextDialog={...t,sizeCm:this._decorTextCm(Number(e.target.value))}} />
- ${this._t(this._imperial?"wallthick.unit_in":"wallthick.unit_cm")}
-
- this._decorTextDialog={...t,angle:e.target.value}} />
-
-
- this._decorTextDialog={...t,pickerEntity:e.target.value}} />
-
- ${e?W`
-
-
- `:G}
-
-
-
-
-
-
- ${"furniture"===t.kind?W`
-
- `:G}
- this._decorShapeDialog={...t,...e.detail}}>
-
- this._decorShapeDialog={...t,fillColor:e.detail.color,fillOpacity:e.detail.opacity}}> `:G}
-
- this._decorShapeDialog={...t,widthCm:this._decorSmallCm(Number(e.target.value))}} />${this._t(this._imperial?"wallthick.unit_in":"wallthick.unit_cm")}
- ${"line"===t.kind?W`
-
-
-
-
-
-
- this._decorShapeDialog={...t,lengthCm:this._decorLargeCm(Number(e.target.value))}} />
- ${s}
`:W`
-
- this._decorShapeDialog={...t,sizeWCm:this._decorLargeCm(Number(e.target.value))}} />
- ×this._decorShapeDialog={...t,sizeHCm:this._decorLargeCm(Number(e.target.value))}} />
- ${s}
`}
-
- this._decorShapeDialog={...t,angle:e.target.value}} />
- ${e?W`
-
-
-
-
-
-
-
-
- this._backdropDialog={...t,widthCm:this._decorLargeCm(Number(e.target.value))}} />
- ×this._backdropDialog={...t,heightCm:this._decorLargeCm(Number(e.target.value))}} />
- ${e}
-
- this._backdropDialog={...t,angle:e.target.value}} />
-
-
-
-
- t.stopPropagation()}>
-
`:W``}_openingAt(t){if(!this._openingsR.length)return null;const e=this._openingsR.flatMap(e=>{const i=e.angle*Math.PI/180,s=t[0]-e.rx,n=t[1]-e.ry,o=s*Math.cos(i)+n*Math.sin(i);return Math.abs(o)>e.rlen/2+hc(12,this._cellCm)?[]:[{o:e,localY:-s*Math.sin(i)+n*Math.cos(i)}]});if(!e.length)return null;const i=this._spaceModel();if(!i)return null;const s=this._openPairs().flatMap(t=>t.segs),n=this._openingWallIndexFor(i,s).value;return e.find(({o:t,localY:e})=>{const i="gate"===t.type?!t.flip_v:t.flip_v,s=t.partitionHost||this._spaceWalls.length||"gate"===t.type?this._openingFace(t,n,!!i):{ox:0,oy:0,cm:0,side:-1},o=jp({type:t.type,length:t.rlen,angle:t.angle,amount:this._openingAmt(t),flipH:!!t.flip_h,flipV:!!t.flip_v,cellCm:this._cellCm,gridPitch:this._gridPitch,face:s});return Math.abs(e)<=o.hitHalf})?.o||null}_resolveOpeningPlacement(t){const e=this._openingPreset;if("opening"!==this._tool||!e)return null;const i=this._spaceModel();if(!i)return null;const s=this._openCuts(),n=this._openingWallIndexFor(i,s),o=`${n.key}|partitions:${this._cfgEpoch}`;var a,r,l;this._openingPlacementIntervalsCache&&this._openingPlacementIntervalsCache.key===o||(this._openingPlacementIntervalsCache={key:o,value:[...dl(i.rooms,this._spaceWalls,s,this._wallKeyPitch,this._cellCm,this._gridPitch,gm),...(a=i.partitions,r=this._cellCm,l=this._gridPitch,a.flatMap(t=>!Td(t.a)||!Td(t.b)||Math.hypot(t.b[0]-t.a[0],t.b[1]-t.a[1])<=1e-9?[]:[{roomId:"",a:[t.a[0],t.a[1]],b:[t.b[0],t.b[1]],key:`partition:${t.id}`,kind:"outer",cm:t.cm,open:!1,half:xr(t.cm,r,l)/2,partitionHost:{kind:"partition",id:t.id}}]))]}),this._openingDimensionContextCache&&this._openingDimensionContextCache.key===o||(this._openingDimensionContextCache={key:o,value:Lg({rooms:i.rooms,walls:this._spaceWalls,openCuts:s,partitions:i.partitions,roomOpenings:this._roomWallOpeningInputs(),partitionCuts:this._partitionOpeningCuts(i),pitch:this._wallKeyPitch,cellCm:this._cellCm,gridPitch:this._gridPitch,coordScale:gm,epsilon:2e-4*this._gridPitch})});const c=Rg({pointer:[t[0],t[1]],preset:e,geometryRevision:this._cfgEpoch,renderedLength:this._cmToUnits(e.lengthCm),intervals:this._openingPlacementIntervalsCache.value,baseTolerance:1.5*this._gridPitch,bodyPointerPadding:this._cssPxToRender(this._boundaryCoarse?10:6),gridStep:this._gridPitch});this._openingJambBlockCm=c.jambBlockedTarget?c.jambBlockedTarget.physicalHalfWidth/this._gridPitch*this._cellCm:null;const h=c.candidate;if(!h)return null;const d="gate"===h.type?!h.flipV:h.flipV;let p;if(h.host){const t=Id({id:"preview",type:h.type,x:h.x/gm,y:h.y/gm,angle:h.angle,length:h.renderedLength/gm,host:h.host},i.partitions,gm,this._cellCm,this._gridPitch).resolved;p=t?zd(t,d):{ox:0,oy:0,cm:0,side:-1}}else p=zl(n.value,{x:h.x,y:h.y,angle:h.angle,length:h.renderedLength,flip_v:d});const u="mi"===this.hass?.config?.unit_system?.length,_=Vg(h,this._openingDimensionContextCache.value).map(t=>({x:t.label[0],y:t.label[1],text:li(t.distance/this._gridPitch*this._cellCm,u),dimension:t}));return{...h,face:p,measure:{labels:_,guide:h.measure.guide}}}_activateOpeningPlacement(t){this._activateMarkupTool("opening"),"opening"===this._tool&&(this._openingPreset=function(t,e){return{type:t,lengthCm:Cg(t),flipH:!1,flipV:!1,revision:e}}(t,++this._openingPresetRevision),this._openingHoverCandidate=null,this._cursorPt=null)}_clearOpeningPlacement(t){this._openingHoverCandidate=null,this._openingJambBlockCm=null,t&&(this._openingPreset=null,this._openingRebindId=null)}_openingClick(t){const e=this._spaceModel();if(!e)return;const i=this._openingRebindId?null:this._openingAt(t);if(i)return void this._editOpening(i);const s=this._openingPreset;if(!s)return;const n=this._openingHoverCandidate,o=n&&Ig(n,[t[0],t[1]],s.revision,this._cfgEpoch)?n:this._resolveOpeningPlacement(t);if(!o){if(null!=this._openingJambBlockCm)return void this._showToast(this._t("opening.partition_jamb_margin",{distance:li(this._openingJambBlockCm,this._imperial)}));const i=1.5*this._gridPitch,s=ui(t,e.rooms,i);return s&&function(t,e,i,s,n){for(const o of s)if(!(Hs([t,e],o)>n)&&zr([o[0],o[1]],[o[2],o[3]],i))return!0;return!1}(s.x,s.y,s.angle,this._openCuts(),i)?void this._showToast(this._t("toast.opening_on_virtual")):void this._showToast(this._t("toast.opening_no_wall"))}const a=this._openingRebindId?this._curSpaceCfg?.openings?.find(t=>t.id===this._openingRebindId):null;this._openingDialog={...a?{id:a.id,type:a.type,lengthCm:Math.round(a.length*gm/this._gridPitch*this._cellCm),lengthTouched:!1,contact:a.contact||"",lock:a.lock||"",invert:!!a.invert,flipH:!!a.flip_h,flipV:!!a.flip_v}:{type:o.type,lengthCm:o.lengthCm,contact:"",lock:"",invert:!1,flipH:o.flipH,flipV:o.flipV},...o.host?{host:o.host}:{},x:o.x,y:o.y,angle:o.angle},this._openingRebindId=null,this._openingHoverCandidate=null,this._cursorPt=null}_editOpening(t){this._openingDialog={id:t.id,type:t.type,lengthCm:Math.round(t.rlen/this._gridPitch*this._cellCm),lengthTouched:!1,contact:t.contact||"",lock:t.lock||"",invert:!!t.invert,flipH:!!t.flip_h,flipV:!!t.flip_v,...t.host?{host:{...t.host}}:{},x:t.rx,y:t.ry,angle:t.angle}}_opPointerDown(t,e){if("plan"===this._mode&&this._spaceModel()&&"resize"!==this._tool){t.preventDefault(),t.stopPropagation();try{xm(t)}catch{}this._opDrag={id:e.id,moved:!1,sx:t.clientX,sy:t.clientY,dirty:!1,before:this._geometrySnapshot()}}}_opPointerMove(t,e){if(!this._opDrag||this._opDrag.id!==e.id)return;if(Math.abs(t.clientX-this._opDrag.sx)+Math.abs(t.clientY-this._opDrag.sy)<=3)return;const i=this._spaceModel();if(!i)return;const s=this._svgPoint(t),n=this._curSpaceCfg,o=n?.openings?.find(t=>t.id===e.id);if(!o)return;if("partition"===o.host?.kind){const t=i.partitions.find(t=>t.id===o.host.id);if(!t)return;const e=t.b[0]-t.a[0],n=t.b[1]-t.a[1],a=Math.hypot(e,n);if(!(a>1e-9))return;const r=e/a,l=n/a;if(Math.abs((s[0]-t.a[0])*l-(s[1]-t.a[1])*r)>4*this._gridPitch)return;const c=o.length*gm/2+Pd(t,this._cellCm,this._gridPitch);let h=(s[0]-t.a[0])*r+(s[1]-t.a[1])*l;if(h=Math.round(h/this._gridPitch)*this._gridPitch,h=Math.max(c,Math.min(a-c,h)),a<2*c-1e-9)return;const d=h/a,p=(t.a[0]+r*h)/gm,u=(t.a[1]+l*h)/this._spaceH;let _=180*Math.atan2(n,e)/Math.PI;_>=90?_-=180:_<-90&&(_+=180);const g=o.host.t!==d||o.x!==p||o.y!==u||o.angle!==_;return this._opDrag.moved=!0,g&&(this._opDrag.dirty=!0),o.host={...o.host,t:d},o.x=p,o.y=u,o.angle=_,this._opMeasure=null,g&&this._cfgEpoch++,void this.requestUpdate()}const a=ui(s,i.rooms,4*this._gridPitch);if(!a)return;this._opDrag.moved=!0;const r=this._opRuler(a,o.length*gm);this._opMeasure=r.measure;const l=r.x/gm,c=r.y/this._spaceH,h=o.x!==l||o.y!==c||o.angle!==a.angle;h&&(this._opDrag.dirty=!0),o.x=l,o.y=c,o.angle=a.angle,h&&this._cfgEpoch++,this.requestUpdate()}_opRuler(t,e){const i=this._spaceModel()?.rooms||[],s=this._gridPitch/2;let n=t.x,o=t.y,a=_i([n,o],t.angle,e,i,s);if(a&&a.centered&&(n!==a.wallCenter[0]||o!==a.wallCenter[1]))[n,o]=a.wallCenter,a=_i([n,o],t.angle,e,i,s);else if(a){const[r,l]=a.wallA,[c,h]=a.wallB,d=c-r,p=h-l,u=Math.hypot(d,p);if(u>0){const c=this._gridPitch,h=Math.min(e/2,u/2);let _=Math.round(((n-r)*d+(o-l)*p)/u/c)*c;_=Math.max(h,Math.min(u-h,_)),n=r+_/u*d,o=l+_/u*p,a=_i([n,o],t.angle,e,i,s)||a}}if(!a)return{x:n,y:o,angle:t.angle,measure:null};const r="mi"===this.hass?.config?.unit_system?.length,l=(t,e)=>({x:e[0],y:e[1],text:li(t/this._gridPitch*this._cellCm,r)});return{x:n,y:o,angle:t.angle,measure:{labels:[l(a.sideA,a.midA),l(a.sideB,a.midB)],guide:a.centered?{x:a.wallCenter[0],y:a.wallCenter[1],angle:t.angle}:null}}}_opPointerUp(t,e){if(!this._opDrag||this._opDrag.id!==e.id)return;const i=this._opDrag,s=i.moved;this._opMeasure=null,s&&i.dirty&&(this._recordGeometry(this._t("history.move_opening"),i.before),this._saveConfig()),s?window.setTimeout(()=>this._opDrag=null,0):this._opDrag=null}_opClick(t,e){"plan"===this._mode&&"resize"===this._tool||(t.stopPropagation(),this._opDrag?.moved||"plan"===this._mode&&this._editOpening(e))}_saveOpening(){const t=this._openingDialog,e=this._curSpaceCfg,i=this._spaceModel();if(!t||!e||!i)return;const s=this._geometrySnapshot(),n=this._spaceH,o=(e.openings||[]).find(e=>e.id===t.id),a={...o||{},id:t.id||"o"+Date.now().toString(36),type:t.type,x:t.x/gm,y:t.y/n,angle:t.angle,length:o&&!t.lengthTouched?o.length:this._cmToUnits(Math.max(20,t.lengthCm))/gm,...t.host?{host:{...t.host}}:{}};if(a.host){const t=Fd(o,a)?Ad(a,i.partitions,gm,this._cellCm,this._gridPitch):Id(a,i.partitions,gm,this._cellCm,this._gridPitch);if(!t.resolved){const e=i.partitions.find(t=>t.id===a.host.id);if("does-not-fit-jamb"===t.reason&&e){const t=Pd(e,this._cellCm,this._gridPitch);this._showToast(this._t("opening.partition_jamb_margin",{distance:li(t/this._gridPitch*this._cellCm,this._imperial)}))}else this._showToast(this._t("opening.partition_orphan"));return}const s=(e.openings||[]).flatMap(t=>{if(!t.host||t.id===a.id)return[];const e=Id(t,i.partitions,gm,this._cellCm,this._gridPitch).resolved;return e?[e]:[]});if(function(t,e,i=1e-9){const s=t.length/(2*t.axis.length),n=t.t-s,o=t.t+s;return e.some(e=>{if(e.host.id!==t.host.id||e.opening.id===t.opening.id)return!1;const s=e.length/(2*e.axis.length);return Math.max(n,e.t-s)
-
- {this._wallDialog={...t,value:e.target.value}}}
- @keydown=${t=>{"Enter"===t.key&&(t.preventDefault(),this._wallThickApply(!1))}} />
- ${this._t(this._imperial?"wallthick.unit_in":"wallthick.unit_cm")}
-
-
-
-
-
-
- ${this._t("space.loading")}
`;const e=t.saved||[];if(!e.length)return W`${this._t("space.no_saved")}
`;return W`
- ${e.map(e=>W`
-
`}async _saveSpaceDialog(){const t=this._spaceDialog;if(!t||t.busy||!t.title.trim())return;if("file"===t.source&&!t.planFile&&!t.planUrl)return void this._showToast(this._t("toast.plan_required"));const e="create"===t.mode&&0===(this._serverCfg?.spaces.length||0);this._spaceDialog={...t,busy:!0};try{const i="create"===t.mode?"s"+Date.now().toString(36):t.spaceId;let s=null;if("file"===t.source&&t.planFile){s={url:(await this.hass.callWS({type:"houseplan/plan/set",space_id:i,ext:t.planFile.ext,data:t.planFile.b64})).url,aspect:t.planFile.aspect}}let n=t.savedAspect||null;!s&&"file"===t.source&&t.planUrl&&!n&&this._aspectJob&&(n=await this._aspectJob||null);const o=this._serverCfg;let a;if("create"===t.mode)a={id:i,title:t.title.trim(),plan_url:null,view_box:[0,0,1,1],rooms:[]},o.spaces.push(a);else{if(a=o.spaces.find(t=>t.id===i),!a)throw new Error("space "+i+" is gone from the config");a.title=t.title.trim()}s?(a.plan_url=s.url,a.plan_aspect=s.aspect):"file"===t.source&&t.planUrl&&t.planUrl!==a.plan_url&&(a.plan_url=t.planUrl,a.plan_aspect=n),"draw"===t.source&&(a.plan_url=null,a.plan_aspect=null,delete a.plan_x,delete a.plan_y,delete a.plan_scale,delete a.plan_scale_x,delete a.plan_scale_y,delete a.plan_angle),a.settings={...a.settings||{},show_borders:t.showBorders,show_names:t.showNames,hide_decor:t.hideDecor||void 0,hide_openings:t.hideOpenings||void 0,room_color:t.roomColor,room_opacity:t.roomOpacity,bg_color:t.bgColor||void 0,bg_mode:t.bgMode||void 0,north_deg:t.northDeg??void 0,sun_rays:t.sunRays??void 0,fill_mode:t.fillMode,custom_fill:t.customFill||void 0,glow_enabled:t.glowEnabled,temp_min:Number.isFinite(t.tempMin)?Math.min(t.tempMin,t.tempMax):20,temp_max:Number.isFinite(t.tempMax)?Math.max(t.tempMin,t.tempMax):25,show_lqi:t.showLqi,card_font_scale:1!==t.cardFontScale?t.cardFontScale:void 0,label_temp:t.labelTemp,label_hum:t.labelHum,label_lqi:t.labelLqi,label_light:t.labelLight},a.cell_cm=Number.isFinite(t.cellCm)&&t.cellCm>0?Math.max(.1,Math.min(Qg,t.cellCm)):5,await this._saveConfigNow(),this._spaceDialog=null,"create"===t.mode&&this._commitSpace(a.id),this._regSignature="",this._maybeRebuildDevices(),this._importQueue.length?this._openNextImport():e||this._importTotal>0?(this._importTotal=0,this._commitSpace(this._serverCfg.spaces[0]?.id||this._space),this._setMode("plan"),this._tool="draw",this._path=[],this._cursorPt=null,this._primeDrawWallField(),this._showToast(this._t(e&&!this._importTotal?"toast.space_added_onboard":"import.done"))):(this._showToast("create"===t.mode?this._t("toast.space_added"):this._t("toast.space_saved")),"create"===t.mode&&("plan"!==this._mode?this._setMode("plan"):(this._tool="draw",this._path=[],this._cursorPt=null,this._primeDrawWallField(),this._saveNav())))}catch(t){this._spaceDialog&&(this._spaceDialog={...this._spaceDialog,busy:!1}),this._showToast(this._t("toast.error",{err:this._errText(t)}))}}async _deleteSpace(){const t=this._spaceDialog;if(!t||"edit"!==t.mode)return;const e=this._serverCfg;if(!e)return;const i=e.spaces.find(e=>e.id===t.spaceId),s=k_(e,this._layout||{},t.spaceId||""),n=1===e.spaces.length&&e.spaces[0]?.id===t.spaceId;if(!s.count||n){if(confirm(this._t("confirm.delete_space",{title:i.title}))){this._spaceDialog={...t,deleteBlockers:0,busy:!0};try{this._saveConfigDebounced.pending()&&this._saveConfigDebounced.flush(),this._persistLayout.pending()&&this._persistLayout.flush(),await this._writeChain;const e=await this.hass.callWS({type:"houseplan/space/delete",space_id:t.spaceId,expected_config_rev:this._cfgRev,expected_layout_rev:this._layoutRev}),[i,s]=await Promise.all([this.hass.callWS({type:"houseplan/config/get"}),this.hass.callWS({type:"houseplan/layout/get"})]);this._adoptStructuralResponses(i,s),this._cfgRev=e?.config_rev??this._cfgRev,this._layoutRev=e?.layout_rev??this._layoutRev,this._spaceDialog=null,this._space===t.spaceId&&this._commitSpace(this._serverCfg.spaces[0]?.id||""),this._regSignature="",this._maybeRebuildDevices(),this._showToast(this._t("toast.space_deleted"))}catch(e){"conflict"!==e?.code&&"space_in_use"!==e?.code||await Promise.all([this._reloadConfigOnly(!0),this._reloadLayoutOnly()]);const i=this._serverCfg;if(this._spaceDialog&&i){const e=k_(i,this._layout||{},t.spaceId||""),s=1===i.spaces.length&&i.spaces[0]?.id===t.spaceId;this._spaceDialog={...this._spaceDialog,busy:!1,deleteBlockers:s?0:e.count}}this._showToast(this._t("toast.delete_failed",{err:this._errText(e)}))}}}else this._spaceDialog={...t,deleteBlockers:s.count}}async _saveConfigNow(){this._cfgEpoch++;try{await this._writeConfig()}catch(t){throw"conflict"===t?.code&&await this._reloadConfigOnly(),t}}_startImport(){const t=this._importDialog;if(!t)return;const e=t.floors.filter(t=>t.checked).map(t=>t.name);this._importDialog=null,e.length?(this._importQueue=e,this._importTotal=e.length,this._openNextImport()):this._openSpaceDialog("create")}_openNextImport(){const t=this._importQueue.shift();void 0!==t&&(this._spaceDialog={mode:"create",title:t,planUrl:null,planFile:null,...Ah(),hideDecor:!1,hideOpenings:!1,roomColor:ns,roomOpacity:os,fillMode:"custom",customFill:null,glowEnabled:!0,bgColor:null,bgMode:"daynight",northDeg:null,sunRays:null,tempMin:20,tempMax:25,showLqi:this._config?.show_signal??!0,cardFontScale:1,labelTemp:!1,labelHum:!1,labelLqi:!1,labelLight:!1,cellCm:dc(this._imperial),cellCmInput:pc(dc(this._imperial),this._imperial),cellCmTouched:!1,busy:!1})}_skipImport(){this._spaceDialog=null,this._importQueue.length?this._openNextImport():this._importTotal>0&&this._model.length&&(this._importTotal=0,this._commitSpace(this._serverCfg.spaces[0]?.id||this._space),this._setMode("plan"),this._showToast(this._t("import.done")))}_renderImportDialog(){const t=this._importDialog,e=t.floors.filter(t=>t.checked).length;return W`
- })
-
-
-
-
`)}
-
-
- ${this._t("import.hint")}
- ${t.floors.map((e,i)=>W``)}
-
-
-
-
-
-
-
- ${this._t("backup.export_hint")}
-
-
- ${"space"===t.kind&&e?W``:G}
- ${this._t("backup.privacy_warning")}
- ${t.error?W`${t.error}
`:G}
-
-
-
-
-
-
-
- ${t.filename}${(t.size/1024).toFixed(1)} KB
- ${t.busy&&!e?W`${this._t("backup.reading")}
`:G}
- ${t.error?W`${t.error}
`:G}
- ${e?W`
-
- ${this._t("full"===e.kind?"backup.full":"backup.current_space")}
- ${e.plan_only?W`${this._t("backup.plan_only_preview")}`:G}
- ${this._t("same"===e.source?"backup.same_source":"backup.foreign_source")}
- ${this._t("backup.created",{value:e.created_at||"—"})}
- ${this._t("backup.versions",{card:e.card_version||"—",integration:e.integration_version||"—",model:String(e.model_version??"—")})}
-
-
- ${this._t("backup.count_spaces",{n:"full"===e.kind?`${e.current_counts?.spaces||0} → ${i.spaces||0}`:String(i.spaces||0)})}
- ${this._t("backup.count_rooms",{n:"full"===e.kind?`${e.current_counts?.rooms||0} → ${i.rooms||0}`:String(i.rooms||0)})}
- ${this._t("backup.count_walls",{n:"full"===e.kind?`${e.current_counts?.walls||0} → ${i.walls||0}`:String(i.walls||0)})}
- ${this._t("backup.count_openings",{n:"full"===e.kind?`${e.current_counts?.openings||0} → ${i.openings||0}`:String(i.openings||0)})}
- ${this._t("backup.count_decor",{n:"full"===e.kind?`${e.current_counts?.decor||0} → ${i.decor||0}`:String(i.decor||0)})}
- ${this._t("backup.count_markers",{n:"full"===e.kind?`${e.current_counts?.markers||0} → ${i.markers||0}`:String(i.markers||0)})}
- ${this._t("backup.count_layout",{n:"full"===e.kind?`${e.current_counts?.layout||0} → ${i.layout||0}`:String(i.layout||0)})}
-
- ${e.bindings?W`${this._t("backup.bindings",{device:String(e.bindings.device||0),entity:String(e.bindings.entity||0),virtual:String(e.bindings.virtual||0),legacy:String(e.legacy_positions||0)})}
${this._t("backup.binding_status",{active:String(e.bindings.active||0),disabled:String(e.bindings.disabled||0),missing:String(e.bindings.missing||0)})}
`:G}
- ${e.missing_areas?.length?W`${this._t("backup.missing_areas",{areas:e.missing_areas.join(", ")})}
`:G}
- ${e.dropped_marker_links?W`${this._t("backup.dropped_marker_links",{n:String(e.dropped_marker_links)})}
`:G}
- ${e.repaired_target_refs?W`${this._t("backup.repaired_target_refs",{n:String(e.repaired_target_refs)})}
`:G}
- ${"full"===e.kind?W`
- ${this._t("backup.replace_warning")}
- ${"foreign"===e.source?W`${this._t("backup.foreign_bookkeeping")}
`:G}`:W`
- ${this._t("backup.final_name")}${e.space_title}
- ${this._t("backup.target_settings")}
- ${e.duplicates?W``:G}`}
- ${e.content?.length?W`
- ${this._t("backup.content")}
- ${e.content.map(t=>W`${t.url} · ${this._t("available"===t.state?"backup.content_available":"external"===t.state?"backup.content_external":"backup.content_detach_required")}`)}
-
`:G}
- ${e.confirmation_required?W``:G}
- `:G}
-
-
-
- ${e?W``:G}
-
-
- {this._setFillColor(t,{c:e.detail.color,a:e.detail.opacity})}}>
-
`}get _glowRadiusCm(){const t=Number(this._settings.glow_radius_cm);return Number.isFinite(t)&&t>0?t:300}get _imperial(){return"mi"===this.hass?.config?.unit_system?.length}get _glowRadiusPlaceholder(){const t=this._glowRadiusCm;return this._imperial?String(Math.round(t/30.48*10)/10):String(t/100)}_glowTransition(t,e){let i=this._glowRenderedSources.get(t);if(e){const e=this._glowFadeTimers.get(t);if(null!=e&&(clearTimeout(e),this._glowFadeTimers.delete(t)),null==i){this._suspendGlowFeatherForTransition(),i=++this._glowSourceSeq,this._glowRenderedSources.set(t,i),this._glowEnteringSources.add(t);const e=requestAnimationFrame(()=>{this._glowEnterRafs.get(t)===e&&(this._glowEnterRafs.delete(t),this._glowEnteringSources.delete(t),this.isConnected&&this.requestUpdate())});this._glowEnterRafs.set(t,e)}return{domId:i,entering:this._glowEnteringSources.has(t),leaving:!1}}if(null==i)return null;const s=this._glowEnterRafs.get(t);if(null!=s&&cancelAnimationFrame(s),this._glowEnterRafs.delete(t),this._glowEnteringSources.delete(t),!this._glowFadeTimers.has(t)){this._suspendGlowFeatherForTransition();const e=window.setTimeout(()=>{this._glowFadeTimers.get(t)===e&&(this._glowFadeTimers.delete(t),this._glowRenderedSources.delete(t),this._glowLastAppearance.delete(t),this.isConnected&&this.requestUpdate())},534);this._glowFadeTimers.set(t,e)}return{domId:i,entering:!1,leaving:!0}}_suspendGlowFeatherForTransition(){if(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)return;this._glowFeatherSuspendUntil=Math.max(this._glowFeatherSuspendUntil,Date.now()+500),clearTimeout(this._glowFeatherResumeTimer);const t=Math.max(0,this._glowFeatherSuspendUntil-Date.now())+17,e=()=>{this._glowFeatherResumeTimer=0,Date.now()
- ${i?W`
-
- ${this._t("gs.align_preflight_failed",{spaces:o,more:r})}
-${this._t("gs.align_preflight_hint")}
`:t.changed?W`
- ${e.moved?W`${this._t("gs.align_count",{n:String(e.moved),total:String(e.total),cm:String(t.cm)})}
`:G} - ${t.where?W`${this._t("gs.align_where",{s:t.where})}
`:G} - ${e.rotated?W`${this._t("gs.align_turned",{n:String(e.rotated)})}
`:G} - ${e.removedDrafts?W`${this._t("gs.align_removed_drafts",{n:String(e.removedDrafts)})}
`:G} -${this._t("gs.optimize_changes",{m:String(e.migrated),c:String(e.canonicalized),p:String(e.coordsCanonicalized),w:String(e.wallsMerged),s:String(e.spansMerged),i:String(e.partitionsMerged)})}
- ${e.glowSpacesMigrated||e.glowRoomsMigrated?W`${this._t("gs.optimize_glow_migration",{spaces:String(e.glowSpacesMigrated),rooms:String(e.glowRoomsMigrated)})}
`:G} -${this._t("gs.align_warn")}
`:W`${this._t("gs.align_none")}
`} - ${l?W`${this._t("gs.optimize_references",{spaces:String(e.spaceRefsRemapped),rooms:String(e.roomRefsRemapped),positions:String(e.positionsRemapped),detached:String(e.markersDetached)})}
`:G} - ${c||e.deadSpaceIds.length?W`${this._t("gs.optimize_reference_warning",{positions:String(e.positionsUnresolved),nested:String(e.nestedRefsUnresolved),ids:h||"—",more:d?this._t("gs.optimize_reference_more",{n:String(d)}):""})}
`:G}
-
-
-
- ${t.changed&&t.preflight?.ok?W`
- `:G}
-
-
-
- ${this._t("gs.hint")}
-
- ${this._renderColorRow("light_on","gs.light_on")}
- ${this._renderColorRow("light_off","gs.light_off")}
- ${this._renderColorRow("light_none","gs.light_none")}
-
- ${this._renderColorRow("temp_cold","gs.temp_cold")}
- ${this._renderColorRow("temp_ok","gs.temp_ok")}
- ${this._renderColorRow("temp_hot","gs.temp_hot")}
-
- ${this._renderColorRow("lqi_low","gs.lqi_low")}
- ${this._renderColorRow("lqi_high","gs.lqi_high")}
-
- ${this._renderColorRow("glow_base","gs.glow_base")}
- ${this._renderColorRow("glow_light","gs.glow_light")}
-
- ${this._t("gs.glow_radius")}
- {const e=em(t.target.value);null!=e&&e>0&&(this._settingsDialog={...this._settingsDialog,glowRadius:e})}} />
- ${this._imperial?this._t("gs.unit_ft"):this._t("gs.unit_m")}
-
-
- ${this._renderColorRow("wall_fill","gs.wall_fill")}
-
-
- ${this._t("gs.bg_mode")}
-
-
- ${"static"===this._settingsDialog.bgMode?W`
- {this._settingsDialog={...this._settingsDialog,bgColor:t.detail.color}}}>
- ${this._settingsDialog.bgColor?W``:W`${this._t("gs.bg_theme")}`}
-
`:W`${this._t("gs.bg_daynight_hint")}
`}
-
- ${er(this.hass)?G:W`${this._t("gs.sun_missing")}
`}
-
- ${this._renderCompass()}
-
-
- ${this._canEdit?W`
-
-
- ${this._t("gs.north")}
-
-
- {const e=t.target.value.trim(),i=""===e?null:Math.round(Number(e));this._settingsDialog={...this._settingsDialog,northDeg:null!==i&&Number.isFinite(i)?Math.min(359,Math.max(0,i)):null}}} />
- ${null!==this._settingsDialog.northDeg?W``:G}
-
- ${null===this._settingsDialog.northDeg?W`${this._t("gs.north_hint")}
`:G}
- ${this._t("gs.backup_hint")}
-
-
-
-
-
-
- ${this._canOptimizeUndo&&"import"===this._undoKind?W`
- `:G}
-
`:G}
-
- ${this._t("gs.grid_hint")}
-
-
-
- ${this._canOptimizeUndo&&"import"!==this._undoKind?W`
-
-
`:G}
-
- ${this._t("gs.about_version",{v:Yg})}
-
-
-
-
-
-
-
-
-
- ${this._t("rules.hint")}
-
- this._rulesDialog={...t,test:e.target.value}} />
- ${i?W`
- ${t.rules.map((e,i)=>{const n=""!==e.pattern.trim()&&!function(t){try{return new RegExp(t,"i"),!0}catch{return!1}}(e.pattern);return W`
- {const n=[...t.rules];n[i]={...e,pattern:s.target.value},this._rulesSet(n)}} />
- {const n=[...t.rules];n[i]={...e,icon:s.target.value},this._rulesSet(n)}} />
- s(i,-1)}>
- s(i,1)}>
- this._rulesSet(t.rules.filter((t,e)=>e!==i))}>
-
`})}
-
-
-
-
-
-
-
-
- ${this._rangeInput(50,300,5,Math.round(100*t[e]),t=>this._saveKioskScale({[e]:t/100}))}
- ${Math.round(100*t[e])}%
-
`;return W`
-
- ${this._t("kiosk.hint")}
- ${e("icon",this._t("kiosk.icon_scale"))}
- ${e("font",this._t("kiosk.font_scale"))}
-
-
-
-
-
-
-
-
-
- ${this._t("fixed_floor.loading")}
-
-
-
-
- ${this._t("fixed_floor.invalid_title")}
-${this._t("fixed_floor.invalid_body",{value:this._fixedFloorValue(i.value)})}
-
-
-
-
- ${this._spaceDialog?this._renderSpaceDialog():G}
- ${this._importDialog?this._renderImportDialog():G}
- ${this._toast?W`${this._t("empty.no_spaces")}
- ${this._serverStorage?W`${this._t("empty.add_first")}
- `:W`${this._t("empty.install")}
`} -${this._toast}
`:G}
-
-
-
-
-
- ${this._canEdit&&!this._kiosk?W`
-
- this._tabPointerMove(t)}>
- ${n.map(t=>W``)}
- ${""}
- ${!this._canEdit||this._kiosk||this._hasFixedFloor?G:W``}
-
- ${this._canEdit?W`
- ${[["plan","mdi:floor-plan"],["devices","mdi:tune-variant"],["decor","mdi:draw"]].map(([t,e])=>W``)}
-
`:G}
- ${this._t("count.devices",{n:c.filter(t=>!t.hidden).length})}
-
- ${this._labsIso&&"view"===this._mode&&!this._kiosk?W``:G}
-
-
- ${""}
-
-
-
- ${this._norm&&this._canEdit?W``:G}
-
-
`:G}
-
- ${"plan"===C?this._renderMarkupBar():"devices"===C?this._renderDevicesBar():this._renderDecorBar()}
-
- this._markupClick(t)}
- @wheel=${t=>this._onWheel(t)}
- @pointerdown=${t=>{this._notePointer(t),this._stagePointerDown(t)}}
- @pointermove=${t=>this._stagePointerMove(t)}
- @pointerleave=${t=>this._stagePointerLeave(t)}
- @pointerup=${t=>this._stagePointerUp(t)}
- @pointercancel=${t=>this._stagePointerCancel(t)}>
- ${nr(I,A)}
- ${this._renderEditorSecondary()}
-
- ${this._zoom>1?W`
-
- ${this._roomDialog?this._renderRoomDialog():G}
- ${this._mergeDialog?this._renderMergeDialog():G}
- ${this._openingDialog?this._renderOpeningDialog():G}
- ${this._physicalDialog?this._renderPhysicalDialog():G}
- ${this._partitionDeleteDialog?this._renderPartitionDeleteDialog():G}
- ${this._roomDeleteDialog?this._renderRoomDeleteDialog():G}
- ${this._openingInfo?this._renderOpeningInfoCard():G}
- ${this._decorTextDialog?this._renderDecorTextDialog():G}
- ${this._decorShapeDialog?this._renderDecorShapeDialog():G}
- ${this._backdropDialog?this._renderBackdropDialog():G}
- ${this._decorEraseConfirm?this._renderDecorEraseConfirm():G}
- ${this._spaceDialog?this._renderSpaceDialog():G}
- ${this._markerDialog?this._renderMarkerDialog():G}
- ${this._vacCalConfirm?W`${Math.round(100*this._zoom)}%
`:G}
- ${this._renderFarHint()}
- ${this._renderHomeArrow()}
- ${this._renderRecoveryOverlay()}
- ${this._booting||this._bootFading?W``:G}
-
-
- ${this._t("vac.residual_message",{error:this._vacCalConfirm.error})}
-
-
-
-
-
-
-
- ${this._tip.title}${this._tip.meta?W`${this._tip.meta}`:G}
- ${null!=this._tip.temp?W`${this._t("tip.temp_avg")} ${this._tip.temp}°`:G}
- ${null!=this._tip.hum?W`${this._t("tip.hum_avg")} ${this._tip.hum}%`:G}
- ${null!=this._tip.lqi?W`${this._t("tip.lqi")}
- ${this._tip.lqi}`:G}
-
`:G}
- ${this._kiosk&&!this._hasFixedFloor&&this._kioskDots&&this._model.length>1?W`
- ${this._model.map(t=>W``)}
-
`:G}
- ${this._kioskDialog?this._renderKioskDialog():G}
- ${this._vacFit?W``:G}
- ${this._tapConfirm?W`
- ${"run"===this._tapConfirm.kind?W`
- ${this._tapConfirm.text}
`:this._tapConfirm.lines.map((t,e)=>W` -${t}
`)} -
-
-
-
-
- ${this._toast}
`:G}
-
-
`}_vacMapId(t,e,i=this._planHass){const s=this._vacEntity(t),n=s?i?.states?.[s]?.attributes?.selected_map:null;return o=e.mapId,a=n,"default"!==o?o:null!=a?String(a):"default";var o,a}_vacSaveMatrix(t,e,i,s){const n=this._devices.find(e=>e.id===t),o=n?this._vacEnsureMarker(n):this._serverCfg?.markers?.find(e=>e.id===t);if(!o)return!1;const a={...o.vacuum||{}};return a.source=e,a.calibration={...a.calibration||{},[i]:s.map(t=>Number(t.toFixed(6)))},o.vacuum=a,this._regSignature="",this._maybeRebuildDevices(),this._saveConfig(),this.requestUpdate(),!0}_vacPlanRoomAnchors(t){return(this._spaceModelById(t)?.rooms||[]).map(t=>({room:t,poly:hi(t)})).filter(({room:t,poly:e})=>t.name&&e).map(({room:t,poly:e})=>{const i=Lh(e);return i?{name:String(t.name),cx:i[0],cy:i[1]}:null}).filter(Boolean)}_vacAutoCalibrate(t){const e=this._vacSource(t),i=e?Uh(this.hass?.states[e]?.attributes):null;if(!e||!i||i.rooms.length<3)return void this._showToast(this._t("vac.autocal_no_rooms"));const s=this._vacPlanRoomAnchors(t.space),n=Kh(i.rooms,s);if(!n)return void this._showToast(this._t("vac.autocal_no_match"));const o=this._serverCfg?.spaces?.find(e=>e.id===t.space),a=Number(o?.cell_cm),r=Number.isFinite(a)&&a>0?a:5,l=function(t,e,i){return![t,e,i].every(Number.isFinite)||t<0||e<=0||i<=0?Number.POSITIVE_INFINITY:t/e*i}(n.residual,this._gridPitch,r),c=this._vacMapId(t,i);l>40?this._vacCalConfirm={markerId:t.id,source:e,mapId:c,matrix:n.matrix,rooms:n.matched.length,error:li(l,"mi"===this.hass?.config?.unit_system?.length)}:this._vacSaveMatrix(t.id,e,c,n.matrix)&&this._showToast(ss(this._t("vac.autocal_done"),{rooms:String(n.matched.length)}))}_vacApplyCalibrationProposal(t){const e=this._vacCalConfirm;if(e){if(this._vacCalConfirm=null,t){const t=this._devices.find(t=>t.id===e.markerId),i=Qh(e.matrix);if(!t||!i)return;if(this._markerDialog=null,t.space!==this._space&&!this._commitSpace(t.space))return;return void(this._vacFit={markerId:e.markerId,source:e.source,mapId:e.mapId,p:i,drag:null})}this._vacSaveMatrix(e.markerId,e.source,e.mapId,e.matrix)&&this._showToast(ss(this._t("vac.autocal_done"),{rooms:String(e.rooms)}))}}_vacStartFit(t){const e=this._vacSource(t),i=e?Uh(this.hass?.states[e]?.attributes):null;if(!e||!i)return void this._showToast(this._t("vac.cal_need_pos"));const s=this._vacMapId(t,i),n=t.marker?.vacuum?.calibration?.[s],o=this._spaceModelById(t.space);if(!o)return;const a=o.vb,r=n&&6===n.length&&Qh(n)||function(t,e){const i=[],s=[];for(const e of t)null!=e.x0?(i.push(e.x0,e.x1),s.push(e.y0,e.y1)):(i.push(e.cx),s.push(e.cy));if(!i.length)return{ox:e[0]+e[2]/2,oy:e[1]+e[3]/2,s:e[2]/1e4,rot:0,mir:!0};const n=Math.min(...i),o=Math.max(...i),a=Math.min(...s),r=Math.max(...s),l=Math.max(o-n,r-a)||1,c={ox:0,oy:0,s:.6*Math.min(e[2],e[3])/l,rot:0,mir:!0},h=Zh(c),[d,p]=zh(h,(n+o)/2,(a+r)/2);return c.ox=e[0]+e[2]/2-d,c.oy=e[1]+e[3]/2-p,c}(i.rooms,a);this._markerDialog=null,(t.space===this._space||this._commitSpace(t.space))&&(this._vacFit={markerId:t.id,source:e,mapId:s,p:r,drag:null})}_vacFitSave(){const t=this._vacFit;if(!t)return;const e=this._vacSaveMatrix(t.markerId,t.source,t.mapId,Zh(t.p));this._vacFit=null,e&&this._showToast(this._t("vac.cal_done"))}_vacFitTurn(t){const e=this._vacFit;if(!e)return;const i=Uh(this.hass?.states[e.source]?.attributes),s=this._vacGhostCentre(i?.rooms||[]),n={...e.p,...t};this._vacFit={...e,p:td(n,e.p,s[0],s[1])}}_vacGhostCentre(t){const e=[],i=[];for(const s of t)e.push(s.x0??s.cx,s.x1??s.cx),i.push(s.y0??s.cy,s.y1??s.cy);return e.length?[(Math.min(...e)+Math.max(...e))/2,(Math.min(...i)+Math.max(...i))/2]:[0,0]}_vacDelta(t,e,i){const s=this._stageEl,n=s?.clientWidth||1,o=s?.clientHeight||1;return[e/n*t.w,i/o*t.h]}_vacFitPointer(t,e){const i=this._vacFit;if(!i)return;if(t.stopPropagation(),"pointerdown"===t.type){const e=t.target,s=e.getAttribute?.("data-corner");try{t.currentTarget.setPointerCapture?.(t.pointerId)}catch{}return void(this._vacFit={...i,drag:s?{kind:"scale",sx:t.clientX,sy:t.clientY,p0:{...i.p},fx:Number(s.split(",")[0]),fy:Number(s.split(",")[1])}:{kind:"move",sx:t.clientX,sy:t.clientY,p0:{...i.p},fx:0,fy:0}})}const s=i.drag;if(s){if("pointermove"===t.type){const[n,o]=this._vacDelta(e,t.clientX-s.sx,t.clientY-s.sy);if("move"===s.kind)this._vacFit={...i,p:{...s.p0,ox:s.p0.ox+n,oy:s.p0.oy+o}};else{const t=Uh(this.hass?.states[i.source]?.attributes),e=this._vacGhostCentre(t?.rooms||[]),a=Zh(s.p0),[r,l]=zh(a,e[0],e[1]),[c,h]=zh(a,s.fx,s.fy),d=Math.hypot(r-c,l-h)||1,[p,u]=[2*r-c,2*l-h],_=Math.hypot(p+2*n-c,u+2*o-h)/2,g=Math.max(.05,_/d),m={...s.p0,s:s.p0.s*g};this._vacFit={...i,p:td(m,s.p0,s.fx,s.fy)}}return}"pointerup"!==t.type&&"pointercancel"!==t.type||(this._vacFit={...i,drag:null})}}_renderVacFit(t){const e=this._vacFit;if(!e)return G;const i=Uh(this._renderPlanHass?.states?.[e.source]?.attributes);if(!i)return G;const s=Zh(e.p),n=[],o=[],a=[];for(const t of i.rooms){if(null==t.x0)continue;const e=[[t.x0,t.y0],[t.x1,t.y0],[t.x1,t.y1],[t.x0,t.y1]].map(([t,e])=>zh(s,t,e));e.forEach(([t,e])=>{o.push(t),a.push(e)});const[i,r]=zh(s,t.cx,t.cy);n.push(j`
-
- ${"missing"===n.status||"disabled"===n.status||"unverified"===n.status?W`${this._t("vac.diag_source")}${o||this._t("vac.source_none")}
- ${a?.platform?W`${this._t("vac.diag_platform")}${a.platform}
`:G}
- ${this._t("vac.diag_status")}${this._t(`vac.source_status_${n.status}`)}
- ${this._t("vac.diag_position")}${r?.pos?this._t("common.yes"):this._t("common.no")}
- ${this._t("vac.diag_rooms")}${ss(this._t("vac.diag_rooms_value"),{total:String(r?.rooms.length||0),matched:String(h),readiness:this._t(h>=3?"vac.autocal_ready":"vac.autocal_not_ready")})}
- ${this._t("vac.diag_path")}${r?.path.length?this._t("common.yes"):this._t("common.no")}
- ${this._t("vac.diag_map")}${r?.mapId??"default"}
-
- ${this._t(`vac.source_banner_${n.status}`)}
-
-
`:G}
- ${y?W`
- ${this._t("vac.xcme_hint")}
-
`:G}
- attributes: - - vacuum_position - - rooms - - path - - map_name-
-
- ${this._t("vac.choose_source")}
-
-
- ${g.map(v)}
-
- {t.currentTarget.open?this._vacOpenAllCameras(e):(this._vacAllCamerasFor=null,this._vacAllCameraCache=null)}}>
-
- ${this._t("vac.all_cameras")}
-${this._t("vac.all_cameras_warn")}
- ${s?m.length?m.map(v):W`${this._t("vac.all_cameras_empty")}
`:G}
-
- ${d?W``:G}
- ${l?W``:G}
- ${this._t("vac.documentation")}
-
- ${r?W`
-
-
-
- ${p.length?W`${ss(this._t("vac.cal_maps"),{maps:p.join(", ")})}
`:G}
- `:G}
- {t.stopPropagation();const e=this._vacEntity(i);e&&this._openMoreInfo(e)}}>
-
`)}return this._vacLastView=e,n.length&&!this._vacRaf&&this._vacRafLoop(),n.length||o.length?W`
- ${o.length?j``:G}
- ${n}`:G}_renderDevice(t,e,i=!0){const s=this._pos(t),n=this._scenePoint([s.x,s.y]),o=(n[0]-e.x)/e.w*100,a=(n[1]-e.y)/e.h*100,r=this._devicePresentation(t,i),l=[`left:${o}%`,`top:${a}%`,...Go(r)],c=r.disabledReason,h=r.haDisabled?this._t(`marker.ha_disabled_${c}`):t.userHidden?this._t("marker.hidden_ghost"):t.name,d=Kp(r),p="view"===this._mode||"devices"===this._mode,u=[h,r.haDisabled?"":this._t(`marker.state_a11y_${d}`),"none"!==r.pulse.kind?this._t(`marker.pulse_a11y_${r.pulse.reason}`):"",r.valueFullText||r.valueText||"",Ro(r.valueBadge),null!=r.lqiText&&r.lqiBand?this._t(`marker.lqi_a11y_${r.lqiBand}`,{value:r.lqiText}):""].filter(Boolean).join(", "),_=[t.model,r.valueBadge?.fullText||"",null!=r.lqiText?"LQI "+r.lqiText:""].filter(Boolean).join(" · ");return W`this._clickDevice(e,t)}
- @keydown=${e=>this._keyDevice(e,t)}
- @contextmenu=${e=>this._ctxDevice(e,t)}
- @pointerover=${e=>this._showTip(e,t.name,r.haDisabled?h:_)}
- @pointerleave=${()=>this._clearTransientHover()}
- @pointerdown=${e=>this._pointerDown(e,t)}
- @pointermove=${e=>{this._pointerMove(e,t),this._showTip(e,t.name,r.haDisabled?h:_)}}
- @pointerup=${e=>this._pointerUp(e,t)}
- @pointercancel=${e=>this._pointerUp(e,t)}
- >
- ${Ko(r,{newDevice:this._newIds.has(t.id),newDeviceTitle:this._t("device.new"),disabledTitle:r.haDisabled?h:""})}
-
`}_roomArea(t){const e=hi(t);if(!e)return null;const i=this._spaceModel();if(!i)return null;const s=this._spaceWalls,n=s.length&&t.id&&fl(i.rooms,t.id,s,this._openPairs().flatMap(t=>t.segs),this._wallKeyPitch,this._cellCm,this._gridPitch,gm,this._wallUnionGeometry()?.roomGeom)||e,o=this._cleanFloor(t,n),a=this._cellCm/this._gridPitch;return Ia(o.area*a*a/1e4,"mi"===this._renderPlanHass?.config?.unit_system?.length)}_roomTemp(t){const e=t.settings?.temp_source;return e?Mo(this._renderPlanHass,e,"temp",this._markers):t.area?this._climate().get(t.area)?.temp??null:null}_roomHum(t){const e=t.settings?.hum_source;return e?Mo(this._renderPlanHass,e,"hum",this._markers):t.area?this._climate().get(t.area)?.hum??null:null}_climate(){const t=this._serverCfg?.markers,e=this._renderPlanHass,i=this._climateCache;if(i&&i.h===e&&i.r===this._iconRules&&i.mk===t)return i.m;const s=function(t,e,i){const s=new Map;if(!t?.entities)return s;const n=wo(i),o=new Set;for(const t of i||[]){if(t?.removed||!0!==t?.use_climate_temp)continue;const e=(t.binding||"").indexOf(":");e>0&&o.add(t.binding.slice(e+1))}const a=new Map;for(const[e,i]of Object.entries(t.entities)){if(i.device_id&&n.devices.has(i.device_id)||!i.device_id&&n.entities.has(e))continue;const s=i.device_id?t.devices?.[i.device_id]:null,r=i.area_id||s?.area_id||null;if(!r)continue;if(i.entity_category)continue;if(!(o.size>0&&e.startsWith("climate.")&&(o.has(e)||i.device_id&&o.has(i.device_id)))){if(Yt.has(i.platform))continue;if(Co.test(e))continue}let l=a.get(r);l||(l=new Map,a.set(r,l));const c=i.device_id||e;let h=l.get(c);if(!h){const n=t.states?.[e];h={name:(s?s.name_by_user||s.name:i.name||n?.attributes?.friendly_name||e)||e,model:s?.model,ents:[]},l.set(c,h)}h.ents.push(e)}for(const[i,n]of a){const a=[],r=[];for(const[i,s]of n){const n=bo(t,s.name,s.model,s.ents,e),l="mdi:thermometer"===n||"mdi:air-filter"===n;if(l){const e=go(t,s.ents);null!=e&&a.push(e)}if(o.size>0&&(o.has(i)||s.ents.some(t=>o.has(t)))){const e=mo(t,s.ents);null!=e&&a.push(e)}if(l||"mdi:water-percent"===n){const e=vo(t,s.ents);null!=e&&r.push(e)}}(a.length||r.length)&&s.set(i,{temp:a.length?Math.round(a.reduce((t,e)=>t+e,0)/a.length*10)/10:null,hum:r.length?Math.round(r.reduce((t,e)=>t+e,0)/r.length):null})}return s}(e,this._iconRules,t);return this._climateCache={h:e,r:this._iconRules,mk:t,m:s},s}_resetRoomDialogFields(){this._roomEditId=null,this._roomFill="",this._roomCustomFill=null,this._roomTempSrc="",this._roomHumSrc="",this._roomSrcOpen=null,this._roomSrcFilter="",this._roomNameScale=1,this._roomLabelScale=1}_openRoomEdit(t){if(!t.id)return;this._roomEditId=t.id,this._nameSel=t.name||"",this._areaSel=t.area||"",this._roomFill="glow"===t.settings?.fill_mode?"":t.settings?.fill_mode||"";const e=t.settings?.custom_fill;this._roomCustomFill=e&&"object"==typeof e?rs(e,cs(this._curSpaceCfg).customFill):null,this._roomTempSrc=t.settings?.temp_source||"",this._roomHumSrc=t.settings?.hum_source||"",this._roomNameScale=zs(t.settings?.name_scale),this._roomLabelScale=zs(t.settings?.label_scale),this._roomSrcOpen=null,this._roomSrcFilter="",this._roomDialog=!0}_roomSettingsFromDialog(){const t={};return this._roomFill&&(t.fill_mode=this._roomFill),this._roomCustomFill&&(t.custom_fill=this._roomCustomFill),this._roomTempSrc&&(t.temp_source=this._roomTempSrc),this._roomHumSrc&&(t.hum_source=this._roomHumSrc),1!==this._roomNameScale&&(t.name_scale=this._roomNameScale),1!==this._roomLabelScale&&(t.label_scale=this._roomLabelScale),Object.keys(t).length?t:null}_saveRoomEdit(){const t=this._curSpaceCfg,e=t?.rooms.find(t=>t.id===this._roomEditId);if(!e)return this._roomDialog=!1,void(this._roomEditId=null);e.name=this._nameSel.trim()||e.name,e.area=this._areaSel||null;const i=e.settings||{},s={...i};this._roomFill?s.fill_mode=this._roomFill:delete s.fill_mode,this._roomCustomFill?s.custom_fill=this._roomCustomFill:delete s.custom_fill,"glow"===i.fill_mode&&"boolean"!=typeof i.glow&&(s.glow=!0),this._roomTempSrc?s.temp_source=this._roomTempSrc:delete s.temp_source,this._roomHumSrc?s.hum_source=this._roomHumSrc:delete s.hum_source,1!==this._roomNameScale?s.name_scale=this._roomNameScale:delete s.name_scale,1!==this._roomLabelScale?s.label_scale=this._roomLabelScale:delete s.label_scale,Object.keys(s).length?e.settings=s:delete e.settings,this._saveConfig(),this._roomDialog=!1,this._roomEditId=null,this._nameSel="",this._areaSel="",this._regSignature="",this._maybeRebuildDevices(),this.requestUpdate(),this._showToast(this._t("toast.room_updated"))}_roomSrcCandidates(){const t=this._planHass,e=wo(this._markers),i=this._roomSrcFilter.trim().toLowerCase(),s=[];for(const n of Object.values(t.devices)){if("service"===n.entry_type)continue;if(e.devices.has(n.id))continue;const t=(n.name_by_user||n.name||n.id).trim();i&&!t.toLowerCase().includes(i)||s.push({value:"device:"+n.id,label:t,sub:n.model||this._t("marker.sub_device")})}for(const[n,o]of Object.entries(t.entities)){if(!n.startsWith("sensor.")||o.hidden)continue;if(ko(t,n,e))continue;const a=o.name||t.states[n]?.attributes?.friendly_name||n;i&&!(a+" "+n).toLowerCase().includes(i)||s.push({value:"entity:"+n,label:a,sub:n})}return s.sort((t,e)=>t.label.localeCompare(e.label)),s.slice(0,200)}_roomSrcLabel(t){const e=t.indexOf(":"),i=t.slice(0,e),s=t.slice(e+1);return"device"===i?this._fullRegistryHass.devices[s]?.name_by_user||this._fullRegistryHass.devices[s]?.name||s:this._fullRegistryHass.entities[s]?.name||this.hass.states[s]?.attributes?.friendly_name||s}_labelPos(t,e){const i=this._layout["rl_"+(t.id||"")];if(i&&i.s===e)return{x:i.x*gm,y:i.y*gm};const s=this._snap(this._roomCenter(t));return{x:s[0],y:s[1]}}_labelDown(t,e,i){if("plan"!==this._mode)return;t.preventDefault(),t.stopPropagation();const s=this._labelPos(e,i);this._drag={id:"rl_"+(e.id||""),sx:t.clientX,sy:t.clientY,ox:s.x,oy:s.y,moved:!1},xm(t),this._tip=null}_labelMove(t,e,i){const s="rl_"+(e.id||"");if(!this._drag||this._drag.id!==s)return;const n=this._stageEl;if(!n)return;const o=this._spaceModelById(i);if(!o)return;const a=o.vb,r=n.getBoundingClientRect(),l=this._viewOr(a),c=(t.clientX-this._drag.sx)/r.width*l.w,h=(t.clientY-this._drag.sy)/r.height*l.h;Math.abs(t.clientX-this._drag.sx)+Math.abs(t.clientY-this._drag.sy)>3&&(this._drag.moved=!0);const d=Cc(this._drag.ox+c),p=Cc(this._drag.oy+h);this._savePos({id:s,space:i},d,p)}_labelUp(t){const e="rl_"+(t.id||"");if(!this._drag||this._drag.id!==e)return;const i=this._drag.moved;this._drag=i?this._drag:null,i&&window.setTimeout(()=>this._drag=null,0)}_labelScale(t){const e=this._layout["rl_"+(t.id||"")]?.k;return"number"==typeof e&&Number.isFinite(e)?Math.min(3,Math.max(.5,e)):1}_rlResizeDown(t,e,i){if("plan"!==this._mode)return;t.preventDefault(),t.stopPropagation();const s=t.target.closest(".roomlabel");if(!s)return;const n=s.getBoundingClientRect(),o=n.left+n.width/2,a=n.top+n.height/2,r=Math.max(8,Math.hypot(t.clientX-o,t.clientY-a));this._rlResize={id:"rl_"+(e.id||""),space:i,k0:this._labelScale(e),cx:o,cy:a,d0:r},xm(t)}_rlResizeMove(t){const e=this._rlResize;if(!e)return;t.stopPropagation();const i=Math.max(8,Math.hypot(t.clientX-e.cx,t.clientY-e.cy)),s=Math.min(3,Math.max(.5,e.k0*(i/e.d0))),n=this._layout[e.id];if(n)this._layout={...this._layout,[e.id]:{...n,k:s}};else{const t=e.id.slice(3),i=this._spaceModelById(e.space);if(!i)return;const n=i.rooms.find(e=>e.id===t);if(!n)return;const o=this._labelPos(n,e.space);this._layout={...this._layout,[e.id]:{s:e.space,x:o.x/gm,y:o.y/gm,k:s}}}this._dirtyPos.add(e.id)}_rlResizeUp(){this._rlResize&&(this._rlResize=null,this._persistLayout())}_renderRoomGear(t,e,i){if(!t.id)return G;let s=null;if(t.poly?(s=this._gearPtCache.get(t.poly)||null,s||(s=$i(t.poly),this._gearPtCache.set(t.poly,s))):null!=t.x&&null!=t.y&&(s=[t.x+(t.w||0)/2,t.y+(t.h||0)/2]),!s)return G;const n=(s[0]-i.x)/i.w*100,o=(s[1]-i.y)/i.h*100;return W``}_renderRoomLabel(t,e,i,s){if(!t.name&&!this._markup)return G;const n=this._labelPos(t,e.id),o=this._scenePoint([n.x,n.y]),a=(o[0]-i.x)/i.w*100,r=(o[1]-i.y)/i.h*100,l=Math.min(1,s.opacity+.25),c=this._labelScale(t),h=[];if(t.area||t.settings?.temp_source||t.settings?.hum_source||s.labelLight){if(s.labelTemp){const e=this._roomTemp(t);null!=e&&h.push(W`this._labelDown(i,t,e.id)}
- @pointermove=${i=>this._labelMove(i,t,e.id)}
- @pointerup=${()=>this._labelUp(t)}
- @pointercancel=${()=>this._labelUp(t)}
- >${t.name||(this._markup?this._t("room.unnamed"):"")}${p?W`{e.stopPropagation(),this._clickRoom(t)}:G}
- @pointerdown=${u?t=>t.stopPropagation():G}> `:G}
- ${h.length?W`${h}`:G}
- ${"plan"===this._mode?["tl","tr","bl","br"].map(i=>W`this._rlResizeDown(i,t,e.id)}
- @pointermove=${t=>this._rlResizeMove(t)}
- @pointerup=${()=>this._rlResizeUp()}
- @pointercancel=${()=>this._rlResizeUp()}>`):G}
-
`}get _measureAnchor(){return this._markup&&this._cursorPt?"draw"===this._tool&&this._path.length&&!this._contourClosed?this._path[this._path.length-1]:"split"===this._tool&&this._splitSel?.pts?.length?this._splitSel.pts[this._splitSel.pts.length-1]:null:null}_renderMeasureLabel(t){const e=this._measureAnchor,i=this._cursorPt,s=(i[0]-t.x)/t.w*100,n=(i[1]-t.y)/t.h*100,o=Os(e,i),a=Math.round(10*o)/10,r=function(t,e,i=.001){if(t.length<2||e.length<2)return!1;const s=Math.abs(e[0]-t[0]),n=Math.abs(e[1]-t[1]);if(!Number.isFinite(s)||!Number.isFinite(n)||Math.hypot(s,n)<=i)return!1;const o=Math.max(s,n,1);return s<=i*o||n<=i*o||Math.abs(s-n)<=i*o}(e,i,2e-4*this._gridPitch);return W`
- ${this._fmtLen(e,i)} · ${a}°
`}get _decorMeasure(){const t=this._decorDraft;if(!t||"decor"!==this._mode)return null;const[e,i]=t.a,[s,n]=t.b;if(Math.abs(e-s)<1e-6&&Math.abs(i-n)<1e-6)return null;const o=(e+s)/2,a=(i+n)/2;if("line"===t.kind){const e=Os(t.a,t.b);return{x:o,y:a,on45:Ns(e),text:`${this._fmtLen(t.a,t.b)} · ${Math.round(10*e)/10}°`}}const r=this._fmtLen([e,i],[s,i]),l=this._fmtLen([s,i],[s,n]);if("ellipse"===t.kind){const t=this._fmtLen([0,0],[Math.abs(s-e)/2,0]),r=this._fmtLen([0,0],[0,Math.abs(n-i)/2]);return{x:o,y:a,on45:!1,text:Math.abs(Math.abs(s-e)-Math.abs(n-i))<1e-6?`R ${t}`:`Rx ${t} × Ry ${r}`}}return{x:o,y:a,on45:!1,text:`${r} × ${l} · ${Ia(hr(Math.abs(s-e),this._cellCm,this._gridPitch)*hr(Math.abs(n-i),this._cellCm,this._gridPitch)/1e4,this._imperial)}`}}get _alignPoint(){if(this._markup){if("draw"===this._tool&&this._path.length&&!this._contourClosed&&this._cursorPt)return this._cursorPt;if("split"===this._tool&&this._splitSel?.pts?.length&&this._cursorPt)return this._cursorPt;if(this._drag?.id.startsWith("rl_")&&this._drag.moved){const t=this._drag.id.slice(3),e=this._spaceModel()?.rooms.find(e=>e.id===t);return e?(()=>{const t=this._labelPos(e,this._space);return[t.x,t.y]})():null}return null}if("devices"===this._mode&&this._drag?.moved){const t=this._devices.find(t=>t.id===this._drag.id);return t?(()=>{const e=this._pos(t);return[e.x,e.y]})():null}if("decor"===this._mode){if(this._decorDraft)return this._decorDraft.b;if(this._decorMove){const t=this._decorList.find(t=>t.id===this._decorMove.id);if(!t)return null;const e=gm,i=this._decorH;return"line"===t.kind?[t.x1*e,t.y1*i]:[t.x*e,t.y*i]}return null}return null}_alignCandidates(){const t=[],e=this._spaceModel();if(this._markup){if(!e)return t;if(this._drag?.id.startsWith("rl_")){const i=this._drag.id.slice(3);for(const s of e.rooms){if(!s.name||s.id===i)continue;const e=this._labelPos(s,this._space);t.push([e.x,e.y])}return t}for(const i of e.rooms){const e=hi(i);if(e)for(const i of e)t.push(i)}if("draw"===this._tool)for(const e of this._path)t.push(e);if("split"===this._tool&&this._splitSel?.pts)for(const e of this._splitSel.pts)t.push(e);return t}if("devices"===this._mode){for(const e of this._devices){if(e.space!==this._space||e.id===this._drag?.id||"ha_disabled"===e.bindingStatus?.kind)continue;const i=this._pos(e);t.push([i.x,i.y])}return t}if("decor"===this._mode){const e=this._decorMove?.id;return t.push(...this._decorSnapGeometry(e).points),this._decorDraft&&t.push(this._decorDraft.a),t}return t}_renderAlignGuides(){const t=this._alignPoint;if(!t)return j``;const e=this._drag?.id.startsWith("rl_")?.5*this._gridPitch:.05*this._gridPitch,i=function(t,e,i){let s=null,n=null;for(const o of e)if(!(Math.abs(o[0]-t[0])<1e-6&&Math.abs(o[1]-t[1])<1e-6)){if(Math.abs(o[0]-t[0])<=i){const e=Math.abs(o[1]-t[1]);e>1e-6&&(!s||e{t.stopPropagation(),"view"===this._mode&&(this._openingInfo=e)}}>
-
-
`})}`}_lockAction(t,e){if(this._openingEntityAvailable(t)){if("unlock"===e){const e=this.hass?.states?.[t]?.attributes?.friendly_name||t;if(!confirm(this._t("confirm.unlock",{name:e})))return}this.hass?.callService?.("lock",e,{entity_id:t})}}_renderOpeningInfoCard(){const t=this._openingInfo,e="passage"!==t.type&&t.contact&&this._openingEntityAvailable(t.contact)?t.contact:null,i=("door"===t.type||"gate"===t.type)&&t.lock&&this._openingEntityAvailable(t.lock)?t.lock:null,s=e?this.hass.states[e]?.state:null,n=this._openingAmt(t),o=i?this.hass.states[i]?.state:null,a="door"===t.type?"opening.door":"gate"===t.type?"opening.gate":"passage"===t.type?"opening.passage":"opening.window",r="door"===t.type?"mdi:door":"gate"===t.type?"mdi:gate":"passage"===t.type?"mdi:arch":"mdi:window-closed-variant",l="gate"===t.type?n>0?"mdi:gate-open":"mdi:gate":n>0?"mdi:door-open":"mdi:door-closed",c=(t,e,i,s="")=>W`
- ${e?c(l,this._t("opening.contact_label"),"unavailable"===s||null==s?this._t("opening.state_unknown"):this._t(n>0?"opening.open":"opening.closed"),n>0?"warn":"ok"):G}
- ${i?c("locked"===o?"mdi:lock":"mdi:lock-open-variant",this._t("opening.lock_label"),"locked"===o?this._t("opening.locked"):["unlocked","open"].includes(String(o))?this._t("opening.unlocked"):this._t("opening.state_unknown"),"locked"===o?"ok":"warn"):G}
- ${i&&("locked"===o||["unlocked","open"].includes(String(o)))?W``:i&&["locking","unlocking"].includes(String(o))?W``:G}
- ${e||i?G:W`
- ${this._t("opening.no_entities")}
`} -
-
-
-
-
- ${t.host?W`
- `:G}
-
-
-
-
-
-
-
- {const i=em(e.target.value);null!=i&&(this._openingDialog={...t,lengthCm:i,lengthTouched:!0})}} />
-
- ${"passage"===t.type&&(t.contact||t.lock)?W``:G}
-
- ${"passage"!==t.type?W`
- ${d(this._contactCandidates(),t.contact,e=>this._openingDialog={...t,contact:e})}
- ${t.contact?W``:G}`:G}
-
- ${"door"===t.type||"gate"===t.type?W`
- ${d(this._lockCandidates(),t.lock,e=>this._openingDialog={...t,lock:e})}`:G}
-
- ${"gate"!==t.type&&"passage"!==t.type?W``:G}
- ${"passage"!==t.type?W``:G}
-
-
-
-
- ${this._t("confirm.delete_partition_openings_body",{count:t.openings.length})}
--
- ${t.openings.map(t=>W`
- ${this._t("confirm.delete_partition_openings_item",{type:this._t(`opening.${t.type}`),length:li(t.length*gm/this._gridPitch*this._cellCm,e)})} `)} -
-
-
-
-
-
-
- ${this._t("confirm.delete_room_body")}
-
-
-
-
-
-
-
- ${e?W`
- `:G}
-
-
-
- this._physicalDialog={...t,cm:e.target.value}} />
- ${this._t(this._imperial?"wallthick.unit_in":"wallthick.unit_cm")}
- ${e&&"square"===t.shape?W`
-
- this._physicalDialog={...t,angle:e.target.value}} />`:G}
- ${t.length?W`${this._t("physical.length")}: ${t.length}
`:G}
-
- ${(()=>{const e=this._cardEntities(t);return e.length?W`
-
-
- ${e.map(({eid:t,kind:e})=>{const i=this.hass.states[t],s=this.hass.entities[t]?.name||i?.attributes?.friendly_name||t,n=i?Ji(this.hass,t)?.text??i.state:"",o="on"===i?.state||["open","unlocked","playing","cleaning"].includes(i?.state);return W`
`:G})()}
- ${t.model?W`
-
`})}
- ${this._t("info.model")}${t.model}
`:G}
- ${i&&!this._cardEntities(t).length?W`${this._t("info.state")}${i}
`:G}
- ${Hi(t.link)?W`${this._t("info.link")}
- ${t.link}
`:G}
- ${t.description?W`${t.description}
`:G}
- ${t.pdfs&&t.pdfs.length?W`${this._t("info.manuals")}
- ${t.pdfs.map(t=>W`
-
`:G}
- ${s.length?W`${this._t("info.controls")}
-
- ${s.map(t=>{const e=this.hass.states[t],i="on"===e?.state;return W`
-
`:G}
- ${t.model||i||t.link||t.description||t.pdfs&&t.pdfs.length||s.length?G:W`${this._t("info.none")}
`}
-
- ${"ha_disabled"===s?.kind?W``:"unverified"===s?.kind&&t.binding?W``:G}
-
- this._markerDialog={...t,name:e.target.value}} />
-
-
- {const i=e.detail.value||"";(t.icon||i!==t.autoIcon)&&(this._markerDialog={...t,icon:i})}}> `:W`this._markerDialog={...t,icon:e.target.value}} />`}
- ${!t.icon&&t.autoIcon?W`
- `:W`
-
-
-
-
-
-
-
-
- ${this._renderVacSection(t)}
-
-
-
- ${"toggle"===a&&(I.length>1||A)?W`
-
-
-
- ${"ha"===t.bindingMode?W`
- ${t.bindingOpen?W`
- this._markerDialog={...t,bindingFilter:e.target.value}} />
-
`:G}`:G}
-
- ${i.map(e=>W`
- {const i={...t,binding:e.value,bindingOpen:!1,controls:Zn(e.value,t.controls,this._bindingEntities(e.value)),autoIcon:this._autoIconForBinding(e.value)};this._markerDialog=this._announceToggleDraft({...i,...this._valueBadgeForBinding(i,e.value)})}}>
- ${e.label}${e.sub}
-
`)}
- ${i.length?G:W`${this._t("marker.nothing_found")}
`}
-
-
`:G}
- ${"toggle"===a?W`
-
- ${this._help("marker.toggle_entity.help")}
-
-
- ${A?W`
-
- ${h.map(t=>W`
- ${t}
`)}
- ${t.tapHintAnnouncement}
`:G}
- ${"run"===a?(()=>{const e=t.runFilter.trim().toLowerCase(),i=this._runCandidates().filter(t=>!e||t.label.toLowerCase().includes(e)||t.value.includes(e)),s=t.tapTarget?this._runCandidates().find(e=>e.value===t.tapTarget):null;return W`
-
- ${t.tapTarget&&!s?W`${this._t("marker.run_target_gone",{id:t.tapTarget})}
`:G}
- {t.target.select()}}
- @input=${e=>this._markerDialog={...t,runFilter:e.target.value,tapTarget:""}} />
- ${s?G:W`
- ${i.slice(0,40).map(e=>W`
`}`})():G}
- ${"run"===a||"toggle"===a?W``:G}
-
-
- this._markerDialog={...t,tapTarget:e.value,runFilter:""}}>
- ${e.label}${e.sub}
-
`)}
- ${i.length?G:W`${this._t("marker.nothing_found")}
`}
- ${this._t("marker.controls_hint")}
- ${t.controls.length?W`
- ${t.controls.map(e=>{const i=this._controlRefInfo(e);return W`
- this._markerDialog=this._announceToggleDraft({...t,controls:t.controls.filter(t=>t!==e)})}>
- `})}
-
`:G}
- this._markerDialog={...t,controlsFilter:e.target.value}} />
- ${t.controlsFilter.trim()?W`
- ${this._controlCandidates(t).map(e=>W``)}
-
`:G}
-
- ${this._bindingHasClimate(t.binding)?W``:G}
-
-
- ${"always"===t.lightRole&&(T.length>1||R)?W`
-
`:G}
-
-
-
-
- ${this._help("marker.light_entity.help")}
-
-
- ${R?W`
-
-
- ${$||M?W`
-
- ${this._help("marker.glow_radius.help")}
-
-
- this._markerDialog={...t,glowRadius:e.target.value}} />
- ${this._imperial?this._t("gs.unit_ft"):this._t("gs.unit_m")}
-
-
-
${this._t(Jg[t.display])}
- ${"static_icon"===t.display&&this._bindingHasAlarm(t.binding)?W``:G} - - ${d?W`
-
`}
- ${"icon_ripple"===t.display?W`
- {this._markerDialog={...t,rippleColor:e.detail.color}}}>
-
-
- ${this._t("marker.ripple_size")}
- ${this._rangeInput(1,8,.5,t.rippleSize,e=>this._markerDialog={...t,rippleSize:e})}
- ×${t.rippleSize}
-
- ${this._t("marker.activity_alarm_note")}
`:G} - - -
- ${this._rangeInput(.5,3,.1,t.size,e=>this._markerDialog={...t,size:e})}
- ×${t.size.toFixed(1)}
- ${this._t("marker.angle_label")}
- ${""}
- ${this._rangeInput(0,355,5,t.angle,e=>this._markerDialog={...t,angle:e})}
- ${t.angle}°
-
-
-
- this._markerDialog={...t,model:e.target.value}} />
-
-
- this._markerDialog={...t,link:e.target.value}} />
-
-
-
-
-
-
- ${t.pdfs.map(t=>W`this._removeMarkerPdf(t.url)}> `)}
-
-
- this._pickMarkerFiles(t)} />
-
-
-
-
- this._spaceDialog={...t,title:e.target.value}} />
-
-
- ${"file"===t.source?W`
-
-
- ${t.planFile?W`${t.planFile.name}`:t.planUrl?W`})
`:W`${this._t("space.no_plan")}`}
-
-
- this._pickPlanFile(t)} />
-
-
-
- ${t.pickSaved?this._renderServerPlans(t):G}`:G}
-
-
-
-
- {const i=e.target.value,s=em(i),n=null==s?null:(o=s,this._imperial?o*lc:o);var o;this._spaceDialog={...t,cellCmInput:i,cellCmTouched:!0,cellCm:null!=n&&n>0?Math.max(.1,Math.min(Qg,n)):t.cellCm}}} />
- ${this._t(this._imperial?"space.scale_unit_imperial":"space.scale_unit")}
-
-
-
-
-
-
- ${""}
-
- ${this._t("space.hide_decor_tip")}
-
- ${this._t("space.hide_openings_tip")}
-
- ${[["labelTemp","space.label_temp"],["labelHum","space.label_hum"],["labelLqi","space.label_lqi"],["labelLight","space.label_light"]].map(([e,i])=>W``)}
-
-
- ${this._rangeInput(50,300,5,Math.round(100*t.cardFontScale),e=>this._spaceDialog={...t,cardFontScale:e/100})}
- ${Math.round(100*t.cardFontScale)}%
-
- ${this._renderCardPreview(t.cardFontScale,1,1)}
-
- {this._spaceDialog={...t,roomColor:e.detail.color,roomOpacity:e.detail.opacity}}}>
-
-
-
- ${"static"===(t.bgMode??Qa(this._settings,{}))?W`
- {this._spaceDialog={...t,bgColor:e.detail.color}}}>
- ${t.bgColor?W``:W`${this._t("space.bg_inherited")}`}
-
`:G}
-
-
- {const i=e.target.value.trim(),s=""===i?null:Math.round(Number(i));this._spaceDialog={...t,northDeg:null!==s&&Number.isFinite(s)?Math.min(359,Math.max(0,s)):null}}} />
- ${null===t.northDeg?this._t("space.north_inherited",{v:null===Za(this._settings,{})?"—":String(Za(this._settings,{}))+"°"}):"°"}
-
-
-
-
- ${Wi.map(t=>[t,"fill."+t]).map(([e,i])=>W`
- ${"custom"===e&&"custom"===t.fillMode?W`
- ${this._t("space.custom_fill")}
- {this._spaceDialog={...t,customFill:{c:e.detail.color,a:e.detail.opacity}}}}>
- ${t.customFill?W``:G}
-
`:G}`)}
-
- ${t.deleteBlockers?W`${this._t("space.delete_blocked",{n:String(t.deleteBlockers)})}
`:G}
-
-
- ${this._t("merge.hint")}
- - ${i(t.aId,"a")} - ${i(t.bId,"b")} -
-
-
-
-
-
-
- ${this._t("preview.room_name")}
-
-
`}_renderRoomSource(t){const e="temp"===t?this._roomTempSrc:this._roomHumSrc,i=e=>{"temp"===t?this._roomTempSrc=e:this._roomHumSrc=e,this.requestUpdate()},s=this._roomSrcOpen===t;return W`
-
-
-
- ${e||s?W`
- ${s?W`
- {this._roomSrcFilter=t.target.value,this.requestUpdate()}} />
-
`:G}`:G}`}_renderRoomDialog(){const t=!!this._roomEditId,e=t?null:this._wallFaceBatch,i=e&&e.candidates.length>1?this._t("room.queue_progress",{current:e.index+1,total:e.candidates.length}):"",s=!!this._areaSel||!!this._nameSel.trim(),n=cs(this._curSpaceCfg),o=this._roomFill||n.fill,a=this._roomCustomFill||n.customFill,r=[...this._freeAreas];if(t&&this._areaSel&&!r.some(t=>t.area_id===this._areaSel)){const t=this.hass.areas[this._areaSel];t&&r.unshift(t)}return W`
- ${this._roomSrcCandidates().map(t=>W`
- {i(t.value),this._roomSrcOpen=null}}>
- ${t.label}${t.sub}
-
`)}
-
- ${i?W`
-
- - ${i} -
`:G} - - this._nameSel=t.target.value} /> - - - - - - ${[["","fill.inherit"],...ji.map(t=>[t,"fill."+t])].map(([t,e])=>W``)} - ${"custom"===o?W`
- ${this._roomCustomFill?this._t("room.custom_fill_own"):this._t("room.custom_fill_space")}
- {this._roomCustomFill={c:t.detail.color,a:t.detail.opacity}}}>
- ${this._roomCustomFill?W``:G}
-
`:G}
- ${this._renderRoomSource("temp")}
- ${this._renderRoomSource("hum")}
-
-
-
-
- ${this._rangeInput(50,300,5,Math.round(100*this._roomNameScale),t=>{this._roomNameScale=t/100,this.requestUpdate()})}
- ${Math.round(100*this._roomNameScale)}%
-
-
-
- ${this._rangeInput(50,300,5,Math.round(100*this._roomLabelScale),t=>{this._roomLabelScale=t/100,this.requestUpdate()})}
- ${Math.round(100*this._roomLabelScale)}%
-
- ${this._renderCardPreview(cs(this._curSpaceCfg).cardFontScale,this._roomNameScale,this._roomLabelScale)}
-