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

package/dist/kv-store.d.ts

@@ -0,0 +1,3 @@
+import { type KeyValueStore } from "./theme/appearance-store.js";
+export declare const localStorageKvStore: KeyValueStore;
+//# sourceMappingURL=kv-store.d.ts.map

package/dist/primitives/Announcer.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Announcer — the app's one off-screen `aria-live` region for `features/agent-ui/announce.ts`'s
+ * § 08 pending-question transitions and § 11 `notify`/`set_editor_text` copy (sprint-069/task-008).
+ * Mount exactly once, at the app-shell level — `WorkspacePage.tsx`, alongside `ToastViewport`.
+ *
+ * Two separate always-mounted regions, one `role="status"` (`aria-live="polite"`) and one
+ * `role="alert"` (implicit `aria-live="assertive"`) — toggling a single element's `aria-live`
+ * value at runtime is not reliably picked up by assistive tech, so `announcer-store.ts`'s
+ * `politeness` instead selects which of these two ever receives text; the other is left empty,
+ * which is itself silent (removing/never-setting content is not announced).
+ */
+export declare function Announcer(): import("react").JSX.Element;
+//# sourceMappingURL=Announcer.d.ts.map

package/dist/primitives/Avatar.d.ts

@@ -0,0 +1,15 @@
+/**
+ * ProjectAvatar — shows a data-URI image or a deterministic colored initial fallback.
+ * ui-components.md § Surfaces / badges / chips / avatars
+ */
+export interface AvatarProps {
+    /** Project/entity key used to derive color + initial when no image. */
+    projectKey: string;
+    /** Optional data URI (or any image URL) to show instead of the fallback. */
+    src?: string;
+    /** Size in pixels (both width and height). */
+    size?: number;
+    className?: string;
+}
+export declare function Avatar({ projectKey, src, size, className }: AvatarProps): import("react").JSX.Element;
+//# sourceMappingURL=Avatar.d.ts.map

package/dist/primitives/Button.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Button — pressable with variant/size/state, styled from --pi-* CSS variables.
+ * ui-components.md § Pressables
+ */
+import { type ReactNode, type Ref, type ButtonHTMLAttributes } from "react";
+import { type ButtonVariant, type ButtonSize } from "../ui/button.js";
+export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    loading?: boolean;
+    leftIcon?: ReactNode;
+    trailing?: ReactNode;
+    iconOnly?: boolean;
+    children?: ReactNode;
+    ref?: Ref<HTMLButtonElement>;
+}
+export declare function Button({ variant, size, loading, disabled, leftIcon, trailing, iconOnly, children, style, className, ref, ...rest }: ButtonProps): import("react").JSX.Element;
+//# sourceMappingURL=Button.d.ts.map

package/dist/primitives/Checkbox.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Checkbox — accessible checkbox control.
+ * ui-components.md § Inputs & form controls
+ */
+import { type InputHTMLAttributes, type ReactNode } from "react";
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    label?: ReactNode;
+    checked?: boolean;
+}
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=Checkbox.d.ts.map

