@instruments/materia-ui 0.1.0

package/dist/components/dialog/dialog-title.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { cn } from "@instruments/materia-ui/utils/cn";
+/**
+ * Accessible heading that labels the dialog (wired to the panel's
+ * `aria-labelledby`). Render inside `<DialogHeader>`.
+ * Import from "@instruments/materia-ui/components/dialog".
+ */
+export const DialogTitle = ({ className, ...props }) => (_jsx(DialogPrimitive.Title, { className: cn("text-subheading font-semibold text-balance", className), "data-component": "dialog-title", "data-slot": "dialog-title", ...props }));

package/dist/components/dialog/dialog-trigger.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Opens the dialog when activated and is wired as its accessible controller; pass
+ * your own button as `render`. Must be a child of `<Dialog>`.
+ * Import from "@instruments/materia-ui/components/dialog".
+ */
+export declare const DialogTrigger: (props: import("@base-ui/react").DialogTriggerProps<unknown> & import("react").RefAttributes<HTMLElement>) => import("react").ReactElement;

package/dist/components/dialog/dialog-trigger.js

@@ -0,0 +1,11 @@
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { makeOverlayTrigger } from "../overlay-primitives.js";
+/**
+ * Opens the dialog when activated and is wired as its accessible controller; pass
+ * your own button as `render`. Must be a child of `<Dialog>`.
+ * Import from "@instruments/materia-ui/components/dialog".
+ */
+export const DialogTrigger = makeOverlayTrigger(DialogPrimitive.Trigger, {
+    component: "dialog-trigger",
+    slot: "dialog-trigger",
+});

package/dist/components/dialog.d.ts

@@ -0,0 +1,16 @@
+export { dialogAnatomy } from "./dialog/dialog-anatomy.js";
+export { DialogClose } from "./dialog/dialog-close.js";
+export { DialogContent, type DialogContentSize } from "./dialog/dialog-content.js";
+export { DialogDescription } from "./dialog/dialog-description.js";
+export { DialogFooter } from "./dialog/dialog-footer.js";
+export { DialogHeader } from "./dialog/dialog-header.js";
+export { DialogOverlay } from "./dialog/dialog-overlay.js";
+export { DialogPortal } from "./dialog/dialog-portal.js";
+/**
+ * Dialog primitives built on Base UI.
+ *
+ * Import from "@instruments/materia-ui/components/dialog".
+ */
+export { Dialog } from "./dialog/dialog-root.js";
+export { DialogTitle } from "./dialog/dialog-title.js";
+export { DialogTrigger } from "./dialog/dialog-trigger.js";

package/dist/components/dialog.js

@@ -0,0 +1,17 @@
+"use client";
+export { dialogAnatomy } from "./dialog/dialog-anatomy.js";
+export { DialogClose } from "./dialog/dialog-close.js";
+export { DialogContent } from "./dialog/dialog-content.js";
+export { DialogDescription } from "./dialog/dialog-description.js";
+export { DialogFooter } from "./dialog/dialog-footer.js";
+export { DialogHeader } from "./dialog/dialog-header.js";
+export { DialogOverlay } from "./dialog/dialog-overlay.js";
+export { DialogPortal } from "./dialog/dialog-portal.js";
+/**
+ * Dialog primitives built on Base UI.
+ *
+ * Import from "@instruments/materia-ui/components/dialog".
+ */
+export { Dialog } from "./dialog/dialog-root.js";
+export { DialogTitle } from "./dialog/dialog-title.js";
+export { DialogTrigger } from "./dialog/dialog-trigger.js";

package/dist/components/dot/dot-root.d.ts

