@misoto22/design 0.6.1 → 0.8.0

package/dist/diagrams/spec.d.ts

@@ -0,0 +1,405 @@
+/**
+ * The five diagram specifications, and the vocabulary they share.
+ *
+ * These types mirror the JSON schemas published by
+ * [archify](https://github.com/tt-a1i/archify) — `architecture`, `workflow`,
+ * `sequence`, `dataflow` and `lifecycle` — so a specification authored for that
+ * tool renders here without a translation step. That compatibility is the whole
+ * point of copying somebody else's field names: an agent that already knows how
+ * to write `{ "diagram_type": "architecture", "components": [...] }` can hand
+ * the same object to a React component and get the system's own look back.
+ *
+ * WHAT IS DELIBERATELY NOT HERE: archify's routing micro-controls. `via`,
+ * `channelX`, `channelY`, `labelAt`, `labelSegment` and `bias` exist there to
+ * let an author nudge a line after a validator complains about a collision.
+ * They are accepted below so a specification carrying them still typechecks,
+ * and each one says on its own field whether it is applied: `via` and the two
+ * channels are, but only between two nodes placed with `pos`; the three label
+ * nudges never are. They are hints, not a contract, and a figure that needs
+ * many of them is a figure that wants fewer edges.
+ *
+ * Every position in every type is EXPLICIT — a row and a column, a lane and a
+ * step, a participant and a y. Nothing below is solved for. That is what makes
+ * these figures server-renderable: layout is arithmetic on numbers the
+ * specification already carries, not a simulation that has to settle.
+ */
+/** A point in the figure's own user-unit space. */
+type Point = [x: number, y: number];
+/** Which face of a box a line leaves from or arrives at. */
+type Side = 'left' | 'right' | 'top' | 'bottom';
+/**
+ * What a node IS, across every diagram type that has nodes.
+ *
+ * Seven kinds, and in a monochrome system none of them is a colour. Each is
+ * drawn as a distinct sigil in the node's leading corner — a cylinder for a
+ * database, a shield for a security boundary, rails and ticks for a queue — so
+ * the kind survives a greyscale print, a colour-blind reader, and the system's
+ * own rule that the only chroma left is bound to state.
+ */
+type NodeKind = 'frontend' | 'backend' | 'database' | 'cloud' | 'security' | 'messagebus' | 'external';
+/**
+ * How much a relationship or a node is being insisted upon.
+ *
+ * `emphasis` reverses the plate; `security` dashes the frame and doubles the
+ * rule; `dashed` is the quiet one — an optional path, an asynchronous hop.
+ */
+type Variant = 'default' | 'emphasis' | 'security' | 'dashed';
+/** How a line gets from one box to another. */
+type RouteMode = 'auto' | 'straight' | 'orthogonal-h' | 'orthogonal-v';
+/** Whether the key beside the figure names every kind, only the used ones, or none. */
+type LegendMode = 'auto' | 'all' | 'hidden';
+/**
+ * One curated stop in a guided reading of the figure.
+ *
+ * At most five, which is archify's cap and a good one: a sixth chapter is a
+ * second diagram wearing the first one's clothes.
+ */
+interface DiagramView {
+    id: string;
+    label: string;
+    /** Node ids this chapter lights. */
+    focus: string[];
+    note?: string;
+}
+/**
+ * A conclusion card printed under the figure.
+ *
+ * `dot` names a hue in archify's palette. Here it selects a MARK — a filled
+ * square, a ring, a bar — rather than a colour, so seven cards in a row are
+ * still seven distinguishable cards on paper-white.
+ */
+interface DiagramCard {
+    dot: 'cyan' | 'emerald' | 'violet' | 'amber' | 'rose' | 'orange' | 'slate';
+    title: string;
+    items: string[];
+}
+/** What every specification says about itself. */
+interface DiagramMeta {
+    title: string;
+    subtitle?: string;
+    /**
+     * The extent the author's own renderer came out at.
+     *
+     * Accepted so a specification carrying it still typechecks, and deliberately
+     * NOT applied. It describes archify's layout — a different grid, different
+     * column widths, a different plate height — so on any figure placed from
+     * lanes and columns it is simply the wrong rectangle: too small and it crops
+     * the last participants off the edge, too large and it hangs a band of dead
+     * paper under the diagram. The extent here is computed from the marks
+     * actually drawn, which is the only number that can be right.
+     */
+    viewBox?: [number, number] | [number, number, number, number];
+    legend?: {
+        mode?: LegendMode;
+        entries?: Record<string, {
+            label?: string;
+            visible?: boolean;
+        }>;
+    };
+    /**
+     * A guided reading, and no renderer here reads it.
+     *
+     * Accepted for the same reason `viewBox` is — an archify document carrying
+     * chapters still typechecks — and not applied for a different one: chapters
+     * are a CONTROL, not a layout. Lighting one means changing what is lit while
+     * a reader walks through them, and a figure that owned that state would be a
+     * figure with a hidden step counter, a second source of truth about what is
+     * selected, and no way for the page's own next/previous buttons to agree
+     * with it.
+     *
+     * So the chapters stay the caller's: hold the index, hand the chapter's
+     * `focus` ids to `activeIds`, and the figure dims everything else and
+     * announces how many are lit. That is the whole of what a renderer could
+     * have done, in a place a page can also put a heading and a caption.
+     */
+    views?: DiagramView[];
+}
+/** Where a node's facts came from, when the figure was built against real code. */
+interface SourceRef {
+    path: string;
+    line?: number;
+    end_line?: number;
+    label?: string;
+}
+/** The fields every drawn box carries, whatever the diagram type calls it. */
+interface NodeBase {
+    id: string;
+    label: string;
+    /** One short line under the label — what it is, a step back. */
+    sublabel?: string;
+    /** A mono chip on the box: a version, a region, a protocol. */
+    tag?: string;
+    /** How wide and tall this box is, when the type's default does not suit it. */
+    width?: number;
+    height?: number;
+}
+/** The fields every drawn line carries. */
+interface EdgeBase {
+    id?: string;
+    from: string;
+    to: string;
+    label?: string;
+    variant?: Variant;
+    fromSide?: Side;
+    toSide?: Side;
+    route?: RouteMode | string;
+    /**
+     * Waypoints the line is dragged through, in order.
+     *
+     * Honoured only when BOTH endpoints were placed with `pos` — see
+     * `Wire.keepWaypoints`. A waypoint is a coordinate in the space the author's
+     * nodes were placed in, and on a lane-and-column grid that space is one this
+     * renderer chose, not one the author saw.
+     */
+    via?: Point[];
+    /**
+     * Where the label goes, and where it is nudged to — accepted, never applied.
+     *
+     * These three are collision repairs authored against archify's router and
+     * measured in the positions THAT router produced. This one does not produce
+     * the same collisions, so honouring them moves labels off clear ground and
+     * onto the nodes they were nudged away from. Dropping the nudge and keeping
+     * the wording is the reading that preserves the meaning; the fields stay so
+     * a specification carrying them still typechecks.
+     */
+    labelAt?: Point;
+    labelDx?: number;
+    labelDy?: number;
+    /** Forces an orthogonal run through a fixed coordinate. */
+    channelX?: number;
+    channelY?: number;
+    /** Stroke weight, in user units. */
+    width?: number;
+}
+interface ArchitectureComponent extends NodeBase {
+    type: NodeKind;
+    /**
+     * Grid placement. Ignored when `pos` is given.
+     *
+     * Declaring NEITHER is also a placement: the component takes the next free
+     * cell in declaration order, wrapping at `layout.cols`. A missing one of the
+     * two still reads as 0, so `{ col: 2 }` is row 0, column 2.
+     */
+    row?: number;
+    col?: number;
+    /** Absolute placement, in user units, overriding the grid. */
+    pos?: Point;
+    /**
+     * `[width, height]`, which is how archify's architecture schema spells it.
+     *
+     * Accepted alongside the `width` / `height` pair every other diagram type
+     * uses, and it wins when both are given. Two spellings for one fact is not a
+     * design — it is the cost of reading somebody else's file format without
+     * making its authors edit their files.
+     */
+    size?: [number, number];
+    sources?: SourceRef[];
+}
+/**
+ * A frame drawn around several components.
+ *
+ * `region` is a deployment boundary — an availability zone, a VPC, a cluster.
+ * `security-group` is a trust boundary, and is drawn dashed for that reason: a
+ * reader should be able to see which line is about where a thing runs and which
+ * is about what may reach it, without reading either label.
+ */
+interface ArchitectureBoundary {
+    kind: 'region' | 'security-group';
+    label: string;
+    /** Component ids this frame encloses. */
+    wraps: string[];
+    /** Clear space between the frame and the boxes it holds. */
+    pad?: number;
+}
+interface ArchitectureSpec {
+    diagram_type?: 'architecture';
+    meta: DiagramMeta;
+    layout?: {
+        origin?: Point;
+        /** How many columns the flow wraps at, for components with no row or col. */
+        cols?: number;
+        gapX?: number;
+        gapY?: number;
+        /** A cell's width, which is also the width of the plates drawn in it. */
+        cellW?: number;
+        cellH?: number;
+    };
+    components: ArchitectureComponent[];
+    boundaries?: ArchitectureBoundary[];
+    connections?: EdgeBase[];
+    cards?: DiagramCard[];
+}
+/** A horizontal band: who or what performs the steps in it. */
+interface WorkflowLane {
+    id: string;
+    label: string;
+    /** `exception` bands hold the failure path and are drawn on a washed ground. */
+    variant?: 'normal' | 'exception';
+}
+/** A vertical band across every lane: a stage of the process. */
+interface WorkflowPhase {
+    id: string;
+    label: string;
+    /** The columns this phase claims. The header rule is drawn across them. */
+    fromCol: number;
+    toCol: number;
+    /** `security` and `dashed` dash the phase's rule; `emphasis` thickens it. */
+    variant?: Variant;
+}
+/** A frame around a run of columns inside ONE lane. */
+interface WorkflowGroup extends WorkflowPhase {
+    lane: string;
+}
+interface WorkflowNode extends NodeBase {
+    lane: string;
+    col: number;
+    type?: NodeKind;
+    /** Nudges this box off its row's centre line, for a branch that needs room. */
+    yOffset?: number;
+}
+/**
+ * What a line MEANS in a process, which is not the same question as how it is
+ * drawn.
+ *
+ * `main` is the path the reader should be able to follow without thinking;
+ * `branch` leaves it and comes back; `async` does not block; `return` goes
+ * backwards; `error` leaves for the exception lane.
+ *
+ * Three of them reach the drawing on their own: `async` and `error` take the
+ * quiet dashed line, and `return` takes an open arrowhead. `main` and `branch`
+ * do not, because `mainPath` already draws that distinction as weight. An
+ * explicit `variant` overrides any of it.
+ */
+type WorkflowEdgeRole = 'main' | 'branch' | 'async' | 'return' | 'error';
+interface WorkflowEdge extends EdgeBase {
+    role?: WorkflowEdgeRole;
+}
+interface WorkflowSpec {
+    diagram_type?: 'workflow';
+    schema_version?: 1 | 2;
+    meta: DiagramMeta;
+    lanes: WorkflowLane[];
+    phases?: WorkflowPhase[];
+    groups?: WorkflowGroup[];
+    nodes: WorkflowNode[];
+    edges?: WorkflowEdge[];
+    /** Node ids on the path a reader should follow first. Drawn heavier. */
+    mainPath?: string[];
+    cards?: DiagramCard[];
+}
+interface SequenceParticipant extends NodeBase {
+    type?: NodeKind;
+}
+/** A labelled horizontal band across the whole figure: a phase of the exchange. */
+interface SequenceSegment {
+    from: number;
+    to: number;
+    label: string;
+}
+interface SequenceMessage {
+    id?: string;
+    from: string;
+    to: string;
+    /** Where this message sits on the vertical time axis, in user units. */
+    y: number;
+    label?: string;
+    /** `return` is drawn dashed with an open head — a reply, not a call. */
+    variant?: Variant | 'return';
+    note?: string;
+}
+/** A bar on a lifeline: this participant is busy for this span of the axis. */
+interface SequenceActivation {
+    participant: string;
+    from: number;
+    to: number;
+    type?: NodeKind;
+}
+interface SequenceSpec {
+    diagram_type?: 'sequence';
+    meta: DiagramMeta & {
+        /**
+         * `fixed` gives every participant a 148-unit column; `spread` gives every
+         * participant the width the WIDEST label needs.
+         *
+         * Both are uniform — a sequence diagram with columns of different widths
+         * reads as a diagram where the wide participant matters more — so `spread`
+         * widens the whole figure rather than dividing it. Reach for it when a
+         * meaningful participant label does not fit a fixed column. Shortening the
+         * label to make it fit is the wrong repair: the label is the data.
+         */
+        column_fit?: 'fixed' | 'spread';
+    };
+    participants: SequenceParticipant[];
+    segments?: SequenceSegment[];
+    messages: SequenceMessage[];
+    activations?: SequenceActivation[];
+    cards?: DiagramCard[];
+}
+/** A column header: a stage of the pipeline. */
+interface DataflowStage {
+    label: string;
+}
+interface DataflowNode extends NodeBase {
+    type: NodeKind;
+    /** Index into `stages`. */
+    stage: number;
+    row: number;
+    yOffset?: number;
+}
+interface DataflowEdge extends EdgeBase {
+    /**
+     * What is travelling, in governance terms — `PII`, `aggregated`, `hashed`.
+     *
+     * Printed as a mono chip on the line rather than folded into the label,
+     * because a data-flow diagram is very often read for exactly this and for
+     * nothing else.
+     */
+    classification?: string;
+}
+interface DataflowSpec {
+    diagram_type?: 'dataflow';
+    meta: DiagramMeta;
+    stages: DataflowStage[];
+    nodes: DataflowNode[];
+    flows?: DataflowEdge[];
+    cards?: DiagramCard[];
+}
+/**
+ * What a state IS, and here the system's one licence for colour applies.
+ *
+ * `success` and `failure` are bound to `--ok` and `--danger` — the two tokens
+ * this design system reserves for state and refuses to spend on brand. Every
+ * other kind is carried by shape: a start is a filled cap, a decision is a
+ * diamond, a wait is dashed, an external is a plate with a cut corner.
+ */
+type LifecycleStateKind = 'start' | 'active' | 'waiting' | 'decision' | 'success' | 'failure' | 'neutral' | 'external';
+interface LifecycleLane {
+    id: string;
+    label: string;
+}
+interface LifecycleState extends NodeBase {
+    type: LifecycleStateKind;
+    /** A step number printed in the corner — `01`, `02a`. */
+    step?: string;
+    /** Which lane holds it. Defaults to the first, which is the main rail. */
+    lane?: string;
+    col: number;
+    /** Nudges this state off its lane's centre line, for a state that needs room. */
+    yOffset?: number;
+}
+interface LifecycleTransition extends EdgeBase {
+    /** A second line under the label: the condition, the timeout, the retry count. */
+    note?: string;
+}
+interface LifecycleSpec {
+    diagram_type?: 'lifecycle';
+    meta: DiagramMeta;
+    lanes?: LifecycleLane[];
+    states: LifecycleState[];
+    transitions?: LifecycleTransition[];
+    cards?: DiagramCard[];
+}
+/** Any of the five, for a call site that dispatches on `diagram_type`. */
+type DiagramSpecAny = ArchitectureSpec | WorkflowSpec | SequenceSpec | DataflowSpec | LifecycleSpec;
+
+export type { ArchitectureBoundary, ArchitectureComponent, ArchitectureSpec, DataflowEdge, DataflowNode, DataflowSpec, DataflowStage, DiagramCard, DiagramMeta, DiagramSpecAny, DiagramView, EdgeBase, LegendMode, LifecycleLane, LifecycleSpec, LifecycleState, LifecycleStateKind, LifecycleTransition, NodeBase, NodeKind, Point, RouteMode, SequenceActivation, SequenceMessage, SequenceParticipant, SequenceSegment, SequenceSpec, Side, SourceRef, Variant, WorkflowEdge, WorkflowEdgeRole, WorkflowGroup, WorkflowLane, WorkflowNode, WorkflowPhase, WorkflowSpec };