package/dist/primitives/Dialog.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Dialog — generic centered modal chrome (overlay + card + header/title/close + optional footer),
+ * wrapping Radix `Dialog` (design-system.md § Overlays: `@radix-ui/react-dialog` for
+ * dialogs/menus/tooltips/popovers). Every feature-specific modal (workspace picker today; rename/
+ * confirm dialogs later) SHOULD build on this instead of hand-rolling `Dialog.Root/Portal/Overlay/
+ * Content` again — only the body content and footer actions vary per use.
+ */
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+import * as RadixDialog from "@radix-ui/react-dialog";
+export interface DialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: string;
+    /** Body content between the header and the optional footer. */
+    children?: ReactNode;
+    /** Sticky action row rendered under the body (e.g. Cancel/Confirm buttons). */
+    footer?: ReactNode;
+    /** Content card width; defaults to 500px (design-system.md § Overlays desktop dialog sizing). */
+    width?: number | string;
+    /** Extra class applied to the content card, for callers that need to tweak body sizing. */
+    className?: string;
+    /**
+     * Omit the header bar's reserved height and float the close button over the body instead.
+     * Use for content (e.g. an image lightbox) that should sit dead-center in the viewport rather
+     * than be pushed down by an asymmetric top-only header. `title` remains as an accessible
+     * (visually hidden) label for the dialog.
+     */
+    bare?: boolean;
+    /**
+     * Forwarded to Radix `Dialog.Content`. Call `preventDefault()` to keep this dialog open —
+     * REQUIRED when a second dialog is stacked on top of this one: the two contents are DOM
+     * siblings (each portals to `body`), so a pointerdown inside the upper dialog reads as an
+     * outside-interaction on this one and would otherwise dismiss both at once.
+     */
+    onInteractOutside?: ComponentPropsWithoutRef<typeof RadixDialog.Content>["onInteractOutside"];
+    onEscapeKeyDown?: ComponentPropsWithoutRef<typeof RadixDialog.Content>["onEscapeKeyDown"];
+    /**
+     * Forwarded to Radix `Dialog.Content`. Radix's own default restores focus to whatever had it
+     * before the dialog opened; call `preventDefault()` and focus a specific element instead when
+     * that default is wrong for this dialog's own state (e.g. after closing back to a caller-chosen
+     * fallback rather than nothing).
+     */
+    onCloseAutoFocus?: ComponentPropsWithoutRef<typeof RadixDialog.Content>["onCloseAutoFocus"];
+    /**
+     * Forwarded to Radix `Dialog.Content`. Radix's own default on open focuses the first focusable
+     * descendant in DOM order — which is always this primitive's own header Close button, since it
+     * is rendered before `children`, regardless of any `autoFocus` a caller places on a body/footer
+     * element (React's native `autofocus` commit does not reliably win a race against Radix's own
+     * `FocusScope` mount effect). Call `preventDefault()` and focus the desired element explicitly
+     * whenever the default Close-button focus is wrong for this dialog's content.
+     */
+    onOpenAutoFocus?: ComponentPropsWithoutRef<typeof RadixDialog.Content>["onOpenAutoFocus"];
+}
+/** Re-exported so callers can wrap a footer button in `<Dialog.Close asChild>` to auto-dismiss
+ * without threading `onOpenChange(false)` through their own click handler. */
+export declare const DialogClose: import("react").ForwardRefExoticComponent<RadixDialog.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function Dialog({ open, onOpenChange, title, children, footer, width, className, bare, onInteractOutside, onEscapeKeyDown, onCloseAutoFocus, onOpenAutoFocus, }: DialogProps): import("react").JSX.Element;
+//# sourceMappingURL=Dialog.d.ts.map

package/dist/primitives/Divider.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Divider — a 1px separator line.
+ * ui-components.md § Scroll & dividers
+ */
+export interface DividerProps {
+    orientation?: "horizontal" | "vertical";
+    className?: string;
+}
+export declare function Divider({ orientation, className }: DividerProps): import("react").JSX.Element;
+//# sourceMappingURL=Divider.d.ts.map

package/dist/primitives/EmptyState.d.ts

@@ -0,0 +1,11 @@
+/**
+ * EmptyState — centered, muted placeholder text (loading/error/no-results states) — the shared
+ * shape behind FileExplorer/ChangesPanel/OpenWorkspaceDialog/SessionList's plain-text variant and
+ * FilePanel/MoleculeViewer's `<Spinner/> Loading…` variant (both are a centered flex row; a
+ * lone text child renders identically to the plain-text sites' old `text-align: center`).
+ * ui-components.md § Feedback
+ */
+import { type HTMLAttributes } from "react";
+export type EmptyStateProps = HTMLAttributes<HTMLDivElement>;
+export declare function EmptyState({ className, ...rest }: EmptyStateProps): import("react").JSX.Element;
+//# sourceMappingURL=EmptyState.d.ts.map

