@happyvertical/smrt-chat 0.55.9 → 0.55.10

package/dist/svelte/components/assistant/AssistantDock.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AssistantDock.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/assistant/AssistantDock.svelte.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"AssistantDock.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/assistant/AssistantDock.svelte.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EACV,wBAAwB,EACxB,uBAAuB,EACvB,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,KAAK,EACV,uBAAuB,EACvB,mBAAmB,EACnB,uBAAuB,EACvB,mBAAmB,EACpB,MAAM,8BAA8B,CAAC;AAGtC,OAAO,EAAE,KAAK,OAAO,EAAiB,MAAM,QAAQ,CAAC;AACrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAQzE,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,+BAA+B,CAAC;AACnF,OAAO,KAAK,EAEV,gBAAgB,EAChB,kBAAkB,EACnB,MAAM,0BAA0B,CAAC;AAElC,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,yBAAyB,EAC9B,KAAK,yBAAyB,EAE/B,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,KAAK,qBAAqB,EAC1B,KAAK,sBAAsB,EAC3B,KAAK,uBAAuB,EAC5B,KAAK,YAAY,EAElB,MAAM,8CAA8C,CAAC;AAGtD,MAAM,WAAW,KAAK;IACpB,kEAAkE;IAClE,SAAS,EAAE,kBAAkB,CAAC;IAC9B;;qBAEiB;IACjB,QAAQ,EAAE,mBAAmB,CAAC;IAC9B;;2EAEuE;IACvE,WAAW,CAAC,EAAE,eAAe,GAAG,QAAQ,CAAC;IACzC;qEACiE;IACjE,YAAY,CAAC,EAAE,qBAAqB,CAAC;IACrC;;;;;;;;gEAQ4D;IAC5D,QAAQ,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACjC,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACnC;;;;;;;;kBAQc;IACd,aAAa,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IACtC;;;;;;;;;;;qCAWiC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;0EAIsE;IACtE,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC;IACvC;;;yEAGqE;IACrE,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC7D;2DACuD;IACvD,eAAe,CAAC,EAAE,CAChB,OAAO,EAAE,wBAAwB,EACjC,MAAM,EAAE,uBAAuB,KAC5B,IAAI,CAAC;IACV;;2DAEuD;IACvD,eAAe,CAAC,EAAE,CAChB,OAAO,EAAE,wBAAwB,EACjC,OAAO,EAAE,sBAAsB,KAC5B,IAAI,CAAC;IACV;;;0DAGsD;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;qCACiC;IACjC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;2EAGuE;IACvE,SAAS,CAAC,EAAE,yBAAyB,CAAC;IACtC;wCACoC;IACpC,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,yBAAyB,CAAC;IAC5E;0EACsE;IACtE,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IAC7C;wEACoE;IACpE,MAAM,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACpC;0EACsE;IACtE,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,OAAO,CAAC;IAC1D,sEAAsE;IACtE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;uCACmC;IACnC,KAAK,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3C,+DAA+D;IAC/D,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD;;yCAEqC;IACrC,aAAa,CAAC,EAAE,6BAA6B,CAAC;IAC9C;+EAC2E;IAC3E,SAAS,CAAC,EAAE,uBAAuB,GAAG,IAAI,CAAC;IAC3C;;kCAE8B;IAC9B,UAAU,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACxC;2DACuD;IACvD,aAAa,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IACtC;8EAC0E;IAC1E,gBAAgB,CAAC,EAAE,uBAAuB,GAAG,IAAI,CAAC;IAClD,4EAA4E;IAC5E,YAAY,CAAC,EAAE,mBAAmB,CAAC;IACnC,gFAAgF;IAChF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mEAAmE;IACnE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;kCAC8B;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAmsBD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/svelte/components/assistant/FloatingAssistant.svelte

