@kitn.ai/ui 0.29.0 → 0.30.0

package/dist/components/builder-layout.d.ts

@@ -0,0 +1,54 @@
+import { JSX } from 'solid-js';
+export type BuilderViewport = 'desktop' | 'tablet' | 'mobile';
+export interface BuilderLayoutProps {
+    /** The construct's display name, shown in the toolbar. */
+    name: string;
+    /** The inspector panel content — typically `<BuilderPanel>`. */
+    panel: JSX.Element;
+    /** The preview content — typically a device frame wrapping `<ChatThread>`.
+     *  Callers that need to reflow their OWN preview at narrower widths (e.g.
+     *  a docked-rail template collapsing to full-bleed on `mobile`, matching
+     *  `ui/dock.tsx`'s own <=480px takeover) should read `viewport`/
+     *  `defaultViewport`/`onViewportChange` below and drive their preview's
+     *  shape from the same signal they hand this component — see
+     *  `builder-in-app-assistant.stories.tsx` and `builder.stories.tsx` for
+     *  the pattern. */
+    preview: JSX.Element;
+    /** Controlled viewport selection. Omit for uncontrolled (internal) state,
+     *  same controlled/uncontrolled convention as `Switch`'s
+     *  `checked`/`defaultChecked` and `ToggleChip`'s `pressed`/
+     *  `defaultPressed`. A caller that needs to reflow its own `preview` JSX
+     *  per viewport (see the doc comment on `preview`) should lift this to a
+     *  signal of its own and pass both this and `onViewportChange`. */
+    viewport?: BuilderViewport;
+    /** Initial viewport when uncontrolled. Defaults to `'desktop'`. */
+    defaultViewport?: BuilderViewport;
+    /** Fires with the next viewport on chip selection (controlled or not). */
+    onViewportChange?: (viewport: BuilderViewport) => void;
+    /** Stub export/save action; the real seam (a file write, per the spike) isn't
+     *  built here. */
+    onSave?: () => void;
+    class?: string;
+}
+/**
+ * `BuilderLayout` — the two-pane builder shell: a fixed-width scrollable
+ * inspector on the left, a live preview on the right over a dotted canvas
+ * background (a deliberate "this is a design tool" cue, not a real device
+ * emulator). A thin toolbar strip carries the construct name, a viewport
+ * toggle, and a stub Export action.
+ *
+ * The viewport toggle (Round A4 — was a round-1 visual stub) constrains the
+ * PREVIEW FRAME's width: `desktop` fills the pane exactly as before (no
+ * wrapper, no width style — the historical "stub" behavior for that one
+ * case); `tablet`/`mobile` wrap `preview` in a centered frame sized to
+ * `FRAME_WIDTH` above (768px / 390px), letting whatever `preview` renders
+ * reflow inside it. This is still not a real device emulator — no bezel,
+ * no user-agent spoofing, no touch simulation — just a width constraint,
+ * consistent with the doc comment this replaced.
+ *
+ * Pure shell: `panel` and `preview` are handed in as JSX so this component
+ * carries no opinion about what fills them; reflowing the CONTENT of
+ * `preview` at a given width (rather than just its outer box) is the
+ * caller's job — see the `preview` prop's own doc comment.
+ */
+export declare function BuilderLayout(props: BuilderLayoutProps): JSX.Element;

package/dist/components/builder-message-actions.d.ts

@@ -0,0 +1,72 @@
+import { JSX, Component } from 'solid-js';
+import { ChatMessageAction, CustomAction } from '../elements/chat-types.js';
+/**
+ * The role-scoped, ordered message-action picker — extracted from
+ * `builder-in-app-assistant.stories.tsx` (Round A3) into this standalone
+ * module during the T-1 build-out so the Assistant and Research templates
+ * (both asked for a "message actions, role-scoped picker, reuse" section)
+ * share one definition instead of forking it. `builder-in-app-assistant.
+ * stories.tsx` was retrofitted to import from here in the same round; its
+ * rendered output and behavior are unchanged — this is a pure extraction.
+ *
+ * Model: `ChatMessage.actions` (`elements/chat-types.ts`) is `(ChatMessage
+ * Action | CustomAction)[]` — an ORDERED array, not a set — and role-scoped
+ * only by caller curation (checked against `message.tsx`/`chat-thread.tsx`:
+ * neither hard-couples any built-in id to a role). This picker enforces
+ * role-appropriateness via two independent catalogs, one per role, each
+ * independently ordered and toggled.
+ *
+ * `'speak'` (read-aloud) is a kit-tier PROPOSAL, not a real
+ * `ChatMessageAction` value — voice OUTPUT exists as a separate element
+ * (`kai-voice-output`), not as a message-action id. When the row is
+ * enabled, callers should append `SPEAK_CUSTOM_ACTION` (a real, clickable,
+ * no-op `CustomAction`) rather than inventing a fake `ChatMessageAction`.
+ */
+export type UserActionId = Extract<ChatMessageAction, 'edit' | 'copy'>;
+export type AssistantActionId = ChatMessageAction | 'speak';
+export interface ActionRowDef<TId extends string> {
+    id: TId;
+    label: string;
+    /** A curated icon — same components `ui/action-icons.ts`'s registry maps
+     *  each built-in id to, so the picker's icons match what the real action
+     *  bar renders. */
+    icon: Component<{
+        class?: string;
+    }>;
+    /** Not a real `ChatMessageAction` today — see the module doc comment. */
+    proposed?: boolean;
+}
+export interface ActionRowState<TId extends string> {
+    id: TId;
+    enabled: boolean;
+}
+export declare const USER_ACTION_CATALOG: readonly ActionRowDef<UserActionId>[];
+export declare const ASSISTANT_ACTION_CATALOG: readonly ActionRowDef<AssistantActionId>[];
+/** Owner defaults (Round A3): "Your messages" starts with only Edit on;
+ *  "Assistant messages" starts with Copy/Like/Dislike on, Regenerate and
+ *  the proposed Speak row off. Row ORDER here is also the default
+ *  enabled-action order. */
+export declare const DEFAULT_USER_ACTION_ROWS: ActionRowState<UserActionId>[];
+export declare const DEFAULT_ASSISTANT_ACTION_ROWS: ActionRowState<AssistantActionId>[];
+/** The real `CustomAction` a preview should append when the proposed Speak
+ *  row is enabled — a genuine, clickable (no-op) button, never faked
+ *  audio. `volume-2` is already a curated icon in `ui/action-icons.ts`'s
+ *  registry. */
+export declare const SPEAK_CUSTOM_ACTION: CustomAction;
+/**
+ * One role's ordered, toggleable action list — a vertical list of rows
+ * (icon + label + a "Proposed" tag when the row is one + up/down reorder
+ * buttons + an enable switch). Row ORDER is the array order, and doubles
+ * as the enabled-action order once filtered — no separate "priority"
+ * field, because the component tier has no separate concept either.
+ *
+ * Up/down buttons over drag-and-drop: keyboard- and screen-reader-operable
+ * for free, which a bare drag handle is not, without extra work a design
+ * round doesn't need to do to prove the model (T-6).
+ */
+export declare function ActionRowPicker<TId extends string>(props: {
+    legend: string;
+    catalog: readonly ActionRowDef<TId>[];
+    rows: ActionRowState<TId>[];
+    onChange: (next: ActionRowState<TId>[]) => void;
+}): JSX.Element;