package/dist/primitives/Icon.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Icon — lucide-react wrapper honouring iconSize tokens.
+ * ui-components.md § Icons
+ */
+import { type LucideIcon } from "lucide-react";
+/** Token name → pixel size (matches design-system.md § iconSize). */
+export type IconSizeToken = "xs" | "sm" | "md" | "lg";
+declare const ICON_SIZE_PX: Record<IconSizeToken, number>;
+export interface IconProps {
+    icon: LucideIcon;
+    size?: IconSizeToken | number;
+    /** CSS color value OR a --pi-color-* CSS variable reference. */
+    color?: string;
+    className?: string;
+    "aria-hidden"?: boolean;
+    "aria-label"?: string;
+}
+export declare function Icon({ icon: LucideComponent, size, color, className, ...ariaProps }: IconProps): import("react").JSX.Element;
+export { ICON_SIZE_PX };
+//# sourceMappingURL=Icon.d.ts.map

package/dist/primitives/IconButton.d.ts

@@ -0,0 +1,25 @@
+/**
+ * IconButton — compact, chromeless icon affordance for row actions and menu triggers (file-row
+ * "⋮", session-row "⋮", workspace-header chevron/"⋮", Dialog's inline close, TabStrip's "+").
+ * Distinct from `Button`'s `iconOnly` mode: `Button` sizes from 28px up (a labeled-CTA minimum
+ * tap target) and hovers to a fixed `surface1` — too large and the wrong hover color for a tiny
+ * hover-reveal affordance sitting inside an already-compact row (20px tall, in flow, reserved
+ * box + opacity-on-row-hover, sprint-062) against a variety of ambient backgrounds
+ * (`surfaceSidebar`/`surface2`/page `background`/`surface1`, matching each row's own container —
+ * see `--icon-btn-hover-base` below). ui-components.md § Pressables
+ */
+import { type ButtonHTMLAttributes } from "react";
+export type IconButtonSize = "xs" | "sm";
+export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** `xs` (20px) — row actions and menu triggers, the common case. `sm` (28px) — a standalone
+     * button not embedded in a compact row, e.g. Dialog's inline header close. */
+    size?: IconButtonSize;
+    /** Overrides the hover background's base color (mixed 85/15 with `foreground`, matching
+     * `theme/color-utils.ts`'s app-wide hover-lift recipe) — defaults to `--pi-color-surface1`,
+     * the right base for a button sitting directly on a panel surface. A button sitting on a
+     * different ambient background (the sidebar, page background, a workspace header) passes the
+     * matching token, e.g. `hoverBase="var(--pi-color-surfaceSidebar)"`. */
+    hoverBase?: string;
+}
+export declare function IconButton({ size, hoverBase, className, style, type, ...rest }: IconButtonProps): import("react").JSX.Element;
+//# sourceMappingURL=IconButton.d.ts.map

