@designbasekorea/ui-wc 0.8.13 → 0.9.0

package/dist/esm/components/db-ai-chain-of-thought.d.ts

@@ -0,0 +1,14 @@
+import { DbAiDataElement } from '../core/ai-element.js';
+
+/** AI Elements: chain-of-thought. App-owned data and actions; no provider calls. */
+declare class DbAiChainOfThought extends DbAiDataElement {
+    static get observedAttributes(): string[];
+    protected view(): Node[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-ai-chain-of-thought': DbAiChainOfThought;
+    }
+}
+
+export { DbAiChainOfThought };

package/dist/esm/components/db-ai-chain-of-thought.js

@@ -0,0 +1 @@
+import{DbAiDataElement as t,aiNode as e}from"../core/ai-element.js";class DbAiChainOfThought extends t{static get observedAttributes(){return["items","label","status","open"]}view(){const t=e("div","designbase-wc-ai__timeline","");return t.append(...this.rows.map(t=>this.itemLine(t))),[this.disclosure("root",this.attr("label","running"===this.state?"researching":"researched"),this.state,[t],this.hasAttribute("open")||"running"===this.state)]}}customElements.get("db-ai-chain-of-thought")||customElements.define("db-ai-chain-of-thought",DbAiChainOfThought);export{DbAiChainOfThought};

package/dist/esm/components/db-ai-chat.js