package/dist/components/builder-panel.d.ts

@@ -0,0 +1,189 @@
+import { JSX } from 'solid-js';
+export type BuilderLayoutKind = 'widget' | 'fullscreen' | 'aside' | 'split' | 'custom';
+export type BuilderThemeMode = 'light' | 'dark' | 'system';
+export type BuilderHistoryPersistence = 'none' | 'local' | 'endpoint';
+export interface BuilderHomeLink {
+    label: string;
+    href?: string;
+    description?: string;
+    icon?: string;
+}
+export interface BuilderHome {
+    greeting?: {
+        title?: string;
+        subtitle?: string;
+    };
+    links?: BuilderHomeLink[];
+}
+export interface BuilderCapabilities {
+    starters?: string[];
+    attachments?: {
+        accept?: string[];
+    };
+    history?: {
+        persistence: BuilderHistoryPersistence;
+    };
+    conversations?: boolean;
+}
+export type BuilderWidgetPosition = 'bottom-end' | 'bottom-start' | 'top-end' | 'top-start';
+/** `layout: 'widget'`-scoped FAB chrome — mirrors `construct.v1`'s own
+ *  `widget` block. Meaningless on any other layout, which is exactly why
+ *  the panel section it drives is HIDDEN, not just disabled, on any other
+ *  layout (see the Layout section's own doc comment for that distinction). */
+export interface BuilderWidget {
+    position?: BuilderWidgetPosition;
+    launcherIcon?: string;
+    defaultOpen?: boolean;
+}
+export type BuilderProviderMode = 'mock' | 'endpoint';
+export type BuilderProviderWire = 'openai' | 'anthropic';
+/** Mirrors `construct.v1`'s own `provider` discriminated union
+ *  (`agent-tooling/construct/schema.ts`'s `ProviderSchema`) — `mock` needs
+ *  nothing else; `endpoint` needs the consumer's own chat route + wire
+ *  format. A DISPLAY/edit stub, not a real one: no dev-server exists for
+ *  this design round to actually call, so there's nothing to validate the
+ *  URL against — the field exists so a template's panel shows the whole
+ *  construct shape, not because this round wires it to anything. */
+export interface BuilderProvider {
+    mode: BuilderProviderMode;
+    url?: string;
+    wire?: BuilderProviderWire;
+}
+/** Mirrors `construct.v1`'s own `cards` entry shape (`schema.ts`'s
+ *  `cards` array): a tool-facing `name` plus the kit's card-schema JSON.
+ *  `schema` is `Record<string, unknown>` here too — deep card validation
+ *  (incl. `x-kai-format` mask hints) is the kit's own card contract at
+ *  render time, not this stub panel's job; this stub only ever READS
+ *  `schema.title` for a display label (Round A's read-only Cards section —
+ *  see `BuilderPanelSections.cards`). */
+export interface BuilderCard {
+    name: string;
+    schema?: Record<string, unknown>;
+}
+export interface BuilderConstruct {
+    name: string;
+    layout: BuilderLayoutKind;
+    provider?: BuilderProvider;
+    header?: {
+        title?: string;
+    };
+    theme?: {
+        accent?: string;
+        unreadColor?: string;
+        mode?: BuilderThemeMode;
+    };
+    home?: BuilderHome;
+    capabilities?: BuilderCapabilities;
+    widget?: BuilderWidget;
+    cards?: BuilderCard[];
+}
+/**
+ * A template-scoped section configuration (Round W, T-2/T-6): a template
+ * FIXES its layout internally (no layout radio) and owns which of the
+ * layout-scoped sections apply — a widget template shows Widget chrome
+ * unconditionally (it IS the widget template, not merely "currently set to
+ * widget"), where the old layout-driven panel showed it only when the
+ * layout radio happened to be on "Widget". Omit this prop entirely to get
+ * the original, generic, layout-driven panel (every existing test above
+ * exercises that default) — a template panel opts INTO the narrower set
+ * rather than the generic panel opting out.
+ */
+export interface BuilderPanelSections {
+    /** Show the Layout radio section. Default `true` (the generic panel).
+     *  A template panel sets this `false` — T-2: the template fixes the
+     *  layout, so there is nothing left to choose here. */
+    layout?: boolean;
+    /** The Widget-chrome section's visibility. `'auto'` (default) follows
+     *  `value.layout === 'widget'`, the original cross-field-visibility
+     *  behavior. `'always'` shows it unconditionally — what a Support widget
+     *  template panel wants, since for THAT template the section is never
+     *  conditional, it's simply always this template's own controls.
+     *  `'never'` hides it — what every non-widget template wants once each
+     *  gets its own `Labs/Builder/<Template>` story. */
+    widget?: 'auto' | 'always' | 'never';
+    /** Show the Provider section (mode + endpoint URL/wire when applicable).
+     *  Default `false` — the generic panel predates `provider` existing on
+     *  `BuilderConstruct` at all; a template panel opts in. */
+    provider?: boolean;
+    /** Show the Home section (greeting/links tab). Default `true` (the
+     *  generic panel). A template with no Home concept at all — In-app
+     *  assistant (Round A): widget-only chrome, no Home/Messages tab bar in
+     *  its own construct basis (`fixtures/ops-console.construct.json` has no
+     *  `home` key) — sets this `false` to remove the section outright,
+     *  rather than leaving a switch that would only ever read "off". */
+    home?: boolean;
+    /** Show a READ-ONLY Cards section: the construct's declared card names
+     *  (Round A's `cards` addition to `BuilderConstruct`), with a muted note
+     *  that editing them is a later round. Default `false`. Deliberately not
+     *  an editor — a template whose construct basis carries `cards` (like
+     *  `ops-console.construct.json`'s `deployment_parameters` form) still
+     *  needs the panel to acknowledge them exist rather than silently
+     *  dropping them from view, without this design round faking a card-
+     *  schema editor it doesn't have (decide loudly, per CLAUDE.md). */
+    cards?: boolean;
+}
+export interface BuilderPanelProps {
+    /** The construct being edited. Controlled — the panel never holds its own copy. */
+    value: BuilderConstruct;
+    /** Fires with the next construct on every edit. */
+    onChange: (next: BuilderConstruct) => void;
+    /** Which sections render — see `BuilderPanelSections`. Omit for the
+     *  original generic, layout-driven panel. */
+    sections?: BuilderPanelSections;
+    class?: string;
+}
+/** One "common case" chip for `capabilities.attachments.accept`: a human label
+ *  over one or more raw MIME patterns. Owner feedback (design round 2):
+ *  raw MIME types are hostile to the audience this panel is for, so the
+ *  common cases get a toggle chip and the raw list is a secondary, visible
+ *  ("Advanced") affordance rather than the primary input. */
+export interface AcceptChip {
+    id: string;
+    label: string;
+    patterns: readonly string[];
+}
+/**
+ * The chip → MIME-pattern map for the attachments accept editor below.
+ *
+ * Exported (not module-local) because it's exactly the vocabulary a future
+ * schema-driven wizard or capability menu (RECOMMENDATION.md's "real build")
+ * will also want — one place to widen the common-case list rather than a
+ * second one growing beside it.
+ */
+export declare const ACCEPT_CHIPS: readonly AcceptChip[];
+/**
+ * `BuilderPanel` — the visual construct builder's inspector: identity, layout,
+ * theme, an optional Home tab, and capabilities. Pure props/callbacks, stub-
+ * friendly (no dev-server seam, no schema derivation) — a STORY-FIRST design
+ * surface for the panel's look, per RECOMMENDATION.md. Composed entirely from
+ * the kit's own controls (`Input`/`Textarea`/`Switch`/`RadioGroup`/`Select`/
+ * `Button`/`ColorField`/`ToggleChip`); no `part=` attributes — this component is not
+ * yet wired to a `kai-*` facade.
+ *
+ * Round W (T-2/T-6) added `sections` (`BuilderPanelSections`): omit it for
+ * the original generic, layout-driven panel this doc comment otherwise
+ * describes unchanged; pass it to scope the panel to ONE template's control
+ * set — no Layout radio, Widget chrome shown unconditionally rather than
+ * `layout`-conditionally, a Provider section — the shape `Labs/Builder/
+ * Support widget` (`src/elements/builder.stories.tsx`) actually uses.
+ *
+ * Three patterns from the spike (plus the owner's own round-8 ruling) get
+ * real design treatment here rather than being hand-waved:
+ *  - **presence-as-boolean**: `home` and `capabilities.attachments` are each
+ *    driven by ONE switch that adds/removes the whole sub-object, with its
+ *    revealed fields directly below (no second "enabled" flag living beside
+ *    the object it toggles).
+ *  - **cross-field visibility, field-level**: `capabilities.conversations`
+ *    requires `capabilities.history.persistence` to be `local`/`endpoint`
+ *    (the schema's own `superRefine` rule) — shown as a disabled switch with
+ *    the reason spelled out in muted text right below it, not a validation
+ *    error surfaced after the fact.
+ *  - **cross-field visibility, section-level**: the whole "Widget" section
+ *    (position/launcher icon/open-by-default) is meaningless outside
+ *    `layout: 'widget'`, and unlike the single Conversations toggle above, a
+ *    disabled-and-explained SECTION would just be three greyed-out rows for
+ *    one sentence's worth of reason — so it's hidden entirely, not disabled,
+ *    whenever `layout` isn't `'widget'` (owner ruling, design round 8; see
+ *    that section's own comment for the full distinction).
+ */
+export declare function BuilderPanel(props: BuilderPanelProps): JSX.Element;

