@creaditor/web-starterkit 1.0.22 → 1.0.24

package/dist/5849.creaditor.bundle.js

@@ -1,4 +1,4 @@
-"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[5849],{75849(t,e,i){i.r(e),i.d(e,{default:()=>a});var s=i(59929);class a extends s.WF{constructor(){super()}connectedCallback(){super.connectedCallback(),this.setAttribute("data-type","inline-image"),this.classList.add("inlineImage-component"),this.src="https://api.creaditor.com/images/placeholder?width=100&height=100",this.alt="alt text"}calculateSize(){const t=this.shadowRoot.querySelector("img");if(t){const e=t.getBoundingClientRect();this.width=e.width,this.height=e.height}}render(){return this.calculateSize(),s.qy`<img
+"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[5849],{75849(t,e,i){i.r(e),i.d(e,{default:()=>a});var s=i(59929);class a extends s.WF{constructor(){super()}connectedCallback(){super.connectedCallback(),this.setAttribute("data-type","inline-image"),this.classList.add("inlineImage-component"),this.src="https://img.creaditor.ai/images/placeholder?width=100&height=100",this.alt="alt text"}calculateSize(){const t=this.shadowRoot.querySelector("img");if(t){const e=t.getBoundingClientRect();this.width=e.width,this.height=e.height}}render(){return this.calculateSize(),s.qy`<img
       draggable="false"
       .style="${this.style}"
       src="${this.src}"
