@creaditor/newsletter-starterkit 1.0.56 → 1.0.57

package/dist/567.creaditor.bundle.js

@@ -1,439 +1,544 @@
-"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[567],{70567(t,e,n){n.r(e),n.d(e,{TextPromptEditor:()=>s});var r,a,o=n(86959),i=n(59929);let s=(0,n(49410).EM)("cdtr-text-prompt-editor")(((a=class extends i.WF{constructor(){super(),this.prompt=localStorage.getItem("textPromptEditor_prompt")||"",this.generatedText="",this.isLoading=!1,this.context="",this.businessType=localStorage.getItem("textPromptEditor_businessType")||"",this.businessName=localStorage.getItem("textPromptEditor_businessName")||"",this.includeContext="true"===localStorage.getItem("textPromptEditor_includeContext")||!1,this.url=localStorage.getItem("textPromptEditor_url")||"",this.detectCurrentElementType()}connectedCallback(){super.connectedCallback(),setTimeout(()=>{this.detectCurrentElementType()},100)}detectCurrentElementType(){try{const t=window.getSelection();if(t&&t.rangeCount>0){const e=t.getRangeAt(0).commonAncestorContainer;let n=e.nodeType===Node.TEXT_NODE?e.parentElement:e;for(;n&&n!==document.body;){if(n.tagName&&/^h[1-6]$/i.test(n.tagName)){const t=n.parentElement,e=Array.from(t?.children||[]),r=e.some(t=>t!==n&&/^h[1-6]$/i.test(t.tagName)),a=e.some(t=>t!==n&&/^p$|^div$/i.test(t.tagName));return!a||r&&!a?(this.contentType="title",void console.log("TextPromptEditor: Detected standalone heading from DOM")):(this.contentType="paragraph",void console.log("TextPromptEditor: Detected heading within paragraph structure"))}this.contentType="paragraph",n=n.parentElement}}this.contentType||(this.contentType="paragraph",console.log("TextPromptEditor: Defaulting to paragraph"))}catch(t){console.warn("Error detecting current element type:",t),this.contentType||(this.contentType="paragraph")}}handleIncludeContextChange(t){this.includeContext=!t.target.checked,localStorage.setItem("textPromptEditor_includeContext",this.includeContext)}handleContentTypeChange(t){this.contentType=t,this.dispatchEvent(new CustomEvent("content-type-changed",{detail:{contentType:this.contentType},bubbles:!0,composed:!0}))}handlePromptChange(t){this.prompt=t.target.value,localStorage.setItem("textPromptEditor_prompt",this.prompt);["כתוב כותרת","כתוב תמונה","כתבי כותרת","write heading"].some(t=>this.prompt.startsWith(t))&&this.handleContentTypeChange("title")}handleBusinessTypeChange(t){this.businessType=t.target.value,localStorage.setItem("textPromptEditor_businessType",this.businessType)}handleBusinessNameChange(t){this.businessName=t.target.value,localStorage.setItem("textPromptEditor_businessName",this.businessName)}handleUrlChange(t){this.url=t.target.value,localStorage.setItem("textPromptEditor_url",this.url)}async handleGenerate(){this.isLoading=!0,this.generatedText="";try{if("title"===this.contentType){Array.from(document.querySelectorAll(".text-component")).map(t=>t.textContent).join("\n")}this.context.length>1500&&(this.context=this.context.slice(0,1500));const t=o.XW.agent_url,e=await fetch(t+"prompt/text",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({prompt:this.prompt,context:this.includeContext?this.context:"",businessType:this.businessType,businessName:this.businessName,contentType:this.contentType,url:this.url,options:{maxTokens:1e3,temperature:0,model:"gpt-3.5-turbo"}})});if(!e.ok)throw new Error("Failed to generate text");const n=e.body.getReader(),r=new TextDecoder;let a="";for(;;){const{done:t,value:e}=await n.read();if(t){this.dispatchEvent(new CustomEvent("text-generation-complete",{detail:{text:this.generatedText},bubbles:!0,composed:!0}));break}a+=r.decode(e,{stream:!0});const o=a.split("\n\n");for(let t=0;t<o.length-1;t++){const e=o[t];if(e.startsWith("data: "))try{const t=e.slice(6),n=JSON.parse(t);if("start"===n.metadata?.type){this.generatedText="",this.dispatchEvent(new CustomEvent("text-generation-start",{detail:{model:n.metadata.model},bubbles:!0,composed:!0}));continue}n.text&&(this.generatedText+=n.text,this.dispatchEvent(new CustomEvent("text-generation-chunk",{detail:{chunk:n.text,fullText:this.generatedText},bubbles:!0,composed:!0}))),"complete"===n.status&&(this.generatedText=this.generatedText.replace(/^"|"$/g,""),this.dispatchEvent(new CustomEvent("text-generation-complete",{detail:{text:this.generatedText},bubbles:!0,composed:!0})))}catch(t){console.error("Error parsing JSON:",t)}}a=o[o.length-1]}}catch(t){console.error("Error generating text:",t),this.dispatchEvent(new CustomEvent("text-generation-error",{detail:{error:t.message},bubbles:!0,composed:!0}))}finally{this.isLoading=!1}}render(){const t=this.contentType;return i.qy`
+"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[567],{70567(e,t,s){s.r(t),s.d(t,{TextPromptEditor:()=>b});var n,i,o=s(86959),a=s(86319),r=s(59929),l=s(49410);const c="/api/text-color",p=()=>{try{const e=a.M.get("app","_id");return"string"==typeof e&&e.length>0?e:null}catch(e){return null}},d="#111827",h="#ffffff",g=e=>{const t=/^#?([0-9a-f]{6})$/i.exec((e||"").trim());if(!t)return null;const s=parseInt(t[1],16);return{r:s>>16&255,g:s>>8&255,b:255&s}},m=e=>{const t=e/255;return t<=.03928?t/12.92:Math.pow((t+.055)/1.055,2.4)},u=e=>{let{r:t,g:s,b:n}=e;return.2126*m(t)+.7152*m(s)+.0722*m(n)},f=(e,t)=>{const s=g(e),n=g(t);if(!s||!n)return 1;const i=u(s),o=u(n);return(Math.max(i,o)+.05)/(Math.min(i,o)+.05)},_=(e,t,s)=>e&&f(e,t)>=s?e:f(d,t)>=f(h,t)?d:h,x={en:{title:"Edit with AI",placeholder:"Tell me how to change this text…",send:"Send",thinking:"Working…",keepLength:"Keep length",editingSelection:"Selection",editingElement:"Whole text",error:"Something went wrong. Please try again.",empty:"Ask me to improve, shorten, or rewrite this text.",roleHeading:"Headings",roleBody:"Body",colorize:"Colorize",colorizing:"Picking colors…",colorizeDone:"Applied on-brand colors.",actions:{improve:"Improve",shorten:"Shorten",lengthen:"Lengthen",grammar:"Fix grammar",tone:"Warmer tone"},prompts:{improve:"Improve this text — make it clearer and more compelling. Keep the meaning.",shorten:"Make this shorter and more concise, without losing the key point.",lengthen:"Expand this with a little more detail and flow.",grammar:"Fix any spelling and grammar mistakes. Keep the wording and meaning.",tone:"Make the tone warmer and friendlier."}},he:{title:"עריכה עם AI",placeholder:"כתבו לי איך לשנות את הטקסט…",send:"שליחה",thinking:"עובד…",keepLength:"שמור על האורך",editingSelection:"קטע מסומן",editingElement:"כל הטקסט",error:"משהו השתבש. נסו שוב.",empty:"בקשו ממני לשפר, לקצר או לנסח מחדש את הטקסט.",roleHeading:"כותרות",roleBody:"טקסט",colorize:"צביעה חכמה",colorizing:"בוחר צבעים…",colorizeDone:"הוחלו צבעים בהתאמה למותג.",actions:{improve:"שיפור",shorten:"קיצור",lengthen:"הרחבה",grammar:"תיקון שגיאות",tone:"טון חם יותר"},prompts:{improve:"שפר את הטקסט הזה — שיהיה ברור ומשכנע יותר, בלי לשנות את המשמעות.",shorten:"קצר את הטקסט הזה ותהפוך אותו לתמציתי יותר, בלי לאבד את העיקר.",lengthen:"הרחב את הטקסט הזה עם עוד קצת פירוט וזרימה.",grammar:"תקן שגיאות כתיב ודקדוק. שמור על הניסוח והמשמעות.",tone:"הפוך את הטון לחם וידידותי יותר."}}};let b=(0,l.EM)("cdtr-text-prompt-editor")(((i=class extends r.WF{constructor(){super(),this.commands=null,this.elementId=null,this._messages=[],this._input="",this._busy=!1,this._colorizing=!1,this._scope="element",this._error="",this._keepLength=!1,this._lang="he",this._selPreview="",this._streamingIdx=null}connectedCallback(){super.connectedCallback();const e=a.M.get("config","language"),t=this.commands&&this.commands.getText&&this.commands.getText()||"";this._lang="he"===e||"en"===e?e:t?/[\u0590-\u05FF]/.test(t||"")?"he":"en":"rtl"===document?.documentElement?.dir?"he":"en",this._scope=this._currentScope(),this._selPreview=this._readSelPreview(),this._onSelChange=()=>{const e=this._currentScope();e!==this._scope&&(this._scope=e);const t=this._readSelPreview();t!==this._selPreview&&(this._selPreview=t)},this.commands?.onSelectionChange&&(this._unsubSel=this.commands.onSelectionChange(this._onSelChange)),document.addEventListener("selectionchange",this._onSelChange),setTimeout(()=>{const e=this.renderRoot?.querySelector(".composer-input");e&&e.focus()},50),this._hydrate()}async _hydrate(){const e=p();if(!e||!this.elementId)return;const t=await this._resolveToken(!1);if(!t)return;const s=`${o.XW.studio_url}/api/datastore/sessions/by-doc?doc_id=${encodeURIComponent(e)}&surface=text-element&element_id=${encodeURIComponent(this.elementId)}`;try{const e=await fetch(s,{method:"GET",headers:{Accept:"application/json",Authorization:`Bearer ${t}`}});if(!e.ok)return;const n=await e.json(),i=Array.isArray(n?.messages)?n.messages:[];if(0===i.length)return;if(this._messages.length>0||this._busy)return;this._messages=i.filter(e=>e&&("user"===e.role||"assistant"===e.role)).map(e=>({role:e.role,content:e.content})).filter(e=>"string"==typeof e.content&&e.content.length>0)}catch(e){}}disconnectedCallback(){super.disconnectedCallback(),this._unsubSel&&(this._unsubSel(),this._unsubSel=null),this._onSelChange&&(document.removeEventListener("selectionchange",this._onSelChange),this._onSelChange=null)}get t(){const e=x[this._lang]||x.en,t=e=>{const t=a.M.get("lang",e);return"string"==typeof t&&t?t:void 0};return{title:t("text_ai_title")??e.title,placeholder:t("text_ai_placeholder")??e.placeholder,send:t("text_ai_send")??e.send,thinking:t("text_ai_thinking")??e.thinking,keepLength:t("text_ai_keep_length")??e.keepLength,editingSelection:t("text_ai_scope_selection")??e.editingSelection,editingElement:t("text_ai_scope_element")??e.editingElement,error:t("text_ai_error")??e.error,empty:t("text_ai_empty")??e.empty,roleHeading:t("text_ai_role_heading")??e.roleHeading,roleBody:t("text_ai_role_body")??e.roleBody,colorize:t("text_ai_action_colorize")??e.colorize,colorizing:t("text_ai_colorizing")??e.colorizing,colorizeDone:t("text_ai_colorize_done")??e.colorizeDone,actions:{improve:t("text_ai_action_improve")??e.actions.improve,shorten:t("text_ai_action_shorten")??e.actions.shorten,lengthen:t("text_ai_action_lengthen")??e.actions.lengthen,grammar:t("text_ai_action_grammar")??e.actions.grammar,tone:t("text_ai_action_tone")??e.actions.tone},prompts:{improve:t("text_ai_prompt_improve")??e.prompts.improve,shorten:t("text_ai_prompt_shorten")??e.prompts.shorten,lengthen:t("text_ai_prompt_lengthen")??e.prompts.lengthen,grammar:t("text_ai_prompt_grammar")??e.prompts.grammar,tone:t("text_ai_prompt_tone")??e.prompts.tone}}}_currentScope(){const e=this.commands;return e&&e.hasSelection&&e.hasSelection()?"selection":"element"}_readSelPreview(){const e=this.commands;if(!e||!e.hasSelection||!e.hasSelection())return"";const t=e.getSelectionText&&e.getSelectionText()||"";return this._truncateMiddle(t.replace(/\s+/g," ").trim(),96)}_truncateMiddle(e,t){if(e.length<=t)return e;const s=Math.ceil(.6*(t-1)),n=t-1-s;return`${e.slice(0,s)}…${e.slice(e.length-n)}`}_dismissSelection(){const e=this.commands,t=e&&e.getSelectionRange&&e.getSelectionRange();t&&e.setSelectionRange&&e.setSelectionRange(t.to,t.to),this._scope="element",this._selPreview=""}_onInput(e){this._input=e.target.value}_onKeydown(e){"Enter"!==e.key||e.shiftKey||(e.preventDefault(),this._send(this._input))}_quickAction(e){this._send(this.t.prompts[e])}_toggleKeepLength(e){this._keepLength=!!e.target.checked}async _send(e){const t=(e||"").trim();if(!t||this._busy||!this.commands)return;const s=this._currentScope();this._scope=s;const n="selection"===s?this.commands.getSelectionHTML?.()??this.commands.getSelectionText():this.commands.getHTML?.()??this.commands.getText(),i="heading"===(this.commands.getBlockType?.()||{}).type?"title":"paragraph";this._messages=[...this._messages,{role:"user",content:t}],this._input="",this._error="",this._busy=!0;const o=this._messages.filter(e=>"user"===e.role||"assistant"===e.role).map(e=>({role:e.role,content:(e.content||"").slice(0,8e3)})).filter(e=>e.content.length>0),a=p(),r={messages:o,text:(n||"").slice(0,4e4),scope:s,format:"html",contentType:i,keepLength:this._keepLength,language:this._lang,...a?{doc_id:a}:{},...a&&this.elementId?{element_id:this.elementId}:{}};try{await this._runStream(r,s)}catch(e){console.error("[text-chat] turn failed:",e),this._error=this.t.error,this._messages=[...this._messages,{role:"error",content:this.t.error}]}finally{this._busy=!1,this._streamingIdx=null,this._scope=this._currentScope(),this._selPreview=this._readSelPreview()}}async _resolveToken(e){const t=a.M.get("resolveStudioToken");if("function"!=typeof t)return console.warn("[text-chat] no resolveStudioToken on store; request will likely 401."),null;try{return await t({forceRefresh:!!e})}catch(e){return console.warn("[text-chat] token resolution failed:",e),null}}async _postTo(e,t,s,n){const i=await this._resolveToken(s),a={"Content-Type":"application/json",Accept:n||"application/json"};return i&&(a.Authorization=`Bearer ${i}`),fetch(o.XW.studio_url+e,{method:"POST",headers:a,body:JSON.stringify(t)})}async _post(e,t){return this._postTo("/api/text-chat",e,t,"text/event-stream, application/json")}_gatherPalette(){const e=new Set,t=(s,n)=>{if(!(n>5||null==s))return"string"==typeof s?(t=>{const s=/^#?([0-9a-f]{6})$/i.exec((t||"").trim());s&&e.add(`#${s[1].toLowerCase()}`)})(s):Array.isArray(s)?s.forEach(e=>t(e,n+1)):"object"==typeof s?Object.values(s).forEach(e=>t(e,n+1)):void 0};try{t(a.M.get("colorPalletes"),0)}catch(e){}return Array.from(e).slice(0,48)}async _postColor(e){let t=await this._postTo(c,e,!1);401===t.status&&(t=await this._postTo(c,e,!0));let s=null;try{s=await t.json()}catch(e){}if(!t.ok||!s||!1===s.ok)throw new Error(s&&s.reason||`HTTP ${t.status}`);return s}async _colorize(){if(this._busy||this._colorizing||!this.commands)return;const e=this.commands,t=e.getBlocks&&e.getBlocks()||[];if(!t.length)return;const s=e=>"heading"===e.type?"heading":"body",n=Array.from(new Set(t.map(s))),i=e.getBackgroundColor&&e.getBackgroundColor()||h,o=this._gatherPalette(),a=t.filter(e=>"heading"===s(e)).map(e=>e.text).join(" ").slice(0,500),r=t.filter(e=>"body"===s(e)).map(e=>e.text).join(" ").slice(0,500);this._messages=[...this._messages,{role:"user",content:`🎨 ${this.t.colorize}`}],this._error="",this._colorizing=!0,this._busy=!0;try{const l=await this._postColor({roles:n,background:i,palette:o,...a?{headingText:a}:{},...r?{bodyText:r}:{},language:this._lang}),c=l.heading?_(l.heading,i,3):null,p=l.body?_(l.body,i,4.5):null;t.forEach(t=>{const n="heading"===s(t)?c:p;n&&e.setColorRange&&e.setColorRange(t.from,t.to,n)});const d=[];c&&d.push({label:this.t.roleHeading,color:c}),p&&d.push({label:this.t.roleBody,color:p}),this._messages=[...this._messages,{role:"assistant",content:l.rationale||this.t.colorizeDone,swatches:d}]}catch(e){console.error("[text-color] colorize failed:",e),this._error=this.t.error,this._messages=[...this._messages,{role:"error",content:this.t.error}]}finally{this._colorizing=!1,this._busy=!1}}async _runStream(e,t){let s=await this._post(e,!1);if(401===s.status&&(s=await this._post(e,!0)),!s.ok){let e=`HTTP ${s.status}`;try{const t=await s.json();t&&t.reason&&(e=t.reason)}catch{}throw new Error(e)}const n=this._messages.length;this._messages=[...this._messages,{role:"assistant",content:""}],this._streamingIdx=n;let i="";await this._consumeSse(s.body,(e,t)=>{if("text"===e&&t&&"string"==typeof t.delta)i+=t.delta,this._updateAssistant(n,(e=>{const t=document.createElement("div");return t.innerHTML=e||"",(t.textContent||"").replace(/^[#>\-\s]+/gm,"").replace(/\*\*?|__?|`|~~/g,"").replace(/\|/g," ").replace(/\n{2,}/g,"\n").trim()})(i));else if("error"===e)throw new Error(t&&t.reason||"stream error")}),i.trim()&&("element"===t?(this.commands.selectAll(),this.commands.insertContentHtml(i)):this.commands.insertInlineMarkdown?this.commands.insertInlineMarkdown(i):this.commands.insertContent(i))}_updateAssistant(e,t){const s=this._messages.slice();s[e]&&(s[e]={role:"assistant",content:t}),this._messages=s}async _consumeSse(e,t){const s=e.getReader(),n=new TextDecoder;let i="";try{for(;;){const{done:e,value:o}=await s.read();if(e)break;let a;for(i+=n.decode(o,{stream:!0});-1!==(a=i.indexOf("\n\n"));){const e=i.slice(0,a);i=i.slice(a+2);let s,n="message",o="";for(const t of e.split("\n"))t.startsWith("event:")?n=t.slice(6).trim():t.startsWith("data:")&&(o+=(o?"\n":"")+t.slice(5).replace(/^ /,""));if(o){try{s=JSON.parse(o)}catch{continue}t(n,s)}}}}finally{try{s.releaseLock()}catch{}}}render(){const e=this.t,t="he"===this._lang,s=this._messages.length>0||this._busy,n=!this._busy&&this._input.trim().length>0;return r.qy`
       <cdtr-editor-container>