package/dist/primitives/Menu.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Menu — shared chrome for every Radix `DropdownMenu` popup in the app (file/session/workspace
+ * right-click context menus, TabStrip's "+" menu, ModelMenu's picker). `DropdownMenu.Root` and
+ * `.Trigger` need no shared styling and stay imported directly from `@radix-ui/react-dropdown-menu`
+ * at each call site; this only wraps the pieces that were previously four (or more) byte-identical
+ * CSS Modules: the invisible cursor-anchored trigger button used by every right-click menu, the
+ * popover surface, the row, the separator, and the labelled section header for grouped pickers
+ * (`MenuGroup`, whose data half is `ui/option-groups.ts`).
+ * ui-components.md § Menus & popovers
+ */
+import { type ComponentPropsWithoutRef } from "react";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+export interface MenuCursorTriggerProps {
+    /** Viewport coordinates (from the triggering `contextmenu`/click event) to anchor the popup at. */
+    x: number;
+    y: number;
+}
+/** Invisible 1x1 trigger positioned at cursor coordinates — the shared shape behind every
+ * right-click context menu: `DropdownMenu.Trigger asChild` wraps this so Radix anchors its
+ * popover at the click point instead of at a visible element. */
+export declare const MenuCursorTrigger: import("react").ForwardRefExoticComponent<MenuCursorTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface MenuContentProps extends ComponentPropsWithoutRef<typeof DropdownMenu.Content> {
+    /** Popover min-width — right-click menus default to a narrow 140-160px; wider pickers (e.g.
+     * ModelMenu) override. */
+    minWidth?: number;
+}
+/** Popover surface (background/border/radius/shadow) + Radix portal, `align="start"` and a
+ * `sideOffset` of 2 to match the tight right-click-menu default; callers with a visible,
+ * button-style trigger (TabStrip's "+" menu, ModelMenu) pass a larger `sideOffset`. */
+export declare function MenuContent({ className, minWidth, style, sideOffset, ...rest }: MenuContentProps): import("react").JSX.Element;
+export interface MenuGroupProps extends ComponentPropsWithoutRef<typeof DropdownMenu.Group> {
+    /** Section header text. Omit for an unlabelled section (the ungrouped bucket
+     * `ui/option-groups.ts`'s `groupOptions` puts last) — the group still nests its items, it just
+     * renders no header row. */
+    label?: string;
+}
+/** Labelled section of menu items — the render half of the grouped-picker mechanic whose data
+ * half is `ui/option-groups.ts`. The header is a Radix `DropdownMenu.Label`, which is
+ * deliberately NOT focusable, so roving focus and typeahead skip headers with no extra work at
+ * the call site. It sticks to the top of whatever scroll container the group sits in (see
+ * `.groupLabel`), so the provider/section a row belongs to stays visible while scrolling a long
+ * list — the whole point of grouping a picker that outgrew one flat list. */
+export declare function MenuGroup({ label, className, children, ...rest }: MenuGroupProps): import("react").JSX.Element;
+export interface MenuItemProps extends ComponentPropsWithoutRef<typeof DropdownMenu.Item> {
+    /** Destructive action styling (delete/archive/remove — red text). */
+    danger?: boolean;
+}
+export declare function MenuItem({ className, danger, ...rest }: MenuItemProps): import("react").JSX.Element;
+export declare function MenuSeparator(props: ComponentPropsWithoutRef<typeof DropdownMenu.Separator>): import("react").JSX.Element;
+//# sourceMappingURL=Menu.d.ts.map

package/dist/primitives/Panel.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Panel — full-height flex-column container, the shell every tab/sidebar panel starts from
+ * (ChatPanel, FilePanel, MoleculeViewerPanel, RightSidebar, TextViewer, SessionList — all were
+ * byte-identical local `.panel`/`.wrap` CSS classes). ui-components.md § Surfaces
+ */
+import { type HTMLAttributes } from "react";
+export type PanelProps = HTMLAttributes<HTMLDivElement>;
+export declare function Panel({ className, ...rest }: PanelProps): import("react").JSX.Element;
+//# sourceMappingURL=Panel.d.ts.map

package/dist/primitives/Popover.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Popover — shared chrome for Radix `Popover` surfaces: anchored, non-modal panels that host
+ * interactive content such as a text field. A `DropdownMenu` is the wrong primitive for those (its
+ * typeahead and roving focus fight text input), so `Menu.tsx`'s sibling here wraps
+ * `@radix-ui/react-popover` the same way: `Root`/`Trigger` need no shared styling and are plain
+ * passthroughs; only the portal + surface is wrapped, with the `Menu` surface tokens.
+ * ui-components.md § Overlays
+ */
+import type { ComponentPropsWithoutRef } from "react";
+import * as RadixPopover from "@radix-ui/react-popover";
+export declare const Popover: {
+    Root: import("react").FC<RadixPopover.PopoverProps>;
+    Trigger: import("react").ForwardRefExoticComponent<RadixPopover.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Anchor: import("react").ForwardRefExoticComponent<RadixPopover.PopoverAnchorProps & import("react").RefAttributes<HTMLDivElement>>;
+    Close: import("react").ForwardRefExoticComponent<RadixPopover.PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+};
+export interface PopoverContentProps extends ComponentPropsWithoutRef<typeof RadixPopover.Content> {
+    /** Surface width in px; the panel is otherwise sized by its content. */
+    width?: number;
+}
+/** Portaled popover surface. Defaults: below the trigger, `align="start"`, 6px offset, and an
+ * 8px collision padding so it never touches the viewport edge. Radix returns focus to the trigger
+ * on close and dismisses on Escape/outside press by default. */
+export declare function PopoverContent({ className, width, style, side, align, sideOffset, collisionPadding, ...rest }: PopoverContentProps): import("react").JSX.Element;
+//# sourceMappingURL=Popover.d.ts.map