package/dist/diagrams/spec.js

@@ -0,0 +1 @@
+//# sourceMappingURL=spec.js.map

package/dist/diagrams/spec.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/index.d.ts

@@ -5,6 +5,11 @@ export { CONTROL_BASE, CONTROL_BORDER, isInvalid } from './lib/control.js';
 export { IndicatorStyle, useSelectionIndicator } from './lib/useSelectionIndicator.js';
 export { Button, ButtonProps, ButtonSize, ButtonVariant } from './components/Button/Button.js';
 export { FloatingIconButton, FloatingIconButtonProps } from './components/FloatingIconButton/FloatingIconButton.js';
+export { Text, TextElement, TextProps, TextSize, TextTone } from './components/Text/Text.js';
+export { Heading, HeadingLevel, HeadingProps, HeadingSize } from './components/Heading/Heading.js';
+export { Code, CodeProps } from './components/Code/Code.js';
+export { CodeBlock, CodeBlockProps } from './components/CodeBlock/CodeBlock.js';
+export { Markdown, MarkdownProps } from './components/Markdown/Markdown.js';
 export { Badge, BadgeProps, BadgeTone } from './components/Badge/Badge.js';
 export { Tag, TagProps } from './components/Tag/Tag.js';
 export { Kbd, KbdProps } from './components/Kbd/Kbd.js';
