@cianfrani/ai-ui 0.1.0-alpha.0

package/dist/ai-ui.js

@@ -0,0 +1,3218 @@
+var __legacyDecorateClassTS = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1;i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+
+// src/semantic/ai-conversation.ts
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+class AiConversation extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.density = "comfortable";
+    this.live = false;
+    this.label = "Conversation";
+  }
+  static styles = css`
+    :host {
+      box-sizing: border-box;
+      display: block;
+      margin: 0;
+      padding: 0;
+    }
+
+    *,
+    *::before,
+    *::after {
+      box-sizing: inherit;
+    }
+
+    .conversation {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ai-conversation-gap, var(--ai-space-lg, 16px));
+      background: var(--ai-conversation-background, transparent);
+      color: var(--ai-conversation-color, var(--ai-color-text, inherit));
+    }
+
+    .conversation[data-density="compact"] {
+      gap: var(--ai-conversation-compact-gap, var(--ai-space-sm, 8px));
+    }
+
+    :host([live]) .conversation {
+      border-left: 2px solid var(--ai-conversation-live-border-color, transparent);
+    }
+  `;
+  get normalizedDensity() {
+    return this.density === "compact" ? "compact" : "comfortable";
+  }
+  render() {
+    const ariaLive = this.live ? "polite" : "off";
+    return html`
+      <section
+        class="conversation"
+        data-density=${this.normalizedDensity}
+        aria-label=${this.getAttribute("aria-label") ?? this.label}
+        aria-live=${ariaLive}
+        aria-relevant="additions text"
+      >
+        <slot></slot>
+      </section>
+    `;
+  }
+}
+__legacyDecorateClassTS([
+  property({ reflect: true })
+], AiConversation.prototype, "density", undefined);
+__legacyDecorateClassTS([
+  property({ type: Boolean, reflect: true })
+], AiConversation.prototype, "live", undefined);
+__legacyDecorateClassTS([
+  property({ reflect: true })
+], AiConversation.prototype, "label", undefined);
+AiConversation = __legacyDecorateClassTS([
+  customElement("ai-conversation")
+], AiConversation);
+// src/semantic/ai-message.ts
+import { LitElement as LitElement2, css as css2, html as html2, nothing } from "lit";
+import { customElement as customElement2, property as property2 } from "lit/decorators.js";
+class AiMessage extends LitElement2 {
+  constructor() {
+    super(...arguments);
+    this.role = "assistant";
+    this.htmlFor = "";
+    this.status = "unknown";
+    this.timestamp = "";
+    this.label = "";
+  }
+  static styles = css2`
+    :host {
+      box-sizing: border-box;
+      display: block;
+      margin: 0;
+      padding: 0;
+      max-width: 100%;
+      min-width: 0;
+    }
+
+    *,
+    *::before,
+    *::after {
+      box-sizing: inherit;
+    }
+
+    .message {
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+      max-width: 100%;
+      background-color: var(--ai-message-background, transparent);
+      color: var(--ai-message-color, inherit);
+      border: var(--ai-message-border-width, 0) solid var(--ai-message-border-color, transparent);
+      border-radius: var(--ai-message-radius, 0);
+    }
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ai-message-gap, 3px);
+      min-width: 0;
+      max-width: 100%;
+    }
+
+    .content ::slotted(*) {
+      min-width: 0;
+      max-width: 100%;
+    }
+
+    ::slotted([slot="meta"]) {
+      color: var(--ai-message-meta-color, var(--text-muted, var(--ai-color-text-muted, #888)));
+      font-size: var(--font-size-caption, var(--ai-font-size-caption, 0.75rem));
+      line-height: var(--line-height-tight, var(--ai-line-height-tight, 1.1));
+    }
+
+    .meta-fallback {
+      color: var(--ai-message-meta-color, var(--text-muted, var(--ai-color-text-muted, #888)));
+      font-size: var(--font-size-caption, var(--ai-font-size-caption, 0.75rem));
+      line-height: var(--line-height-tight, var(--ai-line-height-tight, 1.1));
+    }
+
+    /* User bubble treatment. */
+    :host([role="user"]) .message {
+      align-items: flex-end;
+      gap: calc(var(--spacing-xs, 4px) / 2);
+    }
+
+    :host([role="user"]) .content {
+      width: auto;
+      max-width: var(--ai-message-user-max-width, min(90%, 640px));
+      padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
+      background: var(--ai-message-user-background, var(--accent, Highlight));
+      color: var(--ai-message-user-color, var(--text-on-accent, HighlightText));
+      border-radius: var(
+        --ai-message-radius,
+        var(--radius, 8px) var(--radius, 8px) 4px var(--radius, 8px)
+      );
+      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+      overflow-wrap: anywhere;
+    }
+
+    /* Assistant rail/header treatment. */
+    :host([role="assistant"]) .message {
+      align-items: stretch;
+      gap: 2px;
+      width: 100%;
+    }
+
+    .header {
+      display: none;
+    }
+
+    :host([role="assistant"]) .header {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--spacing-sm, 8px);
+      padding-left: calc(var(--spacing-md, 12px) + 2px);
+      line-height: var(--line-height-tight, 1.1);
+    }
+
+    .actor-label {
+      color: var(--ai-message-assistant-label-color, var(--text-muted, #888));
+      font-size: var(--font-size-caption, 0.75rem);
+      font-weight: var(--font-weight-bold, 700);
+      letter-spacing: var(--tracking-overline, 0.08em);
+      line-height: var(--line-height-tight, 1.1);
+      text-transform: uppercase;
+    }
+
+    :host([role="assistant"]) .content {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      max-width: 100%;
+      min-width: 0;
+      padding-left: calc(var(--spacing-md, 12px) + 2px);
+      border-left: 1px solid var(--ai-message-assistant-rail-color, rgba(255, 255, 255, 0.08));
+      background: transparent;
+      color: var(--ai-message-color, var(--text, inherit));
+    }
+
+    :host([role="tool"]) .message,
+    :host([role="system"]) .message {
+      gap: var(--ai-message-gap, 3px);
+      color: var(--ai-message-color, var(--text, inherit));
+    }
+
+    :host([role="tool"]) .content {
+      width: 100%;
+    }
+
+    :host([role="system"]) .content {
+      color: color-mix(in oklch, var(--text-muted, currentColor) 92%, transparent);
+      font-size: var(--font-size-meta, 0.8125rem);
+    }
+
+    @media (max-width: 420px) {
+      :host([role="assistant"]) .header,
+      :host([role="assistant"]) .content {
+        padding-left: calc(var(--spacing-sm, 8px) + 2px);
+      }
+    }
+  `;
+  get normalizedRole() {
+    if (this.role === "user" || this.role === "assistant" || this.role === "system" || this.role === "tool") {
+      return this.role;
+    }
+    return "system";
+  }
+  get actorLabel() {
+    return this.label || (this.normalizedRole === "assistant" ? "Assistant" : this.normalizedRole);
+  }
+  render() {
+    const role = this.normalizedRole;
+    return html2`
+      <article class="message" data-role=${role} aria-busy=${this.status === "running"}>
+        ${role === "assistant" ? html2`
+              <div class="header">
+                <slot name="avatar"></slot>
+                <slot name="actor"><span class="actor-label">${this.actorLabel}</span></slot>
+                <slot name="meta"></slot>
+              </div>
+            ` : nothing}
+        <div class="content">
+          <slot></slot>
+        </div>
+        ${role !== "assistant" ? html2`
+                <slot name="meta"></slot>
+              ` : nothing}
+      </article>
+    `;
+  }
+}
+__legacyDecorateClassTS([
+  property2({ reflect: true })
+], AiMessage.prototype, "role", undefined);
+__legacyDecorateClassTS([
+  property2({ reflect: true, attribute: "for" })
+], AiMessage.prototype, "htmlFor", undefined);
+__legacyDecorateClassTS([
+  property2({ reflect: true })
+], AiMessage.prototype, "status", undefined);
+__legacyDecorateClassTS([
+  property2({ reflect: true })
+], AiMessage.prototype, "timestamp", undefined);
+__legacyDecorateClassTS([
+  property2({ reflect: true })
+], AiMessage.prototype, "label", undefined);
+AiMessage = __legacyDecorateClassTS([
+  customElement2("ai-message")
+], AiMessage);
+// src/semantic/ai-tool-call.ts
+import { LitElement as LitElement3, css as css3, html as html3, nothing as nothing2, svg } from "lit";
+import { customElement as customElement3, property as property3 } from "lit/decorators.js";
+
+// src/lib/tool-tone.ts
+function getToolTone(name) {
+  const normalized = name.toLowerCase();
+  if (normalized.includes("read")) {
+    return "read";
+  }
+  if (normalized.includes("write")) {
+    return "write";
+  }
+  if (normalized.includes("edit")) {
+    return "edit";
+  }
+  if (normalized.includes("bash")) {
+    return "bash";
+  }
+  return "generic";
+}
+
+// src/lib/has-slot-controller.ts
+class HasSlotController {
+  host;
+  slotNames = [];
+  constructor(host, ...slotNames) {
+    (this.host = host).addController(this);
+    this.slotNames = slotNames;
+  }
+  hasDefaultSlot() {
+    return [...this.host.childNodes].some((node) => {
+      if (node.nodeType === node.TEXT_NODE && node.textContent?.trim() !== "") {
+        return true;
+      }
+      if (node.nodeType === node.ELEMENT_NODE) {
+        const el = node;
+        if (!el.hasAttribute("slot")) {
+          return true;
+        }
+      }
+      return false;
+    });
+  }
+  hasNamedSlot(name) {
+    return this.host.querySelector(`:scope > [slot="${name}"]`) !== null;
+  }
+  test(slotName) {
+    return slotName === "[default]" ? this.hasDefaultSlot() : this.hasNamedSlot(slotName);
+  }
+  hostConnected() {
+    this.host.shadowRoot?.addEventListener("slotchange", this.handleSlotChange);
+  }
+  hostDisconnected() {
+    this.host.shadowRoot?.removeEventListener("slotchange", this.handleSlotChange);
+  }
+  handleSlotChange = (event) => {
+    const slot = event.target;
+    if (this.slotNames.includes("[default]") && !slot.name || slot.name && this.slotNames.includes(slot.name)) {
+      this.host.requestUpdate();
+    }
+  };
+}
+
+// src/semantic/ai-tool-call.ts
+function renderGlyph(tone) {
+  switch (tone) {
+    case "read":
+      return svg`<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 1 2-2h12"></path><path d="M14 3v6h6"></path><path d="M8 13h8"></path><path d="M8 17h5"></path><path d="M14 3l6 6v10a2 2 0 0 1-2 2H6"></path></svg>`;
+    case "write":
+      return svg`<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20h9"></path><path d="M16.5 3.5a2.1 2.1 0 1 1 3 3L7 19l-4 1 1-4Z"></path></svg>`;
+    case "edit":
+      return svg`<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20h9"></path><path d="M4 13.5V20h6.5L19 11.5 12.5 5 4 13.5Z"></path></svg>`;
+    case "bash":
+      return svg`<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m4 17 6-5-6-5"></path><path d="M12 19h8"></path></svg>`;
+    default:
+      return nothing2;
+  }
+}
+
+class AiToolCall extends LitElement3 {
+  constructor() {
+    super(...arguments);
+    this.id = "";
+    this.name = "";
+    this.label = "";
+    this.kind = "unknown";
+    this.effect = "unknown";
+    this.headline = "";
+    this.subline = "";
+    this.status = "unknown";
+    this.open = false;
+  }
+  static styles = css3`
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
+    :host {
+      display: block;
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      max-width: 100%;
+      min-width: 0;
+      color: var(--ai-tool-call-color, var(--text, var(--ai-color-text, inherit)));
+    }
+
+    .row {
+      --accent: color-mix(
+        in oklch,
+        var(--ai-tool-call-status-color, var(--text-muted, var(--ai-color-text-muted, #888))) 82%,
+        var(--ai-tool-call-border-color, var(--border, var(--ai-color-border, #333)))
+      );
+      --surface-hover: color-mix(in oklch, var(--accent) 8%, transparent);
+      --surface-open: color-mix(in oklch, var(--accent) 5%, transparent);
+      display: block;
+      min-width: 0;
+      max-width: 100%;
+      background: var(--ai-tool-call-background, var(--background-color, transparent));
+      color: inherit;
+    }
+
+    .row[data-tone="read"] {
+      --accent: oklch(74% 0.12 190);
+    }
+    .row[data-tone="write"] {
+      --accent: oklch(78% 0.15 145);
+    }
+    .row[data-tone="edit"] {
+      --accent: oklch(76% 0.17 85);
+    }
+    .row[data-tone="bash"] {
+      --accent: oklch(68% 0.19 25);
+    }
+
+    .row[data-status="success"] {
+      --accent: var(
+        --ai-tool-call-success-color,
+        var(--success-color, var(--success, var(--ai-color-success, #16a34a)))
+      );
+    }
+
+    .row[data-status="running"],
+    .row[data-status="pending"] {
+      --accent: var(
+        --ai-tool-call-running-color,
+        var(--running-color, var(--accent, var(--ai-color-accent, Highlight)))
+      );
+    }
+
+    .row[data-status="error"] {
+      --accent: var(
+        --ai-tool-call-error-color,
+        var(--error-color, var(--error, var(--ai-color-error, #dc2626)))
+      );
+      --surface-hover: color-mix(in oklch, var(--accent) 10%, transparent);
+      --surface-open: color-mix(in oklch, var(--accent) 7%, transparent);
+    }
+
+    .row-header {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      align-items: center;
+      gap: calc(var(--spacing-xs, 4px) + 2px);
+      padding: 2px 4px;
+      background: var(
+        --ai-tool-call-summary-background,
+        var(--summary-background-color, transparent)
+      );
+      list-style: none;
+    }
+
+    .row-header[interactive] {
+      cursor: pointer;
+      transition: background 0.16s ease;
+    }
+
+    .row-header[interactive]:hover {
+      background: var(--surface-hover);
+    }
+
+    .row-header[interactive]:focus-visible {
+      outline: 2px solid var(--focus, Highlight);
+      outline-offset: 2px;
+    }
+
+    details[open] > .row-header {
+      background: var(--surface-open);
+    }
+
+    summary.row-header::marker,
+    summary.row-header::-webkit-details-marker {
+      display: none;
+    }
+
+    .header-content {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      min-width: 0;
+    }
+
+    .icon-frame {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 14px;
+      height: 14px;
+      flex-shrink: 0;
+      color: color-mix(in oklch, var(--accent) 62%, var(--text-muted, currentColor));
+    }
+
+    .icon-frame svg {
+      width: 12.5px;
+      height: 12.5px;
+      stroke: currentColor;
+      fill: none;
+      stroke-width: 1.8;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+
+    .reasoning-dot {
+      width: 5px;
+      height: 5px;
+      border-radius: 999px;
+      background: currentColor;
+      opacity: 0.72;
+    }
+
+    .text-block {
+      display: grid;
+      gap: 1px;
+      min-width: 0;
+      padding-block: 1px;
+    }
+
+    .headline {
+      display: flex;
+      align-items: baseline;
+      gap: 6px;
+      flex-wrap: wrap;
+      min-width: 0;
+    }
+
+    .badge {
+      flex-shrink: 0;
+      font-size: var(--font-size-caption, 0.75rem);
+      font-weight: var(--font-weight-semibold, 600);
+      line-height: var(--line-height-tight, 1.1);
+      letter-spacing: var(--tracking-label, 0.04em);
+      color: color-mix(in oklch, var(--accent) 52%, var(--text-muted, currentColor));
+    }
+
+    .headline-text {
+      min-width: 0;
+      font-size: var(--font-size-meta, 0.8125rem);
+      line-height: var(--line-height-snug, 1.25);
+      color: color-mix(in oklch, var(--text, currentColor) 88%, var(--text-muted, currentColor));
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: normal;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+    }
+
+    .subline {
+      font-size: var(--font-size-caption, 0.75rem);
+      line-height: var(--line-height-snug, 1.25);
+      color: color-mix(in oklch, var(--text-muted, currentColor) 92%, transparent);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .row[data-tone="generic"] .badge {
+      color: color-mix(in oklch, var(--text-muted, currentColor) 92%, transparent);
+    }
+
+    .row[data-tone="generic"] .headline-text {
+      color: color-mix(in oklch, var(--text, currentColor) 78%, var(--text-muted, currentColor));
+    }
+
+    .row[data-tone="read"] .headline-text {
+      white-space: nowrap;
+      display: block;
+      -webkit-line-clamp: unset;
+    }
+
+    .chevron {
+      width: 8px;
+      height: 8px;
+      flex-shrink: 0;
+      color: color-mix(in oklch, var(--text-muted, currentColor) 88%, transparent);
+      transition: transform 0.16s ease;
+    }
+
+    details[open] .chevron {
+      transform: rotate(90deg);
+    }
+
+    .body {
+      padding: 1px 4px calc(var(--spacing-xs, 4px) + 1px) 24px;
+    }
+
+    .body::before {
+      content: "";
+      display: block;
+      height: 1px;
+    }
+
+    .body ::slotted(*) {
+      display: block;
+      min-width: 0;
+    }
+
+    .input-area {
+      padding: var(--ai-space-xs, 2px) 4px var(--ai-space-xs, 2px) 24px;
+      background: var(--ai-tool-call-input-background, var(--input-background-color, transparent));
+    }
+
+    .input-area ::slotted(*) {
+      display: block;
+      min-width: 0;
+      margin: 0;
+      max-width: 100%;
+    }
+  `;
+  hasSlot = new HasSlotController(this, "[default]", "input", "summary");
+  get tone() {
+    return getToolTone(this.name);
+  }
+  get badgeText() {
+    return this.label || this.name;
+  }
+  get headlineText() {
+    return this.headline || this.label || "";
+  }
+  get hasBodyContent() {
+    return this.hasSlot.test("[default]");
+  }
+  get hasInputContent() {
+    return this.hasSlot.test("input");
+  }
+  get hasSummaryContent() {
+    return this.hasSlot.test("summary");
+  }
+  get isExpandable() {
+    return this.hasBodyContent || this.hasInputContent;
+  }
+  get hasVisibleHeaderContent() {
+    return Boolean(this.badgeText || this.headlineText || this.subline);
+  }
+  show() {
+    this.open = true;
+  }
+  hide() {
+    this.open = false;
+  }
+  toggle(force) {
+    this.open = force ?? !this.open;
+  }
+  emitToggle(isOpen) {
+    this.dispatchEvent(new CustomEvent(isOpen ? "ai-show" : "ai-hide", {
+      detail: { source: "tool-call", open: isOpen, id: this.id, name: this.name },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  handleToggle(e) {
+    const details = e.currentTarget;
+    const isOpen = details.open;
+    if (this.open !== isOpen) {
+      this.open = isOpen;
+    }
+    this.emitToggle(isOpen);
+  }
+  updated(changed) {
+    if (changed.has("open") && changed.get("open") !== undefined) {
+      const details = this.renderRoot.querySelector("details");
+      if (details && details.open !== this.open) {
+        details.open = this.open;
+      }
+    }
+  }
+  renderIcon() {
+    const tone = this.tone;
+    if (tone === "generic") {
+      return html3`
+        <span class="icon-frame" aria-hidden="true">
+          <span class="reasoning-dot"></span>
+        </span>
+      `;
+    }
+    return html3`<span class="icon-frame" aria-hidden="true">${renderGlyph(tone)}</span>`;
+  }
+  renderHeaderContent() {
+    return html3`
+      <span class="header-content">
+        ${this.renderIcon()}
+        <span class="text-block">
+          <span class="headline">
+            ${this.badgeText ? html3`<span class="badge">${this.badgeText}</span>` : nothing2}
+            ${this.headlineText && this.headlineText !== this.badgeText ? html3`<span class="headline-text">${this.headlineText}</span>` : nothing2}
+          </span>
+          ${this.subline ? html3`<span class="subline">${this.subline}</span>` : nothing2}
+        </span>
+      </span>
+      ${this.isExpandable ? html3`
+              <svg class="chevron" viewBox="0 0 10 10" aria-hidden="true">
+                <path
+                  d="M3 2.2 6.8 5 3 7.8"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.4"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                ></path>
+              </svg>
+            ` : nothing2}
+    `;
+  }
+  render() {
+    const tone = this.tone;
+    const status = this.status;
+    if (this.hasSummaryContent) {
+      return html3`
+        <div class="row" data-tone=${tone} data-status=${status}>
+          <slot name="summary"></slot>
+          ${this.isExpandable ? html3`
+                <div class="body">
+                  ${this.hasInputContent ? html3`
+                          <div class="input-area"><slot name="input"></slot></div>
+                        ` : nothing2}
+                  <slot></slot>
+                </div>
+              ` : nothing2}
+        </div>
+      `;
+    }
+    if (!this.isExpandable) {
+      if (!this.hasVisibleHeaderContent) {
+        return nothing2;
+      }
+      return html3`
+        <div class="row" data-tone=${tone} data-status=${status}>
+          <div class="row-header">${this.renderHeaderContent()}</div>
+        </div>
+      `;
+    }
+    return html3`
+      <details
+        class="row"
+        data-tone=${tone}
+        data-status=${status}
+        ?open=${this.open}
+        @toggle=${this.handleToggle}
+      >
+        <summary class="row-header" interactive>${this.renderHeaderContent()}</summary>
+        ${this.hasInputContent ? html3`
+                <div class="input-area"><slot name="input"></slot></div>
+              ` : nothing2}
+        <div class="body"><slot></slot></div>
+      </details>
+    `;
+  }
+}
+__legacyDecorateClassTS([
+  property3({ reflect: true })
+], AiToolCall.prototype, "id", undefined);
+__legacyDecorateClassTS([
+  property3({ reflect: true })
+], AiToolCall.prototype, "name", undefined);
+__legacyDecorateClassTS([
+  property3({ reflect: true })
+], AiToolCall.prototype, "label", undefined);
+__legacyDecorateClassTS([
+  property3({ reflect: true })
+], AiToolCall.prototype, "kind", undefined);
+__legacyDecorateClassTS([
+  property3({ reflect: true })
+], AiToolCall.prototype, "effect", undefined);
+__legacyDecorateClassTS([
+  property3({ reflect: true })
+], AiToolCall.prototype, "headline", undefined);
+__legacyDecorateClassTS([
+  property3({ reflect: true })
+], AiToolCall.prototype, "subline", undefined);
+__legacyDecorateClassTS([
+  property3({ reflect: true })
+], AiToolCall.prototype, "status", undefined);
+__legacyDecorateClassTS([
+  property3({ reflect: true, type: Boolean })
+], AiToolCall.prototype, "open", undefined);
+AiToolCall = __legacyDecorateClassTS([
+  customElement3("ai-tool-call")
+], AiToolCall);
+// src/semantic/ai-tool-result.ts
+import { LitElement as LitElement4, css as css4, html as html4, nothing as nothing3 } from "lit";
+import { customElement as customElement4, property as property4 } from "lit/decorators.js";
+function isStructuredValue(value) {
+  return typeof value === "string" || Array.isArray(value) || Boolean(value) && typeof value === "object";
+}
+function extractFirstStructuredField(record, keys) {
+  for (const key of keys) {
+    const candidate = record[key];
+    if (!isStructuredValue(candidate)) {
+      continue;
+    }
+    const parts = extractStructuredText(candidate);
+    if (parts.length > 0) {
+      return parts;
+    }
+  }
+}
+function extractStructuredText(value) {
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    return trimmed ? [trimmed] : [];
+  }
+  if (Array.isArray(value)) {
+    return value.flatMap((item) => extractStructuredText(item));
+  }
+  if (value && typeof value === "object") {
+    const record = value;
+    const extracted = extractFirstStructuredField(record, [
+      "text",
+      "message",
+      "content",
+      "result",
+      "output",
+      "error"
+    ]);
+    return extracted ?? [JSON.stringify(value, undefined, 2)];
+  }
+  if (value === null || value === undefined) {
+    return [];
+  }
+  return [String(value)];
+}
+function normalizeToolOutput(content) {
+  const trimmed = content.trim();
+  if (!trimmed) {
+    return "";
+  }
+  try {
+    const parsed = JSON.parse(trimmed);
+    const lines = extractStructuredText(parsed).filter(Boolean);
+    if (lines.length > 0) {
+      return lines.join(`
+
+`);
+    }
+  } catch {}
+  return trimmed;
+}
+
+class AiToolResult extends LitElement4 {
+  constructor() {
+    super(...arguments);
+    this.htmlFor = "";
+    this.name = "";
+    this.status = "unknown";
+    this.channel = "unknown";
+    this.contentType = "text/plain";
+    this.content = "";
+    this.truncated = false;
+  }
+  hasSlot = new HasSlotController(this, "[default]", "meta");
+  static styles = css4`
+    :host {
+      box-sizing: border-box;
+      display: block;
+      margin: 0;
+      padding: 0;
+      min-width: 0;
+      max-width: 100%;
+      background: var(--ai-tool-result-background, transparent);
+      color: var(--ai-tool-result-color, var(--text, var(--ai-color-text, inherit)));
+    }
+
+    *,
+    *::before,
+    *::after {
+      box-sizing: inherit;
+    }
+
+    .container {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ai-space-sm, 8px);
+      min-width: 0;
+      max-width: 100%;
+    }
+
+    .meta {
+      display: flex;
+      align-items: center;
+      gap: var(--ai-space-xs, 4px);
+      color: var(--ai-tool-result-meta-color, var(--text-muted, var(--ai-color-text-muted, #888)));
+      font-size: var(--font-size-caption, var(--ai-font-size-xs, 0.75rem));
+    }
+
+    .content {
+      min-width: 0;
+      max-width: 100%;
+      color: var(--ai-tool-result-color, var(--text, var(--ai-color-text, inherit)));
+    }
+
+    pre {
+      margin: 0;
+      max-width: 100%;
+      max-height: var(--ai-tool-result-max-height, 240px);
+      overflow-x: auto;
+      overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
+      color: var(
+        --ai-tool-result-code-color,
+        color-mix(in oklch, var(--text, currentColor) 82%, var(--text-muted, currentColor))
+      );
+      font-family: var(--ai-tool-result-code-font, var(--font-family-mono, monospace));
+      font-size: var(--font-size-caption, 0.75rem);
+      line-height: var(--line-height-body, 1.5);
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+
+    :host([channel="stderr"]) .content,
+    :host([status="error"]) .content {
+      color: var(--ai-tool-result-error-color, var(--error, var(--ai-color-error, #dc2626)));
+    }
+
+    :host([channel="log"]) .content {
+      color: var(--ai-tool-result-meta-color, var(--text-muted, var(--ai-color-text-muted, #888)));
+    }
+
+    .truncation-indicator::after {
+      content: " (truncated)";
+      color: var(--ai-tool-result-meta-color, var(--text-muted, var(--ai-color-text-muted, #888)));
+      font-style: italic;
+    }
+  `;
+  get hasDefaultContent() {
+    return this.hasSlot.test("[default]");
+  }
+  get hasMetaContent() {
+    return this.hasSlot.test("meta");
+  }
+  render() {
+    const body = normalizeToolOutput(this.content);
+    return html4`
+      <div class="container">
+        ${this.hasMetaContent ? html4`
+                <div class="meta"><slot name="meta"></slot></div>
+              ` : nothing3}
+        <div class="content ${this.truncated ? "truncation-indicator" : ""}">
+          ${this.hasDefaultContent ? html4`
+                  <slot></slot>
+                ` : body ? html4`<pre>${body}</pre>` : nothing3}
+        </div>
+      </div>
+    `;
+  }
+}
+__legacyDecorateClassTS([
+  property4({ reflect: true, attribute: "for" })
+], AiToolResult.prototype, "htmlFor", undefined);
+__legacyDecorateClassTS([
+  property4({ reflect: true })
+], AiToolResult.prototype, "name", undefined);
+__legacyDecorateClassTS([
+  property4({ reflect: true })
+], AiToolResult.prototype, "status", undefined);
+__legacyDecorateClassTS([
+  property4({ reflect: true })
+], AiToolResult.prototype, "channel", undefined);
+__legacyDecorateClassTS([
+  property4({ reflect: true, attribute: "content-type" })
+], AiToolResult.prototype, "contentType", undefined);
+__legacyDecorateClassTS([
+  property4({ type: String })
+], AiToolResult.prototype, "content", undefined);
+__legacyDecorateClassTS([
+  property4({ reflect: true, type: Boolean })
+], AiToolResult.prototype, "truncated", undefined);
+AiToolResult = __legacyDecorateClassTS([
+  customElement4("ai-tool-result")
+], AiToolResult);
+// src/semantic/ai-thinking.ts
+import { LitElement as LitElement5, css as css5, html as html5 } from "lit";
+import { customElement as customElement5, property as property5 } from "lit/decorators.js";
+function summarizeThinking(content) {
+  const normalized = content.replace(/\s+/g, " ").trim();
+  if (!normalized) {
+    return "Reasoning";
+  }
+  const sentence = normalized.match(/.*?[.!?](?:\s|$)/)?.[0]?.trim() ?? normalized;
+  if (sentence.length <= 88) {
+    return sentence;
+  }
+  return `${sentence.slice(0, 85).trimEnd()}…`;
+}
+
+class AiThinking extends LitElement5 {
+  constructor() {
+    super(...arguments);
+    this.content = "";
+    this.source = "unknown";
+    this.redacted = false;
+    this.open = false;
+    this.headline = "";
+  }
+  static styles = css5`
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
+    :host {
+      display: block;
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      max-width: 100%;
+      min-width: 0;
+      color: var(
+        --ai-thinking-color,
+        color-mix(in oklch, var(--text-muted, currentColor) 90%, transparent)
+      );
+    }
+
+    .thinking-content {
+      color: var(
+        --ai-thinking-color,
+        color-mix(in oklch, var(--text-muted, currentColor) 90%, transparent)
+      );
+      font-size: var(--font-size-caption, 0.75rem);
+      line-height: var(--line-height-body, 1.5);
+      white-space: pre-wrap;
+      word-break: break-word;
+      max-height: var(--ai-thinking-max-height, 140px);
+      overflow-x: auto;
+      overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+
+    .redacted {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 2px 4px;
+      color: var(--ai-thinking-muted-color, var(--text-muted, var(--ai-color-text-muted, #888)));
+      font-size: var(--font-size-caption, 0.75rem);
+      line-height: var(--line-height-snug, 1.25);
+      font-style: italic;
+    }
+  `;
+  show() {
+    if (this.redacted) {
+      return;
+    }
+    this.open = true;
+  }
+  hide() {
+    if (this.redacted) {
+      return;
+    }
+    this.open = false;
+  }
+  toggle(force) {
+    if (this.redacted) {
+      return;
+    }
+    this.open = force ?? !this.open;
+  }
+  handleShow() {
+    if (this.redacted) {
+      return;
+    }
+    this.open = true;
+    this.dispatchEvent(new CustomEvent("ai-show", {
+      detail: { source: "thinking", redacted: this.redacted },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  handleHide() {
+    if (this.redacted) {
+      return;
+    }
+    this.open = false;
+    this.dispatchEvent(new CustomEvent("ai-hide", {
+      detail: { source: "thinking", redacted: this.redacted },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  updated(changed) {
+    if (changed.has("redacted") && this.redacted && this.open) {
+      this.open = false;
+    }
+  }
+  render() {
+    if (this.redacted) {
+      return html5`
+        <div class="redacted">Reasoning redacted<slot name="meta"></slot></div>
+      `;
+    }
+    const content = this.content.trim();
+    if (!content) {
+      return html5`
+        <slot></slot>
+      `;
+    }
+    return html5`
+      <ai-tool-call
+        name="Reasoning"
+        .headline=${this.headline || summarizeThinking(content)}
+        .open=${this.open}
+        @ai-show=${this.handleShow}
+        @ai-hide=${this.handleHide}
+      >
+        <div class="thinking-content">${content}</div>
+        <slot name="meta"></slot>
+      </ai-tool-call>
+    `;
+  }
+}
+__legacyDecorateClassTS([
+  property5({ type: String })
+], AiThinking.prototype, "content", undefined);
+__legacyDecorateClassTS([
+  property5({ reflect: true })
+], AiThinking.prototype, "source", undefined);
+__legacyDecorateClassTS([
+  property5({ reflect: true, type: Boolean })
+], AiThinking.prototype, "redacted", undefined);
+__legacyDecorateClassTS([
+  property5({ reflect: true, type: Boolean })
+], AiThinking.prototype, "open", undefined);
+__legacyDecorateClassTS([
+  property5({ reflect: true })
+], AiThinking.prototype, "headline", undefined);
+AiThinking = __legacyDecorateClassTS([
+  customElement5("ai-thinking")
+], AiThinking);
+// src/semantic/ai-event.ts
+import { LitElement as LitElement6, css as css6, html as html6 } from "lit";
+import { customElement as customElement6, property as property6, query } from "lit/decorators.js";
+var KIND_LABELS = {
+  status: "Status",
+  "model-change": "Model Change",
+  checkpoint: "Checkpoint",
+  note: "Note",
+  system: "System",
+  error: "Error",
+  custom: "Event"
+};
+var SEVERITY_COLORS = {
+  info: "var(--ai-event-info-color, var(--ai-event-info, var(--ai-color-info, #3b82f6)))",
+  warning: "var(--ai-event-warning-color, var(--ai-event-warning, var(--ai-color-warning, #f59e0b)))",
+  error: "var(--ai-event-error-color, var(--ai-event-error, var(--ai-color-error, #ef4444)))"
+};
+
+class AiEvent extends LitElement6 {
+  constructor() {
+    super(...arguments);
+    this.kind = "custom";
+    this.severity = "info";
+    this.source = "";
+    this.htmlFor = "";
+    this.open = false;
+  }
+  show() {
+    this.open = true;
+  }
+  hide() {
+    this.open = false;
+  }
+  toggle(force) {
+    this.open = force !== undefined ? force : !this.open;
+  }
+  _prevOpen = false;
+  updated() {
+    if (this._details && this._details.open !== this.open) {
+      this._details.open = this.open;
+    }
+    if (this._prevOpen !== this.open) {
+      this._prevOpen = this.open;
+      this.dispatchEvent(new CustomEvent(this.open ? "ai-show" : "ai-hide", {
+        detail: { source: "event", kind: this.kind },
+        bubbles: true,
+        composed: true
+      }));
+    }
+  }
+  _onToggle() {
+    const details = this._details;
+    if (!details) {
+      return;
+    }
+    this.open = details.open;
+  }
+  get _severityColor() {
+    return SEVERITY_COLORS[this.severity] ?? SEVERITY_COLORS.info ?? "#888";
+  }
+  get _kindLabel() {
+    return KIND_LABELS[this.kind] ?? KIND_LABELS.custom ?? "Custom";
+  }
+  render() {
+    const accentColor = this._severityColor;
+    return html6`
+      <details
+        .open=${this.open}
+        @toggle=${this._onToggle}
+        part="details"
+        style="--_accent: ${accentColor}"
+      >
+        <summary part="summary">
+          <span class="summary-text" part="summary-text">
+            <slot name="summary">
+              <span class="kind-label" part="kind-label">${this._kindLabel}</span>
+            </slot>
+          </span>
+          <span class="summary-rule" aria-hidden="true"></span>
+          <span class="summary-meta" part="meta">
+            <slot name="meta"></slot>
+          </span>
+          <span class="chevron" part="marker" aria-hidden="true">
+            <svg viewBox="0 0 10 10" focusable="false">
+              <path d="M3.25 2.25 6.25 5 3.25 7.75"></path>
+            </svg>
+          </span>
+        </summary>
+
+        <div class="content-shell" part="content-shell">
+          <div class="content" part="content">
+            <slot></slot>
+          </div>
+        </div>
+      </details>
+    `;
+  }
+  static styles = css6`
+    :host {
+      box-sizing: border-box;
+      display: block;
+      width: 100%;
+      max-width: 100%;
+      min-width: 0;
+      margin: 0;
+      padding: 0;
+      color: var(--ai-event-color, var(--ai-event-text-color, var(--text-muted, #8d867a)));
+    }
+
+    *,
+    *::before,
+    *::after {
+      box-sizing: inherit;
+    }
+
+    details {
+      display: block;
+      min-width: 0;
+      max-width: 100%;
+      margin: 0;
+      background: var(--ai-event-background, var(--ai-event-background-color, transparent));
+      border: var(--ai-event-border-width, 0) solid
+        var(--ai-event-border-color, var(--ai-color-border, transparent));
+      border-radius: var(--ai-event-radius, var(--ai-event-border-radius, 0));
+    }
+
+    summary {
+      display: grid;
+      grid-template-columns: auto minmax(24px, 1fr) auto 12px;
+      align-items: center;
+      column-gap: 8px;
+      min-width: 0;
+      list-style: none;
+      cursor: pointer;
+      color: var(
+        --ai-event-summary-color,
+        color-mix(in oklch, var(--text-muted, currentColor) 82%, var(--text, currentColor))
+      );
+      padding: 3px 4px;
+      border-radius: var(--radius-sm, 5px);
+      background: transparent;
+      user-select: none;
+      transition:
+        background 0.16s ease,
+        color 0.16s ease;
+    }
+
+    summary:hover {
+      background: color-mix(in oklch, var(--_accent) 5%, transparent);
+      color: color-mix(in oklch, var(--text, currentColor) 72%, var(--text-muted, currentColor));
+    }
+
+    summary:focus-visible {
+      outline: 2px solid var(--focus, var(--_accent));
+      outline-offset: 2px;
+    }
+
+    details[open] > summary {
+      color: color-mix(in oklch, var(--text, currentColor) 76%, var(--text-muted, currentColor));
+    }
+
+    summary::marker,
+    summary::-webkit-details-marker {
+      display: none;
+    }
+
+    .summary-text {
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: var(--font-size-caption, 0.75rem);
+      font-weight: var(--font-weight-semibold, 600);
+      letter-spacing: var(--tracking-label, 0.04em);
+      line-height: var(--line-height-tight, 1.1);
+      text-transform: uppercase;
+    }
+
+    .summary-rule {
+      min-width: 24px;
+      height: 1px;
+      background: var(
+        --ai-event-rule-color,
+        color-mix(in oklch, var(--text-muted, currentColor) 16%, transparent)
+      );
+    }
+
+    details[open] .summary-rule {
+      background: var(
+        --ai-event-open-rule-color,
+        color-mix(in oklch, var(--text-muted, currentColor) 24%, transparent)
+      );
+    }
+
+    .kind-label {
+      color: inherit;
+      font-weight: inherit;
+    }
+
+    .summary-meta {
+      display: inline-flex;
+      align-items: baseline;
+      justify-content: flex-end;
+      min-width: 0;
+      max-width: min(46vw, 360px);
+      color: var(
+        --ai-event-meta-color,
+        var(--ai-event-meta, color-mix(in oklch, var(--text-muted, currentColor) 76%, transparent))
+      );
+      font-size: var(--font-size-caption, 0.75rem);
+      line-height: var(--line-height-tight, 1.1);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .chevron {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 12px;
+      height: 16px;
+      justify-self: end;
+      color: color-mix(in oklch, var(--text-muted, currentColor) 88%, transparent);
+    }
+
+    .chevron svg {
+      width: 10px;
+      height: 10px;
+      stroke: currentColor;
+      fill: none;
+      stroke-width: 1.8;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      transition: transform 0.16s ease;
+    }
+
+    details[open] .chevron svg {
+      transform: rotate(90deg);
+    }
+
+    .content-shell {
+      margin: 2px 0 1px;
+      padding: 6px 4px 3px var(--ai-event-content-indent, clamp(20px, 7vw, 58px));
+    }
+
+    .content {
+      display: block;
+      min-width: 0;
+      max-width: 100%;
+      color: var(
+        --ai-event-content-color,
+        color-mix(in oklch, var(--text, currentColor) 82%, var(--text-muted, currentColor))
+      );
+      font-size: var(--font-size-meta, 0.8125rem);
+      line-height: var(--line-height-relaxed, 1.45);
+    }
+
+    .content ::slotted(*) {
+      max-width: 100%;
+    }
+
+    .content ::slotted(:first-child) {
+      margin-top: 0;
+    }
+
+    .content ::slotted(:last-child) {
+      margin-bottom: 0;
+    }
+
+    .content ::slotted(pre) {
+      overflow-x: auto;
+      padding: 8px 10px;
+      border-radius: var(--radius-sm, 5px);
+      background: color-mix(in oklch, var(--text, currentColor) 5%, transparent);
+      font-size: var(--font-size-caption, 0.75rem);
+      line-height: var(--line-height-snug, 1.25);
+    }
+
+    .content ::slotted(code) {
+      border-radius: 4px;
+      padding: 0.08em 0.35em;
+      background: color-mix(in oklch, var(--text, currentColor) 7%, transparent);
+      color: color-mix(in oklch, var(--text, currentColor) 88%, var(--_accent));
+      font-size: 0.94em;
+    }
+
+    :host([severity="warning"]) .summary-text {
+      color: color-mix(in oklch, var(--_accent) 44%, var(--text, currentColor));
+    }
+
+    :host([severity="warning"]) .summary-rule {
+      background: color-mix(in oklch, var(--_accent) 24%, transparent);
+    }
+
+    :host([severity="error"]) .summary-text {
+      color: color-mix(in oklch, var(--_accent) 52%, var(--text, currentColor));
+    }
+
+    :host([severity="error"]) .summary-rule {
+      background: color-mix(in oklch, var(--_accent) 30%, transparent);
+    }
+
+    :host([severity="error"]) summary:hover {
+      background: color-mix(in oklch, var(--_accent) 9%, transparent);
+    }
+
+    @media (max-width: 520px) {
+      summary {
+        grid-template-columns: auto minmax(16px, 1fr) 12px;
+        padding-right: 4px;
+      }
+
+      .summary-meta {
+        grid-column: 1 / 3;
+        grid-row: 2;
+        justify-content: flex-start;
+        max-width: 100%;
+        margin-top: 1px;
+      }
+
+      .chevron {
+        grid-column: 3;
+        grid-row: 1 / span 2;
+      }
+
+      .content-shell {
+        padding-left: 18px;
+      }
+    }
+  `;
+}
+__legacyDecorateClassTS([
+  property6({ reflect: true })
+], AiEvent.prototype, "kind", undefined);
+__legacyDecorateClassTS([
+  property6({ reflect: true })
+], AiEvent.prototype, "severity", undefined);
+__legacyDecorateClassTS([
+  property6({ reflect: true })
+], AiEvent.prototype, "source", undefined);
+__legacyDecorateClassTS([
+  property6({ reflect: true, attribute: "for" })
+], AiEvent.prototype, "htmlFor", undefined);
+__legacyDecorateClassTS([
+  property6({ reflect: true, type: Boolean })
+], AiEvent.prototype, "open", undefined);
+__legacyDecorateClassTS([
+  query("details")
+], AiEvent.prototype, "_details", undefined);
+AiEvent = __legacyDecorateClassTS([
+  customElement6("ai-event")
+], AiEvent);
+// src/visual/stack.ts
+import { LitElement as LitElement7, css as css7, html as html7 } from "lit";
+import { customElement as customElement7, property as property7 } from "lit/decorators.js";
+var GAP_MAP = {
+  none: "0",
+  "2xs": "0.125rem",
+  xs: "0.25rem",
+  sm: "0.5rem",
+  md: "0.75rem",
+  lg: "1rem",
+  xl: "1.5rem",
+  "2xl": "2rem"
+};
+var JUSTIFY_MAP = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  between: "space-between",
+  around: "space-around",
+  evenly: "space-evenly"
+};
+
+class AiStack extends LitElement7 {
+  constructor() {
+    super(...arguments);
+    this.direction = "column";
+    this.gap = "none";
+    this.align = "stretch";
+    this.justify = "start";
+    this.wrap = false;
+    this.inline = false;
+  }
+  static styles = css7`
+    :host {
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      gap: var(--gap, 0);
+      align-items: var(--align-items, stretch);
+      justify-content: var(--justify-content, flex-start);
+      margin: 0;
+      padding: 0;
+    }
+
+    :host([inline]) {
+      display: inline-flex;
+    }
+
+    :host([direction="row"]) {
+      flex-direction: row;
+    }
+
+    :host([wrap]) {
+      flex-wrap: wrap;
+    }
+
+    *,
+    *::before,
+    *::after {
+      box-sizing: inherit;
+    }
+  `;
+  render() {
+    return html7`
+      <slot></slot>
+    `;
+  }
+  updated() {
+    const gap = GAP_MAP[this.gap] ?? "0";
+    this.style.setProperty("--gap", `var(--gap, ${gap})`);
+    const alignItems = this.align;
+    this.style.setProperty("--align-items", `var(--align-items, ${alignItems})`);
+    const justifyContent = JUSTIFY_MAP[this.justify] ?? "flex-start";
+    this.style.setProperty("--justify-content", `var(--justify-content, ${justifyContent})`);
+    this.style.direction;
+    this.style.gap = `var(--gap, ${gap})`;
+    this.style.alignItems = `var(--align-items, ${alignItems})`;
+    this.style.justifyContent = `var(--justify-content, ${justifyContent})`;
+  }
+}
+__legacyDecorateClassTS([
+  property7({ reflect: true })
+], AiStack.prototype, "direction", undefined);
+__legacyDecorateClassTS([
+  property7({ reflect: true })
+], AiStack.prototype, "gap", undefined);
+__legacyDecorateClassTS([
+  property7({ reflect: true })
+], AiStack.prototype, "align", undefined);
+__legacyDecorateClassTS([
+  property7({ reflect: true })
+], AiStack.prototype, "justify", undefined);
+__legacyDecorateClassTS([
+  property7({ reflect: true, type: Boolean })
+], AiStack.prototype, "wrap", undefined);
+__legacyDecorateClassTS([
+  property7({ reflect: true, type: Boolean })
+], AiStack.prototype, "inline", undefined);
+AiStack = __legacyDecorateClassTS([
+  customElement7("ai-stack")
+], AiStack);
+// src/visual/surface.ts
+import { LitElement as LitElement8, css as css8, html as html8 } from "lit";
+import { customElement as customElement8, property as property8 } from "lit/decorators.js";
+var RADIUS_MAP = {
+  none: "0",
+  sm: "0.375rem",
+  md: "0.625rem",
+  lg: "0.875rem",
+  pill: "999px"
+};
+
+class AiSurface extends LitElement8 {
+  constructor() {
+    super(...arguments);
+    this.variant = "flat";
+    this.tone = "neutral";
+    this.radius = "md";
+    this.interactive = false;
+  }
+  static styles = css8`
+    :host {
+      box-sizing: border-box;
+      display: block;
+      margin: 0;
+      padding: 0;
+      border-radius: var(--border-radius, 0.625rem);
+      background: var(--background-color, transparent);
+      color: var(--text-color, inherit);
+    }
+
+    :host([variant="outlined"]) {
+      border: var(--border-width, 1px) solid
+        var(--border-color, var(--ai-color-border, rgba(128, 128, 128, 0.2)));
+    }
+
+    :host([variant="raised"]) {
+      box-shadow: var(--shadow, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08));
+    }
+
+    :host([variant="sunken"]) {
+      box-shadow: var(--shadow, inset 0 1px 3px rgba(0, 0, 0, 0.12));
+    }
+
+    :host([interactive]) {
+      cursor: pointer;
+      transition: background 0.15s ease;
+    }
+
+    :host([interactive]:hover) {
+      background: var(--hover-background-color, var(--background-color, rgba(128, 128, 128, 0.05)));
+    }
+
+    :host([interactive]:focus-visible) {
+      outline: var(--focus-ring, 2px solid var(--ai-color-accent, #4a90d9));
+      outline-offset: 2px;
+    }
+
+    *,
+    *::before,
+    *::after {
+      box-sizing: inherit;
+    }
+  `;
+  render() {
+    return html8`
+      <slot></slot>
+    `;
+  }
+  updated() {
+    const radius = RADIUS_MAP[this.radius] ?? "0.625rem";
+    this.style.setProperty("--border-radius", `var(--border-radius, ${radius})`);
+    const toneColors = this.getToneColors();
+    this.style.setProperty("--background-color", `var(--background-color, ${toneColors.bg})`);
+    this.style.setProperty("--text-color", `var(--text-color, ${toneColors.text})`);
+    this.style.setProperty("--border-color", `var(--border-color, ${toneColors.border})`);
+  }
+  getToneColors() {
+    switch (this.tone) {
+      case "accent":
+        return {
+          bg: "rgba(74, 144, 217, 0.1)",
+          text: "var(--ai-color-accent, #4a90d9)",
+          border: "rgba(74, 144, 217, 0.3)"
+        };
+      case "success":
+        return {
+          bg: "rgba(46, 160, 67, 0.1)",
+          text: "var(--ai-color-success, #2ea043)",
+          border: "rgba(46, 160, 67, 0.3)"
+        };
+      case "warning":
+        return {
+          bg: "rgba(210, 153, 34, 0.1)",
+          text: "var(--ai-color-warning, #d29922)",
+          border: "rgba(210, 153, 34, 0.3)"
+        };
+      case "error":
+        return {
+          bg: "rgba(227, 62, 51, 0.1)",
+          text: "var(--ai-color-error, #e33e33)",
+          border: "rgba(227, 62, 51, 0.3)"
+        };
+      case "info":
+        return {
+          bg: "rgba(80, 160, 220, 0.1)",
+          text: "var(--ai-color-info, #50a0dc)",
+          border: "rgba(80, 160, 220, 0.3)"
+        };
+      default:
+        return {
+          bg: "transparent",
+          text: "inherit",
+          border: "var(--ai-color-border, rgba(128, 128, 128, 0.2))"
+        };
+    }
+  }
+}
+__legacyDecorateClassTS([
+  property8({ reflect: true })
+], AiSurface.prototype, "variant", undefined);
+__legacyDecorateClassTS([
+  property8({ reflect: true })
+], AiSurface.prototype, "tone", undefined);
+__legacyDecorateClassTS([
+  property8({ reflect: true })
+], AiSurface.prototype, "radius", undefined);
+__legacyDecorateClassTS([
+  property8({ reflect: true, type: Boolean })
+], AiSurface.prototype, "interactive", undefined);
+AiSurface = __legacyDecorateClassTS([
+  customElement8("ai-surface")
+], AiSurface);
+// src/visual/text.ts
+import { LitElement as LitElement9, css as css9, html as html9 } from "lit";
+import { customElement as customElement9, property as property9 } from "lit/decorators.js";
+var SIZE_MAP = {
+  caption: "0.75rem",
+  meta: "0.8125rem",
+  ui: "0.875rem",
+  body: "1rem",
+  title: "1.125rem",
+  display: "1.375rem"
+};
+var WEIGHT_MAP = {
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700
+};
+
+class AiText extends LitElement9 {
+  constructor() {
+    super(...arguments);
+    this.size = "body";
+    this.weight = "normal";
+    this.tone = "default";
+    this.mono = false;
+    this.truncate = false;
+    this.inline = false;
+  }
+  static styles = css9`
+    :host {
+      box-sizing: border-box;
+      display: block;
+      margin: 0;
+      padding: 0;
+      font-size: var(--font-size, 1rem);
+      font-weight: var(--font-weight, 400);
+      line-height: var(--line-height, 1.5);
+      letter-spacing: var(--letter-spacing, normal);
+      color: var(--text-color, inherit);
+    }
+
+    :host([inline]) {
+      display: inline-flex;
+    }
+
+    :host([mono]) {
+      font-family: var(
+        --font-family-mono,
+        ui-monospace,
+        "Cascadia Code",
+        "Source Code Pro",
+        Menlo,
+        Consolas,
+        "DejaVu Sans Mono",
+        monospace
+      );
+    }
+
+    :host(:not([mono])) {
+      font-family: var(--font-family, inherit);
+    }
+
+    :host([truncate]) {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+
+    *,
+    *::before,
+    *::after {
+      box-sizing: inherit;
+    }
+  `;
+  render() {
+    return html9`
+      <slot></slot>
+    `;
+  }
+  updated() {
+    const size = SIZE_MAP[this.size] ?? "1rem";
+    const weight = WEIGHT_MAP[this.weight] ?? 400;
+    this.style.setProperty("--font-size", `var(--font-size, ${size})`);
+    this.style.setProperty("--font-weight", `var(--font-weight, ${weight})`);
+    const toneColor = this.getToneColor();
+    this.style.setProperty("--text-color", `var(--text-color, ${toneColor})`);
+  }
+  getToneColor() {
+    switch (this.tone) {
+      case "muted":
+        return "var(--ai-color-text-muted, rgba(128, 128, 128, 0.7))";
+      case "accent":
+        return "var(--ai-color-accent, #4a90d9)";
+      case "success":
+        return "var(--ai-color-success, #2ea043)";
+      case "warning":
+        return "var(--ai-color-warning, #d29922)";
+      case "error":
+        return "var(--ai-color-error, #e33e33)";
+      default:
+        return "inherit";
+    }
+  }
+}
+__legacyDecorateClassTS([
+  property9({ reflect: true })
+], AiText.prototype, "size", undefined);
+__legacyDecorateClassTS([
+  property9({ reflect: true })
+], AiText.prototype, "weight", undefined);
+__legacyDecorateClassTS([
+  property9({ reflect: true })
+], AiText.prototype, "tone", undefined);
+__legacyDecorateClassTS([
+  property9({ reflect: true, type: Boolean })
+], AiText.prototype, "mono", undefined);
+__legacyDecorateClassTS([
+  property9({ reflect: true, type: Boolean })
+], AiText.prototype, "truncate", undefined);
+__legacyDecorateClassTS([
+  property9({ reflect: true, type: Boolean })
+], AiText.prototype, "inline", undefined);
+AiText = __legacyDecorateClassTS([
+  customElement9("ai-text")
+], AiText);
+// src/visual/markdown.ts
+import { LitElement as LitElement10, css as css10, html as html10, nothing as nothing4 } from "lit";
+import { customElement as customElement10, property as property10 } from "lit/decorators.js";
+import { map } from "lit/directives/map.js";
+class AiMarkdown extends LitElement10 {
+  constructor() {
+    super(...arguments);
+    this.content = "";
+    this.tone = "assistant";
+    this.trusted = false;
+  }
+  static styles = css10`
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
+    :host {
+      display: block;
+      max-width: 100%;
+      color: var(--ai-markdown-color, var(--text-block-color, var(--text, var(--ai-color-text))));
+      white-space: normal;
+      word-break: normal;
+      overflow-wrap: anywhere;
+      font-size: var(--font-size-body, var(--ai-font-size-body, 0.875rem));
+      line-height: var(--line-height-loose, var(--ai-line-height, 1.6));
+    }
+
+    .markdown {
+      display: block;
+    }
+
+    .markdown > * + * {
+      margin-top: var(--ai-markdown-gap, var(--content-gap, 10px));
+    }
+
+    p,
+    ul,
+    ol,
+    pre,
+    h1,
+    h2,
+    h3,
+    blockquote {
+      margin: 0;
+    }
+
+    p,
+    li {
+      white-space: pre-wrap;
+    }
+
+    h1,
+    h2,
+    h3 {
+      line-height: var(--line-height-snug, 1.3);
+      color: var(
+        --ai-markdown-heading-color,
+        var(--heading-color, var(--text, var(--ai-markdown-color, var(--ai-color-text))))
+      );
+    }
+
+    h1 {
+      font-size: var(--font-size-title, 1.125rem);
+      font-weight: var(--font-weight-bold, 700);
+    }
+
+    h2 {
+      font-size: var(--font-size-body, 1rem);
+      font-weight: var(--font-weight-bold, 700);
+    }
+
+    h3 {
+      font-size: var(--font-size-ui, 0.875rem);
+      font-weight: var(--font-weight-title, 600);
+    }
+
+    ul,
+    ol {
+      padding-left: 1.1rem;
+    }
+
+    li {
+      margin: 0;
+    }
+
+    li + li {
+      margin-top: 4px;
+    }
+
+    li > ul,
+    li > ol {
+      margin-top: 4px;
+      margin-bottom: 0;
+    }
+
+    blockquote {
+      border-left: 3px solid
+        var(
+          --ai-markdown-border-color,
+          var(--blockquote-border-color, var(--border, var(--ai-color-border, #333)))
+        );
+      padding-left: var(--spacing-sm, var(--ai-space-sm, 0.5rem));
+      color: color-mix(
+        in srgb,
+        var(--text, var(--ai-markdown-color, var(--ai-color-text))) 80%,
+        transparent
+      );
+    }
+
+    blockquote > * + * {
+      margin-top: 6px;
+    }
+
+    blockquote blockquote {
+      margin-top: 6px;
+    }
+
+    code {
+      padding: 0.12rem 0.35rem;
+      border-radius: 6px;
+      background: var(
+        --ai-markdown-code-background,
+        var(--code-background-color, color-mix(in srgb, var(--text, currentColor) 8%, transparent))
+      );
+      color: var(
+        --ai-markdown-code-color,
+        var(--code-text-color, var(--text, var(--ai-color-text)))
+      );
+      font-family: var(--font-family-mono, var(--ai-font-family-mono, monospace));
+      font-size: 0.92em;
+    }
+
+    pre {
+      max-width: 100%;
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+      padding: calc(var(--spacing-sm, var(--ai-space-sm, 0.5rem)) + 2px)
+        var(--spacing-md, var(--ai-space-md, 0.75rem));
+      border-radius: calc(var(--radius, var(--ai-radius, 8px)) + 2px);
+      background: var(
+        --ai-markdown-code-background,
+        var(--code-background-color, color-mix(in srgb, var(--text, currentColor) 5%, transparent))
+      );
+      border: 1px solid
+        var(
+          --ai-markdown-border-color,
+          var(--blockquote-border-color, var(--border, var(--ai-color-border, #333)))
+        );
+    }
+
+    pre code {
+      padding: 0;
+      border-radius: 0;
+      background: transparent;
+      color: inherit;
+      font-size: 0.9em;
+    }
+
+    strong {
+      color: var(--text, var(--ai-markdown-color, var(--ai-color-text)));
+      font-weight: var(--font-weight-title, 600);
+    }
+
+    em {
+      font-style: italic;
+    }
+
+    a {
+      color: var(
+        --ai-markdown-link-color,
+        var(--link-color, var(--accent, var(--ai-color-accent, #0066cc)))
+      );
+      text-decoration: underline;
+      text-underline-offset: 2px;
+      cursor: pointer;
+    }
+
+    a:hover {
+      opacity: 0.8;
+    }
+
+    :host([tone="user"]) {
+      color: var(--ai-markdown-color, var(--text-on-accent, HighlightText));
+      line-height: var(--line-height-snug, 1.25);
+    }
+
+    :host([tone="user"]) .markdown > * + * {
+      margin-top: 4px;
+    }
+
+    :host([tone="user"]) a {
+      color: var(--ai-markdown-link-color, var(--text-on-accent, HighlightText));
+      text-decoration: underline;
+      text-underline-offset: 2px;
+    }
+
+    :host([tone="user"]) blockquote {
+      border-left-color: color-mix(in srgb, var(--text-on-accent, currentColor) 30%, transparent);
+      color: var(--text-on-accent, currentColor);
+    }
+
+    :host([tone="user"]) code,
+    :host([tone="user"]) pre {
+      background: var(
+        --ai-markdown-code-background,
+        color-mix(in srgb, var(--text, currentColor) 12%, transparent)
+      );
+      border-color: var(
+        --ai-markdown-border-color,
+        color-mix(in srgb, var(--text, currentColor) 15%, transparent)
+      );
+      color: var(--ai-markdown-code-color, var(--text, currentColor));
+    }
+
+    :host([tone="user"]) th {
+      background: color-mix(in srgb, var(--text, currentColor) 8%, transparent);
+    }
+
+    :host([tone="user"]) th,
+    :host([tone="user"]) td {
+      border-color: var(
+        --ai-markdown-border-color,
+        color-mix(in srgb, var(--text, currentColor) 15%, transparent)
+      );
+    }
+
+    :host([tone="system"]),
+    :host([tone="tool"]) {
+      color: var(--ai-markdown-color, var(--text-muted, var(--ai-color-text-muted, #888)));
+      font-size: var(--font-size-meta, var(--ai-font-size-meta, 0.8125rem));
+    }
+
+    .table-wrapper {
+      width: 100%;
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+
+    table {
+      width: 100%;
+      min-width: max-content;
+      border-collapse: collapse;
+      font-size: 0.92em;
+      margin: 0;
+    }
+
+    th,
+    td {
+      padding: var(--spacing-xs, var(--ai-space-xs, 0.25rem))
+        var(--spacing-sm, var(--ai-space-sm, 0.5rem));
+      border: 1px solid
+        var(
+          --ai-markdown-border-color,
+          var(--table-border-color, var(--border, var(--ai-color-border, #333)))
+        );
+      text-align: left;
+    }
+
+    th {
+      background: color-mix(
+        in srgb,
+        var(--text, var(--ai-markdown-color, var(--ai-color-text))) 4%,
+        transparent
+      );
+      font-weight: var(--font-weight-semibold, 600);
+      color: var(--text, var(--ai-markdown-color, var(--ai-color-text)));
+    }
+
+    td {
+      background: transparent;
+    }
+
+    tr:nth-child(even) td {
+      background: color-mix(
+        in srgb,
+        var(--text, var(--ai-markdown-color, var(--ai-color-text))) 2%,
+        transparent
+      );
+    }
+  `;
+  parseInlines(text) {
+    const parts = [];
+    const pattern = /(`[^`]+`|\*\*[^*]+\*\*|\[[^\]]+\]\([^)]+\)|\*[^*]+\*|_[^_]+_)/g;
+    let lastIndex = 0;
+    for (const match of text.matchAll(pattern)) {
+      const token = match[0];
+      const index = match.index ?? 0;
+      if (index > lastIndex) {
+        parts.push({ type: "text", value: text.slice(lastIndex, index) });
+      }
+      if (token.startsWith("`")) {
+        parts.push({ type: "code", value: token.slice(1, -1) });
+      } else if (token.startsWith("**")) {
+        parts.push({ type: "strong", value: token.slice(2, -2) });
+      } else if (token.startsWith("[")) {
+        const linkMatch = token.match(/^\[(.+)\]\((.+)\)$/);
+        if (linkMatch) {
+          parts.push({
+            type: "link",
+            text: linkMatch[1] ?? "",
+            href: linkMatch[2] ?? ""
+          });
+        } else {
+          parts.push({ type: "text", value: token });
+        }
+      } else if (token.startsWith("_")) {
+        parts.push({ type: "emphasis", value: token.slice(1, -1) });
+      } else {
+        parts.push({ type: "emphasis", value: token.slice(1, -1) });
+      }
+      lastIndex = index + token.length;
+    }
+    if (lastIndex < text.length) {
+      parts.push({ type: "text", value: text.slice(lastIndex) });
+    }
+    return parts;
+  }
+  renderInline(text) {
+    return map(this.parseInlines(text), (part) => {
+      if (part.type === "code") {
+        return html10`<code>${part.value}</code>`;
+      }
+      if (part.type === "strong") {
+        return html10`<strong>${part.value}</strong>`;
+      }
+      if (part.type === "emphasis") {
+        return html10`<em>${part.value}</em>`;
+      }
+      if (part.type === "link") {
+        const isAllowed = /^https?:\/\//i.test(part.href) || !/^[a-zA-Z][a-zA-Z0-9+.-]*:/i.test(part.href);
+        const safe = isAllowed ? part.href : "";
+        return html10`<a
+          href="${safe}"
+          target="_blank"
+          rel="noopener noreferrer"
+          >${part.text}</a
+        >`;
+      }
+      return part.value;
+    });
+  }
+  parseTableRow(line) {
+    const content = line.replace(/^\|/, "").replace(/\|$/, "");
+    return content.split("|").map((cell) => cell.trim());
+  }
+  parseTableAligns(separator) {
+    const cells = this.parseTableRow(separator);
+    return cells.map((cell) => {
+      const trimmed = cell.trim();
+      const leftAlign = trimmed.startsWith(":");
+      const rightAlign = trimmed.endsWith(":");
+      if (leftAlign && rightAlign) {
+        return "center";
+      }
+      if (rightAlign) {
+        return "right";
+      }
+      return "left";
+    });
+  }
+  isTableSeparator(line, columnCount) {
+    const cells = this.parseTableRow(line);
+    if (cells.length !== columnCount || cells.length === 0) {
+      return false;
+    }
+    return cells.every((cell) => /^:?-{3,}:?$/.test(cell.trim()));
+  }
+  indentLevel(line) {
+    let n = 0;
+    for (const ch of line) {
+      if (ch === " ") {
+        n++;
+      } else if (ch === "\t") {
+        n += 2;
+      } else {
+        break;
+      }
+    }
+    return n;
+  }
+  parseBlocks(source) {
+    const lines = source.replace(/\r\n/g, `
+`).split(`
+`);
+    const blocks = [];
+    let i = 0;
+    while (i < lines.length) {
+      const trimmed = (lines[i] ?? "").trim();
+      if (!trimmed) {
+        i++;
+        continue;
+      }
+      const codeBlock = this.parseCodeBlock(lines, i, trimmed);
+      if (codeBlock) {
+        blocks.push(codeBlock.block);
+        i = codeBlock.nextIndex;
+        continue;
+      }
+      const headingBlock = this.parseHeadingBlock(trimmed);
+      if (headingBlock) {
+        blocks.push(headingBlock);
+        i++;
+        continue;
+      }
+      const blockquoteBlock = this.parseBlockquoteBlock(lines, i, trimmed);
+      if (blockquoteBlock) {
+        blocks.push(blockquoteBlock.block);
+        i = blockquoteBlock.nextIndex;
+        continue;
+      }
+      const listBlock = this.parseListBlock(lines, i, trimmed);
+      if (listBlock) {
+        blocks.push(listBlock.block);
+        i = listBlock.nextIndex;
+        continue;
+      }
+      const tableBlock = this.parseTableBlock(lines, i, trimmed);
+      if (tableBlock) {
+        blocks.push(tableBlock.block);
+        i = tableBlock.nextIndex;
+        continue;
+      }
+      const paragraphBlock = this.parseParagraphBlock(lines, i);
+      blocks.push(paragraphBlock.block);
+      i = paragraphBlock.nextIndex;
+    }
+    return blocks;
+  }
+  parseCodeBlock(lines, startIndex, trimmed) {
+    if (!trimmed.startsWith("```")) {
+      return;
+    }
+    const language = trimmed.slice(3).trim();
+    const codeLines = [];
+    let i = startIndex + 1;
+    while (i < lines.length && !(lines[i] ?? "").trim().startsWith("```")) {
+      codeLines.push(lines[i] ?? "");
+      i++;
+    }
+    if (i < lines.length) {
+      i++;
+    }
+    return {
+      block: { type: "code", code: codeLines.join(`
+`), language },
+      nextIndex: i
+    };
+  }
+  parseHeadingBlock(trimmed) {
+    const heading = trimmed.match(/^(#{1,3})\s+(.+)$/);
+    if (!heading?.[1] || !heading?.[2]) {
+      return;
+    }
+    return {
+      type: "heading",
+      level: heading[1].length,
+      text: heading[2].trim()
+    };
+  }
+  parseBlockquoteBlock(lines, startIndex, trimmed) {
+    if (!trimmed.startsWith(">")) {
+      return;
+    }
+    const quoteLines = [];
+    let i = startIndex;
+    while (i < lines.length) {
+      const line = lines[i] ?? "";
+      const lineTrimmed = line.trim();
+      if (!lineTrimmed) {
+        let j = i + 1;
+        while (j < lines.length && !(lines[j] ?? "").trim()) {
+          j++;
+        }
+        if (j < lines.length && (lines[j] ?? "").trim().startsWith(">")) {
+          quoteLines.push("");
+          i = j;
+          continue;
+        }
+        break;
+      }
+      if (!lineTrimmed.startsWith(">")) {
+        break;
+      }
+      quoteLines.push(lineTrimmed.replace(/^>\s?/, ""));
+      i++;
+    }
+    if (quoteLines.length === 0) {
+      return;
+    }
+    const innerBlocks = this.parseBlocks(quoteLines.join(`
+`));
+    return {
+      block: { type: "blockquote", blocks: innerBlocks },
+      nextIndex: i
+    };
+  }
+  parseListBlock(lines, startIndex, trimmed) {
+    if (/^[-*]\s+(.+)$/.test(trimmed)) {
+      return this.collectList(lines, startIndex, "ul");
+    }
+    if (/^\d+\.\s+(.+)$/.test(trimmed)) {
+      return this.collectList(lines, startIndex, "ol");
+    }
+    return;
+  }
+  skipBlankLines(lines, from) {
+    let j = from;
+    while (j < lines.length && !(lines[j] ?? "").trim()) {
+      j++;
+    }
+    return j;
+  }
+  parseNestedChildren(lines, startIndex, baseIndent) {
+    const nestedLines = [];
+    let i = startIndex;
+    while (i < lines.length) {
+      const nestedLine = lines[i] ?? "";
+      const nestedTrimmed = nestedLine.trim();
+      if (!nestedTrimmed) {
+        const j = this.skipBlankLines(lines, i + 1);
+        if (j < lines.length && this.indentLevel(lines[j] ?? "") > baseIndent) {
+          nestedLines.push("");
+          i = j;
+          continue;
+        }
+        break;
+      }
+      if (this.indentLevel(nestedLine) <= baseIndent) {
+        break;
+      }
+      nestedLines.push(nestedLine);
+      i++;
+    }
+    if (nestedLines.length === 0) {
+      return [];
+    }
+    const nonEmpty = nestedLines.filter((l) => l.trim());
+    const minIndent = nonEmpty.length > 0 ? Math.min(...nonEmpty.map((l) => this.indentLevel(l))) : 0;
+    const unindented = nestedLines.map((l) => l.trim() ? l.slice(minIndent) : l);
+    return this.parseBlocks(unindented.join(`
+`));
+  }
+  collectList(lines, startIndex, type) {
+    const baseIndent = this.indentLevel(lines[startIndex] ?? "");
+    const listPattern = type === "ul" ? /^[-*]\s+(.+)$/ : /^\d+\.\s+(.+)$/;
+    const items = [];
+    let i = startIndex;
+    while (i < lines.length) {
+      const line = lines[i] ?? "";
+      const trimmed = line.trim();
+      const indent = this.indentLevel(line);
+      if (!trimmed) {
+        const j = this.skipBlankLines(lines, i + 1);
+        if (j < lines.length && this.indentLevel(lines[j] ?? "") === baseIndent && listPattern.test((lines[j] ?? "").trim())) {
+          i = j;
+          continue;
+        }
+        break;
+      }
+      if (indent < baseIndent) {
+        break;
+      }
+      if (indent === baseIndent) {
+        const match = trimmed.match(listPattern);
+        if (!match?.[1]) {
+          break;
+        }
+        items.push({ text: match[1].trim(), children: [] });
+        i++;
+        continue;
+      }
+      const current = items[items.length - 1];
+      if (!current) {
+        break;
+      }
+      current.children = this.parseNestedChildren(lines, i, baseIndent);
+      const consumed = this.countNestedLines(lines, i, baseIndent);
+      i += consumed;
+    }
+    return { block: { type, items }, nextIndex: i };
+  }
+  countNestedLines(lines, startIndex, baseIndent) {
+    let count = 0;
+    let i = startIndex;
+    while (i < lines.length) {
+      const line = lines[i] ?? "";
+      const trimmed = line.trim();
+      if (!trimmed) {
+        const j = this.skipBlankLines(lines, i + 1);
+        if (j < lines.length && this.indentLevel(lines[j] ?? "") > baseIndent) {
+          count += j - i;
+          i = j;
+          continue;
+        }
+        break;
+      }
+      if (this.indentLevel(line) <= baseIndent) {
+        break;
+      }
+      count++;
+      i++;
+    }
+    return count;
+  }
+  parseTableBlock(lines, startIndex, trimmed) {
+    if (!this.startsTable(trimmed)) {
+      return;
+    }
+    const headers = this.parseTableRow(trimmed);
+    const separator = (lines[startIndex + 1] ?? "").trim();
+    if (!separator.startsWith("|") || !this.isTableSeparator(separator, headers.length)) {
+      return;
+    }
+    const aligns = this.parseTableAligns(separator);
+    const rows = [];
+    let i = startIndex + 2;
+    while (i < lines.length) {
+      const tableLine = (lines[i] ?? "").trim();
+      if (!this.startsTable(tableLine)) {
+        break;
+      }
+      rows.push(this.parseTableRow(tableLine));
+      i++;
+    }
+    return {
+      block: { type: "table", headers, rows, aligns },
+      nextIndex: i
+    };
+  }
+  parseParagraphBlock(lines, startIndex) {
+    const paragraphLines = [];
+    let i = startIndex;
+    while (i < lines.length) {
+      const nextTrimmed = (lines[i] ?? "").trim();
+      if (!nextTrimmed || this.startsStructuredBlock(lines, i, nextTrimmed)) {
+        break;
+      }
+      paragraphLines.push(nextTrimmed);
+      i++;
+    }
+    return {
+      block: {
+        type: "paragraph",
+        text: paragraphLines.join(" ")
+      },
+      nextIndex: i
+    };
+  }
+  startsStructuredBlock(lines, index, trimmed) {
+    return /^(#{1,3})\s+/.test(trimmed) || /^[-*]\s+/.test(trimmed) || /^\d+\.\s+/.test(trimmed) || trimmed.startsWith("```") || trimmed.startsWith(">") || this.isTableStart(lines, index, trimmed);
+  }
+  startsTable(trimmed) {
+    return trimmed.startsWith("|") && trimmed.includes("|");
+  }
+  isTableStart(lines, index, trimmed) {
+    if (!this.startsTable(trimmed)) {
+      return false;
+    }
+    const headers = this.parseTableRow(trimmed);
+    const separator = (lines[index + 1] ?? "").trim();
+    return separator.startsWith("|") && this.isTableSeparator(separator, headers.length);
+  }
+  renderBlocks(blocks) {
+    return map(blocks, (block) => this.renderBlock(block));
+  }
+  renderBlock(block) {
+    if (block.type === "paragraph") {
+      return html10`<p>${this.renderInline(block.text)}</p>`;
+    }
+    if (block.type === "heading") {
+      if (block.level === 1) {
+        return html10`<h1>${this.renderInline(block.text)}</h1>`;
+      }
+      if (block.level === 2) {
+        return html10`<h2>${this.renderInline(block.text)}</h2>`;
+      }
+      return html10`<h3>${this.renderInline(block.text)}</h3>`;
+    }
+    if (block.type === "code") {
+      return html10`<pre><code>${block.code}</code></pre>`;
+    }
+    if (block.type === "ul") {
+      return html10`<ul
+        >${map(block.items, (item) => html10`<li
+              >${this.renderInline(item.text)}${item.children.length ? this.renderBlocks(item.children) : nothing4}</li
+            >`)}</ul
+      >`;
+    }
+    if (block.type === "ol") {
+      return html10`<ol
+        >${map(block.items, (item) => html10`<li
+              >${this.renderInline(item.text)}${item.children.length ? this.renderBlocks(item.children) : nothing4}</li
+            >`)}</ol
+      >`;
+    }
+    if (block.type === "blockquote") {
+      return html10`<blockquote>${this.renderBlocks(block.blocks)}</blockquote>`;
+    }
+    if (block.type === "table") {
+      return html10`
+        <div class="table-wrapper">
+          <table>
+            <thead>
+              <tr>
+                ${map(block.headers, (header, idx) => {
+        const align = block.aligns[idx] ?? "left";
+        return html10`<th style="text-align: ${align}"
+                    >${this.renderInline(header)}</th
+                  >`;
+      })}
+              </tr>
+            </thead>
+            <tbody>
+              ${map(block.rows, (row) => html10`
+                  <tr>
+                    ${map(row, (cell, idx) => {
+        const align = block.aligns[idx] ?? "left";
+        return html10`<td style="text-align: ${align}"
+                        >${this.renderInline(cell)}</td
+                      >`;
+      })}
+                  </tr>
+                `)}
+            </tbody>
+          </table>
+        </div>
+      `;
+    }
+    return nothing4;
+  }
+  renderMarkdown(source) {
+    const blocks = this.parseBlocks(source.trim());
+    return html10`<div class="markdown">${this.renderBlocks(blocks)}</div>`;
+  }
+  render() {
+    if (this.content) {
+      return this.renderMarkdown(this.content);
+    }
+    return html10`
+      <slot></slot>
+    `;
+  }
+}
+__legacyDecorateClassTS([
+  property10({ type: String })
+], AiMarkdown.prototype, "content", undefined);
+__legacyDecorateClassTS([
+  property10({ reflect: true })
+], AiMarkdown.prototype, "tone", undefined);
+__legacyDecorateClassTS([
+  property10({ type: Boolean, reflect: true })
+], AiMarkdown.prototype, "trusted", undefined);
+AiMarkdown = __legacyDecorateClassTS([
+  customElement10("ai-markdown")
+], AiMarkdown);
+// src/visual/badge.ts
+import { LitElement as LitElement11, css as css11, html as html11 } from "lit";
+import { customElement as customElement11, property as property11 } from "lit/decorators.js";
+class AiBadge extends LitElement11 {
+  constructor() {
+    super(...arguments);
+    this.tone = "neutral";
+    this.size = "md";
+    this.dot = false;
+  }
+  static styles = css11`
+    :host {
+      box-sizing: border-box;
+      display: inline-flex;
+      align-items: center;
+      gap: var(--inline-gap, 4px);
+      margin: 0;
+      padding: var(--_padding, 3px 8px);
+      font-size: var(--font-size, 0.75rem);
+      font-weight: var(--font-weight, 600);
+      line-height: 1;
+      color: var(--text-color, inherit);
+      background: var(--background-color, rgba(128, 128, 128, 0.1));
+      border: 1px solid var(--border-color, transparent);
+      border-radius: var(--border-radius, 999px);
+      white-space: nowrap;
+    }
+
+    :host([size="sm"]) {
+      --_padding: 2px 6px;
+    }
+
+    :host([size="md"]) {
+      --_padding: 3px 8px;
+    }
+
+    .dot {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: var(--dot-color, var(--text-color, inherit));
+      flex-shrink: 0;
+    }
+
+    *,
+    *::before,
+    *::after {
+      box-sizing: inherit;
+    }
+  `;
+  render() {
+    return html11`
+      ${this.dot ? html11`
+              <span class="dot" part="dot"></span>
+            ` : ""}
+      <slot></slot>
+    `;
+  }
+  updated() {
+    const colors = this.getToneColors();
+    this.style.setProperty("--background-color", `var(--background-color, ${colors.bg})`);
+    this.style.setProperty("--text-color", `var(--text-color, ${colors.text})`);
+    this.style.setProperty("--border-color", `var(--border-color, ${colors.border})`);
+    this.style.setProperty("--dot-color", `var(--dot-color, ${colors.text})`);
+  }
+  getToneColors() {
+    switch (this.tone) {
+      case "accent":
+        return {
+          bg: "rgba(74, 144, 217, 0.12)",
+          text: "var(--ai-color-accent, #4a90d9)",
+          border: "rgba(74, 144, 217, 0.2)"
+        };
+      case "success":
+        return {
+          bg: "rgba(46, 160, 67, 0.12)",
+          text: "var(--ai-color-success, #2ea043)",
+          border: "rgba(46, 160, 67, 0.2)"
+        };
+      case "warning":
+        return {
+          bg: "rgba(210, 153, 34, 0.12)",
+          text: "var(--ai-color-warning, #d29922)",
+          border: "rgba(210, 153, 34, 0.2)"
+        };
+      case "error":
+        return {
+          bg: "rgba(227, 62, 51, 0.12)",
+          text: "var(--ai-color-error, #e33e33)",
+          border: "rgba(227, 62, 51, 0.2)"
+        };
+      case "info":
+        return {
+          bg: "rgba(80, 160, 220, 0.12)",
+          text: "var(--ai-color-info, #50a0dc)",
+          border: "rgba(80, 160, 220, 0.2)"
+        };
+      default:
+        return {
+          bg: "rgba(128, 128, 128, 0.1)",
+          text: "inherit",
+          border: "rgba(128, 128, 128, 0.15)"
+        };
+    }
+  }
+}
+__legacyDecorateClassTS([
+  property11({ reflect: true })
+], AiBadge.prototype, "tone", undefined);
+__legacyDecorateClassTS([
+  property11({ reflect: true })
+], AiBadge.prototype, "size", undefined);
+__legacyDecorateClassTS([
+  property11({ reflect: true, type: Boolean })
+], AiBadge.prototype, "dot", undefined);
+AiBadge = __legacyDecorateClassTS([
+  customElement11("ai-badge")
+], AiBadge);
+// src/visual/status.ts
+import { LitElement as LitElement12, css as css12, html as html12 } from "lit";
+import { customElement as customElement12, property as property12 } from "lit/decorators.js";
+var SIZE_MAP2 = {
+  xs: "6px",
+  sm: "8px",
+  md: "12px",
+  lg: "16px"
+};
+
+class AiStatus extends LitElement12 {
+  constructor() {
+    super(...arguments);
+    this.state = "unknown";
+    this.size = "md";
+    this.variant = "dot";
+  }
+  static styles = css12`
+    :host {
+      box-sizing: border-box;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0;
+      padding: 0;
+      color: var(--color, var(--ai-color-text-muted, rgba(128, 128, 128, 0.7)));
+    }
+
+    .dot {
+      width: var(--size, 12px);
+      height: var(--size, 12px);
+      border-radius: 50%;
+      background: var(--color, var(--ai-color-text-muted, rgba(128, 128, 128, 0.7)));
+      flex-shrink: 0;
+    }
+
+    :host([state="running"]) .dot {
+      animation: pulse var(--pulse-duration, 1.5s) ease-in-out infinite;
+    }
+
+    @keyframes pulse {
+      0%,
+      100% {
+        transform: scale(1);
+        opacity: 1;
+      }
+      50% {
+        transform: scale(1.2);
+        opacity: 0.7;
+      }
+    }
+
+    .icon-wrapper {
+      width: var(--size, 12px);
+      height: var(--size, 12px);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .fallback-icon {
+      width: 100%;
+      height: 100%;
+    }
+
+    *,
+    *::before,
+    *::after {
+      box-sizing: inherit;
+    }
+  `;
+  render() {
+    if (this.variant === "icon") {
+      return html12`
+        <span class="icon-wrapper" part="icon">
+          <slot>
+            <svg class="fallback-icon" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+              ${this.getFallbackIconPath()}
+            </svg>
+          </slot>
+        </span>
+      `;
+    }
+    return html12`
+      <span class="dot" part="dot"></span>
+    `;
+  }
+  updated() {
+    const size = SIZE_MAP2[this.size] ?? "12px";
+    this.style.setProperty("--size", `var(--size, ${size})`);
+    const stateColor = this.getStateColor();
+    this.style.setProperty("--color", `var(--color, ${stateColor})`);
+  }
+  getStateColor() {
+    switch (this.state) {
+      case "idle":
+        return "var(--idle-color, var(--ai-color-text-muted, rgba(128, 128, 128, 0.4)))";
+      case "running":
+        return "var(--running-color, var(--ai-color-accent, #4a90d9))";
+      case "success":
+        return "var(--success-color, var(--ai-color-success, #2ea043))";
+      case "error":
+        return "var(--error-color, var(--ai-color-error, #e33e33))";
+      case "cancelled":
+        return "var(--cancelled-color, var(--ai-color-text-muted, rgba(128, 128, 128, 0.5)))";
+      default:
+        return "var(--ai-color-text-muted, rgba(128, 128, 128, 0.7))";
+    }
+  }
+  getFallbackIconPath() {
+    switch (this.state) {
+      case "success":
+        return html12`
+          <path
+            d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
+          />
+        `.strings.join("");
+      case "error":
+        return html12`
+          <path
+            d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"
+          />
+        `.strings.join("");
+      case "running":
+        return html12`
+          <path
+            d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9-3.25v2.5h2.5a.75.75 0 010 1.5H9v2.5a.75.75 0 01-1.5 0v-2.5H5a.75.75 0 010-1.5h2.5v-2.5a.75.75 0 011.5 0z"
+          />
+        `.strings.join("");
+      default:
+        return html12`
+          <circle cx="8" cy="8" r="4" />
+        `.strings.join("");
+    }
+  }
+}
+__legacyDecorateClassTS([
+  property12({ reflect: true })
+], AiStatus.prototype, "state", undefined);
+__legacyDecorateClassTS([
+  property12({ reflect: true })
+], AiStatus.prototype, "size", undefined);
+__legacyDecorateClassTS([
+  property12({ reflect: true })
+], AiStatus.prototype, "variant", undefined);
+AiStatus = __legacyDecorateClassTS([
+  customElement12("ai-status")
+], AiStatus);
+// src/visual/avatar.ts
+import { LitElement as LitElement13, css as css13, html as html13 } from "lit";
+import { customElement as customElement13, property as property13 } from "lit/decorators.js";
+var SIZE_MAP3 = {
+  sm: "1.5rem",
+  md: "2rem",
+  lg: "2.5rem"
+};
+var FONT_SIZE_MAP = {
+  sm: "0.625rem",
+  md: "0.75rem",
+  lg: "0.875rem"
+};
+
+class AiAvatar extends LitElement13 {
+  constructor() {
+    super(...arguments);
+    this.src = "";
+    this.name = "";
+    this.size = "md";
+    this.tone = "neutral";
+  }
+  static styles = css13`
+    :host {
+      box-sizing: border-box;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--size, 2rem);
+      height: var(--size, 2rem);
+      border-radius: var(--border-radius, 50%);
+      background: var(--background-color, rgba(128, 128, 128, 0.15));
+      color: var(--text-color, inherit);
+      border: 1px solid var(--border-color, transparent);
+      overflow: hidden;
+      flex-shrink: 0;
+      margin: 0;
+      padding: 0;
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+
+    .initials {
+      font-size: var(--font-size, 0.75rem);
+      font-weight: var(--font-weight, 700);
+      line-height: 1;
+      text-transform: uppercase;
+      letter-spacing: 0.02em;
+      user-select: none;
+    }
+
+    *,
+    *::before,
+    *::after {
+      box-sizing: inherit;
+    }
+  `;
+  render() {
+    if (this.src) {
+      return html13`<img src="${this.src}" alt="${this.name || ""}" part="image" />`;
+    }
+    const initials = this.getInitials();
+    if (initials) {
+      return html13`<span class="initials" part="initials">${initials}</span>`;
+    }
+    return html13`
+      <slot></slot>
+    `;
+  }
+  updated() {
+    const size = SIZE_MAP3[this.size] ?? "2rem";
+    const fontSize = FONT_SIZE_MAP[this.size] ?? "0.75rem";
+    this.style.setProperty("--size", `var(--size, ${size})`);
+    this.style.setProperty("--font-size", `var(--font-size, ${fontSize})`);
+    const toneColors = this.getToneColors();
+    this.style.setProperty("--background-color", `var(--background-color, ${toneColors.bg})`);
+    this.style.setProperty("--text-color", `var(--text-color, ${toneColors.text})`);
+    this.style.setProperty("--border-color", `var(--border-color, ${toneColors.border})`);
+  }
+  getInitials() {
+    if (!this.name) {
+      return "";
+    }
+    const words = this.name.trim().split(/\s+/);
+    if (words.length >= 2) {
+      const first = words[0]?.[0] ?? "";
+      const last = words[words.length - 1]?.[0] ?? "";
+      return (first + last).toUpperCase();
+    }
+    return (words[0]?.[0] ?? "").toUpperCase();
+  }
+  getToneColors() {
+    switch (this.tone) {
+      case "accent":
+        return {
+          bg: "rgba(74, 144, 217, 0.15)",
+          text: "var(--ai-color-accent, #4a90d9)",
+          border: "rgba(74, 144, 217, 0.25)"
+        };
+      case "user":
+        return {
+          bg: "rgba(74, 144, 217, 0.12)",
+          text: "var(--ai-color-accent, #4a90d9)",
+          border: "rgba(74, 144, 217, 0.2)"
+        };
+      case "assistant":
+        return {
+          bg: "rgba(128, 128, 128, 0.12)",
+          text: "var(--ai-color-text-muted, rgba(128, 128, 128, 0.8))",
+          border: "rgba(128, 128, 128, 0.2)"
+        };
+      case "agent":
+        return {
+          bg: "rgba(46, 160, 67, 0.12)",
+          text: "var(--ai-color-success, #2ea043)",
+          border: "rgba(46, 160, 67, 0.2)"
+        };
+      default:
+        return {
+          bg: "rgba(128, 128, 128, 0.15)",
+          text: "inherit",
+          border: "transparent"
+        };
+    }
+  }
+}
+__legacyDecorateClassTS([
+  property13({ reflect: true })
+], AiAvatar.prototype, "src", undefined);
+__legacyDecorateClassTS([
+  property13({ reflect: true })
+], AiAvatar.prototype, "name", undefined);
+__legacyDecorateClassTS([
+  property13({ reflect: true })
+], AiAvatar.prototype, "size", undefined);
+__legacyDecorateClassTS([
+  property13({ reflect: true })
+], AiAvatar.prototype, "tone", undefined);
+AiAvatar = __legacyDecorateClassTS([
+  customElement13("ai-avatar")
+], AiAvatar);
+// src/visual/icon.ts
+import { LitElement as LitElement14, css as css14, html as html14 } from "lit";
+import { customElement as customElement14, property as property14 } from "lit/decorators.js";
+var SIZE_MAP4 = {
+  xs: "12px",
+  sm: "14px",
+  md: "16px",
+  lg: "20px"
+};
+
+class AiIcon extends LitElement14 {
+  constructor() {
+    super(...arguments);
+    this.size = "md";
+    this.tone = "default";
+  }
+  static styles = css14`
+    :host {
+      box-sizing: border-box;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--size, 16px);
+      height: var(--size, 16px);
+      color: var(--color, inherit);
+      margin: 0;
+      padding: 0;
+    }
+
+    ::slotted(*) {
+      width: 100%;
+      height: 100%;
+    }
+
+    ::slotted(svg) {
+      fill: currentColor;
+    }
+
+    *,
+    *::before,
+    *::after {
+      box-sizing: inherit;
+    }
+  `;
+  render() {
+    return html14`
+      <slot></slot>
+    `;
+  }
+  updated() {
+    const size = SIZE_MAP4[this.size] ?? "16px";
+    this.style.setProperty("--size", `var(--size, ${size})`);
+    const toneColor = this.getToneColor();
+    this.style.setProperty("--color", `var(--color, ${toneColor})`);
+  }
+  getToneColor() {
+    switch (this.tone) {
+      case "muted":
+        return "var(--ai-color-text-muted, rgba(128, 128, 128, 0.7))";
+      case "accent":
+        return "var(--ai-color-accent, #4a90d9)";
+      case "success":
+        return "var(--ai-color-success, #2ea043)";
+      case "warning":
+        return "var(--ai-color-warning, #d29922)";
+      case "error":
+        return "var(--ai-color-error, #e33e33)";
+      default:
+        return "inherit";
+    }
+  }
+}
+__legacyDecorateClassTS([
+  property14({ reflect: true })
+], AiIcon.prototype, "size", undefined);
+__legacyDecorateClassTS([
+  property14({ reflect: true })
+], AiIcon.prototype, "tone", undefined);
+AiIcon = __legacyDecorateClassTS([
+  customElement14("ai-icon")
+], AiIcon);
+// src/visual/divider.ts
+import { LitElement as LitElement15, css as css15, html as html15 } from "lit";
+import { customElement as customElement15, property as property15 } from "lit/decorators.js";
+var TONE_OPACITY = {
+  subtle: 0.08,
+  default: 0.16,
+  strong: 0.32
+};
+
+class AiDivider extends LitElement15 {
+  constructor() {
+    super(...arguments);
+    this.orientation = "horizontal";
+    this.tone = "default";
+  }
+  static styles = css15`
+    :host {
+      box-sizing: border-box;
+      display: flex;
+      margin: 0;
+      padding: 0;
+      color: var(--text-color, inherit);
+    }
+
+    :host([orientation="horizontal"]) {
+      flex-direction: row;
+      align-items: center;
+      width: 100%;
+    }
+
+    :host([orientation="vertical"]) {
+      flex-direction: column;
+      justify-content: center;
+      height: 100%;
+      align-self: stretch;
+    }
+
+    .line {
+      flex: 1;
+      background: var(--line-color, rgba(128, 128, 128, 0.16));
+    }
+
+    :host([orientation="horizontal"]) .line {
+      height: var(--line-width, 1px);
+    }
+
+    :host([orientation="vertical"]) .line {
+      width: var(--line-width, 1px);
+    }
+
+    ::slotted(*) {
+      padding: 0 var(--label-gap, 0.5rem);
+      white-space: nowrap;
+    }
+
+    :host([orientation="vertical"]) ::slotted(*) {
+      padding: var(--label-gap, 0.5rem) 0;
+    }
+
+    *,
+    *::before,
+    *::after {
+      box-sizing: inherit;
+    }
+  `;
+  render() {
+    return html15`
+      <span class="line" part="line-before"></span>
+      <slot></slot>
+      <span class="line" part="line-after"></span>
+    `;
+  }
+  updated() {
+    const opacity = TONE_OPACITY[this.tone] ?? 0.16;
+    this.style.setProperty("--line-color", `var(--line-color, rgba(128, 128, 128, ${opacity}))`);
+  }
+}
+__legacyDecorateClassTS([
+  property15({ reflect: true })
+], AiDivider.prototype, "orientation", undefined);
+__legacyDecorateClassTS([
+  property15({ reflect: true })
+], AiDivider.prototype, "tone", undefined);
+AiDivider = __legacyDecorateClassTS([
+  customElement15("ai-divider")
+], AiDivider);
+// src/native-styles.ts
+import { css as css16 } from "lit";
+var nativeStyles = css16`
+  pre {
+    margin: 0;
+    max-height: 240px;
+    overflow: auto;
+    font-family: var(--ai-font-family-mono, monospace);
+    font-size: var(--ai-font-size-caption, 0.75rem);
+    white-space: pre-wrap;
+  }
+
+  a {
+    color: var(--ai-color-accent, #0066cc);
+    text-decoration: underline;
+  }
+
+  time {
+    font-size: inherit;
+  }
+
+  button {
+    cursor: pointer;
+  }
+`;
+export {
+  normalizeToolOutput,
+  getToolTone,
+  HasSlotController,
+  AiToolResult,
+  AiToolCall,
+  AiThinking,
+  AiText,
+  AiSurface,
+  AiStatus,
+  AiStack,
+  AiMessage,
+  AiMarkdown,
+  AiIcon,
+  AiEvent,
+  AiDivider,
+  AiConversation,
+  AiBadge,
+  AiAvatar
+};