@artooi/ag-ui-web-component 0.6.0 → 0.7.0

package/dist/tools/page_action_tools.d.ts

@@ -0,0 +1,31 @@
+import type { ClientTool } from "./client_tool_registry.js";
+/**
+ * Resolve a page-action target string to a host-page element, or `null` when it
+ * matches nothing. The default (`document.querySelector`) treats the string as a
+ * CSS selector; a host with a page map overrides it to map its own element ids,
+ * the same way host packages wrap the DOM-driver primitives with environment-
+ * aware lookups.
+ */
+export type ResolvePageTarget = (target: string) => HTMLElement | null;
+/** The built-in page-action tool tokens, opted in via `data-page-actions`. */
+export declare const PAGE_ACTIONS: {
+    readonly SCROLL: "scroll";
+    readonly DRAG: "drag";
+};
+/**
+ * The opt-in page-action tools selected by `enabled` (a set of
+ * {@link PAGE_ACTIONS} tokens), bound to a {@link ResolvePageTarget}.
+ *
+ * - `scroll_to` — scroll a target (`top` / `bottom` / a resolver target) into
+ *   view. Benign; no confirmation.
+ * - `drag_and_drop` — drag one element onto another, firing the standard HTML5
+ *   drag sequence so the host page's own drop handler reacts. Not stamped
+ *   destructive: a drag rearranges transient state and the durable change
+ *   happens at the page's explicit commit. A host whose page persists *on drop*
+ *   gates it with the element's `confirmPredicate`.
+ *
+ * Both report a clean, model-readable error when a target resolves to nothing,
+ * rather than throwing an opaque crash.
+ */
+export declare function createPageActionTools(enabled: ReadonlySet<string>, resolveTarget: ResolvePageTarget): ClientTool[];
+//# sourceMappingURL=page_action_tools.d.ts.map

package/dist/tools/page_action_tools.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page_action_tools.d.ts","sourceRoot":"","sources":["../../src/tools/page_action_tools.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAE5D;;;;;;GAMG;AACH,MAAM,MAAM,iBAAiB,GAAG,CAAC,MAAM,EAAE,MAAM,KAAK,WAAW,GAAG,IAAI,CAAC;AAEvE,8EAA8E;AAC9E,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,EAC5B,aAAa,EAAE,iBAAiB,GAC/B,UAAU,EAAE,CASd"}

package/dist/ui/attachment_tray.d.ts

@@ -1,5 +1,6 @@
 import type { AttachmentRef } from "../core/attachment.js";
 import type { UploadHandler } from "../core/upload_attachment.js";
