@mithrl/design-system 0.2.0 → 0.4.0

package/dist/components/records-table/RecordsTable.d.ts

@@ -0,0 +1,87 @@
+import { type ForwardedRef, type HTMLAttributes, type ReactNode, type TableHTMLAttributes } from "react";
+import type { MetadataTone } from "../badge/Badge";
+
+export type RecordsTableAlign = "start" | "end";
+export type RecordsTableSortDirection = "ascending" | "descending";
+export type RecordsTableSort = {
+    /** Column currently driving row order. */
+    columnId: string;
+    direction: RecordsTableSortDirection;
+};
+export type RecordsTableColumn<Row> = {
+    /** Stable identifier used for sorting and cell keys. */
+    id: string;
+    /** Visible column header text. */
+    header: string;
+    /** Enables the header sort control and aria-sort reporting. */
+    sortable?: boolean;
+    /** Horizontal alignment of the header and its cells. */
+    align?: RecordsTableAlign;
+    /** Cell renderer. Defaults to the raw `sortValue` string. */
+    render?: (row: Row, index: number) => ReactNode;
+    /** Comparable primitive used when this column is sorted. */
+    sortValue?: (row: Row) => string | number;
+    /** Optional fixed column width, e.g. `var(--space-64)`. */
+    width?: string;
+};
+export type RecordsTableProps<Row> = Omit<TableHTMLAttributes<HTMLTableElement>, "children"> & {
+    columns: readonly RecordsTableColumn<Row>[];
+    rows: readonly Row[];
+    /** Stable row identity used for React keys. */
+    getRowId: (row: Row, index: number) => string;
+    /** Required accessible name for the grid. */
+    caption: string;
+    /** Renders the caption above the table instead of only for assistive tech. */
+    captionVisible?: boolean;
+    /** Renders the leading ordinal / group-letter cell. */
+    showIndex?: boolean;
+    /** When provided, alphabetical separator rows are inserted on letter change. */
+    groupLetter?: (row: Row) => string;
+    /** Controlled sort state. */
+    sort?: RecordsTableSort | null;
+    /** Initial sort for uncontrolled use. */
+    defaultSort?: RecordsTableSort | null;
+    onSortChange?: (sort: RecordsTableSort) => void;
+    /** Summary cells rendered in a sticky-free footer row, keyed by column id. */
+    footer?: Partial<Record<string, ReactNode>>;
+    /** Optional label rendered in the footer's leading cell. */
+    footerLabel?: ReactNode;
+};
+/**
+ * A column-configuration driven record grid. RecordsTable owns row order,
+ * sticky header semantics, and optional alphabetical grouping. Cell content
+ * is supplied by the caller, usually through the exported cell primitives.
+ */
+declare function RecordsTableInner<Row>({ columns, rows, getRowId, caption, captionVisible, showIndex, groupLetter, sort, defaultSort, onSortChange, footer, footerLabel, className, ...props }: RecordsTableProps<Row>, ref: ForwardedRef<HTMLTableElement>): import("react/jsx-runtime").JSX.Element;
+export declare const RecordsTable: <Row>(props: RecordsTableProps<Row> & {
+    ref?: ForwardedRef<HTMLTableElement>;
+}) => ReturnType<typeof RecordsTableInner>;
+export type RecordsTableTagsProps = HTMLAttributes<HTMLDivElement> & {
+    /** Category labels rendered as Tag metadata. */
+    tags: readonly string[];
+    /** Number of tags shown before collapsing into a "+N" indicator. */
+    max?: number;
+    tone?: MetadataTone;
+};
+/** Tag cluster cell with a deterministic "+N" overflow indicator. */
+export declare function RecordsTableTags({ tags, max, tone, className, ...props }: RecordsTableTagsProps): import("react/jsx-runtime").JSX.Element;
+export declare const recordsTableStrengthLevels: readonly ["No communication", "Very weak", "Weak", "Strong", "Very strong"];
+export type RecordsTableStrengthLevel = 0 | 1 | 2 | 3 | 4;
+export type RecordsTableStrengthProps = HTMLAttributes<HTMLSpanElement> & {
+    /** Ordinal level from 0 (no communication) through 4 (very strong). */
+    level: RecordsTableStrengthLevel;
+    /** Hides the text label while keeping the accessible name. */
+    hideLabel?: boolean;
+};
+/** Five-step ordinal meter for relationship or signal strength. */
+export declare function RecordsTableStrength({ level, hideLabel, className, ...props }: RecordsTableStrengthProps): import("react/jsx-runtime").JSX.Element;
+export type RecordsTableLinkProps = {
+    href: string;
+    children: ReactNode;
+    /** Marks the destination as external and adds safe rel attributes. */
+    external?: boolean;
+    className?: string;
+};
+/** Destination cell that keeps the external affordance inside the grid. */
+export declare function RecordsTableLink({ href, children, external, className, }: RecordsTableLinkProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/resizable-panels/ResizablePanels.d.ts

@@ -22,6 +22,25 @@ export type ResizablePanelGroupProps = Omit<HTMLAttributes<HTMLDivElement>, "chi
     onValueChange?: (value: number) => void;
     /** Reports the final pointer value or each committed keyboard step. */
     onValueCommit?: (value: number) => void;
+    /** Controlled Secondary width in pixels. Use instead of `value`. */
+    secondarySize?: number;
+    /** Initial Secondary width in pixels for uncontrolled pixel persistence. */
+    defaultSecondarySize?: number;
+    /** Reports every pointer or keyboard resize in Secondary pixels. */
+    onSecondarySizeChange?: (size: number) => void;
+    /** Reports the final pointer value or each keyboard step in pixels. */
+    onSecondarySizeCommit?: (size: number) => void;
+    /**
+     * Reports one drag-to-dismiss intent per pointer drag when the pointer
+     * travels past a panel minimum by more than `dismissThreshold`. Visibility
+     * stays with the consumer; the group never hides a panel on its own.
+     */
+    onCollapseIntent?: (region: "primary" | "secondary") => void;
+    /**
+     * Share of a panel minimum the pointer must cross before a drag counts as a
+     * dismissal request. Defaults to 0.5, i.e. half the minimum width.
+     */
+    dismissThreshold?: number;
     /** Exactly Primary Panel, Handle, and Secondary Panel in that order. */
     children: ReactNode;
 };