-        <div class="editor-container">
-          <div class="prompt-section">
-            <div class="prompt-header">
-              <div class="prompt-icon">✍️</div>
-              <label class="prompt-label" for="prompt-input">
-                <lang-text text="prompt_editor_title"></lang-text>
-              </label>
-            </div>
-
-            <cdtr-input
-              id="business-name-input"
-              label="Business Name"
-              .value=${this.businessName}
-              @input=${this.handleBusinessNameChange}
-              placeholder="Enter_your_business_name"
-            ></cdtr-input>
-
-            <cdtr-input
-              id="business-type-input"
-              label="Business Type"
-              .value=${this.businessType}
-              @input=${this.handleBusinessTypeChange}
-              placeholder="Enter_your_business_type"
-            ></cdtr-input>
-
-            <cdtr-input
-              id="url-input"
-              label="URL"
-              .value=${this.url}
-              @input=${this.handleUrlChange}
-              placeholder="Enter_the_URL_of_the_page"
-            ></cdtr-input>
-
-            <cdtr-textarea
-              autofocus=${!0}
-              id="prompt-input"
-              class="prompt-input"
-              placeholder=""
-              .value=${this.prompt}
-              @input=${this.handlePromptChange}
-            ></cdtr-textarea>
-
-            <cdtr-dropdown .value=${t}>
-              <cdtr-dropdown-button slot="trigger">
-                <lang-text text="${t||"paragraph"}"></lang-text>
-              </cdtr-dropdown-button>
-              <div slot="content">
-                <cdtr-dropdown-item
-                  @click=${()=>this.handleContentTypeChange("title")}
-                >
-                  <lang-text text="title"></lang-text>
-                </cdtr-dropdown-item>
-                <cdtr-dropdown-item
-                  @click=${()=>this.handleContentTypeChange("paragraph")}
+        <div class="ai" dir=${t?"rtl":"ltr"}>
+          <header class="ai-head">
+            <span class="brand">
+              <span class="spark">✨</span>
+              <span class="brand-title">${e.title}</span>
+            </span>
+            <span class="scope" data-scope=${this._scope}>
+              ${"selection"===this._scope?e.editingSelection:e.editingElement}
+            </span>
+          </header>
+
+          <div class="quick">
+            ${["improve","shorten","lengthen","grammar","tone"].map(t=>r.qy`
+                <button
+                  class="chip"
+                  ?disabled=${this._busy}
+                  @click=${()=>this._quickAction(t)}
                 >
-                  <lang-text text="paragraph"></lang-text>
-                </cdtr-dropdown-item>
-              </div>
-            </cdtr-dropdown>
-            <cdtr-row justify="space-between">
-              <cdtr-col>
-                <span class="prompt-context">
-                  <lang-text text="prompt_editor_context"></lang-text>
-                </span>
-              </cdtr-col>
-              <cdtr-col sm="2">
-                <cdtr-checkbox
-                  .checked=${this.includeContext}
-                  @change=${this.handleIncludeContextChange}
-                ></cdtr-checkbox>
-              </cdtr-col>
-            </cdtr-row>
-            <paper-button
-              fullWidth
-              class="generate-button"
-              ?disabled=${this.isLoading||!this.prompt}
-              @click=${this.handleGenerate}
+                  ${e.actions[t]}
+                </button>
+              `)}
+            <button
+              class="chip chip--color"
+              ?disabled=${this._busy}
+              @click=${()=>this._colorize()}
+              title=${e.colorize}
             >
