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

package/dist/ui/button.d.ts

@@ -0,0 +1,34 @@
+export type ButtonVariant = "default" | "secondary" | "outline" | "ghost" | "destructive";
+export type ButtonSize = "xs" | "sm" | "md" | "lg";
+export declare const BUTTON_MIN_HEIGHT: Record<ButtonSize, number>;
+export declare const BUTTON_ICON_SIZE: Record<ButtonSize, number>;
+export declare const BUTTON_PADDING_H: Record<ButtonSize, number>;
+export declare const BUTTON_FONT_SIZE: Record<ButtonSize, string>;
+export type ButtonStateStyle = {
+    opacity: number;
+    /** Token key for background color. null = no bg (transparent). */
+    bgToken: string | null;
+};
+/**
+ * Resolve the opacity and background token for a button given its state.
+ * - pressed → 0.85 opacity
+ * - disabled or loading → 0.5 opacity
+ * - ghost hover → special token swap (handled by caller reading `isGhostHover`)
+ */
+export declare function resolveButtonState(opts: {
+    variant: ButtonVariant;
+    pressed: boolean;
+    disabled: boolean;
+    loading: boolean;
+}): {
+    opacity: number;
+    isGhostHover: false;
+};
+/**
+ * Returns the correct text/icon color token key for each variant.
+ * This is what callers pass to the theme-prop binder for icon color.
+ */
+export declare function buttonIconColorToken(variant: ButtonVariant): string;
+/** Returns "foreground" when ghost is hovered, else the default ghost color. */
+export declare function ghostHoverIconToken(isHovered: boolean): string;
+//# sourceMappingURL=button.d.ts.map

package/dist/ui/combobox.d.ts

@@ -0,0 +1,55 @@
+export type ComboboxOption<T> = {
+    value: T;
+    label: string;
+    description?: string;
+    kind?: string;
+    /** Section this option belongs to — `option-groups.ts`'s `groupOptions` collects consecutive
+     * runs of the same value under one header (e.g. `ModelMenu`'s per-provider bands). Options
+     * without a `group` fall into a single trailing ungrouped bucket. */
+    group?: string;
+    disabled?: boolean;
+};
+export type ComboboxState<T> = {
+    query: string;
+    highlightedIndex: number;
+    isOpen: boolean;
+    options: ComboboxOption<T>[];
+    /** Filtered options (derived from options + query). */
+    filtered: ComboboxOption<T>[];
+};
+/**
+ * Filter options by a search query (case-insensitive substring match on label
+ * and optional description).
+ */
+export declare function filterOptions<T>(options: ComboboxOption<T>[], query: string): ComboboxOption<T>[];
+export type ComboboxAction = {
+    type: "OPEN";
+} | {
+    type: "CLOSE";
+} | {
+    type: "SET_QUERY";
+    query: string;
+} | {
+    type: "ARROW_DOWN";
+} | {
+    type: "ARROW_UP";
+} | {
+    type: "SELECT_HIGHLIGHTED";
+} | {
+    type: "SELECT_INDEX";
+    index: number;
+};
+/**
+ * Pure reducer for the combobox keyboard-navigation state machine.
+ * Callers integrate this with their own state management.
+ */
+export declare function comboboxReducer<T>(state: ComboboxState<T>, action: ComboboxAction): ComboboxState<T>;
+/** Build initial combobox state for a given options list. */
+export declare function initialComboboxState<T>(options: ComboboxOption<T>[]): ComboboxState<T>;
+/**
+ * If `allowCustomValue` is true and the query doesn't match any existing option
+ * exactly (case-insensitive), prepend a synthetic "create" option to the filtered
+ * list with the query string as the value.
+ */
+export declare function withCustomValueOption(filtered: ComboboxOption<string>[], query: string, prefix?: string): ComboboxOption<string>[];
+//# sourceMappingURL=combobox.d.ts.map

package/dist/ui/index.d.ts

@@ -0,0 +1,10 @@
+export * from "./button.js";
+export * from "./shortcut.js";
+export * from "./avatar.js";
+export * from "./combobox.js";
+export * from "./status-badge.js";
+export * from "./toast.js";
+export * from "./status-dot.js";
+export * from "./screen-header.js";
+export * from "./option-groups.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/index.js

