@protoyard/ai-ui 0.0.0-stage → 1.1.1

package/dist/messages/MessageForm.svelte

@@ -0,0 +1,224 @@
+<script lang="ts">
+import type { FormBlock, FormField } from '@protoyard/ai/messages';
+import { Button } from 'texuli/button';
+import { Checkbox } from 'texuli/choice';
+import { Field } from 'texuli/field';
+import { Input, Textarea } from 'texuli/input';
+import { SelectContent, SelectItem, SelectRoot, SelectTrigger, SelectValue } from 'texuli/select';
+import { type MessageActionHandler, type MessageFormValue, settle } from './types.js';
+
+/**
+ * A form in a message, drawn with Texuli's field, input, select, checkbox and
+ * button. Required fields are checked before anything is sent;
+ * a submission reports `{ kind: 'form', values }` with typed values (strings,
+ * numbers, booleans, string lists or null), stays busy while the host works,
+ * shows the host's error and keeps the input on failure, and locks with
+ * "Submitted" once it succeeds.
+ */
+let {
+  block,
+  blockIndex,
+  messageId,
+  onAction,
+}: {
+  block: FormBlock;
+  blockIndex: number;
+  messageId: string | null;
+  onAction?: MessageActionHandler;
+} = $props();
+
+const uid = $props.id();
+
+function initialValue(field: FormField): MessageFormValue {
+  const initial = field.initial;
+  switch (field.kind) {
+    case 'checkbox':
+      return typeof initial === 'boolean' ? initial : false;
+    case 'number':
+      return typeof initial === 'number' ? initial : null;
+    case 'multiselect':
+      return Array.isArray(initial) ? [...initial] : [];
+    case 'select':
+      return typeof initial === 'string' ? initial : null;
+    default:
+      return typeof initial === 'string' ? initial : '';
+  }
+}
+
+// The block is fixed for this component's life; initial values only seed the inputs.
+// svelte-ignore state_referenced_locally
+let values = $state<Record<string, MessageFormValue>>(
+  Object.fromEntries(block.fields.map((field) => [field.key, initialValue(field)]))
+);
+let errors = $state<Record<string, string>>({});
+let pending = $state(false);
+let failure = $state('');
+let submitted = $state(false);
+
+function isEmpty(value: MessageFormValue): boolean {
+  return value === null || value === '' || (Array.isArray(value) && value.length === 0);
+}
+
+function validate(): boolean {
+  const next: Record<string, string> = {};
+  for (const field of block.fields) {
+    const value = values[field.key] ?? null;
+    if (field.kind === 'checkbox') {
+      if (field.required && value !== true) next[field.key] = `${field.label} must be checked.`;
+    } else if (field.required && isEmpty(value)) {
+      next[field.key] = `${field.label} is required.`;
+    }
+  }
+  errors = next;
+  return Object.keys(next).length === 0;
+}
+
+async function submit(event: SubmitEvent): Promise<void> {
+  event.preventDefault();
+  if (!onAction || pending || submitted) return;
+  if (!validate()) {
+    const first = block.fields.find((field) => errors[field.key]);
+    if (first) document.getElementById(`${uid}-field-${first.key}`)?.focus();
+    return;
+  }
+  pending = true;
+  failure = '';
+  const payload = $state.snapshot(values) as Record<string, MessageFormValue>;
+  const problem = await settle(() =>
+    onAction({ kind: 'form', messageId, blockIndex, action: block.action, values: payload })
+  );
+  pending = false;
+  if (problem) failure = problem;
+  else submitted = true;
+}
+
+function setMulti(key: string, value: string, checked: boolean): void {
+  const current = (values[key] as string[] | null) ?? [];
+  values[key] = checked ? [...current, value] : current.filter((v) => v !== value);
+}
+
+const locked = $derived(!onAction || pending || submitted);
+</script>
+
+<form
+  class="grid gap-3 rounded-lg border border-border bg-elevated p-3"
+  data-py-message-block="form"
+  aria-labelledby="{uid}-heading"
+  novalidate
+  onsubmit={submit}
+>
+  <p id="{uid}-heading" class="m-0 text-sm font-semibold">{block.title}</p>
+  <fieldset class="m-0 grid gap-3 border-0 p-0" disabled={locked}>
+    {#each block.fields as field (field.key)}
+      {@const id = `${uid}-field-${field.key}`}
+      {@const error = errors[field.key]}
+      {#if field.kind === 'checkbox'}
+        <div class="grid gap-1">
+          <Checkbox
+            {id}
+            label={field.label}
+            required={field.required}
+            disabled={locked}
+            checked={values[field.key] === true}
+            aria-invalid={error ? 'true' : undefined}
+            aria-describedby={error ? `${id}-error` : undefined}
+            onCheckedChange={(checked) => (values[field.key] = checked)}
+          />
+          {#if error}<p id="{id}-error" class="m-0 text-xs text-destructive">{error}</p>{/if}
+        </div>
+      {:else if field.kind === 'multiselect'}
+        <fieldset class="m-0 grid gap-1 border-0 p-0" aria-describedby={error ? `${id}-error` : undefined}>
+          <legend class="mb-1 text-sm font-medium">
+            {field.label}{#if field.required}<span aria-hidden="true"> *</span>{/if}
+          </legend>
+          {#each field.options ?? [] as option, index (option.value)}
+            <Checkbox
+              id={index === 0 ? id : undefined}
+              label={option.label}
+              value={option.value}
+              disabled={locked}
+              checked={((values[field.key] as string[] | null) ?? []).includes(option.value)}
+              onCheckedChange={(checked) => setMulti(field.key, option.value, checked)}
+            />
+          {/each}
+          {#if error}<p id="{id}-error" class="m-0 text-xs text-destructive">{error}</p>{/if}
+        </fieldset>
+      {:else}
+        <Field {id} label={field.label} required={field.required} {error}>
+          {#snippet children(control)}
+            {#if field.kind === 'textarea'}
+              <Textarea
+                {...control.props}
+                class="min-h-20"
+                placeholder={field.placeholder}
+                required={field.required}
+                maxlength={4000}
+                disabled={locked}
+                value={(values[field.key] as string | null) ?? ''}
+                onValueChange={(value) => (values[field.key] = value)}
+              />
+            {:else if field.kind === 'select'}
+              <SelectRoot
+                value={(values[field.key] as string | null) ?? ''}
+                items={(field.options ?? []).map((option) => ({ value: option.value, label: option.label }))}
+                required={field.required}
+                disabled={locked}
+                onValueChange={(value) => (values[field.key] = value || null)}
+              >
+                <SelectTrigger {...control.props} disabled={locked} class="w-full">
+                  <SelectValue placeholder={field.placeholder ?? 'Choose…'} />
+                </SelectTrigger>
+                <SelectContent>
+                  {#each field.options ?? [] as option (option.value)}
+                    <SelectItem value={option.value} label={option.label}>{option.label}</SelectItem>
+                  {/each}
+                </SelectContent>
+              </SelectRoot>
+            {:else if field.kind === 'number'}
+              <Input
+                {...control.props}
+                type="number"
+                inputmode="decimal"
+                placeholder={field.placeholder}
+                required={field.required}
+                disabled={locked}
+                value={values[field.key] === null ? '' : String(values[field.key])}
+                onValueChange={(raw) => {
+                  const parsed = Number(raw);
+                  values[field.key] = raw === '' || !Number.isFinite(parsed) ? null : parsed;
+                }}
+              />
+            {:else}
+              <Input
+                {...control.props}
+                type={field.kind === 'date' ? 'date' : 'text'}
+                placeholder={field.placeholder}
+                required={field.required}
+                maxlength={field.kind === 'text' ? 4000 : undefined}
+                disabled={locked}
+                value={(values[field.key] as string | null) ?? ''}
+                onValueChange={(value) => (values[field.key] = value)}
+              />
+            {/if}
+          {/snippet}
+        </Field>
+      {/if}
+    {/each}
+  </fieldset>
+
+  <div class="flex flex-wrap items-center gap-3">
+    <!-- Pending follows the host's promise through `submit`, so autoLoading is off. -->
+    <Button type="submit" autoLoading={false} loading={pending} disabled={locked}>
+      {block.submitLabel ?? 'Submit'}
+    </Button>
+    <p class="m-0 text-xs text-muted-foreground" role="status" aria-live="polite">
+      {#if pending}Sending…{:else if submitted}Submitted.{/if}
+    </p>
+  </div>
+  {#if !onAction}
+    <p class="m-0 text-xs text-muted-foreground">This form cannot be sent from this view.</p>
+  {/if}
+  {#if failure}
+    <p class="m-0 text-xs text-destructive" role="alert">{failure}</p>
+  {/if}
+</form>

package/dist/messages/MessageForm.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { FormBlock } from '@protoyard/ai/messages';
+import { type MessageActionHandler } from './types.ts';
+type $$ComponentProps = {
+    block: FormBlock;
+    blockIndex: number;
+    messageId: string | null;
+    onAction?: MessageActionHandler;
+};
+declare const MessageForm: import("svelte").Component<$$ComponentProps, {}, "">;
+type MessageForm = ReturnType<typeof MessageForm>;
+export default MessageForm;

package/dist/messages/MessageLinkPreview.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+import { ExternalLink } from '@lucide/svelte';
+import type { LinkPreviewBlock } from '@protoyard/ai/messages';
+import { Card } from 'texuli/card';
+import { LucideIcon } from 'texuli/icons/lucide';
+import { hostOf, isInlineImageUrl } from './format.js';
+
+/**
+ * A link card (Texuli's clickable `Card`). The page is never fetched: title,
+ * description and image come from the message, and the image is local or
+ * inline (the contract refuses remote images). The URL also goes through
+ * Texuli's URL policy at the untrusted tier; the link opens in a new tab
+ * without access to this page.
+ */
+let { block }: { block: LinkPreviewBlock } = $props();
+
+const site = $derived(block.siteName ?? hostOf(block.url));
+</script>
+
+<Card
+  class="flex max-w-md flex-row gap-3 p-3 text-sm no-underline"
+  data-py-message-block="link_preview"
+  href={block.url}
+  hrefTrust="untrusted"
+  target="_blank"
+  rel="noopener noreferrer"
+>
+  {#if block.image && isInlineImageUrl(block.image)}
+    <img class="size-16 shrink-0 rounded-md border border-border object-cover" src={block.image} alt="" loading="lazy" />
+  {/if}
+  <span class="grid min-w-0 gap-0.5">
+    <span class="flex items-center gap-1 text-xs text-muted-foreground">
+      {site}
+      <LucideIcon icon={ExternalLink} size="xs" />
+      <span class="sr-only">(opens in a new tab)</span>
+    </span>
+    <span class="truncate font-medium text-foreground">{block.title ?? block.url}</span>
+    {#if block.description}
+      <span class="line-clamp-2 text-muted-foreground">{block.description}</span>
+    {/if}
+  </span>
+</Card>

package/dist/messages/MessageLinkPreview.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { LinkPreviewBlock } from '@protoyard/ai/messages';
+type $$ComponentProps = {
+    block: LinkPreviewBlock;
+};
+declare const MessageLinkPreview: import("svelte").Component<$$ComponentProps, {}, "">;
+type MessageLinkPreview = ReturnType<typeof MessageLinkPreview>;
+export default MessageLinkPreview;

package/dist/messages/MessageSelect.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+import type { SelectBlock } from '@protoyard/ai/messages';
+import { Button } from 'texuli/button';
+import { Checkbox } from 'texuli/choice';
+import { SelectContent, SelectItem, SelectRoot, SelectTrigger, SelectValue } from 'texuli/select';
+import { type MessageActionHandler, settle } from './types.js';
+
+/**
+ * A choice, drawn with Texuli controls. A single select (`texuli/select`)
+ * reports `{ kind: 'select' }` as soon as it changes; a multiple select is a
+ * group of Texuli checkboxes with a Send button. A failed report restores the
+ * previous choice and shows why.
+ */
+let {
+  block,
+  blockIndex,
+  messageId,
+  onAction,
+}: {
+  block: SelectBlock;
+  blockIndex: number;
+  messageId: string | null;
+  onAction?: MessageActionHandler;
+} = $props();
+
+const uid = $props.id();
+// The block is fixed for this component's life; the initial choice is a starting value only.
+// svelte-ignore state_referenced_locally
+let selected = $state<string[]>([...(block.initial ?? [])]);
+// svelte-ignore state_referenced_locally
+let committed = $state<string[]>([...(block.initial ?? [])]);
+let pending = $state(false);
+let error = $state('');
+let sent = $state(false);
+
+async function send(values: string[]): Promise<void> {
+  if (!onAction || pending) return;
+  pending = true;
+  error = '';
+  const failure = await settle(() =>
+    onAction({ kind: 'select', messageId, blockIndex, action: block.action, values: [...values] })
+  );
+  pending = false;
+  if (failure) {
+    error = failure;
+    selected = [...committed];
+  } else {
+    committed = [...values];
+    sent = true;
+  }
+}
+
+function toggle(value: string, checked: boolean): void {
+  sent = false;
+  selected = checked ? [...selected, value] : selected.filter((v) => v !== value);
+}
+</script>
+
+<div class="grid gap-2" data-py-message-block="select">
+  {#if block.multiple}
+    <fieldset class="m-0 grid gap-1.5 border-0 p-0" disabled={!onAction || pending}>
+      <legend class="mb-1 text-sm font-medium">{block.label ?? block.placeholder}</legend>
+      {#each block.options as option (option.value)}
+        <Checkbox
+          label={option.label}
+          description={option.description}
+          value={option.value}
+          checked={selected.includes(option.value)}
+          disabled={!onAction || pending}
+          onCheckedChange={(checked) => toggle(option.value, checked)}
+        />
+      {/each}
+    </fieldset>
+    <div>
+      <!-- Pending is the component's own state (it also locks the choices), so autoLoading is off. -->
+      <Button
+        autoLoading={false}
+        loading={pending}
+        disabled={!onAction || pending || selected.length === 0}
+        onclick={() => send(selected)}
+      >
+        Send
+      </Button>
+    </div>
+  {:else}
+    <label class="text-sm font-medium" for="{uid}-select">{block.label ?? block.placeholder}</label>
+    <SelectRoot
+      value={selected[0] ?? ''}
+      items={block.options.map((option) => ({ value: option.value, label: option.label }))}
+      disabled={!onAction || pending}
+      onValueChange={(value) => {
+        selected = value ? [value] : [];
+        if (value) void send([value]);
+      }}
+    >
+      <SelectTrigger id="{uid}-select" class="w-full max-w-sm" aria-busy={pending ? 'true' : undefined}>
+        <SelectValue placeholder={block.placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        {#each block.options as option (option.value)}
+          <SelectItem value={option.value} label={option.label} description={option.description}>
+            {option.label}
+          </SelectItem>
+        {/each}
+      </SelectContent>
+    </SelectRoot>
+  {/if}
+
+  <p class="m-0 min-h-4 text-xs text-muted-foreground" role="status" aria-live="polite">
+    {#if pending}Sending…{:else if sent}Sent.{/if}
+  </p>
+  {#if !onAction}
+    <p class="m-0 text-xs text-muted-foreground">Choices are not available in this view.</p>
+  {/if}
+  {#if error}
+    <p class="m-0 text-xs text-destructive" role="alert">{error}</p>
+  {/if}
+</div>

package/dist/messages/MessageSelect.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { SelectBlock } from '@protoyard/ai/messages';
+import { type MessageActionHandler } from './types.ts';
+type $$ComponentProps = {
+    block: SelectBlock;
+    blockIndex: number;
+    messageId: string | null;
+    onAction?: MessageActionHandler;
+};
+declare const MessageSelect: import("svelte").Component<$$ComponentProps, {}, "">;
+type MessageSelect = ReturnType<typeof MessageSelect>;
+export default MessageSelect;

package/dist/messages/MessageTable.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+import type { TableBlock } from '@protoyard/ai/messages';
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from 'texuli/table';
+import { formatCell } from './format.js';
+
+/**
+ * A data table on Texuli's `Table`: caption, column headers, aligned cells.
+ * When it overflows, Texuli's scroll area becomes a focusable region named by
+ * the title (WCAG 2.1.1), so wide tables stay reachable by keyboard.
+ */
+let { block }: { block: TableBlock } = $props();
+</script>
+
+<div class="max-w-full" data-py-message-block="table">
+  <Table class="tabular-nums" label={block.title ?? 'Table'}>
+    {#if block.title}
+      <TableCaption>{block.title}</TableCaption>
+    {/if}
+    <TableHeader>
+      <TableRow>
+        {#each block.columns as column (column.key)}
+          <TableHead scope="col" align={column.align}>{column.header}</TableHead>
+        {/each}
+      </TableRow>
+    </TableHeader>
+    <TableBody>
+      {#each block.rows as row, index (index)}
+        <TableRow>
+          {#each block.columns as column (column.key)}
+            <TableCell align={column.align}>{formatCell(Object.hasOwn(row, column.key) ? row[column.key] : null)}</TableCell>
+          {/each}
+        </TableRow>
+      {:else}
+        <TableRow>
+          <TableCell class="text-muted-foreground" colspan={block.columns.length}>No rows.</TableCell>
+        </TableRow>
+      {/each}
+    </TableBody>
+  </Table>
+</div>

package/dist/messages/MessageTable.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { TableBlock } from '@protoyard/ai/messages';
+type $$ComponentProps = {
+    block: TableBlock;
+};
+declare const MessageTable: import("svelte").Component<$$ComponentProps, {}, "">;
+type MessageTable = ReturnType<typeof MessageTable>;
+export default MessageTable;

package/dist/messages/format.d.ts

@@ -0,0 +1,15 @@
+/** Display helpers for message blocks. Every result is shown as text. */
+/** A table cell as text: numbers localized, booleans as Yes/No, empty as an em dash. */
+export declare function formatCell(value: string | number | boolean | null | undefined): string;
+/** `1536` → `1.5 KB`. */
+export declare function formatBytes(bytes: number): string;
+/** The host of an http(s) URL without `www.`, or the URL itself if it does not parse. */
+export declare function hostOf(url: string): string;
+/** True for image MIME types the renderer may show inline (attachments are local or data: only). */
+export declare function isImageMime(mime: string): boolean;
+/**
+ * True when an attachment URL can be an `<img src>`: an inline raster image
+ * or a relative path. `attachment:<id>` references are resolved by the host,
+ * so they show as a named file instead.
+ */
+export declare function isInlineImageUrl(url: string): boolean;

package/dist/messages/format.js

@@ -0,0 +1,46 @@
+/** Display helpers for message blocks. Every result is shown as text. */
+const NUMBER = new Intl.NumberFormat('en-US', { maximumFractionDigits: 4 });
+/** A table cell as text: numbers localized, booleans as Yes/No, empty as an em dash. */
+export function formatCell(value) {
+    if (value === null || value === undefined || value === '')
+        return '—';
+    if (typeof value === 'number')
+        return NUMBER.format(value);
+    if (typeof value === 'boolean')
+        return value ? 'Yes' : 'No';
+    return value;
+}
+/** `1536` → `1.5 KB`. */
+export function formatBytes(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    const units = ['KB', 'MB', 'GB'];
+    let value = bytes / 1024;
+    let unit = 0;
+    while (value >= 1024 && unit < units.length - 1) {
+        value /= 1024;
+        unit += 1;
+    }
+    return `${value >= 10 ? Math.round(value) : value.toFixed(1)} ${units[unit]}`;
+}
+/** The host of an http(s) URL without `www.`, or the URL itself if it does not parse. */
+export function hostOf(url) {
+    try {
+        return new URL(url).hostname.replace(/^www\./, '');
+    }
+    catch {
+        return url;
+    }
+}
+/** True for image MIME types the renderer may show inline (attachments are local or data: only). */
+export function isImageMime(mime) {
+    return mime.startsWith('image/');
+}
+/**
+ * True when an attachment URL can be an `<img src>`: an inline raster image
+ * or a relative path. `attachment:<id>` references are resolved by the host,
+ * so they show as a named file instead.
+ */
+export function isInlineImageUrl(url) {
+    return url.startsWith('data:image/') || !/^[a-z][a-z0-9+.-]*:/i.test(url);
+}

package/dist/messages/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * `@protoyard/ai-ui/messages` — renders `protoyard.message@1` chat messages
+ * from `@protoyard/ai/messages`: text (plain or safe markdown), buttons with
+ * confirmations, selects, forms, tables, link previews, attachments and the
+ * fallback for unknown blocks. A lazy subpath, never in the ai-ui root.
+ * Callbacks only: the prototype's services decide what an action does.
+ */
+export { default as ChatMessageBlocks } from './ChatMessageBlocks.svelte';
+export { formatBytes, formatCell, hostOf } from './format.ts';
+export type { MessageActionEvent, MessageActionHandler, MessageFormValue } from './types.ts';

package/dist/messages/index.js

@@ -0,0 +1,9 @@
+/**
+ * `@protoyard/ai-ui/messages` — renders `protoyard.message@1` chat messages
+ * from `@protoyard/ai/messages`: text (plain or safe markdown), buttons with
+ * confirmations, selects, forms, tables, link previews, attachments and the
+ * fallback for unknown blocks. A lazy subpath, never in the ai-ui root.
+ * Callbacks only: the prototype's services decide what an action does.
+ */
+export { default as ChatMessageBlocks } from './ChatMessageBlocks.svelte';
+export { formatBytes, formatCell, hostOf } from "./format.js";

package/dist/messages/types.d.ts

@@ -0,0 +1,33 @@
+/** A value a chat form field submits. */
+export type MessageFormValue = string | number | boolean | string[] | null;
+interface ActionBase {
+    /** The message's `id`, or null when it has none. */
+    messageId: string | null;
+    /** Index of the block in `message.blocks`. */
+    blockIndex: number;
+    /** The block's or button's action id. */
+    action: string;
+}
+/**
+ * What a chat message reports when someone acts on it. The host (a prototype
+ * service) decides what happens; the renderer only reports the typed event
+ * and shows pending, error or done feedback around the returned promise.
+ */
+export type MessageActionEvent = (ActionBase & {
+    kind: 'button';
+    value: string | null;
+}) | (ActionBase & {
+    kind: 'select';
+    values: string[];
+}) | (ActionBase & {
+    kind: 'form';
+    values: Record<string, MessageFormValue>;
+});
+/**
+ * Handles an action. Return a promise to keep the control busy until it
+ * settles; a rejection shows its message next to the control and re-enables it.
+ */
+export type MessageActionHandler = (event: MessageActionEvent) => unknown | Promise<unknown>;
+/** Runs `work`, turning a throw or rejection into a short message. */
+export declare function settle(work: () => unknown | Promise<unknown>): Promise<string | null>;
+export {};

package/dist/messages/types.js

@@ -0,0 +1,11 @@
+/** Runs `work`, turning a throw or rejection into a short message. */
+export async function settle(work) {
+    try {
+        await Promise.resolve(work());
+        return null;
+    }
+    catch (error) {
+        const message = error instanceof Error ? error.message.trim() : '';
+        return message ? message.slice(0, 200) : 'The action could not be completed.';
+    }
+}

package/dist/scroll-anchor.d.ts

@@ -0,0 +1,13 @@
+import type { ChatReadingAnchor } from '@texuli/chat';
+/**
+ * The reading position of one conversation, kept in sessionStorage so it
+ * survives switching conversations in the tab. `@texuli/chat`'s MessageList
+ * captures and restores it (`anchor`, `onAnchorChange`, G71); this module only
+ * stores it. A position at the latest message is not stored: the list opens
+ * there anyway.
+ */
+export type { ChatReadingAnchor };
+/** Storage key for a conversation (v2: Texuli's anchor, offset measured from the viewport top). */
+export declare const readingAnchorKey: (conversationId: string) => string;
+export declare function saveReadingAnchor(key: string, anchor: ChatReadingAnchor): void;
+export declare function loadReadingAnchor(key: string): ChatReadingAnchor | null;

package/dist/scroll-anchor.js

@@ -0,0 +1,35 @@
+/** Storage key for a conversation (v2: Texuli's anchor, offset measured from the viewport top). */
+export const readingAnchorKey = (conversationId) => `protoyard:ai-ui:reading:${conversationId}`;
+export function saveReadingAnchor(key, anchor) {
+    if (typeof sessionStorage === 'undefined')
+        return;
+    try {
+        if (anchor.atLatest)
+            sessionStorage.removeItem(key);
+        else
+            sessionStorage.setItem(key, JSON.stringify(anchor));
+    }
+    catch {
+        // Storage can be unavailable in private browsing or quota-constrained contexts.
+    }
+}
+export function loadReadingAnchor(key) {
+    if (typeof sessionStorage === 'undefined')
+        return null;
+    try {
+        const value = JSON.parse(sessionStorage.getItem(key) ?? 'null');
+        if (typeof value === 'object' &&
+            value !== null &&
+            'messageId' in value &&
+            typeof value.messageId === 'string' &&
+            value.messageId !== '' &&
+            'offset' in value &&
+            typeof value.offset === 'number' &&
+            Number.isFinite(value.offset))
+            return { messageId: value.messageId, offset: value.offset, atLatest: false };
+    }
+    catch {
+        // Ignore stale or malformed saved state.
+    }
+    return null;
+}

package/dist/styles.css

@@ -0,0 +1,5 @@
+/* Import after Tailwind and the Protoyard theme/UI styles. */
+/* Chart answers render @protoyard/charts-ui components (loaded on demand). */
+@import "@protoyard/charts-ui/styles.css";
+
+@source "./";

package/dist/styles.css.d.ts

@@ -0,0 +1 @@
+export {};