@@ -1 +1 @@
-import"./db-chat-welcome.js";import"./db-chat-suggestions.js";import"./db-chat-message.js";import"./db-chat-typing.js";import"./db-chat-composer.js";import{createDbIcon as t,isDbIconName as e}from"./db-icons.js";import{sanitizeHtmlFragment as i}from"../core/safe-html.js";const s="designbase-wc-ai-chat";let a=0;function el(t,e,i){const s=document.createElement(t);return e&&(s.className=e),null!=i&&(s.textContent=i),s}class DbAiChat extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.typing=!1,this._messages=[],this._suggestions=[],this._tools=[],this._attachOptions=null,this.threadEl=null,this.activeArtifactId=null,this.artifactSeq=0,this.onSend=t=>{t.stopPropagation();const e=t.detail;this.dispatchEvent(new CustomEvent("db-send",{detail:e,bubbles:!0,composed:!0}))},this.onSuggestionSelect=t=>{t.stopPropagation();const e=t.detail,i=new CustomEvent("db-suggestion-select",{detail:e,bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(i)&&(this.composer.value=e.value,this.composer.focusInput())}}static get observedAttributes(){return["greeting","title","highlight","subtitle","placeholder","orb-variant","suggestions-layout","suggestions-columns","disclaimer","voice","attach","max-width","artifact-open","artifact-title"]}set messages(t){this._messages=Array.isArray(t)?t.map(t=>({id:`m${a+=1}`,...t})):[],this.built&&this.renderContent()}get messages(){return this._messages}set suggestions(t){this._suggestions=Array.isArray(t)?t:[],this.built&&0===this._messages.length&&this.renderContent()}get suggestions(){return this._suggestions}set tools(t){this._tools=Array.isArray(t)?t:[],this.built&&(this.composer.tools=this._tools)}get tools(){return this._tools}set attachOptions(t){this._attachOptions=Array.isArray(t)?t:null,this.built&&this._attachOptions&&(this.composer.attachOptions=this._attachOptions)}get attachOptions(){return this._attachOptions??this.composer?.attachOptions??[]}connectedCallback(){this.built||this.build(),this.sync()}attributeChangedCallback(t){this.built&&("placeholder"!==t?"voice"!==t&&"attach"!==t?"disclaimer"!==t?"artifact-open"!==t?"artifact-title"!==t?this.sync():this.artifactTitleEl.textContent=this.getAttribute("artifact-title")||"":this.syncArtifact(!0):this.renderDock():this.syncComposerToggles():this.composer.setAttribute("placeholder",this.getAttribute("placeholder")||""))}build(){this.built=!0,this.classList.add(s),this.replaceChildren(),this.mainEl=el("div",`${s}__main`),this.scrollEl=el("div",`${s}__scroll`),this.dockEl=el("div",`${s}__dock`),this.composer=document.createElement("db-chat-composer"),this.composer.className=`${s}__composer`,this.composer.addEventListener("db-send",this.onSend),this.composer.addEventListener("db-stop",t=>this.relay(t,"db-stop")),this.composer.addEventListener("db-tool-toggle",t=>this.relay(t,"db-tool-toggle")),this.composer.addEventListener("db-attach",t=>this.relay(t,"db-attach")),this.composer.addEventListener("db-attach-files",t=>this.relay(t,"db-attach-files")),this.composer.addEventListener("db-voice",t=>this.relay(t,"db-voice")),this.mainEl.append(this.scrollEl,this.dockEl),this.buildArtifact(),this.append(this.mainEl,this.artifactEl)}buildArtifact(){this.artifactEl=el("aside",`${s}__artifact`),this.artifactEl.setAttribute("aria-hidden","true");const e=el("div",`${s}__artifact-panel`),i=el("div",`${s}__artifact-header`),a=el("div",`${s}__artifact-titles`);this.artifactTitleEl=el("div",`${s}__artifact-title`),this.artifactSubtitleEl=el("div",`${s}__artifact-subtitle`),this.artifactSubtitleEl.hidden=!0,a.append(this.artifactTitleEl,this.artifactSubtitleEl);const r=el("button",`${s}__artifact-close`);r.type="button",r.setAttribute("aria-label","아티팩트 닫기"),r.append(t("close",18)),r.addEventListener("click",()=>this.closeArtifact()),i.append(a,r),this.artifactBodyEl=el("div",`${s}__artifact-body`),e.append(i,this.artifactBodyEl),this.artifactEl.append(e)}sync(){const t=this.getAttribute("max-width")||"100%";this.style.setProperty("--dbchat-max",t),this.syncComposerToggles(),this.composer.setAttribute("placeholder",this.getAttribute("placeholder")||"무엇이든 물어보세요…"),this._tools.length&&(this.composer.tools=this._tools),this._attachOptions&&(this.composer.attachOptions=this._attachOptions);const e=this.getAttribute("artifact-title");null!=e&&(this.artifactTitleEl.textContent=e),this.renderContent(),this.renderDock(),this.syncArtifact(!1)}syncArtifact(t){const e=this.hasAttribute("artifact-open");this.classList.toggle(`${s}--artifact-open`,e),this.artifactEl.setAttribute("aria-hidden",String(!e)),this.artifactEl.toggleAttribute("inert",!e),e||(this.activeArtifactId=null),this.syncArtifactCardStates(),t&&this.dispatchEvent(new CustomEvent(e?"db-artifact-open":"db-artifact-close",{detail:e?{id:this.activeArtifactId}:{id:null},bubbles:!0,composed:!0}))}syncComposerToggles(){this.composer.toggleAttribute("voice",this.hasAttribute("voice")),this.composer.toggleAttribute("attach","false"!==this.getAttribute("attach"))}renderContent(){this.scrollEl.replaceChildren(),this.threadEl=null;const t=0===this._messages.length;this.classList.toggle(`${s}--empty`,t),t?this.renderHero():this.renderThread()}renderHero(){const t=el("div",`${s}__hero`),e=document.createElement("db-chat-welcome");if(e.className=`${s}__welcome`,this.getAttribute("greeting")&&e.setAttribute("greeting",this.getAttribute("greeting")),e.setAttribute("title",this.getAttribute("title")||"무엇을 도와드릴까요?"),this.getAttribute("highlight")&&e.setAttribute("highlight",this.getAttribute("highlight")),this.getAttribute("subtitle")&&e.setAttribute("subtitle",this.getAttribute("subtitle")),e.setAttribute("orb-variant",this.getAttribute("orb-variant")||"aurora"),e.setAttribute("align","center"),t.append(e),this._suggestions.length){const e=document.createElement("db-chat-suggestions");e.className=`${s}__suggestions`,e.setAttribute("layout",this.getAttribute("suggestions-layout")||"card"),e.setAttribute("columns",this.getAttribute("suggestions-columns")||"3"),e.items=this._suggestions,e.addEventListener("db-select",this.onSuggestionSelect),t.append(e)}this.scrollEl.append(t)}renderThread(){const t=el("div",`${s}__thread`);this._messages.forEach(e=>t.append(this.buildMessage(e))),this.threadEl=t,this.scrollEl.append(t),this.typing&&t.append(this.buildTyping()),requestAnimationFrame(()=>this.scrollToEnd())}buildMessage(t){const e=el("div",`${s}__turn`);e.dataset.id=t.id||"";const a=el("db-chat-message");return a.dataset.id=t.id||"",a.setAttribute("role",t.role||"assistant"),t.name&&a.setAttribute("name",t.name),t.time&&a.setAttribute("timestamp",t.time),t.avatarSrc&&a.setAttribute("avatar-src",t.avatarSrc),t.avatarInitials&&a.setAttribute("avatar-initials",t.avatarInitials),t.actions&&a.setAttribute("actions",t.actions),t.status&&a.setAttribute("status",t.status),t.variant&&a.setAttribute("variant",t.variant),null!=t.html?a.replaceChildren(i(t.html)):a.textContent=t.text||"",a.addEventListener("db-action",t=>this.relay(t,"db-message-action")),e.append(a),t.artifact&&(this.ensureArtifactId(t.artifact),e.append(this.buildArtifactCard(t.artifact))),e}ensureArtifactId(t){return t.id||(t.id=`art-${this.artifactSeq+=1}`),t.id}buildArtifactCard(i){const a=this.ensureArtifactId(i),r=el("button",`${s}__artifact-card`);r.type="button",r.dataset.artifactId=a,r.setAttribute("aria-pressed","false"),r.setAttribute("aria-label",`${i.title} 아티팩트 열기`);const n=el("span",`${s}__artifact-card-icon`),c=i.icon&&e(i.icon)?i.icon:"code";n.append(t(c,18));const l=el("div",`${s}__artifact-card-meta`);l.append(el("div",`${s}__artifact-card-title`,i.title)),i.subtitle&&l.append(el("div",`${s}__artifact-card-subtitle`,i.subtitle));const o=el("span",`${s}__artifact-card-chevron`);return o.append(t("chevron-right",16)),r.append(n,l,o),r.addEventListener("click",()=>this.toggleArtifactFromCard(i)),r}syncArtifactCardStates(){this.querySelectorAll(`.${s}__artifact-card`).forEach(t=>{const e=t,i=this.artifactOpen&&e.dataset.artifactId===this.activeArtifactId;e.classList.toggle(`${s}__artifact-card--active`,i),e.setAttribute("aria-pressed",String(i))})}toggleArtifactFromCard(t){const e=this.ensureArtifactId(t);this.artifactOpen&&this.activeArtifactId===e?this.closeArtifact():this.openArtifact({id:e,title:t.title,subtitle:t.subtitle,html:t.html})}buildTyping(){const t=el("db-chat-typing",`${s}__typing`),e=this.getAttribute("title")||"AI";return t.setAttribute("name",this.getAttribute("agent-name")||e),t.setAttribute("label","생각 중…"),t.setAttribute("avatar-initials","AI"),t}renderDock(){this.dockEl.replaceChildren(),this.dockEl.append(this.composer);const t=this.getAttribute("disclaimer");t&&this.dockEl.append(el("p",`${s}__disclaimer`,t))}relay(t,e){t.stopPropagation(),this.dispatchEvent(new CustomEvent(e,{detail:t.detail,bubbles:!0,composed:!0}))}scrollToEnd(){this.scrollEl.scrollTop=this.scrollEl.scrollHeight}addMessage(t){const e={id:`m${a+=1}`,...t},i=0===this._messages.length;if(this._messages.push(e),i||!this.threadEl)this.renderContent();else{const t=this.threadEl.querySelector("db-chat-typing"),i=this.buildMessage(e);t?this.threadEl.insertBefore(i,t):this.threadEl.append(i),requestAnimationFrame(()=>this.scrollToEnd())}return e.id}updateMessage(t,e){const a=this._messages.find(e=>e.id===t);if(!a)return;Object.assign(a,e);const r=this.threadEl?.querySelector(`db-chat-message[data-id="${t}"]`);if(!r)return;const n=r.querySelector(".designbase-wc-chat-message__content");if(!n||null==e.html&&null==e.text||(null!=e.html?n.replaceChildren(i(e.html)):n.textContent=e.text||""),e.status&&r.setAttribute("status",e.status),void 0!==e.artifact){const t=r.closest(`.${s}__turn`)||r.parentElement;t?.querySelector(`.${s}__artifact-card`)?.remove(),e.artifact&&t&&(this.ensureArtifactId(e.artifact),t.append(this.buildArtifactCard(e.artifact)),this.syncArtifactCardStates())}requestAnimationFrame(()=>this.scrollToEnd())}appendToMessage(t,e){const i=this._messages.find(e=>e.id===t);if(!i)return;i.text=(i.text||"")+e;const s=this.threadEl?.querySelector(`db-chat-message[data-id="${t}"]`),a=s?.querySelector(".designbase-wc-chat-message__content");a&&(a.textContent=i.text),requestAnimationFrame(()=>this.scrollToEnd())}setMessages(t){this.messages=t}clear(){this._messages=[],this.typing=!1,this.closeArtifact(),this.built&&this.renderContent()}setTyping(t){if(this.typing=Boolean(t),!this.built||!this.threadEl)return;const e=this.threadEl.querySelector("db-chat-typing");this.typing&&!e?(this.threadEl.append(this.buildTyping()),requestAnimationFrame(()=>this.scrollToEnd())):!this.typing&&e&&e.remove()}setStreaming(t){this.composer?.setStreaming(Boolean(t))}focusInput(){this.composer?.focusInput()}getComposer(){return this.composer}get artifactOpen(){return this.hasAttribute("artifact-open")}set artifactOpen(t){this.toggleAttribute("artifact-open",t)}openArtifact(t={}){null!=t.title&&(this.artifactTitleEl.textContent=t.title),null!=t.subtitle&&(this.artifactSubtitleEl.textContent=t.subtitle,this.artifactSubtitleEl.hidden=!t.subtitle),null!=t.html&&this.artifactBodyEl.replaceChildren(i(t.html)),null!=t.id&&(this.activeArtifactId=t.id);const e=this.artifactOpen;this.artifactOpen=!0,e&&this.syncArtifactCardStates()}closeArtifact(){this.activeArtifactId=null;const t=this.artifactOpen;this.artifactOpen=!1,t||this.syncArtifactCardStates()}toggleArtifact(){this.artifactOpen?this.closeArtifact():this.artifactOpen=!0}getArtifactBody(){return this.artifactBodyEl}setArtifactContent(t){this.artifactBodyEl.replaceChildren(t)}}customElements.get("db-ai-chat")||customElements.define("db-ai-chat",DbAiChat);export{DbAiChat};
+import"./db-chat-welcome.js";import"./db-chat-suggestions.js";import"./db-chat-message.js";import"./db-chat-typing.js";import"./db-chat-composer.js";import{createDbIcon as t,isDbIconName as e}from"./db-icons.js";import{sanitizeHtmlFragment as i}from"../core/safe-html.js";const s="designbase-wc-ai-chat";let a=0;function el(t,e,i){const s=document.createElement(t);return e&&(s.className=e),null!=i&&(s.textContent=i),s}class DbAiChat extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.typing=!1,this._messages=[],this._suggestions=[],this._tools=[],this._attachOptions=null,this.threadEl=null,this.activeArtifactId=null,this.artifactSeq=0,this.onSend=t=>{t.stopPropagation();const e=t.detail;this.dispatchEvent(new CustomEvent("db-send",{detail:e,bubbles:!0,composed:!0}))},this.onSuggestionSelect=t=>{t.stopPropagation();const e=t.detail,i=new CustomEvent("db-suggestion-select",{detail:e,bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(i)&&(this.composer.value=e.value,this.composer.focusInput())}}static get observedAttributes(){return["greeting","title","highlight","subtitle","placeholder","orb-variant","suggestions-layout","suggestions-columns","disclaimer","voice","voice-state","voice-message","voice-disabled","attach","max-width","artifact-open","artifact-title"]}set messages(t){this._messages=Array.isArray(t)?t.map(t=>({id:`m${a+=1}`,...t})):[],this.built&&this.renderContent()}get messages(){return this._messages}set suggestions(t){this._suggestions=Array.isArray(t)?t:[],this.built&&0===this._messages.length&&this.renderContent()}get suggestions(){return this._suggestions}set tools(t){this._tools=Array.isArray(t)?t:[],this.built&&(this.composer.tools=this._tools)}get tools(){return this._tools}set attachOptions(t){this._attachOptions=Array.isArray(t)?t:null,this.built&&this._attachOptions&&(this.composer.attachOptions=this._attachOptions)}get attachOptions(){return this._attachOptions??this.composer?.attachOptions??[]}connectedCallback(){this.built||this.build(),this.sync()}attributeChangedCallback(t){this.built&&("placeholder"!==t?["voice","attach","voice-state","voice-message","voice-disabled"].includes(t)?this.syncComposerToggles():"disclaimer"!==t?"artifact-open"!==t?"artifact-title"!==t?this.sync():this.artifactTitleEl.textContent=this.getAttribute("artifact-title")||"":this.syncArtifact(!0):this.renderDock():this.composer.setAttribute("placeholder",this.getAttribute("placeholder")||""))}build(){this.built=!0,this.classList.add(s),this.replaceChildren(),this.mainEl=el("div",`${s}__main`),this.scrollEl=el("div",`${s}__scroll`),this.dockEl=el("div",`${s}__dock`),this.composer=document.createElement("db-chat-composer"),this.composer.className=`${s}__composer`,this.composer.addEventListener("db-send",this.onSend),this.composer.addEventListener("db-stop",t=>this.relay(t,"db-stop")),this.composer.addEventListener("db-tool-toggle",t=>this.relay(t,"db-tool-toggle")),this.composer.addEventListener("db-attach",t=>this.relay(t,"db-attach")),this.composer.addEventListener("db-attach-files",t=>this.relay(t,"db-attach-files")),this.composer.addEventListener("db-voice",t=>this.relay(t,"db-voice")),this.mainEl.append(this.scrollEl,this.dockEl),this.buildArtifact(),this.append(this.mainEl,this.artifactEl)}buildArtifact(){this.artifactEl=el("aside",`${s}__artifact`),this.artifactEl.setAttribute("aria-hidden","true");const e=el("div",`${s}__artifact-panel`),i=el("div",`${s}__artifact-header`),a=el("div",`${s}__artifact-titles`);this.artifactTitleEl=el("div",`${s}__artifact-title`),this.artifactSubtitleEl=el("div",`${s}__artifact-subtitle`),this.artifactSubtitleEl.hidden=!0,a.append(this.artifactTitleEl,this.artifactSubtitleEl);const r=el("button",`${s}__artifact-close`);r.type="button",r.setAttribute("aria-label","아티팩트 닫기"),r.append(t("close",18)),r.addEventListener("click",()=>this.closeArtifact()),i.append(a,r),this.artifactBodyEl=el("div",`${s}__artifact-body`),e.append(i,this.artifactBodyEl),this.artifactEl.append(e)}sync(){const t=this.getAttribute("max-width")||"100%";this.style.setProperty("--dbchat-max",t),this.syncComposerToggles(),this.composer.setAttribute("placeholder",this.getAttribute("placeholder")||"무엇이든 물어보세요…"),this._tools.length&&(this.composer.tools=this._tools),this._attachOptions&&(this.composer.attachOptions=this._attachOptions);const e=this.getAttribute("artifact-title");null!=e&&(this.artifactTitleEl.textContent=e),this.renderContent(),this.renderDock(),this.syncArtifact(!1)}syncArtifact(t){const e=this.hasAttribute("artifact-open");this.classList.toggle(`${s}--artifact-open`,e),this.artifactEl.setAttribute("aria-hidden",String(!e)),this.artifactEl.toggleAttribute("inert",!e),e||(this.activeArtifactId=null),this.syncArtifactCardStates(),t&&this.dispatchEvent(new CustomEvent(e?"db-artifact-open":"db-artifact-close",{detail:e?{id:this.activeArtifactId}:{id:null},bubbles:!0,composed:!0}))}syncComposerToggles(){this.composer.toggleAttribute("voice",this.hasAttribute("voice")),this.composer.setAttribute("voice-state",this.getAttribute("voice-state")||"idle"),this.composer.setAttribute("voice-message",this.getAttribute("voice-message")||""),this.composer.toggleAttribute("voice-disabled",this.hasAttribute("voice-disabled")),this.composer.toggleAttribute("attach","false"!==this.getAttribute("attach"))}renderContent(){this.scrollEl.replaceChildren(),this.threadEl=null;const t=0===this._messages.length;this.classList.toggle(`${s}--empty`,t),t?this.renderHero():this.renderThread()}renderHero(){const t=el("div",`${s}__hero`),e=document.createElement("db-chat-welcome");if(e.className=`${s}__welcome`,this.getAttribute("greeting")&&e.setAttribute("greeting",this.getAttribute("greeting")),e.setAttribute("title",this.getAttribute("title")||"무엇을 도와드릴까요?"),this.getAttribute("highlight")&&e.setAttribute("highlight",this.getAttribute("highlight")),this.getAttribute("subtitle")&&e.setAttribute("subtitle",this.getAttribute("subtitle")),e.setAttribute("orb-variant",this.getAttribute("orb-variant")||"aurora"),e.setAttribute("align","center"),t.append(e),this._suggestions.length){const e=document.createElement("db-chat-suggestions");e.className=`${s}__suggestions`,e.setAttribute("layout",this.getAttribute("suggestions-layout")||"card"),e.setAttribute("columns",this.getAttribute("suggestions-columns")||"3"),e.items=this._suggestions,e.addEventListener("db-select",this.onSuggestionSelect),t.append(e)}this.scrollEl.append(t)}renderThread(){const t=el("div",`${s}__thread`);this._messages.forEach(e=>t.append(this.buildMessage(e))),this.threadEl=t,this.scrollEl.append(t),this.typing&&t.append(this.buildTyping()),requestAnimationFrame(()=>this.scrollToEnd())}buildMessage(t){const e=el("div",`${s}__turn`);e.dataset.id=t.id||"";const a=el("db-chat-message");return a.dataset.id=t.id||"",a.setAttribute("role",t.role||"assistant"),t.name&&a.setAttribute("name",t.name),t.time&&a.setAttribute("timestamp",t.time),t.avatarSrc&&a.setAttribute("avatar-src",t.avatarSrc),t.avatarInitials&&a.setAttribute("avatar-initials",t.avatarInitials),t.actions&&a.setAttribute("actions",t.actions),t.status&&a.setAttribute("status",t.status),t.variant&&a.setAttribute("variant",t.variant),null!=t.html?a.replaceChildren(i(t.html)):a.textContent=t.text||"",a.addEventListener("db-action",t=>this.relay(t,"db-message-action")),e.append(a),t.artifact&&(this.ensureArtifactId(t.artifact),e.append(this.buildArtifactCard(t.artifact))),e}ensureArtifactId(t){return t.id||(t.id=`art-${this.artifactSeq+=1}`),t.id}buildArtifactCard(i){const a=this.ensureArtifactId(i),r=el("button",`${s}__artifact-card`);r.type="button",r.dataset.artifactId=a,r.setAttribute("aria-pressed","false"),r.setAttribute("aria-label",`${i.title} 아티팩트 열기`);const c=el("span",`${s}__artifact-card-icon`),n=i.icon&&e(i.icon)?i.icon:"code";c.append(t(n,18));const l=el("div",`${s}__artifact-card-meta`);l.append(el("div",`${s}__artifact-card-title`,i.title)),i.subtitle&&l.append(el("div",`${s}__artifact-card-subtitle`,i.subtitle));const o=el("span",`${s}__artifact-card-chevron`);return o.append(t("chevron-right",16)),r.append(c,l,o),r.addEventListener("click",()=>this.toggleArtifactFromCard(i)),r}syncArtifactCardStates(){this.querySelectorAll(`.${s}__artifact-card`).forEach(t=>{const e=t,i=this.artifactOpen&&e.dataset.artifactId===this.activeArtifactId;e.classList.toggle(`${s}__artifact-card--active`,i),e.setAttribute("aria-pressed",String(i))})}toggleArtifactFromCard(t){const e=this.ensureArtifactId(t);this.artifactOpen&&this.activeArtifactId===e?this.closeArtifact():this.openArtifact({id:e,title:t.title,subtitle:t.subtitle,html:t.html})}buildTyping(){const t=el("db-chat-typing",`${s}__typing`),e=this.getAttribute("title")||"AI";return t.setAttribute("name",this.getAttribute("agent-name")||e),t.setAttribute("label","생각 중…"),t.setAttribute("avatar-initials","AI"),t}renderDock(){this.dockEl.replaceChildren(),this.dockEl.append(this.composer);const t=this.getAttribute("disclaimer");t&&this.dockEl.append(el("p",`${s}__disclaimer`,t))}relay(t,e){t.stopPropagation(),this.dispatchEvent(new CustomEvent(e,{detail:t.detail,bubbles:!0,composed:!0}))}scrollToEnd(){this.scrollEl.scrollTop=this.scrollEl.scrollHeight}addMessage(t){const e={id:`m${a+=1}`,...t},i=0===this._messages.length;if(this._messages.push(e),i||!this.threadEl)this.renderContent();else{const t=this.threadEl.querySelector("db-chat-typing"),i=this.buildMessage(e);t?this.threadEl.insertBefore(i,t):this.threadEl.append(i),requestAnimationFrame(()=>this.scrollToEnd())}return e.id}updateMessage(t,e){const a=this._messages.find(e=>e.id===t);if(!a)return;Object.assign(a,e);const r=this.threadEl?.querySelector(`db-chat-message[data-id="${t}"]`);if(!r)return;const c=r.querySelector(".designbase-wc-chat-message__content");if(!c||null==e.html&&null==e.text||(null!=e.html?c.replaceChildren(i(e.html)):c.textContent=e.text||""),e.status&&r.setAttribute("status",e.status),void 0!==e.artifact){const t=r.closest(`.${s}__turn`)||r.parentElement;t?.querySelector(`.${s}__artifact-card`)?.remove(),e.artifact&&t&&(this.ensureArtifactId(e.artifact),t.append(this.buildArtifactCard(e.artifact)),this.syncArtifactCardStates())}requestAnimationFrame(()=>this.scrollToEnd())}appendToMessage(t,e){const i=this._messages.find(e=>e.id===t);if(!i)return;i.text=(i.text||"")+e;const s=this.threadEl?.querySelector(`db-chat-message[data-id="${t}"]`),a=s?.querySelector(".designbase-wc-chat-message__content");a&&(a.textContent=i.text),requestAnimationFrame(()=>this.scrollToEnd())}setMessages(t){this.messages=t}clear(){this._messages=[],this.typing=!1,this.closeArtifact(),this.built&&this.renderContent()}setTyping(t){if(this.typing=Boolean(t),!this.built||!this.threadEl)return;const e=this.threadEl.querySelector("db-chat-typing");this.typing&&!e?(this.threadEl.append(this.buildTyping()),requestAnimationFrame(()=>this.scrollToEnd())):!this.typing&&e&&e.remove()}setStreaming(t){this.composer?.setStreaming(Boolean(t))}focusInput(){this.composer?.focusInput()}getComposer(){return this.composer}get artifactOpen(){return this.hasAttribute("artifact-open")}set artifactOpen(t){this.toggleAttribute("artifact-open",t)}openArtifact(t={}){null!=t.title&&(this.artifactTitleEl.textContent=t.title),null!=t.subtitle&&(this.artifactSubtitleEl.textContent=t.subtitle,this.artifactSubtitleEl.hidden=!t.subtitle),null!=t.html&&this.artifactBodyEl.replaceChildren(i(t.html)),null!=t.id&&(this.activeArtifactId=t.id);const e=this.artifactOpen;this.artifactOpen=!0,e&&this.syncArtifactCardStates()}closeArtifact(){this.activeArtifactId=null;const t=this.artifactOpen;this.artifactOpen=!1,t||this.syncArtifactCardStates()}toggleArtifact(){this.artifactOpen?this.closeArtifact():this.artifactOpen=!0}getArtifactBody(){return this.artifactBodyEl}setArtifactContent(t){this.artifactBodyEl.replaceChildren(t)}}customElements.get("db-ai-chat")||customElements.define("db-ai-chat",DbAiChat);export{DbAiChat};