package/dist/primitives/ResizeHandle.d.ts

@@ -0,0 +1,20 @@
+/**
+ * ResizeHandle — thin draggable strip for resizing an adjacent sidebar (`WorkspacePage`'s
+ * `sidebarLeft`/`sidebarRight`). Pointer-driven: `pointerdown` starts a drag, `pointermove`
+ * reports the raw pixel delta since the last move, `pointerup` ends it. Width clamping and
+ * persistence live in the caller (`ui-store.ts`'s `setLeftSidebarWidth`/`setRightSidebarWidth`) —
+ * this component only ever reports deltas, never owns or reads the width itself.
+ *
+ * The drag explicitly captures its pointer to the handle so it survives the cursor crossing a
+ * cross-document child (`HtmlViewer`'s preview iframe) — see `handlePointerDown`.
+ */
+export interface ResizeHandleProps {
+    /** Which sidebar this handle resizes. Left sidebar grows when dragged right (positive delta);
+     * right sidebar shrinks when dragged right (its left edge moves right into the panel) — `side`
+     * picks the correct sign so the caller only ever adds the raw delta to its current width. */
+    side: "left" | "right";
+    onResize(deltaX: number): void;
+    className?: string;
+}
+export declare function ResizeHandle({ side, onResize, className }: ResizeHandleProps): import("react").JSX.Element;
+//# sourceMappingURL=ResizeHandle.d.ts.map

package/dist/primitives/ScreenTitle.d.ts

@@ -0,0 +1,15 @@
+/**
+ * ScreenTitle — canonical top-of-screen title. Mirrors Paseo's
+ * `components/headers/screen-title.tsx`: fontSize base, weight 400 on compact /
+ * 300 on desktop, `foreground` color. Leading icons/badges are siblings, never
+ * nested inside this component.
+ *
+ * swe docs/design.md §3 (hierarchy via weight+color, not size).
+ */
+import type { ReactNode } from "react";
+export interface ScreenTitleProps {
+    children: ReactNode;
+    className?: string;
+}
+export declare function ScreenTitle({ children, className }: ScreenTitleProps): import("react").JSX.Element;
+//# sourceMappingURL=ScreenTitle.d.ts.map

package/dist/primitives/ScrollArea.d.ts

@@ -0,0 +1,11 @@
+/**
+ * ScrollArea — a themed scrollable container.
+ * ui-components.md § Scroll & dividers
+ */
+import { type ReactNode, type HTMLAttributes } from "react";
+export interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement> {
+    axis?: "both" | "x" | "y";
+    children?: ReactNode;
+}
+export declare function ScrollArea({ axis, className, children, ...rest }: ScrollAreaProps): import("react").JSX.Element;
+//# sourceMappingURL=ScrollArea.d.ts.map

package/dist/primitives/Select.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Select + Combobox — form selection controls.
+ * Select = native <select> styled for theme consistency.
+ * Combobox = filterable text input + dropdown list, consuming sprint-012 combobox model.
+ * ui-components.md § Inputs & form controls
+ */
+import { type SelectHTMLAttributes } from "react";
+import { type ComboboxOption } from "../ui/combobox.js";
+export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+    options: {
+        value: string;
+        label: string;
+    }[];
+    placeholder?: string;
+}
+export declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLSelectElement>>;
+export interface ComboboxProps {
+    options: ComboboxOption<string>[];
+    value?: string;
+    onSelect?: (value: string) => void;
+    placeholder?: string;
+    className?: string;
+}
+export declare function Combobox({ options, value, onSelect, placeholder, className, }: ComboboxProps): import("react").JSX.Element;
+//# sourceMappingURL=Select.d.ts.map

package/dist/primitives/Shortcut.d.ts

@@ -0,0 +1,15 @@
+/**
+ * ShortcutHint — displays keyboard shortcut chip(s).
+ * ui-components.md § Shortcut
+ */
+import { type OsFamily } from "../ui/shortcut.js";
+export interface ShortcutProps {
+    /** A single combo string e.g. "cmd+k". */
+    combo?: string;
+    /** A sequence of combos e.g. ["cmd+k", "cmd+s"]. */
+    chord?: string[];
+    os?: OsFamily;
+    className?: string;
+}
+export declare function ShortcutHint({ combo, chord, os, className }: ShortcutProps): import("react").JSX.Element | null;
+//# sourceMappingURL=Shortcut.d.ts.map

