@designbasekorea/ui-wc 0.8.12 → 0.9.0

package/dist/esm/components/db-tweet-card.d.ts

@@ -0,0 +1,101 @@
+import { TweetCardVariant, TweetCardSize } from '../ui-contracts/dist/components.d.js';
+
+interface DbTweetData {
+    id?: string;
+    text?: string;
+    authorName?: string;
+    username?: string;
+    avatar?: string;
+    verified?: boolean;
+    createdAt?: string;
+    likes?: number;
+    retweets?: number;
+    replies?: number;
+    views?: number;
+    mediaUrl?: string;
+    tweetUrl?: string;
+}
+declare class DbTweetCard extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private abortController;
+    private isLiked;
+    private localLikes;
+    private headerEl?;
+    private avatarImg?;
+    private avatarFallback?;
+    private authorNameEl?;
+    private authorHandleEl?;
+    private verifiedBadgeEl?;
+    private xLogoLink?;
+    private bodyEl?;
+    private mediaContainer?;
+    private mediaImg?;
+    private dateEl?;
+    private actionsRow?;
+    private replyBtn?;
+    private replyCountSpan?;
+    private retweetBtn?;
+    private retweetCountSpan?;
+    private likeBtn?;
+    private likeCountSpan?;
+    private shareBtn?;
+    private skeletonEl?;
+    private errorEl?;
+    private errorTextEl?;
+    private retryBtn?;
+    get tweetId(): string;
+    set tweetId(value: string);
+    get authorName(): string;
+    set authorName(value: string);
+    get username(): string;
+    set username(value: string);
+    get avatar(): string;
+    set avatar(value: string);
+    get verified(): boolean;
+    set verified(value: boolean);
+    get content(): string;
+    set content(value: string);
+    get date(): string;
+    set date(value: string);
+    get likes(): number;
+    set likes(value: number);
+    get retweets(): number;
+    set retweets(value: number);
+    get replies(): number;
+    set replies(value: number);
+    get media(): string;
+    set media(value: string);
+    get href(): string;
+    set href(value: string);
+    get variant(): TweetCardVariant;
+    set variant(value: TweetCardVariant);
+    get size(): TweetCardSize;
+    set size(value: TweetCardSize);
+    get loading(): boolean;
+    set loading(value: boolean);
+    get error(): string;
+    set error(value: string);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    private fetchTweetData;
+    private applyTweetPayload;
+    private handleReplyClick;
+    private handleRetweetClick;
+    private handleLikeClick;
+    private handleShareClick;
+    private handleRetryClick;
+    private getTweetUrl;
+    private build;
+    private updateLikeButton;
+    private sync;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-tweet-card': DbTweetCard;
+    }
+}
+
+export { DbTweetCard };
+export type { DbTweetData };

package/dist/esm/components/db-tweet-card.js