-              ${this.isLoading?i.qy`
-                    <div class="loading-spinner"></div>
-                    <lang-text text="creating_magic"></lang-text>
-                  `:i.qy` <lang-text text="generate_content"></lang-text> `}
-            </paper-button>
+              <span class="chip-swatch"></span>
+              ${this._colorizing?e.colorizing:e.colorize}
+            </button>
           </div>
 
-          ${this.generatedText?i.qy`
-                <div class="result-section">
-                  <div class="result-content">${this.generatedText}</div>
-                </div>
-              `:""}
+          <label class="keeplen">
+            <input
+              type="checkbox"
+              .checked=${this._keepLength}
+              ?disabled=${this._busy}
+              @change=${this._toggleKeepLength}
+            />
+            <span>${e.keepLength}</span>
+          </label>
+
+          ${s?r.qy`<div class="log">
+                ${this._messages.map((e,t)=>{const s="assistant"===e.role&&t===this._streamingIdx,n=s&&!e.content;return r.qy`
+                    <div class="msg ${e.role}">
+                      <div
+                        class="bubble ${s?"streaming":""} ${n?"thinking":""}"
+                      >
+                        ${n?r.qy`<span class="dot"></span><span class="dot"></span
+                              ><span class="dot"></span>`:r.qy`${e.content}${e.swatches&&e.swatches.length?r.qy`<span class="swatches">
+                                  ${e.swatches.map(e=>r.qy`<span
+                                      class="swatch"
+                                      title=${e.label}
+                                    >
+                                      <span
+                                        class="swatch-dot"
+                                        style="background:${e.color}"
+                                      ></span>
+                                      <span class="swatch-label"
+                                        >${e.label}</span
+                                      >
+                                    </span>`)}
+                                </span>`:""}`}
+                      </div>
+                    </div>
+                  `})}
+                ${this._busy&&null===this._streamingIdx?r.qy`<div class="msg assistant">
+                      <div class="bubble thinking">
+                        <span class="dot"></span><span class="dot"></span
+                        ><span class="dot"></span>
+                      </div>
+                    </div>`:""}
+              </div>`:r.qy`<p class="hint">${e.empty}</p>`}
+
+          ${"selection"===this._scope&&this._selPreview?r.qy`<div class="selpill" title=${this._selPreview}>
+                <span class="selpill-label">${e.editingSelection}</span>
+                <span class="selpill-text">"${this._selPreview}"</span>
+                <button
+                  class="selpill-x"
+                  title=${e.editingElement}
+                  aria-label=${e.editingElement}
+                  ?disabled=${this._busy}
+                  @click=${this._dismissSelection}
+                >
+                  ✕
+                </button>
+              </div>`:""}
+
+          <div class="composer">
+            <textarea
+              class="composer-input"
+              rows="1"
+              .value=${this._input}
+              placeholder=${e.placeholder}
+              ?disabled=${this._busy}
+              @input=${this._onInput}
+              @keydown=${this._onKeydown}
+            ></textarea>
+            <button
+              class="send"
+              title=${e.send}
+              aria-label=${e.send}
+              ?disabled=${!n}
+              @click=${()=>this._send(this._input)}
+            >
+              <svg
+                class=${t?"flip":""}
+                viewBox="0 0 24 24"
+                width="18"
+                height="18"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path d="M22 2 11 13" />
+                <path d="M22 2 15 22 11 13 2 9z" />
+              </svg>
+            </button>
+          </div>
         </div>
       </cdtr-editor-container>