package/dist/components/builder-preview.d.ts

@@ -0,0 +1,11 @@
+import { BuilderConstruct } from './builder-panel.js';
+/**
+ * The inline style object a stub preview's wrapper needs so a construct's
+ * `theme.accent` actually retints its descendants: both the public
+ * (`--kai-color-primary`) and internal (`--color-primary`) tokens, plus
+ * their paired foreground when the accent resolves to concrete RGB — see
+ * the module doc comment above for why both are required. Returns `{}` for
+ * no accent (the kit's own neutral default applies, same as omitting the
+ * property entirely).
+ */
+export declare function resolveAccentWrapperStyle(theme: BuilderConstruct['theme']): Record<string, string>;

package/dist/components/builder-shell-controls.d.ts

@@ -0,0 +1,69 @@
+import { JSX } from 'solid-js';
+/**
+ * "App chrome" — the Command palette and User menu shell knobs (owner
+ * discovery round), factored as a shared module so every shell-bearing
+ * template (`Labs/Builder/Assistant`, `.../Workspace`, `.../Multi-mode`)
+ * reuses the same real pieces instead of forking a fourth copy —
+ * consistent with `builder-composer-triggers.tsx`'s own rule-of-three
+ * extraction earlier this round.
+ *
+ * COMMAND PALETTE: composes the kit's real `CommandList` (`ui/command.tsx`)
+ * — a presentational grouped listbox — inside a hand-built overlay
+ * (backdrop + centered panel + Escape/backdrop-click to close), the SAME
+ * shape `elements/claude-code.stories.tsx`'s own command-center overlay
+ * uses around `kai-command` (read before building this — `CommandList` is
+ * that facade's underlying Solid piece; the facade adds the search input's
+ * filtering behavior itself, which `CommandList` does not own). A plain
+ * `Input` above the list does the filtering here, client-side over a stub
+ * catalog, matching claude-code's own placeholder copy style ("Search
+ * commands...").
+ *
+ * USER MENU: `elements/user-menu.stories.tsx`'s own doc comment states it
+ * plainly — "the user menu is a RECIPE, not an element... kai-menu with a
+ * slotted trigger (kai-avatar + name + plan + a chevron + a kai-status
+ * dot)". Reused here as the Solid-tier equivalent: `Dropdown`/
+ * `DropdownTrigger`/`DropdownContent`/`DropdownItem` (the same primitives
+ * `components/model-switcher.tsx` and the Workspace composer menu already
+ * compose) with an `Avatar` + name/plan trigger.
+ */
+export interface ShellControlsState {
+    commandPalette: boolean;
+    userMenu: boolean;
+}
+/** The command palette overlay — mounted only while `open`. Filters the
+ *  stub catalog client-side; selecting a row or pressing Escape closes it. */
+export declare function CommandPaletteOverlay(props: {
+    open: boolean;
+    onClose: () => void;
+}): JSX.Element;
+/** The command palette's TRIGGER — a plain search-icon button, matching
+ *  claude-code's own rail-header search affordance. Rendering the overlay
+ *  itself is the caller's job (`CommandPaletteOverlay`), so a template can
+ *  place the trigger inside its own rail/header chrome while the overlay
+ *  mounts at the frame root. */
+export declare function CommandPaletteTrigger(props: {
+    onOpen: () => void;
+}): JSX.Element;
+/** The user-menu recipe itself — avatar + name/plan trigger, real Dropdown
+ *  primitives, a stub items list (Settings/Help/Log out). `compact` (owner
+ *  feedback round, Workspace's app-header rework) drops the name/plan text
+ *  entirely, rendering avatar + chevron only — for a header utility cluster
+ *  where the full name/plan reads as too much next to icon-only siblings.
+ *  `name`/`plan` still feed the avatar initials and the accessible name
+ *  (`aria-label`) even when compact, so the control never loses its name to
+ *  assistive tech just because the text is hidden visually. */
+export declare function UserMenu(props: {
+    name: string;
+    plan?: string;
+    class?: string;
+    compact?: boolean;
+}): JSX.Element;
+/** The panel section every shell-bearing template reuses: two toggles,
+ *  "Command palette" and "User menu." Preview-only — see each template's
+ *  own module doc comment for how the toggles wire into ITS OWN chrome
+ *  (the trigger/overlay/menu placement differs per template's real
+ *  anatomy, so this section only owns the on/off state, not the layout). */
+export declare function ShellSection(props: {
+    state: ShellControlsState;
+    onChange: (v: ShellControlsState) => void;
+}): JSX.Element;