@@ -0,0 +1 @@
+import{createDbIcon as t}from"./db-icons.js";import{sanitizeHref as e}from"../core/safe-url.js";import{t as i}from"../core/i18n.js";import{coerceToContract as s}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{TWEET_CARD_VARIANTS as a,TWEET_CARD_SIZES as r}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const n="designbase-wc-tweet-card";function formatCount(t){return!Number.isFinite(t)||t<=0?"0":t>=1e6?(t/1e6).toFixed(1).replace(/\.0$/,"")+"M":t>=1e3?(t/1e3).toFixed(1).replace(/\.0$/,"")+"K":String(t)}class DbTweetCard extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.abortController=null,this.isLiked=!1,this.localLikes=0,this.handleReplyClick=t=>{t.stopPropagation(),this.dispatchEvent(new CustomEvent("db-reply",{bubbles:!0,composed:!0,detail:{tweetId:this.tweetId,username:this.username}}))},this.handleRetweetClick=t=>{t.stopPropagation(),this.dispatchEvent(new CustomEvent("db-retweet",{bubbles:!0,composed:!0,detail:{tweetId:this.tweetId,username:this.username}}))},this.handleLikeClick=t=>{t.stopPropagation(),this.isLiked=!this.isLiked,this.localLikes+=this.isLiked?1:-1,this.updateLikeButton(),this.dispatchEvent(new CustomEvent("db-like",{bubbles:!0,composed:!0,detail:{tweetId:this.tweetId,username:this.username,liked:this.isLiked,count:this.localLikes}}))},this.handleShareClick=t=>{t.stopPropagation();const e=this.getTweetUrl();this.dispatchEvent(new CustomEvent("db-share",{bubbles:!0,composed:!0,detail:{tweetId:this.tweetId,url:e}}))},this.handleRetryClick=t=>{t.stopPropagation(),this.tweetId&&this.fetchTweetData(this.tweetId)}}static get observedAttributes(){return["tweet-id","author-name","author-handle","username","author-avatar","avatar","verified","content","text","date","timestamp","likes","retweets","replies","views","media","href","variant","size","loading","error"]}get tweetId(){return this.getAttribute("tweet-id")||this.getAttribute("id")||""}set tweetId(t){this.setAttribute("tweet-id",t)}get authorName(){return this.getAttribute("author-name")||""}set authorName(t){this.setAttribute("author-name",t)}get username(){return(this.getAttribute("author-handle")||this.getAttribute("username")||"").replace(/^@/,"")}set username(t){this.setAttribute("username",t)}get avatar(){return this.getAttribute("author-avatar")||this.getAttribute("avatar")||""}set avatar(t){this.setAttribute("avatar",t)}get verified(){return this.hasAttribute("verified")}set verified(t){this.toggleAttribute("verified",t)}get content(){return this.getAttribute("content")||this.getAttribute("text")||""}set content(t){this.setAttribute("content",t)}get date(){return this.getAttribute("date")||this.getAttribute("timestamp")||""}set date(t){this.setAttribute("date",t)}get likes(){return parseInt(this.getAttribute("likes")||"0",10)||0}set likes(t){this.setAttribute("likes",String(t))}get retweets(){return parseInt(this.getAttribute("retweets")||"0",10)||0}set retweets(t){this.setAttribute("retweets",String(t))}get replies(){return parseInt(this.getAttribute("replies")||"0",10)||0}set replies(t){this.setAttribute("replies",String(t))}get media(){return this.getAttribute("media")||""}set media(t){this.setAttribute("media",t)}get href(){return this.getAttribute("href")||""}set href(t){this.setAttribute("href",t)}get variant(){return s(this.getAttribute("variant"),a,"default")}set variant(t){this.setAttribute("variant",t)}get size(){return s(this.getAttribute("size"),r,"m")}set size(t){this.setAttribute("size",t)}get loading(){return this.hasAttribute("loading")}set loading(t){this.toggleAttribute("loading",t)}get error(){return this.getAttribute("error")||""}set error(t){t?this.setAttribute("error",t):this.removeAttribute("error")}connectedCallback(){this.setAttribute("role","article"),this.built||(this.build(),this.built=!0),this.sync(),!this.tweetId||this.content||this.authorName||this.error||this.fetchTweetData(this.tweetId)}disconnectedCallback(){this.abortController?.abort(),this.replyBtn?.removeEventListener("click",this.handleReplyClick),this.retweetBtn?.removeEventListener("click",this.handleRetweetClick),this.likeBtn?.removeEventListener("click",this.handleLikeClick),this.shareBtn?.removeEventListener("click",this.handleShareClick),this.retryBtn?.removeEventListener("click",this.handleRetryClick)}attributeChangedCallback(t,e,i){this.built&&e!==i&&("tweet-id"!==t||!i||this.content||this.authorName?this.sync():this.fetchTweetData(i))}async fetchTweetData(t){this.abortController?.abort(),this.abortController=new AbortController,this.loading=!0,this.error="",this.sync();try{const e=`https://react-tweet.vercel.app/api/tweet/${t}`,i=await fetch(e,{signal:this.abortController.signal});if(!i.ok)throw new Error("Status "+i.status);const s=await i.json(),a=s.data||s;this.applyTweetPayload(a),this.loading=!1,this.error="",this.sync()}catch(t){if(this.abortController.signal.aborted)return;this.loading=!1,this.error=t instanceof Error?t.message:"Error",this.sync()}}applyTweetPayload(t){t&&(t.user&&(this.authorName=t.user.name||"",this.username=t.user.screen_name||"",this.avatar=t.user.profile_image_url_https||"",this.verified=Boolean(t.user.verified)),this.content=t.text||"",null!=t.favorite_count&&(this.likes=t.favorite_count),null!=t.retweet_count&&(this.retweets=t.retweet_count),null!=t.reply_count&&(this.replies=t.reply_count),t.created_at&&(this.date=t.created_at),t.photos&&t.photos.length>0?this.media=t.photos[0].url||"":t.mediaDetails&&t.mediaDetails.length>0&&(this.media=t.mediaDetails[0].media_url_https||""))}getTweetUrl(){return this.href?e(this.href):this.username&&this.tweetId?`https://x.com/${this.username}/status/${this.tweetId}`:this.tweetId?`https://x.com/i/status/${this.tweetId}`:"https://x.com"}build(){this.skeletonEl=document.createElement("div"),this.skeletonEl.className=`${n}__skeleton`,this.skeletonEl.setAttribute("aria-hidden","true");const e=document.createElement("div");e.className=`${n}__skel-header`;const s=document.createElement("div");s.className=`${n}__skel-avatar`;const a=document.createElement("div");a.className=`${n}__skel-info`;const r=document.createElement("div");r.className=`${n}__skel-line ${n}__skel-line--short`;const h=document.createElement("div");h.className=`${n}__skel-line ${n}__skel-line--xshort`,a.append(r,h),e.append(s,a);const l=document.createElement("div");l.className=`${n}__skel-body`;const o=document.createElement("div");o.className=`${n}__skel-line`;const d=document.createElement("div");d.className=`${n}__skel-line`;const c=document.createElement("div");c.className=`${n}__skel-line ${n}__skel-line--mid`,l.append(o,d,c),this.skeletonEl.append(e,l),this.errorEl=document.createElement("div"),this.errorEl.className=`${n}__error`,this.errorTextEl=document.createElement("span"),this.errorTextEl.className=`${n}__error-text`,this.retryBtn=document.createElement("button"),this.retryBtn.type="button",this.retryBtn.className=`${n}__retry-btn`,this.retryBtn.textContent=i("tweetCard.retry"),this.retryBtn.addEventListener("click",this.handleRetryClick),this.errorEl.append(this.errorTextEl,this.retryBtn),this.headerEl=document.createElement("div"),this.headerEl.className=`${n}__header`;const u=document.createElement("div");u.className=`${n}__user`,this.avatarImg=document.createElement("img"),this.avatarImg.className=`${n}__avatar`,this.avatarImg.alt="",this.avatarImg.setAttribute("aria-hidden","true"),this.avatarFallback=document.createElement("div"),this.avatarFallback.className=`${n}__avatar ${n}__avatar--fallback`,this.avatarFallback.setAttribute("aria-hidden","true");const m=document.createElement("div");m.className=`${n}__meta`;const p=document.createElement("div");p.className=`${n}__name-line`,this.authorNameEl=document.createElement("span"),this.authorNameEl.className=`${n}__author-name`,this.verifiedBadgeEl=document.createElement("span"),this.verifiedBadgeEl.className=`${n}__verified`,this.verifiedBadgeEl.title=i("tweetCard.verified"),this.verifiedBadgeEl.append(t("verified-badge",16)),p.append(this.authorNameEl,this.verifiedBadgeEl),this.authorHandleEl=document.createElement("span"),this.authorHandleEl.className=`${n}__username`,m.append(p,this.authorHandleEl),u.append(this.avatarImg,this.avatarFallback,m),this.xLogoLink=document.createElement("a"),this.xLogoLink.className=`${n}__logo-link`,this.xLogoLink.target="_blank",this.xLogoLink.rel="noopener noreferrer",this.xLogoLink.setAttribute("aria-label",i("tweetCard.viewOnTwitter")),this.xLogoLink.append(t("x-logo",18)),this.headerEl.append(u,this.xLogoLink),this.bodyEl=document.createElement("div"),this.bodyEl.className=`${n}__body`,this.mediaContainer=document.createElement("div"),this.mediaContainer.className=`${n}__media`,this.mediaImg=document.createElement("img"),this.mediaImg.loading="lazy",this.mediaImg.alt="",this.mediaContainer.append(this.mediaImg),this.dateEl=document.createElement("div"),this.dateEl.className=`${n}__date`,this.actionsRow=document.createElement("div"),this.actionsRow.className=`${n}__actions`,this.replyBtn=document.createElement("button"),this.replyBtn.type="button",this.replyBtn.className=`${n}__action-btn ${n}__action-btn--reply`,this.replyBtn.setAttribute("aria-label",i("tweetCard.reply")),this.replyBtn.append(t("comment",16)),this.replyCountSpan=document.createElement("span"),this.replyBtn.append(this.replyCountSpan),this.replyBtn.addEventListener("click",this.handleReplyClick),this.retweetBtn=document.createElement("button"),this.retweetBtn.type="button",this.retweetBtn.className=`${n}__action-btn ${n}__action-btn--retweet`,this.retweetBtn.setAttribute("aria-label",i("tweetCard.retweet")),this.retweetBtn.append(t("repeat",16)),this.retweetCountSpan=document.createElement("span"),this.retweetBtn.append(this.retweetCountSpan),this.retweetBtn.addEventListener("click",this.handleRetweetClick),this.likeBtn=document.createElement("button"),this.likeBtn.type="button",this.likeBtn.className=`${n}__action-btn ${n}__action-btn--like`,this.likeBtn.setAttribute("aria-label",i("tweetCard.like")),this.likeCountSpan=document.createElement("span"),this.likeBtn.append(t("heart",16),this.likeCountSpan),this.likeBtn.addEventListener("click",this.handleLikeClick),this.shareBtn=document.createElement("button"),this.shareBtn.type="button",this.shareBtn.className=`${n}__action-btn ${n}__action-btn--share`,this.shareBtn.setAttribute("aria-label","Share"),this.shareBtn.append(t("share-alt",16)),this.shareBtn.addEventListener("click",this.handleShareClick),this.actionsRow.append(this.replyBtn,this.retweetBtn,this.likeBtn,this.shareBtn),this.append(this.skeletonEl,this.errorEl,this.headerEl,this.bodyEl,this.mediaContainer,this.dateEl,this.actionsRow)}updateLikeButton(){if(!this.likeBtn||!this.likeCountSpan)return;this.likeBtn.classList.toggle(`${n}__action-btn--liked`,this.isLiked);const e=t(this.isLiked?"heart-filled":"heart",16);this.likeBtn.replaceChildren(e,this.likeCountSpan),this.likeCountSpan.textContent=formatCount(this.localLikes)}sync(){this.classList.add(n),a.forEach(t=>this.classList.remove(`${n}--${t}`)),r.forEach(t=>this.classList.remove(`${n}--${t}`)),this.classList.add(`${n}--${this.variant}`),this.classList.add(`${n}--${this.size}`);const t=this.loading,s=Boolean(this.error);this.classList.toggle(`${n}--loading`,t),this.classList.toggle(`${n}--error`,s),this.setAttribute("aria-busy",String(t)),s?this.setAttribute("aria-invalid","true"):this.removeAttribute("aria-invalid"),this.skeletonEl&&(this.skeletonEl.hidden=!t),this.errorEl&&(this.errorEl.hidden=!s||t,this.errorTextEl&&(this.errorTextEl.textContent=this.error||i("tweetCard.error")));const h=!t&&!s;if(this.headerEl&&(this.headerEl.hidden=!h),this.bodyEl&&(this.bodyEl.hidden=!h),this.mediaContainer&&(this.mediaContainer.hidden=!h||!this.media),this.dateEl&&(this.dateEl.hidden=!h||!this.date),this.actionsRow&&(this.actionsRow.hidden=!h),!h)return;this.authorNameEl&&(this.authorNameEl.textContent=this.authorName||this.username||"User"),this.authorHandleEl&&(this.authorHandleEl.textContent=this.username?`@${this.username}`:"",this.authorHandleEl.hidden=!this.username),this.verifiedBadgeEl&&(this.verifiedBadgeEl.hidden=!this.verified);const l=this.avatar;l&&this.avatarImg?(this.avatarImg.src=e(l),this.avatarImg.hidden=!1,this.avatarFallback&&(this.avatarFallback.hidden=!0)):this.avatarFallback&&(this.avatarFallback.textContent=(this.authorName||this.username||"U").charAt(0).toUpperCase(),this.avatarFallback.hidden=!1,this.avatarImg&&(this.avatarImg.hidden=!0));const o=this.getTweetUrl();if(this.xLogoLink&&(this.xLogoLink.href=o),this.bodyEl){const t=this.content;this.bodyEl.replaceChildren(...function parseTweetContentNodes(t){const i=[],s=/(https?:\/\/[^\s]+)|(@[a-zA-Z0-9_]+)|(#[a-zA-Z0-9_\u0080-\uffff]+)/g;let a,r=0;for(;null!==(a=s.exec(t));){a.index>r&&i.push(document.createTextNode(t.slice(r,a.index)));const s=a[0],h=document.createElement("a");h.className=`${n}__link`,h.textContent=s,h.target="_blank",h.rel="noopener noreferrer",s.startsWith("http")?h.href=e(s):s.startsWith("@")?h.href=e(`https://x.com/${s.slice(1)}`):s.startsWith("#")&&(h.href=e(`https://x.com/hashtag/${s.slice(1)}`)),i.push(h),r=a.index+s.length}return r<t.length&&i.push(document.createTextNode(t.slice(r))),i}(t))}this.mediaImg&&this.media&&(this.mediaImg.src=e(this.media)),this.dateEl&&this.date&&(this.dateEl.textContent=this.date),this.localLikes=this.likes,this.replyCountSpan&&(this.replyCountSpan.textContent=formatCount(this.replies)),this.retweetCountSpan&&(this.retweetCountSpan.textContent=formatCount(this.retweets)),this.updateLikeButton()}}customElements.get("db-tweet-card")||customElements.define("db-tweet-card",DbTweetCard);export{DbTweetCard};

package/dist/esm/components/db-two-factor.d.ts

@@ -2,7 +2,7 @@ import './db-button.js';
 import './db-input.js';
 import './db-otp-input.js';
 import './db-segment-control.js';
-import { TWO_FACTOR_SIZES } from '@designbasekorea/ui-contracts';
+import { TWO_FACTOR_SIZES } from '../ui-contracts/dist/components.d.js';
 
 /**
  * ui-wc — db-two-factor (수동 작성, 자동 동기화 대상 아님)

package/dist/esm/components/db-voice-control.d.ts

@@ -0,0 +1,25 @@
+import './db-button.js';
+
+type DbVoiceState = 'idle' | 'starting' | 'listening' | 'stopping' | 'completed' | 'cancelled' | 'error' | 'unsupported';
+/** Controlled voice UI only: emits intent, never opens the microphone or uploads audio. */
+declare class DbVoiceControl extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private action;
+    private cancel;
+    private label;
+    private status;
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private get active();
+    private emit;
+    private sync;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-voice-control': DbVoiceControl;
+    }
+}
+
+export { DbVoiceControl };
+export type { DbVoiceState };

package/dist/esm/components/db-voice-control.js

@@ -0,0 +1 @@
+import"./db-button.js";class DbVoiceControl extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["state","message","disabled","compact","start-label","stop-label","cancel-label"]}connectedCallback(){this.built||(this.built=!0,this.classList.add("designbase-wc-voice-control"),this.action=document.createElement("db-button"),this.label=document.createElement("span"),this.action.append(this.label),this.action.setAttribute("size","m"),this.action.setAttribute("radius","pill"),this.action.addEventListener("db-click",()=>{this.hasAttribute("disabled")||"unsupported"===this.getAttribute("state")||"stopping"===this.getAttribute("state")||this.emit(this.active?"stop":"start")}),this.cancel=document.createElement("db-button"),this.cancel.setAttribute("variant","ghost"),this.cancel.setAttribute("size","s"),this.cancel.setAttribute("start-icon","close"),this.cancel.setAttribute("icon-only",""),this.cancel.addEventListener("db-click",()=>{!this.hasAttribute("disabled")&&this.active&&this.emit("cancel")}),this.status=document.createElement("span"),this.status.setAttribute("role","status"),this.status.setAttribute("aria-live","polite"),this.append(this.action,this.status,this.cancel)),this.sync()}attributeChangedCallback(){this.built&&this.sync()}get active(){return["starting","listening","stopping"].includes(this.getAttribute("state")||"idle")}emit(t){this.dispatchEvent(new CustomEvent(`db-${t}`,{bubbles:!0,composed:!0}))}sync(){const t=this.getAttribute("state")||"idle",e=this.active?this.getAttribute("stop-label")||"받아쓰기 완료":this.getAttribute("start-label")||"음성 입력";this.action.setAttribute("aria-label",e),this.action.setAttribute("aria-pressed",String(this.active)),this.action.setAttribute("variant",this.active?"secondary":"ghost"),this.action.setAttribute("start-icon",this.active?"stop":"microphone"),this.action.toggleAttribute("icon-only",this.hasAttribute("compact")),this.label.textContent=e,this.label.hidden=this.hasAttribute("compact"),this.action.toggleAttribute("disabled",this.hasAttribute("disabled")||"unsupported"===t||"stopping"===t);this.status.textContent=this.getAttribute("message")||{starting:"마이크 연결 중",listening:"음성 인식 중",stopping:"마지막 문장 확인 중",error:"음성 인식 실패",unsupported:"음성 입력 미지원"}[t]||"",this.status.hidden=!this.status.textContent,this.cancel.hidden=!this.active,this.cancel.toggleAttribute("disabled",this.hasAttribute("disabled")),this.cancel.setAttribute("aria-label",this.getAttribute("cancel-label")||"음성 입력 취소"),this.dataset.active=String(this.active)}}customElements.get("db-voice-control")||customElements.define("db-voice-control",DbVoiceControl);export{DbVoiceControl};

package/dist/esm/components/db-workspace-invite-modal.d.ts

@@ -0,0 +1,51 @@
+import './db-button.js';
+import { DbElement } from '../core/base-element.js';
+import './db-modal.js';
+import './db-input.js';
+import './db-select.js';
+
+interface DbWorkspaceInviteRole {
+    id: string;
+    label: string;
+}
+interface DbWorkspaceInviteDraft {
+    email: string;
+    roleId: string;
+}
+/** Owns an unsaved UI draft. Emits intent only; never sends mail or grants membership. */
+declare class DbWorkspaceInviteModal extends DbElement {
+    private roleData;
+    private emailDraft;
+    private roleDraft;
+    private fieldError;
+    private modal?;
+    private emailField?;
+    private roleField?;
+    private message?;
+    private intro?;
+    private readonly descriptionId;
+    private confirm?;
+    static get observedAttributes(): string[];
+    get roles(): DbWorkspaceInviteRole[];
+    set roles(value: DbWorkspaceInviteRole[]);
+    get open(): boolean;
+    set open(value: boolean);
+    get draft(): DbWorkspaceInviteDraft;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private blocked;
+    private validateEmail;
+    private submit;
+    private ensureView;
+    private syncErrors;
+    private sync;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-workspace-invite-modal': DbWorkspaceInviteModal;
+    }
+}
+
+export { DbWorkspaceInviteModal };
+export type { DbWorkspaceInviteDraft, DbWorkspaceInviteRole };

