@av-pi-studio/ui-library 0.0.0-stage → 0.0.115

package/dist/stores/announcer-store.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Announcer store — the single visually-hidden `aria-live` region's current text
+ * (sprint-069/task-008, § 08/§ 11). One region for the whole app, not one per row/tab/header, so a
+ * pending-question transition, a `notify` effect, or a background `set_editor_text` replacement
+ * are all heard the same way regardless of which session or pane produced them.
+ *
+ * `announce.ts` (§ 08 pending-question transitions) and `agent-ui-store.ts`'s `notifyEffect`/
+ * `composerTextEffect` (§ 11) are this store's only writers, via `speak`/`clearWhenIdle` below —
+ * never `useAnnouncerStore.setState` directly from elsewhere.
+ */
+export type AnnouncementPoliteness = "polite" | "assertive";
+interface AnnouncerStoreState {
+    message: string;
+    politeness: AnnouncementPoliteness;
+}
+export declare const useAnnouncerStore: import("zustand").UseBoundStore<import("zustand").StoreApi<AnnouncerStoreState>>;
+/** § 08 "nothing pending anywhere: region emptied, nothing spoken" — the delay between the last
+ *  resolution's own announcement (if any fired in the same commit) and the region being emptied.
+ *  Emptying it in the *same* synchronous update as the resolution's `speak()` would let React
+ *  coalesce both `setState` calls into one commit, so the intermediate "Answered in …" text would
+ *  never actually reach the DOM for a screen reader to read — this delay is what makes the
+ *  resolution announcement itself observable before the region goes quiet. */
+export declare const ANNOUNCE_CLEAR_DELAY_MS = 4000;
+/** Sets the live region's current text. A fresh announcement always pre-empts any clear scheduled
+ *  by an earlier `clearWhenIdle` call — a new pending question arriving inside the clear delay
+ *  above must not be silently wiped out by it. */
+export declare function speak(text: string, politeness?: AnnouncementPoliteness): void;
+/** Schedules the region to empty itself once nothing is pending anywhere. See
+ *  `ANNOUNCE_CLEAR_DELAY_MS` for why this is deferred rather than immediate. Calling this again
+ *  before the timer fires (e.g. two sessions both clear out in quick succession) simply restarts
+ *  the same delay rather than stacking timers. */
+export declare function clearWhenIdle(): void;
+/** Test-only: reset to initial state and cancel any pending timer, so one test's scheduled clear
+ *  cannot fire during a later, unrelated test. */
+export declare function resetAnnouncerStoreForTests(): void;
+export {};
+//# sourceMappingURL=announcer-store.d.ts.map

package/dist/stores/toast-store.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Toast store — sprint-069/task-005, the first consumer of `ui/toast.ts`'s previously-unimported
+ * logic. Owns queueing/stacking/dismissal decisions (plain data, testable under Node) plus the
+ * real dismiss timers (`setTimeout`, kept in a module-level `Map` — a timer handle is not display
+ * data, so it never enters the reactive state; mirrors `agent-ui-store.ts`'s module-level cache
+ * convention for the identical reason).
+ *
+ * Stacking (§ 11): at most `MAX_VISIBLE_TOASTS` are ever visible. `toasts` is the full FIFO queue,
+ * oldest first; `toasts.slice(0, MAX_VISIBLE_TOASTS)` is what's actually shown —
+ * `ToastViewport.tsx` renders exactly that slice, and the store itself never trims the array. A
+ * queued (not-yet-visible) entry's dismiss countdown starts the moment it is *promoted* into a
+ * visible slot, not at `show()` time — `promoteIfNewlyVisible` resets `shownAt` to that instant, so
+ * a toast that waited behind others still gets its full nominal duration once actually shown.
+ *
+ * "Top" — what `dismissTop()` (Esc) removes, and the visually topmost slot in the top-anchored
+ * viewport — is `toasts[0]`, the longest-visible entry; new toasts append below it, growing the
+ * stack downward from the anchor edge.
+ */
+import { type ToastEntry, type ToastOptions } from "../ui/toast.js";
+export declare const MAX_VISIBLE_TOASTS = 3;
+interface ToastStoreState {
+    toasts: ToastEntry[];
+    show(content: string, opts?: ToastOptions): string;
+    copied(label?: string): string;
+    error(message: string): string;
+    dismiss(id: string): void;
+    dismissTop(): void;
+    pause(id: string): void;
+    resume(id: string): void;
+}
+export declare const useToastStore: import("zustand").UseBoundStore<import("zustand").StoreApi<ToastStoreState>>;
+/** Test-only: clears live timers and resets state — a fresh `useToastStore.setState({ toasts: [] })`
+ * alone would leak `timers`/`nextId` across test cases, the same class of bug `test/reset-stores.ts`'s
+ * header comment warns about for every other store. */
+export declare function resetToastStoreForTests(): void;
+export {};
+//# sourceMappingURL=toast-store.d.ts.map

package/dist/styles.css

