@misoto22/folio 0.0.0 → 0.17.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/fonts.css

@@ -0,0 +1,96 @@
+/* GENERATED by scripts/vendor-fonts.mjs — do not edit by hand.
+   Vendored Latin webfaces for @misoto22/folio, declared under the literal
+   family names the token layer falls back to. A host that loads these itself
+   (next/font, a CDN) sets --font-* and never reaches these rules.
+   Re-run: pnpm --filter @misoto22/folio build:fonts */
+
+
+/* ─── Hanken Grotesk — 5 weights ─── */
+@font-face {
+  font-family: 'Hanken Grotesk';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('./fonts/hanken-grotesk-300.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Hanken Grotesk';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('./fonts/hanken-grotesk-400.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Hanken Grotesk';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('./fonts/hanken-grotesk-500.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Hanken Grotesk';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('./fonts/hanken-grotesk-600.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Hanken Grotesk';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('./fonts/hanken-grotesk-700.woff2') format('woff2');
+}
+
+/* ─── Newsreader — 4 weights ─── */
+@font-face {
+  font-family: 'Newsreader';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('./fonts/newsreader-300.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Newsreader';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('./fonts/newsreader-400.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Newsreader';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('./fonts/newsreader-500.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Newsreader';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('./fonts/newsreader-600.woff2') format('woff2');
+}
+
+/* ─── IBM Plex Mono — 3 weights ─── */
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('./fonts/ibm-plex-mono-400.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('./fonts/ibm-plex-mono-500.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('./fonts/ibm-plex-mono-600.woff2') format('woff2');
+}

package/dist/index.d.ts

@@ -0,0 +1,97 @@
+export { OverlayContainer, OverlayContainerProps, useOverlayContainer } from './lib/overlay-container.js';
+export { BRAND, BrandColor } from './tokens/brand.js';
+export { cn } from './lib/cn.js';
+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';
+export { Avatar, AvatarProps } from './components/Avatar/Avatar.js';
+export { StatusDot, StatusDotProps, StatusTone } from './components/StatusDot/StatusDot.js';
+export { Metric, MetricProps } from './components/Metric/Metric.js';
+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';
+export { Progress, ProgressProps } from './components/Progress/Progress.js';
+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, 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';
+export { Textarea, TextareaProps } from './components/Textarea/Textarea.js';
+export { Select, SelectGroup, SelectItem, SelectItemProps, SelectLabel, SelectProps, SelectRoot, SelectSeparator } from './components/Select/Select.js';
+export { NativeSelect, NativeSelectProps } from './components/NativeSelect/NativeSelect.js';
+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, 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, 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';
+export { Accordion, AccordionItem, AccordionItemProps } from './components/Accordion/Accordion.js';
+export { Collapsible, CollapsibleContent, CollapsibleSection, CollapsibleSectionProps, CollapsibleTrigger } from './components/Collapsible/Collapsible.js';
+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 { 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 { PageHeader, PageHeaderProps } from './components/PageHeader/PageHeader.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';
+import '@radix-ui/react-avatar';
+import '@radix-ui/react-progress';
+import '@remixicon/react';
+import '@radix-ui/react-slider';
+import '@radix-ui/react-toggle-group';
+import '@radix-ui/react-select';
+import '@radix-ui/react-checkbox';
+import '@radix-ui/react-radio-group';
+import '@radix-ui/react-switch';
+import '@radix-ui/react-dialog';
+import '@radix-ui/react-dropdown-menu';
+import '@radix-ui/react-tooltip';
+import '@radix-ui/react-popover';
+import '@radix-ui/react-context-menu';
+import 'cmdk';
+import '@radix-ui/react-tabs';
+import '@radix-ui/react-accordion';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-scroll-area';