package/dist/esm/components/db-workspace-invite-modal.js

@@ -0,0 +1 @@
+import"./db-button.js";import{DbElement as t}from"../core/base-element.js";import{textNode as e,creditAction as i}from"../core/credit-ui.js";import{dbUid as s}from"../core/uid.js";import{t as r}from"../core/i18n.js";import"./db-modal.js";import"./db-input.js";import"./db-select.js";class DbWorkspaceInviteModal extends t{constructor(){super(...arguments),this.roleData=[],this.emailDraft="",this.roleDraft="",this.fieldError="",this.descriptionId=s("workspace-invite-description")}static get observedAttributes(){return["open","title","description","loading","disabled","error","default-role-id","reset-key"]}get roles(){return this.roleData.map(t=>({...t}))}set roles(t){const e=new Set;this.roleData=Array.isArray(t)?t.filter(t=>!(!t||"string"!=typeof t.id||!t.id||e.has(t.id)||"string"!=typeof t.label)&&(e.add(t.id),!0)).map(t=>({...t})):[],this.isConnected&&this.sync()}get open(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}set open(t){this.toggleAttribute("open",t)}get draft(){return{email:this.emailDraft,roleId:this.roleDraft}}connectedCallback(){this.upgradeProperties(["roles","open"]),this.ensureView(),this.cleanups.listen(this.modal,"db-close",t=>{t.stopPropagation(),this.open=!1,this.dbEmit("close")}),this.cleanups.listen(this.emailField,"db-input",()=>{this.emailDraft=this.emailField.value,this.fieldError="",this.syncErrors(),this.dbEmit("draft-change",this.draft)}),this.cleanups.listen(this.emailField,"focusout",()=>this.validateEmail()),this.cleanups.listen(this.emailField,"keydown",t=>{"Enter"===t.key&&(t.preventDefault(),this.submit())}),this.cleanups.listen(this.roleField,"db-change",t=>{t.stopPropagation(),this.roleDraft=this.roleField.value,this.syncErrors(),this.dbEmit("draft-change",this.draft)}),this.cleanups.listen(this.confirm,"db-click",()=>this.submit()),this.sync()}disconnectedCallback(){this.modal?.remove(),this.modal=void 0,super.disconnectedCallback()}attributeChangedCallback(t,e,i){e!==i&&("reset-key"===t&&(this.emailDraft="",this.roleDraft="",this.fieldError=""),this.isConnected&&this.sync())}blocked(){return this.hasAttribute("loading")||this.hasAttribute("disabled")}validateEmail(){const t=this.emailDraft.trim(),e=this.emailField?.querySelector("input"),i=!!t&&t.length<=254&&!!e?.validity.valid;return this.fieldError=i?"":r("workspace.emailError"),this.syncErrors(),i}submit(){if(!this.blocked()&&this.open){if(this.validateEmail())return this.roleData.some(t=>t.id===this.roleDraft)?void this.dbEmit("invite",{email:this.emailDraft.trim(),roleId:this.roleDraft}):(this.roleField?.setAttribute("error",""),this.roleField?.setAttribute("error-message",r("workspace.roleError")),void this.roleField?.querySelector('[role="combobox"]')?.focus());this.emailField?.focus()}}ensureView(){if(this.modal)return;this.modal=document.createElement("db-modal"),this.modal.setAttribute("size","m");const t=e("div","designbase-wc-workspace-invite-modal__body","");t.setAttribute("data-modal-part","body"),this.intro=e("p","designbase-wc-workspace-invite-modal__intro",""),this.intro.id=this.descriptionId,this.emailField=document.createElement("db-input"),this.emailField.setAttribute("type","email"),this.emailField.setAttribute("required",""),this.emailField.setAttribute("label",r("workspace.email")),this.emailField.setAttribute("placeholder","name@company.com"),this.roleField=document.createElement("db-select"),this.roleField.setAttribute("label",r("workspace.role")),this.roleField.setAttribute("placeholder",r("workspace.chooseRole")),this.roleField.setAttribute("full-width",""),this.roleField.setAttribute("show-clear-button","false"),this.message=e("p","designbase-wc-workspace-invite-modal__message",""),this.message.setAttribute("role","alert"),t.append(this.intro,this.emailField,this.roleField,this.message);const s=e("div","designbase-wc-workspace-invite-modal__footer","");s.setAttribute("data-modal-part","footer"),this.confirm=i("workspace-send-invite",r("workspace.submit"),!1),this.confirm.setAttribute("variant","primary"),this.confirm.setAttribute("size","m"),s.append(this.confirm),this.modal.append(t,s),this.append(this.modal)}syncErrors(){this.emailField&&this.roleField&&this.message&&(this.emailField.toggleAttribute("error",!!this.fieldError),this.emailField.setAttribute("error-message",this.fieldError),this.roleField.removeAttribute("error"),this.roleField.removeAttribute("error-message"),this.message.textContent=this.getAttribute("error")||"",this.message.hidden=!this.message.textContent)}sync(){if(this.modal&&this.emailField&&this.roleField&&this.confirm){this.roleDraft||(this.roleDraft=this.getAttribute("default-role-id")||""),this.modal.setAttribute("title",this.getAttribute("title")||r("workspace.invite")),this.intro.textContent=this.getAttribute("description")||r("workspace.description"),this.modal.setAttribute("describedby",this.descriptionId);for(const t of["show-close-button","close-on-escape","close-on-outside-click"])this.modal.setAttribute(t,String(!this.hasAttribute("loading")));this.emailField.value!==this.emailDraft&&(this.emailField.value=this.emailDraft),this.emailField.toggleAttribute("disabled",this.blocked()),this.roleField.toggleAttribute("disabled",this.blocked()),this.roleField.setAttribute("options",JSON.stringify(this.roleData.map(t=>({value:t.id,label:t.label})))),this.roleField.value=this.roleDraft,this.confirm.toggleAttribute("disabled",this.blocked()||!this.roleData.length),this.confirm.toggleAttribute("loading",this.hasAttribute("loading")),this.syncErrors(),this.modal.open!==this.open&&(this.modal.open=this.open)}}}customElements.get("db-workspace-invite-modal")||customElements.define("db-workspace-invite-modal",DbWorkspaceInviteModal);export{DbWorkspaceInviteModal};