@@ -13,6 +18,7 @@ export { StatusDot, StatusDotProps, StatusTone } from './components/StatusDot/St
 export { StatusPill, StatusPillProps } from './components/StatusPill/StatusPill.js';
 export { EXTERNAL_LINK_ARROW, LinkArrow, LinkArrowProps } from './components/LinkArrow/LinkArrow.js';
 export { Separator, SeparatorProps } from './components/Separator/Separator.js';
+export { Timestamp, TimestampFormat, TimestampProps } from './components/Timestamp/Timestamp.js';
 export { Figure, FigureBand, FigureBandProps } from './components/FigureBand/FigureBand.js';
 export { Spinner, SpinnerProps } from './components/Spinner/Spinner.js';
 export { Skeleton, SkeletonBlock, SkeletonCircle, SkeletonLine, SkeletonPage, SkeletonPageProps, SkeletonProps, SkeletonText, SkeletonTextProps } from './components/Skeleton/Skeleton.js';
@@ -21,7 +27,7 @@ export { Alert, AlertProps, AlertTone } from './components/Alert/Alert.js';
 export { EmptyState, EmptyStateProps } from './components/EmptyState/EmptyState.js';
 export { ERROR_ACTION_CLASS, ErrorState, ErrorStateProps } from './components/ErrorState/ErrorState.js';
 export { Toaster } from './components/Toast/Toast.js';