@@ -0,0 +1,406 @@
+import { HEADER_INNER_HEIGHT_MOBILE as g, HEADER_INNER_HEIGHT as p, WINDOW_CHROME as h } from "../breakpoints.js";
+const k = {
+  xs: 28,
+  sm: 32,
+  md: 36,
+  lg: 40
+}, x = {
+  xs: 12,
+  sm: 14,
+  md: 16,
+  lg: 20
+}, S = {
+  xs: 8,
+  sm: 10,
+  md: 12,
+  lg: 16
+}, v = {
+  xs: "var(--pi-font-size-xs)",
+  sm: "var(--pi-font-size-sm)",
+  md: "var(--pi-font-size-md)",
+  lg: "var(--pi-font-size-base)"
+};
+function b(e) {
+  const { pressed: n, disabled: t, loading: r } = e;
+  return t || r ? { opacity: 0.5, isGhostHover: !1 } : n ? { opacity: 0.85, isGhostHover: !1 } : { opacity: 1, isGhostHover: !1 };
+}
+function E(e) {
+  switch (e) {
+    case "default":
+      return "accentForeground";
+    case "secondary":
+      return "foreground";
+    case "outline":
+      return "accent";
+    case "ghost":
+      return "foregroundMuted";
+    // swaps to "foreground" on hover
+    case "destructive":
+      return "destructiveForeground";
+  }
+}
+function M(e) {
+  return e ? "foreground" : "foregroundMuted";
+}
+const m = {
+  cmd: "⌘",
+  command: "⌘",
+  ctrl: "⌃",
+  control: "⌃",
+  shift: "⇧",
+  alt: "⌥",
+  option: "⌥",
+  meta: "⌘"
+}, w = {
+  cmd: "Ctrl",
+  command: "Ctrl",
+  ctrl: "Ctrl",
+  control: "Ctrl",
+  shift: "Shift",
+  alt: "Alt",
+  option: "Alt",
+  meta: "Win"
+}, _ = {
+  cmd: "Ctrl",
+  command: "Ctrl",
+  ctrl: "Ctrl",
+  control: "Ctrl",
+  shift: "Shift",
+  alt: "Alt",
+  option: "Alt",
+  meta: "Super"
+};
+function I(e) {
+  switch (e) {
+    case "macos":
+      return m;
+    case "windows":
+      return w;
+    case "linux":
+      return _;
+  }
+}
+function T(e, n) {
+  const t = I(n), r = e.toLowerCase().split("+").map((s) => {
+    const o = t[s];
+    return o !== void 0 ? o : [
+      "enter",
+      "return",
+      "tab",
+      "escape",
+      "esc",
+      "backspace",
+      "delete",
+      "space",
+      "arrowup",
+      "arrowdown",
+      "arrowleft",
+      "arrowright",
+      "home",
+      "end",
+      "pageup",
+      "pagedown",
+      "f1",
+      "f2",
+      "f3",
+      "f4",
+      "f5",
+      "f6",
+      "f7",
+      "f8",
+      "f9",
+      "f10",
+      "f11",
+      "f12"
+    ].includes(s) ? s.charAt(0).toUpperCase() + s.slice(1) : s.length === 1 ? s.toUpperCase() : s;
+  });
+  return n === "macos" ? r.join("") : r.join("+");
+}
+function A(e, n) {
+  return e.map((t) => T(t, n)).join(" ");
+}
+const a = [
+  "#2563eb",
+  // blue-600
+  "#16a34a",
+  // green-600
+  "#9333ea",
+  // purple-600
+  "#dc2626",
+  // red-600
+  "#0d9488",
+  // teal-600
+  "#d97706",
+  // amber-600
+  "#db2777",
+  // pink-600
+  "#0891b2",
+  // cyan-600
+  "#ea580c",
+  // orange-600
+  "#4f46e5",
+  // indigo-600
+  "#059669",
+  // emerald-600
+  "#7c3aed"
+  // violet-600
+];
+function L(e) {
+  let n = 0;
+  for (let r = 0; r < e.length; r++) {
+    const s = e.charCodeAt(r);
+    n = n * 31 + s >>> 0;
+  }
+  return a[n % a.length] ?? a[0];
+}
+function D(e) {
+  const n = e.match(/[a-zA-Z0-9]/);
+  return n ? n[0].toUpperCase() : "?";
+}
+function O(e, n) {
+  if (n.trim() === "") return e;
+  const t = n.toLowerCase();
+  return e.filter(
+    (r) => r.label.toLowerCase().includes(t) || r.description !== void 0 && r.description.toLowerCase().includes(t)
+  );
+}
+function N(e, n) {
+  switch (n.type) {
+    case "OPEN":
+      return { ...e, isOpen: !0, highlightedIndex: 0 };
+    case "CLOSE":
+      return { ...e, isOpen: !1, query: "", filtered: e.options };
+    case "SET_QUERY": {
+      const t = O(e.options, n.query);
+      return {
+        ...e,
+        query: n.query,
+        filtered: t,
+        // Reset highlight when query changes; clamp to new filtered length.
+        highlightedIndex: t.length > 0 ? 0 : -1
+      };
+    }
+    case "ARROW_DOWN": {
+      if (!e.isOpen) return { ...e, isOpen: !0, highlightedIndex: 0 };
+      const t = e.filtered.length;
+      if (t === 0) return e;
+      let r = (e.highlightedIndex + 1) % t, s = 0;
+      for (; e.filtered[r]?.disabled && s < t; )
+        r = (r + 1) % t, s++;
+      return { ...e, highlightedIndex: r };
+    }
+    case "ARROW_UP": {
+      if (!e.isOpen) return { ...e, isOpen: !0, highlightedIndex: 0 };
+      const t = e.filtered.length;
+      if (t === 0) return e;
+      let r = (e.highlightedIndex - 1 + t) % t, s = 0;
+      for (; e.filtered[r]?.disabled && s < t; )
+        r = (r - 1 + t) % t, s++;
+      return { ...e, highlightedIndex: r };
+    }
+    case "SELECT_HIGHLIGHTED":
+      return { ...e, isOpen: !1, query: "", filtered: e.options };
+    case "SELECT_INDEX": {
+      const t = n.index;
+      return t < 0 || t >= e.filtered.length ? e : { ...e, highlightedIndex: t, isOpen: !1, query: "", filtered: e.options };
+    }
+  }
+}
+function H(e) {
+  return {
+    query: "",
+    highlightedIndex: 0,
+    isOpen: !1,
+    options: e,
+    filtered: e
+  };
+}
+function R(e, n, t = "Create") {
+  if (n.trim() === "") return e;
+  const r = n.toLowerCase();
+  return e.some((i) => i.label.toLowerCase() === r) ? e : [{
+    value: n,
+    label: `${t} "${n}"`,
+    kind: "custom"
+  }, ...e];
+}
+function y(e) {
+  switch (e) {
+    case "success":
+      return { token: "statusSuccess" };
+    case "error":
+      return { token: "statusDanger" };
+    case "warning":
+      return { token: "statusWarning" };
+    case "muted":
+      return { token: "foregroundMuted" };
+  }
+}
+function U(e) {
+  switch (e) {
+    case "default":
+      return { icon: "info", accentToken: "foregroundMuted" };
+    case "info":
+      return { icon: "info", accentToken: "accent" };
+    case "success":
+      return { icon: "check-circle", accentToken: "success" };
+    case "warning":
+      return { icon: "triangle-alert", accentToken: "statusWarning" };
+    case "error":
+      return { icon: "circle-x", accentToken: "destructive" };
+  }
+}
+function W(e, n, t) {
+  return e || n || t;
+}
+function B(e) {
+  switch (e) {
+    case "default":
+      return {};
+    case "success":
+      return { token: "statusSuccess" };
+    case "error":
+      return { token: "statusDanger" };
+    case "warning":
+      return { token: "statusWarning" };
+  }
+}
+const u = 2200;
+function G(e, n, t, r = Date.now()) {
+  return {
+    id: e,
+    content: n,
+    variant: t.variant ?? "default",
+    durationMs: t.durationMs !== void 0 ? t.durationMs : u,
+    icon: t.icon,
+    paused: !1,
+    shownAt: r
+  };
+}
+function q(e = "Copied") {
+  return {
+    content: e,
+    opts: { variant: "success", durationMs: u }
+  };
+}
+function z(e) {
+  return { content: e, opts: { variant: "error", durationMs: u } };
+}
+function P(e, n, t = Date.now()) {
+  if (e.durationMs === null) return null;
+  if (e.paused && n !== null) return n;
+  const r = t - e.shownAt;
+  return Math.max(0, e.durationMs - r);
+}
+class F {
+  _stack = [];
+  push(n, t) {
+    this._stack.push({ id: n, close: t });
+  }
+  pop(n) {
+    const t = this._stack.findLastIndex((r) => r.id === n);
+    t !== -1 && this._stack.splice(t, 1);
+  }
+  /** Close the topmost entry (if any) and remove it. */
+  closeTop() {
+    const n = this._stack[this._stack.length - 1];
+    return n ? (n.close(), this._stack.pop(), !0) : !1;
+  }
+  get size() {
+    return this._stack.length;
+  }
+  topId() {
+    return this._stack[this._stack.length - 1]?.id;
+  }
+}
+function Y(e) {
+  const { status: n, requiresAttention: t, attentionReason: r, showInactive: s } = e;
+  if (!n) return null;
+  if (t)
+    switch (r) {
+      case "permission":
+      case "question":
+        return "statusWarning";
+      case "error":
+        return "statusDanger";
+      case "finished":
+      default:
+        return "statusSuccess";
+    }
+  switch (n) {
+    case "running":
+    case "queued":
+      return "accent";
+    case "waiting":
+      return "statusWarning";
+    case "finished":
+      return "statusSuccess";
+    case "error":
+      return "statusDanger";
+    case "idle":
+    case "archived":
+      return s ? "foregroundMuted" : null;
+  }
+}
+const Z = 8;
+function j(e) {
+  const { isDesktop: n, isMobile: t, os: r } = e, s = t ? g : p;
+  if (!n)
+    return { paddingLeft: 0, paddingRight: 0, height: s };
+  const o = r === "macos" ? h.macOS.width : h.windowsLinux.width, i = r === "macos" ? "left" : "right";
+  return {
+    paddingLeft: i === "left" ? o : 0,
+    paddingRight: i === "right" ? o : 0,
+    height: s
+  };
+}
+function V(e, n = {}) {
+  const t = /* @__PURE__ */ new Map();
+  for (const c of e) {
+    const d = c.group ?? "", f = t.get(d);
+    f ? f.push(c) : t.set(d, [c]);
+  }
+  const r = t.get("");
+  t.delete("");
+  const s = [...t.keys()], { priorityGroup: o, ungroupedLabel: i } = n;
+  o !== void 0 && t.has(o) && (s.splice(s.indexOf(o), 1), s.unshift(o));
+  const l = s.map((c) => ({
+    key: c,
+    label: c,
+    options: t.get(c) ?? []
+  }));
+  return r && l.push({ key: "", label: i, options: r }), l;
+}
+export {
+  v as BUTTON_FONT_SIZE,
+  x as BUTTON_ICON_SIZE,
+  k as BUTTON_MIN_HEIGHT,
+  S as BUTTON_PADDING_H,
+  u as DEFAULT_TOAST_DURATION_MS,
+  F as EscStack,
+  p as HEADER_INNER_HEIGHT,
+  g as HEADER_INNER_HEIGHT_MOBILE,
+  Z as STATUS_DOT_SIZE,
+  U as alertIconInfo,
+  W as attachmentPillRemoveVisible,
+  L as avatarColor,
+  D as avatarInitial,
+  G as buildToastEntry,
+  E as buttonIconColorToken,
+  N as comboboxReducer,
+  q as copiedToast,
+  z as errorToast,
+  O as filterOptions,
+  A as formatChord,
+  T as formatCombo,
+  M as ghostHoverIconToken,
+  V as groupOptions,
+  j as headerPadding,
+  H as initialComboboxState,
+  P as remainingMs,
+  b as resolveButtonState,
+  y as statusBadgeTokens,
+  Y as statusDotColor,
+  B as toastTokens,
+  R as withCustomValueOption
+};