package/dist/esm/components/db-workspace-members.d.ts

@@ -0,0 +1,36 @@
+import './db-button.js';
+import { DbElement } from '../core/base-element.js';
+import './db-avatar.js';
+import './db-badge.js';
+
+type DbWorkspaceMemberState = 'active' | 'invited' | 'expired';
+interface DbWorkspaceMember {
+    id: string;
+    name: string;
+    email: string;
+    roleLabel: string;
+    state: DbWorkspaceMemberState;
+    canReinvite?: boolean;
+}
+interface DbWorkspaceMemberAction {
+    id: string;
+}
+/** Display only. Roles and invitation status must come from the product's server. */
+declare class DbWorkspaceMembers extends DbElement {
+    private data;
+    static get observedAttributes(): string[];
+    get members(): DbWorkspaceMember[];
+    set members(value: DbWorkspaceMember[]);
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private blocked;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-workspace-members': DbWorkspaceMembers;
+    }
+}
+
+export { DbWorkspaceMembers };
+export type { DbWorkspaceMember, DbWorkspaceMemberAction, DbWorkspaceMemberState };

package/dist/esm/components/db-workspace-members.js

@@ -0,0 +1 @@
+import"./db-button.js";import{createDbIcon as e}from"./db-icons.js";import{DbElement as t}from"../core/base-element.js";import{textNode as i,creditAction as s,replaceView as r}from"../core/credit-ui.js";import{t as a}from"../core/i18n.js";import"./db-avatar.js";import"./db-badge.js";class DbWorkspaceMembers extends t{constructor(){super(...arguments),this.data=[]}static get observedAttributes(){return["label","invite-label","loading","pending","disabled","error"]}get members(){return this.data.map(e=>({...e}))}set members(e){const t=new Set;this.data=Array.isArray(e)?e.filter(e=>!(!e||"string"!=typeof e.id||!e.id||t.has(e.id)||"string"!=typeof e.name||"string"!=typeof e.email||"string"!=typeof e.roleLabel||!["active","invited","expired"].includes(e.state)||void 0!==e.canReinvite&&"boolean"!=typeof e.canReinvite)&&(t.add(e.id),!0)).map(e=>({...e})):[],this.isConnected&&this.render()}connectedCallback(){this.upgradeProperties(["members"]),this.cleanups.listen(this,"db-click",e=>{if(!(e.target instanceof HTMLElement)||this.blocked())return;const t=e.target,i=t.dataset.action;if("workspace-retry"===i)return void this.dbEmit("retry");if(this.hasAttribute("error"))return;"workspace-invite"===i&&this.hasAttribute("invite-label")&&this.dbEmit("invite");const s=this.data.find(e=>e.id===t.dataset.memberId);s&&i===`workspace-reinvite:${s.id}`&&"active"!==s.state&&s.canReinvite&&this.dbEmit("reinvite",{id:s.id})}),this.render()}attributeChangedCallback(){this.isConnected&&this.render()}blocked(){return["loading","pending","disabled"].some(e=>this.hasAttribute(e))}render(){const t="designbase-wc-workspace-members";this.classList.add(t),this.setAttribute("aria-busy",String(this.hasAttribute("loading")||this.hasAttribute("pending")));const n=i("div",`${t}__header`,"");n.append(i("h3","",this.getAttribute("label")||a("workspace.members"))),this.hasAttribute("invite-label")&&n.append(s("workspace-invite",this.getAttribute("invite-label")||a("workspace.invite"),this.blocked()||this.hasAttribute("error")));const o=[n],d=this.getAttribute("error");if(d){const e=i("p","",d);e.setAttribute("role","alert"),o.push(e,s("workspace-retry",a("workspace.retry"),this.blocked()))}if(this.hasAttribute("loading")||!this.data.length){const e=i("p",`${t}__message`,a(this.hasAttribute("loading")?"loading":"workspace.empty"));e.setAttribute("role","status"),o.push(e)}else{const r=i("ul",`${t}__list`,"");for(const n of this.data){const o=i("li",`${t}__row`,"");o.dataset.state=n.state;const c=document.createElement("db-avatar");c.setAttribute("initials",(n.name||n.email).slice(0,2)),c.setAttribute("size","m"),c.setAttribute("aria-hidden","true");const b=i("div",`${t}__identity`,"");b.append(i("strong","",n.name||n.email),i("span","",n.email));const p=i("div",`${t}__meta`,""),l=document.createElement("db-badge");if(l.setAttribute("type","text"),l.setAttribute("variant","secondary"),l.textContent=a(`workspace.${n.state}`),l.prepend(e("active"===n.state?"circle-checked":"expired"===n.state?"error-filled":"clock",14)),p.append(i("span","",n.roleLabel),l),o.append(c,b,p),"active"!==n.state&&n.canReinvite){const e=s(`workspace-reinvite:${n.id}`,a("workspace.reinvite"),this.blocked()||!!d);e.dataset.memberId=n.id,o.append(e)}r.append(o)}o.push(r)}r(this,...o)}}customElements.get("db-workspace-members")||customElements.define("db-workspace-members",DbWorkspaceMembers);export{DbWorkspaceMembers};

package/dist/esm/components/device-mockup-style.js