package/dist/esm/components/db-ai-checkpoint.d.ts

@@ -0,0 +1,14 @@
+import { DbAiDataElement } from '../core/ai-element.js';
+
+/** AI Elements: checkpoint. App-owned data and actions; no provider calls. */
+declare class DbAiCheckpoint extends DbAiDataElement {
+    static get observedAttributes(): string[];
+    protected view(): Node[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-ai-checkpoint': DbAiCheckpoint;
+    }
+}
+
+export { DbAiCheckpoint };

package/dist/esm/components/db-ai-checkpoint.js

@@ -0,0 +1 @@
+import{DbAiDataElement as e,aiNode as t,aiIcon as i}from"../core/ai-element.js";class DbAiCheckpoint extends e{static get observedAttributes(){return["item-id","label","action-label","disabled"]}view(){const e=t("div","designbase-wc-ai__checkpoint","");return e.append(i("clock"),t("span","designbase-wc-ai__label",this.attr("label","checkpoint")),this.button("restore",this.attr("action-label","restore"),"refresh")),[e]}}customElements.get("db-ai-checkpoint")||customElements.define("db-ai-checkpoint",DbAiCheckpoint);export{DbAiCheckpoint};

package/dist/esm/components/db-ai-confirmation.d.ts

@@ -0,0 +1,14 @@
+import { DbAiDataElement } from '../core/ai-element.js';
+
+/** AI Elements: confirmation. App-owned data and actions; no provider calls. */
+declare class DbAiConfirmation extends DbAiDataElement {
+    static get observedAttributes(): string[];
+    protected view(): Node[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-ai-confirmation': DbAiConfirmation;
+    }
+}
+
+export { DbAiConfirmation };