@@ -0,0 +1,63 @@
+import type { VariantProps } from "class-variance-authority";
+import type * as React from "react";
+import type { ResponsiveValue } from "../../tokens/responsive.js";
+import type { ComponentSize } from "../../tokens/size.js";
+import type { Tone } from "../../tokens/tone.js";
+/**
+ * Per-size class map for Dot. Kept as a named export and applied via
+ * `getResponsiveSizeClasses` in the component (NOT as a cva variant) so `size`
+ * can be a single token or a per-breakpoint responsive object.
+ */
+export declare const DOT_SIZE_CLASSES: Record<ComponentSize, string>;
+/** Default Dot size. */
+export declare const DEFAULT_DOT_SIZE: ComponentSize;
+/**
+ * Canonical background-colour class per {@link Tone} for dot indicators.
+ *
+ * The single source of truth for a dot's tint: `dotVariants` references it as
+ * its `tone` variant, and components that render their own (non-`Dot`) dot span
+ * - e.g. `AvatarBadge`, `MobileNavigationItem` - read from it directly so a
+ * `dot={<Tone>}` prop tints identically to `<Dot tone>`.
+ */
+export declare const DOT_TONE_BG_CLASSES: Record<Tone, string>;
+/**
+ * dotVariants variant class helper for Dot.
+ * Import from "@instruments/materia-ui/components/dot".
+ * Uses variant-based styling via class-variance-authority.
+ */
+declare const dotVariants: (props?: ({
+    tone?: "brand" | "danger" | "info" | "neutral" | "success" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface DotProps extends React.ComponentProps<"span">, VariantProps<typeof dotVariants> {
+    /**
+     * Custom colour override. When provided, overrides the variant colour.
+     * Can be any valid CSS colour value.
+     */
+    color?: string;
+    /**
+     * Dot size - a single token or a per-breakpoint object like
+     * `{ base: "sm", md: "lg" }`. @default "base"
+     */
+    size?: ResponsiveValue<ComponentSize>;
+}
+/**
+ * Dot component for indicating status, colour, or presence.
+ * Uses semantic design token variants by default, with optional custom colour override.
+ *
+ * @example
+ * ```tsx
+ * // Using semantic variants
+ * <Dot tone="success" />
+ * <Dot tone="warning" size="sm" />
+ *
+ * // Using custom color override
+ * <Dot color="hsl(200, 80%, 85%)" size="sm" />
+ * ```
+ *
+ * @bestPractice Use `Dot` for a bare colour/status indicator with no text; if you need a label or count, reach for `Badge` (or `BadgeDot`), and for a removable/interactive chip use `Tag`.
+ * @bestPractice Prefer the semantic `tone` (`success`/`warning`/`danger`/…) over a raw `color` so the dot tracks theme tokens; reserve `color` for swatches outside the palette.
+ * @bestPractice The dot is decorative - pair it with visible text or an `aria-label`; colour alone doesn't convey status to assistive tech.
+ * @category data
+ */
+export declare const Dot: ({ className, tone, size, color, style, ...props }: DotProps) => React.JSX.Element;
+export { dotVariants };

package/dist/components/dot/dot-root.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { cva } from "class-variance-authority";
+import { getResponsiveSizeClasses } from "../../tokens/responsive.js";
+/**
+ * Per-size class map for Dot. Kept as a named export and applied via
+ * `getResponsiveSizeClasses` in the component (NOT as a cva variant) so `size`
+ * can be a single token or a per-breakpoint responsive object.
+ */
+export const DOT_SIZE_CLASSES = {
+    "2xs": "size-1",
+    xs: "size-1.5",
+    sm: "size-2",
+    base: "size-2.5",
+    lg: "size-3",
+    xl: "size-3.5",
+    "2xl": "size-4",
+    "3xl": "size-5",
+};
+/** Default Dot size. */
+export const DEFAULT_DOT_SIZE = "base";
+/**
+ * Canonical background-colour class per {@link Tone} for dot indicators.
+ *
+ * The single source of truth for a dot's tint: `dotVariants` references it as
+ * its `tone` variant, and components that render their own (non-`Dot`) dot span
+ * - e.g. `AvatarBadge`, `MobileNavigationItem` - read from it directly so a
+ * `dot={<Tone>}` prop tints identically to `<Dot tone>`.
+ */
+export const DOT_TONE_BG_CLASSES = {
+    neutral: "bg-muted-foreground",
+    success: "bg-affirmative-accent",
+    warning: "bg-warning-accent",
+    info: "bg-info-accent",
+    danger: "bg-destructive",
+    brand: "bg-brand",
+};
+/**
+ * dotVariants variant class helper for Dot.
+ * Import from "@instruments/materia-ui/components/dot".
+ * Uses variant-based styling via class-variance-authority.
+ */
+const dotVariants = cva("inline-block shrink-0 rounded-full", {
+    defaultVariants: {
+        tone: "neutral",
+    },
+    variants: {
+        // Lockstep: Dot's tone is the full canonical Tone vocabulary.
+        tone: DOT_TONE_BG_CLASSES,
+    },
+});
+/**
+ * Dot component for indicating status, colour, or presence.
+ * Uses semantic design token variants by default, with optional custom colour override.
+ *
+ * @example
+ * ```tsx
+ * // Using semantic variants
+ * <Dot tone="success" />
+ * <Dot tone="warning" size="sm" />
+ *
+ * // Using custom color override
+ * <Dot color="hsl(200, 80%, 85%)" size="sm" />
+ * ```
+ *
+ * @bestPractice Use `Dot` for a bare colour/status indicator with no text; if you need a label or count, reach for `Badge` (or `BadgeDot`), and for a removable/interactive chip use `Tag`.
+ * @bestPractice Prefer the semantic `tone` (`success`/`warning`/`danger`/…) over a raw `color` so the dot tracks theme tokens; reserve `color` for swatches outside the palette.
+ * @bestPractice The dot is decorative - pair it with visible text or an `aria-label`; colour alone doesn't convey status to assistive tech.
+ * @category data
+ */
+export const Dot = ({ className, tone, size, color, style, ...props }) => (_jsx("span", { className: cn(dotVariants({ tone }), getResponsiveSizeClasses(size, DOT_SIZE_CLASSES, DEFAULT_DOT_SIZE), className), "data-component": "dot", style: color !== undefined && color !== null && color !== ""
+        ? { backgroundColor: color, ...style }
+        : style, ...props }));
+export { dotVariants };

package/dist/components/dot-matrix-loader/dot-matrix-loader-root.d.ts

@@ -0,0 +1,27 @@
+export type DotMatrixLoaderName = "row-sweep" | "flux-columns" | "shelf-descent" | "rail-scan" | "halo-drift" | "star-compass" | "skew-drift" | "prism-bloom" | "lunar-breathe";
+/** Props for {@link DotMatrixLoader}. */
+export interface DotMatrixLoaderProps {
+    /** Which catalogue glyph to render. */
+    name: DotMatrixLoaderName;
+    /**
+     * When true, render a frozen frame: no SMIL/CSS animations, dots at their
+     * natural positions and full opacity. Use when the moment has finished but
+     * the bar is still narrating the result.
+     */
+    settled?: boolean;
+}
+/**
+ * Intent-specific dotted SVG glyph for agent status slots (a prompt bar's
+ * leading icon, a working stack, an operation bubble).
+ *
+ * @example
+ * ```tsx
+ * <DotMatrixLoader name="rail-scan" />
+ * <DotMatrixLoader name="flux-columns" settled />
+ * ```
+ *
+ * @bestPractice Pick a glyph by intent from `DOT_MATRIX_LOADERS` - don't invent ad-hoc names. Map product actions → names in one place.
+ * @bestPractice Pass `settled` when the op finished but narration is still on screen, so the slot stays in character without spinning forever.
+ * @category feedback
+ */
+export declare const DotMatrixLoader: ({ name, settled, }: DotMatrixLoaderProps) => import("react").JSX.Element;

package/dist/components/dot-matrix-loader/dot-matrix-loader-root.js

@@ -0,0 +1,134 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Intent-specific 24×24 SVG glyphs for agent and prompt-bar status slots.
+ *
+ * Each loader:
+ *   - fits a 24×24 well so surrounding geometry stays stable
+ *   - inherits `currentColor` so it tints with the foreground
+ *   - has its own visual character so *intent* reads at a glance
+ *
+ * Catalogue labels and order live in `DOT_MATRIX_LOADERS` (same package).
+ *
+ * Reduced motion: collapses to a slow LunarBreathe opacity breath.
+ * Settled mode: frozen frame (no SMIL/CSS) for post-op narration.
+ *
+ * @module
+ */
+import { useReducedMotion } from "motion/react";
+const SIZE = 24;
+const DOT = 1.6;
+const MatrixGrid = ({ children }) => (_jsx("svg", { viewBox: `0 0 ${SIZE} ${SIZE}`, width: SIZE, height: SIZE, "aria-hidden": "true", style: { overflow: "visible" }, children: children }));
+const LunarBreathe = ({ opacity = 1, settled = false, }) => (_jsxs("svg", { viewBox: `0 0 ${SIZE} ${SIZE}`, width: SIZE, height: SIZE, "aria-hidden": "true", children: [_jsx("title", { children: "Loading" }), _jsx("circle", { cx: SIZE / 2, cy: SIZE / 2, r: 4.4, fill: "currentColor", opacity: opacity, children: settled ? null : (_jsxs(_Fragment, { children: [_jsx("animate", { attributeName: "opacity", values: `${0.35 * opacity};${opacity};${0.35 * opacity}`, dur: "1.6s", repeatCount: "indefinite" }), _jsx("animate", { attributeName: "r", values: "3.6;5;3.6", dur: "1.6s", repeatCount: "indefinite" })] })) })] }));
+const RowSweep = ({ settled = false }) => {
+    const cols = 5;
+    const rows = 5;
+    const step = SIZE / (cols + 1);
+    const dots = [];
+    for (let r = 0; r < rows; r += 1) {
+        for (let c = 0; c < cols; c += 1) {
+            dots.push({ cx: step * (c + 1), cy: step * (r + 1), row: r });
+        }
+    }
+    return (_jsxs(MatrixGrid, { children: [_jsx("title", { children: "Reading" }), dots.map((dot) => (_jsx("circle", { cx: dot.cx, cy: dot.cy, r: DOT, fill: "currentColor", opacity: settled ? 0.7 : 0.25, children: settled ? null : (_jsx("animate", { attributeName: "opacity", values: "0.2;1;0.2", dur: "1.4s", repeatCount: "indefinite", begin: `${(dot.row / rows) * 1.4}s` })) }, `${dot.cx}-${dot.cy}`)))] }));
+};
+const FluxColumns = ({ settled = false }) => {
+    const cols = 6;
+    const step = SIZE / (cols + 1);
+    return (_jsxs(MatrixGrid, { children: [_jsx("title", { children: "Applying" }), Array.from({ length: cols }, (_, i) => {
+                const x = step * (i + 1);
+                const delay = (i / cols) * 1.2;
+                return (_jsx("rect", { x: x - 0.9, y: settled ? 8 : 4, width: 1.8, height: settled ? 8 : 16, rx: 0.9, fill: "currentColor", opacity: settled ? 0.7 : 0.45, children: settled ? null : (_jsxs(_Fragment, { children: [_jsx("animate", { attributeName: "height", values: "2;14;2", dur: "1.2s", repeatCount: "indefinite", begin: `${delay}s` }), _jsx("animate", { attributeName: "y", values: "11;5;11", dur: "1.2s", repeatCount: "indefinite", begin: `${delay}s` }), _jsx("animate", { attributeName: "opacity", values: "0.3;1;0.3", dur: "1.2s", repeatCount: "indefinite", begin: `${delay}s` })] })) }, x));
+            })] }));
+};
+const ShelfDescent = ({ settled = false }) => {
+    const cols = 4;
+    const rows = 3;
+    const step = SIZE / (cols + 1);
+    return (_jsxs(MatrixGrid, { children: [_jsx("title", { children: "Placing" }), Array.from({ length: cols * rows }, (_, idx) => {
+                const c = idx % cols;
+                const r = Math.floor(idx / cols);
+                const cx = step * (c + 1);
+                const targetY = step * (r + 2);
+                const delay = (idx / (cols * rows)) * 1.4;
+                return (_jsx("circle", { cx: cx, cy: targetY, r: DOT, fill: "currentColor", opacity: settled ? 0.7 : 0, children: settled ? null : (_jsxs(_Fragment, { children: [_jsx("animate", { attributeName: "cy", values: `0;${targetY}`, dur: "0.6s", begin: `${delay}s`, fill: "freeze" }), _jsx("animate", { attributeName: "opacity", values: "0;1;1;0", keyTimes: "0;0.2;0.8;1", dur: "2.4s", begin: `${delay}s`, repeatCount: "indefinite" })] })) }, `${cx}-${r}`));
+            })] }));
+};
+const RailScan = ({ settled = false }) => (_jsxs(MatrixGrid, { children: [_jsx("title", { children: "Searching" }), Array.from({ length: 4 }, (_, row) => {
+            const y = 5 + row * 4.5;
+            return (_jsxs("g", { children: [_jsx("line", { x1: 3, y1: y, x2: 21, y2: y, stroke: "currentColor", opacity: settled ? 0.5 : 0.18, strokeWidth: 1 }), _jsx("circle", { cx: settled ? 21 : 3, cy: y, r: DOT, fill: "currentColor", opacity: settled ? 0.85 : 1, children: settled ? null : (_jsx("animate", { attributeName: "cx", values: "3;21;3", dur: "1.6s", repeatCount: "indefinite", begin: `${row * 0.18}s` })) })] }, `row-${y}`));
+        })] }));
+const HaloDrift = ({ settled = false }) => (_jsxs(MatrixGrid, { children: [_jsx("title", { children: "Orbiting" }), _jsxs("g", { children: [settled ? null : (_jsx("animateTransform", { attributeName: "transform", dur: "1.8s", from: "0 12 12", repeatCount: "indefinite", to: "360 12 12", type: "rotate" })), _jsx("circle", { cx: 12 + 8, cy: 12, r: DOT, fill: "currentColor" }), _jsx("circle", { cx: 12 - 8, cy: 12, r: DOT, fill: "currentColor", opacity: 0.65 }), _jsx("circle", { cx: 12, cy: 12 + 8, r: DOT, fill: "currentColor", opacity: 0.45 }), _jsx("circle", { cx: 12, cy: 12 - 8, r: DOT, fill: "currentColor", opacity: 0.25 })] }), _jsx("circle", { cx: 12, cy: 12, r: 2.4, fill: "currentColor" })] }));
+const StarCompass = ({ settled = false }) => (_jsxs(MatrixGrid, { children: [_jsx("title", { children: "Pairing" }), _jsxs("g", { children: [settled ? null : (_jsx("animateTransform", { attributeName: "transform", dur: "2.2s", from: "0 12 12", repeatCount: "indefinite", to: "360 12 12", type: "rotate" })), _jsx("line", { x1: 12, y1: 4, x2: 12, y2: 20, stroke: "currentColor", strokeWidth: 1.4, strokeLinecap: "round" }), _jsx("line", { x1: 4, y1: 12, x2: 20, y2: 12, stroke: "currentColor", strokeWidth: 0.8, opacity: 0.4, strokeLinecap: "round" })] }), _jsx("circle", { cx: 12, cy: 12, r: 1.4, fill: "currentColor" })] }));
+const SkewDrift = ({ settled = false }) => {
+    const cols = 4;
+    const rows = 4;
+    const step = SIZE / (cols + 1);
+    return (_jsxs(MatrixGrid, { children: [_jsx("title", { children: "Re-ranking" }), Array.from({ length: cols * rows }, (_, idx) => {
+                const c = idx % cols;
+                const r = Math.floor(idx / cols);
+                const cx = step * (c + 1);
+                const cy = step * (r + 1);
+                const delay = ((c + r) / (cols + rows)) * 1.4;
+                return (_jsx("circle", { cx: cx, cy: cy, r: DOT, fill: "currentColor", opacity: settled ? 0.7 : 0.3, children: settled ? null : (_jsxs(_Fragment, { children: [_jsx("animate", { attributeName: "cx", values: `${cx};${cx + 1.6};${cx}`, dur: "1.4s", repeatCount: "indefinite", begin: `${delay}s` }), _jsx("animate", { attributeName: "opacity", values: "0.3;1;0.3", dur: "1.4s", repeatCount: "indefinite", begin: `${delay}s` })] })) }, `${cx}-${cy}`));
+            })] }));
+};
+const PrismBloom = ({ settled = false }) => (_jsxs(MatrixGrid, { children: [_jsx("title", { children: "Rendering" }), Array.from({ length: 12 }, (_, i) => {
+            const angle = (i / 12) * Math.PI * 2;
+            // Round so SSR/client float stringification stays identical (hydration).
+            const cx = Number((12 + Math.cos(angle) * 8).toFixed(4));
+            const cy = Number((12 + Math.sin(angle) * 8).toFixed(4));
+            return (_jsx("circle", { cx: cx, cy: cy, r: DOT, fill: "currentColor", opacity: settled ? 0.7 : 0.25, children: settled ? null : (_jsx("animate", { attributeName: "opacity", values: "0.2;1;0.2", dur: "1.8s", repeatCount: "indefinite", begin: `${(i / 12) * 1.8}s` })) }, `${cx}-${cy}`));
+        }), _jsx("circle", { cx: 12, cy: 12, r: 2.4, fill: "currentColor" })] }));
+/**
+ * Intent-specific dotted SVG glyph for agent status slots (a prompt bar's
+ * leading icon, a working stack, an operation bubble).
+ *
+ * @example
+ * ```tsx
+ * <DotMatrixLoader name="rail-scan" />
+ * <DotMatrixLoader name="flux-columns" settled />
+ * ```
+ *
+ * @bestPractice Pick a glyph by intent from `DOT_MATRIX_LOADERS` - don't invent ad-hoc names. Map product actions → names in one place.
+ * @bestPractice Pass `settled` when the op finished but narration is still on screen, so the slot stays in character without spinning forever.
+ * @category feedback
+ */
+export const DotMatrixLoader = ({ name, settled = false, }) => {
+    const reducedMotion = Boolean(useReducedMotion());
+    if (reducedMotion && !settled) {
+        return _jsx(LunarBreathe, { opacity: 0.5 });
+    }
+    switch (name) {
+        case "row-sweep": {
+            return _jsx(RowSweep, { settled: settled });
+        }
+        case "flux-columns": {
+            return _jsx(FluxColumns, { settled: settled });
+        }
+        case "shelf-descent": {
+            return _jsx(ShelfDescent, { settled: settled });
+        }
+        case "rail-scan": {
+            return _jsx(RailScan, { settled: settled });
+        }
+        case "halo-drift": {
+            return _jsx(HaloDrift, { settled: settled });
+        }
+        case "star-compass": {
+            return _jsx(StarCompass, { settled: settled });
+        }
+        case "skew-drift": {
+            return _jsx(SkewDrift, { settled: settled });
+        }
+        case "prism-bloom": {
+            return _jsx(PrismBloom, { settled: settled });
+        }
+        case "lunar-breathe": {
+            return _jsx(LunarBreathe, { settled: settled });
+        }
+        default: {
+            return _jsx(LunarBreathe, { settled: settled });
+        }
+    }
+};

package/dist/components/dot-matrix-loader/registry.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Named catalogue of DotMatrixLoader glyphs - labels, intent, and display order
+ * for catalogue grids and for call sites that pick a glyph by name.
+ *
+ * @module
+ */
+import type { DotMatrixLoaderName } from "./dot-matrix-loader-root.js";
+/** Catalogue entry for one intent-specific glyph. */
+export interface DotMatrixLoaderEntry {
+    /** Stable id passed to `<DotMatrixLoader name={…} />`. */
+    name: DotMatrixLoaderName;
+    /** Human label shown in catalogue grids. */
+    label: string;
+    /** Short intent - when to reach for this glyph. */
+    intent: string;
+    /** Accessible / SVG `<title>` text baked into the glyph. */
+    title: string;
+}
+/**
+ * Canonical catalogue order. Keep any action-to-glyph map aligned with these
+ * names - do not invent aliases.
+ */
+export declare const DOT_MATRIX_LOADERS: readonly DotMatrixLoaderEntry[];
+/** Every glyph name in catalogue order. */
+export declare const DOT_MATRIX_LOADER_NAMES: readonly DotMatrixLoaderName[];
+/** Lookup a catalogue entry by name. */
+export declare const dotMatrixLoaderEntry: (name: DotMatrixLoaderName) => DotMatrixLoaderEntry;

package/dist/components/dot-matrix-loader/registry.js

@@ -0,0 +1,76 @@
+/**
+ * Named catalogue of DotMatrixLoader glyphs - labels, intent, and display order
+ * for catalogue grids and for call sites that pick a glyph by name.
+ *
+ * @module
+ */
+/**
+ * Canonical catalogue order. Keep any action-to-glyph map aligned with these
+ * names - do not invent aliases.
+ */
+export const DOT_MATRIX_LOADERS = [
+    {
+        name: "row-sweep",
+        label: "Row sweep",
+        intent: "Reading or classifying an image row-by-row.",
+        title: "Reading",
+    },
+    {
+        name: "flux-columns",
+        label: "Flux columns",
+        intent: "Applying a change across a surface.",
+        title: "Applying",
+    },
+    {
+        name: "shelf-descent",
+        label: "Shelf descent",
+        intent: "Placing, filling, or composing a scene.",
+        title: "Placing",
+    },
+    {
+        name: "rail-scan",
+        label: "Rail scan",
+        intent: "Browsing or searching the catalogue.",
+        title: "Searching",
+    },
+    {
+        name: "halo-drift",
+        label: "Halo drift",
+        intent: "Snapshotting, refining, or orbiting a selection.",
+        title: "Orbiting",
+    },
+    {
+        name: "star-compass",
+        label: "Star compass",
+        intent: "Pairing or answering a comparative question.",
+        title: "Pairing",
+    },
+    {
+        name: "skew-drift",
+        label: "Skew drift",
+        intent: "Re-ranking or shifting comparative weight.",
+        title: "Re-ranking",
+    },
+    {
+        name: "prism-bloom",
+        label: "Prism bloom",
+        intent: "Rendering a bloom / radial compose moment.",
+        title: "Rendering",
+    },
+    {
+        name: "lunar-breathe",
+        label: "Lunar breathe",
+        intent: "Idle breath - default when no action is active.",
+        title: "Loading",
+    },
+];
+/** Every glyph name in catalogue order. */
+export const DOT_MATRIX_LOADER_NAMES = DOT_MATRIX_LOADERS.map((entry) => entry.name);
+/** Lookup a catalogue entry by name. */
+export const dotMatrixLoaderEntry = (name) => {
+    const entry = DOT_MATRIX_LOADERS.find((item) => item.name === name);
+    if (entry === undefined) {
+        throw new Error(`Unknown DotMatrixLoader name: ${name}`);
+    }
+    return entry;
+};

package/dist/components/dot-matrix-loader.d.ts

@@ -0,0 +1,2 @@
+export { DotMatrixLoader, type DotMatrixLoaderName, type DotMatrixLoaderProps, } from "./dot-matrix-loader/dot-matrix-loader-root.js";
+export { DOT_MATRIX_LOADER_NAMES, DOT_MATRIX_LOADERS, dotMatrixLoaderEntry, type DotMatrixLoaderEntry, } from "./dot-matrix-loader/registry.js";

package/dist/components/dot-matrix-loader.js

@@ -0,0 +1,2 @@
+export { DotMatrixLoader, } from "./dot-matrix-loader/dot-matrix-loader-root.js";
+export { DOT_MATRIX_LOADER_NAMES, DOT_MATRIX_LOADERS, dotMatrixLoaderEntry, } from "./dot-matrix-loader/registry.js";

package/dist/components/dot.d.ts

@@ -0,0 +1 @@
+export { Dot, DOT_TONE_BG_CLASSES, type DotProps, dotVariants, } from "./dot/dot-root.js";

package/dist/components/dot.js

@@ -0,0 +1 @@
+export { Dot, DOT_TONE_BG_CLASSES, dotVariants, } from "./dot/dot-root.js";

package/dist/components/drawer/drawer-close.d.ts

@@ -0,0 +1,7 @@
+import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
+import type * as React from "react";
+/**
+ * DrawerClose closes the drawer when triggered.
+ * Import from "@instruments/materia-ui/components/drawer".
+ */
+export declare const DrawerClose: (props: React.ComponentProps<typeof DrawerPrimitive.Close>) => React.JSX.Element;

package/dist/components/drawer/drawer-close.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
+/**
+ * DrawerClose closes the drawer when triggered.
+ * Import from "@instruments/materia-ui/components/drawer".
+ */
+export const DrawerClose = (props) => (_jsx(DrawerPrimitive.Close, { "data-component": "drawer-close", "data-slot": "drawer-close", ...props }));

package/dist/components/drawer/drawer-content.d.ts

@@ -0,0 +1,24 @@
+import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
+import type * as React from "react";
+/**
+ * Sliding panel body - renders its own portal and scrim overlay, so drop it
+ * directly under `Drawer` without composing `DrawerPortal`/`DrawerOverlay`.
+ *
+ * Bottom slide-up by default, with a drag handle unless `showHandle={false}`.
+ * For another edge, set `swipeDirection` on `Drawer` and position the panel with
+ * `className`. Positioning is viewport-fixed by default. When `Drawer` receives a
+ * bounded `container`, content and scrim switch to `absolute` so they stay inside
+ * that surface. The radius/border classes are plain (not direction-gated) so
+ * consumers can cancel them with `rounded-none` / `border-t-0` via
+ * tailwind-merge - full-screen sheets rely on this.
+ *
+ * @bestPractice Always render a `DrawerTitle` (use `sr-only` if visually hidden) - it provides the panel's `aria-labelledby`.
+ * @bestPractice For full-screen sheets, cancel the corner with `className="rounded-none border-t-0"` and pass `showHandle={false}`.
+ * @bestPractice To scope the drawer to a bounded element (not the viewport), pass `container` to the `Drawer` root; the content and scrim are `absolute` so they stay within it.
+ */
+export declare const DrawerContent: ({ className, children, showHandle, ...props }: Omit<React.ComponentProps<typeof DrawerPrimitive.Popup>, "className"> & {
+    /** Extra classes for the panel surface. */
+    className?: string;
+    /** Show the drag handle (bottom drawers). @default true */
+    showHandle?: boolean;
+}) => React.JSX.Element;

package/dist/components/drawer/drawer-content.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { use } from "react";
+import { DrawerOverlay } from "./drawer-overlay.js";
+import { DrawerPortal } from "./drawer-portal.js";
+import { DrawerContext } from "./drawer-root.js";
+/**
+ * Slide transform per swipe direction: follows the finger through
+ * `--drawer-swipe-movement-*` (plus the snap-point offset for vertical drawers)
+ * and starts/ends fully off its edge, so enter and exit play as transitions
+ * that Base UI waits for before unmounting.
+ */
+const DRAWER_SLIDE = [
+    "data-[swipe-direction=down]:[transform:translateY(calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)))] data-[swipe-direction=down]:data-ending-style:[transform:translateY(100%)] data-[swipe-direction=down]:data-starting-style:[transform:translateY(100%)]",
+    "data-[swipe-direction=up]:[transform:translateY(calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)))] data-[swipe-direction=up]:data-ending-style:[transform:translateY(-100%)] data-[swipe-direction=up]:data-starting-style:[transform:translateY(-100%)]",
+    "data-[swipe-direction=right]:[transform:translateX(var(--drawer-swipe-movement-x))] data-[swipe-direction=right]:data-ending-style:[transform:translateX(100%)] data-[swipe-direction=right]:data-starting-style:[transform:translateX(100%)]",
+    "data-[swipe-direction=left]:[transform:translateX(var(--drawer-swipe-movement-x))] data-[swipe-direction=left]:data-ending-style:[transform:translateX(-100%)] data-[swipe-direction=left]:data-starting-style:[transform:translateX(-100%)]",
+].join(" ");
+/**
+ * Sliding panel body - renders its own portal and scrim overlay, so drop it
+ * directly under `Drawer` without composing `DrawerPortal`/`DrawerOverlay`.
+ *
+ * Bottom slide-up by default, with a drag handle unless `showHandle={false}`.
+ * For another edge, set `swipeDirection` on `Drawer` and position the panel with
+ * `className`. Positioning is viewport-fixed by default. When `Drawer` receives a
+ * bounded `container`, content and scrim switch to `absolute` so they stay inside
+ * that surface. The radius/border classes are plain (not direction-gated) so
+ * consumers can cancel them with `rounded-none` / `border-t-0` via
+ * tailwind-merge - full-screen sheets rely on this.
+ *
+ * @bestPractice Always render a `DrawerTitle` (use `sr-only` if visually hidden) - it provides the panel's `aria-labelledby`.
+ * @bestPractice For full-screen sheets, cancel the corner with `className="rounded-none border-t-0"` and pass `showHandle={false}`.
+ * @bestPractice To scope the drawer to a bounded element (not the viewport), pass `container` to the `Drawer` root; the content and scrim are `absolute` so they stay within it.
+ */
+export const DrawerContent = ({ className, children, showHandle = true, ...props }) => {
+    const { container } = use(DrawerContext);
+    const position = container ? "absolute" : "fixed";
+    return (_jsxs(DrawerPortal, { children: [_jsx(DrawerOverlay, {}), _jsx(DrawerPrimitive.Viewport, { className: cn("pointer-events-none inset-0 z-50", position), "data-component": "drawer-viewport", "data-slot": "drawer-viewport", children: _jsxs(DrawerPrimitive.Popup, { className: cn("group/drawer-content bg-background duration-moderate data-swiping:duration-instant pointer-events-auto inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col overflow-hidden overscroll-contain rounded-t-4xl border-t transition-transform ease-out data-swiping:select-none motion-reduce:transition-none", DRAWER_SLIDE, position, className), "data-component": "drawer-content", "data-slot": "drawer-content", ...props, children: [showHandle ? (_jsx("div", { "aria-hidden": "true", className: "bg-muted mx-auto mt-3 mb-0 h-1.25 w-8 shrink-0 rounded-full", "data-slot": "drawer-handle" })) : null, _jsx(DrawerPrimitive.Content, { className: "flex min-h-0 flex-1 flex-col", children: children })] }) })] }));
+};

package/dist/components/drawer/drawer-description.d.ts

@@ -0,0 +1,9 @@
+import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
+import type * as React from "react";
+/**
+ * DrawerDescription renders supporting text for the drawer.
+ * Import from "@instruments/materia-ui/components/drawer".
+ */
+export declare const DrawerDescription: ({ className, ...props }: Omit<React.ComponentProps<typeof DrawerPrimitive.Description>, "className"> & {
+    className?: string;
+}) => React.JSX.Element;

package/dist/components/drawer/drawer-description.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { OVERLAY_DESCRIPTION } from "../../tokens/overlay-styles.js";
+/**
+ * DrawerDescription renders supporting text for the drawer.
+ * Import from "@instruments/materia-ui/components/drawer".
+ */
+export const DrawerDescription = ({ className, ...props }) => (_jsx(DrawerPrimitive.Description, { className: cn(OVERLAY_DESCRIPTION, className), "data-component": "drawer-description", "data-slot": "drawer-description", ...props }));

package/dist/components/drawer/drawer-footer.d.ts

@@ -0,0 +1,6 @@
+import type * as React from "react";
+/**
+ * DrawerFooter section for actions.
+ * Import from "@instruments/materia-ui/components/drawer".
+ */
+export declare const DrawerFooter: ({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element;

package/dist/components/drawer/drawer-footer.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Flex } from "@instruments/materia-ui/components/flex";
+import { cn } from "@instruments/materia-ui/utils/cn";
+/**
+ * DrawerFooter section for actions.
+ * Import from "@instruments/materia-ui/components/drawer".
+ */
+export const DrawerFooter = ({ className, ...props }) => (_jsx(Flex, { className: cn("mt-auto p-4", className), "data-component": "drawer-footer", "data-slot": "drawer-footer", direction: "column", gap: "xs", ...props }));

package/dist/components/drawer/drawer-header.d.ts

@@ -0,0 +1,6 @@
+import type * as React from "react";
+/**
+ * DrawerHeader section (title/description area).
+ * Import from "@instruments/materia-ui/components/drawer".
+ */
+export declare const DrawerHeader: ({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element;

package/dist/components/drawer/drawer-header.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Flex } from "@instruments/materia-ui/components/flex";
+import { cn } from "@instruments/materia-ui/utils/cn";
+/**
+ * DrawerHeader section (title/description area).
+ * Import from "@instruments/materia-ui/components/drawer".
+ */
+export const DrawerHeader = ({ className, ...props }) => (_jsx(Flex, { className: cn("p-4 group-data-[swipe-direction=down]/drawer-content:text-center group-data-[swipe-direction=up]/drawer-content:text-center md:gap-1.5 md:text-left", className), "data-component": "drawer-header", "data-slot": "drawer-header", direction: "column", gap: "3xs", ...props }));