@@ -0,0 +1 @@
+const a="\n:host { display:block; inline-size:100%; max-inline-size:960px; min-inline-size:0; container-type:inline-size; color:var(--db-text-primary); --shell-radius:12px; --shell-pad:0px; --safe-top:0px; --hardware:var(--db-mockup-bezel, var(--color-foundation-neutral-1000)); }\n:host([hidden]) { display:none; }\n* { box-sizing:border-box; }\n.frame { position:relative; border:1px solid var(--db-border-base); border-radius:var(--shell-radius); background:var(--db-surface-layer-1); box-shadow:var(--db-shadow-lg); isolation:isolate; }\n.screen { position:relative; aspect-ratio:var(--db-mockup-ratio, 16 / 10); overflow:hidden; background:var(--db-surface-base); border-radius:0 0 calc(var(--shell-radius) - 1px) calc(var(--shell-radius) - 1px); }\n.content { position:absolute; inset:var(--safe-top) 0 0; overflow:auto; scrollbar-width:none; overscroll-behavior:contain; }\n.content::-webkit-scrollbar { display:none; }\nslot { display:block; block-size:100%; min-block-size:100%; }\nimg { display:block; inline-size:100%; block-size:100%; object-fit:var(--db-mockup-fit, cover); object-position:top; }\n.chrome { overflow:hidden; border-radius:calc(var(--shell-radius) - 1px) calc(var(--shell-radius) - 1px) 0 0; }\n.tab-strip { display:flex; align-items:center; gap:22px; block-size:34px; padding:0 14px; background:color-mix(in srgb, var(--db-text-primary) 5%, var(--db-surface-layer-1)); }\n.dots { display:flex; align-items:center; gap:7px; flex-shrink:0; }\n.dots i { inline-size:10px; block-size:10px; border-radius:50%; background:var(--db-border-base); box-shadow:inset 0 0 0 1px rgb(0 0 0 / .08); }\n:host([data-variant='realistic']) .dots i:nth-child(1) { background:#ff5f57; }\n:host([data-variant='realistic']) .dots i:nth-child(2) { background:#febc2e; }\n:host([data-variant='realistic']) .dots i:nth-child(3) { background:#28c840; }\n.tab { display:flex; align-items:center; gap:8px; align-self:end; inline-size:190px; min-inline-size:0; block-size:27px; padding:0 10px; border-radius:7px 7px 0 0; background:var(--db-surface-layer-1); font:500 10px/1.4 var(--db-font-primary, sans-serif); color:var(--db-text-secondary); }\n.tab b { inline-size:10px; block-size:10px; border-radius:3px; background:var(--db-text-primary); flex-shrink:0; }\n.tab span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }\n.tab svg { inline-size:11px; block-size:11px; opacity:.5; flex-shrink:0; }\n.toolbar { display:flex; align-items:center; gap:12px; block-size:44px; padding:0 14px; border-bottom:1px solid var(--db-border-base); }\n.tools { display:flex; align-items:center; gap:13px; color:var(--db-text-secondary); flex-shrink:0; }\n.tools > svg { inline-size:14px; block-size:14px; }\n.tools > svg:first-child { opacity:.5; }\n.url { display:flex; align-items:center; justify-content:center; gap:6px; min-inline-size:0; flex:1; max-inline-size:520px; margin-inline:auto; block-size:27px; padding-inline:10px; border:1px solid color-mix(in srgb, var(--db-border-base) 65%, transparent); border-radius:7px; background:var(--db-surface-base); color:var(--db-text-secondary); font:400 11px/1.4 var(--db-font-primary, sans-serif); }\n.url span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }\n.url svg { inline-size:11px; block-size:11px; flex-shrink:0; opacity:.7; }\n:host([data-device='tablet']) { max-inline-size:680px; --shell-radius:clamp(20px, 4.5cqw, 32px); --shell-pad:clamp(10px, 2.2cqw, 16px); --safe-top:0px; }\n:host([data-device='mobile']) { max-inline-size:320px; --shell-radius:clamp(28px, 14cqw, 50px); --shell-pad:clamp(6px, 2.5cqw, 10px); --safe-top:0px; }\n:host(:not([data-device='browser'])) .frame { padding:var(--shell-pad); border:1px solid var(--color-foundation-neutral-700); border-radius:var(--shell-radius); background:var(--hardware); box-shadow:inset 0 0 0 1px var(--color-foundation-neutral-900), inset 0 0 0 3px color-mix(in srgb, var(--color-foundation-neutral-700) 40%, transparent), 0 25px 45px -24px rgb(0 0 0 / .4), 0 3px 8px -4px rgb(0 0 0 / .25); }\n:host(:not([data-device='browser'])) .screen { border-radius:calc(var(--shell-radius) - var(--shell-pad)); outline:1px solid rgb(0 0 0 / .8); }\n:host([data-device='tablet']) .screen { aspect-ratio:var(--db-mockup-ratio, 3 / 4); }\n:host([data-device='mobile']) .screen { aspect-ratio:var(--db-mockup-ratio, 9 / 19.5); }\n.camera { position:absolute; z-index:3; pointer-events:none; background:var(--color-foundation-black); }\n:host([data-device='mobile']) .camera { inline-size:28%; block-size:6.4cqw; top:calc(var(--shell-pad) + 3cqw); left:36%; border-radius:30px; box-shadow:inset 0 0 0 1px rgb(255 255 255 / .05); }\n.camera::after { content:''; position:absolute; inline-size:4px; block-size:4px; border-radius:50%; background:#142031; box-shadow:inset 0 0 0 1px rgb(255 255 255 / .07); top:calc(50% - 2px); right:12%; }\n:host([data-device='tablet']) .camera { inline-size:16%; block-size:2.8cqw; top:calc(var(--shell-pad) + 1.5cqw); left:42%; border-radius:30px; }\n:host([data-device='mobile'][data-notch='island']) { --safe-top:12.5cqw; }\n:host([data-device='tablet'][data-notch='island']) { --safe-top:5.8cqw; }\n.side { position:absolute; z-index:-1; inline-size:3px; border-radius:2px; background:var(--color-foundation-neutral-700); box-shadow:inset -1px 0 0 var(--color-foundation-neutral-900); pointer-events:none; }\n.side--power { right:-3px; top:30%; block-size:14%; }.side--volume { left:-3px; top:27%; block-size:9%; }.side--volume::after { content:''; position:absolute; top:calc(100% + 9px); inline-size:3px; block-size:100%; border-radius:2px; background:inherit; }.side--action { left:-3px; top:18%; block-size:5%; }\n:host([data-device='tablet']) .side--power { top:-3px; right:12%; block-size:3px; inline-size:9%; }:host([data-device='tablet']) .side--volume { left:auto; right:-3px; top:10%; block-size:7%; }:host([data-device='tablet']) .side--action { display:none; }\n:host([data-variant='minimal']) .frame { box-shadow:var(--db-shadow-sm); }\n:host([data-variant='minimal']) .tab-strip, :host([data-variant='gradient']) .tab-strip,\n:host([data-variant='minimal']) .tools, :host([data-variant='gradient']) .tools { display:none; }\n:host([data-variant='minimal']) .toolbar::before, :host([data-variant='gradient']) .toolbar::before { content:''; inline-size:6px; block-size:6px; border-radius:50%; background:currentColor; opacity:.4; }\n:host([data-variant='minimal']:not([data-device='browser'])), :host([data-variant='gradient']:not([data-device='browser'])) { --shell-pad:clamp(5px, 2cqw, 9px); }\n:host([data-variant='minimal']:not([data-device='browser'])) .frame { border-color:var(--color-foundation-neutral-200); background:var(--color-foundation-neutral-200); box-shadow:inset 0 0 0 1px var(--color-foundation-neutral-white), var(--db-shadow-sm); }\n:host([data-variant='minimal']:not([data-device='browser'])) .screen { outline:1px solid rgb(0 0 0 / .08); }\n:host([data-variant='minimal']) .side, :host([data-variant='gradient']) .side { display:none; }\n:host([data-variant='gradient']) .frame { border:1px solid var(--color-foundation-neutral-700); background:linear-gradient(145deg, var(--color-foundation-neutral-700), var(--color-foundation-neutral-900) 42%, var(--color-foundation-neutral-1000) 72%, var(--color-foundation-neutral-800)); box-shadow:inset 0 1px 0 rgb(255 255 255 / .2), inset 0 -1px 0 rgb(0 0 0 / .3), var(--db-shadow-sm); }\n:host([data-variant='gradient']) .toolbar { color:var(--color-foundation-neutral-200); border-color:rgb(255 255 255 / .1); }\n:host([data-variant='gradient']) .url { color:var(--color-foundation-neutral-200); background:rgb(0 0 0 / .18); border-color:rgb(255 255 255 / .08); }\n:host([data-device='tablet'][orientation='landscape']) { max-inline-size:880px; }:host([data-device='tablet'][orientation='landscape']) .screen { aspect-ratio:var(--db-mockup-ratio, 4 / 3); }\n:host([data-device='mobile'][orientation='landscape']) { max-inline-size:720px; --safe-top:0px; --shell-radius:clamp(28px, 6.5cqw, 50px); --shell-pad:clamp(6px, 1.2cqw, 10px); }\n:host([data-device='mobile'][orientation='landscape']) .screen { aspect-ratio:var(--db-mockup-ratio, 19.5 / 9); }\n:host([data-device='mobile'][orientation='landscape']) .camera { inline-size:clamp(16px, 3cqw, 22px); block-size:28%; left:calc(var(--shell-pad) + 2cqw); top:36%; }\n:host([data-device='mobile'][orientation='landscape'][data-notch='island']) .content { inset-inline-start:6cqw; }\n/* Platform silhouettes and hardware details; display ratios come from the native pixel profiles. */\n:host([data-model='android']), :host([data-model='flip']), :host([data-model='fold']) { --shell-radius:clamp(20px, 9cqw, 32px); }\n:host([data-notch='punch']) { --safe-top:6cqw; }\n:host([data-notch='punch']) .camera { inline-size:2.8cqw; block-size:2.8cqw; left:calc(50% - 1.4cqw); top:calc(var(--shell-pad) + 1.6cqw); border-radius:50%; box-shadow:0 0 0 1px rgb(255 255 255 / .12); }\n:host([data-notch='punch']) .camera::after { inline-size:1cqw; block-size:1cqw; inset:32%; }\n:host([data-notch='punch'][orientation='landscape']) { --safe-top:0px; }\n:host([data-notch='punch'][orientation='landscape']) .camera { inline-size:1.6cqw; block-size:1.6cqw; left:calc(var(--shell-pad) + 1cqw); top:calc(50% - .8cqw); }\n:host([data-notch='punch'][orientation='landscape']) .content { inset-inline-start:4cqw; }\n:host([data-model='android']) .side--action, :host([data-model='flip']) .side--action, :host([data-model='fold']) .side--action { display:none; }\n:host([data-model='android']) .side--volume, :host([data-model='flip']) .side--volume, :host([data-model='fold']) .side--volume { left:auto; right:-3px; top:17%; }\n:host([data-model='android']) .side--volume::after, :host([data-model='flip']) .side--volume::after, :host([data-model='fold']) .side--volume::after { display:none; }\n:host([data-model='fold'][data-fold-state='open']) { max-inline-size:560px; --shell-radius:clamp(20px, 5cqw, 28px); }\n:host([data-model='fold'][data-fold-state='open'][data-notch='punch']) .camera { left:auto; right:calc(var(--shell-pad) + 4cqw); }\n:host([data-model='fold'][data-fold-state='open']) .side--power { block-size:10%; }\n.crease { position:absolute; z-index:2; pointer-events:none; opacity:.38; filter:blur(1.5px); --crease-shade:linear-gradient(transparent, rgb(0 0 0 / .025) 25%, rgb(0 0 0 / .04) 45%, rgb(255 255 255 / .06) 58%, transparent); --crease-shade-horizontal:linear-gradient(90deg, transparent, rgb(0 0 0 / .025) 25%, rgb(0 0 0 / .04) 45%, rgb(255 255 255 / .06) 58%, transparent); }\n:host([data-model='flip']) .crease { inset:calc(50% - 10px) 0 auto; block-size:20px; background:var(--crease-shade); }\n:host([data-model='fold']) .crease, :host([data-model='duo']) .crease { inset:0 auto 0 calc(50% - 10px); inline-size:20px; background:var(--crease-shade-horizontal); }\n:host([data-model='flip'][orientation='landscape']) .crease { inset:0 auto 0 calc(50% - 10px); inline-size:20px; block-size:auto; background:var(--crease-shade-horizontal); }\n:host([data-model='fold'][orientation='landscape']) .crease, :host([data-model='duo'][orientation='landscape']) .crease { inset:calc(50% - 10px) 0 auto; block-size:20px; inline-size:auto; background:var(--crease-shade); }\n:host([data-model='flip'][data-fold-state='closed']) .content { bottom:17cqw; }\n.cover-cameras { position:absolute; bottom:5cqw; left:5cqw; inline-size:9cqw; block-size:9cqw; border-radius:50%; background:radial-gradient(circle, #182533 12%, #080a0c 22%, #202328 30%, #050506 49%, #37393d 53%, #0c0d0f 62%); box-shadow:0 1px 3px rgb(0 0 0 / .5); pointer-events:none; }\n.cover-cameras::after { content:''; position:absolute; inset:0; transform:translateX(12cqw); border-radius:inherit; background:inherit; box-shadow:inherit; }\n:host([data-device='watch']) { max-inline-size:240px; display:grid; --shell-pad:clamp(6px, 2.8cqw, 8px); --shell-radius:24cqw; }\n:host([data-device='watch']) .frame { margin-block:30cqw; }\n:host([data-device='watch']) .screen { background:var(--color-foundation-neutral-1000); outline:1px solid rgb(0 0 0 / .9); }\n:host([data-device='watch'][data-variant='realistic']) .frame { background:linear-gradient(90deg, #535457, #303134 6%, #343538 50%, #303134 94%, #555659); border-color:#626366; box-shadow:inset 0 1px 1px rgb(255 255 255 / .38), inset 0 -1px 1px rgb(0 0 0 / .65), inset 1px 0 1px rgb(255 255 255 / .12), inset -1px 0 1px rgb(255 255 255 / .12), 0 12px 18px -12px rgb(0 0 0 / .35), 0 2px 4px rgb(0 0 0 / .12); }\n.watch-band { position:absolute; z-index:-1; inline-size:82%; block-size:38%; left:9%; overflow:visible; pointer-events:none; }\n.watch-band--top { bottom:87%; }\n.watch-band--bottom { top:87%; transform:rotate(180deg); }\n:host([data-device='watch']) .side--volume, :host([data-device='watch']) .side--action { display:none; }\n:host([data-device='watch']) .side--power { display:block; top:58%; block-size:14%; inline-size:1.5%; right:-.8%; border-radius:1cqw; background:var(--color-foundation-neutral-700); box-shadow:none; }\n.crown { position:absolute; right:-4.2%; top:25%; inline-size:5%; block-size:14%; border-radius:2cqw; background:linear-gradient(90deg, rgb(0 0 0 / .25), transparent 30%, rgb(255 255 255 / .12) 56%, rgb(0 0 0 / .3)), repeating-linear-gradient(0deg, #46474a 0 1px, #7a7b7e 1px 1.5px, #4b4c4f 1.5px 3px); box-shadow:inset 0 1px 1px rgb(255 255 255 / .25), inset 0 -1px 1px rgb(0 0 0 / .4); }\n:host([data-device='watch'][data-variant='minimal']) .crown { background:linear-gradient(90deg, rgb(0 0 0 / .12), transparent 40%, rgb(0 0 0 / .1)), repeating-linear-gradient(0deg, #b8b9bc 0 1px, #e1e2e4 1px 3px); }\n.watch-glass { position:absolute; inset:0; z-index:4; border-radius:inherit; pointer-events:none; background:radial-gradient(ellipse 70% 5% at 50% 0%, rgb(255 255 255 / .17), transparent), linear-gradient(180deg, rgb(255 255 255 / .035), transparent 8%, transparent 92%, rgb(255 255 255 / .015)); box-shadow:inset 0 2px 2px rgb(255 255 255 / .14), inset 0 -2px 3px rgb(0 0 0 / .8), inset 3px 0 4px rgb(0 0 0 / .45), inset -3px 0 4px rgb(0 0 0 / .45); }\n/* Closed Duo has a flat hinge edge; opened Duo is one rounded display with centered top/bottom hinges. */\n:host([data-model='duo']) { --shell-pad:clamp(5px, 1.4cqw, 9px); --shell-radius:clamp(20px, 6.5cqw, 36px); }\n:host([data-model='duo'][data-fold-state='open']) { max-inline-size:680px; --shell-radius:clamp(24px, 6cqw, 44px); }\n:host([data-model='duo'][data-fold-state='open'][data-notch='punch']) { --safe-top:3cqw; }\n:host([data-model='duo'][data-fold-state='open'][data-notch='punch']) .camera { inline-size:1.4cqw; block-size:1.4cqw; top:calc(var(--shell-pad) + 2cqw); right:27cqw; opacity:.5; }\n:host([data-model='duo'][data-fold-state='closed']) { max-inline-size:320px; }\n:host([data-model='duo'][data-fold-state='closed']) .frame { border-radius:4px var(--shell-radius) var(--shell-radius) 4px; }\n:host([data-model='duo'][data-fold-state='closed']) .screen { border-radius:2px calc(var(--shell-radius) - var(--shell-pad)) calc(var(--shell-radius) - var(--shell-pad)) 2px; }\n:host([data-model='duo'][data-fold-state='open']) .frame { border-radius:var(--shell-radius); }\n:host([data-model='duo'][data-fold-state='open']) .screen { border-radius:calc(var(--shell-radius) - var(--shell-pad)); }\n:host([data-model='duo'][data-notch='punch']) .camera { left:auto; right:calc(var(--shell-pad) + 4cqw); }\n:host([data-model='duo']) .side--action { display:none; }\n:host([data-model='duo']) .side--volume { left:auto; right:-3px; top:17%; }\n:host([data-model='duo']) .side--volume::after { display:none; }\n.hinge { position:absolute; inset:0 auto 0 -4px; inline-size:5px; border-radius:2px; background:linear-gradient(90deg, #707174, #ceced0 35%, #55565a 70%, #999a9e); box-shadow:-1px 0 1px rgb(0 0 0 / .22); pointer-events:none; }\n.hinge::before, .hinge::after { content:''; position:absolute; inset:14% 0 auto; block-size:1px; background:rgb(0 0 0 / .3); }.hinge::after { top:86%; }\n:host([data-model='duo'][data-fold-state='open']) .hinge { inset:-2px 0; inline-size:100%; border-radius:0; background:none; box-shadow:none; }\n:host([data-model='duo'][data-fold-state='open']) .hinge::before, :host([data-model='duo'][data-fold-state='open']) .hinge::after { inset:0 auto auto 46.8%; inline-size:6.4%; block-size:4px; border-radius:2px; border:1px solid rgb(0 0 0 / .25); background:linear-gradient(180deg, #898a8d, #36373a 45%, #67686b); }\n:host([data-model='duo'][data-fold-state='open']) .hinge::after { top:auto; bottom:0; }\n:host([data-model='duo'][data-fold-state='open']) .side--volume { right:18%; top:-3px; inline-size:7%; block-size:3px; }\n:host([data-model='duo'][data-fold-state='open']) .side--volume::after { display:block; top:0; left:140%; inline-size:100%; block-size:3px; }\n:host([data-model='duo'][data-fold-state='closed']) .frame { box-shadow:inset 0 0 0 1px rgb(255 255 255 / .15), -3px 0 0 #65666a, -5px 0 0 #b0b1b3, var(--db-shadow-sm); }\n@container (max-width:480px) { .tab-strip { block-size:28px; gap:16px; }.dots { gap:5px; }.dots i { inline-size:7px; block-size:7px; }.toolbar { block-size:36px; gap:8px; padding-inline:10px; }.tools { gap:6px; }.tools > svg { inline-size:11px; block-size:11px; }.tools--right { display:none; }.url { font-size:10px; block-size:24px; }.tab { block-size:23px; inline-size:140px; font-size:9px; } }\n";export{a as deviceMockupStyle};