package/dist/components/builder-skeleton.d.ts

@@ -0,0 +1,58 @@
+import { JSX } from 'solid-js';
+/**
+ * Shared wordless-skeleton language for `Labs/Builder/<Template>` preview
+ * hosts (docs/superpowers/specs/2026-08-28-template-builder-design.md).
+ *
+ * Extracted from `builder-in-app-assistant.stories.tsx` (Round A2) into this
+ * standalone module during the T-1 build-out (Assistant/Research/Workspace/
+ * Voice) so every template's "the rest of your app" skeleton chrome shares
+ * one definition instead of four copies drifting apart — the cross-cutting
+ * mandate the design spec's Process step names ("as shared needs emerge,
+ * refactor the shared components ONCE"). `builder-in-app-assistant.stories.tsx`
+ * was retrofitted to import from here in the same round; nothing about its
+ * rendered output changed.
+ *
+ * PLAIN inline CSS (`color-mix`), not a Tailwind opacity-modifier class
+ * on a color utility or an arbitrary-bracket width value — see the
+ * original Round A2 note in git blame: this Storybook dev server's
+ * Tailwind JIT pass proved non-deterministic for FRESH combinations
+ * introduced by a single file (a class would show correctly in the rendered
+ * `className` while `getComputedStyle` reported the rule simply wasn't
+ * compiled). `color-mix()` is real CSS with no compile step to race, and
+ * matches what Tailwind's own `/NN` opacity modifier generates.
+ */
+export declare function mix(colorVar: string, pct: number): string;
+/** One skeleton bar/pill. `widthClass` for a standard-scale Tailwind width
+ *  utility (proven reliable); `width` for an inline CSS width (a
+ *  percentage, or anything arbitrary); `flex` to grow and fill instead of
+ *  taking either. Height is always a standard-scale utility unless
+ *  overridden. */
+export declare function SkeletonBar(props: {
+    widthClass?: string;
+    width?: string;
+    heightClass?: string;
+    pct: number;
+    flex?: boolean;
+}): JSX.Element;
+/** A grayscale/muted skeleton stat tile: a label bar over a bigger number
+ *  bar. Deliberately toneless (muted-foreground tints only, never
+ *  `bg-primary`/accent) so the host reads as chrome around the product
+ *  rather than product itself. */
+export declare function StubStatTile(props: {
+    class?: string;
+}): JSX.Element;
+/** A single stub nav-rail row: an icon-ish dot plus a label bar. `active`
+ *  lights the row the way a real nav's current-page item would. */
+export declare function StubNavRow(props: {
+    active?: boolean;
+}): JSX.Element;
+/** A single stub table row: a handful of column bars at staggered widths,
+ *  so the row reads as data rather than one flat block. */
+export declare function StubTableRow(): JSX.Element;
+/** A wordless skeleton code/text block: a stack of bars at staggered
+ *  widths, monospace rhythm (shorter, denser bars) rather than prose
+ *  rhythm — for the Workspace template's artifact/code pane. */
+export declare function StubCodeBlock(props: {
+    lines?: number;
+    class?: string;
+}): JSX.Element;