@@ -0,0 +1 @@
+:root{--piui-stylesheet: 1}.piui-Button_btn_Gurhr{display:inline-flex;align-items:center;justify-content:center;gap:var(--pi-spacing-8);border-radius:var(--pi-radius-lg);border:1px solid transparent;font-family:var(--pi-font-ui);font-weight:500;cursor:pointer;user-select:none;white-space:nowrap;text-decoration:none;outline:none;transition:opacity .12s ease,background-color .12s ease,border-color .12s ease;box-sizing:border-box}.piui-Button_btn_Gurhr:focus-visible{outline:2px solid var(--pi-color-accent);outline-offset:2px}.piui-Button_btn_Gurhr:disabled,.piui-Button_btn_Gurhr[aria-disabled=true]{cursor:not-allowed;pointer-events:none}.piui-Button_default_6Na6E{background-color:var(--pi-color-accent);color:var(--pi-color-accentForeground);border-color:var(--pi-color-accent)}.piui-Button_default_6Na6E:hover:not(:disabled){filter:brightness(1.08)}.piui-Button_secondary_RrsWU{background-color:var(--pi-color-surface3);color:var(--pi-color-foreground);border-color:var(--pi-color-border)}.piui-Button_secondary_RrsWU:hover:not(:disabled){background-color:var(--pi-color-surface2)}.piui-Button_outline_u49OM{background-color:transparent;color:var(--pi-color-accentBright);border-color:var(--pi-color-accent)}.piui-Button_outline_u49OM:hover:not(:disabled){background-color:var(--pi-color-surface1)}.piui-Button_ghost_4QL_5{background-color:transparent;color:var(--pi-color-foregroundMuted);border-color:transparent}.piui-Button_ghost_4QL_5:hover:not(:disabled){color:var(--pi-color-foreground);background-color:var(--pi-color-surface1)}.piui-Button_destructive_BMEqt{background-color:var(--pi-color-destructive);color:var(--pi-color-destructiveForeground);border-color:var(--pi-color-destructive)}.piui-Button_destructive_BMEqt:hover:not(:disabled){filter:brightness(1.1)}.piui-Button_iconOnly_7pcHE{padding-left:0!important;padding-right:0!important;aspect-ratio:1}.piui-Button_loadingSpinner_4QsZM{animation:piui-Button_piSpin_jrY7S .75s linear infinite;flex-shrink:0}@keyframes piui-Button_piSpin_jrY7S{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.piui-Button_loadingSpinner_4QsZM{animation:none}}.piui-IconButton_iconBtn_1pjCh{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;background:none;border:none;border-radius:var(--pi-radius-base);color:var(--pi-color-foregroundMuted);cursor:pointer}.piui-IconButton_iconBtn_1pjCh:hover{color:var(--pi-color-foreground);background:color-mix(in srgb,var(--icon-btn-hover-base, var(--pi-color-surface1)) 85%,var(--pi-color-foreground) 15%)}.piui-IconButton_iconBtn_1pjCh:focus-visible{outline:2px solid var(--pi-color-accent);outline-offset:2px}.piui-IconButton_iconBtn_1pjCh:disabled{opacity:.4;cursor:default}.piui-IconButton_xs_XuhGZ{width:20px;height:20px}.piui-IconButton_sm_K4UxD{width:28px;height:28px}.piui-StatusDot_dot_FazEE{display:inline-block;width:8px;height:8px;border-radius:var(--pi-radius-full);flex-shrink:0}.piui-StatusDot_spinner_6EanG{display:inline-block;width:var(--status-dot-size, 12px);height:var(--status-dot-size, 12px);border-radius:var(--pi-radius-full);border:var(--status-dot-border-width, 2px) solid var(--pi-color-border);flex-shrink:0;animation:piui-StatusDot_statusSpin_SLBl_ .7s linear infinite}@keyframes piui-StatusDot_statusSpin_SLBl_{to{transform:rotate(360deg)}}.piui-StatusDot_pulse_6SVAx{animation:piui-StatusDot_statusDotPulse_3EXPH 1.8s ease-in-out infinite}@keyframes piui-StatusDot_statusDotPulse_3EXPH{0%{box-shadow:0 0 color-mix(in srgb,var(--pi-color-statusWarning) 55%,transparent)}to{box-shadow:0 0 0 4px transparent}}@media(prefers-reduced-motion:reduce){.piui-StatusDot_pulse_6SVAx{animation:none}}.piui-StatusBadge_badge_dpv2y{display:inline-flex;align-items:center;justify-content:center;padding:var(--pi-spacing-1) var(--pi-spacing-6);border-radius:var(--pi-radius-full);border:1px solid;font-size:var(--pi-font-size-xs);font-family:var(--pi-font-ui);font-weight:500;white-space:nowrap;line-height:1.5}.piui-Avatar_avatar_tU-uh{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--pi-radius-md);flex-shrink:0;user-select:none}.piui-Avatar_avatarImg_Hvsfw{width:100%;height:100%;object-fit:cover}.piui-Avatar_avatarFallback_D9Coh{font-weight:600;color:#fff;font-family:var(--pi-font-ui);line-height:1}.piui-Shortcut_row_wIVo8{display:inline-flex;align-items:center;gap:var(--pi-spacing-4);flex-wrap:wrap}.piui-Shortcut_chip_7oXln{display:inline-flex;align-items:center;justify-content:center;padding:var(--pi-spacing-1) var(--pi-spacing-5);border-radius:var(--pi-radius-base);background-color:var(--pi-color-surface2);border:1px solid var(--pi-color-border);color:var(--pi-color-foregroundMuted);font-size:var(--pi-font-size-xs);font-family:var(--pi-font-mono);line-height:1.4;white-space:nowrap;user-select:none}.piui-Spinner_spinner_i0Eo6{display:inline-block;border-radius:var(--pi-radius-full);border-style:solid;border-color:currentColor transparent transparent transparent;animation:piui-Spinner_piSpinnerRotate_pjnJn .7s linear infinite;flex-shrink:0}@keyframes piui-Spinner_piSpinnerRotate_pjnJn{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.piui-Spinner_spinner_i0Eo6{animation:none}}.piui-Divider_divider_kxikv{border:none;margin:0;flex-shrink:0}.piui-Divider_horizontal_xrBl1{width:100%;height:1px;background-color:var(--pi-color-border)}.piui-Divider_vertical_X1mlS{height:100%;width:1px;background-color:var(--pi-color-border);display:inline-block}.piui-Switch_track_aPbaj{display:inline-flex;align-items:center;width:34px;height:20px;border-radius:var(--pi-radius-full);padding:var(--pi-spacing-2);cursor:pointer;transition:background-color .18s ease;flex-shrink:0;background-color:var(--pi-color-surface3);border:none;outline:none}.piui-Switch_track_aPbaj:focus-visible{outline:2px solid var(--pi-color-accent);outline-offset:2px}.piui-Switch_track_aPbaj.piui-Switch_checked_0nldb{background-color:var(--pi-color-accent)}.piui-Switch_track_aPbaj.piui-Switch_disabled_eqcyL{opacity:.5;cursor:not-allowed}.piui-Switch_thumb_LMs9-{width:16px;height:16px;border-radius:var(--pi-radius-full);background-color:#fff;transition:transform .18s ease;transform:translate(0);flex-shrink:0;box-shadow:0 1px 3px #0000004d}.piui-Switch_track_aPbaj.piui-Switch_checked_0nldb .piui-Switch_thumb_LMs9-{transform:translate(14px)}.piui-Surface_surface_LiS4_{background-color:var(--pi-color-surface1);border:1px solid var(--pi-color-border);border-radius:var(--pi-radius-xl);overflow:hidden}.piui-Surface_el0_2XZ1U{background-color:var(--pi-color-surface0)}.piui-Surface_el1_rbrNL{background-color:var(--pi-color-surface1)}.piui-Surface_el2_E0qPY{background-color:var(--pi-color-surface2)}.piui-Surface_el3_8AFvC{background-color:var(--pi-color-surface3)}.piui-Surface_noBorder_DFpH9{border-color:transparent}.piui-Panel_panel_TgAA7{display:flex;flex-direction:column;height:100%;min-height:0}.piui-EmptyState_emptyState__PSfF{display:flex;align-items:center;justify-content:center;gap:var(--pi-spacing-8);color:var(--pi-color-foregroundMuted);font-size:var(--pi-font-size-xs);padding:var(--pi-spacing-20);text-align:center}.piui-TextInput_input_CP24i{width:100%;padding:var(--pi-spacing-8) var(--pi-spacing-12);border-radius:var(--pi-radius-md);border:1px solid var(--pi-color-border);background-color:var(--pi-color-surface2);color:var(--pi-color-foreground);font-size:var(--pi-font-size-base);font-family:var(--pi-font-ui);outline:none;transition:border-color .12s ease;box-sizing:border-box}.piui-TextInput_input_CP24i::placeholder{color:var(--pi-color-foregroundMuted)}.piui-TextInput_input_CP24i:focus{border-color:var(--pi-color-accent);outline:2px solid var(--pi-color-accent);outline-offset:-1px}.piui-TextInput_input_CP24i:disabled{opacity:.5;cursor:not-allowed}.piui-TextInput_textarea_qA5om{resize:vertical;min-height:80px}.piui-ScrollArea_scrollArea_OyLlW{overflow:auto;scrollbar-width:thin;scrollbar-color:var(--pi-color-scrollbarHandle) transparent}.piui-ScrollArea_scrollArea_OyLlW::-webkit-scrollbar{width:6px;height:6px}.piui-ScrollArea_scrollArea_OyLlW::-webkit-scrollbar-track{background:transparent}.piui-ScrollArea_scrollArea_OyLlW::-webkit-scrollbar-thumb{background-color:var(--pi-color-scrollbarHandle);border-radius:var(--pi-radius-full)}.piui-ScrollArea_x_UYHZv{overflow-x:auto;overflow-y:hidden}.piui-ScrollArea_y_T2Ik1{overflow-y:auto;overflow-x:hidden}.piui-Checkbox_wrapper_fHQQB{display:inline-flex;align-items:center;gap:var(--pi-spacing-8);cursor:pointer;font-family:var(--pi-font-ui);font-size:var(--pi-font-size-md);color:var(--pi-color-foreground)}.piui-Checkbox_wrapper_fHQQB[data-disabled=true]{opacity:.5;pointer-events:none}.piui-Checkbox_box_vmxOG{width:16px;height:16px;border-radius:var(--pi-radius-sm);border:1.5px solid var(--pi-color-border);background-color:transparent;display:flex;align-items:center;justify-content:center;transition:background-color .1s,border-color .1s;flex-shrink:0}.piui-Checkbox_box_vmxOG[data-checked=true]{background-color:var(--pi-color-accent);border-color:var(--pi-color-accent)}.piui-Checkbox_checkmark_wpvgs{color:var(--pi-color-accentForeground)}.piui-Checkbox_nativeInput_c7VIf{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.piui-Select_select_UcnXJ{appearance:none;background-color:var(--pi-color-surface1);border:1px solid var(--pi-color-border);border-radius:var(--pi-radius-base);padding:var(--pi-spacing-8) var(--pi-spacing-32) var(--pi-spacing-8) var(--pi-spacing-10);font-family:var(--pi-font-ui);font-size:var(--pi-font-size-md);color:var(--pi-color-foreground);width:100%;outline:none;transition:border-color .1s;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23a1a1aa' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}.piui-Select_select_UcnXJ:focus{border-color:var(--pi-color-accent)}.piui-Select_select_UcnXJ:disabled{opacity:.5;cursor:not-allowed}.piui-Select_comboboxWrapper_3-YEh{position:relative;width:100%}.piui-Select_comboboxInput_7_5QP{width:100%;background-color:var(--pi-color-surface1);border:1px solid var(--pi-color-border);border-radius:var(--pi-radius-base);padding:var(--pi-spacing-8) var(--pi-spacing-10);font-family:var(--pi-font-ui);font-size:var(--pi-font-size-md);color:var(--pi-color-foreground);outline:none;box-sizing:border-box}.piui-Select_comboboxInput_7_5QP:focus{border-color:var(--pi-color-accent)}.piui-Select_comboboxList_pC6Rv{position:absolute;top:100%;left:0;right:0;z-index:80;max-height:200px;overflow-y:auto;background-color:var(--pi-color-surface1);border:1px solid var(--pi-color-border);border-radius:var(--pi-radius-base);margin-top:var(--pi-spacing-4);padding:var(--pi-spacing-4);box-shadow:var(--pi-shadow-md)}.piui-Select_comboboxOption_Up6ZY{padding:var(--pi-spacing-6) var(--pi-spacing-8);border-radius:var(--pi-radius-sm);font-size:var(--pi-font-size-md);font-family:var(--pi-font-ui);color:var(--pi-color-foreground);cursor:pointer;background:none;border:none;width:100%;text-align:left}.piui-Select_comboboxOption_Up6ZY:hover,.piui-Select_comboboxOptionHighlighted_kRH77{background-color:var(--pi-color-surface2)}.piui-Dialog_overlay_URgjn{position:fixed;inset:0;background:#0009;z-index:100}.piui-Dialog_contentWrapper_8Fiwj{position:fixed;inset:0;z-index:101;display:flex;align-items:center;justify-content:center;pointer-events:none}.piui-Dialog_dialog_Ip92p{pointer-events:auto;width:500px;max-width:90vw;max-height:70vh;background:var(--pi-color-surface1);border:1px solid var(--pi-color-border);border-radius:var(--pi-radius-lg);display:flex;flex-direction:column;box-shadow:0 8px 32px #00000080}.piui-Dialog_header_kRqVC{padding:var(--pi-spacing-12) var(--pi-spacing-14);border-bottom:1px solid var(--pi-color-border);display:flex;align-items:center;gap:var(--pi-spacing-8);flex-shrink:0}.piui-Dialog_title_RjMb_{font-size:var(--pi-font-size-sm);margin:0;flex:1;color:var(--pi-color-foreground);font-weight:600}.piui-Dialog_body_ZZ4NM{flex:1;display:flex;flex-direction:column;min-height:0}.piui-Dialog_footer_hfN9E{padding:var(--pi-spacing-10) var(--pi-spacing-14);border-top:1px solid var(--pi-color-border);display:flex;align-items:center;gap:var(--pi-spacing-8);justify-content:flex-end;flex-shrink:0}.piui-Dialog_bare_4a9gB{border:none;background:transparent;box-shadow:none;position:relative}.piui-Dialog_bareBody_Ix_qq{border-radius:var(--pi-radius-lg);overflow:hidden}.piui-Dialog_bareCloseBtn_Ml68W{position:absolute;top:-12px;right:-12px}.piui-Dialog_visuallyHidden_VsPG9{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.piui-ResizeHandle_handle_BuoJL{position:absolute;top:0;bottom:0;width:5px;cursor:col-resize;z-index:5;background:transparent;transition:background .12s ease}.piui-ResizeHandle_handle_BuoJL:hover,.piui-ResizeHandle_handle_BuoJL:active{background:var(--pi-color-accent)}.piui-Menu_trigger_YtxLF{position:fixed;width:1px;height:1px;padding:0;border:0;background:none;appearance:none;opacity:0;pointer-events:none}.piui-Menu_content_8knxX{min-width:140px;padding:var(--pi-spacing-4);border-radius:var(--pi-radius-md);background:var(--pi-color-surface1);border:1px solid var(--pi-color-border);box-shadow:0 8px 24px #0006;z-index:1000}.piui-Menu_item_zEpmQ{display:flex;align-items:center;gap:var(--pi-spacing-8);padding:var(--pi-spacing-6) var(--pi-spacing-10);border-radius:var(--pi-radius-base);font-size:var(--pi-font-size-sm);cursor:pointer;outline:none}.piui-Menu_item_zEpmQ:hover,.piui-Menu_item_zEpmQ[data-highlighted]{background:color-mix(in srgb,var(--pi-color-surface1) 85%,var(--pi-color-foreground) 15%)}.piui-Menu_item_zEpmQ[data-disabled]{opacity:.4;cursor:default}.piui-Menu_danger_5l7uC{color:var(--pi-color-statusDanger)}.piui-Menu_groupLabel_QPkyV{position:sticky;top:0;z-index:1;padding:var(--pi-spacing-6) var(--pi-spacing-8) var(--pi-spacing-4);background:var(--pi-color-surface1);color:var(--pi-color-foregroundMuted);font-size:var(--pi-font-size-3xs);font-weight:var(--pi-font-weight-bold);text-transform:uppercase;letter-spacing:.1em}.piui-Menu_sep_Lb8Po{height:1px;margin:var(--pi-spacing-4) 0;background:var(--pi-color-border)}.piui-Popover_content_zAtsY{max-width:calc(100vw - 16px);padding:var(--pi-spacing-12);border-radius:var(--pi-radius-md);background:var(--pi-color-surface1);border:1px solid var(--pi-color-border);box-shadow:0 8px 24px #0006;color:var(--pi-color-foreground);font-size:var(--pi-font-size-sm);z-index:1000}.piui-Announcer_visuallyHidden_L1DnS{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.piui-ToastViewport_viewport_Yx5mS{position:fixed;top:var(--pi-spacing-16);left:50%;transform:translate(-50%);z-index:200;display:flex;flex-direction:column;align-items:center;gap:var(--pi-spacing-8);pointer-events:none}.piui-ToastViewport_toast_Tzr1T{pointer-events:auto;display:flex;align-items:center;gap:var(--pi-spacing-8);max-width:420px;padding:var(--pi-spacing-8) var(--pi-spacing-8) var(--pi-spacing-8) var(--pi-spacing-12);background:var(--pi-color-surface1);border:var(--pi-border-width-1) solid var(--pi-color-border);border-left:var(--pi-border-width-2) solid var(--toast-rail, transparent);border-radius:var(--pi-radius-base);box-shadow:var(--pi-shadow-md);font-size:var(--pi-font-size-2xs);color:var(--pi-color-foreground);opacity:1;transform:translateY(0);transition:opacity .18s ease,transform .18s ease}@starting-style{.piui-ToastViewport_toast_Tzr1T{opacity:0;transform:translateY(-8px)}}.piui-ToastViewport_toast_Tzr1T.piui-ToastViewport_exiting_J8_Ab{opacity:0;transform:translateY(-8px);pointer-events:none}.piui-ToastViewport_content_GCPPy{flex:1;min-width:0;overflow-wrap:break-word}.piui-ToastViewport_close_KWFx7{flex:none;display:flex;align-items:center;justify-content:center;padding:var(--pi-spacing-1);border:none;background:transparent;border-radius:var(--pi-radius-base);color:var(--pi-color-foregroundMuted);cursor:pointer}.piui-ToastViewport_close_KWFx7:hover{background:color-mix(in srgb,var(--pi-color-background) 85%,var(--pi-color-foreground) 15%)}@media(prefers-reduced-motion:reduce){.piui-ToastViewport_toast_Tzr1T{transition:none}}

package/dist/theme/ThemeBoundary.d.ts

@@ -0,0 +1,38 @@
+/**
+ * ThemeBoundary — applies theme CSS variables before first paint, and publishes the resolved
+ * `AppearanceState` through React context so components that cannot consume CSS variables (an
+ * emulator configured through JavaScript) can follow the theme, mono font, and font-size setting.
+ * Wraps the app so no flash of wrong theme occurs.
+ */
+import { type ReactNode } from "react";
+import { type AppearanceMode, type AppearanceState, type KeyValueStore } from "./appearance-store.js";
+import { type AppearanceSettings, type Theme } from "./theme.js";
+import { type BrandConfig } from "../brand/config.js";
+export interface ThemeBoundaryProps {
+    /** Where appearance is persisted. Defaults to `localStorage` (`localStorageKvStore`). */
+    store?: KeyValueStore;
+    /** Key the appearance JSON lives under. Defaults to `pi-studio-appearance`. */
+    storageKey?: string;
+    brandConfig?: BrandConfig;
+    children: ReactNode;
+}
+/** Write side of the appearance controller, for settings UIs and theme switchers. */
+export interface AppearanceControls {
+    setMode(mode: AppearanceMode): void;
+    updateSettings(patch: Partial<AppearanceSettings>): void;
+}
+/**
+ * Synchronously applies theme on first render, then listens for system changes.
+ */
+export declare function ThemeBoundary({ store, storageKey, brandConfig, children, }: ThemeBoundaryProps): import("react").JSX.Element;
+/** Read the current appearance state (mode, settings, resolved theme). Must be under `ThemeBoundary`. */
+export declare function useAppearance(): AppearanceState;
+/** Read the resolved `Theme` (colors, fontSize, fontFamily, ...). Must be under `ThemeBoundary`. */
+export declare function useResolvedTheme(): Theme;
+/**
+ * Change the theme (`setMode`) or appearance settings (`updateSettings`); the new value is applied
+ * to the document and persisted. The returned object is stable for the life of the boundary.
+ * Must be under `ThemeBoundary`.
+ */
+export declare function useAppearanceControls(): AppearanceControls;
+//# sourceMappingURL=ThemeBoundary.d.ts.map

package/dist/theme/appearance-store.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Appearance store: persisted theme + appearance settings, system dark-mode following.
+ * design-system.md § Theme variants, § Behavior (Appearance)
+ */
+import { type ThemeName } from "./variants.js";
+import { type AppearanceSettings } from "./theme.js";
+import { type Theme } from "./theme.js";
+import { type BrandConfig } from "../brand/config.js";
+export interface KeyValueStore {
+    get(key: string): string | null;
+    set(key: string, value: string): void;
+}
+/** Default `localStorage` key for the persisted appearance JSON; existing installs keep theirs. */
+export declare const DEFAULT_APPEARANCE_STORAGE_KEY = "pi-studio-appearance";
+export interface AppearanceControllerOptions {
+    /** Key the appearance JSON is read from / written to. Defaults to `pi-studio-appearance`. */
+    storageKey?: string;
+}
+export type AppearanceMode = ThemeName | "system";
+export interface AppearanceState {
+    mode: AppearanceMode;
+    settings: AppearanceSettings;
+    resolvedTheme: Theme;
+}
+export interface AppearanceController {
+    getState(): AppearanceState;
+    setMode(mode: AppearanceMode): void;
+    updateSettings(patch: Partial<AppearanceSettings>): void;
+    /** Call to apply current theme to DOM (call on init + changes). */
+    apply(): void;
+    /** Start system-follow listener; returns cleanup. */
+    listen(): () => void;
+    /** Subscribe to state changes (mode/settings/system-follow). Returns an unsubscribe function. */
+    subscribe(listener: () => void): () => void;
+}
+export declare function createAppearanceController(store: KeyValueStore, brandInput?: BrandConfig, options?: AppearanceControllerOptions): AppearanceController;
+//# sourceMappingURL=appearance-store.d.ts.map

package/dist/theme/color-utils.d.ts

@@ -0,0 +1,13 @@
+export type Rgb = {
+    r: number;
+    g: number;
+    b: number;
+};
+export declare function hexToRgb(hex: string): Rgb;
+export declare function rgbToHex({ r, g, b }: Rgb): string;
+export declare function relativeLuminance(hex: string): number;
+export declare function contrastForeground(hex: string, dark?: string, light?: string): string;
+export declare function lighten(hex: string, amount: number): string;
+export declare function darken(hex: string, amount: number): string;
+export declare function isHexColor(value: string): boolean;
+//# sourceMappingURL=color-utils.d.ts.map

package/dist/theme/colors.d.ts

@@ -0,0 +1,111 @@
+import { lighten } from "./color-utils.js";
+import { palette } from "./palette.js";
+export type SyntaxColors = {
+    keyword: string;
+    string: string;
+    number: string;
+    boolean: string;
+    comment: string;
+    function: string;
+    variable: string;
+    type: string;
+    class: string;
+    constant: string;
+    operator: string;
+    punctuation: string;
+    tag: string;
+    attribute: string;
+    property: string;
+    regexp: string;
+    escape: string;
+    heading: string;
+    link: string;
+    deleted: string;
+    inserted: string;
+};
+export type TerminalTheme = {
+    background: string;
+    foreground: string;
+    cursor: string;
+    cursorAccent: string;
+    selectionBackground: string;
+    black: string;
+    red: string;
+    green: string;
+    yellow: string;
+    blue: string;
+    magenta: string;
+    cyan: string;
+    white: string;
+    brightBlack: string;
+    brightRed: string;
+    brightGreen: string;
+    brightYellow: string;
+    brightBlue: string;
+    brightMagenta: string;
+    brightCyan: string;
+    brightWhite: string;
+};
+export type ThemeColors = {
+    surface0: string;
+    surface1: string;
+    surface2: string;
+    surface3: string;
+    surface4: string;
+    surfaceDiffEmpty: string;
+    surfaceSidebar: string;
+    surfaceSidebarHover: string;
+    surfaceWorkspace: string;
+    foreground: string;
+    foregroundMuted: string;
+    accent: string;
+    accentBright: string;
+    accentForeground: string;
+    destructive: string;
+    destructiveForeground: string;
+    success: string;
+    successForeground: string;
+    border: string;
+    borderAccent: string;
+    statusSuccess: string;
+    statusDanger: string;
+    statusWarning: string;
+    statusMerged: string;
+    statusInfo: string;
+    diffAddition: string;
+    diffDeletion: string;
+    scrollbarHandle: string;
+    background: string;
+    popover: string;
+    popoverForeground: string;
+    primary: string;
+    secondary: string;
+    muted: string;
+    mutedForeground: string;
+    input: string;
+    ring: string;
+    palette: typeof palette;
+    syntax: SyntaxColors;
+    terminal: TerminalTheme;
+};
+export type DarkTintConfig = {
+    surface0: string;
+    surface1: string;
+    surface2: string;
+    surface3: string;
+    surface4: string;
+    surfaceDiffEmpty: string;
+    surfaceSidebar: string;
+    surfaceSidebarHover: string;
+    mutedForeground: string;
+    scrollbarHandle: string;
+    border: string;
+    borderAccent: string;
+    accent: string;
+    accentBright: string;
+    destructive: string;
+};
+export declare function buildDarkColors(tint: DarkTintConfig): ThemeColors;
+export declare function buildLightColors(): ThemeColors;
+export { lighten };
+//# sourceMappingURL=colors.d.ts.map

package/dist/theme/css-bridge.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Theme → CSS custom properties bridge.
+ * Flattens a Theme object into `--pi-*` CSS variables on :root.
+ * design-system.md § Purpose (render-stack decision)
+ */
+import { type Theme } from "./theme.js";
+/**
+ * Given a Theme, produces a flat Record<`--pi-${path}`, value> map
+ * suitable for setting on `document.documentElement.style`.
+ */
+export declare function flattenThemeToVars(theme: Theme): Record<string, string>;
+/**
+ * Apply a flattened variable map to the document root.
+ * Idempotent — re-applying the same map is a no-op (DOM diffing).
+ */
+export declare function applyVarsToRoot(vars: Record<string, string>): void;
+/**
+ * Full pipeline: flatten a Theme and apply to the DOM.
+ */
+export declare function applyThemeToDOM(theme: Theme): void;
+//# sourceMappingURL=css-bridge.d.ts.map

package/dist/theme/dev-warnings.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Development-only diagnostics for `ThemeBoundary`. The decision logic is pure and injectable so it
+ * is testable without a DOM; `ThemeBoundary` only wires it to the document and to the environment.
+ * Each diagnostic fires at most once per page.
+ */
+/** Custom property `styles.css` defines on `:root`; absent after mount ⇒ the stylesheet was never imported. */
+export declare const STYLESHEET_SENTINEL_VAR = "--piui-stylesheet";
+export declare const MISSING_STYLESHEET_MESSAGE = "[ui-library] styles.css is not loaded, so components render unstyled. Add `import \"@av-pi-studio/ui-library/styles.css\"` to your app entry.";
+export declare const MULTIPLE_BOUNDARIES_MESSAGE = "[ui-library] More than one ThemeBoundary is mounted. Only one per document is supported: each writes the same CSS variables on <html>, so the last write wins.";
+export interface DevWarnings {
+    /** Warn (once) when the sentinel custom property is empty. `readVar` returns its computed value. */
+    checkStylesheet(readVar: (name: string) => string): void;
+    /** Count a mounted boundary; warns (once) when a second is live. Returns the unregister function. */
+    registerBoundary(): () => void;
+}
+export declare function createDevWarnings(warn: (message: string) => void): DevWarnings;
+/**
+ * Page-wide instance used by `ThemeBoundary`. `ThemeBoundary` guards every use with an inline
+ * `process.env.NODE_ENV` check, which the *consumer's* bundler folds in a production build; with
+ * the `@__PURE__` mark the whole module (and its message strings) is then tree-shaken away.
+ */
+export declare const devWarnings: DevWarnings;
+//# sourceMappingURL=dev-warnings.d.ts.map

package/dist/theme/index.d.ts

@@ -0,0 +1,10 @@
+export { palette, type Palette, type PaletteScale, type PaletteShade } from "./palette.js";
+export { hexToRgb, rgbToHex, relativeLuminance, contrastForeground, lighten, darken, isHexColor, type Rgb, } from "./color-utils.js";
+export { spacing, baseFontSize, baseLineHeight, fontWeight, borderRadius, borderWidth, opacity, iconSize, buildShadows, DEFAULT_UI_FONT, DEFAULT_MONO_FONT, TERMINAL_FONT_STACK, type SpacingKey, type FontSizeKey, type Shadow, type ShadowSet, } from "./tokens.js";
+export { buildDarkColors, buildLightColors, type ThemeColors, type DarkTintConfig, type SyntaxColors, type TerminalTheme, } from "./colors.js";
+export { THEME_NAMES, THEME_VARIANTS, THEME_SWATCHES, type ThemeName, type ThemeVariant, } from "./variants.js";
+export { getTheme, applyAppearance, DEFAULT_THEME_NAME, type Theme, type AppearanceSettings, } from "./theme.js";
+export { flattenThemeToVars, applyVarsToRoot, applyThemeToDOM } from "./css-bridge.js";
+export { createAppearanceController, DEFAULT_APPEARANCE_STORAGE_KEY, type AppearanceControllerOptions, type AppearanceController, type AppearanceState, type AppearanceMode, type KeyValueStore, } from "./appearance-store.js";
+export { findTokenProblems, countTokenUsage, type TokenProblem, type TokenProblemKind, type TokenSourceFile, type TokenUsage, } from "./token-guard.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/theme/index.js

@@ -0,0 +1,39 @@
+import { D as e, a as o, b as r, c as T, T as t, d as i, e as n, f as E, g as l, h as A, i as p, j as _, k as d, l as b, m as h, n as c, o as g, p as F, q as M, r as N, s as S, t as m, u, v as H, w as L, x as C, y as D, z as O } from "../chunks/token-guard-B85Ysv3w.js";
+import { c as f, d as x, h as U, a as k, l as y, b as z, e as I } from "../chunks/theme-injection-BHAAhBYz.js";
+export {
+  e as DEFAULT_APPEARANCE_STORAGE_KEY,
+  o as DEFAULT_MONO_FONT,
+  r as DEFAULT_THEME_NAME,
+  T as DEFAULT_UI_FONT,
+  t as TERMINAL_FONT_STACK,
+  i as THEME_NAMES,
+  n as THEME_SWATCHES,
+  E as THEME_VARIANTS,
+  l as applyAppearance,
+  A as applyThemeToDOM,
+  p as applyVarsToRoot,
+  _ as baseFontSize,
+  d as baseLineHeight,
+  b as borderRadius,
+  h as borderWidth,
+  c as buildDarkColors,
+  g as buildLightColors,
+  F as buildShadows,
+  f as contrastForeground,
+  M as countTokenUsage,
+  N as createAppearanceController,
+  x as darken,
+  S as findTokenProblems,
+  m as flattenThemeToVars,
+  u as fontWeight,
+  H as getTheme,
+  U as hexToRgb,
+  L as iconSize,
+  k as isHexColor,
+  y as lighten,
+  C as opacity,
+  D as palette,
+  z as relativeLuminance,
+  I as rgbToHex,
+  O as spacing
+};

package/dist/theme/palette.d.ts

@@ -0,0 +1,19 @@
+export type PaletteShade = "50" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "950";
+export type PaletteScale = Readonly<Record<PaletteShade, string>>;
+export declare const palette: {
+    readonly zinc: Readonly<Record<PaletteShade, string>>;
+    readonly gray: Readonly<Record<PaletteShade, string>>;
+    readonly slate: Readonly<Record<PaletteShade, string>>;
+    readonly blue: Readonly<Record<PaletteShade, string>>;
+    readonly green: Readonly<Record<PaletteShade, string>>;
+    readonly red: Readonly<Record<PaletteShade, string>>;
+    readonly teal: Readonly<Record<PaletteShade, string>>;
+    readonly amber: Readonly<Record<PaletteShade, string>>;
+    readonly yellow: Readonly<Record<PaletteShade, string>>;
+    readonly purple: Readonly<Record<PaletteShade, string>>;
+    readonly orange: Readonly<Record<PaletteShade, string>>;
+    readonly white: "#ffffff";
+    readonly black: "#000000";
+};
+export type Palette = typeof palette;
+//# sourceMappingURL=palette.d.ts.map

package/dist/theme/theme.d.ts

@@ -0,0 +1,47 @@
+import { borderRadius, borderWidth, fontWeight, iconSize, opacity, spacing, type FontSizeKey, type ShadowSet } from "./tokens.js";
+import { type ThemeColors } from "./colors.js";
+import { type ThemeName } from "./variants.js";
+export type Theme = {
+    name: ThemeName;
+    colorScheme: "light" | "dark";
+    colors: ThemeColors;
+    spacing: typeof spacing;
+    fontSize: Record<FontSizeKey, number>;
+    fontFamily: {
+        ui: string;
+        mono: string;
+    };
+    lineHeight: Record<"diff", number>;
+    iconSize: typeof iconSize;
+    fontWeight: typeof fontWeight;
+    borderRadius: typeof borderRadius;
+    borderWidth: typeof borderWidth;
+    opacity: typeof opacity;
+    shadow: ShadowSet;
+    swatch: string;
+};
+export type AppearanceSettings = {
+    /** One of the six named theme variants. */
+    themeName?: ThemeName;
+    /** Custom UI font family string; empty/undefined → platform default. */
+    uiFont?: string;
+    /** Custom mono font family string; empty/undefined → platform default. */
+    monoFont?: string;
+    /**
+     * Desired base font size (px). Every fontSize rung is scaled relative to `baseFontSize.base`,
+     * so passing that value through is a no-op. Clamped 10–24.
+     */
+    fontSize?: number;
+};
+/**
+ * Apply appearance settings to a base theme and return a new patched theme.
+ * The base theme object is never mutated.
+ * Code/mono surfaces keep the mono font because they reference `fontFamily.mono`
+ * independently — a custom `uiFont` only patches `fontFamily.ui`.
+ */
+export declare function applyAppearance(base: Theme, settings: AppearanceSettings): Theme;
+/** Build a fresh Theme for the given name with default appearance settings. */
+export declare function getTheme(name: ThemeName): Theme;
+export declare const DEFAULT_THEME_NAME: ThemeName;
+export { type ThemeName };
+//# sourceMappingURL=theme.d.ts.map

package/dist/theme/token-guard.d.ts

@@ -0,0 +1,20 @@
+export type TokenProblemKind = "dangling-var" | "illegal-key" | "literal-font-size" | "unknown-font-rung";
+export interface TokenProblem {
+    kind: TokenProblemKind;
+    /** Source file, or `"(theme)"` for problems in emitted keys. */
+    path: string;
+    message: string;
+}
+export interface TokenSourceFile {
+    path: string;
+    text: string;
+}
+export interface TokenUsage {
+    /** Static `var(--pi-*)`/`var(--syntax-*)` references examined. */
+    varRefs: number;
+    /** `font-size` declarations examined in `.css` files. */
+    fontSizeDeclarations: number;
+}
+export declare function countTokenUsage(files: readonly TokenSourceFile[]): TokenUsage;
+export declare function findTokenProblems(files: readonly TokenSourceFile[]): TokenProblem[];
+//# sourceMappingURL=token-guard.d.ts.map

package/dist/theme/tokens.d.ts

@@ -0,0 +1,105 @@
+export declare const spacing: {
+    readonly "0": 0;
+    readonly "1": 1;
+    readonly "2": 2;
+    readonly "3": 3;
+    readonly "4": 4;
+    readonly "5": 5;
+    readonly "6": 6;
+    readonly "7": 7;
+    readonly "8": 8;
+    readonly "10": 10;
+    readonly "11": 11;
+    readonly "12": 12;
+    readonly "14": 14;
+    readonly "16": 16;
+    readonly "20": 20;
+    readonly "24": 24;
+    readonly "26": 26;
+    readonly "30": 30;
+    readonly "32": 32;
+    readonly "48": 48;
+    readonly "64": 64;
+    readonly "80": 80;
+    readonly "96": 96;
+    readonly "128": 128;
+};
+export type Spacing = typeof spacing;
+export type SpacingKey = keyof Spacing;
+export type FontSizeKey = "4xs" | "3xs" | "2xs" | "xs" | "code" | "sm" | "md" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
+export declare const baseFontSize: Readonly<Record<FontSizeKey, number>>;
+export declare const fontWeight: {
+    readonly normal: "400";
+    readonly medium: "500";
+    readonly semibold: "600";
+    readonly bold: "700";
+};
+export type FontWeight = typeof fontWeight;
+export declare const borderRadius: {
+    readonly none: 0;
+    readonly sm: 2;
+    readonly base: 4;
+    readonly md: 6;
+    readonly lg: 8;
+    readonly xl: 12;
+    readonly "2xl": 16;
+    readonly full: 9999;
+};
+export type BorderRadius = typeof borderRadius;
+export declare const borderWidth: {
+    readonly "0": 0;
+    readonly "1": 1;
+    readonly "2": 2;
+};
+export type BorderWidth = typeof borderWidth;
+export declare const opacity: {
+    readonly "0": 0;
+    readonly "50": 0.5;
+    readonly "100": 1;
+};
+export type Opacity = typeof opacity;
+export declare const iconSize: {
+    readonly xs: 12;
+    readonly sm: 14;
+    readonly md: 16;
+    readonly lg: 20;
+};
+export type IconSize = typeof iconSize;
+export declare const baseLineHeight: {
+    readonly diff: 22;
+};
+export declare const DEFAULT_UI_FONT = "system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif";
+export declare const DEFAULT_MONO_FONT = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace";
+/**
+ * Terminal-only font stack (`features/terminal/TerminalPanel.tsx`).
+ *
+ * Separate from `DEFAULT_MONO_FONT` on purpose: the app's mono surfaces render *our* text, where a
+ * platform font is the right default, while the terminal renders a real shell whose prompt may
+ * paint Nerd Font glyphs (powerlevel10k's own docs recommend MesloLGS NF). Those glyphs live in
+ * the private-use planes and simply do not exist in `ui-monospace`.
+ *
+ * Order is the whole design:
+ *   1-2. A locally installed MesloLGS NF — a user who followed the p10k font instructions gets
+ *        exactly what their desktop terminal shows, and downloads nothing.
+ *   3.   "Cascadia Mono NF", the bundled webfont (`theme/fonts.css`) — the guaranteed floor, so
+ *        icons render on a machine that has no Nerd Font installed at all.
+ *   4+.  Platform monospace, for the case where even the bundled face fails to load.
+ * Fallback is resolved by the browser per character, which is what makes 1-3 compose: MesloLGS NF
+ * has no braille glyphs, so a spinner falls through to the bundled face while the rest of the line
+ * stays Meslo.
+ */
+export declare const TERMINAL_FONT_STACK = "\"MesloLGS NF\", \"MesloLGS Nerd Font Mono\", \"Cascadia Mono NF\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace";
+export type Shadow = {
+    color: string;
+    offsetX: number;
+    offsetY: number;
+    radius: number;
+    elevation: number;
+};
+export type ShadowSet = {
+    sm: Shadow;
+    md: Shadow;
+    lg: Shadow;
+};
+export declare function buildShadows(colorScheme: "light" | "dark"): ShadowSet;
+//# sourceMappingURL=tokens.d.ts.map

package/dist/theme/variants.d.ts

@@ -0,0 +1,12 @@
+import { type ThemeColors } from "./colors.js";
+export declare const THEME_SWATCHES: Readonly<Record<ThemeName, string>>;
+export type ThemeName = "light" | "dark" | "zinc" | "midnight" | "claude" | "ghostty";
+export declare const THEME_NAMES: readonly ThemeName[];
+export type ThemeVariant = {
+    name: ThemeName;
+    colorScheme: "light" | "dark";
+    colors: ThemeColors;
+    swatch: string;
+};
+export declare const THEME_VARIANTS: Readonly<Record<ThemeName, ThemeVariant>>;
+//# sourceMappingURL=variants.d.ts.map

package/dist/ui/avatar.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Deterministic avatar background color derived from a project key string.
+ * The same key always produces the same color — stable across renders.
+ */
+export declare function avatarColor(key: string): string;
+/**
+ * Returns the initial letter to display in the avatar fallback.
+ * Uses the first alphanumeric character of the key, uppercased.
+ */
+export declare function avatarInitial(key: string): string;
+//# sourceMappingURL=avatar.d.ts.map