@misoto22/design 0.7.0 → 0.9.0

package/dist/diagrams/lib/wires.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/diagrams/lib/wires.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type { EdgeBase, Side, Variant } from '../spec'\nimport type { Box } from './geometry'\nimport { edgeClasses, EdgeLabel, edgeMarker, edgeStroke } from './marks'\nimport { routeEdge, spreadPorts, type PortUse } from './route'\n\n/** One line to draw, once its two boxes are known. */\nexport interface Wire {\n  edge: EdgeBase & { variant?: Variant | 'return'; classification?: string; note?: string }\n  from: Box\n  to: Box\n  /** Overrides the variant's own stroke weight — a main path drawn heavier. */\n  weight?: number\n  /** An open arrowhead rather than a filled one. */\n  open?: boolean\n  /**\n   * Whether this line's `via` / `channelX` / `channelY` mean anything here.\n   *\n   * A waypoint is an ABSOLUTE coordinate in whatever space the author's nodes\n   * were placed in. When a specification pins its nodes with `pos`, that space\n   * is this renderer's space too and the waypoints land exactly where they were\n   * meant to. When the nodes are placed from a lane and a column, this renderer\n   * chose the coordinates — so the author's waypoints refer to a grid that does\n   * not exist here, and following them drags lines across unrelated nodes.\n   *\n   * So the rule is per line and not per figure: honour the waypoints when both\n   * of a line's endpoints were placed absolutely, and route automatically\n   * otherwise. Defaults to false, which is the safe half.\n   */\n  keepWaypoints?: boolean\n}\n\n/**\n * Every line in a figure, routed together.\n *\n * Together rather than one at a time, because port spreading is a property of a\n * FACE and not of a line: how far off centre a given arrow sits depends on how\n * many others land on the same face, which no single line can know. Routing\n * them independently is what produces three arrowheads stacked on one point.\n *\n * Lines that pin their own geometry — `via`, a channel, an explicit side — opt\n * out of the spread. An author who placed a line has already answered the\n * question the spread exists to answer, and moving it afterwards makes the\n * control useless.\n *\n * Returns the paths and the labels separately because ORDER IS THE MASK: a\n * label's plate has to be painted over every line in the figure, not merely\n * over its own. Interleaving them puts the third line on top of the first\n * line's label.\n */\nexport function renderWires(\n  wires: Wire[],\n  uid: string,\n): { paths: ReactNode; labels: ReactNode } {\n  const uses: PortUse[] = []\n\n  wires.forEach((wire, index) => {\n    const { edge } = wire\n    const pinned =\n      wire.keepWaypoints === true &&\n      Boolean(edge.via?.length || edge.channelX !== undefined || edge.channelY !== undefined)\n    if (pinned) return\n    if (edge.fromSide) uses.push({ face: `${edge.from}:${edge.fromSide}`, ref: `${index}:from` })\n    if (edge.toSide) uses.push({ face: `${edge.to}:${edge.toSide}`, ref: `${index}:to` })\n    if (!edge.fromSide) uses.push({ face: `${edge.from}:auto`, ref: `${index}:from` })\n    if (!edge.toSide) uses.push({ face: `${edge.to}:auto`, ref: `${index}:to` })\n  })\n\n  const offsets = spreadPorts(uses)\n\n  const routed = wires.map((wire, index) => {\n    const { edge } = wire\n    const keep = wire.keepWaypoints === true\n    return {\n      wire,\n      index,\n      route: routeEdge({\n        from: wire.from,\n        to: wire.to,\n        fromSide: edge.fromSide as Side | undefined,\n        toSide: edge.toSide as Side | undefined,\n        mode: edge.route,\n        via: keep ? edge.via : undefined,\n        channelX: keep ? edge.channelX : undefined,\n        channelY: keep ? edge.channelY : undefined,\n        fromOffset: offsets.get(`${index}:from`),\n        toOffset: offsets.get(`${index}:to`),\n      }),\n    }\n  })\n\n  return {\n    paths: (\n      <g data-diagram-wires=\"\">\n        {routed.map(({ wire, index, route }) => (\n          <path\n            key={wire.edge.id ?? index}\n            d={route.d}\n            fill=\"none\"\n            data-edge={wire.edge.id}\n            markerEnd={`url(#${uid}-${wire.open ? 'arrow-open' : edgeMarker(wire.edge.variant)})`}\n            className={edgeClasses(wire.edge.variant)}\n            {...edgeStroke(wire.edge.variant, wire.weight)}\n          />\n        ))}\n      </g>\n    ),\n    labels: (\n      <g data-diagram-wire-labels=\"\">\n        {routed.map(({ wire, index, route }) =>\n          wire.edge.label ? (\n            /* `labelDx` / `labelDy` / `labelAt` are deliberately NOT applied.\n               They are collision repairs authored against archify's router,\n               measured in the positions THAT router produced — and this one\n               does not produce the same collisions, so honouring them moves\n               labels off clear ground and onto the nodes they were nudged away\n               from. Dropping the nudge and keeping the wording is the reading\n               that preserves the meaning; the field stays in the type so a\n               specification carrying it still typechecks. */\n            <EdgeLabel\n              key={wire.edge.id ?? index}\n              x={route.label.x}\n              y={route.label.y}\n              axis={route.label.axis}\n              text={wire.edge.label}\n              chip={wire.edge.classification}\n              note={wire.edge.note}\n            />\n          ) : null,\n        )}\n      </g>\n    ),\n  }\n}\n\n/** Resolves an edge's endpoints against a box index, dropping any that dangle. */\nexport function wiresFor<E extends EdgeBase>(\n  edges: E[] | undefined,\n  boxes: Map<string, Box>,\n  decorate?: (edge: E) => Partial<Wire>,\n): Wire[] {\n  if (!edges) return []\n  const out: Wire[] = []\n  for (const edge of edges) {\n    const from = boxes.get(edge.from)\n    const to = boxes.get(edge.to)\n    // A relationship naming a node that is not in the figure is a specification\n    // error, and drawing it from nowhere to nowhere would hide that. Dropping\n    // it leaves the summary list — which iterates the same array — as the place\n    // the mistake shows up as a line pointing at an id no node claims.\n    if (!from || !to) continue\n    out.push({ edge, from, to, ...decorate?.(edge) })\n  }\n  return out\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/diagrams/lib/wires.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type { EdgeBase, Side, Variant } from '../spec'\nimport type { Box } from './geometry'\nimport { edgeClasses, EdgeLabel, edgeMarker, edgeStroke } from './marks'\nimport { resolveSides, routeEdge, spreadPorts, type PortUse } from './route'\n\n/** One line to draw, once its two boxes are known. */\nexport interface Wire {\n  edge: EdgeBase & { variant?: Variant | 'return'; classification?: string; note?: string }\n  from: Box\n  to: Box\n  /** Overrides the variant's own stroke weight — a main path drawn heavier. */\n  weight?: number\n  /** An open arrowhead rather than a filled one. */\n  open?: boolean\n  /**\n   * Whether this line's `via` / `channelX` / `channelY` mean anything here.\n   *\n   * A waypoint is an ABSOLUTE coordinate in whatever space the author's nodes\n   * were placed in. When a specification pins its nodes with `pos`, that space\n   * is this renderer's space too and the waypoints land exactly where they were\n   * meant to. When the nodes are placed from a lane and a column, this renderer\n   * chose the coordinates — so the author's waypoints refer to a grid that does\n   * not exist here, and following them drags lines across unrelated nodes.\n   *\n   * So the rule is per line and not per figure: honour the waypoints when both\n   * of a line's endpoints were placed absolutely, and route automatically\n   * otherwise. Defaults to false, which is the safe half.\n   */\n  keepWaypoints?: boolean\n}\n\n/**\n * Every line in a figure, routed together.\n *\n * Together rather than one at a time, because port spreading is a property of a\n * FACE and not of a line: how far off centre a given arrow sits depends on how\n * many others land on the same face, which no single line can know. Routing\n * them independently is what produces three arrowheads stacked on one point.\n *\n * Lines that pin their own geometry — `via`, a channel, an explicit side — opt\n * out of the spread. An author who placed a line has already answered the\n * question the spread exists to answer, and moving it afterwards makes the\n * control useless.\n *\n * Returns the paths and the labels separately because ORDER IS THE MASK: a\n * label's plate has to be painted over every line in the figure, not merely\n * over its own. Interleaving them puts the third line on top of the first\n * line's label.\n */\nexport function renderWires(\n  wires: Wire[],\n  uid: string,\n): { paths: ReactNode; labels: ReactNode } {\n  const uses: PortUse[] = []\n\n  wires.forEach((wire, index) => {\n    const { edge } = wire\n    const pinned =\n      wire.keepWaypoints === true &&\n      Boolean(edge.via?.length || edge.channelX !== undefined || edge.channelY !== undefined)\n    if (pinned) return\n    // The face this line will REALLY use, not the word \"auto\". Keyed on the\n    // word, every auto-routed line leaving one node counted as sharing a face\n    // with every other — so a node with one line going right and one going down\n    // had both nudged off centre to make room for each other on a face neither\n    // of them was on, and every one of those lines then arrived at a few units\n    // out of true and drew a dogleg to cover the difference.\n    const [fromSide, toSide] = resolveSides(\n      wire.from,\n      wire.to,\n      edge.fromSide as Side | undefined,\n      edge.toSide as Side | undefined,\n    )\n    uses.push({ face: `${edge.from}:${fromSide}`, ref: `${index}:from` })\n    uses.push({ face: `${edge.to}:${toSide}`, ref: `${index}:to` })\n  })\n\n  const offsets = spreadPorts(uses)\n\n  const routed = wires.map((wire, index) => {\n    const { edge } = wire\n    const keep = wire.keepWaypoints === true\n    return {\n      wire,\n      index,\n      route: routeEdge({\n        from: wire.from,\n        to: wire.to,\n        fromSide: edge.fromSide as Side | undefined,\n        toSide: edge.toSide as Side | undefined,\n        mode: edge.route,\n        via: keep ? edge.via : undefined,\n        channelX: keep ? edge.channelX : undefined,\n        channelY: keep ? edge.channelY : undefined,\n        fromOffset: offsets.get(`${index}:from`),\n        toOffset: offsets.get(`${index}:to`),\n      }),\n    }\n  })\n\n  return {\n    paths: (\n      <g data-diagram-wires=\"\">\n        {routed.map(({ wire, index, route }) => (\n          <path\n            key={wire.edge.id ?? index}\n            d={route.d}\n            fill=\"none\"\n            data-edge={wire.edge.id}\n            markerEnd={`url(#${uid}-${wire.open ? 'arrow-open' : edgeMarker(wire.edge.variant)})`}\n            className={edgeClasses(wire.edge.variant)}\n            {...edgeStroke(wire.edge.variant, wire.weight)}\n          />\n        ))}\n      </g>\n    ),\n    labels: (\n      <g data-diagram-wire-labels=\"\">\n        {routed.map(({ wire, index, route }) =>\n          wire.edge.label ? (\n            /* `labelDx` / `labelDy` / `labelAt` are deliberately NOT applied.\n               They are collision repairs authored against archify's router,\n               measured in the positions THAT router produced — and this one\n               does not produce the same collisions, so honouring them moves\n               labels off clear ground and onto the nodes they were nudged away\n               from. Dropping the nudge and keeping the wording is the reading\n               that preserves the meaning; the field stays in the type so a\n               specification carrying it still typechecks. */\n            <EdgeLabel\n              key={wire.edge.id ?? index}\n              x={route.label.x}\n              y={route.label.y}\n              axis={route.label.axis}\n              text={wire.edge.label}\n              chip={wire.edge.classification}\n              note={wire.edge.note}\n            />\n          ) : null,\n        )}\n      </g>\n    ),\n  }\n}\n\n/** Resolves an edge's endpoints against a box index, dropping any that dangle. */\nexport function wiresFor<E extends EdgeBase>(\n  edges: E[] | undefined,\n  boxes: Map<string, Box>,\n  decorate?: (edge: E) => Partial<Wire>,\n): Wire[] {\n  if (!edges) return []\n  const out: Wire[] = []\n  for (const edge of edges) {\n    const from = boxes.get(edge.from)\n    const to = boxes.get(edge.to)\n    // A relationship naming a node that is not in the figure is a specification\n    // error, and drawing it from nowhere to nowhere would hide that. The\n    // figures filter the same edges through `liveEdges` before they get here,\n    // so the drop is announced once in development and the summary list agrees\n    // with the picture; this guard is what makes that agreement structural\n    // rather than a convention every renderer has to remember.\n    if (!from || !to) continue\n    out.push({ edge, from, to, ...decorate?.(edge) })\n  }\n  return out\n}\n"],"mappings":"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","names":[]}

package/dist/diagrams/spec.d.ts

@@ -12,10 +12,11 @@
  * 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 and honoured where they are cheap, because dropping a
- * field silently turns a valid specification into a different diagram — but
- * they are hints, not a contract, and a figure that needs many of them is a
- * figure that wants fewer edges.
+ * 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
@@ -95,6 +96,22 @@ interface DiagramMeta {
             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. */
@@ -126,9 +143,25 @@ interface EdgeBase {
     fromSide?: Side;
     toSide?: Side;
     route?: RouteMode | string;
-    /** Waypoints the line is dragged through, in order. */
+    /**
+     * 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[];
-    /** Pins the label rather than letting the router place it. */
+    /**
+     * 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;
@@ -140,7 +173,13 @@ interface EdgeBase {
 }
 interface ArchitectureComponent extends NodeBase {
     type: NodeKind;
-    /** Grid placement. Ignored when `pos` is given. */
+    /**
+     * 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. */
@@ -177,9 +216,11 @@ interface ArchitectureSpec {
     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;
     };
@@ -199,8 +240,10 @@ interface WorkflowLane {
 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. */
@@ -221,6 +264,11 @@ interface WorkflowNode extends NodeBase {
  * `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 {
@@ -270,12 +318,14 @@ interface SequenceSpec {
     diagram_type?: 'sequence';
     meta: DiagramMeta & {
         /**
-         * `fixed` gives every participant the same column width; `spread` divides
-         * the figure evenly instead.
+         * `fixed` gives every participant a 148-unit column; `spread` gives every
+         * participant the width the WIDEST label needs.
          *
-         * Reach for `spread` when a fixed layout would leave a wide empty margin,
-         * or when a meaningful participant label does not fit. Shortening the label
-         * to make it fit is the wrong repair — the label is the data.
+         * 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';
     };
@@ -331,8 +381,10 @@ 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 {

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,9 +27,11 @@ 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 { ColorPicker, ColorPickerProps } from './components/ColorPicker/ColorPicker.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 { NumberField, NumberFieldProps } from './components/NumberField/NumberField.js';
 export { Slider, SliderProps } from './components/Slider/Slider.js';
 export { ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupProps } from './components/ToggleGroup/ToggleGroup.js';
 export { Input, InputProps } from './components/Input/Input.js';
@@ -34,11 +42,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';
@@ -47,15 +55,22 @@ export { Collapsible, CollapsibleContent, CollapsibleSection, CollapsibleSection
 export { Breadcrumb, BreadcrumbProps, Crumb } from './components/Breadcrumb/Breadcrumb.js';
 export { Pagination, PaginationProps, paginationRange } from './components/Pagination/Pagination.js';
 export { NavItem, NavItemProps } from './components/NavItem/NavItem.js';
+export { Sidebar, SidebarBranch, SidebarBranchProps, SidebarBreakpoint, SidebarCollapsible, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupProps, SidebarHeader, SidebarInset, SidebarItem, SidebarItemProps, SidebarProps, SidebarProvider, SidebarProviderProps, SidebarSeparator, SidebarSide, SidebarTrigger, SidebarTriggerProps, SidebarVariant, useSidebar } from './components/Sidebar/Sidebar.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";
@@ -22,8 +28,10 @@ export * from "./components/EmptyState/EmptyState.js";
 export * from "./components/ErrorState/ErrorState.js";
 export * from "./components/Toast/Toast.js";
 export * from "./components/Field/Field.js";
+export * from "./components/ColorPicker/ColorPicker.js";
 export * from "./components/Combobox/Combobox.js";
 export * from "./components/DatePicker/DatePicker.js";
+export * from "./components/NumberField/NumberField.js";
 export * from "./components/Slider/Slider.js";
 export * from "./components/ToggleGroup/ToggleGroup.js";
 export * from "./components/Input/Input.js";
@@ -47,8 +55,12 @@ export * from "./components/Collapsible/Collapsible.js";
 export * from "./components/Breadcrumb/Breadcrumb.js";
 export * from "./components/Pagination/Pagination.js";
 export * from "./components/NavItem/NavItem.js";
+export * from "./components/Sidebar/Sidebar.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/ColorPicker/ColorPicker'\nexport * from './components/Combobox/Combobox'\nexport * from './components/DatePicker/DatePicker'\nexport * from './components/NumberField/NumberField'\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'\nexport * from './components/Sidebar/Sidebar'\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;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;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/color.d.ts

@@ -0,0 +1,80 @@
+/**
+ * CSS colour maths, with no dependency and no DOM.
+ *
+ * Adapted from DialKit (https://github.com/joshpuckett/dialkit), MIT licensed:
+ *
+ *   Copyright (c) 2026 Josh Puckett
+ *
+ *   Permission is hereby granted, free of charge, to any person obtaining a
+ *   copy of this software and associated documentation files (the "Software"),
+ *   to deal in the Software without restriction, including without limitation
+ *   the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ *   and/or sell copies of the Software, and to permit persons to whom the
+ *   Software is furnished to do so, subject to the following conditions:
+ *
+ *   The above copyright notice and this permission notice shall be included in
+ *   all copies or substantial portions of the Software.
+ *
+ * The working space is OKLCH, and that is the substantive choice here rather
+ * than an implementation detail. A picker built on HSV hands a reader two
+ * colours at the same "lightness" where one of them is visibly darker, because
+ * HSV's lightness is a property of the numbers rather than of the eye. Every
+ * decision in `ColorPicker` — where the handle sits, what the hue strip looks
+ * like at this lightness, which colours are reachable at all — depends on a
+ * space that is perceptually uniform, and OKLCH is the one CSS ships.
+ *
+ * The matrices are the CSS Color 4 reference implementation's, D65.
+ * https://www.w3.org/TR/css-color-4/#color-conversion-code
+ */
+/** A colour in OKLCH: lightness 0–1, chroma, hue in degrees, alpha 0–1. */
+interface Color {
+    l: number;
+    c: number;
+    h: number;
+    a: number;
+}
+/** The notations this module reads and writes. */
+type ColorFormat = 'hex' | 'oklch' | 'p3';
+/** The two RGB gamuts a colour can be fitted to. */
+type ColorSpace = 'srgb' | 'p3';
+type Triple = [number, number, number];
+declare const clamp: (n: number, min?: number, max?: number) => number;
+declare const wrapHue: (h: number) => number;
+/** Gamma-encoded RGB in 0–1 to OKLCH. */
+declare function rgbToColor(rgb: Triple, a?: number, space?: ColorSpace): Color;
+/** OKLCH to gamma-encoded RGB in 0–1. May fall outside it — see `fitGamut`. */
+declare function colorToRgb(color: Color, space?: ColorSpace): Triple;
+declare function inGamut(color: Color, space?: ColorSpace): boolean;
+/**
+ * Brings a colour inside a gamut by giving up CHROMA, and nothing else.
+ *
+ * The naive fix is to clip each channel at 0 and 1, which changes the hue and
+ * the lightness together — a vivid blue clipped that way comes back purple and
+ * darker. Bisecting on chroma keeps both, so what a reader loses is only the
+ * saturation the display could never have shown them.
+ */
+declare function fitGamut(color: Color, space?: ColorSpace): Color;
+/** The most chroma a gamut holds at this lightness and hue — the plane's edge. */
+declare function maxChroma(l: number, h: number, space?: ColorSpace): number;
+/** Which notation a string is written in. Anything unrecognised reads as hex. */
+declare function colorFormat(value: string): ColorFormat;
+/**
+ * A colour as a CSS string.
+ *
+ * Hex and Display P3 are bounded output spaces, so the colour is fitted on the
+ * way out; OKLCH is not, and writing an out-of-gamut OKLCH is legitimate — the
+ * browser fits it to whatever the display actually has.
+ */
+declare function formatColor(color: Color, format: ColorFormat): string;
+/**
+ * An absolute CSS colour as OKLCH, or `null` when the string is not one.
+ *
+ * Hex, `rgb()`, `hsl()`, `oklch()` and `color(display-p3 …)`, in both the
+ * comma and the space syntax. Named colours are deliberately absent: resolving
+ * them needs a table of a hundred and forty-eight entries or a DOM, and a
+ * picker that accepts "rebeccapurple" but not "papayawhip" is worse than one
+ * that accepts neither.
+ */
+declare function parseColor(value: string): Color | null;
+
+export { type Color, type ColorFormat, type ColorSpace, clamp, colorFormat, colorToRgb, fitGamut, formatColor, inGamut, maxChroma, parseColor, rgbToColor, wrapHue };