package/dist/esm/components/flight-route.js

@@ -0,0 +1 @@
+const point=(t,o,n)=>({x:(12+216*t)*o/240,y:(46-108*t*(1-t))*n/64}),t=128,o=[0];let n=point(0,240,64);for(let a=1;a<=t;a++){const h=point(a/t,240,64);o.push(o[a-1]+Math.hypot(h.x-n.x,h.y-n.y)),n=h}function flightRoutePosition(n,a,h){const e=Math.min(100,Math.max(0,n))/100*o[128];let i=1;for(;i<t&&o[i]<e;)i++;const s=o[i]-o[i-1],l=(i-1+(s?(e-o[i-1])/s:0))/t;return{...point(l,a,h),angle:45+180*Math.atan2((216*l-108)*h/64,216*a/240)/Math.PI}}export{flightRoutePosition};

package/dist/esm/components/node-style.js

@@ -0,0 +1 @@
+const e="\n:host { display:block; inline-size:var(--db-node-width, 280px); max-inline-size:100%; min-inline-size:0; color:var(--db-text-primary); font-family:var(--db-font-primary, sans-serif); --port-color:var(--db-text-tertiary); }\n:host([hidden]), [hidden] { display:none !important; }\n* { box-sizing:border-box; }\n.header, .description, .ports, .footer { -webkit-user-select:none; user-select:none; }\n.frame { position:relative; border:1px solid var(--db-border-base); border-radius:var(--db-radius-l); background:var(--db-surface-base); box-shadow:var(--db-shadow-sm); }\n:host([selected]) .frame { border-color:var(--db-border-focus); box-shadow:0 0 0 1px var(--db-border-focus), var(--db-shadow-sm); }\n:host([disabled]) { opacity:.55; }\n.header { display:flex; align-items:center; gap:6px; padding:8px 10px; min-block-size:40px; }\n.heading { appearance:none; border:0; padding:0; min-inline-size:0; flex:1; display:flex; align-items:center; gap:9px; text-align:start; background:none; color:inherit; font:inherit; cursor:pointer; border-radius:var(--db-radius-s); }\n:host([movable]) .heading { cursor:grab; touch-action:none; user-select:none; }:host([movable]) .heading:active { cursor:grabbing; }\n.icon { flex-shrink:0; inline-size:16px; block-size:16px; display:grid; place-items:center; color:var(--db-text-secondary); }\n.title { font-size:var(--db-text-s); font-weight:var(--db-weight-semibold); line-height:1.4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }\n.actions { display:flex; align-items:center; gap:2px; }.action { display:grid; place-items:center; flex-shrink:0; inline-size:26px; block-size:26px; border:0; border-radius:var(--db-radius-s); background:transparent; color:var(--db-text-secondary); cursor:pointer; padding:0; }.action:hover:not(:disabled) { background:var(--db-surface-layer-1); color:var(--db-text-primary); }\nbutton:focus-visible { outline:2px solid var(--db-border-focus); outline-offset:3px; }button:disabled { cursor:default; opacity:.45; }\n.description { margin:0; padding:0 10px 8px; font-size:var(--db-text-xs); line-height:1.6; color:var(--db-text-secondary); }\n.body { padding:8px 10px; border-block-start:1px solid var(--db-border-muted); font-size:var(--db-text-s); }.footer { padding:6px 10px; border-block-start:1px solid var(--db-border-muted); color:var(--db-text-secondary); font-size:var(--db-text-xs); }\nslot { display:block; }slot[name='actions'] { display:contents; }::slotted(*) { max-inline-size:100%; }\n::slotted(input), ::slotted(textarea), ::slotted([contenteditable='true']), ::slotted(db-input), ::slotted(db-textarea), ::slotted(db-markdown-editor) { -webkit-user-select:text; user-select:text; }\n.ports { border-block-start:1px solid var(--db-border-muted); padding:2px 10px; }.port-row { position:relative; display:flex; align-items:center; gap:8px; min-block-size:28px; }\n.port-label { font-size:var(--db-text-xs); line-height:1.5; min-inline-size:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.port-type { margin-inline-start:auto; color:var(--db-text-tertiary); font-size:10px; flex-shrink:0; }\n.port { position:absolute; inline-size:24px; block-size:24px; border:0; padding:0; background:none; cursor:crosshair; touch-action:none; display:grid; place-items:center; border-radius:50%; z-index:2; }\n.ports--input .port { left:-23px; }.ports--output .port { right:-23px; }.ports--output .port-row { justify-content:flex-end; }.ports--output .port-type { order:-1; margin-inline-start:0; margin-inline-end:auto; }\n.port-dot { inline-size:9px; block-size:9px; border:1.5px solid var(--port-color); border-radius:50%; background:var(--db-surface-base); box-shadow:0 0 0 3px var(--db-surface-base); transition:transform .12s; }\n.port:hover:not(:disabled) .port-dot { transform:scale(1.3); }.port[data-connected='true'] .port-dot { background:var(--port-color); }\n[data-type='text'] { --port-color:var(--db-brand-primary); }[data-type='image'] { --port-color:var(--db-feedback-success-fg); }[data-type='number'] { --port-color:var(--db-feedback-warning-fg); }[data-type='boolean'] { --port-color:var(--db-feedback-error-fg); }\n.status { display:flex; flex-shrink:0; align-items:center; white-space:nowrap; }\n/* db-badge lives inside this shadow root; its global stylesheet cannot cross the boundary. */\n.status db-badge { display:inline-flex; align-items:center; justify-content:center; padding:var(--db-padding-xxs) var(--db-padding-xs); border:1px solid currentColor; border-radius:var(--db-radius-action-pill); font-size:10px; font-weight:var(--db-weight-medium); line-height:1; background:transparent; }\n.status db-badge[variant='info'] { color:var(--db-feedback-info-fg); }\n.status db-badge[variant='success'] { color:var(--db-feedback-success-fg); }\n.status db-badge[variant='danger'] { color:var(--db-feedback-error-fg); }\n.action--run { color:var(--db-text-primary); }\n:host([data-status='error']) .frame { border-color:var(--db-feedback-error-fg); }\n:host([data-variant='compact']) .header { padding:6px 8px; min-block-size:36px; }:host([data-variant='compact']) .description { padding:0 8px 6px; }:host([data-variant='compact']) .body { padding:6px 8px; }\n:host([collapsed]) .ports { border-block-start:0; padding-block:0; }:host([collapsed]) .port-type { display:none; }:host([collapsed]) .port-row { min-block-size:26px; }\n:host([detail='overview']) .description, :host([detail='overview']) .body, :host([detail='overview']) .footer, :host([detail='overview']) .port-type, :host([detail='overview']) .actions { display:none; }\n:host([detail='overview']) .header { padding:6px 10px; }\n:host([detail='overview']) .ports { padding-block:0; }\n@media(prefers-reduced-motion:reduce) { *, *::before { animation:none !important; transition:none !important; } }\n";export{e as nodeStyle};

