@mithrl/design-system 0.3.0 → 0.4.0

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/index.d.ts

@@ -3,6 +3,8 @@ export { Button, buttonVariants } from "./components/button/Button";
 export type { ButtonProps, ButtonSize, ButtonVariant, } from "./components/button/Button";
 export { Icon, iconVariants } from "./components/icon/Icon";
 export type { IconGlyphComponent, IconProps, IconSize, } from "./components/icon/Icon";
+export { IconSwap } from "./components/icon-swap/IconSwap";
+export type { IconSwapProps } from "./components/icon-swap/IconSwap";
 export { NavigationItem, navigationItemVariants, } from "./components/navigation-item/NavigationItem";
 export type { NavigationItemPreviewState, NavigationItemProps, } from "./components/navigation-item/NavigationItem";
 export { WorkspaceNavigation, WorkspacePanelToggleButton, workspaceNavigationVariants, } from "./components/workspace-navigation/WorkspaceNavigation";
@@ -44,9 +46,11 @@ export type { TagProps } from "./components/tag/Tag";
 export { Avatar, avatarVariants } from "./components/avatar/Avatar";
 export type { AvatarProps, AvatarSize, } from "./components/avatar/Avatar";
 export { ProgressIndicator, progressIndicatorVariants, } from "./components/progress-indicator/ProgressIndicator";
-export type { ProgressIndicatorProps, ProgressIndicatorSize, ProgressIndicatorTone, } from "./components/progress-indicator/ProgressIndicator";
+export type { ProgressIndicatorProps, ProgressIndicatorSize, ProgressIndicatorState, ProgressIndicatorTone, } from "./components/progress-indicator/ProgressIndicator";
 export { Skeleton, skeletonVariants } from "./components/skeleton/Skeleton";
 export type { SkeletonProps, SkeletonRadius, } from "./components/skeleton/Skeleton";
+export { SkeletonReveal } from "./components/skeleton-reveal/SkeletonReveal";
+export type { SkeletonRevealProps } from "./components/skeleton-reveal/SkeletonReveal";
 export { Checkbox } from "./components/checkbox/Checkbox";
 export type { CheckboxPreviewState, CheckboxProps, } from "./components/checkbox/Checkbox";
 export { Radio } from "./components/radio/Radio";
@@ -57,6 +61,8 @@ export { StandardTabs, standardTabsVariants, } from "./components/standard-tabs/
 export type { StandardTabItem, StandardTabsActivationMode, StandardTabsProps, StandardTabsSize, } from "./components/standard-tabs/StandardTabs";
 export { FieldMessage, fieldMessageVariants, } from "./components/field-message/FieldMessage";
 export type { FieldMessageProps, FieldMessageTone, } from "./components/field-message/FieldMessage";
+export { Disclosure } from "./components/disclosure/Disclosure";
+export type { DisclosureProps } from "./components/disclosure/Disclosure";
 export { Field } from "./components/field/Field";
 export type { FieldControlProps, FieldControlStatus, FieldProps, FieldRenderProps, FieldSize, FieldState, } from "./components/field/Field";
 export { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuLinkItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, dropdownMenuContentVariants, } from "./components/dropdown-menu/DropdownMenu";
@@ -91,3 +97,37 @@ export { WorkspaceQuestionSurface } from "./patterns/workspace-app-shell/Workspa
 export type { WorkspaceAppShellNavigationRenderContext, WorkspaceAppShellNavigationRenderer, WorkspaceAppShellLayout, WorkspaceAppShellProps, WorkspaceNavigationConfiguration, } from "./patterns/workspace-app-shell/WorkspaceAppShell";
 export type { WorkspaceNewQuestionDialogProps, WorkspaceNewQuestionDraft, } from "./patterns/workspace-app-shell/WorkspaceNewQuestionDialog";
 export type { WorkspaceQuestionSurfacePanel, WorkspaceQuestionSurfaceProps, WorkspaceQuestionSurfaceScroll, } from "./patterns/workspace-app-shell/WorkspaceQuestionSurface";