package/dist/esm/components/db-ai-confirmation.js

@@ -0,0 +1 @@
+import{DbAiDataElement as e,aiNode as t,aiCode as i}from"../core/ai-element.js";import{t as a}from"../core/i18n.js";class DbAiConfirmation extends e{static get observedAttributes(){return["item-id","label","description","code","language","decision","disabled"]}view(){const e=t("div","designbase-wc-ai__approval","");e.append(this.itemLine({id:"request",label:this.attr("label","confirmation"),status:"approval"})),this.attr("description")&&e.append(t("p","designbase-wc-ai__description",this.attr("description"))),this.attr("code")&&e.append(i(this.attr("code"),this.attr("language")||"text"));const n=this.attr("decision");if("accepted"===n||"rejected"===n)e.append(t("p","designbase-wc-ai__decision",a(`aiElement.${n}`)));else{const i=t("div","designbase-wc-ai__actions",""),n=this.button("confirm",a("aiElement.allow"),"done");n.setAttribute("variant","primary"),i.append(this.button("reject",a("aiElement.reject"),"close"),n),e.append(i)}return[e]}}customElements.get("db-ai-confirmation")||customElements.define("db-ai-confirmation",DbAiConfirmation);export{DbAiConfirmation};

package/dist/esm/components/db-ai-context.d.ts

@@ -0,0 +1,15 @@
+import { DbAiDataElement } from '../core/ai-element.js';
+import './db-progressbar.js';
+
+/** AI Elements: context. App-owned data and actions; no provider calls. */
+declare class DbAiContext extends DbAiDataElement {
+    static get observedAttributes(): string[];
+    protected view(): Node[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-ai-context': DbAiContext;
+    }
+}
+
+export { DbAiContext };

package/dist/esm/components/db-ai-context.js

@@ -0,0 +1 @@
+import{DbAiDataElement as t,aiNode as e}from"../core/ai-element.js";import{t as i}from"../core/i18n.js";import"./db-progressbar.js";class DbAiContext extends t{static get observedAttributes(){return["items","label","used","limit","cost-label","open"]}view(){const t=Number(this.getAttribute("used")),s=Number(this.getAttribute("limit")),n=this.hasAttribute("used")&&this.hasAttribute("limit")&&Number.isFinite(t)&&Number.isFinite(s)&&t>=0&&s>0,o=n?Math.min(100,Math.round(t/s*100)):null,r=e("div","designbase-wc-ai__context-body","");if(n){const n=document.createElement("db-progressbar");n.setAttribute("value",String(o)),n.setAttribute("label",this.attr("label","context")),n.setAttribute("full-width",""),r.append(n),r.append(e("p","designbase-wc-ai__description",`${t.toLocaleString()} / ${s.toLocaleString()} ${i("aiElement.tokens")}`))}else r.append(e("p","designbase-wc-ai__description",i("aiElement.unknown")));for(const t of this.rows)r.append(this.itemLine(t));return this.attr("cost-label")&&r.append(e("p","designbase-wc-ai__description",this.attr("cost-label"))),[this.disclosure("root",`${this.attr("label","context")} · ${null===o?"—":`${o}%`}`,"complete",[r],this.hasAttribute("open"),"doughnut-chart")]}}customElements.get("db-ai-context")||customElements.define("db-ai-context",DbAiContext);export{DbAiContext};

package/dist/esm/components/db-ai-conversation.d.ts

@@ -0,0 +1,21 @@
+import { DbElement } from '../core/base-element.js';
+import './db-button.js';
+
+/** Follows updates only at the live edge. Reading older content never forces a jump. */
+declare class DbAiConversation extends DbElement {
+    static get observedAttributes(): string[];
+    private viewport?;
+    private jump?;
+    private atEnd;
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private toEnd;
+    private sync;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-ai-conversation': DbAiConversation;
+    }
+}
+
+export { DbAiConversation };

package/dist/esm/components/db-ai-conversation.js

@@ -0,0 +1 @@
+import{DbElement as t}from"../core/base-element.js";import{aiNode as i}from"../core/ai-element.js";import{t as e}from"../core/i18n.js";import"./db-button.js";class DbAiConversation extends t{constructor(){super(...arguments),this.atEnd=!0}static get observedAttributes(){return["label","auto-scroll"]}connectedCallback(){if(!this.viewport){this.classList.add("designbase-wc-ai","designbase-wc-ai-conversation");const t=this.querySelector(":scope > [data-ai-conversation-content]");this.viewport=t||i("div","designbase-wc-ai-conversation__viewport",""),this.viewport.classList.add("designbase-wc-ai-conversation__viewport"),this.viewport.setAttribute("role","log"),this.viewport.setAttribute("aria-live","polite"),this.viewport.tabIndex=0,t||this.viewport.append(...Array.from(this.childNodes)),this.jump=document.createElement("db-button"),this.jump.setAttribute("size","s"),this.jump.setAttribute("variant","secondary"),this.jump.setAttribute("start-icon","chevron-down"),this.jump.textContent=e("aiElement.latest"),this.jump.hidden=!0,this.append(this.viewport,this.jump)}this.cleanups.listen(this.viewport,"scroll",()=>{this.atEnd=this.viewport.scrollHeight-this.viewport.scrollTop-this.viewport.clientHeight<48,this.jump.hidden=this.atEnd}),this.cleanups.listen(this.jump,"db-click",()=>this.toEnd());const t=new MutationObserver(()=>{this.atEnd&&this.hasAttribute("auto-scroll")?this.toEnd():this.jump.hidden=this.atEnd});t.observe(this.viewport,{childList:!0,subtree:!0,characterData:!0}),this.cleanups.add(()=>t.disconnect());const s=new MutationObserver(t=>{for(const i of t)for(const t of i.addedNodes)t.parentNode===this&&t!==this.viewport&&t!==this.jump&&this.viewport.append(t)});s.observe(this,{childList:!0}),this.cleanups.add(()=>s.disconnect()),this.sync()}attributeChangedCallback(){this.sync()}toEnd(){this.viewport&&(this.viewport.scrollTop=this.viewport.scrollHeight,this.atEnd=!0,this.jump.hidden=!0)}sync(){this.viewport?.setAttribute("aria-label",this.getAttribute("label")||e("aiElement.conversation"))}}customElements.get("db-ai-conversation")||customElements.define("db-ai-conversation",DbAiConversation);export{DbAiConversation};