package/dist/esm/components/paper-card.d.ts

@@ -0,0 +1,26 @@
+import { DbElement } from '../core/base-element.js';
+import './db-button.js';
+
+interface DbPaperField {
+    label: string;
+    value: string;
+}
+interface DbPaperAction {
+    reference: string;
+}
+/** Own only the view; framework-owned children (including slot="actions") stay mounted. */
+declare abstract class DbPaperCard extends DbElement {
+    protected view: HTMLDivElement;
+    private ready;
+    connectedCallback(): void;
+    protected upgradeNames(): string[];
+    attributeChangedCallback(): void;
+    protected abstract render(): void;
+    protected attr(name: string): string;
+    protected action(reference: string): HTMLElement | null;
+    protected replace(...nodes: Node[]): void;
+    protected code(reference: string): HTMLElement;
+}
+
+export { DbPaperCard };
+export type { DbPaperAction, DbPaperField };

package/dist/esm/components/paper-card.js

@@ -0,0 +1 @@
+import{DbElement as e}from"../core/base-element.js";import"./db-button.js";function paperNode(e,t,r=""){const a=document.createElement(e);return a.className=t,a.textContent=r,a}function paperFields(e){return Array.isArray(e)?e.filter(e=>!!e&&"object"==typeof e&&"string"==typeof e.label&&"string"==typeof e.value).map(({label:e,value:t})=>({label:e,value:t})):[]}function paperJson(e){try{return null==e?[]:JSON.parse(e)}catch{return[]}}function paperImageSrc(e){if(!e?.trim())return null;try{const t=new URL(e,document.baseURI);return["http:","https:","blob:"].includes(t.protocol)||"data:"===t.protocol&&/^data:image\/(png|jpeg|webp|gif|svg\+xml)[;,]/i.test(e)?e:null}catch{return null}}function paperDetails(e){const t=paperNode("dl","db-paper__fields");for(const{label:r,value:a}of e){const e=paperNode("div","db-paper__field");e.append(paperNode("dt","",r),paperNode("dd","",a)),t.append(e)}return t}class DbPaperCard extends e{constructor(){super(...arguments),this.view=paperNode("div","db-paper__view"),this.ready=!1}connectedCallback(){this.view.parentNode||this.prepend(this.view),this.classList.add("db-paper"),this.upgradeProperties(this.upgradeNames()),this.ready=!0,this.render()}upgradeNames(){return[]}attributeChangedCallback(){this.ready&&this.render()}attr(e){return this.getAttribute(e)||""}action(e){const t=this.attr("action-label");if(!t)return null;const r=document.createElement("db-button");return r.textContent=t,r.setAttribute("variant","secondary"),r.setAttribute("size","m"),r.dataset.paperAction="",r.toggleAttribute("disabled",this.hasAttribute("disabled")),r.addEventListener("db-click",()=>{this.hasAttribute("disabled")||this.dbEmit("action",{reference:e})}),r}replace(...e){const t=this.view.contains(document.activeElement)&&document.activeElement?.hasAttribute("data-paper-action");this.view.replaceChildren(...e),t&&this.view.querySelector("[data-paper-action]:not([disabled])")?.focus()}code(e){const t=paperNode("div","db-paper__code"),r=paperImageSrc(this.attr("code-image-src"));if(r){const a=paperNode("img","db-paper__code-image");a.src=r,a.alt=this.attr("code-alt")||e||"코드 이미지",a.addEventListener("error",()=>{a.hidden=!0}),t.append(a)}return e&&t.append(paperNode("span","db-paper__reference",e)),t}}export{DbPaperCard,paperDetails,paperFields,paperImageSrc,paperJson,paperNode};

package/dist/esm/components/random-gradient-palettes.d.ts

@@ -0,0 +1,4 @@
+type GradientScheme = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'purple' | 'ocean' | 'sunset';
+type GradientTone = 'light' | 'vivid' | 'dark';
+
+export type { GradientScheme, GradientTone };

package/dist/esm/core/ai-element.d.ts