+import { type UiStrings } from "./ui_strings.js";
 /** Config the host ({@link AgUiChat}) hands the tray. */
 export interface AttachmentTrayConfig {
     /** Upload one file, reporting `0..1` progress; resolves to a durable ref. */
@@ -10,6 +11,8 @@ export interface AttachmentTrayConfig {
     readonly accept: string;
     /** Fired when the set of attachments changes (add / settle / remove). */
     readonly onChange?: () => void;
+    /** Localized strings; defaults to the English {@link DEFAULT_UI_STRINGS}. */
+    readonly strings?: UiStrings;
 }
 /**
  * The composer's pending-attachments tray: a chip per picked file with a

package/dist/ui/attachment_tray.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"attachment_tray.d.ts","sourceRoot":"","sources":["../../src/ui/attachment_tray.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAMlE,yDAAyD;AACzD,MAAM,WAAW,oBAAoB;IACnC,6EAA6E;IAC7E,QAAQ,CAAC,MAAM,EAAE,aAAa,CAAC;IAC/B,oFAAoF;IACpF,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,qEAAqE;IACrE,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,yEAAyE;IACzE,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC;AAYD;;;;;;;;;GASG;AACH,qBAAa,cAAc;;IACzB,qEAAqE;IACrE,QAAQ,CAAC,OAAO,EAAE,cAAc,CAAC;gBAKrB,MAAM,EAAE,oBAAoB;IAOxC,gFAAgF;IAChF,GAAG,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI;IAuBrB,8DAA8D;IAC9D,SAAS,IAAI,SAAS,aAAa,EAAE;IAUrC,gFAAgF;IAChF,UAAU,IAAI,OAAO;IAIrB,uCAAuC;IACvC,OAAO,IAAI,OAAO;IAIlB,2EAA2E;IAC3E,UAAU,IAAI,IAAI;IAKlB,4CAA4C;IAC5C,KAAK,IAAI,IAAI;CA2Gd"}
+{"version":3,"file":"attachment_tray.d.ts","sourceRoot":"","sources":["../../src/ui/attachment_tray.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAElE,OAAO,EAAsB,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAKrE,yDAAyD;AACzD,MAAM,WAAW,oBAAoB;IACnC,6EAA6E;IAC7E,QAAQ,CAAC,MAAM,EAAE,aAAa,CAAC;IAC/B,oFAAoF;IACpF,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,qEAAqE;IACrE,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,yEAAyE;IACzE,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,6EAA6E;IAC7E,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;CAC9B;AAYD;;;;;;;;;GASG;AACH,qBAAa,cAAc;;IACzB,qEAAqE;IACrE,QAAQ,CAAC,OAAO,EAAE,cAAc,CAAC;gBAMrB,MAAM,EAAE,oBAAoB;IASxC,gFAAgF;IAChF,GAAG,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI;IAuBrB,8DAA8D;IAC9D,SAAS,IAAI,SAAS,aAAa,EAAE;IAUrC,gFAAgF;IAChF,UAAU,IAAI,OAAO;IAIrB,uCAAuC;IACvC,OAAO,IAAI,OAAO;IAIlB,2EAA2E;IAC3E,UAAU,IAAI,IAAI;IAKlB,4CAA4C;IAC5C,KAAK,IAAI,IAAI;CA2Gd"}

package/dist/ui/confirmation_card.d.ts

@@ -1,10 +1,11 @@
+import { type UiStrings } from "./ui_strings.js";
 /** What the inline confirmation card displays. */
 export interface ConfirmationRequest {
     toolName: string;
     args: Record<string, unknown>;
     /**
      * Human-readable prompt (from the tool's `x-confirm` metadata), e.g.
-     * "Activate this project?". Falls back to a generic `Run "<tool>"?`.
+     * "Activate this project?". Falls back to the generic `confirmRun` template.
      */
     message?: string;
 }
@@ -16,6 +17,8 @@ export interface ConfirmationOptions {
      * pending confirmation when the user cancels the whole run.
      */
     signal?: AbortSignal;
+    /** Localized strings; defaults to the English {@link DEFAULT_UI_STRINGS}. */
+    strings?: UiStrings;
 }
 /**
  * Append an inline confirmation card to ``host`` (the chat message list) and

package/dist/ui/confirmation_card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"confirmation_card.d.ts","sourceRoot":"","sources":["../../src/ui/confirmation_card.ts"],"names":[],"mappings":"AAAA,kDAAkD;AAClD,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAWD,+CAA+C;AAC/C,MAAM,WAAW,mBAAmB;IAClC;;;;OAIG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAED;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,IAAI,GAAG,UAAU,EACvB,OAAO,EAAE,mBAAmB,EAC5B,OAAO,GAAE,mBAAwB,GAChC,OAAO,CAAC,OAAO,CAAC,CAgDlB"}
+{"version":3,"file":"confirmation_card.d.ts","sourceRoot":"","sources":["../../src/ui/confirmation_card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAErE,kDAAkD;AAClD,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAYD,+CAA+C;AAC/C,MAAM,WAAW,mBAAmB;IAClC;;;;OAIG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,6EAA6E;IAC7E,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,IAAI,GAAG,UAAU,EACvB,OAAO,EAAE,mBAAmB,EAC5B,OAAO,GAAE,mBAAwB,GAChC,OAAO,CAAC,OAAO,CAAC,CAqDlB"}

package/dist/ui/relative_time.d.ts

@@ -1,11 +1,13 @@
+import { type UiStrings } from "./ui_strings.js";
 /**
  * A compact relative timestamp for a thread row — e.g. `"just now"`, `"5m ago"`,
  * `"3h ago"`, `"2d ago"`, `"4w ago"`.
  *
  * `now` is injectable so callers (and tests) can pin the reference point; it
  * defaults to the current time. A timestamp in the future (clock skew) reads as
- * `"just now"`. Kept locale-independent on purpose so the rendered label is
- * stable across environments.
+ * `"just now"`. The unit words come from {@link UiStrings} (the `{n}` token is
+ * filled in here) so a localized host translates them; the bucketing stays
+ * integer-rounded and locale-neutral.
  */
-export declare function relativeTime(timestamp: number, now?: number): string;
+export declare function relativeTime(timestamp: number, now?: number, strings?: UiStrings): string;
 //# sourceMappingURL=relative_time.d.ts.map

package/dist/ui/relative_time.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"relative_time.d.ts","sourceRoot":"","sources":["../../src/ui/relative_time.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,SAAS,EAAE,MAAM,EAAE,GAAG,GAAE,MAAmB,GAAG,MAAM,CAkBhF"}
+{"version":3,"file":"relative_time.d.ts","sourceRoot":"","sources":["../../src/ui/relative_time.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAErE;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAC1B,SAAS,EAAE,MAAM,EACjB,GAAG,GAAE,MAAmB,EACxB,OAAO,GAAE,SAA8B,GACtC,MAAM,CAkBR"}

package/dist/ui/styles.d.ts

@@ -1,2 +1,2 @@
-export declare const STYLES = "\n:host {\n  /* Colors */\n  --ag-ui-bg: #ffffff;\n  --ag-ui-fg: #1a1a2e;\n  --ag-ui-accent: #4f46e5;\n  --ag-ui-user-bg: #4f46e5;\n  --ag-ui-user-fg: #ffffff;\n  --ag-ui-assistant-bg: #f1f1f6;\n  --ag-ui-input-bg: var(--ag-ui-bg);\n  --ag-ui-tool-bg: var(--ag-ui-assistant-bg);\n  --ag-ui-tool-fg: var(--ag-ui-accent);\n  --ag-ui-header-bg: var(--ag-ui-accent);\n  --ag-ui-header-fg: #ffffff;\n  --ag-ui-border: #e2e2ec;\n  --ag-ui-radius: 12px;\n\n  /* Status accents for tool-call cards. */\n  --ag-ui-success: #15803d;\n  --ag-ui-danger: #b91c1c;\n  --ag-ui-muted: #6b7280;\n\n  /* Surface \u2014 set --ag-ui-shadow: none for a flush, embedded panel. */\n  --ag-ui-shadow: 0 12px 32px rgba(20, 20, 50, 0.18);\n  --ag-ui-font: inherit;\n  --ag-ui-font-size: 14px;\n  --ag-ui-code-font: ui-monospace, \"SF Mono\", Menlo, monospace;\n\n  /* Spacing \u2014 the density preset overrides these. */\n  --ag-ui-space: 10px;\n  --ag-ui-pad: 16px;\n  --ag-ui-msg-pad: 8px 12px;\n  --ag-ui-msg-radius: 14px;\n\n  /* Layout \u2014 override from outside to dock the widget anywhere.\n     Set --ag-ui-position: static (and place this element in your own\n     grid/flex layout) to embed it in the page flow instead of floating. */\n  --ag-ui-position: fixed;\n  --ag-ui-z-index: 2147483000;\n  --ag-ui-width: 380px;\n  --ag-ui-height: 560px;\n  --ag-ui-inset: auto 24px 24px auto;\n  --ag-ui-max-width: calc(100vw - 48px);\n  --ag-ui-max-height: calc(100vh - 48px);\n\n  position: var(--ag-ui-position);\n  inset: var(--ag-ui-inset);\n  z-index: var(--ag-ui-z-index);\n  width: var(--ag-ui-width);\n  max-width: var(--ag-ui-max-width);\n  height: var(--ag-ui-height);\n  max-height: var(--ag-ui-max-height);\n  display: flex;\n  font-family: var(--ag-ui-font);\n  font-size: var(--ag-ui-font-size);\n  color: var(--ag-ui-fg);\n}\n\n/* \u2500\u2500 Themes \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   Themes only re-set the colour variables; layout/spacing are unaffected.\n   theme=\"auto\" follows the OS via prefers-color-scheme. */\n:host([theme=\"dark\"]) {\n  --ag-ui-bg: #15151f;\n  --ag-ui-fg: #e8e8f2;\n  --ag-ui-assistant-bg: #25253a;\n  --ag-ui-header-bg: #1f1f30;\n  --ag-ui-header-fg: #e8e8f2;\n  --ag-ui-border: #33334a;\n  --ag-ui-muted: #9aa0b4;\n  --ag-ui-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);\n}\n\n@media (prefers-color-scheme: dark) {\n  :host([theme=\"auto\"]) {\n    --ag-ui-bg: #15151f;\n    --ag-ui-fg: #e8e8f2;\n    --ag-ui-assistant-bg: #25253a;\n    --ag-ui-header-bg: #1f1f30;\n    --ag-ui-header-fg: #e8e8f2;\n    --ag-ui-border: #33334a;\n    --ag-ui-muted: #9aa0b4;\n    --ag-ui-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);\n  }\n}\n\n/* A terminal-flavoured \"code\" theme: dark, monospace, green accent. */\n:host([theme=\"code\"]) {\n  --ag-ui-bg: #0d1117;\n  --ag-ui-fg: #c9d1d9;\n  --ag-ui-accent: #3fb950;\n  --ag-ui-user-bg: #238636;\n  --ag-ui-assistant-bg: #161b22;\n  --ag-ui-header-bg: #010409;\n  --ag-ui-header-fg: #c9d1d9;\n  --ag-ui-border: #30363d;\n  --ag-ui-muted: #8b949e;\n  --ag-ui-font: var(--ag-ui-code-font);\n  --ag-ui-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);\n}\n\n/* \u2500\u2500 Density \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n:host([density=\"compact\"]) {\n  --ag-ui-font-size: 13px;\n  --ag-ui-space: 6px;\n  --ag-ui-pad: 10px;\n  --ag-ui-msg-pad: 5px 9px;\n  --ag-ui-msg-radius: 10px;\n}\n\n/* \u2500\u2500 Placement presets \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n:host([placement=\"bottom-left\"]) {\n  --ag-ui-inset: auto auto 24px 24px;\n}\n\n:host([placement=\"side\"]) {\n  --ag-ui-inset: 0 0 0 auto;\n  --ag-ui-width: 420px;\n  --ag-ui-height: 100vh;\n  --ag-ui-max-height: 100vh;\n  --ag-ui-radius: 0;\n}\n\n:host([placement=\"full\"]) {\n  --ag-ui-inset: 0;\n  --ag-ui-width: 100vw;\n  --ag-ui-height: 100vh;\n  --ag-ui-max-width: 100vw;\n  --ag-ui-max-height: 100vh;\n  --ag-ui-radius: 0;\n}\n\n/* Embedded: drop the floating chrome and the high z-index stacking context so\n   the widget lives in the host's own layout (fixes overlay/z-index clashes). */\n:host([placement=\"embedded\"]) {\n  --ag-ui-position: static;\n  --ag-ui-width: 100%;\n  --ag-ui-height: 100%;\n  --ag-ui-max-width: 100%;\n  --ag-ui-max-height: 100%;\n  --ag-ui-shadow: none;\n  --ag-ui-z-index: auto;\n}\n\n.chat {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  background: var(--ag-ui-bg);\n  border: 1px solid var(--ag-ui-border);\n  border-radius: var(--ag-ui-radius);\n  box-shadow: var(--ag-ui-shadow);\n  overflow: hidden;\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding: 10px 14px;\n  border-bottom: 1px solid var(--ag-ui-border);\n  background: var(--ag-ui-header-bg);\n  color: var(--ag-ui-header-fg);\n}\n\n.header-title {\n  font-weight: 600;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.header-controls {\n  display: flex;\n  gap: 2px;\n  flex: none;\n}\n\n.header-btn {\n  border: none;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  line-height: 1;\n  padding: 4px 7px;\n  border-radius: 6px;\n  cursor: pointer;\n  opacity: 0.85;\n}\n\n.header-btn:hover {\n  opacity: 1;\n  background: rgba(255, 255, 255, 0.18);\n}\n\n/* Collapsed: keep just the header bar \u2014 hide the whole body, and let the host\n   shrink to the header. (A host can also fully hide the element itself.) */\n:host([collapsed]) {\n  height: auto;\n  max-height: none;\n}\n\n:host([collapsed]) .messages,\n:host([collapsed]) .input-row,\n:host([collapsed]) .skill-chips,\n:host([collapsed]) .skill-palette,\n:host([collapsed]) .skill-hint {\n  display: none;\n}\n\n/* Edge-docked placements pin top *and* bottom, which would otherwise keep the\n   panel full-height when collapsed; unpin the bottom so it shrinks to the\n   header. (Floating/bottom-left pin only the bottom, so they already shrink.) */\n:host([collapsed][placement=\"side\"]),\n:host([collapsed][placement=\"full\"]) {\n  bottom: auto;\n}\n\n.messages {\n  flex: 1;\n  overflow-y: auto;\n  padding: var(--ag-ui-pad);\n  display: flex;\n  flex-direction: column;\n  gap: var(--ag-ui-space);\n}\n\n.message {\n  max-width: 80%;\n  padding: var(--ag-ui-msg-pad);\n  border-radius: var(--ag-ui-msg-radius);\n  line-height: 1.4;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n/* \u2500\u2500 Incoming-text animations (data-text-animation) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n/* .message--restored (rehydrated history) is excluded: entrance animations are\n   for freshly-arriving messages, not the whole transcript replaying on reload.\n   Word mode is excluded implicitly \u2014 restored bubbles aren't wrapped. */\n:host([data-text-animation=\"fade\"]) .message--assistant:not(.message--restored) {\n  animation: ag-ui-msg-fade 0.25s ease both;\n}\n\n@keyframes ag-ui-msg-fade {\n  from { opacity: 0; transform: translateY(4px); }\n  to { opacity: 1; transform: none; }\n}\n\n.message--assistant .word {\n  animation: ag-ui-word-in 0.3s ease both;\n  animation-delay: calc(var(--ag-ui-word-index, 0) * 35ms);\n}\n\n@keyframes ag-ui-word-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host([data-text-animation=\"fade\"]) .message--assistant,\n  .message--assistant .word {\n    animation: none;\n  }\n}\n\n.message--user {\n  align-self: flex-end;\n  background: var(--ag-ui-user-bg);\n  color: var(--ag-ui-user-fg);\n  border-bottom-right-radius: 4px;\n}\n\n.message--assistant {\n  align-self: flex-start;\n  background: var(--ag-ui-assistant-bg);\n  border-bottom-left-radius: 4px;\n  /* Assistant bubbles hold rendered markdown/HTML, so collapse the source\n     whitespace the renderer leaves between block tags. */\n  white-space: normal;\n}\n\n/* Rendered-markdown elements inside an assistant bubble. */\n.message--assistant > :first-child {\n  margin-top: 0;\n}\n\n.message--assistant > :last-child {\n  margin-bottom: 0;\n}\n\n.message--assistant p,\n.message--assistant ul,\n.message--assistant ol,\n.message--assistant blockquote,\n.message--assistant pre {\n  margin: 0.5em 0;\n}\n\n.message--assistant ul,\n.message--assistant ol {\n  padding-left: 1.3em;\n}\n\n.message--assistant a {\n  color: var(--ag-ui-accent);\n  text-decoration: underline;\n}\n\n.message--assistant code {\n  font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\n  font-size: 0.92em;\n  background: rgba(127, 127, 127, 0.16);\n  padding: 1px 4px;\n  border-radius: 4px;\n}\n\n.message--assistant pre {\n  padding: 8px 10px;\n  overflow: auto;\n  background: var(--ag-ui-bg);\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 6px;\n}\n\n.message--assistant pre code {\n  background: none;\n  padding: 0;\n}\n\n.message--assistant blockquote {\n  padding-left: 10px;\n  border-left: 3px solid var(--ag-ui-border);\n  color: var(--ag-ui-muted);\n}\n\n.pending {\n  align-self: flex-start;\n  display: inline-flex;\n  gap: 4px;\n  align-items: center;\n  padding: 12px 14px;\n  background: var(--ag-ui-assistant-bg);\n  border-radius: 14px;\n  border-bottom-left-radius: 4px;\n}\n\n.pending-dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: var(--ag-ui-muted);\n  animation: ag-ui-pending 1.2s infinite ease-in-out both;\n}\n\n.pending-dot:nth-child(2) {\n  animation-delay: 0.16s;\n}\n\n.pending-dot:nth-child(3) {\n  animation-delay: 0.32s;\n}\n\n@keyframes ag-ui-pending {\n  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }\n  40% { opacity: 1; transform: translateY(-3px); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .pending-dot {\n    animation: none;\n    opacity: 0.6;\n  }\n}\n\n.tool-call {\n  align-self: flex-start;\n  max-width: 80%;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  font-size: 12px;\n  font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\n  padding: 8px 10px;\n  border-radius: 8px;\n  background: var(--ag-ui-tool-bg);\n  border: 1px solid var(--ag-ui-border);\n  color: var(--ag-ui-tool-fg);\n}\n\n.tool-call-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.tool-call-name {\n  font-weight: 600;\n  word-break: break-word;\n}\n\n.tool-call-status {\n  flex: none;\n  padding: 1px 8px;\n  border-radius: 999px;\n  font-size: 11px;\n  font-weight: 600;\n  background: rgba(127, 127, 127, 0.16);\n  color: var(--ag-ui-muted);\n}\n\n.tool-call[data-status=\"done\"] .tool-call-status {\n  color: var(--ag-ui-success);\n}\n\n.tool-call[data-status=\"error\"] .tool-call-status {\n  color: var(--ag-ui-danger);\n}\n\n.tool-call[data-status=\"declined\"] .tool-call-status {\n  color: var(--ag-ui-muted);\n}\n\n.tool-call-args,\n.tool-call-result {\n  margin: 0;\n  padding: 6px 8px;\n  max-height: 160px;\n  overflow: auto;\n  background: var(--ag-ui-bg);\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 6px;\n  white-space: pre-wrap;\n  word-break: break-word;\n  color: var(--ag-ui-fg);\n}\n\n.tool-call-toggle {\n  align-self: flex-start;\n  border: none;\n  padding: 0;\n  background: none;\n  font: inherit;\n  font-weight: 600;\n  color: var(--ag-ui-accent);\n  cursor: pointer;\n}\n\n.tool-call-toggle::before {\n  content: \"\u25B8 \";\n}\n\n.tool-call-toggle[aria-expanded=\"true\"]::before {\n  content: \"\u25BE \";\n}\n\n.input-row {\n  display: flex;\n  gap: 8px;\n  padding: 12px;\n  border-top: 1px solid var(--ag-ui-border);\n}\n\n.input {\n  flex: 1;\n  resize: none;\n  background: var(--ag-ui-input-bg);\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 8px;\n  padding: 8px 10px;\n  font: inherit;\n  color: inherit;\n  outline: none;\n}\n\n.input:focus {\n  border-color: var(--ag-ui-accent);\n}\n\n.send {\n  border: none;\n  border-radius: 8px;\n  padding: 0 16px;\n  background: var(--ag-ui-accent);\n  color: #ffffff;\n  font: inherit;\n  font-weight: 600;\n  cursor: pointer;\n}\n\n.send:disabled {\n  opacity: 0.5;\n  cursor: default;\n}\n\n/* The composer button doubles as the Stop control while a run is in flight. */\n.send[data-state=\"running\"] {\n  background: var(--ag-ui-muted);\n}\n\n/* \u2500\u2500 File attachments \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n/* The \uD83D\uDCCE picker button sits left of the input; hidden until data-attachments-url. */\n.attach-btn {\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 8px;\n  padding: 0 10px;\n  background: var(--ag-ui-input-bg);\n  color: inherit;\n  font: inherit;\n  cursor: pointer;\n}\n\n.attach-btn:hover {\n  border-color: var(--ag-ui-accent);\n}\n\n.attach-input {\n  display: none;\n}\n\n/* Pending-attachments tray, above the input row; collapses (hidden) when empty. */\n.attachment-slot {\n  display: contents;\n}\n\n.attachment-tray {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  padding: 8px 12px 0;\n}\n\n.attachment-chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  margin-top: 6px;\n}\n\n.attachment-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  max-width: 100%;\n  padding: 4px 8px;\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 999px;\n  background: var(--ag-ui-assistant-bg);\n  font-size: 0.85em;\n  position: relative;\n}\n\n.attachment-chip--error {\n  border-color: var(--ag-ui-danger);\n  color: var(--ag-ui-danger);\n}\n\n.attachment-chip-name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 14ch;\n}\n\n.attachment-chip-size {\n  color: var(--ag-ui-muted);\n  white-space: nowrap;\n}\n\n.attachment-chip--error .attachment-chip-size {\n  color: var(--ag-ui-danger);\n}\n\n/* The progress bar fills as the file uploads. */\n.attachment-chip-bar {\n  flex-basis: 100%;\n  height: 3px;\n  border-radius: 2px;\n  background: var(--ag-ui-border);\n  overflow: hidden;\n}\n\n.attachment-chip-bar-fill {\n  height: 100%;\n  background: var(--ag-ui-accent);\n  transition: width 0.15s ease;\n}\n\n.attachment-chip-remove,\n.attachment-chip-retry {\n  border: none;\n  background: none;\n  color: inherit;\n  cursor: pointer;\n  padding: 0;\n  line-height: 1;\n  opacity: 0.7;\n}\n\n.attachment-chip-remove:hover,\n.attachment-chip-retry:hover {\n  opacity: 1;\n}\n\n/* A subtle outline while a file is dragged over the shell. */\n.chat--dragover {\n  outline: 2px dashed var(--ag-ui-accent);\n  outline-offset: -4px;\n}\n\n/* Muted \"\u23F9 Stopped\" line after a cancelled run \u2014 a note, not an error bubble. */\n.stopped-note {\n  align-self: flex-start;\n  color: var(--ag-ui-muted);\n  font-size: 12px;\n  padding: 2px 4px;\n}\n\n/* Inline confirmation card \u2014 lives in the transcript, no focus-stealing overlay. */\n.confirm {\n  align-self: stretch;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 12px;\n  background: var(--ag-ui-bg);\n  border: 1px solid var(--ag-ui-accent);\n  border-radius: 10px;\n}\n\n.confirm[data-resolved] {\n  opacity: 0.7;\n  border-color: var(--ag-ui-border);\n}\n\n.confirm-body {\n  font-weight: 600;\n}\n\n.confirm-args {\n  margin: 0;\n  padding: 8px 10px;\n  max-height: 140px;\n  overflow: auto;\n  font-size: 12px;\n  font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\n  background: var(--ag-ui-assistant-bg);\n  border-radius: 8px;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n.confirm-actions {\n  display: flex;\n  gap: 8px;\n  justify-content: flex-end;\n}\n\n.confirm-btn {\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 8px;\n  padding: 8px 14px;\n  font: inherit;\n  font-weight: 600;\n  cursor: pointer;\n  background: var(--ag-ui-bg);\n  color: var(--ag-ui-fg);\n}\n\n.confirm-btn:disabled {\n  cursor: default;\n  opacity: 0.6;\n}\n\n.confirm-btn--confirm {\n  border-color: var(--ag-ui-accent);\n  background: var(--ag-ui-accent);\n  color: #ffffff;\n}\n\n/* Skills \u2014 chips row + the /-command palette, above the input. */\n.skill-chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  padding: 10px 12px;\n}\n\n.skill-chip {\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 999px;\n  padding: 4px 12px;\n  font: inherit;\n  font-size: 0.9em;\n  cursor: pointer;\n  background: var(--ag-ui-assistant-bg);\n  color: var(--ag-ui-fg);\n}\n\n.skill-chip:hover {\n  border-color: var(--ag-ui-accent);\n}\n\n.skill-palette {\n  margin: 8px 12px 0;\n  display: flex;\n  flex-direction: column;\n  max-height: 220px;\n  overflow: auto;\n  background: var(--ag-ui-bg);\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 8px;\n  box-shadow: 0 8px 24px rgba(20, 20, 50, 0.16);\n}\n\n.skill-item {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  align-items: flex-start;\n  padding: 8px 12px;\n  border: none;\n  background: none;\n  font: inherit;\n  text-align: left;\n  cursor: pointer;\n  color: var(--ag-ui-fg);\n}\n\n.skill-item[aria-selected=\"true\"] {\n  background: var(--ag-ui-assistant-bg);\n}\n\n.skill-item-title {\n  font-weight: 600;\n}\n\n.skill-item-desc {\n  font-size: 0.85em;\n  color: var(--ag-ui-muted);\n}\n\n.skill-hint {\n  margin: 8px 12px 0;\n  font-size: 0.85em;\n  color: var(--ag-ui-danger);\n}\n\n/* Chat-history drawer \u2014 a slide-over within the chat panel. */\n.drawer {\n  position: absolute;\n  inset: 0;\n  z-index: 5;\n  display: flex;\n}\n\n.drawer[hidden] {\n  display: none;\n}\n\n.drawer-backdrop {\n  position: absolute;\n  inset: 0;\n  background: rgba(20, 20, 50, 0.32);\n}\n\n.drawer-panel {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: min(300px, 85%);\n  height: 100%;\n  background: var(--ag-ui-bg);\n  border-right: 1px solid var(--ag-ui-border);\n  box-shadow: var(--ag-ui-shadow);\n  overflow: hidden;\n}\n\n.drawer-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--ag-ui-space);\n  padding: var(--ag-ui-pad);\n  border-bottom: 1px solid var(--ag-ui-border);\n}\n\n.drawer-title {\n  font-weight: 600;\n}\n\n.drawer-new {\n  border: 1px solid var(--ag-ui-border);\n  border-radius: var(--ag-ui-radius);\n  background: var(--ag-ui-bg);\n  color: var(--ag-ui-accent);\n  padding: 4px 10px;\n  font: inherit;\n  font-size: 0.85em;\n  cursor: pointer;\n}\n\n.drawer-list {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n}\n\n.drawer-empty {\n  padding: var(--ag-ui-pad);\n  font-size: 0.9em;\n  color: var(--ag-ui-muted);\n}\n\n.drawer-row {\n  display: flex;\n  align-items: stretch;\n  border-bottom: 1px solid var(--ag-ui-border);\n}\n\n.drawer-row--active {\n  background: var(--ag-ui-assistant-bg);\n}\n\n.drawer-row-select {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: 8px 12px;\n  border: none;\n  background: none;\n  color: inherit;\n  font: inherit;\n  text-align: left;\n  cursor: pointer;\n}\n\n.drawer-row-title {\n  font-weight: 600;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.drawer-row-time {\n  font-size: 0.72em;\n  color: var(--ag-ui-muted);\n}\n\n.drawer-row-preview {\n  font-size: 0.8em;\n  color: var(--ag-ui-muted);\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.drawer-row-actions {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  padding: 0 6px;\n}\n\n.drawer-row-rename,\n.drawer-row-delete {\n  border: none;\n  background: none;\n  color: var(--ag-ui-muted);\n  font-size: 0.9em;\n  padding: 4px;\n  cursor: pointer;\n}\n\n.drawer-rename-input {\n  flex: 1;\n  min-width: 0;\n  margin: 6px 10px;\n  padding: 4px 8px;\n  border: 1px solid var(--ag-ui-accent);\n  border-radius: 6px;\n  background: var(--ag-ui-input-bg);\n  color: var(--ag-ui-fg);\n  font: inherit;\n}\n\n.drawer-confirm {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  font-size: 0.85em;\n}\n\n.drawer-confirm-label {\n  color: var(--ag-ui-danger);\n}\n\n.drawer-confirm-yes {\n  border: none;\n  border-radius: 6px;\n  background: var(--ag-ui-danger);\n  color: #ffffff;\n  padding: 3px 10px;\n  font: inherit;\n  cursor: pointer;\n}\n\n.drawer-confirm-no {\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 6px;\n  background: none;\n  color: inherit;\n  padding: 3px 10px;\n  font: inherit;\n  cursor: pointer;\n}\n\n/* Embedded placement: an inline, flush side panel rather than a dimmed,\n   floating slide-over. */\n:host([placement=\"embedded\"]) .drawer-backdrop {\n  background: none;\n}\n\n:host([placement=\"embedded\"]) .drawer-panel {\n  width: 100%;\n  border-right: none;\n  box-shadow: none;\n}\n";
+export declare const STYLES = "\n:host {\n  /* Colors */\n  --ag-ui-bg: #ffffff;\n  --ag-ui-fg: #1a1a2e;\n  --ag-ui-accent: #4f46e5;\n  --ag-ui-user-bg: #4f46e5;\n  --ag-ui-user-fg: #ffffff;\n  --ag-ui-assistant-bg: #f1f1f6;\n  --ag-ui-input-bg: var(--ag-ui-bg);\n  --ag-ui-tool-bg: var(--ag-ui-assistant-bg);\n  --ag-ui-tool-fg: var(--ag-ui-accent);\n  --ag-ui-header-bg: var(--ag-ui-accent);\n  --ag-ui-header-fg: #ffffff;\n  --ag-ui-border: #e2e2ec;\n  --ag-ui-radius: 12px;\n\n  /* Status accents for tool-call cards. */\n  --ag-ui-success: #15803d;\n  --ag-ui-danger: #b91c1c;\n  --ag-ui-muted: #6b7280;\n\n  /* Surface \u2014 set --ag-ui-shadow: none for a flush, embedded panel. */\n  --ag-ui-shadow: 0 12px 32px rgba(20, 20, 50, 0.18);\n  --ag-ui-font: inherit;\n  --ag-ui-font-size: 14px;\n  --ag-ui-code-font: ui-monospace, \"SF Mono\", Menlo, monospace;\n\n  /* Spacing \u2014 the density preset overrides these. */\n  --ag-ui-space: 10px;\n  --ag-ui-pad: 16px;\n  --ag-ui-msg-pad: 8px 12px;\n  --ag-ui-msg-radius: 14px;\n\n  /* Layout \u2014 override from outside to dock the widget anywhere.\n     Set --ag-ui-position: static (and place this element in your own\n     grid/flex layout) to embed it in the page flow instead of floating. */\n  --ag-ui-position: fixed;\n  --ag-ui-z-index: 2147483000;\n  --ag-ui-width: 380px;\n  --ag-ui-height: 560px;\n  --ag-ui-inset: auto 24px 24px auto;\n  --ag-ui-max-width: calc(100vw - 48px);\n  --ag-ui-max-height: calc(100vh - 48px);\n\n  position: var(--ag-ui-position);\n  inset: var(--ag-ui-inset);\n  z-index: var(--ag-ui-z-index);\n  width: var(--ag-ui-width);\n  max-width: var(--ag-ui-max-width);\n  height: var(--ag-ui-height);\n  max-height: var(--ag-ui-max-height);\n  display: flex;\n  font-family: var(--ag-ui-font);\n  font-size: var(--ag-ui-font-size);\n  color: var(--ag-ui-fg);\n}\n\n/* \u2500\u2500 Themes \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   Themes only re-set the colour variables; layout/spacing are unaffected.\n   theme=\"auto\" follows the OS via prefers-color-scheme. */\n:host([theme=\"dark\"]) {\n  --ag-ui-bg: #15151f;\n  --ag-ui-fg: #e8e8f2;\n  --ag-ui-assistant-bg: #25253a;\n  --ag-ui-header-bg: #1f1f30;\n  --ag-ui-header-fg: #e8e8f2;\n  --ag-ui-border: #33334a;\n  --ag-ui-muted: #9aa0b4;\n  --ag-ui-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);\n}\n\n@media (prefers-color-scheme: dark) {\n  :host([theme=\"auto\"]) {\n    --ag-ui-bg: #15151f;\n    --ag-ui-fg: #e8e8f2;\n    --ag-ui-assistant-bg: #25253a;\n    --ag-ui-header-bg: #1f1f30;\n    --ag-ui-header-fg: #e8e8f2;\n    --ag-ui-border: #33334a;\n    --ag-ui-muted: #9aa0b4;\n    --ag-ui-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);\n  }\n}\n\n/* A terminal-flavoured \"code\" theme: dark, monospace, green accent. */\n:host([theme=\"code\"]) {\n  --ag-ui-bg: #0d1117;\n  --ag-ui-fg: #c9d1d9;\n  --ag-ui-accent: #3fb950;\n  --ag-ui-user-bg: #238636;\n  --ag-ui-assistant-bg: #161b22;\n  --ag-ui-header-bg: #010409;\n  --ag-ui-header-fg: #c9d1d9;\n  --ag-ui-border: #30363d;\n  --ag-ui-muted: #8b949e;\n  --ag-ui-font: var(--ag-ui-code-font);\n  --ag-ui-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);\n}\n\n/* \u2500\u2500 Density \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n:host([density=\"compact\"]) {\n  --ag-ui-font-size: 13px;\n  --ag-ui-space: 6px;\n  --ag-ui-pad: 10px;\n  --ag-ui-msg-pad: 5px 9px;\n  --ag-ui-msg-radius: 10px;\n}\n\n/* \u2500\u2500 Placement presets \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n:host([placement=\"bottom-left\"]) {\n  --ag-ui-inset: auto auto 24px 24px;\n}\n\n:host([placement=\"side\"]) {\n  --ag-ui-inset: 0 0 0 auto;\n  --ag-ui-width: 420px;\n  --ag-ui-height: 100vh;\n  --ag-ui-max-height: 100vh;\n  --ag-ui-radius: 0;\n}\n\n:host([placement=\"full\"]) {\n  --ag-ui-inset: 0;\n  --ag-ui-width: 100vw;\n  --ag-ui-height: 100vh;\n  --ag-ui-max-width: 100vw;\n  --ag-ui-max-height: 100vh;\n  --ag-ui-radius: 0;\n}\n\n/* Sidebar (CUST-3): a full-height docked panel that slides open/closed and\n   collapses to a slim icon rail (not the floating launcher). Docked right by\n   default; data-side=\"left\" docks it left. Overlay by default \u2014 set\n   --ag-ui-position: static (and place this element in your own layout) for a\n   host-managed push instead. */\n:host([placement=\"sidebar\"]) {\n  --ag-ui-inset: 0 0 0 auto;\n  --ag-ui-width: 420px;\n  --ag-ui-height: 100vh;\n  --ag-ui-max-height: 100vh;\n  --ag-ui-radius: 0;\n  --ag-ui-rail-width: 52px;\n  transition: width 0.28s ease;\n}\n\n:host([placement=\"sidebar\"][data-side=\"left\"]) {\n  --ag-ui-inset: 0 auto 0 0;\n}\n\n:host([placement=\"sidebar\"]) .chat {\n  transition: transform 0.28s ease;\n}\n\n/* Collapsed sidebar: shrink the host to the rail width, hide the panel, and\n   reveal the rail. Higher specificity than the generic collapse rules, so it\n   wins regardless of source order. */\n:host([placement=\"sidebar\"][collapsed]) {\n  width: var(--ag-ui-rail-width);\n  height: 100vh;\n  max-height: 100vh;\n  bottom: 0;\n}\n\n:host([placement=\"sidebar\"][collapsed]) .chat {\n  display: none;\n}\n\n/* The rail is a sibling of the panel (so it survives the panel being hidden);\n   shown only for a collapsed sidebar. */\n.rail {\n  display: none;\n  border: none;\n  font: inherit;\n}\n\n:host([placement=\"sidebar\"][collapsed]) .rail {\n  display: flex;\n  position: absolute;\n  inset: 0;\n  align-items: flex-start;\n  justify-content: center;\n  padding-top: 16px;\n  border: 1px solid var(--ag-ui-border);\n  background: var(--ag-ui-header-bg);\n  color: var(--ag-ui-header-fg);\n  cursor: pointer;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host([placement=\"sidebar\"]),\n  :host([placement=\"sidebar\"]) .chat {\n    transition: none;\n  }\n}\n\n/* Embedded: drop the floating chrome and the high z-index stacking context so\n   the widget lives in the host's own layout (fixes overlay/z-index clashes). */\n:host([placement=\"embedded\"]) {\n  --ag-ui-position: static;\n  --ag-ui-width: 100%;\n  --ag-ui-height: 100%;\n  --ag-ui-max-width: 100%;\n  --ag-ui-max-height: 100%;\n  --ag-ui-shadow: none;\n  --ag-ui-z-index: auto;\n}\n\n.chat {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  background: var(--ag-ui-bg);\n  border: 1px solid var(--ag-ui-border);\n  border-radius: var(--ag-ui-radius);\n  box-shadow: var(--ag-ui-shadow);\n  overflow: hidden;\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding: 10px 14px;\n  border-bottom: 1px solid var(--ag-ui-border);\n  background: var(--ag-ui-header-bg);\n  color: var(--ag-ui-header-fg);\n}\n\n.header-title {\n  flex: 1;\n  min-width: 0;\n  font-weight: 600;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Header / launcher icon holder (CUST-2): a slot, with a data-icon-url <img>\n   fallback, sized via --ag-ui-icon-size. */\n.icon-holder {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  width: var(--ag-ui-icon-size, 22px);\n  height: var(--ag-ui-icon-size, 22px);\n  line-height: 1;\n}\n\n.icon-img {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  border-radius: var(--ag-ui-icon-radius, 4px);\n}\n\n.header-controls {\n  display: flex;\n  gap: 2px;\n  flex: none;\n}\n\n.header-btn {\n  border: none;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  line-height: 1;\n  padding: 4px 7px;\n  border-radius: 6px;\n  cursor: pointer;\n  opacity: 0.85;\n}\n\n.header-btn:hover {\n  opacity: 1;\n  background: rgba(255, 255, 255, 0.18);\n}\n\n/* Collapsed: keep just the header bar \u2014 hide the whole body, and let the host\n   shrink to the header. (A host can also fully hide the element itself.) */\n:host([collapsed]) {\n  height: auto;\n  max-height: none;\n}\n\n:host([collapsed]) .messages,\n:host([collapsed]) .input-row,\n:host([collapsed]) .skill-chips,\n:host([collapsed]) .skill-palette,\n:host([collapsed]) .skill-hint {\n  display: none;\n}\n\n/* Edge-docked placements pin top *and* bottom, which would otherwise keep the\n   panel full-height when collapsed; unpin the bottom so it shrinks to the\n   header. (Floating/bottom-left pin only the bottom, so they already shrink.) */\n:host([collapsed][placement=\"side\"]),\n:host([collapsed][placement=\"full\"]) {\n  bottom: auto;\n}\n\n.messages {\n  flex: 1;\n  overflow-y: auto;\n  padding: var(--ag-ui-pad);\n  display: flex;\n  flex-direction: column;\n  gap: var(--ag-ui-space);\n}\n\n/* Empty-state region (CUST-1 slot): centred while it's the only thing in the\n   list, hidden as soon as a message, card, or pending indicator renders. */\n.empty {\n  margin: auto;\n  text-align: center;\n  color: var(--ag-ui-muted);\n}\n\n.empty[hidden] {\n  display: none;\n}\n\n.message {\n  max-width: 80%;\n  padding: var(--ag-ui-msg-pad);\n  border-radius: var(--ag-ui-msg-radius);\n  line-height: 1.4;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n/* \u2500\u2500 Incoming-text animations (data-text-animation) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n/* .message--restored (rehydrated history) is excluded: entrance animations are\n   for freshly-arriving messages, not the whole transcript replaying on reload.\n   Word mode is excluded implicitly \u2014 restored bubbles aren't wrapped. */\n:host([data-text-animation=\"fade\"]) .message--assistant:not(.message--restored) {\n  animation: ag-ui-msg-fade 0.25s ease both;\n}\n\n@keyframes ag-ui-msg-fade {\n  from { opacity: 0; transform: translateY(4px); }\n  to { opacity: 1; transform: none; }\n}\n\n.message--assistant .word {\n  animation: ag-ui-word-in 0.3s ease both;\n  animation-delay: calc(var(--ag-ui-word-index, 0) * 35ms);\n}\n\n@keyframes ag-ui-word-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host([data-text-animation=\"fade\"]) .message--assistant,\n  .message--assistant .word {\n    animation: none;\n  }\n}\n\n.message--user {\n  align-self: flex-end;\n  background: var(--ag-ui-user-bg);\n  color: var(--ag-ui-user-fg);\n  border-bottom-right-radius: 4px;\n}\n\n.message--assistant {\n  align-self: flex-start;\n  background: var(--ag-ui-assistant-bg);\n  border-bottom-left-radius: 4px;\n  /* Assistant bubbles hold rendered markdown/HTML, so collapse the source\n     whitespace the renderer leaves between block tags. */\n  white-space: normal;\n}\n\n/* Rendered-markdown elements inside an assistant bubble. */\n.message--assistant > :first-child {\n  margin-top: 0;\n}\n\n.message--assistant > :last-child {\n  margin-bottom: 0;\n}\n\n.message--assistant p,\n.message--assistant ul,\n.message--assistant ol,\n.message--assistant blockquote,\n.message--assistant pre {\n  margin: 0.5em 0;\n}\n\n.message--assistant ul,\n.message--assistant ol {\n  padding-left: 1.3em;\n}\n\n.message--assistant a {\n  color: var(--ag-ui-accent);\n  text-decoration: underline;\n}\n\n.message--assistant code {\n  font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\n  font-size: 0.92em;\n  background: rgba(127, 127, 127, 0.16);\n  padding: 1px 4px;\n  border-radius: 4px;\n}\n\n.message--assistant pre {\n  padding: 8px 10px;\n  overflow: auto;\n  background: var(--ag-ui-bg);\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 6px;\n}\n\n.message--assistant pre code {\n  background: none;\n  padding: 0;\n}\n\n.message--assistant blockquote {\n  padding-left: 10px;\n  border-left: 3px solid var(--ag-ui-border);\n  color: var(--ag-ui-muted);\n}\n\n.pending {\n  align-self: flex-start;\n  display: inline-flex;\n  gap: 4px;\n  align-items: center;\n  padding: 12px 14px;\n  background: var(--ag-ui-assistant-bg);\n  border-radius: 14px;\n  border-bottom-left-radius: 4px;\n}\n\n.pending-dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: var(--ag-ui-muted);\n  animation: ag-ui-pending 1.2s infinite ease-in-out both;\n}\n\n.pending-dot:nth-child(2) {\n  animation-delay: 0.16s;\n}\n\n.pending-dot:nth-child(3) {\n  animation-delay: 0.32s;\n}\n\n@keyframes ag-ui-pending {\n  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }\n  40% { opacity: 1; transform: translateY(-3px); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .pending-dot {\n    animation: none;\n    opacity: 0.6;\n  }\n}\n\n.tool-call {\n  align-self: flex-start;\n  max-width: 80%;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  font-size: 12px;\n  font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\n  padding: 8px 10px;\n  border-radius: 8px;\n  background: var(--ag-ui-tool-bg);\n  border: 1px solid var(--ag-ui-border);\n  color: var(--ag-ui-tool-fg);\n}\n\n.tool-call-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.tool-call-name {\n  font-weight: 600;\n  word-break: break-word;\n}\n\n.tool-call-status {\n  flex: none;\n  padding: 1px 8px;\n  border-radius: 999px;\n  font-size: 11px;\n  font-weight: 600;\n  background: rgba(127, 127, 127, 0.16);\n  color: var(--ag-ui-muted);\n}\n\n.tool-call[data-status=\"done\"] .tool-call-status {\n  color: var(--ag-ui-success);\n}\n\n.tool-call[data-status=\"error\"] .tool-call-status {\n  color: var(--ag-ui-danger);\n}\n\n.tool-call[data-status=\"declined\"] .tool-call-status {\n  color: var(--ag-ui-muted);\n}\n\n.tool-call-args,\n.tool-call-result {\n  margin: 0;\n  padding: 6px 8px;\n  max-height: 160px;\n  overflow: auto;\n  background: var(--ag-ui-bg);\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 6px;\n  white-space: pre-wrap;\n  word-break: break-word;\n  color: var(--ag-ui-fg);\n}\n\n.tool-call-toggle {\n  align-self: flex-start;\n  border: none;\n  padding: 0;\n  background: none;\n  font: inherit;\n  font-weight: 600;\n  color: var(--ag-ui-accent);\n  cursor: pointer;\n}\n\n.tool-call-toggle::before {\n  content: \"\u25B8 \";\n}\n\n.tool-call-toggle[aria-expanded=\"true\"]::before {\n  content: \"\u25BE \";\n}\n\n.input-row {\n  display: flex;\n  gap: 8px;\n  padding: 12px;\n  border-top: 1px solid var(--ag-ui-border);\n}\n\n.input {\n  flex: 1;\n  resize: none;\n  background: var(--ag-ui-input-bg);\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 8px;\n  padding: 8px 10px;\n  font: inherit;\n  color: inherit;\n  outline: none;\n}\n\n.input:focus {\n  border-color: var(--ag-ui-accent);\n}\n\n.send {\n  border: none;\n  border-radius: 8px;\n  padding: 0 16px;\n  background: var(--ag-ui-accent);\n  color: #ffffff;\n  font: inherit;\n  font-weight: 600;\n  cursor: pointer;\n}\n\n.send:disabled {\n  opacity: 0.5;\n  cursor: default;\n}\n\n/* The composer button doubles as the Stop control while a run is in flight. */\n.send[data-state=\"running\"] {\n  background: var(--ag-ui-muted);\n}\n\n/* \u2500\u2500 File attachments \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n/* The \uD83D\uDCCE picker button sits left of the input; hidden until data-attachments-url. */\n.attach-btn {\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 8px;\n  padding: 0 10px;\n  background: var(--ag-ui-input-bg);\n  color: inherit;\n  font: inherit;\n  cursor: pointer;\n}\n\n.attach-btn:hover {\n  border-color: var(--ag-ui-accent);\n}\n\n.attach-input {\n  display: none;\n}\n\n/* Pending-attachments tray, above the input row; collapses (hidden) when empty. */\n.attachment-slot {\n  display: contents;\n}\n\n.attachment-tray {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  padding: 8px 12px 0;\n}\n\n.attachment-chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  margin-top: 6px;\n}\n\n.attachment-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  max-width: 100%;\n  padding: 4px 8px;\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 999px;\n  background: var(--ag-ui-assistant-bg);\n  font-size: 0.85em;\n  position: relative;\n}\n\n.attachment-chip--error {\n  border-color: var(--ag-ui-danger);\n  color: var(--ag-ui-danger);\n}\n\n.attachment-chip-name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 14ch;\n}\n\n.attachment-chip-size {\n  color: var(--ag-ui-muted);\n  white-space: nowrap;\n}\n\n.attachment-chip--error .attachment-chip-size {\n  color: var(--ag-ui-danger);\n}\n\n/* The progress bar fills as the file uploads. */\n.attachment-chip-bar {\n  flex-basis: 100%;\n  height: 3px;\n  border-radius: 2px;\n  background: var(--ag-ui-border);\n  overflow: hidden;\n}\n\n.attachment-chip-bar-fill {\n  height: 100%;\n  background: var(--ag-ui-accent);\n  transition: width 0.15s ease;\n}\n\n.attachment-chip-remove,\n.attachment-chip-retry {\n  border: none;\n  background: none;\n  color: inherit;\n  cursor: pointer;\n  padding: 0;\n  line-height: 1;\n  opacity: 0.7;\n}\n\n.attachment-chip-remove:hover,\n.attachment-chip-retry:hover {\n  opacity: 1;\n}\n\n/* A subtle outline while a file is dragged over the shell. */\n.chat--dragover {\n  outline: 2px dashed var(--ag-ui-accent);\n  outline-offset: -4px;\n}\n\n/* Muted \"\u23F9 Stopped\" line after a cancelled run \u2014 a note, not an error bubble. */\n.stopped-note {\n  align-self: flex-start;\n  color: var(--ag-ui-muted);\n  font-size: 12px;\n  padding: 2px 4px;\n}\n\n/* Inline confirmation card \u2014 lives in the transcript, no focus-stealing overlay. */\n.confirm {\n  align-self: stretch;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 12px;\n  background: var(--ag-ui-bg);\n  border: 1px solid var(--ag-ui-accent);\n  border-radius: 10px;\n}\n\n.confirm[data-resolved] {\n  opacity: 0.7;\n  border-color: var(--ag-ui-border);\n}\n\n.confirm-body {\n  font-weight: 600;\n}\n\n.confirm-args {\n  margin: 0;\n  padding: 8px 10px;\n  max-height: 140px;\n  overflow: auto;\n  font-size: 12px;\n  font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\n  background: var(--ag-ui-assistant-bg);\n  border-radius: 8px;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n.confirm-actions {\n  display: flex;\n  gap: 8px;\n  justify-content: flex-end;\n}\n\n.confirm-btn {\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 8px;\n  padding: 8px 14px;\n  font: inherit;\n  font-weight: 600;\n  cursor: pointer;\n  background: var(--ag-ui-bg);\n  color: var(--ag-ui-fg);\n}\n\n.confirm-btn:disabled {\n  cursor: default;\n  opacity: 0.6;\n}\n\n.confirm-btn--confirm {\n  border-color: var(--ag-ui-accent);\n  background: var(--ag-ui-accent);\n  color: #ffffff;\n}\n\n/* Skills \u2014 chips row + the /-command palette, above the input. */\n.skill-chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  padding: 10px 12px;\n}\n\n.skill-chip {\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 999px;\n  padding: 4px 12px;\n  font: inherit;\n  font-size: 0.9em;\n  cursor: pointer;\n  background: var(--ag-ui-assistant-bg);\n  color: var(--ag-ui-fg);\n}\n\n.skill-chip:hover {\n  border-color: var(--ag-ui-accent);\n}\n\n.skill-palette {\n  margin: 8px 12px 0;\n  display: flex;\n  flex-direction: column;\n  max-height: 220px;\n  overflow: auto;\n  background: var(--ag-ui-bg);\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 8px;\n  box-shadow: 0 8px 24px rgba(20, 20, 50, 0.16);\n}\n\n.skill-item {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  align-items: flex-start;\n  padding: 8px 12px;\n  border: none;\n  background: none;\n  font: inherit;\n  text-align: left;\n  cursor: pointer;\n  color: var(--ag-ui-fg);\n}\n\n.skill-item[aria-selected=\"true\"] {\n  background: var(--ag-ui-assistant-bg);\n}\n\n.skill-item-title {\n  font-weight: 600;\n}\n\n.skill-item-desc {\n  font-size: 0.85em;\n  color: var(--ag-ui-muted);\n}\n\n.skill-hint {\n  margin: 8px 12px 0;\n  font-size: 0.85em;\n  color: var(--ag-ui-danger);\n}\n\n/* Chat-history drawer \u2014 a slide-over within the chat panel. */\n.drawer {\n  position: absolute;\n  inset: 0;\n  z-index: 5;\n  display: flex;\n}\n\n.drawer[hidden] {\n  display: none;\n}\n\n.drawer-backdrop {\n  position: absolute;\n  inset: 0;\n  background: rgba(20, 20, 50, 0.32);\n}\n\n.drawer-panel {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: min(300px, 85%);\n  height: 100%;\n  background: var(--ag-ui-bg);\n  border-right: 1px solid var(--ag-ui-border);\n  box-shadow: var(--ag-ui-shadow);\n  overflow: hidden;\n}\n\n.drawer-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--ag-ui-space);\n  padding: var(--ag-ui-pad);\n  border-bottom: 1px solid var(--ag-ui-border);\n}\n\n.drawer-title {\n  font-weight: 600;\n}\n\n.drawer-new {\n  border: 1px solid var(--ag-ui-border);\n  border-radius: var(--ag-ui-radius);\n  background: var(--ag-ui-bg);\n  color: var(--ag-ui-accent);\n  padding: 4px 10px;\n  font: inherit;\n  font-size: 0.85em;\n  cursor: pointer;\n}\n\n.drawer-list {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n}\n\n.drawer-empty {\n  padding: var(--ag-ui-pad);\n  font-size: 0.9em;\n  color: var(--ag-ui-muted);\n}\n\n.drawer-row {\n  display: flex;\n  align-items: stretch;\n  border-bottom: 1px solid var(--ag-ui-border);\n}\n\n.drawer-row--active {\n  background: var(--ag-ui-assistant-bg);\n}\n\n.drawer-row-select {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: 8px 12px;\n  border: none;\n  background: none;\n  color: inherit;\n  font: inherit;\n  text-align: left;\n  cursor: pointer;\n}\n\n.drawer-row-title {\n  font-weight: 600;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.drawer-row-time {\n  font-size: 0.72em;\n  color: var(--ag-ui-muted);\n}\n\n.drawer-row-preview {\n  font-size: 0.8em;\n  color: var(--ag-ui-muted);\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.drawer-row-actions {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  padding: 0 6px;\n}\n\n.drawer-row-rename,\n.drawer-row-delete {\n  border: none;\n  background: none;\n  color: var(--ag-ui-muted);\n  font-size: 0.9em;\n  padding: 4px;\n  cursor: pointer;\n}\n\n.drawer-rename-input {\n  flex: 1;\n  min-width: 0;\n  margin: 6px 10px;\n  padding: 4px 8px;\n  border: 1px solid var(--ag-ui-accent);\n  border-radius: 6px;\n  background: var(--ag-ui-input-bg);\n  color: var(--ag-ui-fg);\n  font: inherit;\n}\n\n.drawer-confirm {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  font-size: 0.85em;\n}\n\n.drawer-confirm-label {\n  color: var(--ag-ui-danger);\n}\n\n.drawer-confirm-yes {\n  border: none;\n  border-radius: 6px;\n  background: var(--ag-ui-danger);\n  color: #ffffff;\n  padding: 3px 10px;\n  font: inherit;\n  cursor: pointer;\n}\n\n.drawer-confirm-no {\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 6px;\n  background: none;\n  color: inherit;\n  padding: 3px 10px;\n  font: inherit;\n  cursor: pointer;\n}\n\n/* Embedded placement: an inline, flush side panel rather than a dimmed,\n   floating slide-over. */\n:host([placement=\"embedded\"]) .drawer-backdrop {\n  background: none;\n}\n\n:host([placement=\"embedded\"]) .drawer-panel {\n  width: 100%;\n  border-right: none;\n  box-shadow: none;\n}\n";
 //# sourceMappingURL=styles.d.ts.map

package/dist/ui/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/ui/styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM,43qBAw6BlB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/ui/styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM,q6vBA0gClB,CAAC"}

package/dist/ui/thread_drawer.d.ts

@@ -1,4 +1,5 @@
 import type { ThreadMeta } from "../core/conversation_store.js";
+import { type UiStrings } from "./ui_strings.js";
 /** Actions the host ({@link AgUiChat}) wires to the drawer's rows. */
 export interface ThreadDrawerCallbacks {
     /** A row was picked — load that thread and make it active. */
@@ -17,12 +18,17 @@ export interface ThreadDrawerCallbacks {
  * {@link element}, toggles it, feeds rows via {@link setThreads}, and acts on
  * the callbacks. The drawer is a *view*: it does not mutate the store; after a
  * callback the host updates the store and calls {@link setThreads} to refresh.
+ *
+ * All visible text comes from {@link UiStrings}; {@link setStrings} re-localizes
+ * a drawer the host built before its strings resolved.
  */
 export declare class ThreadDrawer {
     #private;
     /** The drawer root (backdrop + panel). Append to the chat shell; hidden until opened. */
     readonly element: HTMLDivElement;
-    constructor(callbacks: ThreadDrawerCallbacks);
+    constructor(callbacks: ThreadDrawerCallbacks, strings?: UiStrings);
+    /** Re-localize the drawer's chrome and rows (the host calls this on connect). */
+    setStrings(strings: UiStrings): void;
     isOpen(): boolean;
     open(): void;
     close(): void;

package/dist/ui/thread_drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"thread_drawer.d.ts","sourceRoot":"","sources":["../../src/ui/thread_drawer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAGhE,sEAAsE;AACtE,MAAM,WAAW,qBAAqB;IACpC,8DAA8D;IAC9D,QAAQ,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,oDAAoD;IACpD,QAAQ,CAAC,KAAK,EAAE,MAAM,IAAI,CAAC;IAC3B,oCAAoC;IACpC,QAAQ,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,oDAAoD;IACpD,QAAQ,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED;;;;;;;GAOG;AACH,qBAAa,YAAY;;IACvB,yFAAyF;IACzF,QAAQ,CAAC,OAAO,EAAE,cAAc,CAAC;gBAOrB,SAAS,EAAE,qBAAqB;IAsC5C,MAAM,IAAI,OAAO;IAIjB,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAIb,MAAM,IAAI,IAAI;IAId,4EAA4E;IAC5E,UAAU,CAAC,OAAO,EAAE,SAAS,UAAU,EAAE,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;CAgHnE"}
+{"version":3,"file":"thread_drawer.d.ts","sourceRoot":"","sources":["../../src/ui/thread_drawer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAEhE,OAAO,EAAsB,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAErE,sEAAsE;AACtE,MAAM,WAAW,qBAAqB;IACpC,8DAA8D;IAC9D,QAAQ,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,oDAAoD;IACpD,QAAQ,CAAC,KAAK,EAAE,MAAM,IAAI,CAAC;IAC3B,oCAAoC;IACpC,QAAQ,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,oDAAoD;IACpD,QAAQ,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED;;;;;;;;;;GAUG;AACH,qBAAa,YAAY;;IACvB,yFAAyF;IACzF,QAAQ,CAAC,OAAO,EAAE,cAAc,CAAC;gBAWrB,SAAS,EAAE,qBAAqB,EAAE,OAAO,GAAE,SAA8B;IA8CrF,iFAAiF;IACjF,UAAU,CAAC,OAAO,EAAE,SAAS,GAAG,IAAI;IAQpC,MAAM,IAAI,OAAO;IAIjB,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAIb,MAAM,IAAI,IAAI;IAId,4EAA4E;IAC5E,UAAU,CAAC,OAAO,EAAE,SAAS,UAAU,EAAE,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;CAmHnE"}

package/dist/ui/tool_call_card.d.ts

@@ -1,4 +1,5 @@
 import { TOOL_CALL_STATUS, TOOL_DISPLAY } from "../constants.js";
+import { type UiStrings } from "./ui_strings.js";
 /** Any state a tool-call card can be in. */
 export type ToolCallStatus = (typeof TOOL_CALL_STATUS)[keyof typeof TOOL_CALL_STATUS];
 /** How much detail a card renders. */
@@ -18,13 +19,16 @@ export type SettledStatus = Exclude<ToolCallStatus, typeof TOOL_CALL_STATUS.PEND
  * - `full` — the result (or error / decline message) behind its own toggle.
  *
  * Pure DOM (no framework); the host appends {@link element} into its shadow
- * root and themes it via the `--ag-ui-*` custom properties.
+ * root and themes it via the `--ag-ui-*` custom properties or the exposed
+ * `tool-card*` `part`s. All visible text is sourced from {@link UiStrings}.
  */
 export declare class ToolCallCard {
     #private;
     /** The card's root element; append this into the message list. */
     readonly element: HTMLDivElement;
-    constructor(name: string, args: Record<string, unknown>, mode?: ToolDisplayMode, summary?: string);
+    constructor(name: string, args: Record<string, unknown>, mode?: ToolDisplayMode, summary?: string, strings?: UiStrings);
+    /** Whether {@link settle} has already run (so a terminal sweep can skip it). */
+    get settled(): boolean;
     /**
      * Flip the status pill to ``status`` and, unless in `minimal` mode, append a
      * collapsed body behind a click-to-expand toggle: the result alone (`full`),

package/dist/ui/tool_call_card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tool_call_card.d.ts","sourceRoot":"","sources":["../../src/ui/tool_call_card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEjE,4CAA4C;AAC5C,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,OAAO,gBAAgB,CAAC,CAAC;AAEtF,sCAAsC;AACtC,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,OAAO,YAAY,CAAC,CAAC;AAE/E,0EAA0E;AAC1E,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC,cAAc,EAAE,OAAO,gBAAgB,CAAC,OAAO,CAAC,CAAC;AAiBrF;;;;;;;;;;;;;;GAcG;AACH,qBAAa,YAAY;;IACvB,kEAAkE;IAClE,QAAQ,CAAC,OAAO,EAAE,cAAc,CAAC;gBAO/B,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC7B,IAAI,GAAE,eAAmC,EACzC,OAAO,CAAC,EAAE,MAAM;IAkClB;;;;OAIG;IACH,MAAM,CAAC,MAAM,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI;CAiClD"}
+{"version":3,"file":"tool_call_card.d.ts","sourceRoot":"","sources":["../../src/ui/tool_call_card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAsB,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAErE,4CAA4C;AAC5C,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,OAAO,gBAAgB,CAAC,CAAC;AAEtF,sCAAsC;AACtC,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,OAAO,YAAY,CAAC,CAAC;AAE/E,0EAA0E;AAC1E,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC,cAAc,EAAE,OAAO,gBAAgB,CAAC,OAAO,CAAC,CAAC;AAqBrF;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,YAAY;;IACvB,kEAAkE;IAClE,QAAQ,CAAC,OAAO,EAAE,cAAc,CAAC;gBAS/B,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC7B,IAAI,GAAE,eAAmC,EACzC,OAAO,CAAC,EAAE,MAAM,EAChB,OAAO,GAAE,SAA8B;IAwCzC,gFAAgF;IAChF,IAAI,OAAO,IAAI,OAAO,CAErB;IAED;;;;OAIG;IACH,MAAM,CAAC,MAAM,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI;CAoClD"}

package/dist/ui/ui_strings.d.ts

@@ -0,0 +1,126 @@
+/**
+ * The flat table of every user-facing string the chat shell renders — labels,
+ * placeholders, `aria-label`s, and `title` tooltips. A localizable seam, not a
+ * framework: a host overrides any subset (via the element's `strings` property
+ * or its `data-strings` JSON attribute) and the rest fall back to the English
+ * defaults.
+ *
+ * A handful of values are **templates** carrying `{token}` placeholders the call
+ * site fills in (e.g. `minutesAgo` → `"{n}m ago"`); the token names are noted on
+ * each key. Translators keep the token verbatim.
+ *
+ * This module is one cohesive unit — the `UiStrings` shape, its `DEFAULT_UI_STRINGS`
+ * constant-like backing, and the {@link mergeUiStrings} merge over those defaults —
+ * so it bends the one-symbol-per-file rule the way `tool_call_card.ts` (class +
+ * its types) and `route_map.ts` (factory + its types) already do.
+ */
+export interface UiStrings {
+    /** Default header title (the `title-text` attribute overrides per element). */
+    title: string;
+    /** History button + drawer dialog label. */
+    chatHistory: string;
+    /** New-chat button (header + drawer). */
+    newChat: string;
+    /** Collapse button. */
+    collapse: string;
+    /** Expand affordance (the sidebar rail toggle). */
+    expand: string;
+    /** `aria-label` of the scrolling message log. */
+    conversation: string;
+    /** `aria-label` of the "thinking" pending indicator. */
+    thinking: string;
+    /** The muted note after a cancelled run. */
+    stopped: string;
+    /** Error shown when the stream drops without a terminal AG-UI event. */
+    connectionLost: string;
+    /** Fallback when a tool call produced no result. */
+    noResult: string;
+    /** Tool-result content when the user declines a confirmed action. */
+    declinedAction: string;
+    /** A navigating tool's card text while the page reloads. */
+    navigating: string;
+    /** Missing-placeholder skill hint. Tokens: `{title}`, `{fields}`. */
+    skillNeeds: string;
+    /** `aria-label` of the message textarea. */
+    message: string;
+    /** Placeholder of the message textarea. */
+    inputPlaceholder: string;
+    /** Send button (idle composer). */
+    send: string;
+    /** Stop button (composer while a run is in flight). */
+    stop: string;
+    /** Attach-files button. */
+    attachFiles: string;
+    /** Status pill while the call runs. */
+    toolRunning: string;
+    /** Status pill on success. */
+    toolDone: string;
+    /** Status pill on error. */
+    toolError: string;
+    /** Status pill on a declined call. */
+    toolDeclined: string;
+    /** Toggle label revealing a successful result (full mode). */
+    resultLabel: string;
+    /** Toggle label revealing an error (full mode). */
+    errorLabel: string;
+    /** Toggle label revealing a declined call (full mode). */
+    declinedLabel: string;
+    /** Toggle label revealing args + result together (compact mode). */
+    details: string;
+    /** `aria-label` of the inline confirmation card. */
+    confirmAction: string;
+    /** Generic confirmation prompt when a tool has no `x-confirm`. Token: `{tool}`. */
+    confirmRun: string;
+    /** Confirm button. */
+    confirm: string;
+    /** Cancel button (confirmation + delete confirm). */
+    cancel: string;
+    /** Drawer heading. */
+    chats: string;
+    /** Empty-state line when there are no threads. */
+    noConversations: string;
+    /** Rename row button (`title`). */
+    rename: string;
+    /** Rename row button `aria-label`. */
+    renameConversation: string;
+    /** Delete row button (`title`) + the inline-confirm action. */
+    delete: string;
+    /** Delete row button `aria-label`. */
+    deleteConversation: string;
+    /** Inline delete-confirm prompt. */
+    deletePrompt: string;
+    /** Oversize rejection. Token: `{size}`. */
+    tooLarge: string;
+    /** Disallowed-type rejection. */
+    fileTypeNotAllowed: string;
+    /** Generic upload failure (when the error carries no message). */
+    uploadFailed: string;
+    /** Retry-upload button (`title`). */
+    retry: string;
+    /** Retry-upload button `aria-label`. */
+    retryUpload: string;
+    /** Remove-attachment button (`title`). */
+    remove: string;
+    /** Remove-attachment button `aria-label`. */
+    removeAttachment: string;
+    /** Under a minute ago. */
+    justNow: string;
+    /** Minutes ago. Token: `{n}`. */
+    minutesAgo: string;
+    /** Hours ago. Token: `{n}`. */
+    hoursAgo: string;
+    /** Days ago. Token: `{n}`. */
+    daysAgo: string;
+    /** Weeks ago. Token: `{n}`. */
+    weeksAgo: string;
+}
+/** The built-in English strings — the fallback every override merges over. */
+export declare const DEFAULT_UI_STRINGS: UiStrings;
+/**
+ * Merge a partial set of overrides over {@link DEFAULT_UI_STRINGS}, yielding a
+ * complete {@link UiStrings}. Keys whose override is `undefined` keep the
+ * default (so a `data-strings` JSON with only a few keys — or a property carrying
+ * explicit `undefined` — leaves the rest English).
+ */
+export declare function mergeUiStrings(overrides: Partial<UiStrings>): UiStrings;
+//# sourceMappingURL=ui_strings.d.ts.map

package/dist/ui/ui_strings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui_strings.d.ts","sourceRoot":"","sources":["../../src/ui/ui_strings.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,SAAS;IAExB,+EAA+E;IAC/E,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,WAAW,EAAE,MAAM,CAAC;IACpB,yCAAyC;IACzC,OAAO,EAAE,MAAM,CAAC;IAChB,uBAAuB;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,mDAAmD;IACnD,MAAM,EAAE,MAAM,CAAC;IAGf,iDAAiD;IACjD,YAAY,EAAE,MAAM,CAAC;IACrB,wDAAwD;IACxD,QAAQ,EAAE,MAAM,CAAC;IACjB,4CAA4C;IAC5C,OAAO,EAAE,MAAM,CAAC;IAChB,wEAAwE;IACxE,cAAc,EAAE,MAAM,CAAC;IACvB,oDAAoD;IACpD,QAAQ,EAAE,MAAM,CAAC;IACjB,qEAAqE;IACrE,cAAc,EAAE,MAAM,CAAC;IACvB,4DAA4D;IAC5D,UAAU,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,UAAU,EAAE,MAAM,CAAC;IAGnB,4CAA4C;IAC5C,OAAO,EAAE,MAAM,CAAC;IAChB,2CAA2C;IAC3C,gBAAgB,EAAE,MAAM,CAAC;IACzB,mCAAmC;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,uDAAuD;IACvD,IAAI,EAAE,MAAM,CAAC;IACb,2BAA2B;IAC3B,WAAW,EAAE,MAAM,CAAC;IAGpB,uCAAuC;IACvC,WAAW,EAAE,MAAM,CAAC;IACpB,8BAA8B;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,4BAA4B;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,YAAY,EAAE,MAAM,CAAC;IACrB,8DAA8D;IAC9D,WAAW,EAAE,MAAM,CAAC;IACpB,mDAAmD;IACnD,UAAU,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,aAAa,EAAE,MAAM,CAAC;IACtB,oEAAoE;IACpE,OAAO,EAAE,MAAM,CAAC;IAGhB,oDAAoD;IACpD,aAAa,EAAE,MAAM,CAAC;IACtB,mFAAmF;IACnF,UAAU,EAAE,MAAM,CAAC;IACnB,sBAAsB;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,qDAAqD;IACrD,MAAM,EAAE,MAAM,CAAC;IAGf,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,eAAe,EAAE,MAAM,CAAC;IACxB,mCAAmC;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,+DAA+D;IAC/D,MAAM,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oCAAoC;IACpC,YAAY,EAAE,MAAM,CAAC;IAGrB,2CAA2C;IAC3C,QAAQ,EAAE,MAAM,CAAC;IACjB,iCAAiC;IACjC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,kEAAkE;IAClE,YAAY,EAAE,MAAM,CAAC;IACrB,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,WAAW,EAAE,MAAM,CAAC;IACpB,0CAA0C;IAC1C,MAAM,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,gBAAgB,EAAE,MAAM,CAAC;IAGzB,0BAA0B;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,iCAAiC;IACjC,UAAU,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,8BAA8B;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,+BAA+B;IAC/B,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,8EAA8E;AAC9E,eAAO,MAAM,kBAAkB,EAAE,SAyDhC,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,SAAS,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,SAAS,CASvE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artooi/ag-ui-web-component",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Framework-free <ag-ui-chat> Web Component over the AG-UI protocol. Drop-in chat sidebar with a pluggable client-side tool registry, DOM driver primitives, animations, and destructive-action confirmation modal.",
   "type": "module",
   "main": "./dist/index.js",