package/dist/ui/option-groups.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Option grouping for the app's menu/picker surfaces — the pure half of the grouped-menu
+ * mechanic whose render half is `components/primitives/Menu.tsx`'s `MenuGroup`. Any list of
+ * `ComboboxOption`s can be sectioned by whatever its owner puts in `option.group`
+ * (`ModelMenu`: the model's own LLM provider; a slash-command menu could use the command's
+ * source kind) without either layer knowing what the grouping means.
+ *
+ * Group order is FIRST APPEARANCE, never alphabetical: every producer in this app already emits
+ * a meaningful order (the daemon's own model ordering, `slash-commands.ts`'s ranking), and
+ * re-sorting headers would discard it. `priorityGroup` is the one deliberate exception.
+ */
+import type { ComboboxOption } from "./combobox.js";
+/** One rendered section: a header plus the options under it. */
+export interface OptionGroup<T> {
+    /** Stable React key — the raw `option.group` value, or `""` for the ungrouped bucket. */
+    key: string;
+    /** Header text; `undefined` renders no header row (see `MenuGroup`). */
+    label?: string;
+    options: ComboboxOption<T>[];
+}
+export interface GroupOptionsConfig {
+    /** Group hoisted to the front wherever it first appears — e.g. the provider of the model a
+     * session is currently on, so the group you are actually using is never buried. Ignored when
+     * no option carries it. */
+    priorityGroup?: string;
+    /** Header for options that carry no `group`. Omit to leave that bucket headerless. */
+    ungroupedLabel?: string;
+}
+/**
+ * Section `options` for rendering. Grouping REORDERS: a caller that also owns a highlighted
+ * index over a flat list (a menu whose Arrow keys live outside it, like `CommandMenu`) must
+ * derive that index from `groups.flatMap((g) => g.options)`, not from the list passed in here —
+ * an index into the pre-grouping order would highlight a different row than the user sees.
+ */
+export declare function groupOptions<T>(options: ComboboxOption<T>[], config?: GroupOptionsConfig): OptionGroup<T>[];
+//# sourceMappingURL=option-groups.d.ts.map