package/dist/components/builder-start.d.ts

@@ -0,0 +1,75 @@
+import { JSX } from 'solid-js';
+export type BuilderTemplateId = 'widget' | 'inAppAssistant' | 'assistant' | 'research' | 'workspace' | 'voice' | 'scratch';
+/** The template ids that DO have a card — every `BuilderTemplateId` except
+ *  `'scratch'`, which has no illustration and never appears in
+ *  `BUILDER_TEMPLATES`. */
+export type BuilderCardTemplateId = Exclude<BuilderTemplateId, 'scratch'>;
+export interface BuilderTemplate {
+    id: BuilderCardTemplateId;
+    name: string;
+    description: string;
+}
+/** V1 templates, in build order (T-1: easiest to hardest, so controls
+ *  accumulate template to template). Names and one-liners are the T-4/T-7
+ *  copy this round exists to force into existence. Round P2 grows the set
+ *  from four to six (In-app assistant, Voice) and sharpens the four
+ *  existing one-liners for instant recognition. */
+export declare const BUILDER_TEMPLATES: readonly BuilderTemplate[];
+export interface BuilderStartProps {
+    /** The currently selected template id, or unset for none yet. Controlled —
+     *  this component holds no selection state of its own. */
+    value?: BuilderTemplateId;
+    /**
+     * Fires with a template's id when its card is chosen. Click-to-advance
+     * (design choice, this round): T-7 says "selection advances to that
+     * template's builder", and there is nothing a second "Continue" step
+     * would add here that the click itself doesn't already mean — a
+     * disambiguating confirm step belongs to T-2's SWITCHING-template case
+     * (control set changes, so a re-pick needs a confirm), not to picking a
+     * template for the first time. So `onSelect` fires on the same click that
+     * shows the selected ring; the story's Continue readout below just proves
+     * the callback fired, since there's no template builder screen yet to
+     * navigate to.
+     */
+    onSelect: (id: BuilderTemplateId) => void;
+    class?: string;
+}
+export declare const BLUEPRINT_BG: {
+    readonly 'background-image': "radial-gradient(circle, var(--color-border) 1px, transparent 1px)";
+    readonly 'background-size': "14px 14px";
+};
+/**
+ * `BuilderStart` — the builder's opening screen: six selectable template
+ * cards (T-7, grown from four in Round P2). Each card is a real
+ * `ui/card.tsx` `Card` (`clickable`,
+ * `media` for the illustration, `header` for the name), not a hand-rolled
+ * button — the kit's own primitive already gives a `role="button"` with
+ * Enter/Space activation, which settles this screen's keyboard-semantics
+ * question: a `radiogroup` was the other defensible reading (this IS a
+ * single choice among six), but `Card` already implements exactly the
+ * button-per-card pattern with no extra wiring, and reusing it beats
+ * building a second selection primitive for one screen.
+ *
+ * Brand alignment (T-7): the kit's own tokens throughout — no new color, no
+ * new radius, no new type stack. The illustrations are the one genuinely new
+ * visual element this round adds; see `TEMPLATE_ILLUSTRATIONS` below for
+ * their shared style rules.
+ */
+export declare function BuilderStart(props: BuilderStartProps): JSX.Element;
+export declare const STROKE = 1.5;
+export declare const LINE: {
+    stroke: string;
+    fill: string;
+};
+export declare const BORDER: {
+    stroke: string;
+    fill: string;
+};
+export declare const ACCENT: {
+    stroke: string;
+    fill: string;
+};
+export declare const ACCENT_FILL: {
+    stroke: string;
+    fill: string;
+};