@@ -58,6 +77,25 @@ export declare const ResizablePanelGroup: import("react").ForwardRefExoticCompon
     onValueChange?: (value: number) => void;
     /** Reports the final pointer value or each committed keyboard step. */
     onValueCommit?: (value: number) => void;
+    /** Controlled Secondary width in pixels. Use instead of `value`. */
+    secondarySize?: number;
+    /** Initial Secondary width in pixels for uncontrolled pixel persistence. */
+    defaultSecondarySize?: number;
+    /** Reports every pointer or keyboard resize in Secondary pixels. */
+    onSecondarySizeChange?: (size: number) => void;
+    /** Reports the final pointer value or each keyboard step in pixels. */
+    onSecondarySizeCommit?: (size: number) => void;
+    /**
+     * Reports one drag-to-dismiss intent per pointer drag when the pointer
+     * travels past a panel minimum by more than `dismissThreshold`. Visibility
+     * stays with the consumer; the group never hides a panel on its own.
+     */
+    onCollapseIntent?: (region: "primary" | "secondary") => void;
+    /**
+     * Share of a panel minimum the pointer must cross before a drag counts as a
+     * dismissal request. Defaults to 0.5, i.e. half the minimum width.
+     */
+    dismissThreshold?: number;
     /** Exactly Primary Panel, Handle, and Secondary Panel in that order. */
     children: ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/secondary-panel/SecondaryPanel.d.ts