package/dist/ui/screen-header.d.ts

@@ -0,0 +1,23 @@
+import { HEADER_INNER_HEIGHT, HEADER_INNER_HEIGHT_MOBILE } from "../breakpoints.js";
+export type HeaderVariant = "menu" | "back" | "title" | "icon-badge";
+export type WindowControlSide = "left" | "right";
+export type HeaderPadding = {
+    paddingLeft: number;
+    paddingRight: number;
+    height: number;
+};
+/**
+ * Compute the effective header padding to avoid overlapping desktop window controls.
+ * On non-desktop / mobile, returns zero extra padding.
+ *
+ * @param isDesktop - True when running in Electron desktop.
+ * @param isMobile  - True when compact form factor.
+ * @param os        - "macos" | "windowsLinux" (determines which side the controls are on).
+ */
+export declare function headerPadding(opts: {
+    isDesktop: boolean;
+    isMobile: boolean;
+    os: "macos" | "windowsLinux";
+}): HeaderPadding;
+export { HEADER_INNER_HEIGHT, HEADER_INNER_HEIGHT_MOBILE };
+//# sourceMappingURL=screen-header.d.ts.map

package/dist/ui/shortcut.d.ts

@@ -0,0 +1,13 @@
+export type OsFamily = "macos" | "windows" | "linux";
+/**
+ * Format a single key combo string (e.g. "cmd+shift+k") for display.
+ * Keys are split on `+`, modifiers are translated, non-modifiers are
+ * uppercased single chars or kept as-is for special keys.
+ */
+export declare function formatCombo(combo: string, os: OsFamily): string;
+/**
+ * Format an array of chords (a sequence of combos) for display.
+ * e.g. ["cmd+k", "cmd+s"] → "⌘K ⌘S" on macOS
+ */
+export declare function formatChord(chords: string[], os: OsFamily): string;
+//# sourceMappingURL=shortcut.d.ts.map