-export { Field, FieldProps } from './components/Field/Field.js';
+export { Field, FieldLayout, FieldProps } from './components/Field/Field.js';
 export { Combobox, ComboboxOption, ComboboxProps } from './components/Combobox/Combobox.js';
 export { DATE_PRESETS, DatePicker, DatePickerProps, DatePreset, DateRangePicker, DateRangePickerProps, RANGE_PRESETS } from './components/DatePicker/DatePicker.js';
 export { Slider, SliderProps } from './components/Slider/Slider.js';
@@ -34,11 +40,11 @@ export { Checkbox, CheckboxProps } from './components/Checkbox/Checkbox.js';
 export { RadioGroup, RadioGroupItem, RadioGroupItemProps, RadioGroupProps } from './components/RadioGroup/RadioGroup.js';
 export { Switch, SwitchProps } from './components/Switch/Switch.js';
 export { Dialog, DialogClose, DialogContent, DialogContentProps, DialogTrigger } from './components/Dialog/Dialog.js';
-export { DropdownMenu, DropdownMenuContent, DropdownMenuContentProps, DropdownMenuItem, DropdownMenuItemProps, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from './components/DropdownMenu/DropdownMenu.js';
+export { DropdownMenu, DropdownMenuContent, DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuGroupProps, DropdownMenuItem, DropdownMenuItemProps, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from './components/DropdownMenu/DropdownMenu.js';
 export { Tooltip, TooltipProps, TooltipProvider } from './components/Tooltip/Tooltip.js';
 export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverContentProps, PopoverTrigger } from './components/Popover/Popover.js';
 export { Sheet, SheetClose, SheetContent, SheetContentProps, SheetSide, SheetTrigger } from './components/Sheet/Sheet.js';
-export { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuItemProps, ContextMenuLabel, ContextMenuSeparator, ContextMenuTrigger } from './components/ContextMenu/ContextMenu.js';
+export { ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuGroupProps, ContextMenuItem, ContextMenuItemProps, ContextMenuLabel, ContextMenuSeparator, ContextMenuTrigger } from './components/ContextMenu/ContextMenu.js';
 export { Command, CommandDialog, CommandDialogProps, CommandEmpty, CommandFooter, CommandGroup, CommandHint, CommandHintProps, CommandInput, CommandItem, CommandItemProps, CommandList, CommandSeparator } from './components/Command/Command.js';
 export { MenuAction, SearchableMenu, SearchableMenuProps } from './components/SearchableMenu/SearchableMenu.js';
 export { Tabs, TabsContent, TabsList, TabsTrigger } from './components/Tabs/Tabs.js';
@@ -49,13 +55,19 @@ export { Pagination, PaginationProps, paginationRange } from './components/Pagin
 export { NavItem, NavItemProps } from './components/NavItem/NavItem.js';
 export { Card, CardBody, CardFooter, CardHeader, CardProps, CardTitle } from './components/Card/Card.js';
 export { SortDirection, TBody, TD, TDProps, TH, THProps, THead, TR, Table, TableAlign, TableBorders, TableProps } from './components/Table/Table.js';
-export { Calendar, CalendarProps } from './components/Calendar/Calendar.js';
+export { DescriptionList, DescriptionListItem, DescriptionListLayout, DescriptionListProps } from './components/DescriptionList/DescriptionList.js';
+export { Toolbar, ToolbarAlign, ToolbarPosition, ToolbarProps } from './components/Toolbar/Toolbar.js';
+export { AspectRatio, AspectRatioProps } from './components/AspectRatio/AspectRatio.js';
+export { Calendar, CalendarLabels, CalendarProps } from './components/Calendar/Calendar.js';
 export { ScrollArea, ScrollAreaProps } from './components/ScrollArea/ScrollArea.js';
 export { AppShell, AppShellProps } from './components/AppShell/AppShell.js';
 export { Article, ArticleProps } from './components/Article/Article.js';
 export { Diagram, DiagramEdge, DiagramNode, DiagramProps, DiagramSpec } from './components/Diagram/Diagram.js';
 export { Step, Steps, StepsProps } from './components/Steps/Steps.js';
 export { DateRange } from 'react-day-picker';
+export { MarkdownHeadingLevel, MarkdownInline, MarkdownNode } from './components/Markdown/nodes.js';
+export { parseMarkdown } from './components/Markdown/parse.js';
+export { slugify } from './components/Markdown/slug.js';
 export { toast } from 'sonner';
 import 'react';
 import 'clsx';

package/dist/index.js

@@ -5,6 +5,11 @@ import { CONTROL_BASE, CONTROL_BORDER, isInvalid } from "./lib/control.js";
 import { useSelectionIndicator } from "./lib/useSelectionIndicator.js";
 export * from "./components/Button/Button.js";
 export * from "./components/FloatingIconButton/FloatingIconButton.js";
+export * from "./components/Text/Text.js";
+export * from "./components/Heading/Heading.js";
+export * from "./components/Code/Code.js";
+export * from "./components/CodeBlock/CodeBlock.js";
+export * from "./components/Markdown/Markdown.js";
 export * from "./components/Badge/Badge.js";
 export * from "./components/Tag/Tag.js";
 export * from "./components/Kbd/Kbd.js";
@@ -13,6 +18,7 @@ export * from "./components/StatusDot/StatusDot.js";
 export * from "./components/StatusPill/StatusPill.js";
 export * from "./components/LinkArrow/LinkArrow.js";
 export * from "./components/Separator/Separator.js";
+export * from "./components/Timestamp/Timestamp.js";
 export * from "./components/FigureBand/FigureBand.js";
 export * from "./components/Spinner/Spinner.js";
 export * from "./components/Skeleton/Skeleton.js";
@@ -49,6 +55,9 @@ export * from "./components/Pagination/Pagination.js";
 export * from "./components/NavItem/NavItem.js";
 export * from "./components/Card/Card.js";
 export * from "./components/Table/Table.js";
+export * from "./components/DescriptionList/DescriptionList.js";
+export * from "./components/Toolbar/Toolbar.js";
+export * from "./components/AspectRatio/AspectRatio.js";
 export * from "./components/Calendar/Calendar.js";
 export * from "./components/ScrollArea/ScrollArea.js";
 export * from "./components/AppShell/AppShell.js";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * @misoto22/design — public entry.\n *\n * Components export from here; the look ships separately as CSS:\n *\n *   import '@misoto22/design/styles.css'    // compiled Tailwind + tokens + fonts\n *\n * or, for an app that already compiles Tailwind itself, the portable layers on\n * their own:\n *\n *   import '@misoto22/design/tokens.css'    // primitives\n *   import '@misoto22/design/semantic.css'  // roles\n *   import '@misoto22/design/keyframes.css' // motion\n *\n * Everything below is a consumer contract. Adding an export is cheap; changing\n * or removing one is a breaking change (DESIGN-API-001).\n */\n\n// ─── Utilities ───\nexport * from './lib/overlay-container'\n\n// ─── Tokens ───\nexport { BRAND } from './tokens/brand'\nexport type { BrandColor } from './tokens/brand'\n\n// ─── Utilities ───\nexport { cn } from './lib/cn'\nexport { CONTROL_BASE, CONTROL_BORDER, isInvalid } from './lib/control'\nexport { useSelectionIndicator } from './lib/useSelectionIndicator'\nexport type { IndicatorStyle } from './lib/useSelectionIndicator'\n\n// ─── Actions ───\nexport * from './components/Button/Button'\nexport * from './components/FloatingIconButton/FloatingIconButton'\n\n// ─── Display ───\nexport * from './components/Badge/Badge'\nexport * from './components/Tag/Tag'\nexport * from './components/Kbd/Kbd'\nexport * from './components/Avatar/Avatar'\nexport * from './components/StatusDot/StatusDot'\nexport * from './components/StatusPill/StatusPill'\nexport * from './components/LinkArrow/LinkArrow'\nexport * from './components/Separator/Separator'\nexport * from './components/FigureBand/FigureBand'\n\n// ─── Feedback ───\nexport * from './components/Spinner/Spinner'\nexport * from './components/Skeleton/Skeleton'\nexport * from './components/Progress/Progress'\nexport * from './components/Alert/Alert'\nexport * from './components/EmptyState/EmptyState'\nexport * from './components/ErrorState/ErrorState'\nexport * from './components/Toast/Toast'\n\n// ─── Forms ───\nexport * from './components/Field/Field'\nexport * from './components/Combobox/Combobox'\nexport * from './components/DatePicker/DatePicker'\nexport * from './components/Slider/Slider'\nexport * from './components/ToggleGroup/ToggleGroup'\nexport * from './components/Input/Input'\nexport * from './components/Textarea/Textarea'\nexport * from './components/Select/Select'\nexport * from './components/NativeSelect/NativeSelect'\nexport * from './components/Checkbox/Checkbox'\nexport * from './components/RadioGroup/RadioGroup'\nexport * from './components/Switch/Switch'\n\n// ─── Overlays ───\nexport * from './components/Dialog/Dialog'\nexport * from './components/DropdownMenu/DropdownMenu'\nexport * from './components/Tooltip/Tooltip'\nexport * from './components/Popover/Popover'\nexport * from './components/Sheet/Sheet'\nexport * from './components/ContextMenu/ContextMenu'\nexport * from './components/Command/Command'\nexport * from './components/SearchableMenu/SearchableMenu'\n\n// ─── Navigation ───\nexport * from './components/Tabs/Tabs'\nexport * from './components/Accordion/Accordion'\nexport * from './components/Collapsible/Collapsible'\nexport * from './components/Breadcrumb/Breadcrumb'\nexport * from './components/Pagination/Pagination'\nexport * from './components/NavItem/NavItem'\n\n// ─── Surfaces / layout ───\nexport * from './components/Card/Card'\nexport * from './components/Table/Table'\nexport * from './components/Calendar/Calendar'\nexport * from './components/ScrollArea/ScrollArea'\nexport * from './components/AppShell/AppShell'\nexport * from './components/Article/Article'\nexport * from './components/Diagram/Diagram'\nexport * from './components/Steps/Steps'\n"],"mappings":"AAmBA,cAAc;AAGd,SAAS,aAAa;AAItB,SAAS,UAAU;AACnB,SAAS,cAAc,gBAAgB,iBAAiB;AACxD,SAAS,6BAA6B;AAItC,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * @misoto22/design — public entry.\n *\n * Components export from here; the look ships separately as CSS:\n *\n *   import '@misoto22/design/styles.css'    // compiled Tailwind + tokens + fonts\n *\n * or, for an app that already compiles Tailwind itself, the portable layers on\n * their own:\n *\n *   import '@misoto22/design/tokens.css'    // primitives, plus data-mode and data-density\n *   import '@misoto22/design/semantic.css'  // roles\n *   import '@misoto22/design/themes.css'    // the other six theming axes\n *   import '@misoto22/design/keyframes.css' // motion\n *\n * All four, or the theming attributes are attributes that do nothing: every\n * axis but `data-mode` and `data-density` is declared only in `themes.css`, and\n * an app that skips it writes `data-radius=\"sharp\"` and gets no error, no\n * warning and no corner.\n *\n * Everything below is a consumer contract. Adding an export is cheap; changing\n * or removing one is a breaking change (DESIGN-API-001).\n */\n\n// ─── Utilities ───\nexport * from './lib/overlay-container'\n\n// ─── Tokens ───\nexport { BRAND } from './tokens/brand'\nexport type { BrandColor } from './tokens/brand'\n\n// ─── Utilities ───\nexport { cn } from './lib/cn'\nexport { CONTROL_BASE, CONTROL_BORDER, isInvalid } from './lib/control'\nexport { useSelectionIndicator } from './lib/useSelectionIndicator'\nexport type { IndicatorStyle } from './lib/useSelectionIndicator'\n\n// ─── Actions ───\nexport * from './components/Button/Button'\nexport * from './components/FloatingIconButton/FloatingIconButton'\n\n// ─── Display ───\nexport * from './components/Text/Text'\nexport * from './components/Heading/Heading'\nexport * from './components/Code/Code'\nexport * from './components/CodeBlock/CodeBlock'\nexport * from './components/Markdown/Markdown'\nexport * from './components/Badge/Badge'\nexport * from './components/Tag/Tag'\nexport * from './components/Kbd/Kbd'\nexport * from './components/Avatar/Avatar'\nexport * from './components/StatusDot/StatusDot'\nexport * from './components/StatusPill/StatusPill'\nexport * from './components/LinkArrow/LinkArrow'\nexport * from './components/Separator/Separator'\nexport * from './components/Timestamp/Timestamp'\nexport * from './components/FigureBand/FigureBand'\n\n// ─── Feedback ───\nexport * from './components/Spinner/Spinner'\nexport * from './components/Skeleton/Skeleton'\nexport * from './components/Progress/Progress'\nexport * from './components/Alert/Alert'\nexport * from './components/EmptyState/EmptyState'\nexport * from './components/ErrorState/ErrorState'\nexport * from './components/Toast/Toast'\n\n// ─── Forms ───\nexport * from './components/Field/Field'\nexport * from './components/Combobox/Combobox'\nexport * from './components/DatePicker/DatePicker'\nexport * from './components/Slider/Slider'\nexport * from './components/ToggleGroup/ToggleGroup'\nexport * from './components/Input/Input'\nexport * from './components/Textarea/Textarea'\nexport * from './components/Select/Select'\nexport * from './components/NativeSelect/NativeSelect'\nexport * from './components/Checkbox/Checkbox'\nexport * from './components/RadioGroup/RadioGroup'\nexport * from './components/Switch/Switch'\n\n// ─── Overlays ───\nexport * from './components/Dialog/Dialog'\nexport * from './components/DropdownMenu/DropdownMenu'\nexport * from './components/Tooltip/Tooltip'\nexport * from './components/Popover/Popover'\nexport * from './components/Sheet/Sheet'\nexport * from './components/ContextMenu/ContextMenu'\nexport * from './components/Command/Command'\nexport * from './components/SearchableMenu/SearchableMenu'\n\n// ─── Navigation ───\nexport * from './components/Tabs/Tabs'\nexport * from './components/Accordion/Accordion'\nexport * from './components/Collapsible/Collapsible'\nexport * from './components/Breadcrumb/Breadcrumb'\nexport * from './components/Pagination/Pagination'\nexport * from './components/NavItem/NavItem'\n\n// ─── Surfaces / layout ───\nexport * from './components/Card/Card'\nexport * from './components/Table/Table'\nexport * from './components/DescriptionList/DescriptionList'\nexport * from './components/Toolbar/Toolbar'\nexport * from './components/AspectRatio/AspectRatio'\nexport * from './components/Calendar/Calendar'\nexport * from './components/ScrollArea/ScrollArea'\nexport * from './components/AppShell/AppShell'\nexport * from './components/Article/Article'\nexport * from './components/Diagram/Diagram'\nexport * from './components/Steps/Steps'\n"],"mappings":"AAyBA,cAAc;AAGd,SAAS,aAAa;AAItB,SAAS,UAAU;AACnB,SAAS,cAAc,gBAAgB,iBAAiB;AACxD,SAAS,6BAA6B;AAItC,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}

package/dist/keyframes.css

@@ -202,10 +202,64 @@
   }
 }
 
