@creaditor/web-starterkit 1.0.6 → 1.0.7

package/dist/4819.creaditor.bundle.js

@@ -1,14 +1,22 @@
-"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[4819],{84819(t,e,o){o.r(e),o.d(e,{NameAndSubjectPlugin:()=>u});var i=o(59929),s=o(49410);o(78533);function r(){return window.___cdtr_isConsoleLogged||console.log("%cWe run on production, if you want to point to dev server, please add ?dev=1 at the url","color:green"),window.___cdtr_isConsoleLogged=!0,!1}window.___cdtr_isConsoleLogged=window.___cdtr_isConsoleLogged||!1,r(),r(),r(),r();const n=r()?"http://localhost:8000/api/v1/prompt/subject":"https://agent.creaditor.ai/api/v1/prompt/subject",a=r()?"http://localhost:8000/api/v1/prompt/subtitle":"https://agent.creaditor.ai/api/v1/prompt/subtitle";var l=Object.defineProperty,p=(t,e,o,i)=>{for(var s,r=void 0,n=t.length-1;n>=0;n--)(s=t[n])&&(r=s(e,o,r)||r);return r&&l(e,o,r),r};typeof window<"u"&&!window.__polymerElementsLoaded&&(window.__polymerElementsLoaded=!0,(async()=>{try{const t=["paper-dropdown-menu","paper-item","paper-listbox"].filter(t=>customElements.get(t));if(t.length>0)return void console.warn(`Polymer elements already loaded: ${t.join(", ")}. Skipping imports to prevent conflicts.`);if(customElements.get("dom-module"))return void console.warn("dom-module already defined, skipping Polymer element imports to prevent conflicts");await Promise.all([Promise.all([o.e(59),o.e(8876),o.e(5813),o.e(574)]).then(o.bind(o,50574)),o.e(898).then(o.bind(o,90898)),Promise.all([o.e(6216),o.e(7463)]).then(o.bind(o,97463))]),console.log("Polymer elements loaded successfully")}catch(t){console.warn("Failed to load Polymer elements:",t)}})().catch(console.error));const d="cdtr-name-and-subject-plugin",c=class extends i.WF{constructor(){super(...arguments),this.bgColor="#000",this.textColor="#000000",this.headerText="Details",this.nameLabel="Name",this.subjectLabel="Subject",this.subtitleLabel="Subtitle",this.saveButtonText="Save",this.subjectPlaceholder="Enter subject",this.mergeTags=[],this.name="",this.subject="",this.subtitle="",this.save=()=>{},this.isGeneratingSubject=!1,this.isGeneratingSubtitle=!1}getTextDirection(t){return/[\u0590-\u05FF]/.test(t)?"rtl":"ltr"}getPlaceholderStyle(){const t=this.getTextDirection(this.subjectPlaceholder);return`direction: ${t}; text-align: ${"rtl"===t?"right":"left"};`}handleSave(){"string"!=typeof this.subtitle&&(this.subtitle=""),"string"!=typeof this.subject&&(this.subject=""),this.dispatchEvent(new CustomEvent("save",{detail:{name:this.name,subject:this.subject,subtitle:this.subtitle}})),this.save(),setTimeout(()=>{var t,e;null==(e=null==(t=this.shadowRoot)?void 0:t.querySelector("#name-popover"))||e.close()},200)}handleFieldClick(t){this.subject+=t.value,this.requestUpdate()}handleEmojiSelect(t){const e=t.detail.unicode;this.subject=this.subject+e,this.requestUpdate()}open(){var t,e;null==(e=null==(t=this.shadowRoot)?void 0:t.querySelector("#name-popover"))||e.open()}focusInputs(t){var e;this.open();const o=null==(e=this.shadowRoot)?void 0:e.querySelectorAll("input");if(o)if(o.forEach(t=>t.classList.remove("shake")),t){const e=Array.from(o).find(e=>{var o;const i=e.previousElementSibling;return null==(o=null==i?void 0:i.textContent)?void 0:o.toLowerCase().includes(t.toLowerCase())});e&&(e.focus(),e.classList.add("shake"))}else o.forEach(t=>{t.focus(),t.classList.add("shake")})}handleGenerateSubject(){if(this.isGeneratingSubject)return;const t=this.subject||"";this.subject="",this.isGeneratingSubject=!0,this.requestUpdate(),(async t=>{let e="";if(Array.from(document.querySelectorAll(".text-component")).forEach(t=>{e+=`${t.textContent}\n`}),e.length>500){const t=Math.floor(250);e=e.slice(0,t)+e.slice(-t)}try{const o=await fetch(n,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({prompt:"write my subject",context:e})});if(!o.ok)throw new Error(`HTTP error! status: ${o.status}`);if(!o.body)throw new Error("Response body is null");const i=o.body.getReader(),s=new TextDecoder;try{for(;;){const{done:e,value:o}=await i.read();if(e)break;const r=s.decode(o,{stream:!0}).split("data: ");for(const e of r)if(e.trim()&&!e.includes("[DONE]"))try{const o=JSON.parse(e);o.text&&t(o.text)}catch{}}}finally{i.releaseLock()}}catch(t){throw console.error("Error generating subject:",t),t}})(t=>{this.subject+=t,this.requestUpdate()}).catch(()=>{this.subject=t}).finally(()=>{this.isGeneratingSubject=!1,this.requestUpdate()})}handleGenerateSubtitle(){if(this.isGeneratingSubtitle)return;const t=this.subtitle||"";this.subtitle="",this.isGeneratingSubtitle=!0,this.requestUpdate(),(async t=>{let e="";if(Array.from(document.querySelectorAll(".text-component")).forEach(t=>{e+=`${t.textContent}\n`}),e.length>1400){const t=Math.floor(700);e=e.slice(0,t)+e.slice(-t)}try{const o=await fetch(a,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({context:e})});if(!o.ok)throw new Error(`HTTP error! status: ${o.status}`);if(!o.body)throw new Error("Response body is null");const i=o.body.getReader(),s=new TextDecoder;try{for(;;){const{done:e,value:o}=await i.read();if(e)break;const r=s.decode(o,{stream:!0}).split("data: ");for(const e of r)if(e.trim()&&!e.includes("[DONE]"))try{const o=JSON.parse(e);o.text&&t(o.text)}catch{}}}finally{i.releaseLock()}}catch(t){throw console.error("Error generating subtitle:",t),t}})(t=>{this.subtitle+=t,this.requestUpdate()}).catch(()=>{this.subtitle=t}).finally(()=>{this.isGeneratingSubtitle=!1,this.requestUpdate()})}render(){return i.qy`
-      <div class="subject-input">
+"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[4819],{84819(t,e,i){i.r(e),i.d(e,{NameAndSubjectPlugin:()=>p});var o=i(59929),n=i(49410);i(78533);function r(){return window.___cdtr_isConsoleLogged||console.log("%cWe run on production, if you want to point to dev server, please add ?dev=1 at the url","color:green"),window.___cdtr_isConsoleLogged=!0,!1}window.___cdtr_isConsoleLogged=window.___cdtr_isConsoleLogged||!1,r(),r(),r(),r(),r();const s=r()?"http://localhost:8000/api/v1/prompt/subject":"https://agent.creaditor.ai/api/v1/prompt/subject",a=r()?"http://localhost:8000/api/v1/prompt/subtitle":"https://agent.creaditor.ai/api/v1/prompt/subtitle";var l=Object.defineProperty,c=(t,e,i,o)=>{for(var n,r=void 0,s=t.length-1;s>=0;s--)(n=t[s])&&(r=n(e,i,r)||r);return r&&l(e,i,r),r};typeof window<"u"&&!window.__polymerElementsLoaded&&(window.__polymerElementsLoaded=!0,(async()=>{try{const t=["paper-dropdown-menu","paper-item","paper-listbox"].filter(t=>customElements.get(t));if(t.length>0)return void console.warn(`Polymer elements already loaded: ${t.join(", ")}. Skipping imports to prevent conflicts.`);if(customElements.get("dom-module"))return void console.warn("dom-module already defined, skipping Polymer element imports to prevent conflicts");await Promise.all([Promise.all([i.e(59),i.e(8876),i.e(5813),i.e(574)]).then(i.bind(i,50574)),i.e(898).then(i.bind(i,90898)),Promise.all([i.e(6216),i.e(7463)]).then(i.bind(i,97463))]),console.log("Polymer elements loaded successfully")}catch(t){console.warn("Failed to load Polymer elements:",t)}})().catch(console.error));const d="cdtr-name-and-subject-plugin",u=class extends o.WF{constructor(){super(...arguments),this.bgColor="#000",this.textColor="#000000",this.headerText="Details",this.nameLabel="Name",this.subjectLabel="Subject",this.subtitleLabel="Subtitle",this.saveButtonText="Save",this.subjectPlaceholder="Enter subject",this.mergeTags=[],this.name="",this.subject="",this.subtitle="",this.save=()=>{},this.isGeneratingSubject=!1,this.isGeneratingSubtitle=!1}getTextDirection(t){return/[\u0590-\u05FF]/.test(t)?"rtl":"ltr"}getPlaceholderStyle(){const t=this.getTextDirection(this.subjectPlaceholder);return`direction: ${t}; text-align: ${"rtl"===t?"right":"left"};`}handleSave(){"string"!=typeof this.subtitle&&(this.subtitle=""),"string"!=typeof this.subject&&(this.subject=""),this.dispatchEvent(new CustomEvent("save",{detail:{name:this.name,subject:this.subject,subtitle:this.subtitle}})),this.save(),setTimeout(()=>{var t,e;null==(e=null==(t=this.shadowRoot)?void 0:t.querySelector("#name-popover"))||e.close()},200)}handleFieldClick(t){this.subject+=t.value,this.requestUpdate()}handleEmojiSelect(t){const e=t.detail.unicode;this.subject=this.subject+e,this.requestUpdate()}open(){var t,e;null==(e=null==(t=this.shadowRoot)?void 0:t.querySelector("#name-popover"))||e.open()}focusInputs(t){var e;this.open();const i=null==(e=this.shadowRoot)?void 0:e.querySelectorAll("input");if(i)if(i.forEach(t=>t.classList.remove("shake")),t){const e=Array.from(i).find(e=>{var i;const o=e.previousElementSibling;return null==(i=null==o?void 0:o.textContent)?void 0:i.toLowerCase().includes(t.toLowerCase())});e&&(e.focus(),e.classList.add("shake"))}else i.forEach(t=>{t.focus(),t.classList.add("shake")})}handleGenerateSubject(){if(this.isGeneratingSubject)return;const t=this.subject||"";this.subject="",this.isGeneratingSubject=!0,this.requestUpdate(),(async t=>{let e="";if(Array.from(document.querySelectorAll(".text-component")).forEach(t=>{e+=`${t.textContent}\n`}),e.length>500){const t=Math.floor(250);e=e.slice(0,t)+e.slice(-t)}try{const i=await fetch(s,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({prompt:"write my subject",context:e})});if(!i.ok)throw new Error(`HTTP error! status: ${i.status}`);if(!i.body)throw new Error("Response body is null");const o=i.body.getReader(),n=new TextDecoder;try{for(;;){const{done:e,value:i}=await o.read();if(e)break;const r=n.decode(i,{stream:!0}).split("data: ");for(const e of r)if(e.trim()&&!e.includes("[DONE]"))try{const i=JSON.parse(e);i.text&&t(i.text)}catch{}}}finally{o.releaseLock()}}catch(t){throw console.error("Error generating subject:",t),t}})(t=>{this.subject+=t,this.requestUpdate()}).catch(()=>{this.subject=t}).finally(()=>{this.isGeneratingSubject=!1,this.requestUpdate()})}handleGenerateSubtitle(){if(this.isGeneratingSubtitle)return;const t=this.subtitle||"";this.subtitle="",this.isGeneratingSubtitle=!0,this.requestUpdate(),(async t=>{let e="";if(Array.from(document.querySelectorAll(".text-component")).forEach(t=>{e+=`${t.textContent}\n`}),e.length>1400){const t=Math.floor(700);e=e.slice(0,t)+e.slice(-t)}try{const i=await fetch(a,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({context:e})});if(!i.ok)throw new Error(`HTTP error! status: ${i.status}`);if(!i.body)throw new Error("Response body is null");const o=i.body.getReader(),n=new TextDecoder;try{for(;;){const{done:e,value:i}=await o.read();if(e)break;const r=n.decode(i,{stream:!0}).split("data: ");for(const e of r)if(e.trim()&&!e.includes("[DONE]"))try{const i=JSON.parse(e);i.text&&t(i.text)}catch{}}}finally{o.releaseLock()}}catch(t){throw console.error("Error generating subtitle:",t),t}})(t=>{this.subtitle+=t,this.requestUpdate()}).catch(()=>{this.subtitle=t}).finally(()=>{this.isGeneratingSubtitle=!1,this.requestUpdate()})}renderSparkleIcon(){return o.qy`
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 20.25 20.999999"
+        fill="currentColor"
+        aria-hidden="true"
+      >
+        <path
+          d="M 12.316406 0.679688 C 12.160156 0.382812 11.734375 0.382812 11.574219 0.679688 L 11.132812 1.507812 C 11.09375 1.582031 11.035156 1.640625 10.960938 1.679688 L 10.128906 2.117188 C 9.828125 2.277344 9.828125 2.699219 10.128906 2.855469 L 10.960938 3.296875 C 11.035156 3.335938 11.09375 3.394531 11.132812 3.46875 L 11.574219 4.296875 C 11.734375 4.59375 12.160156 4.59375 12.316406 4.296875 L 12.757812 3.46875 C 12.800781 3.394531 12.859375 3.335938 12.933594 3.296875 L 13.765625 2.855469 C 14.0625 2.699219 14.0625 2.277344 13.765625 2.117188 L 12.933594 1.679688 C 12.859375 1.640625 12.800781 1.582031 12.757812 1.507812 Z M 15.167969 16.96875 L 16.875 17.617188 L 16.226562 15.917969 Z M 16.882812 13.496094 L 5.136719 1.816406 C 4.15625 0.839844 2.558594 0.839844 1.574219 1.816406 L 0.984375 2.40625 C 0 3.382812 0 4.96875 0.984375 5.949219 L 12.730469 17.625 C 12.929688 17.824219 13.273438 18.039062 13.542969 18.140625 L 17.152344 19.507812 C 18.167969 19.890625 19.164062 18.902344 18.777344 17.890625 L 17.402344 14.300781 C 17.300781 14.035156 17.085938 13.695312 16.882812 13.496094 Z M 15.316406 14.296875 L 5.730469 4.769531 L 3.953125 6.535156 L 13.535156 16.066406 Z M 3.949219 3 L 4.542969 3.585938 L 2.765625 5.355469 L 2.171875 4.765625 C 1.84375 4.441406 1.84375 3.910156 2.171875 3.585938 L 2.761719 3 C 3.089844 2.671875 3.621094 2.671875 3.949219 3 Z M 4.550781 12.996094 C 4.390625 12.699219 3.964844 12.699219 3.808594 12.996094 L 3 14.503906 C 2.960938 14.578125 2.902344 14.640625 2.828125 14.679688 L 1.308594 15.480469 C 1.011719 15.636719 1.011719 16.058594 1.308594 16.214844 L 2.828125 17.015625 C 2.902344 17.054688 2.960938 17.117188 3 17.191406 L 3.808594 18.699219 C 3.964844 18.996094 4.390625 18.996094 4.550781 18.699219 L 5.355469 17.191406 C 5.394531 17.117188 5.453125 17.054688 5.527344 17.015625 L 7.046875 16.214844 C 7.34375 16.058594 7.34375 15.636719 7.046875 15.480469 L 5.527344 14.679688 C 5.453125 14.640625 5.394531 14.578125 5.355469 14.503906 Z M 17.355469 5.480469 C 17.199219 5.183594 16.773438 5.183594 16.613281 5.480469 L 16.027344 6.582031 C 15.988281 6.65625 15.929688 6.714844 15.855469 6.753906 L 14.746094 7.335938 C 14.449219 7.496094 14.449219 7.917969 14.746094 8.074219 L 15.855469 8.660156 C 15.929688 8.699219 15.988281 8.757812 16.027344 8.832031 L 16.613281 9.933594 C 16.773438 10.230469 17.199219 10.230469 17.355469 9.933594 L 17.945312 8.832031 C 17.984375 8.757812 18.042969 8.699219 18.117188 8.660156 L 19.226562 8.074219 C 19.523438 7.917969 19.523438 7.496094 19.226562 7.335938 L 18.117188 6.753906 C 18.042969 6.714844 17.984375 6.65625 17.945312 6.582031 Z M 17.355469 5.480469 "
+          fill-rule="evenodd"
+        ></path>
+      </svg>
+    `}render(){return o.qy`
+      <div class="field-shell subject-input">
         <div class="subject-input-left">
           <cdtr-popover width="400px">
