@tinytars/frame 0.1.1 → 0.1.3

package/PersonaBubble.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import LeafActionMenu from "@tinytars/frame/LeafActionMenu.svelte";
+  import type { LeafMenuItem } from "@tinytars/frame/menu-items";
+  import { speechRegistry, isSpeechSupported } from "./speech-registry.svelte";
+
+  // The one persona treatment: a tinted bubble with a head row (uppercase persona tag on the
+  // left; an optional meta/date and an optional action icon, e.g. download, on the right). Colors
+  // and layout live in theme.css's global .persona-* classes so every surface shares one language.
+  type Persona = "assistant" | "owner" | "provider";
+  // In-context head actions (edit/chat/delete/etc). `danger` tints the icon as destructive on hover.
+  // These render collapsed into one LeafActionMenu, not one button per action.
+  export type BubbleAction = LeafMenuItem;
+  interface Props {
+    persona: Persona;
+    // Caller-supplied, matching how LoginScreen/Onboarding take their copy: this package has no
+    // brand name or domain vocabulary of its own to fall back to.
+    label: string;
+    meta?: string;
+    id?: string;
+    // Pin folds into the shared LeafActionMenu (★/⋮ combined control) instead of a standalone
+    // button; pinDisplay defaults to "auto" (hover-revealed ⋮ over the star).
+    pinned?: boolean;
+    onTogglePin?: () => void;
+    pinDisplay?: "auto" | "hidden";
+    actions?: BubbleAction[];
+    children?: Snippet;
+  }
+  let { persona, label, meta, id, pinned = false, onTogglePin, pinDisplay = "auto", actions, children }: Props = $props();
+
+  // Every assistant-generated bubble gets Speak for free: reads bodyEl's own rendered text at click
+  // time rather than a prop threaded through every one of this component's call sites, so no
+  // existing caller needs to change. speechRegistry is the shared "only one thing speaks at a time"
+  // singleton (mirrors menu-registry.svelte.ts); clicking the currently-speaking bubble's own button
+  // again toggles it off (speechRegistry.speak handles that toggle internally).
+  const uid = $props.id();
+  const bubbleId = `${persona}-${uid}`;
+  const speakable = $derived(persona === "assistant" && isSpeechSupported());
+  const speaking = $derived(speechRegistry.isSpeaking(bubbleId));
+  let bodyEl: HTMLDivElement | undefined;
+  function toggleSpeak() {
+    speechRegistry.speak(bubbleId, bodyEl?.textContent ?? "");
+  }
+</script>
+
+<div class="persona-bubble p-{persona}" {id}>
+  <div class="persona-head">
+    <span class="persona-head-left">
+      <span class="persona-tag">{label}</span>
+    </span>
+    {#if meta || actions?.length || onTogglePin || speakable}
+      <span class="persona-head-right">
+        {#if meta}<span class="persona-meta">{meta}</span>{/if}
+        {#if speakable}
+          <button
+            type="button"
+            class="persona-speak"
+            class:speaking
+            title={speaking ? "Stop reading" : "Read aloud"}
+            aria-label={speaking ? "Stop reading" : "Read aloud"}
+            aria-pressed={speaking}
+            onclick={toggleSpeak}
+          >{speaking ? "⏸" : "🔊"}</button>
+        {/if}
+        {#if actions?.length || onTogglePin}
+          <LeafActionMenu items={actions ?? []} {pinned} {onTogglePin} {pinDisplay} />
+        {/if}
+      </span>
+    {/if}
+  </div>
+  {#if children}<div class="persona-body" bind:this={bodyEl}>{@render children()}</div>{/if}
+</div>
+
+<style>
+  .persona-speak {
+    flex-shrink: 0; border: none; background: none; cursor: pointer;
+    font-size: 0.95rem; line-height: 1; padding: 0.3rem; border-radius: 6px; color: var(--muted);
+  }
+  .persona-speak:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--fg); }
+  .persona-speak.speaking { color: var(--accent); }
+</style>

package/SaveStatus.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  // Replaces the repeated `{#if saved}<span class="saved">✓ saved</span>{/if}` +
+  // `{#if saveError}<p class="save-error">{saveError}</p>{/if}` pair duplicated across every leaf
+  // editor. `saved` and `error` render independently, so a file with several unrelated error
+  // sources (attach error, translate error, …) can render this once near the checkmark with
+  // `saved` + its primary error, then again standalone with just `error` for each additional one.
+  interface Props {
+    saved?: boolean;
+    error?: string | null;
+  }
+  let { saved = false, error = null }: Props = $props();
+</script>
+
+{#if saved}<span class="saved">✓ saved</span>{/if}
+{#if error}<p class="save-error">{error}</p>{/if}
+
+<style>
+  .saved { color: var(--accent); font-size: 0.8rem; font-weight: 600; }
+  .save-error { color: var(--alert); margin: 0.25rem 0 0.75rem; }
+</style>

package/SidebarGroupChevron.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  // The expand/collapse chevron of a sidebar group row, extracted so Chat's thread list can carry an
+  // identical one.
+  //
+  // Chat cannot simply use SidebarGroupList: that component renders its children as SidebarLeafRows,
+  // which have no per-row action slot, and a thread row needs rename/pin/delete. So the header is the
+  // shareable part and the list body is not. Sharing it keeps the glyph, the aria-expanded state and
+  // — the part a test selects on — the "Collapse <label>" / "Expand <label>" aria-label identical in
+  // both places, rather than a second hand-rolled copy that drifts the first time either changes.
+  interface Props {
+    expanded: boolean;
+    label: string;
+    onToggle: () => void;
+  }
+  let { expanded, label, onToggle }: Props = $props();
+</script>
+
+<button
+  class="chevron"
+  aria-expanded={expanded}
+  aria-label={expanded ? `Collapse ${label}` : `Expand ${label}`}
+  onclick={(e) => { e.stopPropagation(); onToggle(); }}
+>{expanded ? "▾" : "▸"}</button>
+
+<style>
+  /* These styles belong to the chevron itself, not to whoever renders it. They lived in
+     SidebarGroupList's scoped block, so extracting the button left every group chevron in the app
+     unstyled — a raw boxed <button> — while Chat's copy, which had its own :global override, stayed
+     correct. Scoped CSS only reaches a component's own markup; a shared element has to carry it. */
+  .chevron {
+    flex-shrink: 0; border: none; background: none; color: var(--muted); cursor: pointer;
+    font: inherit; font-size: 0.75rem; line-height: 1; padding: 0.4rem; width: 1.4rem;
+    text-align: center; border-radius: 6px;
+  }
+  .chevron:hover { color: var(--fg); background: color-mix(in srgb, var(--accent) 10%, transparent); }
+</style>

package/SidebarGroupList.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+  import SidebarLeafList from "./SidebarLeafList.svelte";
+  import type { SidebarLeafRow, SidebarGroupRow } from "./sidebar-rows";
+  import SidebarGroupChevron from "./SidebarGroupChevron.svelte";
+  import type { LeafMenuItem } from "@tinytars/frame/menu-items";
+
+
+
+  interface Props {
+    rows: SidebarGroupRow[];
+    activeKey: string | null;
+    // Shown (in place of the rows a not-yet-established grouping would otherwise contribute) when
+    // the owning leaf's groups aren't established yet — the caller supplies the wording.
+    pendingNote?: string | null;
+    onSelect: (key: string) => void;
+    // A click on one of a group's nested children, once expanded; bubbled straight through to
+    // SidebarLeafList's own onSelect (a pure "scroll to it," never a view switch). The owning
+    // row's key comes along so a caller can activate that group as well as scroll to the child —
+    // clicking a child under a group should land you in that group too. Passing the key explicitly
+    // is what lets this survive a leaf whose current view already contains the anchor.
+    onSelectChild?: (row: SidebarLeafRow, groupKey: string) => void;
+    // Per-child capabilities, forwarded verbatim to SidebarLeafList — see its Props comment. All
+    // optional: a section that supplies none renders children exactly as before, with no menu.
+    activeChildKey?: string | null;
+    // Both receive the owning group's key: a section's All row can list a different KIND of thing
+    // than its other rows, so the capabilities may differ per group, not just per section.
+    childActions?: (row: SidebarLeafRow, groupKey: string) => LeafMenuItem[];
+    childPinFor?: (row: SidebarLeafRow, groupKey: string) => { pinned: boolean; onTogglePin: () => void } | null;
+    renamingKey?: string | null;
+    renameText?: string;
+    onCommitRename?: () => void;
+  }
+  let {
+    rows, activeKey, pendingNote = null, onSelect, onSelectChild,
+    activeChildKey = null, childActions, childPinFor,
+    renamingKey = $bindable(null), renameText = $bindable(""), onCommitRename,
+  }: Props = $props();
+
+  // Component-local, not persisted: reset whenever the caller remounts this component (a caller
+  // that switches sections should remount fresh — otherwise a key reused across unrelated sections
+  // would leak expand state between them).
+  let expanded = $state(new Set(rows.filter((r) => r.defaultExpanded).map((r) => r.key)));
+
+  function toggle(key: string) {
+    if (expanded.has(key)) expanded.delete(key);
+    else expanded.add(key);
+    expanded = new Set(expanded);
+  }
+</script>
+
+<div class="group-list">
+  {#each rows as r (r.key)}
+    <div class="side-row">
+      {#if r.children}
+        <SidebarGroupChevron expanded={expanded.has(r.key)} label={r.label} onToggle={() => toggle(r.key)} />
+      {/if}
+      <button class="sub-item" class:active={activeKey === r.key} title={r.title} onclick={() => onSelect(r.key)}>
+        {r.label}{#if r.count !== undefined} ({r.count}){/if}
+      </button>
+      {#if r.action}
+        <button class="side-row-action" title={r.action.label} aria-label={r.action.label}
+                onclick={(e) => { e.stopPropagation(); r.action!.onClick(); }}>+</button>
+      {/if}
+    </div>
+    {#if r.children && expanded.has(r.key)}
+      <div class="group-children">
+        <SidebarLeafList
+          rows={r.children}
+          activeKey={activeChildKey}
+          onSelect={(row) => onSelectChild?.(row, r.key)}
+          actions={childActions ? (row) => childActions(row, r.key) : undefined}
+          pinFor={childPinFor ? (row) => childPinFor(row, r.key) : undefined}
+          bind:renamingKey
+          bind:renameText
+          {onCommitRename}
+        />
+      </div>
+    {/if}
+  {/each}
+  {#if pendingNote}<p class="group-pending">ⓘ {pendingNote}</p>{/if}
+</div>
+
+<style>
+  /* Distinct container class from a caller's own top-level accordion — this is a sibling list
+     below the divider, not another accordion sub-list, and reusing the accordion's class here
+     made two elements match the same selector. Row-level classes (.side-row/.sub-item) are
+     duplicated verbatim from that top-level markup so it renders identically — Svelte's CSS
+     scoping doesn't reach into child-component markup. */
+  .group-list { display: flex; flex-direction: column; gap: 0.1rem; padding: 0 0.25rem; }
+  :global(.sidebar.rail) .group-list { display: none; }
+  @media (max-width: 640px) {
+    :global(.sidebar.rail) .group-list { display: flex; }
+  }
+  .side-row { display: flex; align-items: center; gap: 0.15rem; padding: 0.1rem 0.25rem; }
+  .sub-item {
+    border: none; background: none; text-align: left; font: inherit; font-size: 0.88rem;
+    color: var(--muted); cursor: pointer; padding: 0.45rem 0.4rem; border-radius: 6px; min-height: 40px;
+    flex: 1; min-width: 0;
+  }
+  .sub-item:hover { color: var(--fg); background: color-mix(in srgb, var(--accent) 6%, transparent); }
+  .sub-item.active { color: var(--accent); font-weight: 600; background: color-mix(in srgb, var(--accent) 10%, transparent); }
+  .group-pending { margin: 0.3rem 0.6rem; font-size: 0.78rem; font-style: italic; color: var(--muted); }
+
+  /* Duplicated verbatim from a caller's own .side-row-action, same reason as the row classes
+     above: child-component styles don't inherit from the parent's <style> block. */
+  .side-row-action {
+    flex-shrink: 0; border: none; background: var(--band); color: var(--accent); cursor: pointer;
+    font: inherit; font-size: 1.15rem; line-height: 1; padding: 0.4rem 0.5rem; border-radius: 6px;
+    min-height: 36px; min-width: 36px;
+  }
+  .side-row:hover .side-row-action { background: color-mix(in srgb, var(--accent) 16%, transparent); }
+  :global(.sidebar.rail) .side-row-action { display: none; }
+  @media (max-width: 640px) {
+    :global(.sidebar.rail) .side-row-action { display: inline-flex; }
+  }
+
+  /* A group's nested children, indented one level under its own chevron/label. */
+  .group-children { padding-left: 1.5rem; }
+</style>

package/SidebarLeafList.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+  // THE sidebar row. Every list of individual items in the sidebar can render through this
+  // component: a group's expanded children and a thread list alike.
+  //
+  // It used to be split: SidebarGroupList drew group rows, this drew children, and a thread list
+  // drew a hand-rolled copy of both because — and only because — a thread row needs per-row
+  // actions and a child row had none. That single missing capability bought a second All row at a
+  // different font size, an un-indented child list, a different label colour, and a rail rule that
+  // disagreed with the other two. Adding the actions here is what let that hand-rolled copy be
+  // deleted.
+  //
+  // Actions are OPTIONAL and supplied by the caller: absent means no menu, exactly as before. Which
+  // sections get which actions is a per-section decision, not something a row can assume.
+  import LeafActionMenu from "@tinytars/frame/LeafActionMenu.svelte";
+  import type { LeafMenuItem } from "@tinytars/frame/menu-items";
+  import DictateButton from "./DictateButton.svelte";
+  import type { SidebarLeafRow } from "./sidebar-rows";
+
+
+
+  interface Props {
+    rows: SidebarLeafRow[];
+    // The row currently open, when a row click is a view switch (Chat). Null where a click is a pure
+    // scroll-to, which is every other section.
+    activeKey?: string | null;
+    onSelect: (row: SidebarLeafRow) => void;
+    // Per-row menu items, minus Pin/Unpin — LeafActionMenu prepends that itself from `pinFor`.
+    actions?: (row: SidebarLeafRow) => LeafMenuItem[];
+    // Returning null means this row cannot be pinned, so it shows no ★ and no Pin item.
+    pinFor?: (row: SidebarLeafRow) => { pinned: boolean; onTogglePin: () => void } | null;
+    // Inline rename, bindable so a caller can start one from elsewhere (Chat's header Rename action
+    // targets the currently-open thread).
+    renamingKey?: string | null;
+    renameText?: string;
+    onCommitRename?: () => void;
+  }
+  let {
+    rows, activeKey = null, onSelect, actions, pinFor,
+    renamingKey = $bindable(null), renameText = $bindable(""), onCommitRename,
+  }: Props = $props();
+
+  function menuFor(r: SidebarLeafRow): { items: LeafMenuItem[]; pin: { pinned: boolean; onTogglePin: () => void } | null } | null {
+    const pin = pinFor?.(r) ?? null;
+    const items = actions?.(r) ?? [];
+    // No capabilities at all → no trigger. A ⋮ that opens an empty menu is worse than no ⋮.
+    return pin || items.length > 0 ? { items, pin } : null;
+  }
+</script>
+
+<div class="leaf-list">
+  {#each rows as r (r.key)}
+    {@const menu = menuFor(r)}
+    <div class="side-row" id={r.domId}>
+      {#if renamingKey === r.key}
+        <!-- svelte-ignore a11y_autofocus -->
+        <input
+          class="rename-input"
+          bind:value={renameText}
+          onblur={onCommitRename}
+          onkeydown={(e) => { if (e.key === "Enter") onCommitRename?.(); if (e.key === "Escape") renamingKey = null; }}
+          autofocus
+        />
+        <DictateButton onResult={(text) => { renameText = renameText ? `${renameText} ${text}` : text; onCommitRename?.(); }} />
+      {:else}
+        <button class="sub-item" class:active={activeKey === r.key} title={r.label} onclick={() => onSelect(r)}>{r.label}</button>
+        {#if menu}
+          <div class="row-actions">
+            <LeafActionMenu
+              items={menu.items}
+              pinned={menu.pin?.pinned ?? false}
+              onTogglePin={menu.pin ? menu.pin.onTogglePin : undefined}
+            />
+          </div>
+        {/if}
+      {/if}
+    </div>
+  {/each}
+</div>
+
+<style>
+  /* Same slot a section's own .group-list occupies below the sidebar's divider — hidden on the
+     desktop icon rail, forced visible in the mobile drawer. The container class stays distinct
+     from .group-list on purpose: a caller's e2e specs can scope `.sub-item` through it. */
+  .leaf-list { display: flex; flex-direction: column; gap: 0.15rem; padding: 0 0.25rem; }
+  :global(.sidebar.rail) .leaf-list { display: none; }
+  @media (max-width: 640px) {
+    :global(.sidebar.rail) .leaf-list { display: flex; }
+  }
+  .side-row { display: flex; align-items: center; gap: 0.15rem; padding: 0.1rem 0.25rem; }
+  .sub-item {
+    border: none; background: none; text-align: left; font: inherit; font-size: 0.88rem;
+    color: var(--muted); cursor: pointer; padding: 0.45rem 0.4rem; border-radius: 6px; min-height: 40px;
+    flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  }
+  .sub-item:hover { color: var(--fg); background: color-mix(in srgb, var(--accent) 6%, transparent); }
+  /* Matches SidebarGroupList's own .sub-item.active — the label is the highlight pill, not the row.
+     Chat used to highlight the whole row instead; one of the two had to go. */
+  .sub-item.active { color: var(--accent); font-weight: 600; background: color-mix(in srgb, var(--accent) 10%, transparent); }
+  .row-actions { display: flex; align-items: center; gap: 0.35rem; flex: none; }
+  .rename-input {
+    flex: 1; min-width: 0; font: inherit; font-size: 0.88rem; padding: 0.35rem 0.4rem;
+    border: 1px solid var(--accent); border-radius: 6px;
+  }
+  @media (max-width: 640px) {
+    .sub-item { min-height: 44px; }
+  }
+</style>

package/attachment-types.ts

@@ -0,0 +1,16 @@
+// Domain-neutral shape for one stored file, kept structurally compatible with a caller's own
+// attachment type so it can pass its own values straight through without either side importing
+// the other's type — the same pattern Diagnostics.svelte's DiagnosticsLogEntry uses.
+export interface Attachment {
+  key: string;
+  name: string;
+  mediaType: string;
+  bytes: number;
+  addedAt: string;
+  extracted?: {
+    at: string;
+    chars: number;
+    kind?: string;
+    error?: string;
+  };
+}

package/concurrency.ts

@@ -0,0 +1,10 @@
+export async function runWithConcurrency(items: string[], limit: number, fn: (item: string) => Promise<void>): Promise<void> {
+  let idx = 0;
+  async function worker(): Promise<void> {
+    while (idx < items.length) {
+      const i = idx++;
+      await fn(items[i]);
+    }
+  }
+  await Promise.all(Array.from({ length: Math.min(limit, items.length) }, worker));
+}

package/dictate-registry.ts

@@ -0,0 +1,16 @@
+// Only one field dictates at a time: starting a new recognition session stops whichever other
+// field's was in progress. Plain closure-based coordinator, not $state — unlike
+// speech-registry.svelte.ts (where every caller of the reactive registry needs to know whether IT
+// is the one currently speaking), only the single DictateButton that's listening needs to react to
+// being stopped, and it already gets that from its own SpeechRecognition's `onend`. Mirrors
+// attach-controller.ts's shape (a bare singleton callback slot), not menu-registry's.
+let activeStop: (() => void) | null = null;
+
+export function claimDictation(stop: () => void): void {
+  activeStop?.();
+  activeStop = stop;
+}
+
+export function releaseDictation(stop: () => void): void {
+  if (activeStop === stop) activeStop = null;
+}

package/filter.test.ts

@@ -0,0 +1,42 @@
+import { describe, it, expect } from "vitest";
+import { filterTokens, matchesTokens, onlyIndexed } from "./filter";
+
+describe("filterTokens", () => {
+  it("lowercases, splits on whitespace, drops empties", () => {
+    expect(filterTokens("Rosuvastatin 10mg")).toEqual(["rosuvastatin", "10mg"]);
+    expect(filterTokens("  Vitamin   D  ")).toEqual(["vitamin", "d"]);
+    expect(filterTokens("")).toEqual([]);
+    expect(filterTokens("   ")).toEqual([]);
+  });
+});
+
+describe("matchesTokens", () => {
+  it("empty query matches everything", () => {
+    expect(matchesTokens("anything", [])).toBe(true);
+    expect(matchesTokens("", [])).toBe(true);
+  });
+
+  it("is case-insensitive substring match", () => {
+    expect(matchesTokens("Rosuvastatin drug", filterTokens("ROSU"))).toBe(true);
+    expect(matchesTokens("Rosuvastatin drug", filterTokens("statin"))).toBe(true);
+  });
+
+  it("requires every token to match (AND)", () => {
+    expect(matchesTokens("Rosuvastatin 10mg drug", filterTokens("rosuvastatin drug"))).toBe(true);
+    expect(matchesTokens("Rosuvastatin 10mg drug", filterTokens("rosuvastatin supplement"))).toBe(false);
+  });
+});
+
+describe("onlyIndexed", () => {
+  it("passes through untouched when only is undefined", () => {
+    expect(onlyIndexed(["a", "b", "c"], undefined)).toEqual(["a", "b", "c"]);
+  });
+
+  it("reduces to just the one index", () => {
+    expect(onlyIndexed(["a", "b", "c"], 1)).toEqual(["b"]);
+  });
+
+  it("returns empty for an out-of-range index", () => {
+    expect(onlyIndexed(["a", "b", "c"], 5)).toEqual([]);
+  });
+});

package/filter.ts

@@ -0,0 +1,19 @@
+// A shared view-only text filter, extracted so every caller matches the exact same behavior:
+// lowercase, split on whitespace, AND-of-tokens substring match. Never touches saved data.
+export function filterTokens(q: string): string[] {
+  return q.toLowerCase().split(/\s+/).filter(Boolean);
+}
+
+export function matchesTokens(hay: string, tokens: string[]): boolean {
+  if (tokens.length === 0) return true;
+  const h = hay.toLowerCase();
+  return tokens.every((t) => h.includes(t));
+}
+
+// Reduces a list to just one true index (a scoped search result), or passes it through
+// untouched when `only` is undefined (the normal, unscoped render path).
+export function onlyIndexed<T>(items: T[], only: number | undefined): T[] {
+  if (only === undefined) return items;
+  const item = items[only];
+  return item === undefined ? [] : [item];
+}

package/group-filter.ts

@@ -0,0 +1,69 @@
+// What a section renders for the current sidebar group selection — ONE rule, shared by every
+// section, because they had each invented their own and two of them got it wrong.
+//
+// The bug this exists to kill: two sections resolved the active group as
+// `activeGroup && groups.some(g => g.key === activeGroup) ? activeGroup : groups[0].key`.
+// The sidebar emits a row per group even at count 0, so selecting an EMPTY group fell through
+// that ternary and rendered the FIRST group's cells instead — the section looked like it had
+// ignored the click, or worse, like those cells belonged to the group you picked. A third section
+// was worse still: it took no group at all and only ever scrolled.
+//
+// The rule: All (or nothing selected) shows everything; a named group shows exactly its own items,
+// even when that is none. Rendering nothing is a correct answer, and the caller shows an empty
+// state saying so. Never substitute another group's content.
+// allGroupKey is caller-supplied rather than a frame-owned constant: which key means "all groups"
+// is a per-app storage convention, not something generic UI logic should hardcode.
+export function isAllGroup(activeGroup: string | null | undefined, allGroupKey: string): boolean {
+  return !activeGroup || activeGroup === allGroupKey;
+}
+
+export function filterByGroup<T>(
+  items: T[],
+  activeGroup: string | null | undefined,
+  groupOf: (item: T) => string | undefined | null,
+  allGroupKey: string,
+): T[] {
+  if (isAllGroup(activeGroup, allGroupKey)) return items;
+  return items.filter((i) => groupOf(i) === activeGroup);
+}
+
+/**
+ * The same rule as filterByGroup, one level down: a selected CHILD row narrows its section to that
+ * one item. `null` (nothing selected) shows everything, exactly as an All group does.
+ *
+ * Some sections need this because their child rows ARE their cells one-for-one, so clicking one
+ * and having the page merely scroll reads as the click being ignored, the same complaint that
+ * produced filterByGroup. Sections whose children are not their cells (a note among many notes)
+ * pass no activeLeaf and are unaffected.
+ */
+export function filterByLeaf<T>(
+  items: T[],
+  activeLeaf: string | null | undefined,
+  keyOf: (item: T) => string | undefined,
+): T[] {
+  if (!activeLeaf) return items;
+  const hit = items.filter((i) => keyOf(i) === activeLeaf);
+  // A leaf key that matches nothing here (a stale selection from another section, or a row whose
+  // section does not filter) shows everything rather than an empty page — the same defensive
+  // fallback a caller's own resolvedGroup logic would want.
+  return hit.length ? hit : items;
+}
+
+/**
+ * Which group a section RENDERS, as opposed to which items it then shows.
+ *
+ * The selected key wins whenever it names a row the sidebar actually emits — including a row with
+ * nothing in it. Falling back from an empty-but-real row is the substitution filterByGroup exists
+ * to prevent, one level up: a caller's own group ladder did exactly that for a group emitted at
+ * count 0, dropping the user on the whole unfiltered list. `fallback` is for keys that name NO
+ * row: nothing selected yet, or one left over from another section or a regen that dropped a
+ * group.
+ */
+export function resolveGroup(
+  activeGroup: string | null | undefined,
+  keys: Iterable<string>,
+  fallback: () => string | null,
+): string | null {
+  if (activeGroup && new Set(keys).has(activeGroup)) return activeGroup;
+  return fallback();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tinytars/frame",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Domain-neutral Svelte app-shell: session/auth controllers, account chrome, and menu/card/modal primitives built on @tinytars/vault.",
   "license": "MIT",
   "type": "module",
@@ -23,26 +23,51 @@
   },
   "files": [
     "*.ts",
-    "*.svelte"
+    "*.svelte",
+    "*.css"
   ],
   "exports": {
     "./account-methods.svelte": "./account-methods.svelte.ts",
     "./AccountMenu.svelte": "./AccountMenu.svelte",
     "./anchored-menu.svelte": "./anchored-menu.svelte.ts",
     "./attach-controller": "./attach-controller.ts",
+    "./AttachmentStrip.svelte": "./AttachmentStrip.svelte",
+    "./AttachmentViewer.svelte": "./AttachmentViewer.svelte",
     "./AttachPicker.svelte": "./AttachPicker.svelte",
     "./brand": "./brand.ts",
+    "./Button.svelte": "./Button.svelte",
+    "./concurrency": "./concurrency.ts",
     "./Diagnostics.svelte": "./Diagnostics.svelte",
+    "./DictateButton.svelte": "./DictateButton.svelte",
+    "./dictate-registry": "./dictate-registry.ts",
     "./ExportTab.svelte": "./ExportTab.svelte",
+    "./Field.svelte": "./Field.svelte",
+    "./filter": "./filter.ts",
+    "./FormGrid.svelte": "./FormGrid.svelte",
+    "./group-filter": "./group-filter.ts",
     "./LeafActionMenu.svelte": "./LeafActionMenu.svelte",
     "./LeafCard.svelte": "./LeafCard.svelte",
     "./LoginScreen.svelte": "./LoginScreen.svelte",
     "./menu-items": "./menu-items.ts",
     "./menu-registry.svelte": "./menu-registry.svelte.ts",
+    "./Modal.svelte": "./Modal.svelte",
+    "./ModalActions.svelte": "./ModalActions.svelte",
     "./Onboarding.svelte": "./Onboarding.svelte",
+    "./pdf-render": "./pdf-render.ts",
+    "./PdfThumbnail.svelte": "./PdfThumbnail.svelte",
+    "./persisted-json": "./persisted-json.ts",
+    "./PersonaBubble.svelte": "./PersonaBubble.svelte",
     "./recovery-controller.svelte": "./recovery-controller.svelte.ts",
     "./roster-session.svelte": "./roster-session.svelte.ts",
+    "./SaveStatus.svelte": "./SaveStatus.svelte",
+    "./sidebar-rows": "./sidebar-rows.ts",
+    "./SidebarGroupChevron.svelte": "./SidebarGroupChevron.svelte",
+    "./SidebarGroupList.svelte": "./SidebarGroupList.svelte",
+    "./SidebarLeafList.svelte": "./SidebarLeafList.svelte",
+    "./speech-registry.svelte": "./speech-registry.svelte.ts",
     "./support-access.svelte": "./support-access.svelte.ts",
+    "./theme.css": "./theme.css",
+    "./time-ago": "./time-ago.ts",
     "./vault-principals.svelte": "./vault-principals.svelte.ts",
     "./vault-session.svelte": "./vault-session.svelte.ts",
     "./VisibilitySettings.svelte": "./VisibilitySettings.svelte"
@@ -51,7 +76,8 @@
     "typecheck": "svelte-check --tsconfig ./tsconfig.json --threshold error"
   },
   "dependencies": {
-    "@tinytars/vault": "^0.1.15"
+    "@tinytars/vault": "^0.1.15",
+    "pdfjs-dist": "^6.2.108"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"
@@ -60,6 +86,8 @@
     "@tsconfig/svelte": "^5.0.8",
     "svelte": "^5.55.5",
     "svelte-check": "^4.4.8",
-    "typescript": "~6.0.2"
+    "typescript": "~6.0.2",
+    "vite": "^8.0.12",
+    "vitest": "^4.1.8"
   }
 }