-    `}}).properties={prompt:{type:String},generatedText:{type:String},isLoading:{type:Boolean},context:{type:String},includeContext:{type:Boolean},businessType:{type:String},businessName:{type:String},contentType:{type:String},url:{type:String}},a.styles=i.AH`
-    :host {
-      --primary: #7c3aed;
-      --primary-light: #a78bfa;
-      --primary-dark: #5b21b6;
-      --accent: #f472b6;
-      --accent-light: #f9a8d4;
-      --accent-dark: #db2777;
-      --surface: #f8fafc;
-      --surface-dark: #f1f5f9;
-      --text-primary: #0f172a;
-      --text-secondary: #334155;
-      --gradient-primary: linear-gradient(
-        135deg,
-        var(--primary) 0%,
-        var(--accent) 100%
-      );
-      --gradient-accent: linear-gradient(
-        135deg,
-        var(--accent) 0%,
-        var(--primary) 100%
-      );
-      --gradient-surface: linear-gradient(
-        135deg,
-        var(--surface) 0%,
-        var(--surface-dark) 100%
-      );
-      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
-      --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
-        0 2px 4px -1px rgba(0, 0, 0, 0.06);
-      --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
-        0 4px 6px -2px rgba(0, 0, 0, 0.05);
-      --shadow-glow: 0 0 20px rgba(124, 58, 237, 0.3),
-        0 0 40px rgba(244, 114, 182, 0.2);
-    }
-
-    * {
+    `}}).properties={commands:{attribute:!1},elementId:{attribute:!1},_messages:{state:!0},_input:{state:!0},_busy:{state:!0},_colorizing:{state:!0},_scope:{state:!0},_error:{state:!0},_keepLength:{state:!0},_selPreview:{state:!0},_streamingIdx:{state:!0},_lang:{state:!0}},i.styles=r.AH`
+    *,
+    *::before,
+    *::after {
       box-sizing: border-box;
-      margin: 0;
-      padding: 0;
     }
-
     :host {
       display: block;
+      font-family: inherit;
+      --accent: #7c3aed;
+      --accent-2: #a855f7;
+      --ink: #1f2937;
+      --muted: #6b7280;
+      --line: #ececf1;
+      --surface: #f6f6f9;
+    }
+    .ai {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
       width: 100%;
-      margin: 0;
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
-        Ubuntu, Cantarell, sans-serif;
-      background: var(--gradient-surface);
-      min-height: 100vh;
-      position: relative;
-      overflow: hidden;
+      min-width: 0;
+      padding: 2px;
+      color: var(--ink);
     }
 
-    :host::before {
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: radial-gradient(
-          circle at 0% 0%,
-          rgba(124, 58, 237, 0.1) 0%,
-          transparent 50%
-        ),
-        radial-gradient(
-          circle at 100% 100%,
-          rgba(244, 114, 182, 0.1) 0%,
-          transparent 50%
-        );
-      pointer-events: none;
-      animation: gradientShift 15s ease infinite;
+    /* Header */
+    .ai-head {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+      min-width: 0;
     }
-
-    @keyframes gradientShift {
-      0% {
-        background-position: 0% 0%;
-      }
-      50% {
-        background-position: 100% 100%;
-      }
-      100% {
-        background-position: 0% 0%;
-      }
+    .brand {
+      display: inline-flex;
+      align-items: center;
+      gap: 7px;
+      min-width: 0;
     }
-
-    .editor-container {
-      display: flex;
-      flex-direction: column;
-      gap: 1.5rem;
-      padding: 1.5rem;
-      position: relative;
+    .spark {
+      font-size: 15px;
+      line-height: 1;
+    }
+    .brand-title {
+      font-weight: 700;
+      font-size: 14px;
+      letter-spacing: -0.01em;
+      white-space: nowrap;
       overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .scope {
+      flex: none;
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--accent);
+      background: #f3ecff;
+      border-radius: 999px;
+      padding: 3px 9px;
+      white-space: nowrap;
+    }
+    .scope[data-scope="selection"] {
+      color: #b45309;
+      background: #fdf1dc;
     }
 
-    .prompt-section {
+    /* Quick actions */
+    .quick {
       display: flex;
-      flex-direction: column;
-      gap: 1rem;
-      position: relative;
+      flex-wrap: wrap;
+      gap: 6px;
+    }
+    .chip {
+      border: 1px solid var(--line);
+      background: #fff;
+      color: #374151;
+      border-radius: 8px;
+      padding: 6px 11px;
+      font: inherit;
+      font-size: 12px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: border-color 0.12s ease, color 0.12s ease,
+        background 0.12s ease;
+    }
+    .chip:hover:not(:disabled) {
+      border-color: var(--accent-2);
+      color: var(--accent);
+      background: #faf6ff;
+    }
+    .chip:active:not(:disabled) {
+      transform: translateY(0.5px);
+    }
+    .chip:disabled {
+      opacity: 0.45;
+      cursor: default;
     }
 
-    .prompt-header {
-      display: flex;
+    /* Colorize chip — accented so it reads as a distinct "smart color" action */
+    .chip--color {
+      display: inline-flex;
       align-items: center;
-      justify-content: space-between;
-      gap: 0.75rem;
-      margin-bottom: 0.5rem;
+      gap: 6px;
+      border-color: transparent;
+      color: #fff;
+      background: linear-gradient(135deg, var(--accent), var(--accent-2));
+    }
+    .chip--color:hover:not(:disabled) {
+      color: #fff;
+      background: linear-gradient(135deg, var(--accent-2), var(--accent));
+      filter: brightness(1.03);
+    }
+    .chip-swatch {
+      width: 11px;
+      height: 11px;
+      border-radius: 3px;
+      background: conic-gradient(
+        from 0deg,
+        #f87171,
+        #fbbf24,
+        #34d399,
+        #60a5fa,
+        #a855f7,
+        #f87171
+      );
+      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
     }
 
-    .prompt-icon {
-      width: 40px;
-      height: 40px;
-      background: var(--gradient-primary);
-      border-radius: 12px;
+    /* Applied-color swatches shown under a colorize result bubble */
+    .swatches {
       display: flex;
+      flex-wrap: wrap;
+      gap: 6px 12px;
+      margin-top: 7px;
+    }
+    .swatch {
+      display: inline-flex;
       align-items: center;
-      justify-content: center;
-      color: white;
-      font-weight: bold;
-      position: relative;
-      transform-origin: center;
-      animation: iconFloat 3s ease-in-out infinite;
+      gap: 5px;
+      font-size: 11px;
+      color: var(--muted);
     }
-
-    @keyframes iconFloat {
-      0%,
-      100% {
-        transform: translateY(0) rotate(0deg);
-      }
-      50% {
-        transform: translateY(-5px) rotate(5deg);
-      }
+    .swatch-dot {
+      width: 13px;
+      height: 13px;
+      border-radius: 4px;
+      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
     }
 
-    .prompt-icon::after {
-      content: "";
-      position: absolute;
-      inset: -2px;
-      background: var(--gradient-primary);
-      border-radius: 14px;
-      z-index: -1;
-      opacity: 0.5;
-      filter: blur(8px);
-      animation: iconGlow 3s ease-in-out infinite;
+    /* Keep-length toggle */
+    .keeplen {
+      display: inline-flex;
+      align-items: center;
+      gap: 7px;
+      font-size: 12px;
+      color: var(--muted);
+      cursor: pointer;
+      user-select: none;
+      align-self: flex-start;
+    }
+    .keeplen input {
+      width: 15px;
+      height: 15px;
+      accent-color: var(--accent);
+      cursor: pointer;
+      margin: 0;
     }
 
-    @keyframes iconGlow {
-      0%,
-      100% {
-        opacity: 0.5;
-        filter: blur(8px);
-      }
-      50% {
-        opacity: 0.8;
-        filter: blur(12px);
-      }
+    /* Hint (empty state) */
+    .hint {
+      margin: 0;
+      font-size: 12.5px;
+      line-height: 1.5;
+      color: #9aa1ad;
     }
 
-    .prompt-label {
-      font-size: 1.25rem;
-      font-weight: 600;
-      color: var(--text-primary);
-      letter-spacing: -0.02em;
+    /* Message log */
+    .log {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      max-height: 240px;
+      overflow-y: auto;
+      padding: 2px 1px;
+      scrollbar-width: thin;
+    }
+    .msg {
       display: flex;
+    }
+    .msg.user {
+      justify-content: flex-end;
+    }
+    .msg.assistant,
+    .msg.error {
+      justify-content: flex-start;
+    }
+    .bubble {
+      max-width: 88%;
+      padding: 8px 11px;
+      border-radius: 13px;
+      font-size: 13px;
+      line-height: 1.45;
+      white-space: pre-wrap;
+      overflow-wrap: anywhere;
+    }
+    .msg.user .bubble {
+      background: linear-gradient(135deg, var(--accent), var(--accent-2));
+      color: #fff;
+      border-end-end-radius: 4px;
+    }
+    .msg.assistant .bubble {
+      background: var(--surface);
+      color: var(--ink);
+      border-end-start-radius: 4px;
+    }
+    .msg.error .bubble {
+      background: #fef2f2;
+      color: #b91c1c;
+      border: 1px solid #fecaca;
+    }
+    .bubble.thinking {
+      display: inline-flex;
       align-items: center;
-      gap: 0.75rem;
+      gap: 4px;
+      padding: 11px;
     }
-
-    .prompt-label::after {
-      content: "AI";
-      font-size: 0.875rem;
-      background: var(--gradient-primary);
-      color: white;
-      padding: 0.25rem 0.75rem;
-      border-radius: 6px;
-      font-weight: 500;
-      animation: badgeFloat 3s ease-in-out infinite;
+    .dot {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: var(--accent-2);
+      display: inline-block;
+      animation: blink 1.2s infinite both;
     }
-
-    @keyframes badgeFloat {
+    .dot:nth-child(2) {
+      animation-delay: 0.15s;
+    }
+    .dot:nth-child(3) {
+      animation-delay: 0.3s;
+    }
+    @keyframes blink {
       0%,
+      80%,
       100% {
+        opacity: 0.25;
         transform: translateY(0);
       }
-      50% {
-        transform: translateY(-2px);
+      40% {
+        opacity: 1;
+        transform: translateY(-1px);
       }
     }
 
-    .generate-button {
-      width: 100%;
-      align-self: flex-end;
-      padding: 0.875rem 1.75rem;
-      background: var(--gradient-primary);
-      color: white;
-      border: none;
-      border-radius: 10px;
-      font-size: 1rem;
-      font-weight: 600;
-      cursor: pointer;
-      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-      display: flex;
-      align-items: center;
-      gap: 0.75rem;
+    /* Streaming shimmer FX — a soft light sweeps across the bubble while the
+       model types, plus a gentle purple glow. Text stays fully readable. */
+    .msg.assistant .bubble.streaming {
       position: relative;
       overflow: hidden;
-      box-shadow: var(--shadow-md);
+      box-shadow: 0 0 0 1px #ece0ff, 0 4px 16px -6px rgba(124, 58, 237, 0.4);
+      animation: bubbleGlow 1.8s ease-in-out infinite;
     }
-
-    .generate-button::before {
+    .msg.assistant .bubble.streaming::after {
       content: "";
       position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
+      inset: 0;
       background: linear-gradient(
-        135deg,
-        rgba(255, 255, 255, 0.2) 0%,
-        rgba(255, 255, 255, 0) 100%
+        105deg,
+        transparent 20%,
+        rgba(168, 85, 247, 0.22) 50%,
+        transparent 80%
       );
-      opacity: 0;
-      transition: opacity 0.3s ease;
+      transform: translateX(-120%);
+      animation: sweep 1.5s ease-in-out infinite;
+      pointer-events: none;
     }
-
-    .generate-button:hover::before {
-      opacity: 1;
+    @keyframes sweep {
+      to {
+        transform: translateX(120%);
+      }
     }
-
-    .generate-button:hover {
-      transform: translateY(-2px);
-      box-shadow: var(--shadow-glow);
-      background: var(--gradient-accent);
+    @keyframes bubbleGlow {
+      0%,
+      100% {
+        box-shadow: 0 0 0 1px #ece0ff, 0 3px 12px -6px rgba(124, 58, 237, 0.3);
+      }
+      50% {
+        box-shadow: 0 0 0 1px #e3d0ff, 0 6px 20px -6px rgba(168, 85, 247, 0.55);
+      }
     }
 
-    .generate-button:active {
-      transform: translateY(0);
+    /* Selection context pill (what a "Selection" edit will target) */
+    .selpill {
+      display: flex;
+      align-items: center;
+      gap: 7px;
+      min-width: 0;
+      padding: 6px 8px 6px 11px;
+      border: 1px solid #f0e4d3;
+      background: linear-gradient(90deg, #fdf6ea, #fef1dc);
+      border-radius: 10px;
+      font-size: 12px;
+      animation: pillIn 0.18s ease;
     }
-
-    .generate-button:disabled {
-      background: var(--gradient-surface);
-      cursor: not-allowed;
-      transform: none;
-      box-shadow: none;
+    .selpill-label {
+      flex: none;
+      font-weight: 700;
+      color: #b45309;
+      white-space: nowrap;
     }
-
-    .result-section {
-      margin-top: 0.5rem;
-      padding: 1.5rem;
-      background: rgba(255, 255, 255, 0.8);
-      border-radius: 12px;
-      min-height: 160px;
-      opacity: 0;
-      transform: translateY(10px);
-      animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-      position: relative;
+    .selpill-text {
+      flex: 1 1 auto;
+      min-width: 0;
+      color: #7c5a2a;
+      white-space: nowrap;
       overflow: hidden;
-      backdrop-filter: blur(8px);
-      box-shadow: var(--shadow-md);
-    }
-
-    .result-section::before {
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: 3px;
-      background: var(--gradient-primary);
-      opacity: 0.8;
+      text-overflow: ellipsis;
+      font-style: italic;
     }
-
-    .result-content {
-      white-space: pre-wrap;
-      line-height: 1.7;
-      color: var(--text-primary);
-      font-size: 1rem;
-    }
-
-    .loading-spinner {
+    .selpill-x {
+      flex: none;
       width: 20px;
       height: 20px;
-      border: 2px solid rgba(255, 255, 255, 0.3);
-      border-top: 2px solid white;
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border: none;
+      border-radius: 6px;
+      background: transparent;
+      color: #b08a55;
+      font-size: 12px;
+      line-height: 1;
+      cursor: pointer;
+      transition: background 0.12s ease, color 0.12s ease;
     }
-
-    @keyframes spin {
-      0% {
-        transform: rotate(0deg);
-      }
-      100% {
-        transform: rotate(360deg);
-      }
+    .selpill-x:hover:not(:disabled) {
+      background: #f6e6cd;
+      color: #92400e;
     }
-
-    @keyframes fadeIn {
+    .selpill-x:disabled {
+      opacity: 0.4;
+      cursor: default;
+    }
+    @keyframes pillIn {
       from {
         opacity: 0;
-        transform: translateY(10px);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0);
+        transform: translateY(3px);
       }
     }
 
-    /* Decorative elements */
-    .editor-container::after {
-      content: "";
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      width: 200%;
-      height: 200%;
-      background: radial-gradient(
-        circle at center,
-        rgba(124, 58, 237, 0.1) 0%,
-        transparent 50%
-      );
-      transform: translate(-50%, -50%);
-      pointer-events: none;
-      animation: pulse 4s ease-in-out infinite;
+    /* Composer */
+    .composer {
+      display: flex;
+      align-items: flex-end;
+      gap: 8px;
+      border: 1px solid var(--line);
+      border-radius: 14px;
+      padding: 6px 6px 6px 10px;
+      background: #fff;
+      transition: border-color 0.12s ease, box-shadow 0.12s ease;
     }
-
-    .prompt-context {
+    .composer:focus-within {
+      border-color: var(--accent-2);
+      box-shadow: 0 0 0 3px #f1e9ff;
+    }
+    .composer-input {
+      flex: 1 1 auto;
+      min-width: 0;
+      resize: none;
+      border: none;
+      outline: none;
+      background: transparent;
+      padding: 6px 2px;
+      font: inherit;
       font-size: 13px;
-      color: var(--text-secondary);
+      line-height: 1.4;
+      color: var(--ink);
+      max-height: 96px;
+    }
+    .composer-input::placeholder {
+      color: #aab0bb;
+    }
+    .send {
+      flex: none;
+      width: 34px;
+      height: 34px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border: none;
+      border-radius: 10px;
+      background: linear-gradient(135deg, var(--accent), var(--accent-2));
+      color: #fff;
+      cursor: pointer;
+      transition: opacity 0.12s ease, transform 0.12s ease;
+    }
+    .send:hover:not(:disabled) {
+      transform: translateY(-1px);
+    }
+    .send:disabled {
+      opacity: 0.4;
+      cursor: default;
+    }
+    .send svg.flip {
+      transform: scaleX(-1);
     }
 
-    @keyframes pulse {
-      0%,
-      100% {
-        transform: translate(-50%, -50%) scale(1);
-        opacity: 0.5;
-      }
-      50% {
-        transform: translate(-50%, -50%) scale(1.1);
-        opacity: 0.3;
+    @media (prefers-reduced-motion: reduce) {
+      .dot,
+      .send,
+      .chip,
+      .selpill,
+      .msg.assistant .bubble.streaming,
+      .msg.assistant .bubble.streaming::after {
+        animation: none;
+        transition: none;
       }
     }
-  `,r=a))||r}}]);
+  `,n=i))||n}}]);