@@ -13,6 +13,6 @@
       max-width: 100%;
     }
     img:hover {
-      outline: 1px solid var(--primary);
+      outline: 1px solid var(--color-primary, #6366f1);
     }
   `,a.properties={src:{type:String},alt:{type:String},style:{type:String},height:{type:Number},width:{type:Number}},customElements.define("cdtr-editor-image",a)}}]);

package/dist/5909.creaditor.bundle.js

@@ -1,10 +1,10 @@
-"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[5909],{65909(e,t,i){i.r(t),i.d(t,{NextButton:()=>f});var s=i(59929),o=i(86319),r=i(93432),n=i(90090),a=i(86959),l=i(36565);const c=`${(0,a.Ay)()?"http://127.0.0.1:8000":"https://studio.creaditor.ai"}/api/seo-generate`;const d=s.qy`
+"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[5909],{65909(e,t,i){i.r(t),i.d(t,{NextButton:()=>u});var o=i(59929),s=i(86319),r=i(93432),n=i(90090),a=i(86959),l=i(36565);const c=`${(0,a.Ay)()?"http://127.0.0.1:8000":"https://studio.creaditor.ai"}/api/seo-generate`;const d=o.qy`
   <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16" aria-hidden="true">
     <path
       d="M19 9l1.25-2.75L23 5l-2.75-1.25L19 1l-1.25 2.75L15 5l2.75 1.25L19 9zm-7.5.5L9 4 6.5 9.5 1 12l5.5 2.5L9 20l2.5-5.5L17 12l-5.5-2.5zM19 15l-1.25 2.75L15 19l2.75 1.25L19 23l1.25-2.75L23 19l-2.75-1.25L19 15z"
     />
   </svg>
-`;class p extends s.WF{constructor(){super(),this.resolver=null,this.onCancel=()=>{this.loading||this.close(null)},this.onKeywordKeydown=e=>{"Enter"===e.key||","===e.key?(e.preventDefault(),this.commitDraftKeyword()):"Backspace"===e.key&&""===this.keywordDraft&&this.keywordList.length&&(this.keywordList=this.keywordList.slice(0,-1))},this.generateField=async e=>{if(this.loading||this.generatingField)return;const t=function(){const e=document.getElementById("main-page-wrapper");return(e?.innerText||"").trim()}();if(t){this.generatingField=e;try{const i="rtl"===this.direction?"he":"en",s=await this.requestSeo(e,t,i);if("keywords"===e){const e=(Array.isArray(s)?s:String(s).split(",")).map(e=>e.trim()).filter(Boolean),t=[...this.keywordList];for(const i of e)t.includes(i)||t.push(i);this.keywordList=t}else"title"===e?this.title=String(s).slice(0,100):this.description=String(s).slice(0,255)}catch(e){console.error("[seo-generate] failed:",e),this.snackbar(this.t("seo_generate_failed","Couldn't generate. Please try again."))}finally{this.generatingField=""}}else this.snackbar(this.t("seo_generate_empty","Add some content to the page first."))},this.onPublish=()=>{this.loading||(this.commitDraftKeyword(),this.loading=!0,this.close({title:this.title.trim(),description:this.description.trim(),keywords:[...this.keywordList]}))},this.loading=!1,this.title="",this.description="",this.keywordList=[],this.keywordDraft="",this.keywordsFocused=!1,this.generatingField=""}static open(){const e=document.createElement("cdtr-publish-seo"),t=o.M.get("app","seo")||{};return e.title=t.title||"",e.description=t.description||"",e.keywordList=(Array.isArray(t.keywords)?t.keywords:String(t.keywords||"").split(",")).map(e=>String(e).trim()).filter(Boolean),document.body.appendChild(e),e.waitForChoice()}waitForChoice(){return new Promise(e=>{this.resolver=e})}t(e,t){return o.M.get("lang",e)||t}get direction(){const e=o.M.get("theme");return e?.direction||"rtl"}close(e){this.resolver&&(this.resolver(e),this.resolver=null),this.isConnected&&this.remove()}commitDraftKeyword(){const e=this.keywordDraft.split(",").map(e=>e.trim()).filter(Boolean);if(!e.length)return;const t=[...this.keywordList];for(const i of e)t.includes(i)||t.push(i);this.keywordList=t,this.keywordDraft=""}removeKeyword(e){this.keywordList=this.keywordList.filter((t,i)=>i!==e)}snackbar(e){const t=o.M.get("commands");t?.snackbar?.(e)}async requestSeo(e,t,i){const s=async s=>{const o=await async function(){let e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];const t=l.Ay;if("function"==typeof t.studioTokenProvider)try{const i=await t.studioTokenProvider({forceRefresh:e});if("string"==typeof i&&i.length>0)return i}catch{}return"string"==typeof t.studioToken&&t.studioToken.length>0?t.studioToken:null}(s),r={"Content-Type":"application/json",Accept:"application/json"};return o&&(r.Authorization=`Bearer ${o}`),fetch(c,{method:"POST",headers:r,body:JSON.stringify({content:t,field:e,language:i})})};let o=await s(!1);if(401===o.status&&(o=await s(!0)),!o.ok)throw new Error(`HTTP ${o.status}`);const r=await o.json();if(!r.ok||void 0===r.value)throw new Error("bad response");return r.value}magicButton(e){const t=this.generatingField===e;return s.qy`
+`;class p extends o.WF{constructor(){super(),this.resolver=null,this.onCancel=()=>{this.loading||this.close(null)},this.onKeywordKeydown=e=>{"Enter"===e.key||","===e.key?(e.preventDefault(),this.commitDraftKeyword()):"Backspace"===e.key&&""===this.keywordDraft&&this.keywordList.length&&(this.keywordList=this.keywordList.slice(0,-1))},this.generateField=async e=>{if(this.loading||this.generatingField)return;const t=function(){const e=document.getElementById("main-page-wrapper");return(e?.innerText||"").trim()}();if(t){this.generatingField=e;try{const i="rtl"===this.direction?"he":"en",o=await this.requestSeo(e,t,i);if("keywords"===e){const e=(Array.isArray(o)?o:String(o).split(",")).map(e=>e.trim()).filter(Boolean),t=[...this.keywordList];for(const i of e)t.includes(i)||t.push(i);this.keywordList=t}else"title"===e?this.title=String(o).slice(0,100):this.description=String(o).slice(0,255)}catch(e){console.error("[seo-generate] failed:",e),this.snackbar(this.t("seo_generate_failed","Couldn't generate. Please try again."))}finally{this.generatingField=""}}else this.snackbar(this.t("seo_generate_empty","Add some content to the page first."))},this.onPublish=()=>{this.loading||(this.commitDraftKeyword(),this.loading=!0,this.close({title:this.title.trim(),description:this.description.trim(),keywords:[...this.keywordList]}))},this.loading=!1,this.title="",this.description="",this.keywordList=[],this.keywordDraft="",this.keywordsFocused=!1,this.generatingField=""}static open(){const e=document.createElement("cdtr-publish-seo"),t=s.M.get("app","seo")||{};return e.title=t.title||"",e.description=t.description||"",e.keywordList=(Array.isArray(t.keywords)?t.keywords:String(t.keywords||"").split(",")).map(e=>String(e).trim()).filter(Boolean),document.body.appendChild(e),e.waitForChoice()}waitForChoice(){return new Promise(e=>{this.resolver=e})}t(e,t){return s.M.get("lang",e)||t}get direction(){const e=s.M.get("theme");return e?.direction||"rtl"}close(e){this.resolver&&(this.resolver(e),this.resolver=null),this.isConnected&&this.remove()}commitDraftKeyword(){const e=this.keywordDraft.split(",").map(e=>e.trim()).filter(Boolean);if(!e.length)return;const t=[...this.keywordList];for(const i of e)t.includes(i)||t.push(i);this.keywordList=t,this.keywordDraft=""}removeKeyword(e){this.keywordList=this.keywordList.filter((t,i)=>i!==e)}snackbar(e){const t=s.M.get("commands");t?.snackbar?.(e)}async requestSeo(e,t,i){const o=async o=>{const s=await async function(){let e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];const t=l.Ay;if("function"==typeof t.studioTokenProvider)try{const i=await t.studioTokenProvider({forceRefresh:e});if("string"==typeof i&&i.length>0)return i}catch{}return"string"==typeof t.studioToken&&t.studioToken.length>0?t.studioToken:null}(o),r={"Content-Type":"application/json",Accept:"application/json"};return s&&(r.Authorization=`Bearer ${s}`),fetch(c,{method:"POST",headers:r,body:JSON.stringify({content:t,field:e,language:i})})};let s=await o(!1);if(401===s.status&&(s=await o(!0)),!s.ok)throw new Error(`HTTP ${s.status}`);const r=await s.json();if(!r.ok||void 0===r.value)throw new Error("bad response");return r.value}magicButton(e){const t=this.generatingField===e;return o.qy`
       <button
         class="magic"
         type="button"
@@ -13,9 +13,9 @@
         ?disabled=${this.loading||!!this.generatingField}
         @click=${()=>this.generateField(e)}
       >
-        ${t?s.qy`<span class="mini-spinner"></span>`:d}
+        ${t?o.qy`<span class="mini-spinner"></span>`:d}
       </button>
-    `}render(){const e=this.direction;return s.qy`
+    `}render(){const e=this.direction;return o.qy`
       <div class="backdrop" @click=${this.onCancel}></div>
       <div class="card" dir=${e}>
         <h2 class="heading">${this.t("ready_to_publish","Ready to publish")}</h2>
@@ -59,7 +59,7 @@
             class="chips ${this.keywordsFocused?"focused":""}"
             @click=${e=>{const t=e.currentTarget.querySelector("input");t?.focus()}}
           >
-            ${this.keywordList.map((e,t)=>s.qy`
+            ${this.keywordList.map((e,t)=>o.qy`
                 <span class="chip">
                   ${e}
                   <button
@@ -85,14 +85,14 @@
 
         <div class="actions">
           <button class="publish" ?disabled=${this.loading} @click=${this.onPublish}>
-            ${this.loading?s.qy`<span class="spinner"></span>`:this.t("publish","Publish")}
+            ${this.loading?o.qy`<span class="spinner"></span>`:this.t("publish","Publish")}
           </button>
           <button class="cancel" ?disabled=${this.loading} @click=${this.onCancel}>
             ${this.t("cancel","Cancel")}
           </button>
         </div>
       </div>
-    `}}p.styles=s.AH`
+    `}}p.styles=o.AH`
     :host {
       position: fixed;
       inset: 0;
@@ -171,7 +171,7 @@
       border: 1px solid #d5d7de;
       border-radius: 8px;
       background: #fff;
-      color: var(--primary, #6c5ce7);
+      color: var(--color-primary, #6366f1);
       cursor: pointer;
       line-height: 1;
       transition: border-color 0.15s ease, background 0.15s ease;
@@ -180,7 +180,7 @@
       display: block;
     }
     .magic:hover:not(:disabled) {
-      border-color: var(--primary, #6c5ce7);
+      border-color: var(--color-primary, #6366f1);
       background: color-mix(in srgb, var(--primary, #6c5ce7) 10%, #fff);
     }
     .magic:disabled {
@@ -190,8 +190,8 @@
     .mini-spinner {
       width: 14px;
       height: 14px;
-      border: 2px solid color-mix(in srgb, var(--primary, #6c5ce7) 35%, transparent);
-      border-top-color: var(--primary, #6c5ce7);
+      border: 2px solid color-mix(in srgb, var(--color-primary, #6366f1) 35%, transparent);
+      border-top-color: var(--color-primary, #6366f1);
       border-radius: 50%;
       animation: spin 0.8s linear infinite;
     }
@@ -210,8 +210,11 @@
     }
     input:focus,
     textarea:focus {
-      border-color: var(--primary, #6c5ce7);
-      box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #6c5ce7) 25%, transparent);
+      /* --primary is the host's brand colour and may be a gradient, which is
+         invalid for border-color and color-mix — those hosts lost the focus
+         indicator entirely. The interaction colour is always flat. */
+      border-color: var(--color-primary, #6366f1);
+      box-shadow: 0 0 0 3px var(--color-primary-ring, rgba(99, 102, 241, 0.15));
     }
     textarea {
       resize: vertical;
@@ -237,8 +240,8 @@
       transition: border-color 0.15s ease, box-shadow 0.15s ease;
     }
     .chips.focused {
-      border-color: var(--primary, #6c5ce7);
-      box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #6c5ce7) 25%, transparent);
+      border-color: var(--color-primary, #6366f1);
+      box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary, #6366f1) 25%, transparent);
     }
     .chip {
       display: inline-flex;
@@ -249,7 +252,7 @@
          this fixed tint keeps the chip visible. */
       background: #eceafc;
       background: color-mix(in srgb, var(--primary, #6c5ce7) 15%, #fff);
-      color: var(--primary, #6c5ce7);
+      color: var(--color-primary, #6366f1);
       border-radius: 6px;
       padding: 5px 8px 5px 10px;
       font-size: 14px;
@@ -335,20 +338,20 @@
     @keyframes spin {
       to { transform: rotate(360deg); }
     }
-  `,p.properties={loading:{type:Boolean},title:{type:String},description:{type:String},keywordList:{type:Array},keywordDraft:{type:String},keywordsFocused:{type:Boolean},generatingField:{type:String}},customElements.define("cdtr-publish-seo",p);var h=i(65550);class u extends s.WF{constructor(){super(),this.raf=0,this.dismissTimer=null,this.dismiss=()=>{this.isConnected&&this.remove()},this.copyLink=async()=>{if(this.url)try{await navigator.clipboard.writeText(this.url),this.copied=!0,setTimeout(()=>this.copied=!1,2e3)}catch{}},this.message="",this.sub="",this.url="",this.seoTitle="",this.seoDescription="",this.copied=!1}firstUpdated(){this.launchConfetti(),this.dismissTimer=setTimeout(()=>this.dismiss(),6500)}disconnectedCallback(){super.disconnectedCallback(),cancelAnimationFrame(this.raf),this.dismissTimer&&clearTimeout(this.dismissTimer)}t(e,t){return o.M.get("lang",e)||t}get direction(){const e=o.M.get("theme");return e?.direction||"rtl"}get host(){return this.url?this.url.replace(/^https?:\/\//,"").replace(/\/+$/,""):""}launchConfetti(){const e=this.renderRoot.querySelector("canvas");if(!e)return;const t=e.getContext("2d");if(!t)return;const i=window.devicePixelRatio||1,s=window.innerWidth,o=window.innerHeight;e.width=s*i,e.height=o*i,t.scale(i,i);const r=["#e94560","#1a1a2e","#f6c945","#2ec7a9","#4d7cfe","#ffffff"],n=s/2,a=.42*o,l=Math.min(220,Math.round(s/6)),c=Array.from({length:l},(e,t)=>{const i=2*Math.PI*t/l+t%3*.4,s=4+t%9;return{x:n,y:a,vx:Math.cos(i)*s,vy:Math.sin(i)*s-3,size:5+t%5,color:r[t%r.length],rot:t,vrot:(t%2?1:-1)*(.1+t%5*.03),life:1}}),d=performance.now(),p=e=>{const i=e-d;t.clearRect(0,0,s,o);let r=!1;for(const e of c)e.vy+=.16,e.x+=e.vx,e.y+=e.vy,e.rot+=e.vrot,i>2600*.55&&(e.life=Math.max(0,e.life-.02)),e.life>0&&e.y<o+40&&(r=!0),t.save(),t.globalAlpha=e.life,t.translate(e.x,e.y),t.rotate(e.rot),t.fillStyle=e.color,t.fillRect(-e.size/2,-e.size/2,e.size,.6*e.size),t.restore();r&&i<3e3?this.raf=requestAnimationFrame(p):t.clearRect(0,0,s,o)};this.raf=requestAnimationFrame(p)}renderPreview(){const e=this.host;if(!e)return s.s6;const t=(this.seoTitle||"").trim()||(this.seoDescription?"":e),i=(this.seoDescription||"").trim(),o=(t||e).charAt(0);return s.qy`
+  `,p.properties={loading:{type:Boolean},title:{type:String},description:{type:String},keywordList:{type:Array},keywordDraft:{type:String},keywordsFocused:{type:Boolean},generatingField:{type:String}},customElements.define("cdtr-publish-seo",p);var h=i(65550);class f extends o.WF{constructor(){super(),this.raf=0,this.dismissTimer=null,this.dismiss=()=>{this.isConnected&&this.remove()},this.copyLink=async()=>{if(this.url)try{await navigator.clipboard.writeText(this.url),this.copied=!0,setTimeout(()=>this.copied=!1,2e3)}catch{}},this.message="",this.sub="",this.url="",this.seoTitle="",this.seoDescription="",this.copied=!1}firstUpdated(){this.launchConfetti(),this.dismissTimer=setTimeout(()=>this.dismiss(),6500)}disconnectedCallback(){super.disconnectedCallback(),cancelAnimationFrame(this.raf),this.dismissTimer&&clearTimeout(this.dismissTimer)}t(e,t){return s.M.get("lang",e)||t}get direction(){const e=s.M.get("theme");return e?.direction||"rtl"}get host(){return this.url?this.url.replace(/^https?:\/\//,"").replace(/\/+$/,""):""}launchConfetti(){const e=this.renderRoot.querySelector("canvas");if(!e)return;const t=e.getContext("2d");if(!t)return;const i=window.devicePixelRatio||1,o=window.innerWidth,s=window.innerHeight;e.width=o*i,e.height=s*i,t.scale(i,i);const r=["#e94560","#1a1a2e","#f6c945","#2ec7a9","#4d7cfe","#ffffff"],n=o/2,a=.42*s,l=Math.min(220,Math.round(o/6)),c=Array.from({length:l},(e,t)=>{const i=2*Math.PI*t/l+t%3*.4,o=4+t%9;return{x:n,y:a,vx:Math.cos(i)*o,vy:Math.sin(i)*o-3,size:5+t%5,color:r[t%r.length],rot:t,vrot:(t%2?1:-1)*(.1+t%5*.03),life:1}}),d=performance.now(),p=e=>{const i=e-d;t.clearRect(0,0,o,s);let r=!1;for(const e of c)e.vy+=.16,e.x+=e.vx,e.y+=e.vy,e.rot+=e.vrot,i>2600*.55&&(e.life=Math.max(0,e.life-.02)),e.life>0&&e.y<s+40&&(r=!0),t.save(),t.globalAlpha=e.life,t.translate(e.x,e.y),t.rotate(e.rot),t.fillStyle=e.color,t.fillRect(-e.size/2,-e.size/2,e.size,.6*e.size),t.restore();r&&i<3e3?this.raf=requestAnimationFrame(p):t.clearRect(0,0,o,s)};this.raf=requestAnimationFrame(p)}renderPreview(){const e=this.host;if(!e)return o.s6;const t=(this.seoTitle||"").trim()||(this.seoDescription?"":e),i=(this.seoDescription||"").trim(),s=(t||e).charAt(0);return o.qy`
       <div class="preview">
         <p class="preview-caption">${this.t("search_preview_label","How your page will look on Google")}</p>
         <div class="result-head">
-          <span class="favicon">${o}</span>
+          <span class="favicon">${s}</span>
           <div class="result-url">
             <div class="result-host">${e.split("/")[0]}</div>
             <div class="result-crumb">${e}</div>
           </div>
         </div>
-        ${t?s.qy`<p class="result-title">${t}</p>`:s.s6}
-        ${i?s.qy`<p class="result-desc">${i}</p>`:s.s6}
+        ${t?o.qy`<p class="result-title">${t}</p>`:o.s6}
+        ${i?o.qy`<p class="result-desc">${i}</p>`:o.s6}
       </div>
-    `}render(){const e=this.direction,t=this.copied?s.qy`<svg viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" /></svg>`:s.qy`<svg viewBox="0 0 24 24" fill="none"><rect x="9" y="9" width="11" height="11" rx="2" stroke="currentColor" stroke-width="2" /><path d="M5 15V5a2 2 0 0 1 2-2h10" stroke="currentColor" stroke-width="2" stroke-linecap="round" /></svg>`;return s.qy`
+    `}render(){const e=this.direction,t=this.copied?o.qy`<svg viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" /></svg>`:o.qy`<svg viewBox="0 0 24 24" fill="none"><rect x="9" y="9" width="11" height="11" rx="2" stroke="currentColor" stroke-width="2" /><path d="M5 15V5a2 2 0 0 1 2-2h10" stroke="currentColor" stroke-width="2" stroke-linecap="round" /></svg>`;return o.qy`
       <canvas @click=${this.dismiss}></canvas>
       <div class="card" dir=${e}>
         <div class="check">
@@ -361,7 +364,7 @@
 
         ${this.renderPreview()}
 
-        ${this.url?s.qy`
+        ${this.url?o.qy`
               <div class="actions">
                 <a class="view" href=${this.url} target="_blank" rel="noopener">
                   <svg viewBox="0 0 24 24" fill="none"><path d="M14 4h6v6M20 4l-9 9M18 13v5a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg>
@@ -372,9 +375,9 @@
                   ${this.copied?this.t("link_copied","Link copied"):this.t("copy_link","Copy link")}
                 </button>
               </div>
-            `:s.s6}
+            `:o.s6}
       </div>
-    `}}u.styles=s.AH`
+    `}}f.styles=o.AH`
     :host {
       position: fixed;
       inset: 0;
@@ -572,28 +575,28 @@
       transition: border-color 0.15s ease, color 0.15s ease;
     }
     .copy:hover {
-      border-color: var(--primary, #6c5ce7);
+      border-color: var(--color-primary, #6366f1);
       color: #1a1a2e;
     }
     .copy svg {
       width: 15px;
       height: 15px;
     }
-  `,u.properties={message:{type:String},sub:{type:String},url:{type:String},seoTitle:{type:String},seoDescription:{type:String},copied:{type:Boolean}},customElements.define("cdtr-publish-success",u);class f extends s.WF{constructor(){super(),this.channel="",this.isLoading=!1,this.isLocked=!1,this.lockTimer=null}connectedCallback(){super.connectedCallback(),this.onNextStep||(this.onNextStep=o.M.get("config","onNextStep")),this.channel||(this.channel=o.M.get("config","channel")||"")}disconnectedCallback(){super.disconnectedCallback(),this.clearTimers()}clearTimers(){this.lockTimer&&(clearTimeout(this.lockTimer),this.lockTimer=null)}async handleClick(){if(this.isLocked||this.isLoading)return;const e=!!o.M.get("config","access"),t="web"===this.channel,i=e&&t;let s=null;if(!t||(s=await p.open(),s)){this.isLoading=!0,this.isLocked=!0,this.lockTimer=setTimeout(()=>{this.clearTimers(),this.isLoading=!1,this.isLocked=!1},1e4);try{if(t){const e=this.showBuildingLoader();try{i&&s&&(await(0,n.YE)({seo:s}),await(0,n.bK)({})),"function"==typeof this.onNextStep&&await this.onNextStep({toHTML:r.FE,toJSON:r.U2,seo:s??void 0})}finally{e()}return void this.celebratePublish(s)}"function"==typeof this.onNextStep&&await this.onNextStep({toHTML:r.FE,toJSON:r.U2})}catch(e){console.error("Error in publish/onNextStep:",e),this.snackbar(o.M.get("lang","publishError")||"Publish failed")}finally{this.clearTimers(),this.isLoading=!1,this.isLocked=!1}}}snackbar(e){const t=o.M.get("commands");t?.snackbar?.(e)}showBuildingLoader(){const e=(0,h.A)();document.body.appendChild(e);let t=!1;return()=>{t||(t=!0,e.style.transition="opacity 300ms ease",e.style.opacity="0",e.style.pointerEvents="none",setTimeout(()=>e.remove(),320))}}celebratePublish(e){const t=document.createElement("cdtr-publish-success");e&&(t.seoTitle=e.title,t.seoDescription=e.description);const i=o.M.get("app","domains"),s=i?.[0]?.name;s&&(t.url=/^https?:\/\//.test(s)?s:`https://${s}`),document.body.appendChild(t)}render(){const e=!!o.M.get("config","access");if(!(this.onNextStep||"web"===this.channel&&e))return null;const t="web"===this.channel?"publish":"next";return s.qy`
+  `,f.properties={message:{type:String},sub:{type:String},url:{type:String},seoTitle:{type:String},seoDescription:{type:String},copied:{type:Boolean}},customElements.define("cdtr-publish-success",f);class u extends o.WF{constructor(){super(),this.channel="",this.isLoading=!1,this.isLocked=!1,this.lockTimer=null}connectedCallback(){super.connectedCallback(),this.onNextStep||(this.onNextStep=s.M.get("config","onNextStep")),this.channel||(this.channel=s.M.get("config","channel")||"")}disconnectedCallback(){super.disconnectedCallback(),this.clearTimers()}clearTimers(){this.lockTimer&&(clearTimeout(this.lockTimer),this.lockTimer=null)}async handleClick(){if(this.isLocked||this.isLoading)return;const e=!!s.M.get("config","access"),t="web"===this.channel,i=e&&t;let o=null;if(!t||(o=await p.open(),o)){this.isLoading=!0,this.isLocked=!0,this.lockTimer=setTimeout(()=>{this.clearTimers(),this.isLoading=!1,this.isLocked=!1},1e4);try{if(t){const e=this.showBuildingLoader();try{i&&o&&(await(0,n.YE)({seo:o}),await(0,n.bK)({})),"function"==typeof this.onNextStep&&await this.onNextStep({toHTML:r.FE,toJSON:r.U2,seo:o??void 0})}finally{e()}return void this.celebratePublish(o)}"function"==typeof this.onNextStep&&await this.onNextStep({toHTML:r.FE,toJSON:r.U2})}catch(e){console.error("Error in publish/onNextStep:",e),this.snackbar(s.M.get("lang","publishError")||"Publish failed")}finally{this.clearTimers(),this.isLoading=!1,this.isLocked=!1}}}snackbar(e){const t=s.M.get("commands");t?.snackbar?.(e)}showBuildingLoader(){const e=(0,h.A)();document.body.appendChild(e);let t=!1;return()=>{t||(t=!0,e.style.transition="opacity 300ms ease",e.style.opacity="0",e.style.pointerEvents="none",setTimeout(()=>e.remove(),320))}}celebratePublish(e){const t=document.createElement("cdtr-publish-success");e&&(t.seoTitle=e.title,t.seoDescription=e.description);const i=s.M.get("app","domains"),o=i?.[0]?.name;o&&(t.url=/^https?:\/\//.test(o)?o:`https://${o}`),document.body.appendChild(t)}render(){const e=!!s.M.get("config","access");if(!(this.onNextStep||"web"===this.channel&&e))return null;const t="web"===this.channel?"publish":"next";return o.qy`
       <paper-button
         @click=${this.handleClick}
         class="next-button"
         ?disabled=${this.isLocked}
       >
-        ${this.isLoading?s.qy`
+        ${this.isLoading?o.qy`
               <div class="loading-spinner"></div>
-            `:s.qy`
+            `:o.qy`
               <div class="button-content ${this.isLoading?"loading":""}">
                 <lang-text text=${t}></lang-text>
               </div>
             `}
       </paper-button>
-    `}}f.styles=s.AH`
+    `}}u.styles=o.AH`
     :host {
       display: block;
     }
@@ -645,4 +648,4 @@
     }
 
 
-  `,f.properties={onNextStep:{type:Function},channel:{type:String},isLoading:{type:Boolean},isLocked:{type:Boolean},lockTimer:{type:Number}},customElements.define("cdtr-next-button",f)}}]);
+  `,u.properties={onNextStep:{type:Function},channel:{type:String},isLoading:{type:Boolean},isLocked:{type:Boolean},lockTimer:{type:Number}},customElements.define("cdtr-next-button",u)}}]);

package/dist/5926.creaditor.bundle.js

@@ -1,13 +1,40 @@
-"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[5926],{83545(t,e,i){i.r(e),i.d(e,{EditorTabs:()=>r});var a=i(59929),o=i(36565),n=i(86319);i.e(7937).then(i.bind(i,67937));const s="cdtr-editor-tabs-hint-seen";class r extends a.WF{constructor(){super(),this.onConnected=this.onConnected.bind(this),this.onArrowNavigation=this.onArrowNavigation.bind(this),this.dismissHint=this.dismissHint.bind(this),this.tabs=[],this.showHint=!1}hintAlreadySeen(){try{return"1"===localStorage.getItem(s)}catch(t){return!0}}dismissHint(){this.showHint=!1;try{localStorage.setItem(s,"1")}catch(t){}}onClickItem(t){let{target:e}=t;const i=this.value=e.value,a=[...this.tabs],o=a.findIndex(t=>t.text===i);-1!==o&&(a.forEach(t=>{t.selected=!1}),a[o].selected=!0),this.tabs=a,this.showHint&&this.dismissHint();const n=new UIEvent("tabChanged",{view:window,bubbles:!0,cancelable:!0});this.dispatchEvent(n)}firstUpdated(){super.firstUpdated()}maybeShowHint(){this._hintChecked||this.tabs.length<=1||this.hintAlreadySeen()||(this._hintChecked=!0,setTimeout(()=>{this.isConnected&&!this.hintAlreadySeen()&&(this.showHint=!0)},700))}updated(){this.setAttribute("data-active-tab",this.value||""),this.maybeShowHint()}onConnected(t){let{name:e}=t;this.onClickItem({target:{value:e}})}onArrowNavigation(t){const{key:e,currentIcon:i}=t.detail,a=this.tabs.findIndex(t=>t.text===i);if(-1===a)return;let o=a;switch(e){case"ArrowUp":case"ArrowLeft":o=a>0?a-1:this.tabs.length-1;break;case"ArrowDown":case"ArrowRight":o=a<this.tabs.length-1?a+1:0;break;default:return}const n=this.tabs[o];n&&(this.onClickItem({target:{value:n.text}}),this.updateComplete.then(()=>{const t=this.shadowRoot.querySelector(`cdtr-editor-tab-item[icon="${n.text}"]`);t&&t.focus()}))}connectedCallback(){super.connectedCallback(),o.Ay.on("editor-tabs",this.onConnected)}disconnectedCallback(){super.disconnectedCallback(),o.Ay.off("editor-tabs",this.onConnected)}renderContent(){switch(this.value){case"animations":return i.e(3553).then(i.bind(i,3553)),a.qy`<cdtr-animations-editor>
+"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[5926],{83545(t,e,n){n.r(e),n.d(e,{EditorTabs:()=>l});var o=n(59929),s=n(36565),i=n(86319),a=n(40648);n.e(7937).then(n.bind(n,67937));const r="cdtr-editor-tabs-hint-seen";class l extends o.WF{constructor(){super(),this.onConnected=this.onConnected.bind(this),this.onArrowNavigation=this.onArrowNavigation.bind(this),this.dismissHint=this.dismissHint.bind(this),this.scheduleSync=this.scheduleSync.bind(this),this.observeContent=this.observeContent.bind(this),this.toggleAllSections=this.toggleAllSections.bind(this),this.tabs=[],this.showHint=!1,this._sectionCount=0,this._allExpanded=!1}sectionElements(){const t=this.shadowRoot?.querySelector('slot[name="content"]');if(!t)return[];const e=[];for(const n of t.assignedElements({flatten:!0})){"CDTR-EDITOR-SECTION"===n.tagName&&e.push(n);for(const t of n.children)"CDTR-EDITOR-SECTION"===t.tagName&&e.push(t)}return e}syncSections(){const t=this.sectionElements();this._sectionCount=t.length,this._allExpanded=t.length>0&&t.every(t=>t.open)}observeContent(){this._contentObserver||(this._contentObserver=new MutationObserver(this.scheduleSync)),this._contentObserver.disconnect();const t=this.shadowRoot?.querySelector('slot[name="content"]');if(t){for(const e of t.assignedElements({flatten:!0}))this._contentObserver.observe(e,{childList:!0});this.scheduleSync()}}scheduleSync(){this._syncPending||(this._syncPending=!0,setTimeout(()=>{this._syncPending=!1,this.isConnected&&this.syncSections()},0))}toggleAllSections(){const t=!this._allExpanded;for(const e of this.sectionElements())e.open=t,(0,a.Q)(e.persistKey,t);this._allExpanded=t}hintAlreadySeen(){try{return"1"===localStorage.getItem(r)}catch(t){return!0}}dismissHint(){this.showHint=!1;try{localStorage.setItem(r,"1")}catch(t){}}onClickItem(t){let{target:e}=t;const n=this.value=e.value,o=[...this.tabs],s=o.findIndex(t=>t.text===n);-1!==s&&(o.forEach(t=>{t.selected=!1}),o[s].selected=!0),this.tabs=o,this.scheduleSync(),this.showHint&&this.dismissHint();const i=new UIEvent("tabChanged",{view:window,bubbles:!0,cancelable:!0});this.dispatchEvent(i)}firstUpdated(){super.firstUpdated()}maybeShowHint(){this._hintChecked||this.tabs.length<=1||this.hintAlreadySeen()||(this._hintChecked=!0,setTimeout(()=>{this.isConnected&&!this.hintAlreadySeen()&&(this.showHint=!0)},700))}updated(){this.setAttribute("data-active-tab",this.value||""),this.maybeShowHint(),this.observeContent()}onConnected(t){let{name:e}=t;this.onClickItem({target:{value:e}})}onArrowNavigation(t){const{key:e,currentIcon:n}=t.detail,o=this.tabs.findIndex(t=>t.text===n);if(-1===o)return;let s=o;switch(e){case"ArrowUp":case"ArrowLeft":s=o>0?o-1:this.tabs.length-1;break;case"ArrowDown":case"ArrowRight":s=o<this.tabs.length-1?o+1:0;break;default:return}const i=this.tabs[s];i&&(this.onClickItem({target:{value:i.text}}),this.updateComplete.then(()=>{const t=this.shadowRoot.querySelector(`cdtr-editor-tab-item[icon="${i.text}"]`);t&&t.focus()}))}connectedCallback(){super.connectedCallback(),s.Ay.on("editor-tabs",this.onConnected),s.Ay.on("update",this.scheduleSync),s.Ay.on("select",this.scheduleSync)}disconnectedCallback(){super.disconnectedCallback(),s.Ay.off("editor-tabs",this.onConnected),s.Ay.off("update",this.scheduleSync),s.Ay.off("select",this.scheduleSync),this._contentObserver?.disconnect()}renderContent(){switch(this.value){case"animations":return n.e(3553).then(n.bind(n,3553)),o.qy`<cdtr-animations-editor>
           <cdtr-block-loader></cdtr-block-loader
-        ></cdtr-animations-editor>`;case"settings":case"setting":return i.e(7654).then(i.bind(i,37654)),a.qy`<cdtr-setting-editor>
+        ></cdtr-animations-editor>`;case"settings":case"setting":return n.e(7654).then(n.bind(n,37654)),o.qy`<cdtr-setting-editor>
           <cdtr-block-loader></cdtr-block-loader
-        ></cdtr-setting-editor>`;default:return a.qy`<slot name="content"></slot>`}}render(){this.tabs.length>0&&!this.tabs.some(t=>t.selected)&&(this.tabs[0].selected=!0,this.value=this.tabs[0].text);const t=this.showHint&&this.tabs.length>1;return a.qy`
-      ${this.tabs.length>1?a.qy`<div
+        ></cdtr-setting-editor>`;default:return o.qy`<slot
+          name="content"
+          @slotchange=${this.observeContent}
+        ></slot>`}}renderToggleAll(){const t=!this._allExpanded,[e,n]=t?["7 8 12 3 17 8","7 16 12 21 17 16"]:["7 3 12 8 17 3","7 21 12 16 17 21"];return o.qy`
+      <button
+        class="toggle-all"
+        @click=${this.toggleAllSections}
+        aria-expanded=${this._allExpanded?"true":"false"}
+      >
+        <lang-text
+          text=${t?"expand_all":"collapse_all"}
+        ></lang-text>
+        <svg
+          width="12"
+          height="12"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <polyline points=${e}></polyline>
+          <polyline points=${n}></polyline>
+        </svg>
+      </button>
+    `}render(){this.tabs.length>0&&!this.tabs.some(t=>t.selected)&&(this.tabs[0].selected=!0,this.value=this.tabs[0].text);const t=this.showHint&&this.tabs.length>1,e=this._sectionCount>=3;return o.qy`
+      ${this.tabs.length>1?o.qy`<div
             class="tabs-row ${t?"hint-active":""}"
             @arrow-navigation=${this.onArrowNavigation}
           >
-            ${this.tabs.map(t=>a.qy`<cdtr-editor-tab-item
+            ${this.tabs.map(t=>o.qy`<cdtr-editor-tab-item
                 tabindex="0"
                 @change=${this.onClickItem}
                 icon=${t.text}
@@ -16,18 +43,21 @@
               ></cdtr-editor-tab-item>`)}
           </div>`:null}
       ${t?this.renderHint():null}
-      <div class="content">${this.renderContent()}</div>
-    `}renderHint(){return a.qy`
+      ${e?o.qy`<div class="toggle-row">${this.renderToggleAll()}</div>`:null}
+      <div class="content">
+        ${this.renderContent()}
+      </div>
+    `}renderHint(){return o.qy`
       <div
         class="tabs-hint"
         role="dialog"
-        aria-label=${n.M.get("lang","tabs_hint_title")||"Tip"}
+        aria-label=${i.M.get("lang","tabs_hint_title")||"Tip"}
       >
         <p class="tabs-hint__title">
-          ${n.M.get("lang","tabs_hint_title")||"Tip: switch between tabs"}
+          ${i.M.get("lang","tabs_hint_title")||"Tip: switch between tabs"}
         </p>
         <p class="tabs-hint__body">
-          ${n.M.get("lang","tabs_hint_body")||"Use these tabs to move between Settings, Animations, Interactions and Style — available for every element, including button links."}
+          ${i.M.get("lang","tabs_hint_body")||"Use these tabs to move between Settings, Animations, Interactions and Style — available for every element, including button links."}
         </p>
         <div class="tabs-hint__actions">
           <button
@@ -35,11 +65,11 @@
             @click=${this.dismissHint}
             autofocus
           >
-            ${n.M.get("lang","got_it")||"Got it"}
+            ${i.M.get("lang","got_it")||"Got it"}
           </button>
         </div>
       </div>
-    `}}r.styles=a.AH`
+    `}}l.styles=o.AH`
     :host {
       height: 100%;
       display: flex;
@@ -86,6 +116,37 @@
       padding-bottom: 60px;
     }
 
+    /* Pinned outside .content so it stays put while the sections scroll. */
+    .toggle-row {
+      flex: 0 0 auto;
+      display: flex;
+      justify-content: flex-end;
+      padding: var(--space-2, 8px) var(--space-4, 16px) var(--space-1, 4px);
+    }
+    .toggle-all {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--space-1, 4px);
+      flex: 0 0 auto;
+      padding: 2px 0;
+      border: none;
+      background: transparent;
+      font-family: inherit;
+      font-size: var(--text-xs, 12px);
+      color: var(--color-text-secondary, #555);
+      cursor: pointer;
+      white-space: nowrap;
+    }
+    .toggle-all:hover {
+      color: var(--color-text, #1a1a1f);
+      text-decoration: underline;
+    }
+    .toggle-all:focus-visible {
+      outline: none;
+      border-radius: 4px;
+      box-shadow: 0 0 0 2px var(--color-primary, #6366f1);
+    }
+
     /* One-time coachmark that points at the tab row. */
     .tabs-row.hint-active {
       position: relative;
@@ -178,4 +239,4 @@
       box-shadow: 0 0 0 2px var(--color-surface, #fff),
         0 0 0 4px var(--color-primary, #6366f1);
     }
-  `,r.properties={tabs:{type:Array},value:{type:String},showHint:{type:Boolean,state:!0}},customElements.define("cdtr-editor-tabs",r)}}]);
+  `,l.properties={tabs:{type:Array},value:{type:String},showHint:{type:Boolean,state:!0},_sectionCount:{type:Number,state:!0},_allExpanded:{type:Boolean,state:!0}},customElements.define("cdtr-editor-tabs",l)}}]);

package/dist/638.creaditor.bundle.js

@@ -46,7 +46,7 @@
     }
     button[aria-pressed="true"] {
       background: var(--surface-1, #fff);
-      color: var(--primary);
+      color: var(--color-primary, #6366f1);
       box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
     }
   `,customElements.define("cdtr-device-picker",i)}}]);

package/dist/7209.creaditor.bundle.js

@@ -693,7 +693,7 @@
           .multi=${this.multi}
           .folders=${this.folders}
         ></cdtr-gallery-files>
-      </cdtr-drawer>`}}g.styles=r.AH``,g.properties={folders:{type:Array},files:{type:Array},pageCount:{type:Number},prevUrl:{type:String},nextUrl:{type:String},opened:{type:Boolean},multi:{type:Boolean},uploadStatus:{type:Object}},customElements.define("cdtr-gallery",g)},2590(e,t,s){s.r(t),s.d(t,{TitleEditor:()=>o});var r=s(59929),i=s(86319);class o extends r.WF{constructor(){super(),this.text="",this.whiteSpace="pre"}connectedCallback(){super.connectedCallback(),this.style.fontFamily="var(--font-family)",this.bold&&(this.style.fontWeight="bold"),this._onStoreChange=()=>this.requestUpdate(),i.M.connect(["lang","theme"],this._onStoreChange)}disconnectedCallback(){this._onStoreChange&&(i.M.disconnect(this._onStoreChange),this._onStoreChange=null),super.disconnectedCallback()}render(){const e=i.M.get("theme");e&&(this.style.direction=e.direction,this.style.textAlign=this.textAlign||e.textAlign);const t=i.M.get("lang",this.text);return r.qy`<slot
+      </cdtr-drawer>`}}g.styles=r.AH``,g.properties={folders:{type:Array},files:{type:Array},pageCount:{type:Number},prevUrl:{type:String},nextUrl:{type:String},opened:{type:Boolean},multi:{type:Boolean},uploadStatus:{type:Object}},customElements.define("cdtr-gallery",g)},2590(e,t,s){s.r(t),s.d(t,{TitleEditor:()=>o});var r=s(59929),i=s(86319);class o extends r.WF{constructor(){super(),this.text="",this.whiteSpace="pre"}connectedCallback(){super.connectedCallback(),this.style.fontFamily="var(--font-sans)",this.bold&&(this.style.fontWeight="bold"),this._onStoreChange=()=>this.requestUpdate(),i.M.connect(["lang","theme"],this._onStoreChange)}disconnectedCallback(){this._onStoreChange&&(i.M.disconnect(this._onStoreChange),this._onStoreChange=null),super.disconnectedCallback()}render(){const e=i.M.get("theme");e&&(this.style.direction=e.direction,this.style.textAlign=this.textAlign||e.textAlign);const t=i.M.get("lang",this.text);return r.qy`<slot
       ><span
         style="-webkit-font-smoothing: antialiased;display:inline-block;direction:var(--direction-locale);text-align:var(--text-align-locale);white-space:${this.whiteSpace}"
         >${t||this.text}</span

package/dist/752.creaditor.bundle.js

@@ -1,9 +1,9 @@
-"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[752],{40752(e,t,i){i.r(t),i.d(t,{EditorContainer:()=>a});var n=i(59929);class a extends n.WF{constructor(){super(),this.pt="10px",this.isAnimate=!0}render(){return n.qy`<div
+"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[752],{40752(e,t,i){i.r(t),i.d(t,{EditorContainer:()=>n});var a=i(59929);class n extends a.WF{constructor(){super(),this.pt="6px",this.isAnimate=!0}render(){return a.qy`<div
       style="padding-top:${this.pt}"
       class="container ${this.isAnimate?"animate":""}"
     >
       <slot></slot>
-    </div> `}}a.styles=n.AH`
+    </div> `}}n.styles=a.AH`
     //create fade in animation
     :host{
       direction: var(--direction-locale);
@@ -16,7 +16,9 @@
       display: block;
       width: 100%;
       min-height: 20px;
-      padding-bottom: var(--space-2, 8px);
+      /* Every sidebar control is wrapped in one of these, so this pad is the
+         panel's vertical rhythm. */
+      padding-bottom: var(--space-1, 4px);
       box-sizing: border-box;
     }
     .animate {
@@ -33,4 +35,4 @@
         transform: translateX(0%);
       }
     }
-  `,a.properties={pt:{type:String},isAnimate:{type:Boolean}},customElements.define("cdtr-editor-container",a)}}]);
+  `,n.properties={pt:{type:String},isAnimate:{type:Boolean}},customElements.define("cdtr-editor-container",n)}}]);

package/dist/7654.creaditor.bundle.js

@@ -1,4 +1,4 @@
-"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[7654],{12258(e,t,o){o.d(t,{A:()=>a});var s=o(59929),r=o(40648);class n extends s.WF{constructor(){super(),this.label="",this.open=!0,this.persistKey=""}toggle(){this.open=!this.open,(0,r.Q)(this.persistKey,this.open)}render(){return s.qy`
+"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[7654],{12258(e,t,o){o.d(t,{A:()=>a});var n=o(59929),r=o(40648);class s extends n.WF{constructor(){super(),this.label="",this.open=!0,this.persistKey=""}toggle(){this.open=!this.open,(0,r.Q)(this.persistKey,this.open)}render(){return n.qy`
       <div class="section">
         <div class="header" @click=${this.toggle}>
           <span class="title"><lang-text text="${this.label}"></lang-text></span>
@@ -12,14 +12,26 @@
           </div>
         </div>
       </div>
-    `}}n.styles=s.AH`
+    `}}s.styles=n.AH`
     :host {
       display: block;
       direction: var(--direction-locale, ltr);
       --editor-container-inline-padding: 0;
     }
     .section {
-      border-bottom: 1px solid var(--color-border);
+      position: relative;
+    }
+    /* Inset to the content gutter, not full-bleed: an edge-to-edge rule reads
+       as a table border. */
+    .section::after {
+      content: "";
+      display: block;
+      height: 1px;
+      margin: 0 var(--space-4, 16px);
+      background: var(--color-border-subtle, rgba(0, 0, 0, 0.06));
+    }
+    :host(:last-of-type) .section::after {
+      display: none;
     }
     .header {
       display: flex;
@@ -28,16 +40,26 @@
       padding: var(--space-3) var(--space-4);
       cursor: pointer;
       user-select: none;
+      /* Keeps the group name visible while its controls scroll past. */
+      position: sticky;
+      top: 0;
+      z-index: 1;
+      background: var(--color-bg, #fff);
+    }
+    .header:hover {
+      background: var(--color-bg-subtle, #fafbfc);
     }
     .title {
+      /* Larger and lighter than the labels inside it, not bolder — the labels
+         are what you act on. */
       font-size: var(--text-md);
-      font-weight: 600;
+      font-weight: 500;
       color: var(--color-text);
-      letter-spacing: 0.01em;
+      letter-spacing: 0;
     }
     .chevron {
-      width: 16px;
-      height: 16px;
+      width: 14px;
+      height: 14px;
       transition: transform var(--duration-normal) var(--ease-default), color var(--duration-fast) var(--ease-default);
       color: var(--color-text-faint);
     }
@@ -58,9 +80,10 @@
       opacity: 1;
     }
     .content-inner {
-      padding: var(--space-3) var(--space-4) var(--space-3) var(--space-4);
+      /* Light on top: the controls inside bring their own leading pad. */
+      padding: var(--space-1) var(--space-4) var(--space-3) var(--space-4);
     }
-  `,n.properties={label:{type:String,reflect:!0,attribute:"data-label"},open:{type:Boolean,reflect:!0},persistKey:{type:String}},customElements.define("cdtr-editor-section",n);const a=(e,t)=>s.qy`
+  `,s.properties={label:{type:String,reflect:!0,attribute:"data-label"},open:{type:Boolean,reflect:!0},persistKey:{type:String}},customElements.define("cdtr-editor-section",s);const a=(e,t)=>n.qy`
   <cdtr-editor-section
     .label=${e.label}
     .open=${!1!==e.open}
@@ -68,11 +91,11 @@
   >
     ${t}
   </cdtr-editor-section>
-`},37654(e,t,o){o.r(t),o.d(t,{SettingEditor:()=>c});var s=o(59929),r=o(86319),n=o(36565);o(12258);const a=s.JW`<path d="M4 16H20V5H4V16ZM13 18V20H17V22H7V20H11V18H2.99C2.44 18 2 17.55 2 17V4.01C2 3.45 2.46 3 2.99 3H21.01C21.56 3 22 3.45 22 4.01V17C22 17.55 21.54 18 21.01 18H13Z"/>`,i=s.JW`<path d="M4 6H20V18H4V6ZM2 5C2 4.45 2.45 4 3 4H21C21.55 4 22 4.45 22 5V19C22 19.55 21.55 20 21 20H3C2.45 20 2 19.55 2 19V5ZM17 11C17 11.55 17.45 12 18 12C18.55 12 19 11.55 19 11C19 10.45 18.55 10 18 10C17.45 10 17 10.45 17 11Z"/>`,l=s.JW`<path d="M7 4V20H17V4H7ZM6 2H18C18.55 2 19 2.45 19 3V21C19 21.55 18.55 22 18 22H6C5.45 22 5 21.55 5 21V3C5 2.45 5.45 2 6 2ZM12 17C12.55 17 13 17.45 13 18C13 18.55 12.55 19 12 19C11.45 19 11 18.55 11 18C11 17.45 11.45 17 12 17Z"/>`;class c extends s.WF{constructor(){super(),this.onInspect=this.onInspect.bind(this),this.name="",this.element_ID=" ",this.cmds={onToggleDisplayMode:(e,t)=>{n.Ay.store().execCommand(`show_on_${e}`,t),this[`show_on_${e}`]=t},onChangeElementID(e){n.Ay.store().execCommand("element_ID",e.target.value)},onChangeName(e){n.Ay.store().execCommand("name",e.target.value)}}}onInspect(){if(n.Ay.components.length>0){const e=n.Ay.components[0].props;this.show_on_desktop=!!e.show_on_desktop,this.show_on_tablet=!!e.show_on_tablet,this.show_on_mobile=!!e.show_on_mobile,this.name=e.name||"",this.element_ID=e.element_ID||""}}connectedCallback(){super.connectedCallback(),n.Ay.on("select",this.onInspect),n.Ay.on("update",this.onInspect),this.onInspect()}disconnectedCallback(){super.disconnectedCallback(),n.Ay.off("select",this.onInspect),n.Ay.off("update",this.onInspect)}renderCheck(){return s.qy`<svg class="check" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+`},37654(e,t,o){o.r(t),o.d(t,{SettingEditor:()=>c});var n=o(59929),r=o(86319),s=o(36565);o(12258);const a=n.JW`<path d="M4 16H20V5H4V16ZM13 18V20H17V22H7V20H11V18H2.99C2.44 18 2 17.55 2 17V4.01C2 3.45 2.46 3 2.99 3H21.01C21.56 3 22 3.45 22 4.01V17C22 17.55 21.54 18 21.01 18H13Z"/>`,i=n.JW`<path d="M4 6H20V18H4V6ZM2 5C2 4.45 2.45 4 3 4H21C21.55 4 22 4.45 22 5V19C22 19.55 21.55 20 21 20H3C2.45 20 2 19.55 2 19V5ZM17 11C17 11.55 17.45 12 18 12C18.55 12 19 11.55 19 11C19 10.45 18.55 10 18 10C17.45 10 17 10.45 17 11Z"/>`,l=n.JW`<path d="M7 4V20H17V4H7ZM6 2H18C18.55 2 19 2.45 19 3V21C19 21.55 18.55 22 18 22H6C5.45 22 5 21.55 5 21V3C5 2.45 5.45 2 6 2ZM12 17C12.55 17 13 17.45 13 18C13 18.55 12.55 19 12 19C11.45 19 11 18.55 11 18C11 17.45 11.45 17 12 17Z"/>`;class c extends n.WF{constructor(){super(),this.onInspect=this.onInspect.bind(this),this.name="",this.element_ID=" ",this.cmds={onToggleDisplayMode:(e,t)=>{s.Ay.store().execCommand(`show_on_${e}`,t),this[`show_on_${e}`]=t},onChangeElementID(e){s.Ay.store().execCommand("element_ID",e.target.value)},onChangeName(e){s.Ay.store().execCommand("name",e.target.value)}}}onInspect(){if(s.Ay.components.length>0){const e=s.Ay.components[0].props;this.show_on_desktop=!!e.show_on_desktop,this.show_on_tablet=!!e.show_on_tablet,this.show_on_mobile=!!e.show_on_mobile,this.name=e.name||"",this.element_ID=e.element_ID||""}}connectedCallback(){super.connectedCallback(),s.Ay.on("select",this.onInspect),s.Ay.on("update",this.onInspect),this.onInspect()}disconnectedCallback(){super.disconnectedCallback(),s.Ay.off("select",this.onInspect),s.Ay.off("update",this.onInspect)}renderCheck(){return n.qy`<svg class="check" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <circle cx="12" cy="12" r="12" fill="currentColor"></circle>
       <path d="M7 12.5l3.2 3.2L17 9" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"></path>
-    </svg>`}render(){const e=n.Ay.getSelectedComponent();if(!e||0===e.length)return s.qy``;const t="block"===e[0].type,o="web"===r.M.get("config","channel")||t;return s.qy`
-      ${o?s.qy`<cdtr-editor-section label="display_mode" .open=${!0}>
+    </svg>`}render(){const e=s.Ay.getSelectedComponent();if(!e||0===e.length)return n.qy``;const t="block"===e[0].type,o="web"===r.M.get("config","channel")||t;return n.qy`
+      ${o?n.qy`<cdtr-editor-section label="display_mode" .open=${!0}>
               <span class="device-toggle-title"><lang-text text="show_element_on"></lang-text></span>
               <div class="device-toggle-row">
                 <div
@@ -100,7 +123,7 @@
                   <lang-text text="mobile"></lang-text>
                 </div>
               </div>
-          </cdtr-editor-section>`:s.qy``}
+          </cdtr-editor-section>`:n.qy``}
       <cdtr-editor-section label="properties" .open=${!0}>
           <cdtr-row mt="1">
             <cdtr-title><lang-text text="name"></lang-text></cdtr-title>
@@ -127,7 +150,7 @@
             ></cdtr-input>
           </cdtr-row>
       </cdtr-editor-section>
-    `}}c.properties={name:{},element_ID:{},show_on_desktop:{},show_on_tablet:{},show_on_mobile:{}},c.styles=s.AH`
+    `}}c.properties={name:{},element_ID:{},show_on_desktop:{},show_on_tablet:{},show_on_mobile:{}},c.styles=n.AH`
     :host {
       direction: var(--direction-locale);
     }

package/dist/7997.creaditor.bundle.js

@@ -168,6 +168,6 @@
     }
     h1 {
       font-family: Arial;
-      color: var(--primary);
+      color: var(--color-primary, #6366f1);
     }
   `,customElements.define("cdtr-404",r)}}]);

package/dist/8443.creaditor.bundle.js

@@ -64,7 +64,7 @@
       min-width: auto;
     }
     .keyboard-focus {
-      outline: 1px solid var(--primary);
+      outline: 1px solid var(--color-primary, #6366f1);
     }
     .selected {
       background: #f1f3f5;