@@ -0,0 +1,309 @@
+<script lang="ts">
+/**
+ * A permanently mounted AssistantDock with a compact launcher.
+ *
+ * The wrapper intentionally owns only presentation. AssistantDock remains
+ * the one controller, conversation, and confirmation authority. A character
+ * is an optional Svelte snippet so a host can use a still image, CSS art, or
+ * an animation package without making any of them a chat dependency.
+ */
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
+import { type Snippet, tick } from 'svelte';
+import type { Attachment } from 'svelte/attachments';
+import type { AssistantStatus } from '../../../assistant-turn-events.js';
+import { M } from '../../i18n.js';
+import AssistantDock, {
+  type Props as AssistantDockProps,
+} from './AssistantDock.svelte';
+import type {
+  AssistantDockController,
+  AssistantRun,
+} from './create-assistant-dock-controller.svelte.js';
+
+const { t } = useI18n();
+
+export interface FloatingAssistantPresentationState {
+  expanded: boolean;
+  status: AssistantStatus;
+  run: AssistantRun | null;
+}
+
+export interface Props extends AssistantDockProps {
+  /** Optional host-owned visual; it receives no media or animation contract. */
+  character?: Snippet<[FloatingAssistantPresentationState]>;
+  /** Accessible launcher text. */
+  launcherLabel?: string;
+  /** Accessible panel title. */
+  panelLabel?: string;
+  /** Starts expanded; the bindable value can also be controlled by the host. */
+  expanded?: boolean;
+  /** Fixed viewport corner used by the launcher and its conversation panel. */
+  placement?: 'bottom-left' | 'bottom-right';
+  /** Hides empty controls-only chrome while preserving active runs and decisions. */
+  hideIdleControls?: boolean;
+}
+
+let {
+  character,
+  launcherLabel = 'Open assistant',
+  panelLabel = 'Assistant',
+  expanded = $bindable(false),
+  placement = 'bottom-right',
+  hideIdleControls = false,
+  visible = true,
+  presentation = 'full',
+  onstatus,
+  onrun,
+  onattentionchange,
+  oncontroller,
+  ...dockProps
+}: Props = $props();
+
+let status = $state<AssistantStatus>({ state: 'idle', label: null });
+let run = $state<AssistantRun | null>(null);
+let attentionRequired = $state(false);
+let dockController = $state.raw<AssistantDockController | null>(null);
+let launcher: HTMLButtonElement | undefined = $state();
+let panel: HTMLElement | undefined = $state();
+
+// Button forwards Svelte attachments to its native button; retain that DOM
+// reference for collapse focus without introducing a second control.
+const captureLauncher: Attachment<HTMLButtonElement> = (element) => {
+  launcher = element;
+  return () => {
+    launcher = undefined;
+  };
+};
+
+const floatingAssistantId = $props.id();
+const panelId = `floating-assistant-${floatingAssistantId}`;
+const hasActionableRun = $derived(
+  run?.state === 'running' ||
+    run?.state === 'paused' ||
+    run?.state === 'waiting',
+);
+const hasActionableStatus = $derived(
+  status.state === 'working' || status.state === 'error',
+);
+const hasControllerError = $derived(!!dockController?.error);
+const panelExpanded = $derived(
+  visible &&
+    (expanded || attentionRequired) &&
+    (!hideIdleControls ||
+      presentation === 'full' ||
+      attentionRequired ||
+      hasActionableRun ||
+      hasActionableStatus ||
+      hasControllerError),
+);
+const launcherVisible = $derived(
+  !hideIdleControls ||
+    presentation === 'full' ||
+    attentionRequired ||
+    hasActionableRun ||
+    hasActionableStatus ||
+    hasControllerError,
+);
+const presentationState = $derived({ expanded: panelExpanded, status, run });
+
+function open() {
+  expanded = true;
+}
+
+function collapse() {
+  if (!expanded || attentionRequired) return;
+  const focusWasInPanel =
+    typeof document !== 'undefined' &&
+    !!panel?.contains(document.activeElement);
+  expanded = false;
+  if (focusWasInPanel) void tick().then(() => launcher?.focus());
+}
+
+function handleStatus(next: AssistantStatus) {
+  status = next;
+  onstatus?.(next);
+}
+
+function handleRun(next: AssistantRun | null) {
+  run = next;
+  // A browser-tool confirmation is authoritative only in the dock. Reveal
+  // that existing UI rather than creating another approval path here.
+  if (next?.waitingFor?.kind === 'confirm') open();
+  onrun?.(next);
+}
+
+function handleAttentionChange(required: boolean) {
+  // Previewed data actions and pending browser-tool calls must remain
+  // reachable. This changes visibility only; it never confirms an action.
+  attentionRequired = required;
+  if (required) open();
+  onattentionchange?.(required);
+}
+
+function handleController(next: AssistantDockController) {
+  dockController = next;
+  oncontroller?.(next);
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key !== 'Escape' || !visible || !expanded) return;
+  event.preventDefault();
+  collapse();
+}
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<div
+  class="floating-assistant"
+  class:bottom-left={placement === 'bottom-left'}
+  data-expanded={panelExpanded || undefined}
+  hidden={!visible}
+  inert={!visible}
+  aria-hidden={!visible}
+>
+  {#if launcherVisible}
+    <Button
+      {@attach captureLauncher}
+      variant="ghost"
+      type="button"
+      class="floating-assistant-launcher"
+      aria-expanded={panelExpanded}
+      aria-controls={panelId}
+      onclick={open}
+    >
+      {#if character}
+        <span class="floating-assistant-character" aria-hidden="true">
+          {@render character(presentationState)}
+        </span>
+      {/if}
+      <span>{launcherLabel}</span>
+    </Button>
+  {/if}
+
+  <section
+    bind:this={panel}
+    id={panelId}
+    class="floating-assistant-panel"
+    aria-label={panelLabel}
+    aria-hidden={!panelExpanded}
+    inert={!panelExpanded}
+  >
+    <Button
+      variant="ghost"
+      type="button"
+      class="floating-assistant-collapse"
+      aria-label={t(M['chat.floating_assistant.collapse'])}
+      onclick={collapse}
+    >
+      {t(M['chat.floating_assistant.close'])}
+    </Button>
+    <AssistantDock
+      {...dockProps}
+      {presentation}
+      visible={panelExpanded}
+      oncontroller={handleController}
+      onstatus={handleStatus}
+      onrun={handleRun}
+      onattentionchange={handleAttentionChange}
+    />
+  </section>
+</div>
+
+<style>
+  .floating-assistant {
+    position: fixed;
+    z-index: var(--smrt-z-index-overlay, 1200);
+    right: max(1rem, env(safe-area-inset-right));
+    bottom: max(1rem, env(safe-area-inset-bottom));
+    display: grid;
+    justify-items: end;
+    gap: 0.75rem;
+  }
+  .floating-assistant.bottom-left { right: auto; left: max(1rem, env(safe-area-inset-left)); justify-items: start; }
+
+  .floating-assistant[hidden] {
+    display: none;
+  }
+
+  .floating-assistant :global(.floating-assistant-launcher),
+  .floating-assistant :global(.floating-assistant-collapse) {
+    border: 1px solid var(--smrt-color-outline, currentColor);
+    border-radius: var(--smrt-radius-full, 9999px);
+    background: var(--smrt-color-surface, Canvas);
+    color: var(--smrt-color-on-surface, CanvasText);
+    font: inherit;
+  }
+
+  .floating-assistant :global(.floating-assistant-launcher) {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-block-size: 2.75rem;
+    padding: 0.5rem 0.875rem;
+    box-shadow: var(
+      --smrt-elevation-4,
+      0 0.5rem 1.5rem color-mix(in srgb, CanvasText 18%, transparent)
+    );
+  }
+
+  .floating-assistant-character {
+    display: grid;
+    place-items: center;
+    inline-size: 1.75rem;
+    block-size: 1.75rem;
+    overflow: hidden;
+    border-radius: var(--smrt-radius-full, 9999px);
+  }
+
+  .floating-assistant-panel {
+    box-sizing: border-box;
+    display: block;
+    inline-size: min(28rem, calc(100vw - 2rem));
+    max-block-size: min(42rem, calc(100dvh - 6rem));
+    overflow: auto;
+    padding: 0.75rem;
+    border: 1px solid var(--smrt-color-outline, currentColor);
+    border-radius: 1rem;
+    background: var(--smrt-color-surface, Canvas);
+    color: var(--smrt-color-on-surface, CanvasText);
+    box-shadow: var(
+      --smrt-elevation-5,
+      0 1rem 2rem color-mix(in srgb, CanvasText 24%, transparent)
+    );
+    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
+  }
+
+  .floating-assistant:not([data-expanded]) .floating-assistant-panel {
+    visibility: hidden;
+    pointer-events: none;
+    opacity: 0;
+    transform: translateY(0.5rem);
+  }
+
+  .floating-assistant :global(.floating-assistant-collapse) {
+    float: inline-end;
+    min-block-size: 2rem;
+    padding-inline: 0.625rem;
+  }
+
+  @media (max-width: 30rem) {
+    .floating-assistant {
+      right: max(0.5rem, env(safe-area-inset-right));
+      bottom: max(0.5rem, env(safe-area-inset-bottom));
+    }
+    .floating-assistant.bottom-left { right: auto; left: max(0.5rem, env(safe-area-inset-left)); }
+
+    .floating-assistant-panel {
+      inline-size: calc(100vw - 1rem);
+      max-block-size: calc(100dvh - 4.5rem);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .floating-assistant-panel {
+      transition: none;
+    }
+  }
+</style>

package/dist/svelte/components/assistant/FloatingAssistant.svelte.d.ts

@@ -0,0 +1,27 @@
+import { type Snippet } from 'svelte';
+import type { AssistantStatus } from '../../../assistant-turn-events.js';
+import { type Props as AssistantDockProps } from './AssistantDock.svelte';
+import type { AssistantRun } from './create-assistant-dock-controller.svelte.js';
+export interface FloatingAssistantPresentationState {
+    expanded: boolean;
+    status: AssistantStatus;
+    run: AssistantRun | null;
+}
+export interface Props extends AssistantDockProps {
+    /** Optional host-owned visual; it receives no media or animation contract. */
+    character?: Snippet<[FloatingAssistantPresentationState]>;
+    /** Accessible launcher text. */
+    launcherLabel?: string;
+    /** Accessible panel title. */
+    panelLabel?: string;
+    /** Starts expanded; the bindable value can also be controlled by the host. */
+    expanded?: boolean;
+    /** Fixed viewport corner used by the launcher and its conversation panel. */
+    placement?: 'bottom-left' | 'bottom-right';
+    /** Hides empty controls-only chrome while preserving active runs and decisions. */
+    hideIdleControls?: boolean;
+}
+declare const FloatingAssistant: import("svelte").Component<Props, {}, "expanded">;
+type FloatingAssistant = ReturnType<typeof FloatingAssistant>;
+export default FloatingAssistant;
+//# sourceMappingURL=FloatingAssistant.svelte.d.ts.map

package/dist/svelte/components/assistant/FloatingAssistant.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingAssistant.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/assistant/FloatingAssistant.svelte.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,KAAK,OAAO,EAAQ,MAAM,QAAQ,CAAC;AAE5C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAEzE,OAAsB,EACpB,KAAK,KAAK,IAAI,kBAAkB,EACjC,MAAM,wBAAwB,CAAC;AAChC,OAAO,KAAK,EAEV,YAAY,EACb,MAAM,8CAA8C,CAAC;AAGtD,MAAM,WAAW,kCAAkC;IACjD,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,eAAe,CAAC;IACxB,GAAG,EAAE,YAAY,GAAG,IAAI,CAAC;CAC1B;AAED,MAAM,WAAW,KAAM,SAAQ,kBAAkB;IAC/C,8EAA8E;IAC9E,SAAS,CAAC,EAAE,OAAO,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC;IAC1D,gCAAgC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,8BAA8B;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6EAA6E;IAC7E,SAAS,CAAC,EAAE,aAAa,GAAG,cAAc,CAAC;IAC3C,mFAAmF;IACnF,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAuJD,QAAA,MAAM,iBAAiB,mDAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/svelte/components/assistant/captions/CaptionOverlay.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
+import { type Snippet, setContext } from 'svelte';
+import { M } from '../../../i18n.js';
+import { CAPTION_OVERLAY } from './caption-overlay-context.js';
+
+export interface Props {
+  /** Caption components sharing this viewport-bottom group, in reading order. */
+  children: Snippet;
+  /** Localized accessible name for the caption group. */
+  label?: string;
+}
+
+let { children, label = 'Captions' }: Props = $props();
+const { t } = useI18n();
+setContext(CAPTION_OVERLAY, true);
+let group: HTMLElement;
+let viewport: HTMLDivElement;
+let content: HTMLDivElement;
+let overflowing = $state(false);
+let atStart = $state(true);
+let atEnd = $state(false);
+
+function updatePosition() {
+  atStart = viewport.scrollTop <= 0;
+  atEnd =
+    Math.ceil(viewport.scrollTop + viewport.clientHeight) >=
+    viewport.scrollHeight;
+}
+
+function scroll(direction: number) {
+  viewport.scrollBy({
+    top: direction * viewport.clientHeight,
+    behavior: 'instant',
+  });
+  updatePosition();
+}
+
+$effect(() => {
+  // Observe only this owned group. Compare against the group's entire budget,
+  // not the viewport reduced by the buttons, so controls disappear when text fits.
+  const observer = new ResizeObserver(() => {
+    overflowing = content.scrollHeight > group.clientHeight;
+    updatePosition();
+  });
+  observer.observe(group);
+  observer.observe(viewport);
+  observer.observe(content);
+  return () => observer.disconnect();
+});
+</script>
+
+<section bind:this={group} class="caption-overlay" aria-label={label}>
+  <div bind:this={viewport} class="caption-overlay-viewport" onscroll={updatePosition}>
+    <div bind:this={content} class="caption-overlay-content">
+      {@render children()}
+    </div>
+  </div>
+  {#if overflowing}
+    <div class="caption-overlay-controls">
+      <Button size="sm" disabled={atStart} onclick={() => scroll(-1)}>{t(M['chat.caption_overlay.scroll_up'])}</Button>
+      <Button size="sm" disabled={atEnd} onclick={() => scroll(1)}>{t(M['chat.caption_overlay.scroll_down'])}</Button>
+    </div>
+  {/if}
+</section>
+
+<style>
+  .caption-overlay {
+    position: fixed;
+    z-index: var(--smrt-z-index-sticky, 1100);
+    inset-inline-start: max(var(--smrt-spacing-4, 1rem), env(safe-area-inset-left));
+    inset-inline-end: max(var(--smrt-spacing-4, 1rem), env(safe-area-inset-right));
+    inset-block-end: max(var(--smrt-spacing-4, 1rem), env(safe-area-inset-bottom));
+    box-sizing: border-box;
+    display: grid;
+    grid-template-rows: minmax(0, 1fr) auto;
+    max-inline-size: 42rem;
+    max-block-size: min(50dvh, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 2 * var(--smrt-spacing-4, 1rem)));
+    margin-inline: auto;
+    overflow: hidden;
+  }
+
+  .caption-overlay:not(:has(.caption-overlay-content > *)) { display: none; }
+
+  .caption-overlay-viewport {
+    min-block-size: 0;
+    overflow: auto;
+    overscroll-behavior: contain;
+    scroll-behavior: auto;
+  }
+
+  .caption-overlay-content {
+    display: grid;
+    gap: var(--smrt-spacing-3, .75rem);
+  }
+
+  .caption-overlay-controls {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--smrt-spacing-3, .75rem);
+    padding-block-start: var(--smrt-spacing-2, .5rem);
+    background: var(--smrt-color-surface, Canvas);
+  }
+</style>

package/dist/svelte/components/assistant/captions/CaptionOverlay.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type Snippet } from 'svelte';
+export interface Props {
+    /** Caption components sharing this viewport-bottom group, in reading order. */
+    children: Snippet;
+    /** Localized accessible name for the caption group. */
+    label?: string;
+}
+declare const CaptionOverlay: import("svelte").Component<Props, {}, "">;
+type CaptionOverlay = ReturnType<typeof CaptionOverlay>;
+export default CaptionOverlay;
+//# sourceMappingURL=CaptionOverlay.svelte.d.ts.map

package/dist/svelte/components/assistant/captions/CaptionOverlay.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaptionOverlay.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/svelte/components/assistant/captions/CaptionOverlay.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,OAAO,EAAc,MAAM,QAAQ,CAAC;AAKlD,MAAM,WAAW,KAAK;IACpB,+EAA+E;IAC/E,QAAQ,EAAE,OAAO,CAAC;IAClB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAkED,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/svelte/components/assistant/captions/HeardCaptions.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+import { getContext } from 'svelte';
+import CaptionOverlay from './CaptionOverlay.svelte';
+import { CAPTION_OVERLAY } from './caption-overlay-context.js';
+import type { CaptionLine } from './caption-state.svelte.js';
+
+export interface Props {
+  /** Shows captions when the host enables this speaker surface. */
+  enabled?: boolean;
+  /** Completed caption lines in chronological order. */
+  lines?: CaptionLine[];
+  /** Current unfinished transcript displayed without live announcement. */
+  interim?: string;
+  /** `bottom` overlays an app; `inline` belongs in a panel. */
+  placement?: 'bottom' | 'inline';
+  /** Maximum number of completed lines retained on screen. */
+  maxLines?: number;
+  /** Localized visible and accessible label identifying the speaker. */
+  speakerLabel?: string;
+}
+
+let {
+  enabled = false,
+  lines = [],
+  interim = '',
+  placement = 'bottom',
+  maxLines = 3,
+  speakerLabel = 'You said',
+}: Props = $props();
+
+const inOverlay = getContext<boolean>(CAPTION_OVERLAY) ?? false;
+const visibleLines = $derived(lines.slice(-Math.max(1, maxLines)));
+</script>
+
+{#snippet surface()}
+  <section class="heard-captions" aria-label={speakerLabel}>
+    <p class="speaker">{speakerLabel}</p>
+    <div class="caption-lines" aria-live="polite" aria-atomic="false">
+      {#each visibleLines as line (line.id)}
+        <p>{line.text}</p>
+      {/each}
+    </div>
+    {#if interim}
+      <!-- A partial transcript is visually useful but should not repeat the
+           final phrase in a screen reader's live region. -->
+      <p class="interim" aria-hidden="true">{interim}</p>
+    {/if}
+  </section>
+{/snippet}
+
+{#if enabled && (visibleLines.length > 0 || interim)}
+  {#if placement === 'bottom' && !inOverlay}
+    <CaptionOverlay>{@render surface()}</CaptionOverlay>
+  {:else}
+    {@render surface()}
+  {/if}
+{/if}
+
+<style>
+  .heard-captions { box-sizing: border-box; min-inline-size: 0; max-inline-size: min(42rem, calc(100vw - 2rem)); overflow-wrap: anywhere; padding: .6rem .85rem; border-inline-start: .25rem solid var(--smrt-color-primary, #3154a5); background: color-mix(in srgb, var(--smrt-color-surface, white) 92%, var(--smrt-color-primary-container, #dce6ff)); color: var(--smrt-color-on-surface, #172033); border-radius: .35rem; box-shadow: var(--smrt-elevation-4, 0 .25rem .9rem color-mix(in srgb, var(--smrt-color-shadow, black) 16%, transparent)); }
+  .speaker { margin: 0 0 .25rem; font-weight: var(--smrt-typography-weight-bold, 700); letter-spacing: .03em; text-transform: uppercase; font-size: var(--smrt-typography-label-medium-size, .75rem); }
+  .caption-lines p, .interim { margin: .15rem 0 0; }
+  .interim { font-style: italic; opacity: .8; }
+  @media (prefers-reduced-motion: reduce) { .heard-captions { scroll-behavior: auto; } }
+</style>

package/dist/svelte/components/assistant/captions/HeardCaptions.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { CaptionLine } from './caption-state.svelte.js';
+export interface Props {
+    /** Shows captions when the host enables this speaker surface. */
+    enabled?: boolean;
+    /** Completed caption lines in chronological order. */
+    lines?: CaptionLine[];
+    /** Current unfinished transcript displayed without live announcement. */
+    interim?: string;
+    /** `bottom` overlays an app; `inline` belongs in a panel. */
+    placement?: 'bottom' | 'inline';
+    /** Maximum number of completed lines retained on screen. */
+    maxLines?: number;
+    /** Localized visible and accessible label identifying the speaker. */
+    speakerLabel?: string;
+}
+declare const HeardCaptions: import("svelte").Component<Props, {}, "">;
+type HeardCaptions = ReturnType<typeof HeardCaptions>;
+export default HeardCaptions;
+//# sourceMappingURL=HeardCaptions.svelte.d.ts.map

package/dist/svelte/components/assistant/captions/HeardCaptions.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeardCaptions.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/svelte/components/assistant/captions/HeardCaptions.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAG7D,MAAM,WAAW,KAAK;IACpB,iEAAiE;IACjE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;IACtB,yEAAyE;IACzE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAChC,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sEAAsE;IACtE,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAgDD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/svelte/components/assistant/captions/SpokenCaptions.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+import { getContext } from 'svelte';
+import CaptionOverlay from './CaptionOverlay.svelte';
+import { CAPTION_OVERLAY } from './caption-overlay-context.js';
+import type { CaptionLine } from './caption-state.svelte.js';
+
+export interface Props {
+  /** Shows captions when the host enables this speaker surface. */
+  enabled?: boolean;
+  /** Completed caption lines in chronological order. */
+  lines?: CaptionLine[];
+  /** Current unfinished transcript displayed without live announcement. */
+  interim?: string;
+  /** `bottom` overlays an app; `inline` belongs in a panel. */
+  placement?: 'bottom' | 'inline';
+  /** Maximum number of completed lines retained on screen. */
+  maxLines?: number;
+  /** Localized visible and accessible label identifying the speaker. */
+  speakerLabel?: string;
+  /** Spoken audio already conveys this text. Opt in only when needed. */
+  announce?: boolean;
+}
+
+let {
+  enabled = false,
+  lines = [],
+  interim = '',
+  placement = 'bottom',
+  maxLines = 3,
+  speakerLabel = 'Assistant is speaking',
+  announce = false,
+}: Props = $props();
+const inOverlay = getContext<boolean>(CAPTION_OVERLAY) ?? false;
+const visibleLines = $derived(lines.slice(-Math.max(1, maxLines)));
+</script>
+
+{#snippet surface()}
+  <section class="spoken-captions" aria-label={speakerLabel}>
+    <p class="speaker"><span aria-hidden="true">◈</span> {speakerLabel}</p>
+    <div class="caption-lines" aria-live={announce ? 'polite' : 'off'} aria-atomic="false">
+      {#each visibleLines as line (line.id)}
+        <p>{line.text}</p>
+      {/each}
+    </div>
+    {#if interim}
+      <p class="interim" aria-hidden="true">{interim}</p>
+    {/if}
+  </section>
+{/snippet}
+
+{#if enabled && (visibleLines.length > 0 || interim)}
+  {#if placement === 'bottom' && !inOverlay}
+    <CaptionOverlay>{@render surface()}</CaptionOverlay>
+  {:else}
+    {@render surface()}
+  {/if}
+{/if}
+
+<style>
+  .spoken-captions { box-sizing: border-box; min-inline-size: 0; max-inline-size: min(42rem, calc(100vw - 2rem)); overflow-wrap: anywhere; padding: .7rem .9rem; border: 2px solid var(--smrt-color-outline, #533b72); background: var(--smrt-color-inverse-surface, #221c2c); color: var(--smrt-color-inverse-on-surface, #fff7ff); border-radius: 1rem; box-shadow: var(--smrt-elevation-4, 0 .35rem 1.2rem color-mix(in srgb, var(--smrt-color-shadow, black) 28%, transparent)); }
+  .speaker { margin: 0 0 .3rem; font-weight: var(--smrt-typography-weight-bold, 700); font-size: var(--smrt-typography-label-medium-size, .8rem); }
+  .caption-lines p, .interim { margin: .18rem 0 0; }
+  .interim { opacity: .8; }
+  @media (prefers-reduced-motion: reduce) { .spoken-captions { scroll-behavior: auto; } }
+</style>

package/dist/svelte/components/assistant/captions/SpokenCaptions.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { CaptionLine } from './caption-state.svelte.js';
+export interface Props {
+    /** Shows captions when the host enables this speaker surface. */
+    enabled?: boolean;
+    /** Completed caption lines in chronological order. */
+    lines?: CaptionLine[];
+    /** Current unfinished transcript displayed without live announcement. */
+    interim?: string;
+    /** `bottom` overlays an app; `inline` belongs in a panel. */
+    placement?: 'bottom' | 'inline';
+    /** Maximum number of completed lines retained on screen. */
+    maxLines?: number;
+    /** Localized visible and accessible label identifying the speaker. */
+    speakerLabel?: string;
+    /** Spoken audio already conveys this text. Opt in only when needed. */
+    announce?: boolean;
+}
+declare const SpokenCaptions: import("svelte").Component<Props, {}, "">;
+type SpokenCaptions = ReturnType<typeof SpokenCaptions>;
+export default SpokenCaptions;
+//# sourceMappingURL=SpokenCaptions.svelte.d.ts.map

package/dist/svelte/components/assistant/captions/SpokenCaptions.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpokenCaptions.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/svelte/components/assistant/captions/SpokenCaptions.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAG7D,MAAM,WAAW,KAAK;IACpB,iEAAiE;IACjE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;IACtB,yEAAyE;IACzE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAChC,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sEAAsE;IACtE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA+CD,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/svelte/components/assistant/captions/caption-overlay-context.d.ts

@@ -0,0 +1,3 @@
+/** Private scoped marker: one host overlay owns descendant bottom placement. */
+export declare const CAPTION_OVERLAY: unique symbol;
+//# sourceMappingURL=caption-overlay-context.d.ts.map

package/dist/svelte/components/assistant/captions/caption-overlay-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"caption-overlay-context.d.ts","sourceRoot":"","sources":["../../../../../src/svelte/components/assistant/captions/caption-overlay-context.ts"],"names":[],"mappings":"AAAA,gFAAgF;AAChF,eAAO,MAAM,eAAe,eAA4B,CAAC"}

package/dist/svelte/components/assistant/captions/caption-overlay-context.js

@@ -0,0 +1,2 @@
+/** Private scoped marker: one host overlay owns descendant bottom placement. */
+export const CAPTION_OVERLAY = Symbol('caption-overlay');