@@ -0,0 +1,69 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import { type PanelTabItem } from "../panel-tabs/PanelTabs";
+
+export declare const MITHRL_QUESTION_DRAG_TYPE = "application/x-mithrl-question-id";
+export type SecondaryPanelTabKind = "explorer" | "question" | "resource" | "tool";
+export type SecondaryPanelTab = Omit<PanelTabItem, "closable" | "tooltip"> & {
+    /** Controls the approved icon-led or text-only tab identity. */
+    kind: SecondaryPanelTabKind;
+    /** Explorer is persistent; all other destinations may be owner-closeable. */
+    closable?: boolean;
+};
+export type SecondaryPanelDropTarget = "secondary";
+export type SecondaryPanelProps = Omit<HTMLAttributes<HTMLElement>, "children" | "onDragEnter" | "onDragLeave" | "onDragOver" | "onDrop"> & {
+    /** Ordered, controlled panel destinations. Explorer must remain first. */
+    tabs: readonly SecondaryPanelTab[];
+    /** Controlled active destination identity. */
+    activeTabId: string;
+    /** Product-owned content for the active destination. */
+    children: ReactNode;
+    /** Optional product-owned panel actions rendered after the tab viewport. */
+    headerActions?: ReactNode;
+    /** Shows the approved trailing-edge overflow cue over the tab viewport. */
+    overflowFeedback?: boolean;
+    /** Uses the temporary compact full-screen header presentation. */
+    compactMode?: boolean;
+    /** Visible and accessible label for the compact dismissal action. */
+    compactCloseLabel?: string;
+    /** Reports controlled tab selection. */
+    onTabSelect: (tabId: string) => void;
+    /** Reports a close request and the fallback that keeps selection aligned with focus. */
+    onTabClose?: (tabId: string, fallbackTabId: string) => void;
+    /** Enables native Question drops from Workspace Navigation. */
+    onQuestionDrop?: (questionId: string, target: SecondaryPanelDropTarget) => void;
+    /** Reports compact Secondary dismissal without unmounting owner state. */
+    onSecondaryOpenChange: (open: boolean) => void;
+    /** Visible drop feedback. Defaults to the approved action copy. */
+    dropFeedbackLabel?: ReactNode;
+};
+/**
+ * Controlled Secondary Workspace surface. It composes Panel Tabs, compact
+ * presentation, and Question drop feedback while product code retains tab,
+ * placement, visibility, width, content, and persistence ownership.
+ */
+export declare const SecondaryPanel: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>, "children" | "onDragEnter" | "onDragLeave" | "onDragOver" | "onDrop"> & {
+    /** Ordered, controlled panel destinations. Explorer must remain first. */
+    tabs: readonly SecondaryPanelTab[];
+    /** Controlled active destination identity. */
+    activeTabId: string;
+    /** Product-owned content for the active destination. */
+    children: ReactNode;
+    /** Optional product-owned panel actions rendered after the tab viewport. */
+    headerActions?: ReactNode;
+    /** Shows the approved trailing-edge overflow cue over the tab viewport. */
+    overflowFeedback?: boolean;
+    /** Uses the temporary compact full-screen header presentation. */
+    compactMode?: boolean;
+    /** Visible and accessible label for the compact dismissal action. */
+    compactCloseLabel?: string;
+    /** Reports controlled tab selection. */
+    onTabSelect: (tabId: string) => void;
+    /** Reports a close request and the fallback that keeps selection aligned with focus. */
+    onTabClose?: (tabId: string, fallbackTabId: string) => void;
+    /** Enables native Question drops from Workspace Navigation. */
+    onQuestionDrop?: (questionId: string, target: SecondaryPanelDropTarget) => void;
+    /** Reports compact Secondary dismissal without unmounting owner state. */
+    onSecondaryOpenChange: (open: boolean) => void;
+    /** Visible drop feedback. Defaults to the approved action copy. */
+    dropFeedbackLabel?: ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/dist/components/selection-actions/SelectionActions.d.ts

@@ -0,0 +1,72 @@
+import { type HTMLAttributes, type RefObject } from "react";
+import { type IconGlyphComponent } from "../icon/Icon";
+
+/** A viewport-relative rectangle, matching the shape of `DOMRect`. */
+export interface SelectionRect {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+export interface UseSelectionRectOptions {
+    /**
+     * Restrict tracking to selections that start and end inside this element.
+     * Omit to track the whole document.
+     */
+    containerRef?: RefObject<HTMLElement | null>;
+    /** Stop tracking without unmounting the caller. @default false */
+    disabled?: boolean;
+}
+/**
+ * Tracks the current document selection and returns its viewport-relative
+ * rectangle, or `null` when nothing is selected.
+ *
+ * Recomputes on `selectionchange` and on scroll/resize so the toolbar stays
+ * pinned to the passage while the page moves under it. Safe during SSR: the
+ * first render returns `null` and tracking starts after mount.
+ */
+export declare function useSelectionRect({ containerRef, disabled, }?: UseSelectionRectOptions): SelectionRect | null;
+export interface SelectionAction {
+    /** Stable identity, passed to `onSelect` and used as the React key. */
+    id: string;
+    /** Visible label. Keep it a single verb where possible. */
+    label: string;
+    /** Optional approved Lucide glyph shown before the label. */
+    icon?: IconGlyphComponent;
+    /**
+     * Emphasis. `primary` actions read as full labelled buttons; `secondary`
+     * actions are compact and sit after a divider.
+     * @default "primary"
+     */
+    emphasis?: "primary" | "secondary";
+    /** Invoked when the action is chosen. */
+    onSelect: () => void;
+    /** Renders the action non-interactive. */
+    disabled?: boolean;
+}
+export interface SelectionActionsProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Actions offered for the highlighted passage. */
+    actions: SelectionAction[];
+    /**
+     * Viewport-relative rectangle of the passage. Pass the value from
+     * `useSelectionRect()`, or your own rect for a controlled placement. When
+     * `null` the toolbar renders nothing.
+     */
+    anchorRect: SelectionRect | null;
+    /** Called on Escape, on a click outside, or after an action is chosen. */
+    onDismiss?: () => void;
+    /** Accessible name for the toolbar. @default "Actions for the selected text" */
+    label?: string;
+    /** Gap between the passage and the toolbar, in pixels. @default 8 */
+    offset?: number;
+}
+/**
+ * A floating toolbar anchored above a highlighted passage.
+ *
+ * Keyboard contract: the bar is a `role="toolbar"` with roving tabindex — one
+ * tab stop for the whole bar, then Arrow Left/Right to move between actions,
+ * with Home and End jumping to the ends. Escape dismisses without acting, as
+ * does a click outside the bar. Focus is never stolen from the document
+ * selection; the bar becomes reachable by Tab and only takes focus once entered.
+ */
+export declare const SelectionActions: import("react").ForwardRefExoticComponent<SelectionActionsProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/skeleton-reveal/SkeletonReveal.d.ts

@@ -0,0 +1,33 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+
+export interface SkeletonRevealProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "placeholder"> {
+    /** Whether the real content has arrived. Flipping this plays the hand-off. */
+    loaded: boolean;
+    /** The loading surface — normally one or more `Skeleton` elements. */
+    placeholder: ReactNode;
+    /** The real content. */
+    children: ReactNode;
+}
+/**
+ * Cross-fades a loading placeholder into the content that replaces it, so
+ * arriving data resolves instead of snapping.
+ *
+ * Both layers occupy the same grid cell, so they stack without either one
+ * leaving the flow: the box is as tall as whichever layer is taller and the
+ * swap costs no layout. The outgoing placeholder fades away through
+ * `--motion-blur-soft` while the content fades in from the same blur, the two
+ * crossing through each other over one shared duration.
+ *
+ * The hidden layer is `visibility: hidden`, so it is out of the tab order and
+ * out of the accessibility tree until it is the live one — the visibility
+ * switch is delayed to the end of the fade on the way out and immediate on the
+ * way in.
+ *
+ * `Skeleton` itself is untouched by this: it stays a decorative surface that
+ * rejects children and semantics. The hand-off needs both layers mounted at
+ * once, which a prop on a childless primitive cannot express.
+ *
+ * Reduced motion: no blur and no cross-fade timing — the layers swap behind a
+ * `--motion-duration-fast` opacity change.
+ */
+export declare const SkeletonReveal: import("react").ForwardRefExoticComponent<SkeletonRevealProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/status-orb/StatusOrb.d.ts

@@ -0,0 +1,51 @@
+import type { CSSProperties } from "react";
+import { type OrbState } from "thinking-orbs";
+/**
+ * The nine orb states shipped by the animation engine. Each is a distinct
+ * hand-tuned animation, not a variation of one loop.
+ */
+export type StatusOrbState = OrbState;
+/**
+ * DS size scale. The animation engine ships exactly two tuned presets
+ * (20 and 64 CSS px); each DS size picks the nearest preset and paints it
+ * into a DS-sized box, so the canvas is never upscaled.
+ */
+export type StatusOrbSize = "small" | "default" | "medium" | "large";
+/**
+ * Theme mode. `auto` (default) resolves from the nearest ancestor carrying
+ * `data-theme="dark|light"` — the attribute the Mithrl shell already sets —
+ * and falls back to `prefers-color-scheme`. It live-updates on theme change.
+ */
+export type StatusOrbTheme = "auto" | "dark" | "light";
+export interface StatusOrbProps {
+    /** Which animation to show. @default "working" */
+    state?: StatusOrbState;
+    /** DS size scale. @default "default" */
+    size?: StatusOrbSize;
+    /** Theme mode; `auto` follows the nearest `[data-theme]`. @default "auto" */
+    theme?: StatusOrbTheme;
+    /** Speed multiplier on top of the state's baked speed. @default 1 */
+    speed?: number;
+    /** Freeze the animation on the current frame. @default false */
+    paused?: boolean;
+    /**
+     * Accessible name. Defaults to a plain-language name for `state`; pass a
+     * task-specific string whenever the surrounding UI has more context.
+     */
+    "aria-label"?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Animated AI status indicator.
+ *
+ * Rendered as a `<canvas role="img">`. Motion is suspended automatically when
+ * the orb scrolls out of view or the tab is hidden, and `prefers-reduced-motion`
+ * users are painted a single static frame by the engine — no extra wiring
+ * needed at the call site.
+ *
+ * Colour note: the engine paints one ink colour chosen from the resolved
+ * dark/light substrate. There is no per-token ink override, so the orb does
+ * not accept a DS tone.
+ */
+export declare function StatusOrb({ state, size, theme, speed, paused, "aria-label": ariaLabel, className, style, }: StatusOrbProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/streaming-text/StreamingText.d.ts

@@ -0,0 +1,85 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import { type IconGlyphComponent } from "../icon/Icon";
+
+/** Semantic colouring for a citation chip. */
+export type SourceChipTone = "neutral" | "information" | "success" | "warning" | "destructive";
+export interface SourceChipProps {
+    /** Stable identity, used as the React key inside a source stack. */
+    id: string;
+    /** Visible label — a PMID, accession, filename, or short source name. */
+    label: ReactNode;
+    /**
+     * Optional short glyph slot content shown before the label, e.g. `"PM"` for
+     * PubMed or `"GEO"` for a Gene Expression Omnibus accession. Favicon-less by
+     * design: no network request is made for a citation.
+     */
+    glyph?: ReactNode;
+    /** Optional approved Lucide glyph, used when `glyph` is not supplied. */
+    icon?: IconGlyphComponent;
+    /** When present the chip renders as a link opening in a new tab. */
+    href?: string;
+    /** Tone of the glyph slot tint. @default "neutral" */
+    tone?: SourceChipTone;
+    /**
+     * Accessible description appended to the chip's name, e.g. the full article
+     * title behind a PMID.
+     */
+    title?: string;
+}
+/**
+ * A single inline citation. Renders as a link when `href` is given and as a
+ * static span otherwise, so an un-resolvable citation is never announced as an
+ * actionable link.
+ */
+export declare const SourceChip: import("react").ForwardRefExoticComponent<SourceChipProps & import("react").RefAttributes<HTMLElement>>;
+export interface SourceStackProps {
+    /** Citations backing the answer. */
+    sources: SourceChipProps[];
+    /** Label prefix for the collapsed summary row. @default "sources" */
+    noun?: string;
+}
+/**
+ * A collapsed "N sources" row. The chips overlap while resting and fan out on
+ * hover or when any chip inside receives keyboard focus, so the expansion is
+ * reachable without a pointer.
+ */
+export declare function SourceStack({ sources, noun }: SourceStackProps): import("react/jsx-runtime").JSX.Element | null;
+export interface FollowUpSuggestion {
+    /** Stable identity passed back to `onFollowUpSelect`. */
+    id: string;
+    /** The suggested next question, phrased as the reader would ask it. */
+    label: string;
+    /** Optional approved Lucide glyph. */
+    icon?: IconGlyphComponent;
+}
+export interface StreamingTextProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "onSelect"> {
+    /**
+     * The answer body. Markdown-agnostic: pass already-rendered nodes, a string,
+     * or your own renderer's output.
+     */
+    children: ReactNode;
+    /**
+     * Whether tokens are still arriving. While true a caret trails the text and
+     * the region is announced politely.
+     */
+    streaming?: boolean;
+    /** Citations shown beneath the answer once it settles. */
+    sources?: SourceChipProps[];
+    /** Suggested next questions shown beneath the sources. */
+    followUps?: FollowUpSuggestion[];
+    /** Invoked with the selected suggestion. */
+    onFollowUpSelect?: (suggestion: FollowUpSuggestion) => void;
+    /** Heading for the follow-up group. @default "Ask next" */
+    followUpsLabel?: string;
+}
+/**
+ * Presentation for a streamed answer: the text itself, an animated caret while
+ * tokens arrive, the citations behind it, and the questions a reader is likely
+ * to ask next.
+ *
+ * Accessibility: the body is an `aria-live="polite"` region while streaming and
+ * drops to `off` once settled, so a long answer is summarised rather than
+ * re-read token by token. Follow-ups are a labelled group of buttons, each
+ * focusable in reading order with a `--color-ring` focus ring.
+ */
+export declare const StreamingText: import("react").ForwardRefExoticComponent<StreamingTextProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/task-rows/TaskRows.d.ts

@@ -0,0 +1,77 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import type { MetadataTone } from "../badge/Badge";
+
+/** Lifecycle of one agent task or sub-step. */
+export type TaskState = "pending" | "running" | "completed" | "failed";
+/** Layout family. Capsules give each task its own surface; list is flat. */
+export type TaskRowsView = "capsules" | "list";
+/** One nested step inside a task. */
+export interface TaskStep {
+    id: string;
+    label: string;
+    /** Metric or result for the step, e.g. "1,284 reads" or "p = 0.003". */
+    value?: ReactNode;
+    state?: TaskState;
+}
+export interface TaskRowItem {
+    id: string;
+    title: ReactNode;
+    /**
+     * Leading slot. Pass a StatusOrb (or anything else) to override the
+     * built-in state marker.
+     */
+    leading?: ReactNode;
+    /** Ordinal shown in the built-in marker when no `leading` is supplied. */
+    index?: number;
+    state?: TaskState;
+    /** Number shown in the trailing Tag, e.g. how many files were touched. */
+    count?: number;
+    /** Overrides the Tag text entirely. */
+    countLabel?: string;
+    countTone?: MetadataTone;
+    /** Short trailing status text, e.g. "4m 12s" or "3 of 8". */
+    status?: ReactNode;
+    steps?: TaskStep[];
+}
+export type TaskRowProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "title" | "onToggle"> & TaskRowItem & {
+    view?: TaskRowsView;
+    expanded?: boolean;
+    defaultExpanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+};
+/**
+ * One live task. Expands to its sub-steps when it has any; otherwise it is
+ * a plain status line with no misleading affordance.
+ */
+export declare const TaskRow: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children" | "onToggle" | "title"> & TaskRowItem & {
+    view?: TaskRowsView;
+    expanded?: boolean;
+    defaultExpanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export type TaskRowsProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    tasks: TaskRowItem[];
+    /** @default "capsules" */
+    view?: TaskRowsView;
+    /** Controlled set of expanded task ids. */
+    expandedIds?: string[];
+    defaultExpandedIds?: string[];
+    onExpandedIdsChange?: (expandedIds: string[]) => void;
+    /** Accessible name for the list, e.g. "Run progress". */
+    label?: string;
+};
+/**
+ * A live list of what the agent is doing right now. Running work shimmers,
+ * finished work settles, and failures stay visible instead of scrolling away.
+ */
+export declare const TaskRows: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    tasks: TaskRowItem[];
+    /** @default "capsules" */
+    view?: TaskRowsView;
+    /** Controlled set of expanded task ids. */
+    expandedIds?: string[];
+    defaultExpandedIds?: string[];
+    onExpandedIdsChange?: (expandedIds: string[]) => void;
+    /** Accessible name for the list, e.g. "Run progress". */
+    label?: string;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/upload-queue/UploadQueue.d.ts

@@ -25,6 +25,11 @@ export type UploadQueueItemProps = Omit<HTMLAttributes<HTMLLIElement>, "children
     onRemove?: UploadQueueAction;
     onCancel?: UploadQueueAction;
     onRetry?: UploadQueueAction;
+    /**
+     * How many `--motion-stagger-tight` steps this row waits before entering.
+     * Set by `UploadQueue` for rows that arrived as one batch.
+     */
+    staggerStep?: number;
 };
 export type UploadQueueProps = Omit<HTMLAttributes<HTMLElement>, "children" | "onCancel" | "role"> & {
     items: readonly UploadQueueResource[];
@@ -51,6 +56,11 @@ export declare const UploadQueueItem: import("react").ForwardRefExoticComponent<
     onRemove?: UploadQueueAction;
     onCancel?: UploadQueueAction;
     onRetry?: UploadQueueAction;
+    /**
+     * How many `--motion-stagger-tight` steps this row waits before entering.
+     * Set by `UploadQueue` for rows that arrived as one batch.
+     */
+    staggerStep?: number;
 } & import("react").RefAttributes<HTMLLIElement>>;
 /**
  * Semantic accepted-resource queue. Acquisition remains owned by File

package/dist/components/workspace-navigation/WorkspaceNavigation.d.ts

@@ -1,5 +1,5 @@
 import { type VariantProps } from "class-variance-authority";
-import { type HTMLAttributes, type MouseEvent, type MouseEventHandler } from "react";
+import { type DragEvent, type HTMLAttributes, type MouseEvent, type MouseEventHandler } from "react";
 import { type IconButtonProps } from "../icon-button/IconButton";
 
 export declare const workspaceNavigationVariants: (props?: ({
@@ -15,9 +15,14 @@ export type WorkspaceNavigationQuestion = {
     href?: string;
     /** Uses the approved text shimmer and Progress Indicator. */
     loading?: boolean;
+    /** Enables opening this unopened Question through native drag. */
+    draggable?: boolean;
+    /** Optional explicit name for the product-owned overflow action. */
+    menuActionLabel?: string;
 };
 type NavigationClick = MouseEvent<HTMLAnchorElement | HTMLButtonElement>;
 type MenuClick = MouseEvent<HTMLButtonElement>;