package/dist/primitives/Spinner.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Spinner — a thin activity-indicator circle.
+ * ui-components.md § Feedback
+ */
+export type SpinnerSize = "xs" | "sm" | "md" | "lg";
+export interface SpinnerProps {
+    size?: SpinnerSize | number;
+    /** CSS color string; defaults to currentColor. */
+    color?: string;
+    className?: string;
+    "aria-label"?: string;
+}
+export declare function Spinner({ size, color, className, "aria-label": ariaLabel, }: SpinnerProps): import("react").JSX.Element;
+//# sourceMappingURL=Spinner.d.ts.map

package/dist/primitives/StatusBadge.d.ts

@@ -0,0 +1,13 @@
+/**
+ * StatusBadge — small rounded pill with variant coloring.
+ * ui-components.md § Surfaces / badges / chips / avatars
+ */
+import { type ReactNode } from "react";
+import { type StatusBadgeVariant } from "../ui/status-badge.js";
+export interface StatusBadgeProps {
+    label: ReactNode;
+    variant: StatusBadgeVariant;
+    className?: string;
+}
+export declare function StatusBadge({ label, variant, className }: StatusBadgeProps): import("react").JSX.Element;
+//# sourceMappingURL=StatusBadge.d.ts.map

package/dist/primitives/StatusDot.d.ts

@@ -0,0 +1,17 @@
+/**
+ * AgentStatusDot — 8×8 circle whose color reflects agent status.
+ * ui-components.md § Status dots & avatars
+ */
+import { type StatusDotInput } from "../ui/status-dot.js";
+export type StatusDotProps = StatusDotInput & {
+    className?: string;
+    /** Opt-in box-shadow ring, local to the needs-input state (sprint-069/task-002) — never part of
+     * `StatusDot`'s default rendering, so every other status/caller is unaffected. Defaults off. */
+    pulse?: boolean;
+    /** When set, the dot becomes an accessible element carrying this name instead of the default
+     * `role="presentation"` (§ 08: "no dot is ever colour-only") — sprint-069/task-003. Omitted ⇒
+     * today's decorative default, unchanged for every existing caller. */
+    "aria-label"?: string;
+};
+export declare function StatusDot({ className, pulse, "aria-label": ariaLabel, ...input }: StatusDotProps): import("react").JSX.Element | null;
+//# sourceMappingURL=StatusDot.d.ts.map

package/dist/primitives/Surface.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Surface / Card — an elevated container reading surface tokens.
+ * ui-components.md § Surfaces / badges / chips / avatars
+ */
+import { type ReactNode, type HTMLAttributes } from "react";
+import { type SurfaceElevation } from "./helpers.js";
+export interface SurfaceProps extends HTMLAttributes<HTMLDivElement> {
+    elevation?: SurfaceElevation;
+    noBorder?: boolean;
+    children?: ReactNode;
+}
+export declare function Surface({ elevation, noBorder, className, children, ...rest }: SurfaceProps): import("react").JSX.Element;
+//# sourceMappingURL=Surface.d.ts.map

package/dist/primitives/Switch.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Switch — animated toggle control.
+ * ui-components.md § Inputs & form controls (Switch)
+ */
+export interface SwitchProps {
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    disabled?: boolean;
+    id?: string;
+    "aria-label"?: string;
+    className?: string;
+}
+export declare function Switch({ checked, onCheckedChange, disabled, id, "aria-label": ariaLabel, className, }: SwitchProps): import("react").JSX.Element;
+//# sourceMappingURL=Switch.d.ts.map

package/dist/primitives/TextInput.d.ts

@@ -0,0 +1,14 @@
+/**
+ * TextInput / TextArea — form input controls.
+ * ui-components.md § Inputs & form controls (AdaptiveTextInput)
+ */
+import { type InputHTMLAttributes, type TextareaHTMLAttributes } from "react";
+export interface TextInputProps extends InputHTMLAttributes<HTMLInputElement> {
+    className?: string;
+}
+export declare const TextInput: import("react").ForwardRefExoticComponent<TextInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    className?: string;
+}
+export declare const TextArea: import("react").ForwardRefExoticComponent<TextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+//# sourceMappingURL=TextInput.d.ts.map