package/dist/components/builder-workspace-variants.d.ts

@@ -0,0 +1,23 @@
+import { JSX } from 'solid-js';
+export type WorkspaceVariantId = 'artifactPreview' | 'appPreview';
+export interface WorkspaceVariant {
+    id: WorkspaceVariantId;
+    name: string;
+    description: string;
+}
+export declare const WORKSPACE_VARIANTS: readonly WorkspaceVariant[];
+export interface WorkspaceVariantPickerProps {
+    value?: WorkspaceVariantId;
+    onSelect: (id: WorkspaceVariantId) => void;
+    onBack: () => void;
+    class?: string;
+}
+/**
+ * `WorkspaceVariantPicker` — the Workspace family's second screen: two
+ * function-named variant cards (smaller-scale `Card`s, reusing `Builder
+ * Start`'s own pattern) plus a back affordance to the template picker.
+ * Selection fires `onSelect` with the variant id the same click-to-advance
+ * shape `BuilderStart` itself uses (T-7's own reasoning: nothing a second
+ * "Continue" step would add here that the click doesn't already mean).
+ */
+export declare function WorkspaceVariantPicker(props: WorkspaceVariantPickerProps): JSX.Element;

package/dist/components/captions.d.ts

@@ -0,0 +1,66 @@
+import { JSX } from 'solid-js';
+/**
+ * `Captions` — live closed-captioning: the text shown WHILE someone (the
+ * user or the agent) is speaking, distinct from a scrollback transcript.
+ * Built for the Voice template (`elements/builder-voice.stories.tsx`) but
+ * kept generic — any voice surface that wants a caption line can use this
+ * directly.
+ *
+ * - Driven by `segments`, oldest first — the LAST entry is the current
+ *   line. Everything else is history, only rendered by `stacked`.
+ * - `variant` picks the chrome: `'lower-third'` (a semi-opaque bar, the
+ *   broadcast-caption look), `'floating'` (a card that floats above a
+ *   visualizer, `kai-elevation`), `'minimal'` (bare text, no chrome — the
+ *   original shape this component shipped with), `'stacked'` (the last two
+ *   lines of history fade in behind the current line, which stays full
+ *   strength). Default `'minimal'`.
+ * - Speaker-aware via `data-speaker` + a small uppercase label ("You" /
+ *   "Assistant") — NOT a color swap. Accent stays reserved for the
+ *   visualizer per the owner's Voice-round instruction, so the distinction
+ *   lives in the label and a subtle weight difference, both drawn from the
+ *   muted/foreground tiers, never `text-primary`.
+ * - Interim (`final: false`) text renders `text-muted-foreground` / a hair
+ *   lighter than a finalized line's `text-foreground`, so a caption visibly
+ *   "settles" the moment the model (or the ASR) commits it.
+ * - Undefined/empty `segments`, or a current segment whose `text` is empty
+ *   or whitespace-only, renders NOTHING — a real `<Show>` around a presence
+ *   gate, not a hidden/zero-opacity node left in the DOM.
+ * - One `role="status"`/`aria-live="polite"` region, wrapping ONLY the
+ *   current line — `stacked`'s history lines sit outside it
+ *   (`aria-hidden="true"`) so they don't get re-announced every time the
+ *   region's content changes. This mirrors `toast.tsx`'s
+ *   `role="region"`/`aria-live="polite"` pattern (the kit's other
+ *   speech-adjacent live region) rather than inventing a second policy, and
+ *   is the ONLY live region this component renders — it says nothing about
+ *   history, so it can't double-announce anything a transcript component
+ *   elsewhere on the page is already announcing.
+ * - Appear/update reuses the kit's real exit-animation primitive,
+ *   `createPresence` (`ui/overlay.tsx`), for the whole component's
+ *   mount/unmount, and a keyed `<For>` around the current line so a NEW
+ *   segment object (the same "new object per changed item" contract the
+ *   rest of the kit's reactive props follow) retriggers its own
+ *   `animate-in` rather than being silently patched in place. Both use the
+ *   same already-compiled `animate-in ... data-[closed]:animate-out ...`
+ *   Tailwind-animate classes `DropdownContent`/`DialogContent`/
+ *   `HoverCardContent` use, and both carry `motion-reduce:animate-none` (the
+ *   same pattern `screen.tsx`/`dialog.tsx` use) so `prefers-reduced-motion:
+ *   reduce` turns the animation off entirely — the text still appears,
+ *   updates and disappears, just without motion.
+ */
+export interface CaptionSegment {
+    /** Whose speech this line represents. */
+    speaker: 'user' | 'assistant';
+    /** The line's text. Empty/whitespace on the CURRENT segment renders nothing. */
+    text: string;
+    /** Whether ASR/the model has committed this line. Default `true`. */
+    final?: boolean;
+}
+export type CaptionsVariant = 'lower-third' | 'floating' | 'minimal' | 'stacked';
+export interface CaptionsProps {
+    /** Caption lines, oldest first. The last entry is the current line. */
+    segments?: CaptionSegment[];
+    /** Which visual treatment to render. Default `'minimal'`. */
+    variant?: CaptionsVariant;
+    class?: string;
+}
+export declare function Captions(props: CaptionsProps): JSX.Element;