package/dist/esm/components/db-ai-execution-quote.d.ts

@@ -0,0 +1,41 @@
+import { DbElement } from '../core/base-element.js';
+import './db-button.js';
+
+interface DbAiQuoteView {
+    id: string;
+    modelId: string;
+    reservedCredits: number;
+    pricingVersion: string;
+    expiresAt: string;
+    /** Product-formatted deadline; expiresAt remains authoritative for UI expiry. */
+    expiresLabel?: string;
+    /** Already formatted by the app. Omit when provider cost is unknown. */
+    providerCostLabel?: string;
+}
+interface DbAiQuoteExecution {
+    quoteId: string;
+    modelId: string;
+}
+/** Displays a server quote and emits intent. No reservations, API requests or price calculation. */
+declare class DbAiExecutionQuote extends DbElement {
+    private quoteData;
+    private expiryTimer?;
+    static get observedAttributes(): string[];
+    get quote(): DbAiQuoteView | null;
+    set quote(value: DbAiQuoteView | null);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private busy;
+    private expired;
+    private canExecute;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-ai-execution-quote': DbAiExecutionQuote;
+    }
+}
+
+export { DbAiExecutionQuote };
+export type { DbAiQuoteExecution, DbAiQuoteView };

package/dist/esm/components/db-ai-execution-quote.js

@@ -0,0 +1 @@
+import{DbElement as t}from"../core/base-element.js";import{creditNumber as e,textNode as i,creditText as s,creditAction as r,replaceView as a}from"../core/credit-ui.js";import{t as o}from"../core/i18n.js";import"./db-button.js";class DbAiExecutionQuote extends t{constructor(){super(...arguments),this.quoteData=null}static get observedAttributes(){return["available","label","unit","loading","executing","disabled","stale","error"]}get quote(){return this.quoteData?{...this.quoteData}:null}set quote(t){this.quoteData=!(t&&"string"==typeof t.id&&t.id&&"string"==typeof t.modelId&&t.modelId&&Number.isSafeInteger(t.reservedCredits)&&t.reservedCredits>=0&&"string"==typeof t.pricingVersion&&t.pricingVersion&&"string"==typeof t.expiresAt&&Number.isFinite(Date.parse(t.expiresAt)))||void 0!==t.expiresLabel&&"string"!=typeof t.expiresLabel||void 0!==t.providerCostLabel&&"string"!=typeof t.providerCostLabel?null:{...t},this.isConnected&&this.render()}connectedCallback(){this.upgradeProperties(["quote"]),this.cleanups.listen(this,"db-click",t=>{if(!(t.target instanceof HTMLElement)||this.busy()||this.hasAttribute("disabled"))return;const e=t.target.dataset.action;"refresh"===e&&this.dbEmit("refresh"),"execute"===e&&this.canExecute()&&this.quoteData&&this.dbEmit("execute",{quoteId:this.quoteData.id,modelId:this.quoteData.modelId})}),this.render()}disconnectedCallback(){window.clearTimeout(this.expiryTimer),super.disconnectedCallback()}attributeChangedCallback(){this.isConnected&&this.render()}busy(){return this.hasAttribute("loading")||this.hasAttribute("executing")}expired(){return!!this.quoteData&&Date.parse(this.quoteData.expiresAt)<=Date.now()}canExecute(){const t=e(this.getAttribute("available"));return!!this.quoteData&&null!==t&&t>=this.quoteData.reservedCredits&&!this.expired()&&!this.busy()&&!this.hasAttribute("stale")&&!this.hasAttribute("error")&&!this.hasAttribute("disabled")}render(){if(window.clearTimeout(this.expiryTimer),this.quoteData&&!this.expired()){const t=Date.parse(this.quoteData.expiresAt)-Date.now();this.expiryTimer=window.setTimeout(()=>{this.isConnected&&this.render()},Math.min(t+1,2147483647))}const t="designbase-wc-ai-execution-quote";this.classList.add(t),this.setAttribute("aria-busy",String(this.busy()));const u=[i("h3",`${t}__title`,this.getAttribute("label")||o("aiQuote.title"))],n=this.quoteData,d=e(this.getAttribute("available")),h=this.getAttribute("error");if(n&&!this.hasAttribute("loading")){const e=i("div",`${t}__amount`,s(n.reservedCredits));e.append(i("span","",this.getAttribute("unit")||o("credits.unit"))),u.push(i("p",`${t}__eyebrow`,o("aiQuote.reserved")),e);const r=i("dl",`${t}__meta`,"");for(const[t,e]of[[o("credits.available"),s(d)],[o("aiQuote.providerCost"),n.providerCostLabel||o("aiQuote.unknown")],[o("aiQuote.pricingVersion"),n.pricingVersion]])r.append(i("dt","",t),i("dd","",e));const a=document.createElement("time");a.dateTime=n.expiresAt,a.textContent=n.expiresLabel||new Date(n.expiresAt).toISOString();const h=i("dd","","");h.append(a),r.append(i("dt","",o("aiQuote.expires")),h),u.push(r)}let c=o("aiQuote.idle");this.hasAttribute("executing")?c=o("aiQuote.executing"):this.hasAttribute("loading")?c=o("aiQuote.loading"):h?c=h:this.hasAttribute("stale")?c=o("aiQuote.stale"):this.expired()?c=o("aiQuote.expired"):n&&null===d?c=o("aiQuote.balanceUnknown"):n&&null!==d&&d<n.reservedCredits?c=`${o("aiQuote.insufficient")} ${s(n.reservedCredits-d)} ${this.getAttribute("unit")||o("credits.unit")}`:n&&(c=o("aiQuote.ready"));const l=i("p",`${t}__status`,c);l.setAttribute("role",h?"alert":"status"),l.setAttribute("aria-atomic","true"),u.push(l);const b=i("div",`${t}__actions`,""),p=r("refresh",o(n?"aiQuote.refresh":"aiQuote.request"),this.busy()||this.hasAttribute("disabled")),g=r("execute",o("aiQuote.execute"),!this.canExecute());g.setAttribute("variant","primary"),g.setAttribute("size","m"),g.toggleAttribute("loading",this.hasAttribute("executing")),b.append(p,g),u.push(b),a(this,...u)}}customElements.get("db-ai-execution-quote")||customElements.define("db-ai-execution-quote",DbAiExecutionQuote);export{DbAiExecutionQuote};

package/dist/esm/components/db-ai-file-tree.d.ts

@@ -0,0 +1,14 @@
+import { DbAiDataElement } from '../core/ai-element.js';
+
+/** AI Elements: file-tree. App-owned data and actions; no provider calls. */
+declare class DbAiFileTree extends DbAiDataElement {
+    static get observedAttributes(): string[];
+    protected view(): Node[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-ai-file-tree': DbAiFileTree;
+    }
+}
+
+export { DbAiFileTree };

package/dist/esm/components/db-ai-file-tree.js

@@ -0,0 +1 @@
+import{t as e}from"../core/i18n.js";import{DbAiDataElement as i,aiNode as t}from"../core/ai-element.js";class DbAiFileTree extends i{static get observedAttributes(){return["label","items","disabled"]}view(){const build=(i,s=[])=>{const l=t("ul","designbase-wc-ai__files","");for(const e of i){const i=document.createElement("li");if(e.children){const t=this.disclosure(`folder:${[...s,e.id].map(encodeURIComponent).join("/")}`,e.label,"complete",[build(e.children,[...s,e.id])],!0,"folder"),l=t.querySelector(".designbase-wc-ai__icon");l?.removeAttribute("aria-label"),l?.setAttribute("aria-hidden","true");const r=t.querySelector("summary"),n=r.lastElementChild;n.classList.add("designbase-wc-ai__folder-chevron"),r.prepend(n),i.append(t)}else i.append(this.button("file-open",e.label,"file-new",e.id));l.append(i)}return i.length||l.append(t("li","designbase-wc-ai__empty-folder",e("aiElement.emptyFolder"))),l};if(!this.rows.length)return[t("p","designbase-wc-ai__description",e("aiElement.noFiles"))];const i=t("div","designbase-wc-ai__file-tree","");return i.setAttribute("aria-label",this.attr("label","files")),i.append(build(this.rows)),[i]}}customElements.get("db-ai-file-tree")||customElements.define("db-ai-file-tree",DbAiFileTree);export{DbAiFileTree};

package/dist/esm/components/db-ai-glow.d.ts

@@ -1,4 +1,4 @@
-import { AI_GLOW_STATES, AI_GLOW_VARIANTS, AI_GLOW_SIZES } from '@designbasekorea/ui-contracts';
+import { AI_GLOW_STATES, AI_GLOW_VARIANTS, AI_GLOW_SIZES } from '../ui-contracts/dist/components.d.js';
 import { DbElement } from '../core/base-element.js';
 
 type GlowSize = (typeof AI_GLOW_SIZES)[number];