package/dist/primitives/ToastViewport.d.ts

@@ -0,0 +1,17 @@
+/**
+ * ToastViewport — single top-anchored toast stack, portalled to `document.body` (`Dialog.tsx`'s
+ * `Portal` precedent; this app has no dedicated named overlay-root element, so `document.body`
+ * matches what Radix's own `Portal` already defaults to for every other overlay). Mount exactly
+ * once, at the app-shell level — `WorkspacePage.tsx`. ui-components.md § Feedback; visual spec §
+ * 01 (`surface1` + per-variant rail), § 11 (stacking), § 13 (reduced motion).
+ *
+ * Exit animation is owned here, not in `toast-store.ts`: the store's `dismiss` is an immediate,
+ * synchronous array removal — kept deliberately simple and Node-testable (task-005's own test
+ * plan). This component instead keeps a small local cache of every toast it has rendered, and — on
+ * noticing an id leave the store's array, from *either* auto-dismiss or a manual close click, both
+ * of which only ever mutate the store — renders it a little longer with an `.exiting` class so its
+ * opacity/slide transition can play, before dropping it from local state. Reduced motion skips the
+ * lingering entirely: the exiting id is dropped in the same tick it leaves the store (§ 13).
+ */
+export declare function ToastViewport(): import("react").ReactPortal | null;
+//# sourceMappingURL=ToastViewport.d.ts.map

package/dist/primitives/helpers.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Pure helper functions for the DOM primitive components.
+ * Kept in a .ts file (no CSS imports) so they are testable in the node environment.
+ * design-system.md § Hover-to-show, ui-components.md § Pressables
+ */
+import { type ButtonVariant, type ButtonSize, BUTTON_MIN_HEIGHT, BUTTON_PADDING_H, BUTTON_FONT_SIZE, BUTTON_ICON_SIZE, resolveButtonState, buttonIconColorToken, ghostHoverIconToken } from "../ui/button.js";
+import { statusDotColor, type StatusDotInput } from "../ui/status-dot.js";
+export { BUTTON_MIN_HEIGHT, BUTTON_PADDING_H, BUTTON_FONT_SIZE, BUTTON_ICON_SIZE, resolveButtonState, buttonIconColorToken, ghostHoverIconToken, type ButtonVariant, type ButtonSize, };
+/**
+ * Returns true when a hover-revealed control should be visible.
+ *   visible = isHovered || isNative || isCompact
+ * On Pi-Studio (web-only), isNative is always false.
+ */
+export declare function hoverVisible(isHovered: boolean, isNative: boolean, isCompact: boolean): boolean;
+export type ButtonAriaAttrs = {
+    disabled: boolean;
+    "aria-disabled": boolean | undefined;
+    "aria-busy": boolean | undefined;
+    tabIndex: number;
+};
+/**
+ * Derive accessible DOM attributes for a button from its logical state.
+ */
+export declare function buttonAriaAttrs(opts: {
+    disabled: boolean;
+    loading: boolean;
+}): ButtonAriaAttrs;
+export type ButtonInlineStyle = {
+    minHeight: number;
+    paddingLeft: number;
+    paddingRight: number;
+    fontSize: string;
+    opacity: number;
+};
+export declare function buttonInlineStyle(opts: {
+    size: ButtonSize;
+    variant: ButtonVariant;
+    pressed: boolean;
+    disabled: boolean;
+    loading: boolean;
+}): ButtonInlineStyle;
+export declare function buttonIconPx(size: ButtonSize): number;
+export type SurfaceElevation = 0 | 1 | 2 | 3 | 4;
+export declare function surfaceBgVar(elevation: SurfaceElevation): string;
+export { statusDotColor, type StatusDotInput };
+export declare function statusDotVisible(input: StatusDotInput): boolean;
+//# sourceMappingURL=helpers.d.ts.map

package/dist/primitives/index.d.ts