+export { StatusOrb } from "./components/status-orb/StatusOrb";
+export type { StatusOrbProps, StatusOrbSize, StatusOrbState, StatusOrbTheme, } from "./components/status-orb/StatusOrb";
+export { FlapText, FLAP_TEXT_DEFAULT_DURATION_MS, FLAP_TEXT_DEFAULT_STAGGER_MS, } from "./components/flap-text/FlapText";
+export type { FlapTextAlign, FlapTextElement, FlapTextProps, } from "./components/flap-text/FlapText";
+export { NumberFlow, numberFlowCells, NUMBER_FLOW_DEFAULT_DURATION_MS, NUMBER_FLOW_DEFAULT_STAGGER_MS, } from "./components/number-flow/NumberFlow";
+export type { NumberFlowCell, NumberFlowDirection, NumberFlowElement, NumberFlowProps, NumberFlowSize, } from "./components/number-flow/NumberFlow";
+export { ApprovalCard } from "./components/approval-card/ApprovalCard";
+export type { ApprovalAnswers, ApprovalCardProps, ApprovalOption, ApprovalQuestion, } from "./components/approval-card/ApprovalCard";
+export { CodeBlock } from "./components/code-block/CodeBlock";
+export type { CodeBlockLabels, CodeBlockProps, CodeBlockRenderLineArgs, CodeBlockVariant, CodeLine, CodeLineKind, } from "./components/code-block/CodeBlock";
+export { CommandSearch } from "./components/command-search/CommandSearch";
+export type { CommandSearchItem, CommandSearchProps, } from "./components/command-search/CommandSearch";
+export { ContextCard, ContextCardList, FileTypeChip, } from "./components/context-cards/ContextCards";
+export type { ContextCardListProps, ContextCardProps, ContextFileType, FileTypeChipProps, } from "./components/context-cards/ContextCards";
+export { FilterTable, filterTableStatusLabels, filterTableStatuses, } from "./components/filter-table/FilterTable";
+export type { FilterTableProps, FilterTableRow, FilterTableStatus, FilterTableStatusLabelMap, } from "./components/filter-table/FilterTable";
+export { FlowchartAction, FlowchartCanvas, FlowchartCondition, FlowchartConnector, FlowchartTrigger, } from "./components/flowchart/Flowchart";
+export type { FlowchartActionProps, FlowchartCanvasProps, FlowchartClauseJoin, FlowchartConditionClause, FlowchartConditionProps, FlowchartConnectorProps, FlowchartConnectorVariant, FlowchartTriggerProps, } from "./components/flowchart/Flowchart";
+export { InsightCards } from "./components/insight-cards/InsightCards";
+export type { Insight, InsightCardsProps, InsightChart, InsightChartPoint, InsightComparison, InsightFollowUp, InsightSegment, InsightTone, } from "./components/insight-cards/InsightCards";
+export { PromptBar, readTriggerAtCaret, } from "./components/prompt-bar/PromptBar";
+export type { PromptBarCommand, PromptBarLabels, PromptBarModel, PromptBarProps, PromptBarShape, PromptBarSource, PromptBarTrigger, } from "./components/prompt-bar/PromptBar";
+export { RecommendationCard, RecommendationEntityChip, } from "./components/recommendation-card/RecommendationCard";
+export type { RecommendationAlternative, RecommendationCardProps, RecommendationConfidence, RecommendationEntityChipProps, } from "./components/recommendation-card/RecommendationCard";
+export { RecordsTable, RecordsTableLink, RecordsTableStrength, RecordsTableTags, recordsTableStrengthLevels, } from "./components/records-table/RecordsTable";
+export type { RecordsTableAlign, RecordsTableColumn, RecordsTableLinkProps, RecordsTableProps, RecordsTableSort, RecordsTableSortDirection, RecordsTableStrengthLevel, RecordsTableStrengthProps, RecordsTableTagsProps, } from "./components/records-table/RecordsTable";
+export { SelectionActions, useSelectionRect, } from "./components/selection-actions/SelectionActions";
+export type { SelectionAction, SelectionActionsProps, SelectionRect, UseSelectionRectOptions, } from "./components/selection-actions/SelectionActions";
+export { SourceChip, SourceStack, StreamingText, } from "./components/streaming-text/StreamingText";
+export type { FollowUpSuggestion, SourceChipProps, SourceChipTone, SourceStackProps, StreamingTextProps, } from "./components/streaming-text/StreamingText";
+export { TaskRow, TaskRows } from "./components/task-rows/TaskRows";
+export type { TaskRowItem, TaskRowProps, TaskRowsProps, TaskRowsView, TaskState, TaskStep, } from "./components/task-rows/TaskRows";
+export { NotificationCenter, NotificationItem, NotificationStatusIcon, NotificationToast, NotificationToastProvider, NotificationToastViewport, NotificationTrigger, NotificationsDrawer, useNotificationToast, } from "./patterns/notifications/Notifications";
+export type { NotificationCenterProps, NotificationFilter, NotificationItemPreviewState, NotificationItemProps, NotificationRecord, NotificationStatusIconProps, NotificationToastData, NotificationToastOptions, NotificationToastProps, NotificationToastProviderProps, NotificationToastViewportProps, NotificationTone, NotificationTriggerProps, NotificationsDrawerProps, } from "./patterns/notifications/Notifications";