-/* One place, not per-component. A user who has asked for less motion gets the
-   end state immediately rather than a faster version of the same move. */
+/* ─── Reduced motion ───
+   Two rules, and the argument behind them matters more than the CSS does.
+
+   This began as one opt-in rule: a surface that animated carried
+   `data-m22-animated`, and that attribute was what got cancelled. It was
+   forgotten four times — Accordion's panel, CollapsibleSection's panel,
+   SheetContent's slide, AppShell's drawer — by four authors across four
+   components. A mechanism four people independently fail to remember is not
+   being failed by its authors; it is failing them. The other half of the old
+   selector, `[class*='m22-anim']`, matched nothing whatsoever: Tailwind emits
+   `animate-[m22-collapsible-down_…]`, which contains no `m22-anim`, so half
+   the kill switch had never once fired and nothing anywhere said so.
+
+   So the GUARANTEE is now the universal rule below, deliberately the well-worn
+   one. It cannot be forgotten because there is nothing to remember: a new
+   component is covered before its author has heard of this file. It also
+   reaches `transition-duration`, which the old rule never did — and a panel
+   that slides is usually written as a transition, not a keyframe, which is how
+   two of the four escaped.
+
+   The cost, stated plainly: this is a `*` rule in a stylesheet consumers
+   import, so it reaches their components too. That is intended. It fires only
+   when the reader has asked their operating system for less motion, and this
+   package already asserts base styles on `*` (see index.css). A caller with
+   motion they consider essential can still keep it — `!important` on `*` is
+   the weakest `!important` there is, so any class-level
+   `animation-duration: … !important` outranks it. What changes is the default:
+   keeping motion under this preference becomes something you write down and
+   defend, instead of something you get by forgetting. That inversion is the
+   whole point of the change.
+
+   0.01ms rather than `none`, because JavaScript listens. Radix unmounts a
+   closing panel on `animationend`; consumer code may await `transitionend`. A
+   near-zero duration still fires both, where `none` fires neither. It is the
+   reset's least obvious detail and the reason it is written this way wherever
+   it appears.
+
+   `[data-m22-animated]` stays, and is no longer load-bearing. It is a
+   component asserting that its motion is decorative, and it goes further than
+   the floor above by removing the animation outright rather than running an
+   instant frame of it. Read it as documentation with teeth. Do NOT read it as
+   the thing that makes reduced motion work — believing that was the mistake
+   this replaced. `src/__tests__/reduced-motion.test.tsx` holds both ends: it
+   fails if this block stops being universal, if it stops naming transitions,
+   if it grows another selector that matches nothing, or if a component reaches
+   for a keyframe here without making the assertion. */
 @media (prefers-reduced-motion: reduce) {
-  [class*='m22-anim'],
+  *,
+  ::before,
+  ::after {
+    animation-delay: 0ms !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-delay: 0ms !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+
   [data-m22-animated] {
     animation: none !important;
   }

package/dist/lib/overlay-container.d.ts

@@ -7,8 +7,8 @@ interface OverlayContainerProps {
     children: ReactNode;
 }
 /**
- * Redirects every overlay in the subtree — popover, select, menu, tooltip — into
- * a given element instead of `document.body`.
+ * Redirects every overlay in the subtree — popover, select, menu, tooltip,
+ * dialog, sheet — into a given element instead of `document.body`.
  *
  * Two problems, one cause. An overlay portalled to the body is positioned
  * against the VIEWPORT, so inside a bounded frame (a documentation example, a
@@ -20,7 +20,11 @@ interface OverlayContainerProps {
  * inherits what the frame declares, and collides with the frame's edges.
  *
  * The container must be positioned (`relative` is enough) for the panel to be
- * placed against it rather than against the nearest positioned ancestor.
+ * placed against it rather than against the nearest positioned ancestor. The
+ * modal surfaces need it for a second reason: they place themselves with
+ * `position: fixed`, which resolves against the VIEWPORT whatever element they
+ * are portalled into, so a named container switches them to `absolute` — and
+ * an unpositioned container would then hand them the wrong box.
  *
  * @example
  * const [frame, setFrame] = useState<HTMLElement | null>(null)
@@ -31,7 +35,13 @@ interface OverlayContainerProps {
 declare function OverlayContainer({ container, children }: OverlayContainerProps): react.JSX.Element;
 /**
  * The element overlays in this subtree should render into, or `null` for the
- * document body. Every portal in the library reads this.
+ * document body.
+ *
+ * Every portal in the library reads this. That sentence was false for a
+ * release: `Dialog` and `Sheet` rendered the Radix portal with no container and
+ * never called this hook, and their props derive from `Content`, which has no
+ * `container` — so a caller could not pass one either, and every modal example
+ * on the documentation site escaped the preview card it was drawn in.
  */
 declare function useOverlayContainer(): HTMLElement | null;