@@ -0,0 +1,24 @@
+export { Button, type ButtonProps } from "./Button.js";
+export { IconButton, type IconButtonProps, type IconButtonSize } from "./IconButton.js";
+export { Icon, type IconProps, type IconSizeToken, ICON_SIZE_PX } from "./Icon.js";
+export { StatusDot, type StatusDotProps } from "./StatusDot.js";
+export { StatusBadge, type StatusBadgeProps } from "./StatusBadge.js";
+export { Avatar, type AvatarProps } from "./Avatar.js";
+export { ShortcutHint, type ShortcutProps } from "./Shortcut.js";
+export { Spinner, type SpinnerProps, type SpinnerSize } from "./Spinner.js";
+export { Divider, type DividerProps } from "./Divider.js";
+export { Switch, type SwitchProps } from "./Switch.js";
+export { Surface, type SurfaceProps } from "./Surface.js";
+export { Panel, type PanelProps } from "./Panel.js";
+export { EmptyState, type EmptyStateProps } from "./EmptyState.js";
+export { TextInput, TextArea, type TextInputProps, type TextAreaProps } from "./TextInput.js";
+export { ScrollArea, type ScrollAreaProps } from "./ScrollArea.js";
+export { Checkbox, type CheckboxProps } from "./Checkbox.js";
+export { Select, Combobox, type SelectProps, type ComboboxProps } from "./Select.js";
+export { Dialog, DialogClose, type DialogProps } from "./Dialog.js";
+export { ResizeHandle, type ResizeHandleProps } from "./ResizeHandle.js";
+export { MenuCursorTrigger, MenuContent, MenuGroup, MenuItem, MenuSeparator, type MenuCursorTriggerProps, type MenuContentProps, type MenuGroupProps, type MenuItemProps, } from "./Menu.js";
+export { Popover, PopoverContent, type PopoverContentProps } from "./Popover.js";
+export { useHover, type UseHoverReturn } from "./useHover.js";
+export { hoverVisible, buttonAriaAttrs, buttonInlineStyle, buttonIconPx, surfaceBgVar, statusDotVisible, type SurfaceElevation, type ButtonAriaAttrs, type ButtonInlineStyle, } from "./helpers.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/primitives/useHover.d.ts

@@ -0,0 +1,16 @@
+/**
+ * useHover — pointer-enter/leave hover tracking for web.
+ * design-system.md § Hover-to-show
+ * Raw pointer events only used inside this hook (web-safe; never a layout signal).
+ */
+export interface UseHoverReturn {
+    isHovered: boolean;
+    hoverProps: {
+        onPointerEnter: () => void;
+        onPointerLeave: () => void;
+    };
+    /** True when the control should be visible per hover-to-show rule. */
+    isVisible: (isCompact?: boolean) => boolean;
+}
+export declare function useHover(): UseHoverReturn;
+//# sourceMappingURL=useHover.d.ts.map

package/dist/reset.css

@@ -0,0 +1,43 @@
+/* Global reset — zero the browser default body margin, paint the themed page background, and
+   theme the scrollbars. Color/type tokens are injected as `--pi-*` CSS variables at runtime by
+   the theme system (see src/theme/css-bridge.ts, applied via ThemeBoundary).
+   Opt-in: an app embedding the library into a host page can skip this file. App-specific layout
+   (e.g. `#root` sizing) belongs in the app's own stylesheet, not here. */
+/* Root font-size is left at the browser default (100% / 16px) so `rem` tracks the user's own
+   zoom / accessibility text-size setting untouched — no app-level multiplier layered on top.
+   No CSS module hardcodes a font-size: every one is `var(--pi-font-size-<rung>)`, emitted as rem
+   by theme/css-bridge.ts's `pxToRem` from theme/tokens.ts's `baseFontSize`. That table is the one
+   lever for the app's text size; there is no root-percentage override to keep in sync with it,
+   and the font-scale guard test fails the build if a literal or a dangling rung creeps back in. */
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  min-height: 100vh;
+  overflow: hidden;
+  background: var(--pi-color-background);
+  color: var(--pi-color-foreground);
+  font-family: var(--pi-font-ui);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Scrollbar theming */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--pi-color-border);
+  border-radius: var(--pi-radius-base);
+}