@creaditor/web-starterkit 1.0.11 → 1.0.13

package/dist/5909.creaditor.bundle.js

@@ -0,0 +1,644 @@
+"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`
+  <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.join(",")}))},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=(t.keywords||"").split(",").map(e=>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`
+      <button
+        class="magic"
+        type="button"
+        title=${this.t("seo_generate_tooltip","Generate with AI")}
+        aria-label=${this.t("seo_generate_tooltip","Generate with AI")}
+        ?disabled=${this.loading||!!this.generatingField}
+        @click=${()=>this.generateField(e)}
+      >
+        ${t?s.qy`<span class="mini-spinner"></span>`:d}
+      </button>
+    `}render(){const e=this.direction;return s.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>
+        <p class="subheading">${this.t("lets_set_some_seo","Let's set some SEO")}</p>
+
+        <div class="field">
+          <div class="label-row">
+            <label>${this.t("seo_title_label","Page name for search engines and social networks (SEO)")}</label>
+            ${this.magicButton("title")}
+          </div>
+          <input
+            type="text"
+            maxlength=${100}
+            .value=${this.title}
+            placeholder=${this.t("seo_title_placeholder","Page name as it will appear in search engines")}
+            @input=${e=>this.title=e.target.value}
+          />
+          <div class="counter">${this.title.length}/${100}</div>
+        </div>
+
+        <div class="field">
+          <div class="label-row">
+            <label>${this.t("seo_description_label","Page description for search engine and social network promotion (SEO)")}</label>
+            ${this.magicButton("description")}
+          </div>
+          <textarea
+            maxlength=${255}
+            .value=${this.description}
+            placeholder=${this.t("seo_description_placeholder","This description will appear below the site title in search engines")}
+            @input=${e=>this.description=e.target.value}
+          ></textarea>
+          <div class="counter">${this.description.length}/${255}</div>
+        </div>
+
+        <div class="field">
+          <div class="label-row">
+            <label>${this.t("seo_keywords_label","Keywords")}</label>
+            ${this.magicButton("keywords")}
+          </div>
+          <div
+            class="chips ${this.keywordsFocused?"focused":""}"
+            @click=${e=>{const t=e.currentTarget.querySelector("input");t?.focus()}}
+          >
+            ${this.keywordList.map((e,t)=>s.qy`
+                <span class="chip">
+                  ${e}
+                  <button
+                    type="button"
+                    aria-label="remove"
+                    @click=${e=>{e.stopPropagation(),this.removeKeyword(t)}}
+                  >
+                    ✕
+                  </button>
+                </span>
+              `)}
+            <input
+              type="text"
+              .value=${this.keywordDraft}
+              placeholder=${this.keywordList.length?"":this.t("seo_keywords_placeholder","For example: gift,woman,gift for woman")}
+              @input=${e=>this.keywordDraft=e.target.value}
+              @keydown=${this.onKeywordKeydown}
+              @focus=${()=>this.keywordsFocused=!0}
+              @blur=${()=>{this.keywordsFocused=!1,this.commitDraftKeyword()}}
+            />
+          </div>
+        </div>
+
+        <div class="actions">
+          <button class="publish" ?disabled=${this.loading} @click=${this.onPublish}>
+            ${this.loading?s.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`
+    :host {
+      position: fixed;
+      inset: 0;
+      z-index: var(--z-blocking, 2147483646);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-family: var(--font-family, Arial, Helvetica, sans-serif);
+    }
+    .backdrop {
+      position: absolute;
+      inset: 0;
+      background: rgba(26, 26, 46, 0.45);
+      animation: fade 0.2s ease forwards;
+    }
+    @keyframes fade {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+    .card {
+      position: relative;
+      background: #fff;
+      border-radius: 14px;
+      box-shadow: 0 24px 60px rgba(26, 26, 46, 0.28);
+      width: 560px;
+      max-width: 92vw;
+      max-height: 90vh;
+      overflow-y: auto;
+      padding: 34px 40px 30px;
+      box-sizing: border-box;
+      opacity: 0;
+      transform: scale(0.96);
+      animation: pop 0.28s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
+    }
+    @keyframes pop {
+      to { opacity: 1; transform: scale(1); }
+    }
+    .heading {
+      font-size: 26px;
+      font-weight: 700;
+      color: #1a1a2e;
+      margin: 0;
+    }
+    .subheading {
+      font-size: 17px;
+      font-weight: 600;
+      color: #8a8f9c;
+      margin: 10px 0 0;
+    }
+    .field {
+      margin-top: 26px;
+    }
+    label {
+      display: block;
+      font-size: 14px;
+      color: #3a3a4a;
+      margin-bottom: 8px;
+    }
+    .label-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+      margin-bottom: 8px;
+    }
+    .label-row label {
+      margin-bottom: 0;
+    }
+    .magic {
+      flex: none;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 30px;
+      height: 30px;
+      border: 1px solid #d5d7de;
+      border-radius: 8px;
+      background: #fff;
+      color: var(--primary, #6c5ce7);
+      cursor: pointer;
+      line-height: 1;
+      transition: border-color 0.15s ease, background 0.15s ease;
+    }
+    .magic svg {
+      display: block;
+    }
+    .magic:hover:not(:disabled) {
+      border-color: var(--primary, #6c5ce7);
+      background: color-mix(in srgb, var(--primary, #6c5ce7) 10%, #fff);
+    }
+    .magic:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    .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-radius: 50%;
+      animation: spin 0.8s linear infinite;
+    }
+    input,
+    textarea {
+      width: 100%;
+      box-sizing: border-box;
+      border: 1px solid #d5d7de;
+      border-radius: 8px;
+      padding: 12px 14px;
+      font-size: 15px;
+      font-family: inherit;
+      color: #1a1a2e;
+      outline: none;
+      transition: border-color 0.15s ease, box-shadow 0.15s ease;
+    }
+    input:focus,
+    textarea:focus {
+      border-color: var(--primary, #6c5ce7);
+      box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #6c5ce7) 25%, transparent);
+    }
+    textarea {
+      resize: vertical;
+      min-height: 84px;
+    }
+    input::placeholder,
+    textarea::placeholder {
+      color: #a7abb5;
+    }
+    .counter {
+      margin-top: 6px;
+      font-size: 12px;
+      color: #a7abb5;
+    }
+    .chips {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 8px;
+      border: 1px solid #d5d7de;
+      border-radius: 8px;
+      padding: 8px 10px;
+      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);
+    }
+    .chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      background: color-mix(in srgb, var(--primary, #6c5ce7) 12%, #fff);
+      color: var(--primary, #6c5ce7);
+      border-radius: 6px;
+      padding: 5px 8px 5px 10px;
+      font-size: 14px;
+      line-height: 1;
+      white-space: nowrap;
+    }
+    .chip button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 16px;
+      height: 16px;
+      border: none;
+      background: transparent;
+      color: inherit;
+      font-size: 15px;
+      line-height: 1;
+      cursor: pointer;
+      padding: 0;
+      opacity: 0.7;
+    }
+    .chip button:hover {
+      opacity: 1;
+    }
+    .chips input {
+      flex: 1;
+      min-width: 120px;
+      border: none;
+      padding: 4px;
+      box-shadow: none;
+    }
+    .chips input:focus {
+      border: none;
+      box-shadow: none;
+    }
+    .actions {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-top: 34px;
+    }
+    .publish {
+      background: var(--primary, #6c5ce7);
+      color: #fff;
+      border: none;
+      border-radius: 8px;
+      padding: 14px 34px;
+      font-size: 16px;
+      font-weight: 600;
+      font-family: inherit;
+      cursor: pointer;
+      transition: filter 0.15s ease, opacity 0.15s ease;
+    }
+    .publish:hover {
+      filter: brightness(1.05);
+    }
+    .publish:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+    .cancel {
+      background: none;
+      border: none;
+      color: #4a4a5a;
+      font-size: 16px;
+      font-family: inherit;
+      cursor: pointer;
+      padding: 8px;
+    }
+    .cancel:hover {
+      color: #1a1a2e;
+    }
+    .spinner {
+      display: inline-block;
+      width: 18px;
+      height: 18px;
+      border: 2px solid rgba(255, 255, 255, 0.5);
+      border-top-color: #fff;
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+      vertical-align: middle;
+    }
+    @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`
+      <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>
+          <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}
+      </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`
+      <canvas @click=${this.dismiss}></canvas>
+      <div class="card" dir=${e}>
+        <div class="check">
+          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M5 13l4 4L19 7" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
+          </svg>
+        </div>
+        <p class="title">${this.message||this.t("published","Published!")}</p>
+        <p class="sub">${this.sub||this.t("publishedSub","Your site is live.")}</p>
+
+        ${this.renderPreview()}
+
+        ${this.url?s.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>
+                  ${this.t("view_site","View site")}
+                </a>
+                <button class="copy" type="button" @click=${this.copyLink}>
+                  ${t}
+                  ${this.copied?this.t("link_copied","Link copied"):this.t("copy_link","Copy link")}
+                </button>
+              </div>
+            `:s.s6}
+      </div>
+    `}}u.styles=s.AH`
+    :host {
+      position: fixed;
+      inset: 0;
+      z-index: var(--z-blocking, 2147483646);
+      pointer-events: none;
+      display: block;
+      font-family: var(--font-family, Arial, Helvetica, sans-serif);
+    }
+    canvas {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+    }
+    .card {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) scale(0.9);
+      background: #ffffff;
+      border-radius: 20px;
+      box-shadow: 0 30px 80px rgba(26, 26, 46, 0.32);
+      padding: 36px 40px 32px;
+      text-align: center;
+      pointer-events: auto;
+      opacity: 0;
+      animation: pop 0.44s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
+      width: 460px;
+      max-width: 90vw;
+      box-sizing: border-box;
+    }
+    @keyframes pop {
+      to {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1);
+      }
+    }
+    .check {
+      width: 68px;
+      height: 68px;
+      border-radius: 50%;
+      background: #2ec7a9;
+      margin: 0 auto 18px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 0 0 0 rgba(46, 199, 169, 0.45);
+      animation: ring 1.6s ease-out 0.2s;
+    }
+    @keyframes ring {
+      0% { box-shadow: 0 0 0 0 rgba(46, 199, 169, 0.45); }
+      70% { box-shadow: 0 0 0 18px rgba(46, 199, 169, 0); }
+      100% { box-shadow: 0 0 0 0 rgba(46, 199, 169, 0); }
+    }
+    .check svg {
+      width: 34px;
+      height: 34px;
+    }
+    .title {
+      font-size: 24px;
+      font-weight: 700;
+      color: #1a1a2e;
+      margin: 0;
+    }
+    .sub {
+      font-size: 14px;
+      color: #8a8f9c;
+      margin: 8px 0 0;
+    }
+
+    /* Google-style search-result preview — the payoff for the SEO step. */
+    .preview {
+      margin-top: 22px;
+      border: 1px solid #e6e8ee;
+      border-radius: 12px;
+      padding: 14px 16px;
+      text-align: start;
+      background: #fbfbfd;
+    }
+    .preview-caption {
+      font-size: 11px;
+      font-weight: 600;
+      letter-spacing: 0.02em;
+      text-transform: uppercase;
+      color: #a7abb5;
+      margin: 0 0 10px;
+    }
+    .result-head {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .favicon {
+      flex: none;
+      width: 26px;
+      height: 26px;
+      border-radius: 50%;
+      background: var(--primary, #6c5ce7);
+      color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 13px;
+      font-weight: 700;
+      text-transform: uppercase;
+    }
+    .result-url {
+      min-width: 0;
+    }
+    .result-host {
+      font-size: 13px;
+      color: #1a1a2e;
+      line-height: 1.2;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      /* URLs read left-to-right even in an RTL card. */
+      direction: ltr;
+      text-align: start;
+    }
+    .result-crumb {
+      font-size: 12px;
+      color: #6a7280;
+      line-height: 1.2;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      direction: ltr;
+      text-align: start;
+    }
+    .result-title {
+      margin: 8px 0 0;
+      font-size: 18px;
+      line-height: 1.3;
+      color: #1a56db;
+      font-weight: 500;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
+    }
+    .result-desc {
+      margin: 4px 0 0;
+      font-size: 13px;
+      line-height: 1.5;
+      color: #4d5562;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+
+    .actions {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
+      margin-top: 24px;
+    }
+    .view {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      background: var(--primary, #6c5ce7);
+      color: #fff;
+      text-decoration: none;
+      font-size: 15px;
+      font-weight: 600;
+      padding: 12px 26px;
+      border-radius: 10px;
+      transition: filter 0.15s ease;
+    }
+    .view:hover {
+      filter: brightness(1.06);
+    }
+    .view svg {
+      width: 16px;
+      height: 16px;
+    }
+    .copy {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      background: #fff;
+      color: #4a4a5a;
+      border: 1px solid #d5d7de;
+      font-size: 15px;
+      font-family: inherit;
+      font-weight: 500;
+      padding: 12px 18px;
+      border-radius: 10px;
+      cursor: pointer;
+      transition: border-color 0.15s ease, color 0.15s ease;
+    }
+    .copy:hover {
+      border-color: var(--primary, #6c5ce7);
+      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`
+      <paper-button
+        @click=${this.handleClick}
+        class="next-button"
+        ?disabled=${this.isLocked}
+      >
+        ${this.isLoading?s.qy`
+              <div class="loading-spinner"></div>
+            `:s.qy`
+              <div class="button-content ${this.isLoading?"loading":""}">
+                <lang-text text=${t}></lang-text>
+              </div>
+            `}
+      </paper-button>
+    `}}f.styles=s.AH`
+    :host {
+      display: block;
+    }
+
+    .next-button {
+      background: var(--primary);
+      color: var(--primary-text);
+      fill: var(--primary-text);
+      text-transform: none;
+      color: #fff;
+      height: 52px;
+      border-radius: 0;
+      width: 90px;
+      transform: translateX(-4px);
+      position: relative;
+      overflow: hidden;
+    }
+
+    .next-button:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    .loading-spinner {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 20px;
+      height: 20px;
+      border: 2px solid transparent;
+      border-top: 2px solid #fff;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+
+    @keyframes spin {
+      0% { transform: translate(-50%, -50%) rotate(0deg); }
+      100% { transform: translate(-50%, -50%) rotate(360deg); }
+    }
+
+    .button-content {
+      opacity: 1;
+      transition: opacity 0.3s ease;
+    }
+
+    .button-content.loading {
+      opacity: 0;
+    }
+
+
+  `,f.properties={onNextStep:{type:Function},channel:{type:String},isLoading:{type:Boolean},isLocked:{type:Boolean},lockTimer:{type:Number}},customElements.define("cdtr-next-button",f)}}]);