package/dist/esm/components/db-ai-inline-citation.d.ts

@@ -0,0 +1,16 @@
+import { DbAiDataElement } from '../core/ai-element.js';
+
+/** AI Elements: inline-citation. App-owned data and actions; no provider calls. */
+declare class DbAiInlineCitation extends DbAiDataElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    private place;
+    protected view(): Node[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-ai-inline-citation': DbAiInlineCitation;
+    }
+}
+
+export { DbAiInlineCitation };

package/dist/esm/components/db-ai-inline-citation.js

@@ -0,0 +1 @@
+import{DbAiDataElement as e,aiNode as t,aiLink as i}from"../core/ai-element.js";class DbAiInlineCitation extends e{static get observedAttributes(){return["items","label","open"]}connectedCallback(){super.connectedCallback(),this.cleanups.listen(this,"toggle",()=>this.place(),!0),this.cleanups.listen(window,"resize",()=>this.place()),this.cleanups.listen(document,"scroll",()=>this.place(),!0),this.cleanups.listen(document,"pointerdown",e=>{if(e.target instanceof Node&&!this.contains(e.target)){const e=this.querySelector("details");e&&this.closeDisclosure(e)}}),this.cleanups.listen(document,"keydown",e=>{if(!(e instanceof KeyboardEvent)||"Escape"!==e.key)return;const t=this.querySelector("details");t?.open&&this.closeDisclosure(t,this.contains(document.activeElement))})}place(){const e=this.querySelector("details"),t=e?.querySelector(":scope > .designbase-wc-ai__detail");if(!t)return;if(!e?.open)return void(t.matches(":popover-open")&&t.hidePopover());t.setAttribute("popover","manual"),t.matches(":popover-open")||t.showPopover(),t.style.width="min(var(--db-ai-citation-width, 280px), calc(100vw - 2 * var(--db-ai-citation-inset, 16px)))",t.style.maxHeight="calc(100dvh - 2 * var(--db-ai-citation-inset, 16px))",t.style.margin="0";const i=parseFloat(getComputedStyle(t).scrollMarginTop)||16,n=t.getBoundingClientRect().width,s=e.querySelector("summary").getBoundingClientRect();t.style.left=`${Math.max(i,Math.min(s.left,window.innerWidth-n-i))}px`,t.style.top=`${Math.max(i,Math.min(s.bottom+6,window.innerHeight-t.offsetHeight-i))}px`}view(){const e=t("div","designbase-wc-ai__citation-content","");for(const n of this.rows)e.append(i(n)),n.description&&e.append(t("p","designbase-wc-ai__description",n.description));return[this.disclosure("root",this.attr("label","citation"),"complete",[e],this.hasAttribute("open"),"globe")]}}customElements.get("db-ai-inline-citation")||customElements.define("db-ai-inline-citation",DbAiInlineCitation);export{DbAiInlineCitation};

package/dist/esm/components/db-ai-message.d.ts

@@ -0,0 +1,19 @@
+import { DbElement } from '../core/base-element.js';
+import './db-button.js';
+
+/** Lightweight conversation turn. Native content/React children remain owned by the caller. */
+declare class DbAiMessage extends DbElement {
+    static get observedAttributes(): string[];
+    private content?;
+    private footer?;
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private sync;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-ai-message': DbAiMessage;
+    }
+}
+
+export { DbAiMessage };

package/dist/esm/components/db-ai-message.js

@@ -0,0 +1 @@
+import{DbElement as t}from"../core/base-element.js";import{aiNode as e}from"../core/ai-element.js";import{t as s}from"../core/i18n.js";import"./db-button.js";class DbAiMessage extends t{static get observedAttributes(){return["from","label","streaming","actions","disabled"]}connectedCallback(){if(!this.content){const t=this.querySelector(":scope > [data-ai-message-body]");this.content=t||e("div","designbase-wc-ai-message__content",""),t||this.content.append(...Array.from(this.childNodes)),this.content.classList.add("designbase-wc-ai-message__content"),this.footer=e("div","designbase-wc-ai-message__actions",""),this.append(this.content,this.footer)}this.cleanups.listen(this,"db-click",t=>{const e=t.target;if(!(e instanceof HTMLElement)||e.closest("db-ai-message")!==this||this.hasAttribute("disabled"))return;const s=e.dataset.messageAction;if(s)if(t.stopPropagation(),"copy"===s){const t=this.content?.innerText||"";if(!navigator.clipboard)return void this.dbEmit("copy-error",{text:t});navigator.clipboard.writeText(t).then(()=>this.dbEmit("copy",{text:t}),()=>this.dbEmit("copy-error",{text:t}))}else this.dbEmit(s)}),this.sync()}attributeChangedCallback(){this.isConnected&&this.sync()}sync(){if(this.content&&this.footer){this.classList.add("designbase-wc-ai","designbase-wc-ai-message"),this.dataset.from="user"===this.getAttribute("from")?"user":"assistant",this.setAttribute("aria-label",this.getAttribute("label")||s(`aiElement.${this.dataset.from}`)),this.setAttribute("aria-busy",String(this.hasAttribute("streaming"))),this.footer.replaceChildren();for(const t of(this.getAttribute("actions")||"").split(",").map(t=>t.trim())){const e={copy:"copy",regenerate:"refresh",like:"thumb-up",dislike:"thumb-down"}[t];if(!e)continue;const i=document.createElement("db-button");i.dataset.messageAction=t,i.setAttribute("size","s"),i.setAttribute("variant","ghost"),i.setAttribute("start-icon",e),i.setAttribute("icon-only",""),i.setAttribute("aria-label",s(`aiElement.${t}`)),i.toggleAttribute("disabled",this.hasAttribute("disabled")||this.hasAttribute("streaming")),this.footer.append(i)}}}}customElements.get("db-ai-message")||customElements.define("db-ai-message",DbAiMessage);export{DbAiMessage};

package/dist/esm/components/db-ai-model-select.d.ts

@@ -0,0 +1,36 @@
+import { DbElement } from '../core/base-element.js';
+import './db-select.js';
+
+interface DbAiModelOption {
+    id: string;
+    label: string;
+    description: string;
+    capabilities: string[];
+    usageLabel: string;
+    disabled?: boolean;
+    disabledReason?: string;
+}
+interface DbAiModelSelection {
+    modelId: string;
+}
+/** Product-supplied catalog, not an authorization or provider registry. */
+declare class DbAiModelSelect extends DbElement {
+    private modelData;
+    private select?;
+    private details?;
+    static get observedAttributes(): string[];
+    get models(): DbAiModelOption[];
+    set models(value: DbAiModelOption[]);
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private blocked;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-ai-model-select': DbAiModelSelect;
+    }
+}
+
+export { DbAiModelSelect };
+export type { DbAiModelOption, DbAiModelSelection };

package/dist/esm/components/db-ai-model-select.js

@@ -0,0 +1 @@
+import{DbElement as e}from"../core/base-element.js";import{textNode as t}from"../core/credit-ui.js";import{t as i}from"../core/i18n.js";import"./db-select.js";class DbAiModelSelect extends e{constructor(){super(...arguments),this.modelData=[]}static get observedAttributes(){return["selected-id","label","loading","disabled","error"]}get models(){return this.modelData.map(e=>({...e,capabilities:[...e.capabilities]}))}set models(e){const t=new Set;this.modelData=Array.isArray(e)?e.filter(e=>!(!(e&&"string"==typeof e.id&&e.id&&!t.has(e.id)&&"string"==typeof e.label&&"string"==typeof e.description&&"string"==typeof e.usageLabel&&Array.isArray(e.capabilities)&&e.capabilities.every(e=>"string"==typeof e))||void 0!==e.disabled&&"boolean"!=typeof e.disabled||void 0!==e.disabledReason&&"string"!=typeof e.disabledReason)&&(t.add(e.id),!0)).map(e=>({...e,capabilities:[...e.capabilities]})):[],this.isConnected&&this.render()}connectedCallback(){this.upgradeProperties(["models"]),this.select||(this.classList.add("designbase-wc-ai-model-select"),this.select=document.createElement("db-select"),this.select.setAttribute("full-width",""),this.select.setAttribute("show-clear-button","false"),this.details=t("div","designbase-wc-ai-model-select__details",""),this.append(this.select,this.details)),this.cleanups.listen(this.select,"db-change",e=>{if(e.target!==this.select)return;e.stopPropagation();const t=e.detail,i=t&&"object"==typeof t&&"value"in t?t.value:null,s=this.modelData.find(e=>e.id===i&&!e.disabled);s&&!this.blocked()&&this.dbEmit("model-change",{modelId:s.id}),this.render()}),this.render()}attributeChangedCallback(){this.isConnected&&this.render()}blocked(){return this.hasAttribute("disabled")||this.hasAttribute("loading")||this.hasAttribute("error")}render(){if(!this.select||!this.details)return;this.setAttribute("aria-busy",String(this.hasAttribute("loading")));const e=this.modelData.find(e=>e.id===this.getAttribute("selected-id")&&!e.disabled),s={label:this.getAttribute("label")||i("aiModel.label"),placeholder:this.hasAttribute("loading")?i("loading"):i("aiModel.choose"),options:JSON.stringify(this.modelData.map(e=>({value:e.id,label:e.disabledReason?`${e.label} · ${e.disabledReason}`:e.label,disabled:e.disabled}))),value:e?.id||""};for(const[e,t]of Object.entries(s))this.select.getAttribute(e)!==t&&this.select.setAttribute(e,t);this.select.toggleAttribute("disabled",this.blocked()||!this.modelData.length),this.details.replaceChildren();const a=this.getAttribute("error");if(a){const e=t("p","",a);e.setAttribute("role","alert"),this.details.append(e)}else if(!this.hasAttribute("loading"))if(this.modelData.length){if(e){this.details.append(t("p","",e.description));const s=t("div","designbase-wc-ai-model-select__meta","");s.append(t("span","",`${i("aiModel.capabilities")} ${e.capabilities.join(" · ")}`)),s.append(t("span","",`${i("aiModel.usage")} ${e.usageLabel}`)),this.details.append(s)}}else this.details.append(t("p","",i("aiModel.empty")))}}customElements.get("db-ai-model-select")||customElements.define("db-ai-model-select",DbAiModelSelect);export{DbAiModelSelect};