+type QuestionDrag = DragEvent<HTMLAnchorElement | HTMLButtonElement>;
 export type WorkspaceNavigationProps = Omit<HTMLAttributes<HTMLElement>, "children" | "onSelect"> & VariantProps<typeof workspaceNavigationVariants> & {
     /** Accessible name for the navigation landmark. */
     "aria-label"?: string;
@@ -27,16 +32,24 @@ export type WorkspaceNavigationProps = Omit<HTMLAttributes<HTMLElement>, "childr
     allProjectsLabel?: string;
     /** Visible label for the creation action. */
     newQuestionLabel?: string;
+    /** Stable identity for a controlled New Question dialog trigger. */
+    newQuestionTriggerId?: string;
     /** Visible heading for the question destination region. */
     questionsLabel?: string;
     /** Controlled question destinations in display order. */
     questions: readonly WorkspaceNavigationQuestion[];
     /** Controlled current question identity. */
     selectedQuestionId?: string;
+    /** Controlled Questions currently active in Primary or Secondary panels. */
+    activeQuestionIds?: readonly string[];
     /** Selects a question without prescribing router ownership. */
     onQuestionSelect?: (question: WorkspaceNavigationQuestion, event: NavigationClick) => void;
     /** Opens the product-owned menu for one question. */
     onQuestionMenuAction?: (question: WorkspaceNavigationQuestion, event: MenuClick) => void;
+    /** Reports the beginning of an enabled Question drag. */
+    onQuestionDragStart?: (question: WorkspaceNavigationQuestion, event: QuestionDrag) => void;
+    /** Reports the end of an enabled Question drag. */
+    onQuestionDragEnd?: (question: WorkspaceNavigationQuestion, event: QuestionDrag) => void;
     /** Starts a new question. */
     onNewQuestion: MouseEventHandler<HTMLButtonElement>;
     /** Reports activation of the All Projects destination. */
@@ -60,16 +73,24 @@ export declare const WorkspaceNavigation: import("react").ForwardRefExoticCompon
     allProjectsLabel?: string;
     /** Visible label for the creation action. */
     newQuestionLabel?: string;
+    /** Stable identity for a controlled New Question dialog trigger. */
+    newQuestionTriggerId?: string;
     /** Visible heading for the question destination region. */
     questionsLabel?: string;
     /** Controlled question destinations in display order. */
     questions: readonly WorkspaceNavigationQuestion[];
     /** Controlled current question identity. */
     selectedQuestionId?: string;
+    /** Controlled Questions currently active in Primary or Secondary panels. */
+    activeQuestionIds?: readonly string[];
     /** Selects a question without prescribing router ownership. */
     onQuestionSelect?: (question: WorkspaceNavigationQuestion, event: NavigationClick) => void;
     /** Opens the product-owned menu for one question. */
     onQuestionMenuAction?: (question: WorkspaceNavigationQuestion, event: MenuClick) => void;
+    /** Reports the beginning of an enabled Question drag. */
+    onQuestionDragStart?: (question: WorkspaceNavigationQuestion, event: QuestionDrag) => void;
+    /** Reports the end of an enabled Question drag. */
+    onQuestionDragEnd?: (question: WorkspaceNavigationQuestion, event: QuestionDrag) => void;
     /** Starts a new question. */
     onNewQuestion: MouseEventHandler<HTMLButtonElement>;
     /** Reports activation of the All Projects destination. */