@designbasekorea/ui-wc 0.5.6 → 0.6.0

package/dist/index.d.ts

@@ -3405,6 +3405,8 @@ declare class DbTestimonial extends HTMLElement {
     private built;
     private innerEl?;
     private quoteEl?;
+    private backgroundEl?;
+    private logoEl?;
     private footerEl?;
     private extraEl?;
     private avatarWrapEl?;
@@ -4181,6 +4183,1093 @@ declare global {
     }
 }
 
+declare const STATUSES: readonly ["downloading", "paused", "error", "complete"];
+type DownloadStatus = (typeof STATUSES)[number];
+declare const POSITIONS$1: readonly ["bottom-right", "bottom-left", "bottom-center", "top-right", "top-left", "top-center"];
+type DownloadPosition = (typeof POSITIONS$1)[number];
+/**
+ * 우측 하단(기본)에 떠 있는 다운로드 진행률 위젯.
+ *
+ * 진행 바는 `<db-progressbar>`, 액션 버튼은 `<db-button>` 을 그대로 재사용합니다.
+ * 같은 위치에 여러 개가 뜨면 `stack-mode`에 따라 위로 쌓이거나(deck) 세로로 쌓입니다.
+ *
+ * @example
+ *   const dl = document.createElement('db-download-progress');
+ *   dl.setAttribute('file-name', 'ui-kit-icons.figma');
+ *   dl.setAttribute('value', '43');
+ *   dl.setAttribute('auto-remove', '');
+ *   document.body.appendChild(dl);
+ *   dl.setProgress(80);
+ *   dl.setStatus('complete');
+ */
+declare class DbDownloadProgress extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private renderedStatus;
+    private closeTimerId;
+    private resizeObserver;
+    private registeredPosition;
+    closed: boolean;
+    private iconEl;
+    private labelEl;
+    private fileEl;
+    private subtitleEl;
+    private inlinePercentEl;
+    private percentEl;
+    private remainingEl;
+    private metaDotEl;
+    private toggleBtn;
+    private closeBtn;
+    private actionsEl;
+    private mainRow;
+    private bodyBar;
+    private edgeBar;
+    get value(): number;
+    set value(v: number);
+    get max(): number;
+    set max(v: number);
+    get status(): DownloadStatus;
+    set status(v: DownloadStatus);
+    get fileName(): string;
+    set fileName(v: string);
+    get position(): DownloadPosition;
+    set position(v: DownloadPosition);
+    get minimized(): boolean;
+    set minimized(v: boolean);
+    /** `stack` = 세로로 위로 쌓기(기본), `deck` = 스케일·z-index 카드 덱 */
+    get stackMode(): 'stack' | 'deck';
+    set stackMode(v: 'stack' | 'deck');
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private registerStack;
+    private unregisterStack;
+    private build;
+    private sync;
+    private renderActions;
+    private handleMainClick;
+    private handleToggleClick;
+    private handleCloseClick;
+    minimize(): void;
+    expand(): void;
+    toggle(): void;
+    setProgress(value: number): void;
+    setStatus(status: DownloadStatus): void;
+    /**
+     * 닫기(슬라이드 아웃).
+     * React 등 호스트가 DOM을 소유할 때는 `auto-remove` 없이 `db-close`만 받고 언마운트하세요.
+     * body에 직접 append한 경우 `auto-remove`를 주면 DOM에서 제거됩니다.
+     */
+    close(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-download-progress': DbDownloadProgress;
+    }
+}
+
+/**
+ * ui-wc — db-otp-input (수동 작성, 자동 동기화 대상 아님)
+ *
+ * 분할 자릿수 OTP/PIN 입력. 붙여넣기·화살표·백스페이스를 지원합니다.
+ */
+declare const SIZES$4: readonly ["s", "m", "l"];
+type OtpSize = (typeof SIZES$4)[number];
+declare class DbOtpInput extends HTMLElement {
+    static formAssociated: boolean;
+    static get observedAttributes(): string[];
+    private internals;
+    private built;
+    private digits;
+    private errorEl?;
+    private suppressSync;
+    private initialValue;
+    private lastCompleteValue;
+    get length(): number;
+    set length(v: number);
+    get value(): string;
+    set value(v: string);
+    get size(): OtpSize;
+    set size(v: OtpSize);
+    get disabled(): boolean;
+    set disabled(v: boolean);
+    get readOnly(): boolean;
+    set readOnly(v: boolean);
+    connectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    focus(): void;
+    clear(): void;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    private build;
+    private sync;
+    private emit;
+    private setValueAttribute;
+    private syncFormValue;
+    private focusFirstEmpty;
+    private focusAt;
+    private applyValue;
+    private onDigitFocus;
+    private onDigitInput;
+    private onDigitKeydown;
+    private onPaste;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-otp-input': DbOtpInput;
+    }
+}
+
+/**
+ * ui-wc — db-phone-verify (수동 작성, 자동 동기화 대상 아님)
+ *
+ * 한국형 휴대폰 본인인증: 통신사 → 번호 → 인증번호 발송 → OTP + 타이머/재전송.
+ */
+
+declare const SIZES$3: readonly ["s", "m", "l"];
+type Size$2 = (typeof SIZES$3)[number];
+declare class DbPhoneVerify extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private timerId;
+    private remaining;
+    private carrierSelect;
+    private phoneInput;
+    private sendBtn;
+    private otpInput;
+    private timerEl;
+    private resendBtn;
+    private verifyBtn;
+    private codeBlock;
+    private errorEl;
+    get size(): Size$2;
+    get step(): 'phone' | 'code' | 'verified';
+    set step(v: 'phone' | 'code' | 'verified');
+    get phone(): string;
+    set phone(v: string);
+    get carrier(): string;
+    set carrier(v: string);
+    get code(): string;
+    set code(v: string);
+    get countdown(): number;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    /** 인증번호 발송 단계로 전환하고 타이머를 시작합니다. */
+    startCodeStep(): void;
+    /** 수동 제어 모드에서 재전송 성공 후 카운트다운을 다시 시작합니다. */
+    restartCountdown(): void;
+    /** 인증 완료 상태로 전환합니다. */
+    markVerified(): void;
+    private clearTimer;
+    private startTimer;
+    private renderTimer;
+    private build;
+    private sync;
+    private isPhoneValid;
+    private requestVerify;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-phone-verify': DbPhoneVerify;
+    }
+}
+
+/**
+ * ui-wc — db-email-verify (수동 작성, 자동 동기화 대상 아님)
+ *
+ * 이메일 인증: code(OTP) 모드 / confirm(메일함 확인) 모드.
+ */
+
+declare const SIZES$2: readonly ["s", "m", "l"];
+type Size$1 = (typeof SIZES$2)[number];
+declare class DbEmailVerify extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private timerId;
+    private remaining;
+    private emailInput;
+    private sendBtn;
+    private otpInput;
+    private timerEl;
+    private resendBtn;
+    private verifyBtn;
+    private confirmBtn;
+    private codeBlock;
+    private confirmBlock;
+    private verifiedBlock;
+    private emailRow;
+    private errorEl;
+    private closeBtn?;
+    get mode(): 'code' | 'confirm';
+    set mode(v: 'code' | 'confirm');
+    get size(): Size$1;
+    get step(): 'email' | 'code' | 'sent' | 'verified';
+    set step(v: 'email' | 'code' | 'sent' | 'verified');
+    get email(): string;
+    set email(v: string);
+    get countdown(): number;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    startCodeStep(): void;
+    /** 수동 제어 모드에서 재전송 성공 후 카운트다운을 다시 시작합니다. */
+    restartCountdown(): void;
+    markSent(): void;
+    markVerified(): void;
+    private clearTimer;
+    private startTimer;
+    private renderTimer;
+    private build;
+    private sync;
+    private isEmailValid;
+    private requestVerify;
+    private setEmphasizedText;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-email-verify': DbEmailVerify;
+    }
+}
+
+/**
+ * ui-wc — db-two-factor (수동 작성, 자동 동기화 대상 아님)
+ *
+ * 2단계 인증(2FA): 인증앱 / SMS / 이메일 방식 + OTP.
+ */
+
+declare const METHODS: readonly [{
+    readonly value: "app";
+    readonly label: "인증 앱";
+}, {
+    readonly value: "sms";
+    readonly label: "SMS";
+}, {
+    readonly value: "email";
+    readonly label: "이메일";
+}];
+declare const SIZES$1: readonly ["s", "m", "l"];
+type Size = (typeof SIZES$1)[number];
+type Method = (typeof METHODS)[number]['value'];
+declare class DbTwoFactor extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private timerId;
+    private remaining;
+    private segment;
+    private otpInput;
+    private hintEl;
+    private timerEl;
+    private resendBtn;
+    private verifyBtn;
+    private backupBtn;
+    private errorEl;
+    private channelActions;
+    get method(): Method;
+    set method(v: Method);
+    get size(): Size;
+    get countdown(): number;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    /** 수동 제어 모드에서 코드 발송 성공 후 카운트다운을 시작합니다. */
+    restartCountdown(): void;
+    private clearTimer;
+    private startTimer;
+    private renderTimer;
+    private build;
+    private sync;
+    private requestVerify;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-two-factor': DbTwoFactor;
+    }
+}
+
+declare const SIZES: readonly ["xs", "s", "m", "l", "xl"];
+declare const VARIANTS: readonly ["aurora", "ocean", "emerald", "violet", "mono"];
+declare const STATES: readonly ["idle", "thinking", "listening"];
+declare const THEMES: readonly ["auto", "light", "dark"];
+type OrbSize = (typeof SIZES)[number];
+type OrbVariant = (typeof VARIANTS)[number];
+type OrbState = (typeof STATES)[number];
+type OrbTheme = (typeof THEMES)[number];
+/**
+ * AI 어시스턴트를 상징하는 캔버스 기반 애니메이션 오브(구체).
+ * 광택 있는 3D 구체 위에 유체처럼 흐르는 내부 광원 + 프레넬 림 라이트 + 스페큘러 하이라이트로
+ * 고품질 오브를 렌더링합니다. `state` 에 따라 모양(진폭·난류)·색(밝기)·인터랙션(리플)이 바뀌며,
+ * 포인터를 올리면 하이라이트와 내부 광원이 살짝 따라옵니다. 순수 장식이라 `aria-hidden` 입니다.
+ *
+ * @example
+ *   <db-chat-orb variant="aurora" state="thinking"></db-chat-orb>
+ *
+ * @example
+ *   const orb = document.querySelector('db-chat-orb');
+ *   orb.state = 'listening';
+ *   orb.minScale = 0.86;
+ *   orb.maxScale = 1.2;
+ *   orb.audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+ */
+declare class DbChatOrb extends HTMLElement {
+    static get observedAttributes(): string[];
+    private canvas;
+    private ctx;
+    private dpr;
+    private cssW;
+    private cssH;
+    private t0;
+    private lastFrame;
+    private resizeObs;
+    private io;
+    private themeObserver;
+    private themeMedia;
+    private visible;
+    private hover;
+    private ripples;
+    private lastAutoRipple;
+    private lastVoiceRipple;
+    private previousVoiceLevel;
+    private displayedVoiceLevel;
+    private inputStream;
+    private audioContext;
+    private audioSource;
+    private analyser;
+    private analyserData;
+    get size(): OrbSize;
+    set size(v: OrbSize);
+    get variant(): OrbVariant;
+    set variant(v: OrbVariant);
+    get state(): OrbState;
+    set state(v: OrbState);
+    get theme(): OrbTheme;
+    set theme(v: OrbTheme);
+    /** 외부 오디오 분석기가 전달하는 정규화 음성 레벨(0–1). */
+    get voiceLevel(): number;
+    set voiceLevel(v: number);
+    /** listening 무음 구간의 최소 구체 배율. */
+    get minScale(): number;
+    set minScale(v: number);
+    /** listening 최대 음량 구간의 최대 구체 배율. */
+    get maxScale(): number;
+    set maxScale(v: number);
+    /**
+     * 실제 마이크/통화 MediaStream. 내부 AnalyserNode로 RMS를 계산하며 오디오를 재생하거나
+     * 전달받은 트랙을 stop()하지 않습니다. null을 할당하면 분석만 해제합니다.
+     */
+    get audioStream(): MediaStream | null;
+    set audioStream(stream: MediaStream | null);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private setVisible;
+    private syncClasses;
+    private build;
+    private onPointerMove;
+    private onPointerLeave;
+    private onPointerDown;
+    private addRipple;
+    private observeTheme;
+    private onThemeChange;
+    private isDarkContext;
+    private startAudioAnalysis;
+    private stopAudioAnalysis;
+    private sampleVoiceLevel;
+    private resize;
+    /** 공유 틱커가 호출 — 한 프레임 렌더 */
+    frame(now: number): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-chat-orb': DbChatOrb;
+    }
+}
+
+/**
+ * 채팅 시작 전 화면의 히어로 블록.
+ * 오브(또는 로고 이미지) + 인사말 + 타이틀 + 서브타이틀을 렌더링합니다.
+ * 타이틀의 `highlight` 부분은 그라디언트로 강조됩니다.
+ *
+ * 컴포저(`db-chat-composer`)와 추천(`db-chat-suggestions`)은 형제 요소로 배치합니다.
+ *
+ * @example
+ *   <db-chat-welcome
+ *     greeting="안녕하세요"
+ *     title="오늘은 무엇을 도와드릴까요?"
+ *     highlight="도와드릴까요"
+ *     orb-variant="aurora">
+ *   </db-chat-welcome>
+ */
+declare class DbChatWelcome extends HTMLElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private render;
+    /** 타이틀에서 highlight 구간만 그라디언트 span 으로 감싼다. */
+    private appendTitle;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-chat-welcome': DbChatWelcome;
+    }
+}
+
+type DbIconName = 'arrow-bar-left' | 'arrow-bar-right' | 'award' | 'apple' | 'play-store' | 'arrow-right' | 'star' | 'star-filled' | 'star-half' | 'trending-up' | 'cart' | 'bell-active' | 'caret-down-filled' | 'caret-updown-filled' | 'chevron-down' | 'chevron-up' | 'chevron-left' | 'chevron-right' | 'calendar' | 'camera' | 'clock' | 'bulb' | 'circle-checked' | 'cloud-close' | 'close' | 'done' | 'documentation' | 'doughnut-chart' | 'download' | 'error-filled' | 'edit' | 'eyedropper' | 'file-new' | 'folder-open' | 'gallery' | 'globe' | 'hide' | 'info-filled' | 'lock' | 'mail' | 'microphone' | 'minus' | 'moon' | 'more-vertical' | 'paperclip' | 'pause' | 'play' | 'plus' | 'copy' | 'code' | 'write' | 'upload' | 'video' | 'volume-up' | 'mute-filled' | 'package' | 'delivery-filled' | 'repeat' | 'settings' | 'refresh' | 'expand' | 'shrink' | 'grip-vertical' | 'grip-horizontal' | 'search' | 'send' | 'share-alt' | 'show' | 'sparkle' | 'stop' | 'sun' | 'thumb-down' | 'thumb-up' | 'trash' | 'user' | 'warning-filled';
+
+interface DbChatTool {
+    /** 고유 id (이벤트 detail 로 전달) */
+    id: string;
+    /** 표시 라벨 */
+    label: string;
+    /** 시작 아이콘 (DbIconName) */
+    icon?: DbIconName;
+    /** 활성 여부 */
+    active?: boolean;
+}
+interface DbChatAttachOption {
+    /** 고유 id (예: 'image', 'file', 'camera') */
+    id: string;
+    /** 표시 라벨 */
+    label: string;
+    /** 메뉴 아이콘 (DbIconName) */
+    icon?: DbIconName;
+    /** 파일 선택 시 accept 값. 지정하면 파일 선택창을 엽니다. 없으면 db-attach 이벤트만 발행 */
+    accept?: string;
+    /** 카메라/캡처 (모바일). 'user' | 'environment' */
+    capture?: 'user' | 'environment';
+    /** 다중 선택 허용 */
+    multiple?: boolean;
+    /** 보조 설명 (선택) */
+    description?: string;
+}
+interface DbChatAttachment {
+    id: string;
+    name: string;
+    /** 바이트 크기 */
+    size: number;
+    /** MIME 타입 */
+    mime: string;
+    /** 표시 종류 (아이콘 결정) */
+    kind: 'image' | 'video' | 'file';
+    /** 원본 File (파일 선택 시) */
+    file?: File;
+    /** 이미지 미리보기 objectURL */
+    preview?: string;
+}
+/**
+ * AI 채팅 입력 컴포저. 채팅 시작 전/중 모두에서 사용합니다.
+ * 자동 높이 textarea + 툴바(첨부·툴 토글·음성·전송)로 구성되며,
+ * 전송 버튼은 `db-button`, 툴 토글·첨부 미리보기는 `db-chip` 을 재사용합니다.
+ *
+ * - 툴 토글: `db-chip` 의 `default`↔`primary` variant 로 선택 상태를 표현합니다.
+ * - 첨부: 첨부 버튼을 누르면 드롭다운이 열려 이미지·동영상·파일·카메라 등
+ *   여러 종류를 선택할 수 있고, 고른 파일은 삭제 가능한 칩으로 미리보기됩니다.
+ * - 전송 중(`streaming`)에는 전송 버튼이 정지 버튼으로 바뀝니다.
+ *
+ * @example
+ *   const c = document.querySelector('db-chat-composer');
+ *   c.tools = [{ id:'reason', label:'추론', icon:'bulb' }];
+ *   c.addEventListener('db-send', (e) => console.log(e.detail.value, e.detail.attachments));
+ */
+declare class DbChatComposer extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private _tools;
+    private _attachOptions;
+    private _attachments;
+    private attachMenuOpen;
+    private field;
+    private attachmentsEl;
+    private toolsEl;
+    private attachWrap;
+    private attachBtn;
+    private attachMenu;
+    private fileInput;
+    private micBtn;
+    private sendBtn;
+    get value(): string;
+    set value(v: string);
+    get streaming(): boolean;
+    set streaming(v: boolean);
+    get disabled(): boolean;
+    set disabled(v: boolean);
+    /** 툴 토글 목록 (JSON 프로퍼티) */
+    get tools(): DbChatTool[];
+    set tools(list: DbChatTool[]);
+    /** 첨부 드롭다운 옵션 목록 */
+    get attachOptions(): DbChatAttachOption[];
+    set attachOptions(list: DbChatAttachOption[]);
+    /** 현재 첨부 목록 (읽기 전용 복사본) */
+    get attachments(): DbChatAttachment[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private build;
+    private makeIconButton;
+    private sync;
+    private renderTools;
+    private renderAttachMenu;
+    private renderAttachments;
+    private renderSendButton;
+    private syncSendState;
+    private autoGrow;
+    private handleAttachClick;
+    private openAttachMenu;
+    private closeAttachMenu;
+    private handleOutsideClick;
+    private chooseAttachOption;
+    private handleFilePicked;
+    private addFile;
+    private attachmentMeta;
+    private handleInput;
+    private handleKeyDown;
+    private handleSendClick;
+    private submit;
+    /** 입력 필드를 비웁니다. */
+    clear(): void;
+    /** 첨부를 하나 제거합니다. */
+    removeAttachment(id: string): void;
+    /** 모든 첨부를 제거합니다. */
+    clearAttachments(): void;
+    /** 프로그램적으로 첨부를 추가합니다(파일 또는 메타). */
+    addAttachment(input: File | Omit<DbChatAttachment, 'id' | 'kind'>): void;
+    /** 입력 필드에 포커스합니다. */
+    focusInput(): void;
+    /** 전송 중(정지 버튼) 상태를 설정합니다. */
+    setStreaming(streaming: boolean): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-chat-composer': DbChatComposer;
+    }
+}
+
+interface DbChatSuggestion {
+    /** 고유 id */
+    id?: string;
+    /** 제목 (카드/칩 라벨) */
+    title: string;
+    /** 설명 (카드 레이아웃에서만 표시) */
+    description?: string;
+    /** 아이콘 (DbIconName) */
+    icon?: DbIconName;
+    /** 선택 시 전달될 값 (기본값: title) */
+    value?: string;
+}
+/**
+ * 채팅 시작 화면의 추천 프롬프트 목록.
+ * `layout="card"` 는 아이콘·제목·설명이 있는 카드 그리드,
+ * `layout="chip"` 은 클릭 가능한 칩(db-chip 재사용) 행으로 렌더링합니다.
+ *
+ * @example
+ *   const s = document.querySelector('db-chat-suggestions');
+ *   s.items = [{ title:'Write Copy', description:'...', icon:'edit' }];
+ *   s.addEventListener('db-select', (e) => console.log(e.detail.value));
+ */
+declare class DbChatSuggestions extends HTMLElement {
+    static get observedAttributes(): string[];
+    private _items;
+    get items(): DbChatSuggestion[];
+    set items(list: DbChatSuggestion[]);
+    get layout(): string;
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private select;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-chat-suggestions': DbChatSuggestions;
+    }
+}
+
+declare const ROLES: readonly ["user", "assistant", "system"];
+type Role = (typeof ROLES)[number];
+/**
+ * 채팅 메시지 한 줄. 본문은 라이트 DOM 자식으로 전달하며 컴포넌트가 감쌉니다.
+ * 아바타는 `db-avatar` 를 재사용합니다.
+ *
+ * @example
+ *   <db-chat-message role="assistant" name="Orion" actions="copy,regenerate,like,dislike">
+ *     안녕하세요! 무엇을 도와드릴까요?
+ *   </db-chat-message>
+ */
+declare class DbChatMessage extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private contentEl;
+    private avatarWrap;
+    private headerEl;
+    private nameEl;
+    private timeEl;
+    private actionsEl;
+    get role(): Role;
+    set role(v: Role);
+    connectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private build;
+    private sync;
+    private renderAvatar;
+    private renderActions;
+    private handleAction;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-chat-message': DbChatMessage;
+    }
+}
+
+/**
+ * AI 응답 대기(생성 중) 표시. 3점 바운스 인디케이터.
+ * 아바타는 `db-avatar` 를 재사용합니다.
+ *
+ * @example
+ *   <db-chat-typing name="Orion" label="생각 중…"></db-chat-typing>
+ */
+declare class DbChatTyping extends HTMLElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-chat-typing': DbChatTyping;
+    }
+}
+
+declare const VIEWS: readonly ["home", "messages", "conversation", "help"];
+type ChatView = (typeof VIEWS)[number];
+declare const POSITIONS: readonly ["bottom-right", "bottom-left"];
+type ChatPosition = (typeof POSITIONS)[number];
+interface DbChatWidgetMessage {
+    id?: string;
+    /** `assistant`(상담원/봇) 또는 `user` */
+    role?: 'assistant' | 'user';
+    text: string;
+    name?: string;
+    time?: string;
+    avatarSrc?: string;
+    avatarInitials?: string;
+    /** 말풍선 액션 (예: 'copy,like,dislike') — db-chat-message 로 전달 */
+    actions?: string;
+}
+interface DbChatWidgetConversation {
+    id?: string;
+    name: string;
+    avatarSrc?: string;
+    avatarInitials?: string;
+    preview?: string;
+    time?: string;
+    unread?: number;
+    online?: boolean;
+}
+/**
+ * FAB 로 열고 닫는 우측 하단 채팅 상담 위젯(껍데기).
+ *
+ * 홈·메시지·대화·도움말 4개 화면을 하단 탭으로 전환하며, 본문은 AI 채팅 프리미티브
+ * (`db-chat-welcome` · `db-chat-message` · `db-chat-typing` · `db-chat-composer`
+ * · `db-chat-suggestions` · `db-chat-orb`)를 조합해 구성합니다. 실제 백엔드 연동
+ * 없이 UI 골격만 제공하고, 상호작용은 이벤트로 위임합니다.
+ *
+ * @fires db-open        - 패널 열림
+ * @fires db-close       - 패널 닫힘
+ * @fires db-toggle      - FAB 토글 (detail: { open })
+ * @fires db-view-change - 화면 전환 (detail: { view })
+ * @fires db-send        - 메시지 전송 (detail: { text })
+ * @fires db-menu-select - 홈 메뉴 선택 (detail: { id, value })
+ * @fires db-quick-reply - 빠른 답변 선택 (detail: { id, value })
+ * @fires db-article-select      - 도움말 문서 선택 (detail: { id, title })
+ * @fires db-conversation-select - 대화 목록 선택 (detail: { id })
+ * @fires db-message-action      - 말풍선 액션 (detail: { action, text })
+ *
+ * @example
+ *   const chat = document.createElement('db-chat-widget');
+ *   chat.setAttribute('agent-name', '디지털 상담원');
+ *   chat.setAttribute('unread', '2');
+ *   document.body.appendChild(chat);
+ *   chat.addEventListener('db-send', (e) => {
+ *     chat.setTyping(true);
+ *     setTimeout(() => {
+ *       chat.setTyping(false);
+ *       chat.addMessage({ role: 'assistant', text: '확인했어요!' });
+ *     }, 900);
+ *   });
+ */
+declare class DbChatWidget extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private typing;
+    private _messages;
+    private _conversations;
+    private _menuItems;
+    private _quickReplies;
+    private _articles;
+    private launcher;
+    private launcherBadge;
+    private panel;
+    private headerEl;
+    private bodyEl;
+    private footerEl;
+    private navEl;
+    private composer;
+    private threadEl;
+    get open(): boolean;
+    set open(v: boolean);
+    get view(): ChatView;
+    set view(v: ChatView);
+    get position(): ChatPosition;
+    set position(v: ChatPosition);
+    get unread(): number;
+    set unread(v: number);
+    set messages(v: DbChatWidgetMessage[]);
+    get messages(): DbChatWidgetMessage[];
+    set conversations(v: DbChatWidgetConversation[]);
+    get conversations(): DbChatWidgetConversation[];
+    set menuItems(v: DbChatSuggestion[]);
+    get menuItems(): DbChatSuggestion[];
+    set quickReplies(v: DbChatSuggestion[]);
+    get quickReplies(): DbChatSuggestion[];
+    set articles(v: DbChatSuggestion[]);
+    get articles(): DbChatSuggestion[];
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    private hydrateFromAttributes;
+    private build;
+    private sync;
+    private syncOpenState;
+    private renderBadge;
+    private renderHeader;
+    private iconButton;
+    private renderBody;
+    private renderHome;
+    private renderMessages;
+    private renderConversation;
+    private renderHelp;
+    private buildMessage;
+    private buildTyping;
+    private buildEmpty;
+    private renderFooter;
+    private renderNav;
+    private scrollThreadToEnd;
+    private nowLabel;
+    private dispatch;
+    openWidget(): void;
+    close(): void;
+    toggle(): void;
+    setView(view: ChatView): void;
+    /** 스레드에 메시지를 추가하고 대화 화면으로 전환/렌더 */
+    addMessage(msg: DbChatWidgetMessage): void;
+    /** 챗봇 입력중(...) 표시 토글 */
+    setTyping(on: boolean): void;
+    /** 전송 중(정지 버튼) 상태 — 컴포저에 위임 */
+    setStreaming(on: boolean): void;
+    /** 스레드 전체 교체 */
+    setMessages(messages: DbChatWidgetMessage[]): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-chat-widget': DbChatWidget;
+    }
+}
+
+interface DbArtifactOptions {
+    /** 패널 헤더 제목 */
+    title?: string;
+    /** 헤더 부제(선택) */
+    subtitle?: string;
+    /** 본문 HTML (setArtifactContent 로 요소를 직접 넣을 수도 있음) */
+    html?: string;
+    /** 인라인 카드와 동기화할 id (toggle 용) */
+    id?: string;
+}
+/** 채팅 스레드 안에 노출되는 결과물(아티팩트) 카드 */
+interface DbChatArtifactRef {
+    id?: string;
+    title: string;
+    subtitle?: string;
+    icon?: string;
+    html?: string;
+}
+interface DbChatMessageData {
+    id?: string;
+    role?: 'user' | 'assistant' | 'system';
+    /** 평문 본문 */
+    text?: string;
+    /** HTML 본문 (text 대신) */
+    html?: string;
+    name?: string;
+    time?: string;
+    avatarSrc?: string;
+    avatarInitials?: string;
+    /** 말풍선 액션 (예: 'copy,regenerate,like,dislike') */
+    actions?: string;
+    status?: 'sending' | 'error';
+    variant?: 'bubble' | 'plain';
+    /** 스레드 인라인 결과물 카드 — 클릭 시 우측 아티팩트 패널 토글 */
+    artifact?: DbChatArtifactRef;
+}
+/**
+ * 전체 대화형 AI 채팅 화면. 시작 전(빈 상태)과 대화 중을 하나로 통합한 최상위 컴포넌트로,
+ * 채팅 프리미티브(`db-chat-welcome` · `db-chat-suggestions` · `db-chat-message`
+ * · `db-chat-typing` · `db-chat-composer`)를 조합합니다.
+ *
+ * - 메시지가 없으면 히어로(인사말 + 추천)를 중앙에 보여주고,
+ * - 메시지가 생기면 스크롤 스레드로 전환하며, 컴포저는 항상 하단에 고정됩니다.
+ *
+ * @fires db-send            - 전송 (detail: { value, attachments })
+ * @fires db-stop            - 생성 중지
+ * @fires db-tool-toggle     - 툴 토글 (detail: { id, active })
+ * @fires db-attach          - 첨부 종류 선택 (detail: { type })
+ * @fires db-attach-files    - 파일 선택 (detail: { type, files })
+ * @fires db-voice           - 음성 입력
+ * @fires db-suggestion-select - 추천 선택 (detail: { id, title, value })
+ * @fires db-message-action  - 말풍선 액션 (detail: { action, text })
+ *
+ * @example
+ *   const chat = document.querySelector('db-chat');
+ *   chat.suggestions = [{ title:'카피 작성', icon:'edit' }];
+ *   chat.tools = [{ id:'reason', label:'Reasoning', icon:'bulb' }];
+ *   chat.addEventListener('db-send', (e) => {
+ *     chat.addMessage({ role:'user', text: e.detail.value });
+ *     chat.setTyping(true);
+ *   });
+ */
+declare class DbAiChat extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private typing;
+    private _messages;
+    private _suggestions;
+    private _tools;
+    private _attachOptions;
+    private mainEl;
+    private scrollEl;
+    private dockEl;
+    private composer;
+    private threadEl;
+    private artifactEl;
+    private artifactTitleEl;
+    private artifactSubtitleEl;
+    private artifactBodyEl;
+    private activeArtifactId;
+    private artifactSeq;
+    set messages(v: DbChatMessageData[]);
+    get messages(): DbChatMessageData[];
+    set suggestions(v: DbChatSuggestion[]);
+    get suggestions(): DbChatSuggestion[];
+    set tools(v: DbChatTool[]);
+    get tools(): DbChatTool[];
+    set attachOptions(v: DbChatAttachOption[]);
+    get attachOptions(): DbChatAttachOption[];
+    connectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private build;
+    private buildArtifact;
+    private sync;
+    private syncArtifact;
+    private syncComposerToggles;
+    private renderContent;
+    private renderHero;
+    private renderThread;
+    private buildMessage;
+    private ensureArtifactId;
+    private buildArtifactCard;
+    private syncArtifactCardStates;
+    private toggleArtifactFromCard;
+    private buildTyping;
+    private renderDock;
+    private onSend;
+    private onSuggestionSelect;
+    private relay;
+    private scrollToEnd;
+    /** 메시지를 추가하고 스레드로 전환/스크롤. 추가된 메시지 id 반환 */
+    addMessage(msg: DbChatMessageData): string;
+    /** 특정 메시지 본문/속성 갱신 */
+    updateMessage(id: string, patch: Partial<DbChatMessageData>): void;
+    /** 스트리밍용: 마지막(또는 지정) 메시지 본문에 청크 이어붙이기 */
+    appendToMessage(id: string, chunk: string): void;
+    /** 전체 메시지 교체 */
+    setMessages(list: DbChatMessageData[]): void;
+    /** 대화를 비우고 히어로(빈 상태)로 복귀 */
+    clear(): void;
+    /** 생각 중(…) 표시 토글 */
+    setTyping(on: boolean): void;
+    /** 전송 중(정지 버튼) 상태 — 컴포저에 위임 */
+    setStreaming(on: boolean): void;
+    /** 입력창 포커스 */
+    focusInput(): void;
+    /** 컴포저 인스턴스 접근 */
+    getComposer(): DbChatComposer;
+    get artifactOpen(): boolean;
+    set artifactOpen(v: boolean);
+    /**
+     * 우측 아티팩트 패널을 엽니다(내용 지정 시 함께 세팅).
+     * 열리면 채팅 본문이 좌측으로 밀립니다.
+     * `id` 를 넘기면 스레드 인라인 카드 활성 상태가 동기화됩니다.
+     */
+    openArtifact(opts?: DbArtifactOptions): void;
+    /** 아티팩트 패널을 닫습니다. */
+    closeArtifact(): void;
+    /** 아티팩트 열림/닫힘 토글. */
+    toggleArtifact(): void;
+    /** 아티팩트 본문 요소(커스텀 콘텐츠를 직접 마운트할 때). */
+    getArtifactBody(): HTMLElement;
+    /** 아티팩트 본문을 요소로 교체합니다. */
+    setArtifactContent(node: Node): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-ai-chat': DbAiChat;
+    }
+}
+
+interface DbAiChatItem {
+    id: string;
+    /** 대화 제목 */
+    title: string;
+    /** 그룹 라벨 (예: '오늘', '어제', '지난 7일'). 없으면 '최근 항목' */
+    group?: string;
+    /** 행 아이콘(선택) */
+    icon?: DbIconName;
+}
+/**
+ * AI 대화 이력 목록. 상단 '새 대화' 버튼 + 그룹별 최근 대화 리스트로 구성됩니다.
+ * (사람 간 대화 목록은 `db-chat-list` 를 사용하세요.)
+ *
+ * @fires db-new    - 새 대화 시작
+ * @fires db-select - 대화 선택 (detail: { id, title })
+ *
+ * @example
+ *   const list = document.querySelector('db-ai-chat-list');
+ *   list.items = [{ id:'1', title:'다운로드 진행바 컴포넌트', group:'오늘' }];
+ *   list.addEventListener('db-new', () => {});
+ *   list.addEventListener('db-select', (e) => console.log(e.detail.id));
+ */
+declare class DbAiChatList extends HTMLElement {
+    static get observedAttributes(): string[];
+    private _items;
+    get items(): DbAiChatItem[];
+    set items(v: DbAiChatItem[]);
+    get selectedId(): string;
+    set selectedId(v: string);
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-ai-chat-list': DbAiChatList;
+    }
+}
+
+interface DbChatListItem {
+    id: string;
+    /** 상대(대화방) 이름 */
+    name: string;
+    avatarSrc?: string;
+    avatarInitials?: string;
+    /** 마지막 메시지 미리보기 */
+    preview?: string;
+    /** 시간 라벨 (예: '방금', '어제') */
+    time?: string;
+    /** 안 읽은 수 */
+    unread?: number;
+    /** 온라인 표시 */
+    online?: boolean;
+}
+/**
+ * 사람 간 대화(메신저) 목록. 아바타 + 이름 + 미리보기 + 시간 + 안읽음 배지의 행 리스트로,
+ * 아바타는 `db-avatar` 를 재사용합니다. AI 대화 이력은 `db-ai-chat-list` 를 쓰세요.
+ *
+ * @fires db-select - 대화 선택 (detail: { id })
+ *
+ * @example
+ *   const list = document.querySelector('db-chat-list');
+ *   list.items = [{ id:'1', name:'디지털 상담원', preview:'무엇을 도와드릴까요?', time:'방금', unread:1, online:true }];
+ *   list.addEventListener('db-select', (e) => console.log(e.detail.id));
+ */
+declare class DbChatList extends HTMLElement {
+    static get observedAttributes(): string[];
+    private _items;
+    get items(): DbChatListItem[];
+    set items(v: DbChatListItem[]);
+    get selectedId(): string;
+    set selectedId(v: string);
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-chat-list': DbChatList;
+    }
+}
+
+interface DbChatRoomMessage {
+    id?: string;
+    /** 내가 보낸 메시지면 true(우측 정렬). 아니면 상대(좌측) */
+    mine?: boolean;
+    text?: string;
+    html?: string;
+    time?: string;
+    /** 상대 이름(그룹 채팅에서 유용) */
+    name?: string;
+    avatarSrc?: string;
+    avatarInitials?: string;
+}
+/**
+ * 사람 간 1:1/그룹 대화 화면. 상단 헤더(상대 정보) + 메시지 스레드 + 하단 컴포저.
+ * 메시지·아바타·입력창은 `db-chat-message` · `db-avatar` · `db-chat-composer` 를 재사용합니다.
+ * AI 대화 화면은 `db-ai-chat` 을 쓰세요.
+ *
+ * @fires db-send - 전송 (detail: { value, attachments })
+ * @fires db-back - 뒤로가기
+ *
+ * @example
+ *   const room = document.querySelector('db-chat-room');
+ *   room.setAttribute('peer-name', '디지털 상담원');
+ *   room.messages = [{ mine:false, text:'무엇을 도와드릴까요?', time:'오후 2:31' }];
+ *   room.addEventListener('db-send', (e) => room.addMessage({ mine:true, text:e.detail.value }));
+ */
+declare class DbChatRoom extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private typing;
+    private _messages;
+    private headerEl;
+    private scrollEl;
+    private threadEl;
+    private dockEl;
+    private composer;
+    set messages(v: DbChatRoomMessage[]);
+    get messages(): DbChatRoomMessage[];
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private build;
+    private sync;
+    private renderHeader;
+    private renderThread;
+    private buildMessage;
+    private buildTyping;
+    private scrollToEnd;
+    /** 메시지 추가. 추가된 id 반환 */
+    addMessage(msg: DbChatRoomMessage): string;
+    /** 전체 메시지 교체 */
+    setMessages(list: DbChatRoomMessage[]): void;
+    /** 상대 입력중(…) 표시 토글 */
+    setTyping(on: boolean): void;
+    /** 입력창 포커스 */
+    focusInput(): void;
+    /** 컴포저 인스턴스 접근 */
+    getComposer(): DbChatComposer;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-chat-room': DbChatRoom;
+    }
+}
+
 /**
  * 명령형 toast() 헬퍼 — 컨테이너/스택/제거를 자동 관리합니다.
  *
@@ -4261,5 +5350,5 @@ interface DbConfirmOptions {
 /** 확인 대화상자를 띄우고, 확인 시 true / 취소(ESC·배경 포함) 시 false 로 resolve 합니다. */
 declare function confirm(options: DbConfirmOptions): Promise<boolean>;
 