package/dist/{composer-sQ0HcvyG.js → composer-DMI85B6j.js}

@@ -1,4 +1,4 @@
-import{A as Ye,g as z,w as Je,k as Q,j as de,o as ue,x as De,h as Qe,i as N,u as Ne,a as H,d as O,b as Z,l as ee,c as $,F as Oe,S as G,t as S,Q as Ze,e as et}from"./define-By-uL588.js";import{c as P}from"./cn-DN5AWfiS.js";import{u as tt,c as nt,a as rt}from"./overlay-Cb-MkyDa.js";function M(n){if(n==null)return[];if(typeof n=="string")return n.length?[{type:"text",text:n}]:[];const l=[];for(const t of n)if(t.type==="text"){if(!t.text)continue;const i=l[l.length-1];i&&i.type==="text"?l[l.length-1]={type:"text",text:i.text+t.text}:l.push({type:"text",text:t.text})}else l.push({type:"entity",entity:t.entity});return l}function te(n,l){let t="";for(const i of n)i.type==="text"?t+=i.text:t+=i.entity.promptText??i.entity.label;return t}function he(n){return n.filter(l=>l.type==="entity").map(l=>l.entity)}function ne(n){return n.every(l=>l.type==="text"&&l.text.length===0)}const C="\u200B",pe="data-kai-entity",fe=new WeakMap;function U(n){return!!n&&n.nodeType===1&&n.hasAttribute(pe)}function re(n){return n.ownerDocument.createTreeWalker(n,NodeFilter.SHOW_TEXT,{acceptNode(l){let t=l.parentElement;for(;t&&t!==n;){if(t.hasAttribute(pe))return NodeFilter.FILTER_REJECT;t=t.parentElement}return NodeFilter.FILTER_ACCEPT}})}function ot(n){switch(n){case"skill":return"/";case"agent":return"@";default:return""}}function Le(n){const l=t=>`<svg viewBox="0 0 24 24" width="1em" height="1em" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${t}</svg>`;switch(n){case"agent":return l('<rect x="4" y="8" width="16" height="12" rx="3"/><path d="M12 4.5V8M9.5 13.5v1.5M14.5 13.5v1.5"/><circle cx="12" cy="3" r="1.2"/>');case"plugin":return l('<path d="M9 2v4M15 2v4M6 6h12v5a6 6 0 0 1-12 0zM12 17v5"/>');default:return""}}function Ie(n,l,t){const i=n.createElement("span");i.setAttribute(pe,""),i.setAttribute("contenteditable","false"),i.dataset.kind=l.kind,i.dataset.id=l.id,i.className="kai-composer-pill";const u=ot(l.kind);if(u){const s=n.createElement("span");s.className="kai-composer-pill-sigil",s.setAttribute("aria-hidden","true"),s.textContent=u,i.appendChild(s)}else{const s=l.icon??t?.[l.kind];if(s){const h=n.createElement("img");h.src=s,h.alt="",h.className="kai-composer-pill-icon",i.appendChild(h)}else{const h=Le(l.kind);if(h){const f=n.createElement("span");f.className="kai-composer-pill-icon kai-composer-pill-glyph",f.setAttribute("aria-hidden","true"),f.innerHTML=h,i.appendChild(f)}}}return i.appendChild(n.createTextNode(l.label)),fe.set(i,l),i}function L(n){const l=[],t=n.childNodes;return t.forEach((i,u)=>{if(U(i)){const s=fe.get(i),h=i;l.push({type:"entity",entity:s??{kind:h.dataset.kind??"",id:h.dataset.id??"",label:h.textContent??""}})}else if(i.nodeType===1&&i.tagName==="BR"){if(u===t.length-1)return;l.push({type:"text",text:`
+import{A as Ye,g as z,w as Je,k as Q,j as de,o as ue,x as De,h as Qe,i as N,u as Ne,a as H,d as O,b as Z,l as ee,c as $,F as Oe,S as G,t as S,Q as Ze,e as et}from"./define-CI0y3eE4.js";import{c as P}from"./cn-DN5AWfiS.js";import{u as tt,c as nt,a as rt}from"./overlay-DBMFXie6.js";function M(n){if(n==null)return[];if(typeof n=="string")return n.length?[{type:"text",text:n}]:[];const l=[];for(const t of n)if(t.type==="text"){if(!t.text)continue;const i=l[l.length-1];i&&i.type==="text"?l[l.length-1]={type:"text",text:i.text+t.text}:l.push({type:"text",text:t.text})}else l.push({type:"entity",entity:t.entity});return l}function te(n,l){let t="";for(const i of n)i.type==="text"?t+=i.text:t+=i.entity.promptText??i.entity.label;return t}function he(n){return n.filter(l=>l.type==="entity").map(l=>l.entity)}function ne(n){return n.every(l=>l.type==="text"&&l.text.length===0)}const C="\u200B",pe="data-kai-entity",fe=new WeakMap;function U(n){return!!n&&n.nodeType===1&&n.hasAttribute(pe)}function re(n){return n.ownerDocument.createTreeWalker(n,NodeFilter.SHOW_TEXT,{acceptNode(l){let t=l.parentElement;for(;t&&t!==n;){if(t.hasAttribute(pe))return NodeFilter.FILTER_REJECT;t=t.parentElement}return NodeFilter.FILTER_ACCEPT}})}function ot(n){switch(n){case"skill":return"/";case"agent":return"@";default:return""}}function Le(n){const l=t=>`<svg viewBox="0 0 24 24" width="1em" height="1em" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${t}</svg>`;switch(n){case"agent":return l('<rect x="4" y="8" width="16" height="12" rx="3"/><path d="M12 4.5V8M9.5 13.5v1.5M14.5 13.5v1.5"/><circle cx="12" cy="3" r="1.2"/>');case"plugin":return l('<path d="M9 2v4M15 2v4M6 6h12v5a6 6 0 0 1-12 0zM12 17v5"/>');default:return""}}function Ie(n,l,t){const i=n.createElement("span");i.setAttribute(pe,""),i.setAttribute("contenteditable","false"),i.dataset.kind=l.kind,i.dataset.id=l.id,i.className="kai-composer-pill";const u=ot(l.kind);if(u){const s=n.createElement("span");s.className="kai-composer-pill-sigil",s.setAttribute("aria-hidden","true"),s.textContent=u,i.appendChild(s)}else{const s=l.icon??t?.[l.kind];if(s){const h=n.createElement("img");h.src=s,h.alt="",h.className="kai-composer-pill-icon",i.appendChild(h)}else{const h=Le(l.kind);if(h){const f=n.createElement("span");f.className="kai-composer-pill-icon kai-composer-pill-glyph",f.setAttribute("aria-hidden","true"),f.innerHTML=h,i.appendChild(f)}}}return i.appendChild(n.createTextNode(l.label)),fe.set(i,l),i}function L(n){const l=[],t=n.childNodes;return t.forEach((i,u)=>{if(U(i)){const s=fe.get(i),h=i;l.push({type:"entity",entity:s??{kind:h.dataset.kind??"",id:h.dataset.id??"",label:h.textContent??""}})}else if(i.nodeType===1&&i.tagName==="BR"){if(u===t.length-1)return;l.push({type:"text",text:`
 `})}else i.nodeType===3&&l.push({type:"text",text:(i.textContent??"").split(C).join("")})}),M(l)}function oe(n,l,t=document,i){n.textContent="";for(const u of l)u.type==="text"?n.appendChild(t.createTextNode(u.text)):(n.appendChild(Ie(t,u.entity,i)),n.appendChild(t.createTextNode(C)))}function it(n,l,t){if(l<0||l>n.length)return null;for(let i=l-1;i>=0;i--){const u=n[i];if(/\s/.test(u))return null;if(t.includes(u))return i===0||/\s/.test(n[i-1])?{char:u,query:n.slice(i+1,l),start:i}:null}return null}function at(n,l,t){if(!t.length)return null;const i=t.map(h=>h.char),u=it(n,l,i);if(!u)return null;const s=t.find(h=>h.char===u.char);return s?{def:s,query:u.query,start:u.start}:null}function lt(n){return n.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function st(n,l){const t=[];for(const s of l){let h,f;typeof s=="string"?(h=new RegExp(lt(s),"gi"),f=void 0):(h=new RegExp(s.pattern,s.flags??"gi"),f=s.class),h.lastIndex=0;let k;for(;(k=h.exec(n))!==null;){const x=k.index,w=x+k[0].length;if(w===x){h.lastIndex=x+1;continue}t.push({start:x,end:w,class:f})}}t.sort((s,h)=>s.start-h.start);const i=[];let u=-1;for(const s of t)s.start>=u&&(i.push(s),u=s.end);return i}function ct(){try{return typeof CSS<"u"&&typeof CSS.highlights<"u"&&typeof Highlight<"u"}catch{return!1}}const dt="kai-composer-highlight";function ut(n,l,t,i=dt){if(!ct())return;const u=CSS.highlights;if(l.length===0){u.delete(i);return}const s=[];let h=0;const f=n.ownerDocument,k=re(n);let x=k.nextNode();for(;x;){const v=x.textContent??"",b=[];for(let p=0;p<v.length;p++)v[p]!==t&&b.push(p);if(b.length>0){const p=new Int32Array(b.length);for(let m=0;m<b.length;m++)p[m]=b[m];s.push({node:x,strippedStart:h,strippedToRaw:p}),h+=b.length}x=k.nextNode()}function w(v){let b=0,p=s.length-1;for(;b<=p;){const m=b+p>>1,T=s[m],q=T.strippedStart+T.strippedToRaw.length;if(v<T.strippedStart)p=m-1;else if(v>=q)b=m+1;else{const R=v-T.strippedStart;return{node:T.node,rawOffset:T.strippedToRaw[R]}}}if(s.length>0){const m=s[s.length-1];if(v-m.strippedStart===m.strippedToRaw.length)return{node:m.node,rawOffset:m.strippedToRaw[m.strippedToRaw.length-1]+1}}return null}const y=[];for(const v of l){const b=w(v.start),p=w(v.end);if(!b||!p)continue;const m=f.createRange();m.setStart(b.node,b.rawOffset),m.setEnd(p.node,p.rawOffset),y.push(m)}if(y.length===0){u.delete(i);return}const A=new Highlight(...y);u.set(i,A)}function ht(n,l=200){let t=[n],i=0;return{record(u,s){if(s&&i===t.length-1){t[i]=u;return}t=t.slice(0,i+1),t.push(u),t.length>l?t.shift():i++},undo(){return i===0?null:(i--,t[i])},redo(){return i>=t.length-1?null:(i++,t[i])},reset(u){t=[u],i=0},canUndo(){return i>0},canRedo(){return i<t.length-1},size(){return t.length}}}var pt=S("<style>"),ft=S(`<style>
         .kai-composer-pill {
           display: inline-flex; align-items: center; gap: 0.2rem;