package/dist/esm/components/db-ai-plan.d.ts

@@ -0,0 +1,14 @@
+import { DbAiDataElement } from '../core/ai-element.js';
+
+/** AI Elements: plan. App-owned data and actions; no provider calls. */
+declare class DbAiPlan extends DbAiDataElement {
+    static get observedAttributes(): string[];
+    protected view(): Node[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-ai-plan': DbAiPlan;
+    }
+}
+
+export { DbAiPlan };

package/dist/esm/components/db-ai-plan.js

@@ -0,0 +1 @@
+import{DbAiDataElement as t,aiNode as e}from"../core/ai-element.js";class DbAiPlan extends t{static get observedAttributes(){return["items","label","status","open","disabled","action-label"]}view(){const t=this.rows.filter(t=>"complete"===t.status).length,s=e("div","designbase-wc-ai__timeline","");s.append(...this.rows.map(t=>this.itemLine(t)));const a=this.disclosure("root",this.attr("label","plan"),this.state,[s],this.hasAttribute("open"),"documentation");return a.querySelector("summary .designbase-wc-ai__label")?.append(e("span","designbase-wc-ai__meta",` ${t}/${this.rows.length}`)),this.hasAttribute("action-label")&&a.append(this.button("execute",this.attr("action-label"),"play")),[a]}}customElements.get("db-ai-plan")||customElements.define("db-ai-plan",DbAiPlan);export{DbAiPlan};

package/dist/esm/components/db-ai-queue.d.ts

@@ -0,0 +1,14 @@
+import { DbAiDataElement } from '../core/ai-element.js';
+
+/** AI Elements: queue. App-owned data and actions; no provider calls. */
+declare class DbAiQueue extends DbAiDataElement {
+    static get observedAttributes(): string[];
+    protected view(): Node[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-ai-queue': DbAiQueue;
+    }
+}
+
+export { DbAiQueue };

package/dist/esm/components/db-ai-queue.js

@@ -0,0 +1 @@
+import{DbAiDataElement as e,aiNode as t}from"../core/ai-element.js";import{t as i}from"../core/i18n.js";class DbAiQueue extends e{static get observedAttributes(){return["items","label","open","disabled"]}view(){const e=t("div","designbase-wc-ai__queue","");for(const s of this.rows){const o=t("div","designbase-wc-ai__queue-row","");o.append(this.itemLine(s),this.button("remove",i("aiElement.remove"),"close",s.id)),e.append(o)}return this.rows.length||e.append(t("p","designbase-wc-ai__description",i("aiElement.queueEmpty"))),[this.disclosure("root",`${this.attr("label","queue")} · ${this.rows.length}`,this.state,[e],this.hasAttribute("open"))]}}customElements.get("db-ai-queue")||customElements.define("db-ai-queue",DbAiQueue);export{DbAiQueue};

package/dist/esm/components/db-ai-reasoning.d.ts

@@ -0,0 +1,14 @@
+import { DbAiDataElement } from '../core/ai-element.js';
+
+/** AI Elements: reasoning. App-owned data and actions; no provider calls. */
+declare class DbAiReasoning extends DbAiDataElement {
+    static get observedAttributes(): string[];
+    protected view(): Node[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-ai-reasoning': DbAiReasoning;
+    }
+}
+
+export { DbAiReasoning };

package/dist/esm/components/db-ai-reasoning.js

@@ -0,0 +1 @@
+import{DbAiDataElement as t,aiNode as e}from"../core/ai-element.js";class DbAiReasoning extends t{static get observedAttributes(){return["label","description","status","open"]}view(){const t=e("p","designbase-wc-ai__reasoning-text",this.attr("description"));return[this.disclosure("root",this.attr("label","running"===this.state?"thinking":"reasoning"),this.state,[t],this.hasAttribute("open")||"running"===this.state,"bulb")]}}customElements.get("db-ai-reasoning")||customElements.define("db-ai-reasoning",DbAiReasoning);export{DbAiReasoning};

package/dist/esm/components/db-ai-sources.d.ts

@@ -0,0 +1,14 @@
+import { DbAiDataElement } from '../core/ai-element.js';
+
+/** AI Elements: sources. App-owned data and actions; no provider calls. */
+declare class DbAiSources extends DbAiDataElement {
+    static get observedAttributes(): string[];
+    protected view(): Node[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-ai-sources': DbAiSources;
+    }
+}
+
+export { DbAiSources };

package/dist/esm/components/db-ai-sources.js

@@ -0,0 +1 @@
+import{DbAiDataElement as e,aiNode as s,aiIcon as t,aiLink as o}from"../core/ai-element.js";class DbAiSources extends e{static get observedAttributes(){return["items","label","open"]}view(){const e=s("div","designbase-wc-ai__source-list","");for(const i of this.rows){const r=s("div","designbase-wc-ai__source-row","");r.append(t("globe"),o(i)),i.description&&r.append(s("span","designbase-wc-ai__meta",i.description)),e.append(r)}return[this.disclosure("root",`${this.attr("label","sources")} · ${this.rows.length}`,"complete",[e],this.hasAttribute("open"),"globe")]}}customElements.get("db-ai-sources")||customElements.define("db-ai-sources",DbAiSources);export{DbAiSources};

package/dist/esm/components/db-ai-stack-trace.d.ts

@@ -0,0 +1,14 @@
+import { DbAiDataElement } from '../core/ai-element.js';
+
+/** AI Elements: stack-trace. App-owned data and actions; no provider calls. */
+declare class DbAiStackTrace extends DbAiDataElement {
+    static get observedAttributes(): string[];
+    protected view(): Node[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-ai-stack-trace': DbAiStackTrace;
+    }
+}
+
+export { DbAiStackTrace };

package/dist/esm/components/db-ai-stack-trace.js

@@ -0,0 +1 @@
+import{DbAiDataElement as e,aiNode as t,aiCode as s}from"../core/ai-element.js";class DbAiStackTrace extends e{static get observedAttributes(){return["items","label","description","open","disabled"]}view(){const e=[];this.attr("description")&&e.push(t("p","designbase-wc-ai__error",this.attr("description")));for(const a of this.rows){const i=t("div","designbase-wc-ai__stack-frame","");i.append(this.button("file-open",a.label,"code",a.id)),a.meta&&i.append(t("span","designbase-wc-ai__meta",a.meta)),a.code&&i.append(s(a.code,a.language)),e.push(i)}return[this.disclosure("root",this.attr("label","stackTrace"),"error",e,this.hasAttribute("open"),"error-filled")]}}customElements.get("db-ai-stack-trace")||customElements.define("db-ai-stack-trace",DbAiStackTrace);export{DbAiStackTrace};

package/dist/esm/components/db-ai-subagent.d.ts

@@ -0,0 +1,14 @@
+import { DbAiDataElement } from '../core/ai-element.js';
+
+/** AI Elements: subagent. App-owned data and actions; no provider calls. */
+declare class DbAiSubagent extends DbAiDataElement {
+    static get observedAttributes(): string[];
+    protected view(): Node[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-ai-subagent': DbAiSubagent;
+    }
+}
+
+export { DbAiSubagent };

package/dist/esm/components/db-ai-subagent.js

@@ -0,0 +1 @@
+import{DbAiDataElement as t,aiNode as e}from"../core/ai-element.js";class DbAiSubagent extends t{static get observedAttributes(){return["items","label","description","status","open","action-label","disabled"]}view(){const t=[];this.attr("description")&&t.push(e("p","designbase-wc-ai__description",this.attr("description")));const s=e("div","designbase-wc-ai__timeline","");s.append(...this.rows.map(t=>this.itemLine(t))),t.push(s);const i=this.disclosure("root",this.attr("label","subagent"),this.state,t,this.hasAttribute("open"),"bulb");return this.hasAttribute("action-label")&&i.append(this.button("cancel",this.attr("action-label"),"close")),[i]}}customElements.get("db-ai-subagent")||customElements.define("db-ai-subagent",DbAiSubagent);export{DbAiSubagent};

package/dist/esm/components/db-ai-task-status.d.ts

