@kubex/zinc 1.1.137 → 1.1.138

package/dist/zn.min.js

@@ -5689,7 +5689,7 @@ endif::[]`,caretOffset:9},{key:"inline-formatting",label:"Strong",icon:"bold@lu"
           ${this.description?u`<span class="item__description">${this.description}</span>`:""}
         </span>
       </div>
-    `}};mi.styles=z(Xk),mi.dependencies={"zn-icon":ne},c([p()],mi.prototype,"type",2),c([p()],mi.prototype,"label",2),c([p()],mi.prototype,"description",2),c([p()],mi.prototype,"icon",2),c([p({attribute:"icon-library"})],mi.prototype,"iconLibrary",2),c([p()],mi.prototype,"color",2);var Vg=mi;mi.define("zn-page-palette-item");var Jk=_`@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none}*,*::before,*::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--zn-border-color))}[hidden]{display:none !important}.width-container,.form-container,.wide-form-container{height:100%;width:100%;margin:var(--zn-default-margin,0 auto)}.width-container{max-width:var(--zn-container)}.form-container{max-width:var(--zn-container-ph)}.wide-form-container{max-width:var(--zn-container-lg)}:host{--section-accent:rgb(var(--zn-color-primary));display:block;width:100%;max-width:var(--pb-card-width,560px);margin:0 auto;cursor:grab;outline:none}:host(:active){cursor:grabbing}:host([locked]),:host([locked]:active){cursor:default}.card{display:flex;align-items:center;gap:12px;padding:12px 14px;background:rgb(var(--zn-panel));border:1px solid rgb(var(--zn-border-color));border-radius:8px;transition:border-color 0.12s ease,box-shadow 0.12s ease}:host(:hover) .card,:host(:focus-visible) .card{border-color:rgb(var(--zn-color-border-active));box-shadow:0 1px 3px rgba(var(--zn-shadow),0.4)}:host([selected]) .card{border-color:var(--section-accent);box-shadow:0 0 0 1px var(--section-accent)}:host([unknown]) .card{opacity:0.6;border-style:dashed}.card__icon{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:34px;height:34px;border-radius:8px;background:color-mix(in srgb,var(--section-accent) 15%,transparent);color:var(--section-accent)}.card__text{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.card__label{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card__summary{font-size:12px;opacity:0.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card__lock{display:flex;flex:0 0 auto;align-items:center;opacity:0.45}.card__actions{display:flex;gap:4px;visibility:hidden}:host(:hover) .card__actions,:host(:focus-within) .card__actions,:host([selected]) .card__actions{visibility:visible}`;var Nr=class extends k{constructor(){super(...arguments);this.label="";this.summary="";this.icon="";this.color="";this.selected=!1;this.unknown=!1;this.locked=!1}updated(t){super.updated(t),this.style.setProperty("--section-accent",this.color||"rgb(var(--zn-color-primary))")}_action(t,r){t.stopPropagation(),this.dispatchEvent(new CustomEvent(r,{bubbles:!0,composed:!0}))}_actionKeydown(t){(t.key==="Enter"||t.key===" ")&&t.stopPropagation()}render(){return u`
+    `}};mi.styles=z(Xk),mi.dependencies={"zn-icon":ne},c([p()],mi.prototype,"type",2),c([p()],mi.prototype,"label",2),c([p()],mi.prototype,"description",2),c([p()],mi.prototype,"icon",2),c([p({attribute:"icon-library"})],mi.prototype,"iconLibrary",2),c([p()],mi.prototype,"color",2);var Vg=mi;mi.define("zn-page-palette-item");var Jk=_`@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none}*,*::before,*::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--zn-border-color))}[hidden]{display:none !important}.width-container,.form-container,.wide-form-container{height:100%;width:100%;margin:var(--zn-default-margin,0 auto)}.width-container{max-width:var(--zn-container)}.form-container{max-width:var(--zn-container-ph)}.wide-form-container{max-width:var(--zn-container-lg)}:host{--section-accent:rgb(var(--zn-color-primary));display:block;width:100%;max-width:var(--pb-card-width,560px);margin:0 auto;cursor:grab;outline:none}:host(:active){cursor:grabbing}:host([locked]),:host([locked]:active){cursor:default}.card{--card-actions-inset:14px;position:relative;display:flex;align-items:center;gap:12px;padding:12px 14px;background:rgb(var(--zn-panel));border:1px solid rgb(var(--zn-border-color));border-radius:8px;transition:border-color 0.12s ease,box-shadow 0.12s ease}:host(:hover) .card,:host(:focus-visible) .card{border-color:rgb(var(--zn-color-border-active));box-shadow:0 1px 3px rgba(var(--zn-shadow),0.4)}:host([selected]) .card{border-color:var(--section-accent);box-shadow:0 0 0 1px var(--section-accent)}:host([unknown]) .card{opacity:0.6;border-style:dashed}.card__icon{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:34px;height:34px;border-radius:8px;background:color-mix(in srgb,var(--section-accent) 15%,transparent);color:var(--section-accent)}.card__text{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.card__label{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card__summary{font-size:12px;opacity:0.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card__lock{display:flex;flex:0 0 auto;align-items:center;opacity:0.45}:host([locked]) .card{--card-actions-inset:40px}.card__actions{position:absolute;inset:0 var(--card-actions-inset) 0 auto;display:flex;align-items:center;gap:var(--zn-spacing-2x-small);padding-left:28px;background:linear-gradient(to right,rgba(var(--zn-panel),0),rgb(var(--zn-panel)) 28px);visibility:hidden}:host(:hover) .card__actions,:host(:focus-within) .card__actions,:host([selected]) .card__actions{visibility:visible}`;var Nr=class extends k{constructor(){super(...arguments);this.label="";this.summary="";this.icon="";this.color="";this.selected=!1;this.unknown=!1;this.locked=!1}updated(t){super.updated(t),this.style.setProperty("--section-accent",this.color||"rgb(var(--zn-color-primary))")}_action(t,r){t.stopPropagation(),this.dispatchEvent(new CustomEvent(r,{bubbles:!0,composed:!0}))}_actionKeydown(t){(t.key==="Enter"||t.key===" ")&&t.stopPropagation()}render(){return u`
       <div part="base" class="card">
         <span class="card__icon">
           <zn-icon src="${this.icon||"widgets"}" library="${P(this.iconLibrary)}" size="18"></zn-icon>
@@ -5724,7 +5724,7 @@ endif::[]`,caretOffset:9},{key:"inline-formatting",label:"Strong",icon:"bold@lu"
               @click="${t=>this._action(t,"page-card-remove")}"></zn-button>`}
         </span>
       </div>
-    `}};Nr.styles=z(Jk),Nr.dependencies={"zn-button":$e,"zn-icon":ne},c([p()],Nr.prototype,"label",2),c([p()],Nr.prototype,"summary",2),c([p()],Nr.prototype,"icon",2),c([p({attribute:"icon-library"})],Nr.prototype,"iconLibrary",2),c([p()],Nr.prototype,"color",2),c([p({type:Boolean,reflect:!0})],Nr.prototype,"selected",2),c([p({type:Boolean,reflect:!0})],Nr.prototype,"unknown",2),c([p({type:Boolean,reflect:!0})],Nr.prototype,"locked",2);var Ug=Nr;Nr.define("zn-page-section-card");var Zk=_`@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none}*,*::before,*::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--zn-border-color))}[hidden]{display:none !important}.width-container,.form-container,.wide-form-container{height:100%;width:100%;margin:var(--zn-default-margin,0 auto)}.width-container{max-width:var(--zn-container)}.form-container{max-width:var(--zn-container-ph)}.wide-form-container{max-width:var(--zn-container-lg)}:host ::-webkit-scrollbar{width:5px;height:5px}:host{}:host ::-webkit-scrollbar-track{background:transparent}:host{}:host ::-webkit-scrollbar-thumb{background:rgba(var(--inverse-base),0.2);border-radius:5px}:host{}:host ::-webkit-scrollbar-thumb:hover{background:rgba(var(--inverse-base),0.6)}:host{--pb-card-width:1024px;display:block;width:100%;height:100%;min-height:480px;color:rgb(var(--zn-text));container-type:inline-size}.builder{--palette-col:343px;--inspector-col:343px;display:grid;grid-template-columns:var(--palette-col) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);width:100%;height:100%;background:rgb(var(--zn-panel));border:1px solid rgb(var(--zn-border-color));border-radius:8px;overflow:hidden}.builder--inspecting{grid-template-columns:var(--palette-col) minmax(0,1fr) var(--inspector-col)}.builder{transition:grid-template-columns 0.2s ease}.builder--palette-collapsed{--palette-col:0px}.builder--palette-collapsed .palette{border-right:none}.builder--inspector-collapsed{--inspector-col:0px}.builder--inspector-collapsed .inspector{border-left:none}@container (max-width:768px){.builder:not(.builder--palette-collapsed){--palette-col:240px}.builder:not(.builder--inspector-collapsed){--inspector-col:300px}}.panel-toggle{position:absolute;top:50%;z-index:6;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border-radius:50%;color:rgb(var(--zn-color-muted-text));background:rgb(var(--zn-panel));border:1px solid rgb(var(--zn-border-color));box-shadow:0 1px 3px rgba(var(--zn-shadow),0.4);cursor:pointer;transition:left 0.2s ease,right 0.2s ease,color 0.12s ease,border-color 0.12s ease}.panel-toggle:hover{color:rgb(var(--zn-text));border-color:rgb(var(--zn-color-border-active))}.panel-toggle--left{left:-12px}.panel-toggle--left.panel-toggle--tucked{left:8px}.panel-toggle--right{right:-12px}.panel-toggle--right.panel-toggle--tucked{right:8px}.header{grid-row:1;grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;border-bottom:1px solid rgb(var(--zn-border-color))}.header[hidden]{display:none}.header__group{display:flex;align-items:center;gap:8px}.palette,.canvas-cell,.inspector{grid-row:2;min-height:0;min-width:0;overflow:hidden}.canvas-cell{position:relative;overflow:visible}.palette{display:flex;flex-direction:column;border-right:1px solid rgb(var(--zn-border-color))}.palette__title{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:16px;border-bottom:1px solid rgb(var(--zn-border-color))}.palette__text{min-width:0}.palette__heading{font-size:0.9375rem;font-weight:600}.palette__subheading{margin-top:2px;font-size:0.75rem;color:rgb(var(--zn-color-muted-text))}.palette__search{padding:12px 12px 8px}.palette__search::part(form-control-label){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.palette__scroll{flex:1;min-height:0;overflow-y:auto;padding-bottom:16px}.palette__category{display:block;border-top:1px solid rgb(var(--zn-border-color))}.palette__category::part(header){align-items:center !important;padding-block:calc(var(--zn-base-px) * 2) !important}.palette__category::part(caption){font-size:14px;font-weight:600;line-height:16px;color:rgb(var(--zn-text))}.palette__uncategorized{padding:8px var(--zn-base-gap)}zn-page-palette-item{margin-bottom:6px}.canvas{width:100%;height:100%;display:flex;flex-direction:column;align-items:stretch;padding:24px;overflow-y:auto;background:radial-gradient(circle,rgba(var(--zn-text),0.08) 1px,transparent 1px) 0 0/20px 20px,rgb(var(--zn-body))}.inspector{display:flex;flex-direction:column;border-left:1px solid rgb(var(--zn-border-color));overflow:hidden;animation:inspector-in 0.18s ease}.inspector-head{display:flex;align-items:center;gap:12px;flex:0 0 auto;padding:16px;border-bottom:1px solid rgb(var(--zn-border-color))}.inspector-head__icon{--section-accent:rgb(var(--zn-color-primary));display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:34px;height:34px;border-radius:8px;color:var(--section-accent);background:color-mix(in srgb,var(--section-accent) 15%,transparent)}.inspector-head__text{flex:1 1 auto;min-width:0}.inspector-head__title{font-size:0.875rem;font-weight:600}.inspector-head__type{font-size:0.75rem;color:rgb(var(--zn-color-muted-text))}.inspector-head__title,.inspector-head__type{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inspector-body{--pb-field-label-size:0.8125rem;--pb-field-note-size:0.75rem;--pb-field-gap:22px;--pb-label-gap:6px;--pb-note-gap:5px;--zn-input-label-font-size-medium:var(--pb-field-label-size);--zn-input-label-font-weight:600;--zn-input-label-line-height:1.3;--zn-input-label-color:rgb(var(--zn-text));--zn-input-help-text-font-size-medium:var(--pb-field-note-size);--zn-input-help-text-color:rgb(var(--zn-color-muted-text));--zn-toggle-margin:0;display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto;padding:18px 16px 24px;gap:var(--pb-field-gap)}.inspector-body ::part(form-control-label){margin-bottom:var(--pb-label-gap)}.inspector-body ::part(form-control-input){margin:0}.inspector-body ::part(form-control-help-text){margin-top:var(--pb-note-gap)}.inspector-body zn-toggle::part(label){font-size:var(--pb-field-label-size);font-weight:600}.inspector-body zn-toggle::part(description){font-size:var(--pb-field-note-size);margin-top:var(--pb-note-gap)}.inspector-body zn-icon-picker::part(trigger){flex:1 1 auto}.inspector-body>*,.inspector-body .inspector__form>*{margin-block:0}.inspector-body>.inspector__form{display:flex;flex-direction:column;gap:var(--pb-field-gap)}.inspector-hint{margin:0;font-size:0.75rem;color:rgb(var(--zn-color-muted-text))}.inspector-close{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:28px;height:28px;padding:0;border:none;border-radius:6px;color:rgb(var(--zn-color-muted-text));background:transparent;cursor:pointer}.inspector-close:hover{color:rgb(var(--zn-text));background:rgb(var(--zn-color-tab))}@keyframes inspector-in{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}.declarations{display:none}.canvas__empty{margin:auto auto 8px;font-size:13px;opacity:0.6}.canvas__empty[hidden]{display:none}.drop{position:relative;display:flex;align-items:center;justify-content:center;width:100%;max-width:var(--pb-card-width);margin:0 auto;min-height:28px;transition:min-height 0.12s ease}.drop--active{min-height:72px}.drop--solo{margin:0 auto auto}.drop--solo.drop--active{margin:auto;min-height:96px}.drop--active::before{content:"";position:absolute;inset:6px 0;border:2px dashed rgb(var(--zn-color-primary));border-radius:8px;background:rgba(var(--zn-color-primary),0.06)}.drop__add{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border:1px solid rgb(var(--zn-border-color));border-radius:50%;background:rgb(var(--zn-panel));color:rgb(var(--zn-text));cursor:pointer;opacity:0;transition:opacity 0.12s ease}.drop:hover .drop__add,.drop--active .drop__add{opacity:1}.container{width:100%;max-width:var(--pb-card-width);margin:0 auto;display:flex;flex-direction:column;gap:8px}.slots{display:grid;grid-template-columns:repeat(var(--pb-slot-columns,3),minmax(0,1fr));gap:8px}.slot{position:relative;min-height:64px}.slot--empty{display:flex;align-items:center;justify-content:center;border:1px dashed rgb(var(--zn-border-color));border-radius:8px;color:rgba(var(--zn-text),0.4);cursor:pointer;transition:border-color 0.12s ease,background 0.12s ease}.slot--empty:hover{border-color:rgb(var(--zn-color-border-active));color:rgba(var(--zn-text),0.7)}.slot--active{border-color:rgb(var(--zn-color-primary));border-style:dashed;background:rgba(var(--zn-color-primary),0.06)}.picker{position:absolute;top:calc(100% - 2px);z-index:2;display:flex;flex-direction:column;min-width:220px;max-height:260px;overflow-y:auto;padding:6px;background:rgb(var(--zn-panel));border:1px solid rgb(var(--zn-border-color));border-radius:8px;box-shadow:0 4px 12px rgba(var(--zn-shadow),0.4)}.picker__item{display:flex;align-items:center;gap:8px;padding:7px 8px;border:none;border-radius:6px;background:transparent;color:rgb(var(--zn-text));font-size:13px;text-align:left;cursor:pointer}.picker__item:hover{background:rgba(var(--zn-text),0.08)}.save-status{position:absolute;left:16px;bottom:16px;z-index:5;display:flex;align-items:center;gap:6px;padding:5px 10px;font-size:0.75rem;color:rgb(var(--zn-color-muted-text));background:rgb(var(--zn-panel));border:1px solid rgb(var(--zn-border-color));border-radius:8px;box-shadow:0 1px 3px rgba(var(--zn-shadow),0.4);pointer-events:none;transition:color 0.15s ease,border-color 0.15s ease}.save-status--saved{color:rgb(var(--zn-color-success));border-color:color-mix(in srgb,rgb(var(--zn-color-success)) 45%,transparent)}.restore-banner{position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:8px;max-width:calc(100% - 32px);padding:8px 12px;font-size:0.8125rem;color:rgb(var(--zn-text));background:rgb(var(--zn-panel));border:1px solid rgb(var(--zn-border-color));border-radius:8px;box-shadow:0 2px 8px rgba(var(--zn-shadow),0.5)}.restore-banner button{flex:0 0 auto;padding:3px 10px;font-size:0.75rem;font-weight:600;border-radius:6px;cursor:pointer}.restore-banner__restore{color:rgb(var(--zn-panel));background:rgb(var(--zn-color-primary));border:none}.restore-banner__restore:hover{filter:brightness(1.1)}.restore-banner__dismiss{color:rgb(var(--zn-color-muted-text));background:transparent;border:none}.restore-banner__dismiss:hover{background:rgb(var(--zn-color-tab))}`;var NI=50,jg=500,OI=768,PI=5,HI=1440*60*1e3;function e3(o){let i=Math.floor(o/1e3);if(i<10)return"just now";if(i<60)return`${i}s ago`;let t=Math.floor(i/60);if(t<60)return`${t}m ago`;let r=Math.floor(t/60);return r<24?`${r}h ago`:`${Math.floor(r/24)}d ago`}var Me=class extends k{constructor(){super(...arguments);this.formControlController=new re(this);this.name="";this.form="";this.config="";this.heading="";this.subheading="";this.requiredFirst="";this.sectionTypes=[];this.paletteCollapsed=!1;this.inspectorCollapsed=!1;this.autoSave=null;this.registry=new Uh;this._state=Bg();this._selectedId=null;this._search="";this._pickerIndex=null;this._dragOverIndex=null;this._slotDragOver=null;this._slotPicker=null;this._form=null;this._hasSlot=new Y(this,"header-left","header-right");this._history=[];this._redoStack=[];this.defaultValue=JSON.stringify(Bg());this._wasNarrow=!1;this._resizeObserver=new ResizeObserver(t=>{let r=t[0]?.contentRect.width??0;if(r<=0)return;let n=r<OI;n&&!this._wasNarrow&&(this.paletteCollapsed=!0),this._wasNarrow=n});this._autoSaveTimer=null;this._statusTimer=null;this._justSavedTimer=null;this._restoring=!1;this._lastSavedAt=null;this._justSaved=!1;this._statusNow=Date.now();this._restorePrompt=null;this._autoSaveTick=()=>{if(!(!this._state.sections.length||this._restorePrompt))try{localStorage.setItem(this._autoSaveKey,JSON.stringify({savedAt:Date.now(),state:this._state})),this._lastSavedAt=Date.now(),this._justSaved=!0,this._justSavedTimer!==null&&clearTimeout(this._justSavedTimer),this._justSavedTimer=window.setTimeout(()=>this._justSaved=!1,2500)}catch{}};this.restoreAutoSave=()=>{let t=this._readAutoSave();if(!t)return!1;this._restoring=!0;try{this._applyExternalState(t.state)}finally{this._restoring=!1}return this._restorePrompt=null,!0};this._registerSlottedTemplates=()=>{let t=!1;this.querySelectorAll('template[slot="config"][type]').forEach(r=>{let n=this._typeFromTemplate(r);n&&!this.registry.has(n.type)&&(this.registry.register(n),t=!0)}),t&&this.requestUpdate()};this.undo=()=>{let t=this._history.pop();t&&(this._redoStack.push(structuredClone(this._state)),this._select(null),this._commit(t))};this.redo=()=>{let t=this._redoStack.pop();t&&(this._history.push(structuredClone(this._state)),this._select(null),this._commit(t))};this._onCanvasDragOver=t=>{this._isPageDrag(t)&&(t.preventDefault(),this._dragOverIndex=this._state.sections.length)};this._onCanvasDrop=t=>{this._onZoneDrop(t,this._state.sections.length)};this._onInspectorInput=t=>{let r=this._selectedSection();if(!r)return;let n=t.target,a=n.getAttribute?.("name");if(!a)return;let s=this._isBooleanControl(n,r.data[a])?!!n.checked:n.value;n.getAttribute("type")==="number"&&s!==""&&s!==null&&s!==void 0&&(s=Number(s)),!(typeof s=="number"&&Number.isNaN(s))&&r.data[a]!==s&&this._updateSectionData(r.id,{[a]:s})}}get state(){return structuredClone(this._state)}set state(t){try{this._applyExternalState(t)}catch{console.warn("<zn-page-builder> invalid state")}}get value(){return JSON.stringify(this._state)}set value(t){if(t)try{this._applyExternalState(JSON.parse(t))}catch{console.warn("<zn-page-builder> invalid value JSON")}}get validity(){return pt}get validationMessage(){return""}checkValidity(){return!0}getForm(){return this.formControlController.getForm()}reportValidity(){return!0}setCustomValidity(t=""){}handleConfigChange(){if(this.config)try{this._applyExternalState(JSON.parse(this.config))}catch{console.warn("<zn-page-builder> invalid config JSON")}}handleRequiredFirstChange(){let t=this._requireFirst(this._state.sections);t!==this._state.sections&&(this._state={sections:t},this.defaultValue=JSON.stringify(this._state))}handleSectionTypesChange(){this.registry.registerAll(this.sectionTypes??[]),this.requestUpdate()}registerSectionType(t){return this.registry.register(t),this.requestUpdate(),this}registerSectionTypes(t){return this.registry.registerAll(t),this.requestUpdate(),this}connectedCallback(){super.connectedCallback(),this._registerSlottedTemplates(),this._resizeObserver.observe(this)}disconnectedCallback(){this._resizeObserver.disconnect(),this._stopAutoSave(),this._justSavedTimer!==null&&(clearTimeout(this._justSavedTimer),this._justSavedTimer=null),super.disconnectedCallback()}get _autoSaveKey(){return`zn-page-builder:${this.id||this.heading||"page"}`}_stopAutoSave(){this._autoSaveTimer!==null&&(clearInterval(this._autoSaveTimer),this._autoSaveTimer=null),this._statusTimer!==null&&(clearInterval(this._statusTimer),this._statusTimer=null)}_restartAutoSave(){if(this._stopAutoSave(),this.autoSave===null)return;let t=this._readAutoSave();t&&(this._lastSavedAt=t.savedAt),this._autoSaveTimer=window.setInterval(this._autoSaveTick,this.autoSave*6e4),this._statusTimer=window.setInterval(()=>this._statusNow=Date.now(),3e4)}_readAutoSave(){try{let t=localStorage.getItem(this._autoSaveKey);if(!t)return null;let r=JSON.parse(t);return!r.state||Date.now()-r.savedAt>HI?(localStorage.removeItem(this._autoSaveKey),null):r}catch{return null}}_offerRestoreIfNewer(){if(this.autoSave===null||this._restoring)return;let t=this._readAutoSave();this._restorePrompt=t&&JSON.stringify(t.state)!==JSON.stringify(this._state)?{savedAt:t.savedAt}:null}willUpdate(t){super.willUpdate(t),t.has("_selectedId")&&this._buildInspectorForm(),t.has("autoSave")&&this._restartAutoSave()}firstUpdated(t){super.firstUpdated(t),this.formControlController.updateValidity()}_typeFromTemplate(t){let r=t.getAttribute("type");return r?{type:r,label:t.getAttribute("label")??r,icon:t.getAttribute("icon")??void 0,iconLibrary:t.getAttribute("icon-library")??void 0,color:t.getAttribute("color")??void 0,category:t.getAttribute("category")??void 0,description:t.getAttribute("description")??void 0,configTemplate:t,...this._slotsFromAttributes(t),accepts:t.getAttribute("accepts")?.split(",").map(n=>n.trim()).filter(Boolean)}:null}_slotsFromAttributes(t){let r=s=>{let l=parseInt(t.getAttribute(s)??"",10);return l>0&&l<=24?l:void 0},n=r("slots");if(!n)return{};let a=r("slots-max");return a===void 0||a<n?{slots:n}:{slots:n,slotsMin:Math.min(r("slots-min")??1,n),slotsMax:a}}_applyExternalState(t){let r=new Set,n=!1,a=(d,h)=>{let m=!d.id||r.has(d.id)?oa():d.id;r.add(m),h===0&&(d.children?.length??0)>24&&(n=!0);let f=this.registry.get(d.type),b=f?.slotsMax===void 0?void 0:na(d,f);return{id:m,type:d.type,label:d.label,...b===void 0?{}:{columns:b},data:structuredClone(d.data??{}),...d.children&&h===0?{children:d.children.slice(0,24).map(g=>g&&typeof g.type=="string"?a(g,h+1):null)}:{}}},s=(t?.sections??[]).filter(d=>d&&typeof d.type=="string");s.length>jg&&console.warn(`<zn-page-builder> config has ${s.length} sections; keeping the first ${jg}`);let l=s.slice(0,jg).map(d=>a(d,0));n&&console.warn(`<zn-page-builder> some sections had more than ${24} children; extras were dropped`),this._history=[],this._redoStack=[],this._state={sections:this._requireFirst(l)},this.defaultValue=JSON.stringify(this._state),this._selectedId=null,this._pickerIndex=null,this._offerRestoreIfNewer()}get _pinnedId(){let t=this._state.sections[0];return this.requiredFirst&&t?.type===this.requiredFirst?t.id:null}_isPinned(t){return this._pinnedId===t}get _firstFreeIndex(){return this._pinnedId===null?0:1}_requireFirst(t){if(!this.requiredFirst||t[0]?.type===this.requiredFirst)return t;let r=t.findIndex(a=>a.type===this.requiredFirst);if(r===-1)return[{id:oa(),type:this.requiredFirst,data:{}},...t];let n=[...t];return n.unshift(...n.splice(r,1)),n}_findSection(t){if(t)for(let r of this._state.sections){if(r.id===t)return r;let n=r.children?.find(a=>a?.id===t);if(n)return n}}_patchSection(t,r){return this._state.sections.map(n=>n.id===t?r(n):n.children?.some(a=>a?.id===t)?{...n,children:n.children.map(a=>a?.id===t?r(a):a)}:n)}_extract(t){let r,n=[];for(let a of this._state.sections){if(a.id===t){r=a;continue}let s=a.children?.findIndex(l=>l?.id===t)??-1;s!==-1?(r=a.children[s]??void 0,n.push({...a,children:a.children.map((l,d)=>d===s?null:l)})):n.push(a)}return[r,n]}_commit(t){this._state=t,this.emit("zn-page-change",{detail:{state:this.state}})}_selectedSection(){return this._findSection(this._selectedId)}_select(t){this._selectedId!==t&&(this._selectedId=t,this._pickerIndex=null,this._slotPicker=null,this.emit("zn-page-selection-change",{detail:{sectionId:t}}))}_pushHistory(){this._history.push(structuredClone(this._state)),this._history.length>NI&&this._history.shift(),this._redoStack=[]}addSection(t,r){if(!this.registry.has(t))return null;this._pushHistory();let n={id:oa(),type:t,data:{}},a=[...this._state.sections];return a.splice(Math.max(r??a.length,this._firstFreeIndex),0,n),this._commit({sections:a}),this._select(n.id),n}addSectionToSlot(t,r,n){let a=this.registry.get(t),s=this._findSection(r),l=s?this.registry.get(s.type):void 0;if(!a||a.slots||!s||!l?.slots||n<0||n>=Vh(s,l)||l.accepts&&!l.accepts.includes(t))return null;let d=ed(s,l);if(d[n])return null;let h={id:oa(),type:t,data:{}};return d[n]=h,this._pushHistory(),this._commit({sections:this._patchSection(r,m=>({...m,children:d}))}),this._select(h.id),h}setSectionColumns(t,r){let n=this._findSection(t),a=n?this.registry.get(n.type):void 0;if(!n||a?.slotsMax===void 0)return;let s=na({...n,columns:r},a);s!==na(n,a)&&(this._pushHistory(),this._commit({sections:this._patchSection(t,l=>({...l,columns:s}))}))}_onColumnsEntered(t,r){let n=this.registry.get(t.type);if(n?.slotsMax===void 0)return;let a=na({...t,columns:Number(r.value)},n);r.value=String(a),this.setSectionColumns(t.id,a)}_removeSection(t){if(this._isPinned(t))return;let[r,n]=this._extract(t);r&&(this._pushHistory(),(this._selectedId===t||r.children?.some(a=>a?.id===this._selectedId))&&this._select(null),this._commit({sections:n}))}_duplicateSection(t){let r=this._state.sections.findIndex(n=>n.id===t);if(r!==-1){this._pushHistory();let n=structuredClone(this._state.sections[r]);n.id=oa(),n.children=n.children?.map(s=>s?{...s,id:oa()}:null);let a=[...this._state.sections];a.splice(r+1,0,n),this._commit({sections:a}),this._select(n.id);return}for(let n of this._state.sections){let a=n.children?.findIndex(m=>m?.id===t)??-1;if(a===-1)continue;let s=this.registry.get(n.type);if(!s?.slots)return;let l=ed(n,s),d=l.findIndex(m=>!m);if(d===-1)return;let h=structuredClone(l[a]);h.id=oa(),l[d]=h,this._pushHistory(),this._commit({sections:this._patchSection(n.id,m=>({...m,children:l}))}),this._select(h.id);return}}_moveSection(t,r){if(this._isPinned(t))return;r=Math.max(r,this._firstFreeIndex);let n=this._state.sections.findIndex(l=>l.id===t);if(n!==-1){let l=r>n?r-1:r;if(l===n)return;this._pushHistory();let d=[...this._state.sections],[h]=d.splice(n,1);d.splice(l,0,h),this._commit({sections:d});return}let[a,s]=this._extract(t);a&&(this._pushHistory(),s.splice(r,0,a),this._commit({sections:s}))}_moveToSlot(t,r,n){let a=this._findSection(t),s=this._findSection(r),l=s?this.registry.get(s.type):void 0;if(!a||!s||!l?.slots||t===r||this._isPinned(t)||this.registry.get(a.type)?.slots||l.accepts&&!l.accepts.includes(a.type)||n<0||n>=Vh(s,l))return;let d=s.children?.[n]??null;if(d?.id===t)return;let h=this._state.sections.some(g=>g.id===t);if(d&&h)return;this._pushHistory();let m=structuredClone(this._state.sections),f=m.find(g=>g.id===r);f.children=ed(f,l);let b=structuredClone(a);if(h)m.splice(m.findIndex(g=>g.id===t),1);else for(let g of m){let v=g.children?.findIndex(y=>y?.id===t)??-1;if(v!==-1){g.children[v]=d?structuredClone(d):null;break}}f.children[n]=b,this._commit({sections:m})}_onCardDragStart(t,r){t.dataTransfer&&(t.stopPropagation(),t.dataTransfer.setData(td,r),t.dataTransfer.effectAllowed="move")}_isPageDrag(t){let r=t.dataTransfer?Array.from(t.dataTransfer.types):[];return r.includes(pl)||r.includes(td)}_onSlotDragOver(t,r,n){this._isPageDrag(t)&&(t.preventDefault(),t.stopPropagation(),this._dragOverIndex=null,this._slotDragOver={containerId:r,index:n})}_onSlotDrop(t,r,n){t.preventDefault(),t.stopPropagation(),this._slotDragOver=null;let a=t.dataTransfer?.getData(pl),s=t.dataTransfer?.getData(td);a?this.addSectionToSlot(a,r,n):s&&this._moveToSlot(s,r,n)}_onZoneDragOver(t,r){this._isPageDrag(t)&&(t.preventDefault(),t.stopPropagation(),this._dragOverIndex=r)}_onZoneDrop(t,r){t.preventDefault(),t.stopPropagation(),this._dragOverIndex=null;let n=t.dataTransfer?.getData(pl),a=t.dataTransfer?.getData(td);n?this.addSection(n,r):a&&this._moveSection(a,r)}_onCardKeydown(t,r){t.key==="Delete"||t.key==="Backspace"?(t.preventDefault(),this._removeSection(r)):(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),this._select(r))}_renderPalette(){let t=this._search.trim().toLowerCase(),r=new Map;for(let[n,a]of this.registry.categories()){let s=t?a.filter(l=>l.label.toLowerCase().includes(t)):a;s.length&&r.set(n,s)}return u`
+    `}};Nr.styles=z(Jk),Nr.dependencies={"zn-button":$e,"zn-icon":ne},c([p()],Nr.prototype,"label",2),c([p()],Nr.prototype,"summary",2),c([p()],Nr.prototype,"icon",2),c([p({attribute:"icon-library"})],Nr.prototype,"iconLibrary",2),c([p()],Nr.prototype,"color",2),c([p({type:Boolean,reflect:!0})],Nr.prototype,"selected",2),c([p({type:Boolean,reflect:!0})],Nr.prototype,"unknown",2),c([p({type:Boolean,reflect:!0})],Nr.prototype,"locked",2);var Ug=Nr;Nr.define("zn-page-section-card");var Zk=_`@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none}*,*::before,*::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--zn-border-color))}[hidden]{display:none !important}.width-container,.form-container,.wide-form-container{height:100%;width:100%;margin:var(--zn-default-margin,0 auto)}.width-container{max-width:var(--zn-container)}.form-container{max-width:var(--zn-container-ph)}.wide-form-container{max-width:var(--zn-container-lg)}:host ::-webkit-scrollbar{width:5px;height:5px}:host{}:host ::-webkit-scrollbar-track{background:transparent}:host{}:host ::-webkit-scrollbar-thumb{background:rgba(var(--inverse-base),0.2);border-radius:5px}:host{}:host ::-webkit-scrollbar-thumb:hover{background:rgba(var(--inverse-base),0.6)}:host{--pb-card-width:1024px;display:block;width:100%;height:100%;min-height:480px;color:rgb(var(--zn-text));container-type:inline-size}.builder{--palette-col:343px;--inspector-col:343px;display:grid;grid-template-columns:var(--palette-col) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);width:100%;height:100%;background:rgb(var(--zn-panel));border:1px solid rgb(var(--zn-border-color));border-radius:8px;overflow:hidden}.builder--inspecting{grid-template-columns:var(--palette-col) minmax(0,1fr) var(--inspector-col)}.builder{transition:grid-template-columns 0.2s ease}.builder--palette-collapsed{--palette-col:0px}.builder--palette-collapsed .palette{border-right:none}.builder--inspector-collapsed{--inspector-col:0px}.builder--inspector-collapsed .inspector{border-left:none}@container (max-width:768px){.builder:not(.builder--palette-collapsed){--palette-col:240px}.builder:not(.builder--inspector-collapsed){--inspector-col:300px}}.panel-toggle{position:absolute;top:50%;z-index:6;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border-radius:50%;color:rgb(var(--zn-color-muted-text));background:rgb(var(--zn-panel));border:1px solid rgb(var(--zn-border-color));box-shadow:0 1px 3px rgba(var(--zn-shadow),0.4);cursor:pointer;transition:left 0.2s ease,right 0.2s ease,color 0.12s ease,border-color 0.12s ease}.panel-toggle:hover{color:rgb(var(--zn-text));border-color:rgb(var(--zn-color-border-active))}.panel-toggle--left{left:-12px}.panel-toggle--left.panel-toggle--tucked{left:8px}.panel-toggle--right{right:-12px}.panel-toggle--right.panel-toggle--tucked{right:8px}.header{grid-row:1;grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;border-bottom:1px solid rgb(var(--zn-border-color))}.header[hidden]{display:none}.header__group{display:flex;align-items:center;gap:8px}.palette,.canvas-cell,.inspector{grid-row:2;min-height:0;min-width:0;overflow:hidden}.canvas-cell{position:relative;overflow:visible}.palette{display:flex;flex-direction:column;border-right:1px solid rgb(var(--zn-border-color))}.palette__title{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:16px;border-bottom:1px solid rgb(var(--zn-border-color))}.palette__text{min-width:0}.palette__heading{font-size:0.9375rem;font-weight:600}.palette__subheading{margin-top:2px;font-size:0.75rem;color:rgb(var(--zn-color-muted-text))}.palette__search{padding:12px 12px 8px}.palette__search::part(form-control-label){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.palette__scroll{flex:1;min-height:0;overflow-y:auto;padding-bottom:16px}.palette__category{display:block;border-top:1px solid rgb(var(--zn-border-color))}.palette__category::part(header){align-items:center !important;padding-block:calc(var(--zn-base-px) * 2) !important}.palette__category::part(caption){font-size:14px;font-weight:600;line-height:16px;color:rgb(var(--zn-text))}.palette__uncategorized{padding:8px var(--zn-base-gap)}zn-page-palette-item{margin-bottom:6px}.canvas{width:100%;height:100%;display:flex;flex-direction:column;align-items:stretch;padding:24px;overflow-y:auto;background:radial-gradient(circle,rgba(var(--zn-text),0.08) 1px,transparent 1px) 0 0/20px 20px,rgb(var(--zn-body))}.inspector{display:flex;flex-direction:column;border-left:1px solid rgb(var(--zn-border-color));overflow:hidden;animation:inspector-in 0.18s ease}.inspector-head{display:flex;align-items:center;gap:12px;flex:0 0 auto;padding:16px;border-bottom:1px solid rgb(var(--zn-border-color))}.inspector-head__icon{--section-accent:rgb(var(--zn-color-primary));display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:34px;height:34px;border-radius:8px;color:var(--section-accent);background:color-mix(in srgb,var(--section-accent) 15%,transparent)}.inspector-head__text{flex:1 1 auto;min-width:0}.inspector-head__title{font-size:0.875rem;font-weight:600}.inspector-head__type{font-size:0.75rem;color:rgb(var(--zn-color-muted-text))}.inspector-head__title,.inspector-head__type{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inspector-body{--pb-field-label-size:0.8125rem;--pb-field-note-size:0.75rem;--pb-field-gap:22px;--pb-label-gap:6px;--pb-note-gap:5px;--zn-input-label-font-size-medium:var(--pb-field-label-size);--zn-input-label-font-weight:600;--zn-input-label-line-height:1.3;--zn-input-label-color:rgb(var(--zn-text));--zn-input-help-text-font-size-medium:var(--pb-field-note-size);--zn-input-help-text-color:rgb(var(--zn-color-muted-text));--zn-toggle-margin:0;display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto;padding:18px 16px 24px;gap:var(--pb-field-gap)}.inspector-body ::part(form-control-label){margin-bottom:var(--pb-label-gap)}.inspector-body ::part(form-control-input){margin:0}.inspector-body ::part(form-control-help-text){margin-top:var(--pb-note-gap)}.inspector-body zn-toggle::part(label){font-size:var(--pb-field-label-size);font-weight:600}.inspector-body zn-toggle::part(description){font-size:var(--pb-field-note-size);margin-top:var(--pb-note-gap)}.inspector-body zn-icon-picker::part(trigger){flex:1 1 auto}.inspector-body>*,.inspector-body .inspector__form>*{margin-block:0}.inspector-body>.inspector__form{display:flex;flex-direction:column;gap:var(--pb-field-gap)}.inspector-hint{margin:0;font-size:0.75rem;color:rgb(var(--zn-color-muted-text))}.inspector-close{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:28px;height:28px;padding:0;border:none;border-radius:6px;color:rgb(var(--zn-color-muted-text));background:transparent;cursor:pointer}.inspector-close:hover{color:rgb(var(--zn-text));background:rgb(var(--zn-color-tab))}@keyframes inspector-in{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}.declarations{display:none}.canvas__empty{margin:auto auto 8px;font-size:13px;opacity:0.6}.canvas__empty[hidden]{display:none}.drop{position:relative;display:flex;align-items:center;justify-content:center;width:100%;max-width:var(--pb-card-width);margin:0 auto;min-height:28px;transition:min-height 0.12s ease}.drop--active{min-height:72px}.drop--solo{margin:0 auto auto}.drop--solo.drop--active{margin:auto;min-height:96px}.drop--active::before{content:"";position:absolute;inset:6px 0;border:2px dashed rgb(var(--zn-color-primary));border-radius:8px;background:rgba(var(--zn-color-primary),0.06)}.drop__add{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border:1px solid rgb(var(--zn-border-color));border-radius:50%;background:rgb(var(--zn-panel));color:rgb(var(--zn-text));cursor:pointer;opacity:0;transition:opacity 0.12s ease}.drop:hover .drop__add,.drop--active .drop__add{opacity:1}.container{width:100%;max-width:var(--pb-card-width);margin:0 auto;display:flex;flex-direction:column;gap:8px}.slots{display:grid;grid-template-columns:repeat(var(--pb-slot-columns,3),minmax(0,1fr));gap:8px}.slot{position:relative;min-height:64px}.slot--empty{display:flex;align-items:center;justify-content:center;border:1px dashed rgb(var(--zn-border-color));border-radius:8px;color:rgba(var(--zn-text),0.4);cursor:pointer;transition:border-color 0.12s ease,background 0.12s ease}.slot--empty:hover{border-color:rgb(var(--zn-color-border-active));color:rgba(var(--zn-text),0.7)}.slot--active{border-color:rgb(var(--zn-color-primary));border-style:dashed;background:rgba(var(--zn-color-primary),0.06)}.picker{position:absolute;top:calc(100% - 2px);z-index:2;display:flex;flex-direction:column;min-width:220px;max-height:260px;overflow-y:auto;padding:6px;background:rgb(var(--zn-panel));border:1px solid rgb(var(--zn-border-color));border-radius:8px;box-shadow:0 4px 12px rgba(var(--zn-shadow),0.4)}.picker__item{display:flex;align-items:center;gap:8px;padding:7px 8px;border:none;border-radius:6px;background:transparent;color:rgb(var(--zn-text));font-size:13px;text-align:left;cursor:pointer}.picker__item:hover{background:rgba(var(--zn-text),0.08)}.save-status{position:absolute;left:16px;bottom:16px;z-index:5;display:flex;align-items:center;gap:6px;padding:5px 10px;font-size:0.75rem;color:rgb(var(--zn-color-muted-text));background:rgb(var(--zn-panel));border:1px solid rgb(var(--zn-border-color));border-radius:8px;box-shadow:0 1px 3px rgba(var(--zn-shadow),0.4);pointer-events:none;transition:color 0.15s ease,border-color 0.15s ease}.save-status--saved{color:rgb(var(--zn-color-success));border-color:color-mix(in srgb,rgb(var(--zn-color-success)) 45%,transparent)}.restore-banner{position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:8px;max-width:calc(100% - 32px);padding:8px 12px;font-size:0.8125rem;color:rgb(var(--zn-text));background:rgb(var(--zn-panel));border:1px solid rgb(var(--zn-border-color));border-radius:8px;box-shadow:0 2px 8px rgba(var(--zn-shadow),0.5)}.restore-banner button{flex:0 0 auto;padding:3px 10px;font-size:0.75rem;font-weight:600;border-radius:6px;cursor:pointer}.restore-banner__restore{color:rgb(var(--zn-panel));background:rgb(var(--zn-color-primary));border:none}.restore-banner__restore:hover{filter:brightness(1.1)}.restore-banner__dismiss{color:rgb(var(--zn-color-muted-text));background:transparent;border:none}.restore-banner__dismiss:hover{background:rgb(var(--zn-color-tab))}`;var NI=50,jg=500,OI=768,PI=5,HI=1440*60*1e3;function e3(o){let i=Math.floor(o/1e3);if(i<10)return"just now";if(i<60)return`${i}s ago`;let t=Math.floor(i/60);if(t<60)return`${t}m ago`;let r=Math.floor(t/60);return r<24?`${r}h ago`:`${Math.floor(r/24)}d ago`}var Me=class extends k{constructor(){super(...arguments);this.formControlController=new re(this);this.name="";this.form="";this.config="";this.heading="";this.subheading="";this.requiredFirst="";this.sectionTypes=[];this.paletteCollapsed=!1;this.inspectorCollapsed=!1;this.autoSave=null;this.registry=new Uh;this._state=Bg();this._selectedId=null;this._search="";this._pickerIndex=null;this._dragOverIndex=null;this._slotDragOver=null;this._slotPicker=null;this._form=null;this._hasSlot=new Y(this,"header-left","header-right");this._history=[];this._redoStack=[];this.defaultValue=JSON.stringify(Bg());this._wasNarrow=!1;this._resizeObserver=new ResizeObserver(t=>{let r=t[0]?.contentRect.width??0;if(r<=0)return;let n=r<OI;n&&!this._wasNarrow&&(this.paletteCollapsed=!0),this._wasNarrow=n});this._autoSaveTimer=null;this._statusTimer=null;this._justSavedTimer=null;this._restoring=!1;this._lastSavedAt=null;this._justSaved=!1;this._statusNow=Date.now();this._restorePrompt=null;this._autoSaveTick=()=>{if(!(!this._state.sections.length||this._restorePrompt))try{localStorage.setItem(this._autoSaveKey,JSON.stringify({savedAt:Date.now(),state:this._state})),this._lastSavedAt=Date.now(),this._justSaved=!0,this._justSavedTimer!==null&&clearTimeout(this._justSavedTimer),this._justSavedTimer=window.setTimeout(()=>this._justSaved=!1,2500)}catch{}};this.restoreAutoSave=()=>{let t=this._readAutoSave();if(!t)return!1;this._restoring=!0;try{this._applyExternalState(t.state)}finally{this._restoring=!1}return this._restorePrompt=null,!0};this._registerSlottedTemplates=()=>{let t=!1;this.querySelectorAll('template[slot="config"][type]').forEach(r=>{let n=this._typeFromTemplate(r);n&&!this.registry.has(n.type)&&(this.registry.register(n),t=!0)}),t&&this.requestUpdate()};this.undo=()=>{let t=this._history.pop();t&&(this._redoStack.push(structuredClone(this._state)),this._select(null),this._commit(t))};this.redo=()=>{let t=this._redoStack.pop();t&&(this._history.push(structuredClone(this._state)),this._select(null),this._commit(t))};this._onCanvasDragOver=t=>{this._isPageDrag(t)&&(t.preventDefault(),this._dragOverIndex=this._state.sections.length)};this._onCanvasDrop=t=>{this._onZoneDrop(t,this._state.sections.length)};this._onInspectorInput=t=>{let r=this._selectedSection();if(!r)return;let n=t.target,a=n.getAttribute?.("name");if(!a)return;let s=this._isBooleanControl(n,r.data[a])?!!n.checked:n.value;n.getAttribute("type")==="number"&&s!==""&&s!==null&&s!==void 0&&(s=Number(s)),!(typeof s=="number"&&Number.isNaN(s))&&r.data[a]!==s&&this._updateSectionData(r.id,{[a]:s})}}get state(){return structuredClone(this._state)}set state(t){try{this._applyExternalState(t)}catch{console.warn("<zn-page-builder> invalid state")}}get value(){return JSON.stringify(this._state)}set value(t){if(t)try{this._applyExternalState(JSON.parse(t))}catch{console.warn("<zn-page-builder> invalid value JSON")}}get validity(){return pt}get validationMessage(){return""}checkValidity(){return!0}getForm(){return this.formControlController.getForm()}reportValidity(){return!0}setCustomValidity(t=""){}handleConfigChange(){if(this.config)try{this._applyExternalState(JSON.parse(this.config))}catch{console.warn("<zn-page-builder> invalid config JSON")}}handleRequiredFirstChange(){let t=this._requireFirst(this._state.sections);t!==this._state.sections&&(this._state={sections:t},this.defaultValue=JSON.stringify(this._state))}handleSectionTypesChange(){this.registry.registerAll(this.sectionTypes??[]),this.requestUpdate()}registerSectionType(t){return this.registry.register(t),this.requestUpdate(),this}registerSectionTypes(t){return this.registry.registerAll(t),this.requestUpdate(),this}connectedCallback(){super.connectedCallback(),this._registerSlottedTemplates(),this._resizeObserver.observe(this)}disconnectedCallback(){this._resizeObserver.disconnect(),this._stopAutoSave(),this._justSavedTimer!==null&&(clearTimeout(this._justSavedTimer),this._justSavedTimer=null),super.disconnectedCallback()}get _autoSaveKey(){return`zn-page-builder:${this.id||this.heading||"page"}`}_stopAutoSave(){this._autoSaveTimer!==null&&(clearInterval(this._autoSaveTimer),this._autoSaveTimer=null),this._statusTimer!==null&&(clearInterval(this._statusTimer),this._statusTimer=null)}_restartAutoSave(){if(this._stopAutoSave(),this.autoSave===null)return;let t=this._readAutoSave();t&&(this._lastSavedAt=t.savedAt),this._autoSaveTimer=window.setInterval(this._autoSaveTick,this.autoSave*6e4),this._statusTimer=window.setInterval(()=>this._statusNow=Date.now(),3e4)}_readAutoSave(){try{let t=localStorage.getItem(this._autoSaveKey);if(!t)return null;let r=JSON.parse(t);return!r.state||Date.now()-r.savedAt>HI?(localStorage.removeItem(this._autoSaveKey),null):r}catch{return null}}_offerRestoreIfNewer(){if(this.autoSave===null||this._restoring)return;let t=this._readAutoSave();this._restorePrompt=t&&JSON.stringify(t.state)!==JSON.stringify(this._state)?{savedAt:t.savedAt}:null}willUpdate(t){super.willUpdate(t),t.has("_selectedId")&&this._buildInspectorForm(),t.has("autoSave")&&this._restartAutoSave()}firstUpdated(t){super.firstUpdated(t),this.formControlController.updateValidity()}_typeFromTemplate(t){let r=t.getAttribute("type");return r?{type:r,label:t.getAttribute("label")??r,icon:t.getAttribute("icon")??void 0,iconLibrary:t.getAttribute("icon-library")??void 0,color:t.getAttribute("color")??void 0,category:t.getAttribute("category")??void 0,description:t.getAttribute("description")??void 0,configTemplate:t,...this._slotsFromAttributes(t),accepts:t.getAttribute("accepts")?.split(",").map(n=>n.trim()).filter(Boolean)}:null}_slotsFromAttributes(t){let r=s=>{let l=parseInt(t.getAttribute(s)??"",10);return l>0&&l<=24?l:void 0},n=r("slots");if(!n)return{};let a=r("slots-max");return a===void 0||a<n?{slots:n}:{slots:n,slotsMin:Math.min(r("slots-min")??1,n),slotsMax:a}}_applyExternalState(t){let r=new Set,n=!1,a=(d,h)=>{let m=!d.id||r.has(d.id)?oa():d.id;r.add(m),h===0&&(d.children?.length??0)>24&&(n=!0);let f=this.registry.get(d.type),b=f?.slotsMax===void 0?void 0:na(d,f);return{id:m,type:d.type,label:d.label,...b===void 0?{}:{columns:b},data:structuredClone(d.data??{}),...d.children&&h===0?{children:d.children.slice(0,24).map(g=>g&&typeof g.type=="string"?a(g,h+1):null)}:{}}},s=(t?.sections??[]).filter(d=>d&&typeof d.type=="string");s.length>jg&&console.warn(`<zn-page-builder> config has ${s.length} sections; keeping the first ${jg}`);let l=s.slice(0,jg).map(d=>a(d,0));n&&console.warn(`<zn-page-builder> some sections had more than ${24} children; extras were dropped`),this._history=[],this._redoStack=[],this._state={sections:this._requireFirst(l)},this.defaultValue=JSON.stringify(this._state),this._selectedId=null,this._pickerIndex=null,this._offerRestoreIfNewer()}get _pinnedId(){let t=this._state.sections[0];return this.requiredFirst&&t?.type===this.requiredFirst?t.id:null}_isPinned(t){return this._pinnedId===t}get _firstFreeIndex(){return this._pinnedId===null?0:1}_requireFirst(t){if(!this.requiredFirst||t[0]?.type===this.requiredFirst)return t;let r=t.findIndex(a=>a.type===this.requiredFirst);if(r===-1)return[{id:oa(),type:this.requiredFirst,data:{}},...t];let n=[...t];return n.unshift(...n.splice(r,1)),n}_findSection(t){if(t)for(let r of this._state.sections){if(r.id===t)return r;let n=r.children?.find(a=>a?.id===t);if(n)return n}}_patchSection(t,r){return this._state.sections.map(n=>n.id===t?r(n):n.children?.some(a=>a?.id===t)?{...n,children:n.children.map(a=>a?.id===t?r(a):a)}:n)}_extract(t){let r,n=[];for(let a of this._state.sections){if(a.id===t){r=a;continue}let s=a.children?.findIndex(l=>l?.id===t)??-1;s!==-1?(r=a.children[s]??void 0,n.push({...a,children:a.children.map((l,d)=>d===s?null:l)})):n.push(a)}return[r,n]}_commit(t){this._state=t,this.emit("zn-page-change",{detail:{state:this.state}})}_selectedSection(){return this._findSection(this._selectedId)}_select(t){this._selectedId!==t&&(this._selectedId=t,this._pickerIndex=null,this._slotPicker=null,this.emit("zn-page-selection-change",{detail:{sectionId:t}}))}_pushHistory(){this._history.push(structuredClone(this._state)),this._history.length>NI&&this._history.shift(),this._redoStack=[]}addSection(t,r){if(!this.registry.has(t))return null;this._pushHistory();let n={id:oa(),type:t,data:{}},a=[...this._state.sections];return a.splice(Math.max(r??a.length,this._firstFreeIndex),0,n),this._commit({sections:a}),this._select(n.id),n}addSectionToSlot(t,r,n){let a=this.registry.get(t),s=this._findSection(r),l=s?this.registry.get(s.type):void 0;if(!a||a.slots||!s||!l?.slots||n<0||n>=Vh(s,l)||l.accepts&&!l.accepts.includes(t))return null;let d=ed(s,l);if(d[n])return null;let h={id:oa(),type:t,data:{}};return d[n]=h,this._pushHistory(),this._commit({sections:this._patchSection(r,m=>({...m,children:d}))}),this._select(h.id),h}setSectionColumns(t,r){let n=this._findSection(t),a=n?this.registry.get(n.type):void 0;if(!n||a?.slotsMax===void 0)return;let s=na({...n,columns:r},a);s!==na(n,a)&&(this._pushHistory(),this._commit({sections:this._patchSection(t,l=>({...l,columns:s}))}))}_onColumnsEntered(t,r){let n=this.registry.get(t.type);if(n?.slotsMax===void 0)return;let a=na({...t,columns:Number(r.value)},n);r.value=String(a),this.setSectionColumns(t.id,a)}_removeSection(t){if(this._isPinned(t))return;let[r,n]=this._extract(t);r&&(this._pushHistory(),this._blurActiveCard(),(this._selectedId===t||r.children?.some(a=>a?.id===this._selectedId))&&this._select(null),this._commit({sections:n}))}_duplicateSection(t){let r=this._state.sections.findIndex(n=>n.id===t);if(r!==-1){this._pushHistory();let n=structuredClone(this._state.sections[r]);n.id=oa(),n.children=n.children?.map(s=>s?{...s,id:oa()}:null);let a=[...this._state.sections];a.splice(r+1,0,n),this._commit({sections:a}),this._select(n.id),this._focusCard(n.id);return}for(let n of this._state.sections){let a=n.children?.findIndex(m=>m?.id===t)??-1;if(a===-1)continue;let s=this.registry.get(n.type);if(!s?.slots)return;let l=ed(n,s),d=l.findIndex(m=>!m);if(d===-1)return;let h=structuredClone(l[a]);h.id=oa(),l[d]=h,this._pushHistory(),this._commit({sections:this._patchSection(n.id,m=>({...m,children:l}))}),this._select(h.id),this._focusCard(h.id);return}}async _focusCard(t){this._blurActiveCard(),await this.updateComplete,this.shadowRoot?.querySelector(`zn-page-section-card[data-id="${t}"]`)?.focus()}_blurActiveCard(){let t=this.shadowRoot?.activeElement;if(!(t instanceof HTMLElement)||!t.closest("zn-page-section-card"))return;let r=t;for(;r.shadowRoot?.activeElement instanceof HTMLElement;)r=r.shadowRoot.activeElement;r.blur()}_moveSection(t,r){if(this._isPinned(t))return;r=Math.max(r,this._firstFreeIndex);let n=this._state.sections.findIndex(l=>l.id===t);if(n!==-1){let l=r>n?r-1:r;if(l===n)return;this._pushHistory();let d=[...this._state.sections],[h]=d.splice(n,1);d.splice(l,0,h),this._commit({sections:d});return}let[a,s]=this._extract(t);a&&(this._pushHistory(),s.splice(r,0,a),this._commit({sections:s}))}_moveToSlot(t,r,n){let a=this._findSection(t),s=this._findSection(r),l=s?this.registry.get(s.type):void 0;if(!a||!s||!l?.slots||t===r||this._isPinned(t)||this.registry.get(a.type)?.slots||l.accepts&&!l.accepts.includes(a.type)||n<0||n>=Vh(s,l))return;let d=s.children?.[n]??null;if(d?.id===t)return;let h=this._state.sections.some(g=>g.id===t);if(d&&h)return;this._pushHistory();let m=structuredClone(this._state.sections),f=m.find(g=>g.id===r);f.children=ed(f,l);let b=structuredClone(a);if(h)m.splice(m.findIndex(g=>g.id===t),1);else for(let g of m){let v=g.children?.findIndex(y=>y?.id===t)??-1;if(v!==-1){g.children[v]=d?structuredClone(d):null;break}}f.children[n]=b,this._commit({sections:m})}_onCardDragStart(t,r){t.dataTransfer&&(t.stopPropagation(),t.dataTransfer.setData(td,r),t.dataTransfer.effectAllowed="move")}_isPageDrag(t){let r=t.dataTransfer?Array.from(t.dataTransfer.types):[];return r.includes(pl)||r.includes(td)}_onSlotDragOver(t,r,n){this._isPageDrag(t)&&(t.preventDefault(),t.stopPropagation(),this._dragOverIndex=null,this._slotDragOver={containerId:r,index:n})}_onSlotDrop(t,r,n){t.preventDefault(),t.stopPropagation(),this._slotDragOver=null;let a=t.dataTransfer?.getData(pl),s=t.dataTransfer?.getData(td);a?this.addSectionToSlot(a,r,n):s&&this._moveToSlot(s,r,n)}_onZoneDragOver(t,r){this._isPageDrag(t)&&(t.preventDefault(),t.stopPropagation(),this._dragOverIndex=r)}_onZoneDrop(t,r){t.preventDefault(),t.stopPropagation(),this._dragOverIndex=null;let n=t.dataTransfer?.getData(pl),a=t.dataTransfer?.getData(td);n?this.addSection(n,r):a&&this._moveSection(a,r)}_onCardKeydown(t,r){t.key==="Delete"||t.key==="Backspace"?(t.preventDefault(),this._removeSection(r)):(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),this._select(r))}_renderPalette(){let t=this._search.trim().toLowerCase(),r=new Map;for(let[n,a]of this.registry.categories()){let s=t?a.filter(l=>l.label.toLowerCase().includes(t)):a;s.length&&r.set(n,s)}return u`
       <aside part="palette" class="palette">
         <div class="palette__title">
           <div class="palette__text">
@@ -5806,6 +5806,7 @@ endif::[]`,caretOffset:9},{key:"inline-formatting",label:"Strong",icon:"bold@lu"
       </div>`}_renderSectionCard(t,r,n=""){let a=this.registry.get(t.type),s=this._isPinned(t.id);return u`
       <zn-page-section-card
         class="${n}"
+        data-id="${t.id}"
         draggable="${s?"false":"true"}"
         tabindex="0"
         label="${t.label??a?.label??t.type}"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.137",
+  "version": "1.1.138",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/page-builder/modules/page-section-card/page-section-card.scss

@@ -21,6 +21,9 @@
 }
 
 .card {
+  --card-actions-inset: 14px;
+
+  position: relative;
   display: flex;
   align-items: center;
   gap: 12px;
@@ -90,11 +93,21 @@
   opacity: 0.45;
 }
 