-export { DbAccordion, DbAdBanner, DbAlert, DbAnimationBackground, DbAnimationText, DbAppBadge, DbAudioPlayer, DbAvatar, DbBackdrop, DbBadge, DbBanner, DbBottomNavigation, DbBottomSheet, DbBreadcrumbs, DbButton, DbCalendar, DbCard, DbCarousel, DbCheckbox, DbChip, DbCodeBlock, DbColorPicker, DbConfirm, DbContainer, DbContextMenu, DbCountdown, DbCursorFollower, DbDatePicker, DbDivider, DbDrawer, DbDropdown, DbDropzone, DbEmptyState, DbFileUploader, DbFloatingActionButton, DbFooter, DbForm, DbGantt, DbGradient, DbGrid, DbGridBackground, DbGridItem, DbImage, DbImageList, DbImagePlaceholder, DbIndicator, DbInput, DbKanban, DbLabel, DbLightbox, DbList, DbLogo, DbLottie, DbMarkdownEditor, DbMarquee, DbMasonry, DbMenuItem, DbModal, DbNavbar, DbOnboardingModal, DbPageHeader, DbPagination, DbPopover, DbProgress, DbProgressStep, DbProgressbar, DbRadio, DbRandomGradient, DbRangeSlider, DbRating, DbReorder, DbResizablePanels, DbScrollArea, DbSearchBar, DbSection, DbSectionAppDownload, DbSectionContact, DbSectionCta, DbSectionFaq, DbSectionFeature, DbSectionFeatureGrid, DbSectionHero, DbSectionLogoCloud, DbSectionPricing, DbSectionStats, DbSectionTestimonials, DbSegmentControl, DbSelect, DbShare, DbSidebar, DbSkeleton, DbSpinner, DbSplitView, DbStack, DbStat, DbStepper, DbTable, DbTabs, DbTestimonial, DbTextarea, DbTimePicker, DbTimeline, DbToast, DbToggle, DbToolbar, DbTooltip, DbTopBanner, DbTutorial, DbVideoPlayer, DbYouTubePlayer, confirm, confirm as dbConfirm, toast as dbToast, showToast, toast };
-export type { CalendarEventData, CalendarEventType, DbAlertAction, DbBannerAction, DbBottomNavigationItem, DbConfirmOptions, DbConfirmVariant, DbFooterCompanyInfo, DbFooterFamilySite, DbFooterLink, DbFooterLinkColumn, DbFooterSocialLink, DbFormFieldData, DbGanttAssignee, DbGanttGroup, DbGanttItem, DbGanttItemStatus, DbGanttRow, DbImageListItem, DbKanbanAssignee, DbKanbanCard, DbKanbanColumn, DbKanbanPriority, DbKanbanTag, DbLightboxImage, DbNavbarItem, DbNavbarUserProfile, DbPageHeaderTabItem, DbSharePlatform, DbShareVariant, DbSidebarItem, DbSidebarProject, DbSidebarPromoBanner, DbSidebarSection, DbSidebarUserProfile, DbStatChange, DbTimelineItem, DbToastApi, DbToastHandle, DbToastOptions, DbToastPosition, DbToastStatus };
+export { DbAccordion, DbAdBanner, DbAiChat, DbAiChatList, DbAlert, DbAnimationBackground, DbAnimationText, DbAppBadge, DbAudioPlayer, DbAvatar, DbBackdrop, DbBadge, DbBanner, DbBottomNavigation, DbBottomSheet, DbBreadcrumbs, DbButton, DbCalendar, DbCard, DbCarousel, DbChatComposer, DbChatList, DbChatMessage, DbChatOrb, DbChatRoom, DbChatSuggestions, DbChatTyping, DbChatWelcome, DbChatWidget, DbCheckbox, DbChip, DbCodeBlock, DbColorPicker, DbConfirm, DbContainer, DbContextMenu, DbCountdown, DbCursorFollower, DbDatePicker, DbDivider, DbDownloadProgress, DbDrawer, DbDropdown, DbDropzone, DbEmailVerify, DbEmptyState, DbFileUploader, DbFloatingActionButton, DbFooter, DbForm, DbGantt, DbGradient, DbGrid, DbGridBackground, DbGridItem, DbImage, DbImageList, DbImagePlaceholder, DbIndicator, DbInput, DbKanban, DbLabel, DbLightbox, DbList, DbLogo, DbLottie, DbMarkdownEditor, DbMarquee, DbMasonry, DbMenuItem, DbModal, DbNavbar, DbOnboardingModal, DbOtpInput, DbPageHeader, DbPagination, DbPhoneVerify, DbPopover, DbProgress, DbProgressStep, DbProgressbar, DbRadio, DbRandomGradient, DbRangeSlider, DbRating, DbReorder, DbResizablePanels, DbScrollArea, DbSearchBar, DbSection, DbSectionAppDownload, DbSectionContact, DbSectionCta, DbSectionFaq, DbSectionFeature, DbSectionFeatureGrid, DbSectionHero, DbSectionLogoCloud, DbSectionPricing, DbSectionStats, DbSectionTestimonials, DbSegmentControl, DbSelect, DbShare, DbSidebar, DbSkeleton, DbSpinner, DbSplitView, DbStack, DbStat, DbStepper, DbTable, DbTabs, DbTestimonial, DbTextarea, DbTimePicker, DbTimeline, DbToast, DbToggle, DbToolbar, DbTooltip, DbTopBanner, DbTutorial, DbTwoFactor, DbVideoPlayer, DbYouTubePlayer, confirm, confirm as dbConfirm, toast as dbToast, showToast, toast };
+export type { CalendarEventData, CalendarEventType, DbAiChatItem, DbAlertAction, DbArtifactOptions, DbBannerAction, DbBottomNavigationItem, DbChatArtifactRef, DbChatAttachOption, DbChatListItem, DbChatMessageData, DbChatRoomMessage, DbChatSuggestion, DbChatTool, DbChatWidgetConversation, DbChatWidgetMessage, DbConfirmOptions, DbConfirmVariant, DbFooterCompanyInfo, DbFooterFamilySite, DbFooterLink, DbFooterLinkColumn, DbFooterSocialLink, DbFormFieldData, DbGanttAssignee, DbGanttGroup, DbGanttItem, DbGanttItemStatus, DbGanttRow, DbImageListItem, DbKanbanAssignee, DbKanbanCard, DbKanbanColumn, DbKanbanPriority, DbKanbanTag, DbLightboxImage, DbNavbarItem, DbNavbarUserProfile, DbPageHeaderTabItem, DbSharePlatform, DbShareVariant, DbSidebarItem, DbSidebarProject, DbSidebarPromoBanner, DbSidebarSection, DbSidebarUserProfile, DbStatChange, DbTimelineItem, DbToastApi, DbToastHandle, DbToastOptions, DbToastPosition, DbToastStatus };