package/dist/ui/status-badge.d.ts

@@ -0,0 +1,15 @@
+export type StatusBadgeVariant = "success" | "error" | "warning" | "muted";
+export type BadgeTokens = {
+    token: string;
+};
+export declare function statusBadgeTokens(variant: StatusBadgeVariant): BadgeTokens;
+export type AlertVariant = "default" | "info" | "success" | "warning" | "error";
+export type AlertIconInfo = {
+    /** Lucide icon name string for the alert variant. */
+    icon: string;
+    /** Theme token key for the icon/border/title accent color. */
+    accentToken: string;
+};
+export declare function alertIconInfo(variant: AlertVariant): AlertIconInfo;
+export declare function attachmentPillRemoveVisible(isNativeCtx: boolean, isCompact: boolean, hovered: boolean): boolean;
+//# sourceMappingURL=status-badge.d.ts.map

package/dist/ui/status-dot.d.ts

@@ -0,0 +1,20 @@
+export type AgentStatus = "idle" | "running" | "waiting" | "finished" | "error" | "queued" | "archived";
+export type AttentionReason = "finished" | "error" | "permission" | "question";
+export type StatusDotInput = {
+    status: AgentStatus | undefined | null;
+    requiresAttention?: boolean;
+    attentionReason?: AttentionReason;
+    /** Count backing an attention reason that is inherently plural (e.g. multiple pending
+     * questions/permissions on one target) — method-neutral so it is not tied to `"permission"`
+     * specifically (sprint-069/task-001). */
+    pendingCount?: number;
+    showInactive?: boolean;
+};
+export type StatusDotColor = "accent" | "statusSuccess" | "statusDanger" | "statusWarning" | "foregroundMuted";
+/**
+ * Returns the theme token key for the status dot color, or null if the dot
+ * should not be rendered (missing/invalid status and showInactive=false).
+ */
+export declare function statusDotColor(input: StatusDotInput): StatusDotColor | null;
+export declare const STATUS_DOT_SIZE = 8;
+//# sourceMappingURL=status-dot.d.ts.map