@@ -0,0 +1,47 @@
+import { DbElement } from './base-element.js';
+import { DbIconName } from '../components/db-icons.js';
+import '../components/db-button.js';
+import '../components/db-badge.js';
+import '../components/db-spinner.js';
+import '../components/db-code-block.js';
+
+type DbAiStatus = 'pending' | 'running' | 'complete' | 'error' | 'cancelled' | 'approval';
+interface DbAiItem {
+    id: string;
+    label: string;
+    description?: string;
+    status?: DbAiStatus;
+    code?: string;
+    language?: string;
+    href?: string;
+    meta?: string;
+    children?: DbAiItem[];
+    open?: boolean;
+}
+interface DbAiAction {
+    id: string;
+    action: string;
+}
+/** Shared presentation only. The app supplies execution state and handles every action. */
+declare abstract class DbAiDataElement extends DbElement {
+    private data;
+    private disclosureState;
+    get items(): DbAiItem[];
+    set items(value: DbAiItem[]);
+    protected get rows(): readonly DbAiItem[];
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private readAttributeItems;
+    protected attr(name: string, key?: string): string;
+    protected get state(): DbAiStatus;
+    protected action(action: string, id: string): void;
+    protected button(action: string, label: string, icon?: DbIconName, id?: string): HTMLElement;
+    protected closeDisclosure(details: HTMLDetailsElement, restoreFocus?: boolean): void;
+    protected disclosure(id: string, label: string, status: DbAiStatus, body: Node[], defaultOpen?: boolean, icon?: DbIconName): HTMLDetailsElement;
+    protected itemLine(item: DbAiItem): HTMLElement;
+    protected update(resetRoot?: boolean): void;
+    protected abstract view(): Node[];
+}
+
+export { DbAiDataElement };
+export type { DbAiAction, DbAiItem, DbAiStatus };

package/dist/esm/core/ai-element.js

@@ -0,0 +1 @@
+import{DbElement as t}from"./base-element.js";import{textNode as e,replaceView as s}from"./credit-ui.js";import{sanitizeHref as i}from"./safe-url.js";import{t as a}from"./i18n.js";import{createDbIcon as n}from"../components/db-icons.js";import"../components/db-button.js";import"../components/db-badge.js";import"../components/db-spinner.js";import"../components/db-code-block.js";const r=["pending","running","complete","error","cancelled","approval"],o=e;function aiIcon(t){return n(t,18)}function aiState(t){return r.includes(t)?t:"pending"}function aiStatus(t,e){const s=o("span","designbase-wc-ai__icon","");if(s.dataset.status=t,s.setAttribute("aria-label",a(`aiElement.${t}`)),"running"===t){const t=document.createElement("db-spinner");t.setAttribute("size","s"),t.setAttribute("color","var(--db-text-secondary)"),t.setAttribute("aria-hidden","true"),s.append(t)}else s.append(aiIcon("error"===t?"error-filled":e||("complete"===t?"circle-checked":"clock")));return s}function aiCode(t,e="text"){const s=document.createElement("db-code-block");return s.setAttribute("code",t),s.setAttribute("language",e),s.setAttribute("show-line-numbers","false"),s.setAttribute("show-language","false"),s}function aiLink(t){const e=i(t.href,""),s=o(e?"a":"span","designbase-wc-ai__source",""),a=o("db-badge","",t.label);return a.setAttribute("variant","secondary"),a.setAttribute("size","s"),s.append(a),s instanceof HTMLAnchorElement&&(s.href=e,s.target="_blank",s.rel="noopener noreferrer"),s}function readItems(t,e=0){if(!Array.isArray(t)||e>8)return[];const s=new Set;return t.slice(0,500).flatMap(t=>{if(!t||"object"!=typeof t||!("id"in t)||!("label"in t)||"string"!=typeof t.id||!t.id||s.has(t.id)||"string"!=typeof t.label)return[];s.add(t.id);const i={id:t.id,label:t.label};for(const e of["description","code","language","href","meta"]){const s=Reflect.get(t,e);"string"==typeof s&&(i[e]=s)}return"status"in t&&"string"==typeof t.status&&(i.status=aiState(t.status)),"open"in t&&"boolean"==typeof t.open&&(i.open=t.open),"children"in t&&(i.children=readItems(t.children,e+1)),[i]})}class DbAiDataElement extends t{constructor(){super(...arguments),this.data=[],this.disclosureState=new Map}get items(){return structuredClone(this.data)}set items(t){this.data=readItems(t),delete this.dataset.invalidItems,this.update()}get rows(){return this.data}connectedCallback(){this.upgradeProperties(["items"]),this.hasAttribute("items")&&this.readAttributeItems(),this.cleanups.listen(this,"db-click",t=>{const e=t.target;if(!(e instanceof HTMLElement)||e.closest(this.localName)!==this||this.hasAttribute("disabled"))return;const s=e.dataset.aiAction;s&&(t.stopPropagation(),this.action(s,e.dataset.id||""))}),this.cleanups.listen(this,"click",t=>{const e=t.target?.closest("summary[data-ai-disclosure]");if(!e||e.closest(this.localName)!==this)return;const s=e.parentElement;this.disclosureState.set(e.dataset.aiDisclosure||"",!s.open),this.dbEmit("open-change",{id:e.dataset.aiDisclosure,open:!s.open})}),this.update()}attributeChangedCallback(t,e,s){e!==s&&("items"===t&&this.readAttributeItems(),this.update("open"===t))}readAttributeItems(){delete this.dataset.invalidItems;try{this.data=readItems(JSON.parse(this.getAttribute("items")||"[]"))}catch{this.data=[],this.dataset.invalidItems="true"}}attr(t,e){return this.getAttribute(t)||(e?a(`aiElement.${e}`):"")}get state(){return aiState(this.getAttribute("status"))}action(t,e){this.dbEmit(t,{id:e||this.attr("item-id"),action:t})}button(t,e,s,i=""){const a=document.createElement("db-button");return a.dataset.aiAction=t,a.dataset.id=i,a.dataset.action=`${t}:${i}`,a.setAttribute("variant","ghost"),a.setAttribute("size","s"),a.toggleAttribute("disabled",this.hasAttribute("disabled")),s&&a.setAttribute("start-icon",s),a.textContent=e,a}closeDisclosure(t,e=!1){if(!t.open)return;t.open=!1;const s=t.dataset.key||"root";this.disclosureState.set(s,!1),this.dbEmit("open-change",{id:s,open:!1}),e&&Array.from(this.querySelectorAll("details[data-key]")).find(t=>t.dataset.key===s)?.querySelector("summary")?.focus()}disclosure(t,e,s,i,a=!1,n){const r=document.createElement("details");r.className="designbase-wc-ai__disclosure",r.dataset.key=t,r.open=this.disclosureState.get(t)??a;const d=o("summary","designbase-wc-ai__line","");d.dataset.aiDisclosure=t,d.dataset.action=`disclosure:${t}`,d.tabIndex=0,d.append(aiStatus(s,n),o("span","designbase-wc-ai__label",e),aiIcon("chevron-right"));const c=o("div","designbase-wc-ai__detail","");return c.append(...i),r.append(d,c),r}itemLine(t){const e=[];if(t.description&&e.push(o("p","designbase-wc-ai__description",t.description)),t.code&&e.push(aiCode(t.code,t.language)),t.children?.length){const s=o("div","designbase-wc-ai__sources","");s.append(...t.children.map(aiLink)),e.push(s)}if(e.length){const s=this.disclosure(`item:${t.id}`,t.label,t.status||"pending",e,t.open??"running"===t.status);return t.meta&&s.querySelector("summary")?.insertBefore(o("span","designbase-wc-ai__meta",t.meta),s.querySelector("summary").lastElementChild),s}const s=o("div","designbase-wc-ai__line","");return s.append(aiStatus(t.status||"pending"),o("span","designbase-wc-ai__label",t.label)),t.meta&&s.append(o("span","designbase-wc-ai__meta",t.meta)),s}update(t=!1){if(this.isConnected){for(const t of this.querySelectorAll("details[data-key]"))t.closest(this.localName)===this&&this.disclosureState.set(t.dataset.key||"",t.open);t&&this.disclosureState.delete("root"),this.classList.add("designbase-wc-ai",`designbase-wc-${this.localName.slice(3)}`),this.dataset.status=this.state,s(this,...this.view())}}}export{DbAiDataElement,aiCode,aiIcon,aiLink,o as aiNode,aiState,aiStatus};

package/dist/esm/core/credit-ui.js

@@ -0,0 +1 @@
+function creditNumber(t){if(null===t||""===t.trim())return null;const e=Number(t);return Number.isSafeInteger(e)&&e>=0?e:null}function creditText(t){return null===t?"—":t.toLocaleString()}function textNode(t,e,n){const r=document.createElement(t);return r.className=e,r.textContent=n,r}function replaceView(t,...e){const n=document.activeElement,r=n instanceof HTMLElement&&t.contains(n)?n.closest("[data-action]")?.dataset.action:void 0;if(t.replaceChildren(...e),r){const e=Array.from(t.querySelectorAll("[data-action]")).find(t=>t.dataset.action===r),n=e?.matches("button, input, [tabindex]")?e:e?.querySelector("button, input");n&&!n.hasAttribute("disabled")&&"true"!==n.getAttribute("aria-disabled")&&n.focus()}}function creditAction(t,e,n){const r=document.createElement("db-button");return r.dataset.action=t,r.setAttribute("variant","secondary"),r.setAttribute("size","s"),r.toggleAttribute("disabled",n),r.textContent=e,r}export{creditAction,creditNumber,creditText,replaceView,textNode};