@@ -0,0 +1,26 @@
+import { DbElement } from '../core/base-element.js';
+import './db-button.js';
+import './db-progressbar.js';
+import './db-spinner.js';
+
+type DbAiTaskState = 'idle' | 'queued' | 'running' | 'succeeded' | 'failed' | 'cancelled' | 'needs_attention';
+interface DbAiTaskAction {
+    taskId: string;
+}
+/** Display state comes from the app. No fake percentages, automatic retries or refunds. */
+declare class DbAiTaskStatus extends DbElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private state;
+    private actions;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-ai-task-status': DbAiTaskStatus;
+    }
+}
+
+export { DbAiTaskStatus };
+export type { DbAiTaskAction, DbAiTaskState };

package/dist/esm/components/db-ai-task-status.js

@@ -0,0 +1 @@
+import{DbElement as t}from"../core/base-element.js";import{textNode as e,creditText as s,creditNumber as i,creditAction as a,replaceView as r}from"../core/credit-ui.js";import{aiStatus as n}from"../core/ai-element.js";import{t as d}from"../core/i18n.js";import"./db-button.js";import"./db-progressbar.js";import"./db-spinner.js";const u=["idle","queued","running","succeeded","failed","cancelled","needs_attention"];class DbAiTaskStatus extends t{static get observedAttributes(){return["state","task-id","label","status-label","description","progress","reserved","charged","unit","cancel-label","retry-label","refresh-label","disabled","loading"]}connectedCallback(){this.cleanups.listen(this,"db-click",t=>{if(this.hasAttribute("disabled")||this.hasAttribute("loading"))return;const e=t.target,s=e instanceof HTMLElement?e.dataset.action:void 0;s&&this.actions().includes(s)&&this.dbEmit(s,{taskId:this.getAttribute("task-id")||""})}),this.render()}attributeChangedCallback(){this.isConnected&&this.render()}state(){const t=this.getAttribute("state");return u.includes(t)?t:"idle"}actions(){const t=this.state();return[...["queued","running"].includes(t)&&this.getAttribute("cancel-label")?["cancel"]:[],..."failed"===t&&this.getAttribute("retry-label")?["retry"]:[],...this.getAttribute("refresh-label")?["refresh"]:[]]}render(){const t="designbase-wc-ai-task-status";this.classList.add(t);const u=this.state();this.dataset.state=u;const l=e("div",`${t}__header`,""),c=e("div",`${t}__status`,this.getAttribute("status-label")||d(`aiTask.${u}`));c.setAttribute("role","status"),c.setAttribute("aria-atomic","true"),l.append(n("running"===u||"queued"===u?"running":"succeeded"===u?"complete":"failed"===u?"error":"pending"),e("strong",`${t}__title`,this.getAttribute("label")||d("aiTask.title")),c);const o=e("div",`${t}__body`,""),b=["queued","running"].includes(u);o.setAttribute("aria-busy",String(b));const h=this.getAttribute("description")||("needs_attention"===u?d("aiTask.attentionDescription"):"");h&&o.append(e("p",`${t}__description`,h));const g=this.getAttribute("progress"),p=null===g||""===g.trim()?NaN:Number(g);if("running"===u&&Number.isFinite(p)){const t=document.createElement("db-progressbar");t.setAttribute("value",String(Math.max(0,Math.min(100,p)))),t.setAttribute("label",this.getAttribute("label")||d("aiTask.title")),t.setAttribute("show-label",""),t.setAttribute("full-width",""),t.setAttribute("variant","primary"),o.append(t)}const m=e("div",`${t}__meta`,"");for(const[t,a]of[["reserved","credits.held"],["charged","credits.charged"]])this.hasAttribute(t)&&m.append(e("span","",`${d(a)} ${s(i(this.getAttribute(t)))} ${this.getAttribute("unit")||d("credits.unit")}`));o.append(m);const A=e("div",`${t}__actions`,"");for(const t of this.actions())A.append(a(t,this.getAttribute(`${t}-label`)||"",this.hasAttribute("disabled")||this.hasAttribute("loading")));r(this,l,o,A)}}customElements.get("db-ai-task-status")||customElements.define("db-ai-task-status",DbAiTaskStatus);export{DbAiTaskStatus};

package/dist/esm/components/db-ai-task.d.ts

@@ -0,0 +1,14 @@
+import { DbAiDataElement } from '../core/ai-element.js';
+
+/** AI Elements: task. App-owned data and actions; no provider calls. */
+declare class DbAiTask extends DbAiDataElement {
+    static get observedAttributes(): string[];
+    protected view(): Node[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-ai-task': DbAiTask;
+    }
+}
+
+export { DbAiTask };

package/dist/esm/components/db-ai-task.js

@@ -0,0 +1 @@
+import{DbAiDataElement as t,aiNode as s}from"../core/ai-element.js";class DbAiTask extends t{static get observedAttributes(){return["items","label","description","status","open"]}view(){const t=s("div","designbase-wc-ai__timeline","");t.append(...this.rows.map(t=>this.itemLine(t)));const e=[];return this.attr("description")&&e.push(s("p","designbase-wc-ai__description",this.attr("description"))),e.push(t),[this.disclosure("root",this.attr("label","task"),this.state,e,this.hasAttribute("open")||"running"===this.state)]}}customElements.get("db-ai-task")||customElements.define("db-ai-task",DbAiTask);export{DbAiTask};

package/dist/esm/components/db-ai-terminal.d.ts

@@ -0,0 +1,14 @@
+import { DbAiDataElement } from '../core/ai-element.js';
+
+/** AI Elements: terminal. App-owned data and actions; no provider calls. */
+declare class DbAiTerminal extends DbAiDataElement {
+    static get observedAttributes(): string[];
+    protected view(): Node[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-ai-terminal': DbAiTerminal;
+    }
+}
+
+export { DbAiTerminal };

package/dist/esm/components/db-ai-terminal.js

@@ -0,0 +1 @@
+import{DbAiDataElement as t,aiCode as e}from"../core/ai-element.js";class DbAiTerminal extends t{static get observedAttributes(){return["label","status","input","output","open"]}view(){const t=[];return this.attr("input")&&t.push(e(`$ ${this.attr("input")}`,"bash")),t.push(e(this.attr("output"),"text")),[this.disclosure("root",this.attr("label","terminal"),this.state,t,this.hasAttribute("open"),"code")]}}customElements.get("db-ai-terminal")||customElements.define("db-ai-terminal",DbAiTerminal);export{DbAiTerminal};

package/dist/esm/components/db-ai-test-results.d.ts

@@ -0,0 +1,14 @@
+import { DbAiDataElement } from '../core/ai-element.js';
+
+/** AI Elements: test-results. App-owned data and actions; no provider calls. */
+declare class DbAiTestResults extends DbAiDataElement {
+    static get observedAttributes(): string[];
+    protected view(): Node[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-ai-test-results': DbAiTestResults;
+    }
+}
+
+export { DbAiTestResults };

package/dist/esm/components/db-ai-test-results.js

@@ -0,0 +1 @@
+import{DbAiDataElement as t,aiNode as e}from"../core/ai-element.js";import{t as s}from"../core/i18n.js";class DbAiTestResults extends t{static get observedAttributes(){return["items","label","status","open"]}view(){const t=this.rows.filter(t=>"complete"===t.status).length,i=this.rows.filter(t=>"error"===t.status).length,r=e("div","designbase-wc-ai__timeline","");r.append(...this.rows.map(t=>this.itemLine(t)));const l=`${this.attr("label","tests")} · ${t} ${s("aiElement.passed")}${i?` · ${i} ${s("aiElement.failed")}`:""}`;return[this.disclosure("root",l,i?"error":this.state,[r],this.hasAttribute("open"),"circle-checked")]}}customElements.get("db-ai-test-results")||customElements.define("db-ai-test-results",DbAiTestResults);export{DbAiTestResults};

package/dist/esm/components/db-ai-tool.d.ts

@@ -0,0 +1,14 @@
+import { DbAiDataElement } from '../core/ai-element.js';
+
+/** AI Elements: tool. App-owned data and actions; no provider calls. */
+declare class DbAiTool extends DbAiDataElement {
+    static get observedAttributes(): string[];
+    protected view(): Node[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-ai-tool': DbAiTool;
+    }
+}
+
+export { DbAiTool };

package/dist/esm/components/db-ai-tool.js

@@ -0,0 +1 @@
+import{DbAiDataElement as t,aiNode as e,aiCode as s}from"../core/ai-element.js";import{t as i}from"../core/i18n.js";class DbAiTool extends t{static get observedAttributes(){return["label","description","status","input","output","language","open"]}view(){const t=[];for(const o of["input","output"])this.hasAttribute(o)&&t.push(e("span","designbase-wc-ai__meta",i(`aiElement.${o}`)),s(this.attr(o),this.attr("language")||"json"));return this.attr("description")&&t.push(e("p","designbase-wc-ai__description",this.attr("description"))),[this.disclosure("root",this.attr("label","tool"),this.state,t,this.hasAttribute("open"),"code")]}}customElements.get("db-ai-tool")||customElements.define("db-ai-tool",DbAiTool);export{DbAiTool};