package/dist/ui/toast.d.ts

@@ -0,0 +1,60 @@
+export type ToastVariant = "default" | "success" | "error" | "warning";
+export type ToastTokens = {
+    token?: string;
+};
+export declare function toastTokens(variant: ToastVariant): ToastTokens;
+export type ToastOptions = {
+    icon?: string;
+    variant?: ToastVariant;
+    /** Duration in ms. null = sticky (never auto-dismisses). Default ~2200ms. */
+    durationMs?: number | null;
+    /** Android-only: delegate to native toast instead of the in-app one. */
+    nativeAndroid?: boolean;
+};
+export declare const DEFAULT_TOAST_DURATION_MS = 2200;
+export type ToastEntry = {
+    id: string;
+    content: string;
+    variant: ToastVariant;
+    durationMs: number | null;
+    icon?: string;
+    /** True while the hover-pause is active (web desktop only). */
+    paused: boolean;
+    /** Snapshot of `remainingMs` taken the instant `paused` became true, frozen until resume. Kept
+     * on the entry itself (not a parallel id-keyed map in the store) so there is exactly one place
+     * that can drift out of sync with `paused`. Undefined while not paused. */
+    pausedRemaining?: number;
+    /** Epoch ms when the toast most recently became visible (used to compute remaining time) — a
+     * queued (not-yet-visible) entry has this reset to "now" at promotion time by the store, not
+     * left at its original `show()`-time value, so it still gets its full nominal duration once
+     * actually shown (sprint-069/task-005). */
+    shownAt: number;
+};
+/** Build a toast entry from show() arguments. */
+export declare function buildToastEntry(id: string, content: string, opts: ToastOptions, now?: number): ToastEntry;
+/** Convenience factory for a "copied" toast. */
+export declare function copiedToast(label?: string): {
+    content: string;
+    opts: ToastOptions;
+};
+/** Convenience factory for an error toast. */
+export declare function errorToast(message: string): {
+    content: string;
+    opts: ToastOptions;
+};
+/**
+ * Returns the remaining dismissal time (ms) for a toast, accounting for hover-pause.
+ * If the toast is paused, remaining time is frozen at `pausedRemaining`.
+ * Returns `null` for sticky toasts.
+ */
+export declare function remainingMs(entry: ToastEntry, pausedRemaining: number | null, now?: number): number | null;
+export declare class EscStack {
+    private readonly _stack;
+    push(id: string, close: () => void): void;
+    pop(id: string): void;
+    /** Close the topmost entry (if any) and remove it. */
+    closeTop(): boolean;
+    get size(): number;
+    topId(): string | undefined;
+}
+//# sourceMappingURL=toast.d.ts.map