-// Space is always reserved (visibility, not display) so the card never
-// changes size or shifts its text when the actions appear on hover.
+:host([locked]) .card {
+  // Clear the always-visible lock: its 14px icon plus the row gap.
+  --card-actions-inset: 40px;
+}
+
+// Overlaid rather than laid out, so the text gets the full card width and never
+// reflows on hover; the gradient pad hides whatever text runs underneath.
 .card__actions {
+  position: absolute;
+  inset: 0 var(--card-actions-inset) 0 auto;
   display: flex;
-  gap: 4px;
+  align-items: center;
+  gap: var(--zn-spacing-2x-small);
+  padding-left: 28px;
+  background: linear-gradient(to right, rgba(var(--zn-panel), 0), rgb(var(--zn-panel)) 28px);
   visibility: hidden;
 }
 

package/src/components/page-builder/page-builder.component.ts

@@ -684,6 +684,9 @@ export default class ZnPageBuilder extends ZincElement {
     const [removed, sections] = this._extract(id);
     if (!removed) return;
     this._pushHistory();
+    // Cards are rendered unkeyed, so the focused action button survives the
+    // re-render as part of whichever section shifts into this slot.
+    this._blurActiveCard();
     // Clear selection for the removed section AND anything inside it.
     if (this._selectedId === id || removed.children?.some(c => c?.id === this._selectedId)) {
       this._select(null);
@@ -702,6 +705,7 @@ export default class ZnPageBuilder extends ZincElement {
       sections.splice(index + 1, 0, copy);
       this._commit({ sections });
       this._select(copy.id);
+      void this._focusCard(copy.id);
       return;
     }
     // A slotted child duplicates into its container's next empty slot, if any.
@@ -719,10 +723,32 @@ export default class ZnPageBuilder extends ZincElement {
       this._pushHistory();
       this._commit({ sections: this._patchSection(s.id, x => ({ ...x, children })) });
       this._select(copy.id);
+      void this._focusCard(copy.id);
       return;
     }
   }
 
+  /**
+   * Hands focus to a card, moving it off the action button that was just used.
+   * Cards render unkeyed, so focus left behind stays with the original card's
+   * element and keeps its hover actions showing after the pointer leaves.
+   */
+  private async _focusCard(id: string) {
+    this._blurActiveCard();
+    await this.updateComplete;
+    this.shadowRoot?.querySelector<HTMLElement>(`zn-page-section-card[data-id="${id}"]`)?.focus();
+  }
+
+  private _blurActiveCard() {
+    const focused = this.shadowRoot?.activeElement;
+    if (!(focused instanceof HTMLElement) || !focused.closest('zn-page-section-card')) return;
+    let active: HTMLElement = focused;
+    // activeElement retargets to the card host; the real focus is the action
+    // button nested in its shadow root, and only that responds to blur().
+    while (active.shadowRoot?.activeElement instanceof HTMLElement) active = active.shadowRoot.activeElement;
+    active.blur();
+  }
+
   /** Moves a section (top-level or slotted) to a top-level position. */
   private _moveSection(id: string, index: number) {
     if (this._isPinned(id)) return;
@@ -993,6 +1019,7 @@ export default class ZnPageBuilder extends ZincElement {
     return html`
       <zn-page-section-card
         class="${extraClass}"
+        data-id="${section.id}"
         draggable="${pinned ? 'false' : 'true'}"
         tabindex="0"
         label="${section.label ?? type?.label ?? section.type}"