-            <paper-button
-              style=${`color:${this.textColor}`}
-              size="sm"
-              variant="text"
-              slot="trigger"
-              dir="auto"
-            >
+            <button class="icon-btn" slot="trigger" aria-label="Add emoji">
               <svg
                 width="15"
                 xmlns="http://www.w3.org/2000/svg"
@@ -19,7 +27,7 @@
                   d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM7 12H9C9 13.6569 10.3431 15 12 15C13.6569 15 15 13.6569 15 12H17C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12Z"
                 ></path>
               </svg>
-            </paper-button>
+            </button>
 
             <div slot="content" class="popover-content" dir="auto">
               <emoji-picker
@@ -28,13 +36,11 @@
             </div>
           </cdtr-popover>
 
-          ${this.mergeTags.length>0?i.qy` <cdtr-popover>
-                <paper-button
-                  style=${`color:${this.textColor}`}
-                  size="sm"
-                  variant="text"
+          ${this.mergeTags.length>0?o.qy` <cdtr-popover>
+                <button
+                  class="icon-btn"
                   slot="trigger"
-                  dir="auto"
+                  aria-label="Insert personalization tag"
                 >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -47,12 +53,12 @@
                       d="M20 22H18V20C18 18.3431 16.6569 17 15 17H9C7.34315 17 6 18.3431 6 20V22H4V20C4 17.2386 6.23858 15 9 15H15C17.7614 15 20 17.2386 20 20V22ZM12 13C8.68629 13 6 10.3137 6 7C6 3.68629 8.68629 1 12 1C15.3137 1 18 3.68629 18 7C18 10.3137 15.3137 13 12 13ZM12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z"
                     ></path>
                   </svg>
-                </paper-button>
+                </button>
                 <div slot="content" class="popover-content" dir="auto">
                   <div class="popover-header">
                     <h3 dir="auto">${this.headerText}</h3>
                   </div>
-                  ${this.mergeTags.map(t=>i.qy`
+                  ${this.mergeTags.map(t=>o.qy`
                       <div
                         class="field-item"
                         @click=${()=>this.handleFieldClick(t)}
@@ -64,38 +70,30 @@
                 </div>
               </cdtr-popover>`:""}
         </div>
-        <div class="divider"></div>
         <input
           name="subject"
           type="text"
+          class=${this.isGeneratingSubject?"streaming":""}
           placeholder=${this.subjectPlaceholder}
           .value=${this.subject}
           @change=${this.handleSave}
           @input=${t=>{this.subject=t.target.value,"string"!=typeof this.subtitle&&(this.subtitle=""),0===this.subtitle.trim().length&&(this.subtitle=this.subject)}}
           dir="auto"
-          style=${`${this.getPlaceholderStyle()}; border:none;`}
+          style=${this.getPlaceholderStyle()}
         />
-        <div class="divider"></div>
 
         <cdtr-popover width="500px" id="name-popover">
-          <paper-button
-            style=${`color:${this.textColor}`}
-            size="sm"
-            variant="text"
-            slot="trigger"
-            dir="auto"
-          >
+          <button class="icon-btn" slot="trigger" aria-label="Edit details">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 24 24"
-              width="20"
-              fill="#000"
+              width="18"
             >
               <path
                 d="M3.33946 17.0002C2.90721 16.2515 2.58277 15.4702 2.36133 14.6741C3.3338 14.1779 3.99972 13.1668 3.99972 12.0002C3.99972 10.8345 3.3348 9.824 2.36353 9.32741C2.81025 7.71651 3.65857 6.21627 4.86474 4.99001C5.7807 5.58416 6.98935 5.65534 7.99972 5.072C9.01009 4.48866 9.55277 3.40635 9.4962 2.31604C11.1613 1.8846 12.8847 1.90004 14.5031 2.31862C14.4475 3.40806 14.9901 4.48912 15.9997 5.072C17.0101 5.65532 18.2187 5.58416 19.1346 4.99007C19.7133 5.57986 20.2277 6.25151 20.66 7.00021C21.0922 7.7489 21.4167 8.53025 21.6381 9.32628C20.6656 9.82247 19.9997 10.8336 19.9997 12.0002C19.9997 13.166 20.6646 14.1764 21.6359 14.673C21.1892 16.2839 20.3409 17.7841 19.1347 19.0104C18.2187 18.4163 17.0101 18.3451 15.9997 18.9284C14.9893 19.5117 14.4467 20.5941 14.5032 21.6844C12.8382 22.1158 11.1148 22.1004 9.49633 21.6818C9.55191 20.5923 9.00929 19.5113 7.99972 18.9284C6.98938 18.3451 5.78079 18.4162 4.86484 19.0103C4.28617 18.4205 3.77172 17.7489 3.33946 17.0002ZM8.99972 17.1964C10.0911 17.8265 10.8749 18.8227 11.2503 19.9659C11.7486 20.0133 12.2502 20.014 12.7486 19.9675C13.1238 18.8237 13.9078 17.8268 14.9997 17.1964C16.0916 16.5659 17.347 16.3855 18.5252 16.6324C18.8146 16.224 19.0648 15.7892 19.2729 15.334C18.4706 14.4373 17.9997 13.2604 17.9997 12.0002C17.9997 10.74 18.4706 9.5632 19.2729 8.6665C19.1688 8.4405 19.0538 8.21822 18.9279 8.00021C18.802 7.78219 18.667 7.57148 18.5233 7.36842C17.3457 7.61476 16.0911 7.43414 14.9997 6.80405C13.9083 6.17395 13.1246 5.17768 12.7491 4.03455C12.2509 3.98714 11.7492 3.98646 11.2509 4.03292C10.8756 5.17671 10.0916 6.17364 8.99972 6.80405C7.9078 7.43447 6.65245 7.61494 5.47428 7.36803C5.18485 7.77641 4.93463 8.21117 4.72656 8.66637C5.52881 9.56311 5.99972 10.74 5.99972 12.0002C5.99972 13.2604 5.52883 14.4372 4.72656 15.3339C4.83067 15.5599 4.94564 15.7822 5.07152 16.0002C5.19739 16.2182 5.3324 16.4289 5.47612 16.632C6.65377 16.3857 7.90838 16.5663 8.99972 17.1964ZM11.9997 15.0002C10.3429 15.0002 8.99972 13.6571 8.99972 12.0002C8.99972 10.3434 10.3429 9.00021 11.9997 9.00021C13.6566 9.00021 14.9997 10.3434 14.9997 12.0002C14.9997 13.6571 13.6566 15.0002 11.9997 15.0002ZM11.9997 13.0002C12.552 13.0002 12.9997 12.5525 12.9997 12.0002C12.9997 11.4479 12.552 11.0002 11.9997 11.0002C11.4474 11.0002 10.9997 11.4479 10.9997 12.0002C10.9997 12.5525 11.4474 13.0002 11.9997 13.0002Z"
               ></path>
             </svg>
-          </paper-button>
+          </button>
 
           <div slot="content" class="popover-content" dir="auto">
             <div class="popover-header">
@@ -106,6 +104,7 @@
               <input
                 name="name"
                 type="text"
+                class="text-input"
                 .value=${this.name}
                 @input=${t=>this.name=t.target.value}
                 dir="auto"
@@ -113,286 +112,250 @@
             </div>
             <div class="input-group">
               <label dir="auto">${this.subjectLabel}</label>
-              <div class="row">
-                <paper-button
-                  @click=${this.handleGenerateSubject}
-                  ?disabled=${this.isGeneratingSubject}
-                  class="generate-button"
-                >
-                  ${this.isGeneratingSubject?i.qy` <div class="loading-spinner"></div> `:i.qy`
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          xmlnsXlink="http://www.w3.org/1999/xlink"
-                          width="18"
-                          zoomAndPan="magnify"
-                          viewBox="0 0 20.25 20.999999"
-                          height="18"
-                          preserveAspectRatio="xMidYMid meet"
-                          version="1.0"
-                        >
-                          <defs>
-                            <clippath id="84a0f9f97b">
-                              <path
-                                d="M 0 0.375 L 19.527344 0.375 L 19.527344 19.902344 L 0 19.902344 Z M 0 0.375 "
-                                clip-rule="nonzero"
-                              ></path>
-                            </clippath>
-                          </defs>
-                          <g clip-path="url(#84a0f9f97b)">
-                            <path
-                              fill="#9747ff"
-                              d="M 12.316406 0.679688 C 12.160156 0.382812 11.734375 0.382812 11.574219 0.679688 L 11.132812 1.507812 C 11.09375 1.582031 11.035156 1.640625 10.960938 1.679688 L 10.128906 2.117188 C 9.828125 2.277344 9.828125 2.699219 10.128906 2.855469 L 10.960938 3.296875 C 11.035156 3.335938 11.09375 3.394531 11.132812 3.46875 L 11.574219 4.296875 C 11.734375 4.59375 12.160156 4.59375 12.316406 4.296875 L 12.757812 3.46875 C 12.800781 3.394531 12.859375 3.335938 12.933594 3.296875 L 13.765625 2.855469 C 14.0625 2.699219 14.0625 2.277344 13.765625 2.117188 L 12.933594 1.679688 C 12.859375 1.640625 12.800781 1.582031 12.757812 1.507812 Z M 15.167969 16.96875 L 16.875 17.617188 L 16.226562 15.917969 Z M 16.882812 13.496094 L 5.136719 1.816406 C 4.15625 0.839844 2.558594 0.839844 1.574219 1.816406 L 0.984375 2.40625 C 0 3.382812 0 4.96875 0.984375 5.949219 L 12.730469 17.625 C 12.929688 17.824219 13.273438 18.039062 13.542969 18.140625 L 17.152344 19.507812 C 18.167969 19.890625 19.164062 18.902344 18.777344 17.890625 L 17.402344 14.300781 C 17.300781 14.035156 17.085938 13.695312 16.882812 13.496094 Z M 15.316406 14.296875 L 5.730469 4.769531 L 3.953125 6.535156 L 13.535156 16.066406 Z M 3.949219 3 L 4.542969 3.585938 L 2.765625 5.355469 L 2.171875 4.765625 C 1.84375 4.441406 1.84375 3.910156 2.171875 3.585938 L 2.761719 3 C 3.089844 2.671875 3.621094 2.671875 3.949219 3 Z M 4.550781 12.996094 C 4.390625 12.699219 3.964844 12.699219 3.808594 12.996094 L 3 14.503906 C 2.960938 14.578125 2.902344 14.640625 2.828125 14.679688 L 1.308594 15.480469 C 1.011719 15.636719 1.011719 16.058594 1.308594 16.214844 L 2.828125 17.015625 C 2.902344 17.054688 2.960938 17.117188 3 17.191406 L 3.808594 18.699219 C 3.964844 18.996094 4.390625 18.996094 4.550781 18.699219 L 5.355469 17.191406 C 5.394531 17.117188 5.453125 17.054688 5.527344 17.015625 L 7.046875 16.214844 C 7.34375 16.058594 7.34375 15.636719 7.046875 15.480469 L 5.527344 14.679688 C 5.453125 14.640625 5.394531 14.578125 5.355469 14.503906 Z M 17.355469 5.480469 C 17.199219 5.183594 16.773438 5.183594 16.613281 5.480469 L 16.027344 6.582031 C 15.988281 6.65625 15.929688 6.714844 15.855469 6.753906 L 14.746094 7.335938 C 14.449219 7.496094 14.449219 7.917969 14.746094 8.074219 L 15.855469 8.660156 C 15.929688 8.699219 15.988281 8.757812 16.027344 8.832031 L 16.613281 9.933594 C 16.773438 10.230469 17.199219 10.230469 17.355469 9.933594 L 17.945312 8.832031 C 17.984375 8.757812 18.042969 8.699219 18.117188 8.660156 L 19.226562 8.074219 C 19.523438 7.917969 19.523438 7.496094 19.226562 7.335938 L 18.117188 6.753906 C 18.042969 6.714844 17.984375 6.65625 17.945312 6.582031 Z M 17.355469 5.480469 "
-                              fill-opacity="1"
-                              fill-rule="evenodd"
-                            ></path>
-                          </g>
-                        </svg>
-                      `}
-                </paper-button>
+              <div class="field-shell">
                 <input
                   name="subject"
                   type="text"
+                  class=${this.isGeneratingSubject?"streaming":""}
                   .value=${this.subject}
                   @input=${t=>this.subject=t.target.value}
                   dir="auto"
                 />
+                <button
+                  @click=${this.handleGenerateSubject}
+                  ?disabled=${this.isGeneratingSubject}
+                  class="icon-btn generate-button ${this.isGeneratingSubject?"generating":""}"
+                  aria-label="Generate subject with AI"
+                >
+                  ${this.renderSparkleIcon()}
+                </button>
               </div>
             </div>
             <div class="input-group">
               <label dir="auto">${this.subtitleLabel}</label>
-              <div class="row">
-                <paper-button
-                  @click=${this.handleGenerateSubtitle}
-                  ?disabled=${this.isGeneratingSubtitle}
-                  class="generate-button"
-                >
-                  ${this.isGeneratingSubtitle?i.qy` <div class="loading-spinner"></div> `:i.qy`
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          xmlnsXlink="http://www.w3.org/1999/xlink"
-                          width="18"
-                          zoomAndPan="magnify"
-                          viewBox="0 0 20.25 20.999999"
-                          height="18"
-                          preserveAspectRatio="xMidYMid meet"
-                          version="1.0"
-                        >
-                          <defs>
-                            <clippath id="84a0f9f97b">
-                              <path
-                                d="M 0 0.375 L 19.527344 0.375 L 19.527344 19.902344 L 0 19.902344 Z M 0 0.375 "
-                                clip-rule="nonzero"
-                              ></path>
-                            </clippath>
-                          </defs>
-                          <g clip-path="url(#84a0f9f97b)">
-                            <path
-                              fill="#9747ff"
-                              d="M 12.316406 0.679688 C 12.160156 0.382812 11.734375 0.382812 11.574219 0.679688 L 11.132812 1.507812 C 11.09375 1.582031 11.035156 1.640625 10.960938 1.679688 L 10.128906 2.117188 C 9.828125 2.277344 9.828125 2.699219 10.128906 2.855469 L 10.960938 3.296875 C 11.035156 3.335938 11.09375 3.394531 11.132812 3.46875 L 11.574219 4.296875 C 11.734375 4.59375 12.160156 4.59375 12.316406 4.296875 L 12.757812 3.46875 C 12.800781 3.394531 12.859375 3.335938 12.933594 3.296875 L 13.765625 2.855469 C 14.0625 2.699219 14.0625 2.277344 13.765625 2.117188 L 12.933594 1.679688 C 12.859375 1.640625 12.800781 1.582031 12.757812 1.507812 Z M 15.167969 16.96875 L 16.875 17.617188 L 16.226562 15.917969 Z M 16.882812 13.496094 L 5.136719 1.816406 C 4.15625 0.839844 2.558594 0.839844 1.574219 1.816406 L 0.984375 2.40625 C 0 3.382812 0 4.96875 0.984375 5.949219 L 12.730469 17.625 C 12.929688 17.824219 13.273438 18.039062 13.542969 18.140625 L 17.152344 19.507812 C 18.167969 19.890625 19.164062 18.902344 18.777344 17.890625 L 17.402344 14.300781 C 17.300781 14.035156 17.085938 13.695312 16.882812 13.496094 Z M 15.316406 14.296875 L 5.730469 4.769531 L 3.953125 6.535156 L 13.535156 16.066406 Z M 3.949219 3 L 4.542969 3.585938 L 2.765625 5.355469 L 2.171875 4.765625 C 1.84375 4.441406 1.84375 3.910156 2.171875 3.585938 L 2.761719 3 C 3.089844 2.671875 3.621094 2.671875 3.949219 3 Z M 4.550781 12.996094 C 4.390625 12.699219 3.964844 12.699219 3.808594 12.996094 L 3 14.503906 C 2.960938 14.578125 2.902344 14.640625 2.828125 14.679688 L 1.308594 15.480469 C 1.011719 15.636719 1.011719 16.058594 1.308594 16.214844 L 2.828125 17.015625 C 2.902344 17.054688 2.960938 17.117188 3 17.191406 L 3.808594 18.699219 C 3.964844 18.996094 4.390625 18.996094 4.550781 18.699219 L 5.355469 17.191406 C 5.394531 17.117188 5.453125 17.054688 5.527344 17.015625 L 7.046875 16.214844 C 7.34375 16.058594 7.34375 15.636719 7.046875 15.480469 L 5.527344 14.679688 C 5.453125 14.640625 5.394531 14.578125 5.355469 14.503906 Z M 17.355469 5.480469 C 17.199219 5.183594 16.773438 5.183594 16.613281 5.480469 L 16.027344 6.582031 C 15.988281 6.65625 15.929688 6.714844 15.855469 6.753906 L 14.746094 7.335938 C 14.449219 7.496094 14.449219 7.917969 14.746094 8.074219 L 15.855469 8.660156 C 15.929688 8.699219 15.988281 8.757812 16.027344 8.832031 L 16.613281 9.933594 C 16.773438 10.230469 17.199219 10.230469 17.355469 9.933594 L 17.945312 8.832031 C 17.984375 8.757812 18.042969 8.699219 18.117188 8.660156 L 19.226562 8.074219 C 19.523438 7.917969 19.523438 7.496094 19.226562 7.335938 L 18.117188 6.753906 C 18.042969 6.714844 17.984375 6.65625 17.945312 6.582031 Z M 17.355469 5.480469 "
-                              fill-opacity="1"
-                              fill-rule="evenodd"
-                            ></path>
-                          </g>
-                        </svg>
-                      `}
-                </paper-button>
+              <div class="field-shell">
                 <input
                   name="subtitle"
                   type="text"
+                  class=${this.isGeneratingSubtitle?"streaming":""}
                   .value=${this.subtitle}
                   @input=${t=>this.subtitle=t.target.value}
                   dir="auto"
                 />
+                <button
+                  @click=${this.handleGenerateSubtitle}
+                  ?disabled=${this.isGeneratingSubtitle}
+                  class="icon-btn generate-button ${this.isGeneratingSubtitle?"generating":""}"
+                  aria-label="Generate subtitle with AI"
+                >
+                  ${this.renderSparkleIcon()}
+                </button>
               </div>
             </div>
-            <paper-button
-              style=${`color:${this.textColor}; background:${this.bgColor};width:100%;`}
-              fullwidth
-              class="save-button"
-              @click=${this.handleSave}
-              dir="auto"
-            >
+            <button class="save-button" @click=${this.handleSave} dir="auto">
               ${this.saveButtonText}
-            </paper-button>
+            </button>
           </div>
         </cdtr-popover>
       </div>
-    `}};c.styles=i.AH`
+    `}};u.styles=o.AH`
     * {
       box-sizing: border-box;
     }
-    @keyframes shake {
-      0%,
-      100% {
-        transform: translateX(0);
-      }
-      10%,
-      30%,
-      50%,
-      70%,
-      90% {
-        transform: translateX(-5px);
+    :host {
+      font-family: var(
+        --font-family,
+        -apple-system,
+        BlinkMacSystemFont,
+        "Segoe UI",
+        Roboto,
+        sans-serif
+      );
+    }
+    @keyframes ring-pulse {
+      0% {
+        box-shadow: 0 0 0 0
+          color-mix(in srgb, var(--accent, #5b5fc7) 45%, transparent);
       }
-      20%,
-      40%,
-      60%,
-      80% {
-        transform: translateX(5px);
+      100% {
+        box-shadow: 0 0 0 6px transparent;
       }
     }
     .shake {
-      animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+      border-radius: 8px;
+      animation: ring-pulse 0.6s ease-out 2;
     }
     .popover-content {
       padding: 20px;
       min-width: 320px;
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
-        Ubuntu, Cantarell, sans-serif;
       font-size: 14px;
     }
-    .popover-header {
-      margin-bottom: 20px;
-    }
     .popover-header h3 {
-      font-size: 1.25rem;
+      font-size: 15px;
       font-weight: 600;
       color: #1a1a1a;
-      margin: 0;
-    }
-    paper-button {
-      min-width: 10px;
+      margin: 0 0 16px;
     }
     .input-group {
-      margin-bottom: 12px;
+      margin-bottom: 16px;
     }
     .input-group label {
       display: block;
-      margin-bottom: 4px;
+      margin-bottom: 6px;
       font-weight: 500;
-      font-size: 14px;
-      color: #4a4a4a;
-    }
-    svg {
-      fill: #000;
+      font-size: 13px;
+      color: #6b7280;
     }
-    .row {
-      display: flex;
+    .icon-btn {
+      display: inline-flex;
       align-items: center;
-      gap: 8px;
+      justify-content: center;
+      flex: none;
+      width: 28px;
+      height: 28px;
+      padding: 0;
+      border: none;
+      border-radius: 6px;
+      background: transparent;
+      color: var(--icon-muted, #666);
+      cursor: pointer;
+      transition: color 0.15s, background-color 0.15s;
     }
-    .input-group input {
-      width: 100%;
-      padding: 8px 12px;
-      border: 1px solid #d1d1d1;
-      border-radius: 4px;
-      font-size: 14px;
-      background-color: #ffffff;
-      transition: border-color 0.2s, box-shadow 0.2s;
+    .icon-btn:hover {
+      color: var(--accent, #5b5fc7);
+      background: color-mix(in srgb, var(--accent, #5b5fc7) 8%, transparent);
     }
-    .input-group input:focus {
-      outline: none;
-      border-color: #3b82f6;
-      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
-    }
-    .loading-spinner {
-      width: 16px;
-      height: 16px;
-      border: 2px solid rgba(0, 0, 0, 0.3);
-      border-top: 2px solid #000000;
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-      display: inline-block;
-      margin-right: 8px;
-    }
-    @keyframes spin {
-      0% {
-        transform: rotate(0deg);
-      }
-      100% {
-        transform: rotate(360deg);
-      }
+    .icon-btn:focus-visible {
+      outline: 2px solid var(--accent, #5b5fc7);
+      outline-offset: 1px;
     }
-    @keyframes pulse {
-      0% {
-        transform: scale(1);
+    .icon-btn svg {
+      fill: currentColor;
+    }
+    .generate-button {
+      color: var(--accent, #5b5fc7);
+    }
+    .generate-button:disabled {
+      cursor: default;
+      pointer-events: none;
+    }
+    .generate-button.generating svg {
+      animation: sparkle-pulse 1s ease-in-out infinite;
+    }
+    @keyframes sparkle-pulse {
+      0%,
+      100% {
         opacity: 1;
       }
       50% {
-        transform: scale(1.05);
-        opacity: 0.8;
+        opacity: 0.35;
       }
-      100% {
-        transform: scale(1);
-        opacity: 1;
+    }
+    @keyframes shimmer {
+      from {
+        background-position: 200% 0;
+      }
+      to {
+        background-position: -200% 0;
       }
     }
-    .generate-button {
-      padding: 0;
+    input.streaming {
+      background-image: linear-gradient(
+        90deg,
+        transparent 0%,
+        color-mix(in srgb, var(--accent, #5b5fc7) 10%, transparent) 50%,
+        transparent 100%
+      );
+      background-size: 200% 100%;
+      animation: shimmer 1.4s linear infinite;
     }
-    .generate-button:disabled {
-      opacity: 0.6;
-      cursor: not-allowed;
-      pointer-events: none;
+    .text-input,
+    .field-shell {
+      width: 100%;
+      height: 36px;
+      border: 1px solid var(--divider-color, #e5e7eb);
+      border-radius: 8px;
+      background: #fff;
+      transition: border-color 0.15s, box-shadow 0.15s;
     }
-    .pulse-button {
-      animation: pulse 2s ease-in-out infinite;
-      background-color: #3b82f6;
-      color: white;
-      border: none;
-      border-radius: 4px;
-      padding: 4px 8px;
-      font-size: 12px;
-      font-weight: 500;
-      cursor: pointer;
-      transition: background-color 0.2s;
+    .text-input {
+      padding: 0 10px;
+      font-size: 14px;
+      font-family: inherit;
+      color: inherit;
     }
-    .pulse-button:hover {
-      background-color: #2563eb;
-      animation: none;
+    .text-input:focus,
+    .field-shell:focus-within {
+      outline: none;
+      border-color: var(--accent, #5b5fc7);
+      box-shadow: 0 0 0 3px
+        color-mix(in srgb, var(--accent, #5b5fc7) 12%, transparent);
     }
-    .subject-input-left {
+    .field-shell {
       display: flex;
       align-items: center;
       gap: 2px;
+      padding: 0 4px;
     }
-    .subject-input {
-      max-height: 36px;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      background: #ffffff;
-      border: 1px solid #d1d1d1;
-      border-radius: 6px;
-      max-width: 400px;
-      overflow: hidden;
-    }
-    .subject-input input {
+    .field-shell > input {
       flex: 1;
-      padding: 8px 12px;
-      border-radius: 4px;
+      min-width: 0;
+      height: 100%;
+      border: none;
+      background: transparent;
+      padding: 0 6px;
       font-size: 14px;
+      font-family: inherit;
+      color: inherit;
     }
-    .subject-input input:focus {
+    .field-shell > input:focus {
       outline: none;
     }
+    .subject-input {
+      max-width: 400px;
+    }
+    .subject-input-left {
+      display: flex;
+      align-items: center;
+      gap: 2px;
+    }
     .field-item {
-      padding: 10px 12px;
+      padding: 8px 10px;
+      border-radius: 6px;
       cursor: pointer;
-      border-bottom: 1px solid #f0f0f0;
       font-size: 14px;
-      transition: background-color 0.2s;
+      transition: background-color 0.15s;
     }
     .field-item:hover {
-      background-color: #f8f9fa;
+      background-color: #f5f5f7;
+    }
+    .save-button {
+      width: 100%;
+      height: 36px;
+      margin-top: 4px;
+      border: none;
+      border-radius: 8px;
+      background: var(--accent, #5b5fc7);
+      color: #fff;
+      font-size: 14px;
+      font-weight: 500;
+      font-family: inherit;
+      cursor: pointer;
+      transition: filter 0.15s;
     }
-    .field-item:last-child {
-      border-bottom: none;
+    .save-button:hover {
+      filter: brightness(0.94);
     }
-    .divider {
-      height: 20px;
-      width: 1px;
-      background-color: #d5d5d5;
-      position: absolute;
+    .save-button:focus-visible {
+      outline: 2px solid var(--accent, #5b5fc7);
+      outline-offset: 2px;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .shake,
+      .generate-button.generating svg,
+      input.streaming {
+        animation: none;
+      }
     }
     emoji-picker {
       --emoji-size: 1.75rem;
@@ -404,4 +367,4 @@
       --button-active-background: #f1f3f5;
       --font-size: 14px;
     }
-  `;let u=c;p([(0,s.MZ)({type:String})],u.prototype,"bgColor"),p([(0,s.MZ)({type:String})],u.prototype,"textColor"),p([(0,s.MZ)({type:String})],u.prototype,"headerText"),p([(0,s.MZ)({type:String})],u.prototype,"nameLabel"),p([(0,s.MZ)({type:String})],u.prototype,"subjectLabel"),p([(0,s.MZ)({type:String})],u.prototype,"subtitleLabel"),p([(0,s.MZ)({type:String})],u.prototype,"saveButtonText"),p([(0,s.MZ)({type:String})],u.prototype,"subjectPlaceholder"),p([(0,s.MZ)({type:Array})],u.prototype,"mergeTags"),p([(0,s.MZ)({type:String})],u.prototype,"name"),p([(0,s.MZ)({type:String})],u.prototype,"subject"),p([(0,s.MZ)({type:String})],u.prototype,"subtitle"),p([(0,s.MZ)({attribute:!1})],u.prototype,"save"),p([(0,s.MZ)({type:Boolean})],u.prototype,"isGeneratingSubject"),p([(0,s.MZ)({type:Boolean})],u.prototype,"isGeneratingSubtitle"),customElements.get(d)||customElements.define(d,u)}}]);
+  `;let p=u;c([(0,n.MZ)({type:String})],p.prototype,"bgColor"),c([(0,n.MZ)({type:String})],p.prototype,"textColor"),c([(0,n.MZ)({type:String})],p.prototype,"headerText"),c([(0,n.MZ)({type:String})],p.prototype,"nameLabel"),c([(0,n.MZ)({type:String})],p.prototype,"subjectLabel"),c([(0,n.MZ)({type:String})],p.prototype,"subtitleLabel"),c([(0,n.MZ)({type:String})],p.prototype,"saveButtonText"),c([(0,n.MZ)({type:String})],p.prototype,"subjectPlaceholder"),c([(0,n.MZ)({type:Array})],p.prototype,"mergeTags"),c([(0,n.MZ)({type:String})],p.prototype,"name"),c([(0,n.MZ)({type:String})],p.prototype,"subject"),c([(0,n.MZ)({type:String})],p.prototype,"subtitle"),c([(0,n.MZ)({attribute:!1})],p.prototype,"save"),c([(0,n.MZ)({type:Boolean})],p.prototype,"isGeneratingSubject"),c([(0,n.MZ)({type:Boolean})],p.prototype,"isGeneratingSubtitle"),customElements.get(d)||customElements.define(d,p)}}]);