@fungi.computer/caps 0.0.0-stage → 0.0.1

package/dist/components/confirm-action.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Button } from "./button.js";
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "./dialog.js";
+import { Field, FieldError, Form, FormFooter } from "./field.js";
+import { HoldButton } from "./hold-button.js";
+import { Input } from "./input.js";
+/**
+ * Confirms once per gesture, owns pending/result feedback, and keeps failed
+ * confirmations available for retry. Type mode closes on success and restores
+ * focus through Dialog. A pending action cannot be dismissed or cancelled.
+ */
+export function ConfirmAction({ label, confirmLabel, onConfirm, error, mode, phrase, }) {
+    const [open, setOpen] = useState(false);
+    const [typed, setTyped] = useState("");
+    const [state, setState] = useState("idle");
+    const pending = useRef(false);
+    const input = useRef(null);
+    const busy = state === "busy";
+    const matches = mode === "hold" || (phrase.length > 0 && typed === phrase);
+    const message = busy
+        ? undefined
+        : error !== undefined && error !== ""
+            ? error
+            : state instanceof Error
+                ? state.message
+                : undefined;
+    const result = message ? "failed" : state === "done" ? "done" : undefined;
+    async function confirm() {
+        if (pending.current || !matches)
+            return;
+        pending.current = true;
+        setState("busy");
+        try {
+            await onConfirm();
+            setState("done");
+            setOpen(false);
+            setTyped("");
+        }
+        catch (cause) {
+            setState(new Error("Could not confirm the action. Try again.", { cause }));
+        }
+        finally {
+            pending.current = false;
+        }
+    }
+    if (mode === "hold") {
+        return (_jsxs("div", { className: "grid gap-sm", children: [_jsx(HoldButton, { variant: "destructive", loading: busy, result: result, holdHint: confirmLabel, onConfirm: () => void confirm(), children: label }), _jsx(FieldError, { children: message })] }));
+    }
+    return (_jsxs(Dialog, { open: open, onOpenChange: (next, details) => {
+            if (pending.current) {
+                details.cancel();
+                return;
+            }
+            setOpen(next);
+            setTyped("");
+            setState("idle");
+        }, children: [_jsx(DialogTrigger, { render: _jsx(Button, { variant: "destructive" }), children: label }), _jsx(DialogContent, { initialFocus: input, children: _jsxs(Form, { busy: busy, onSubmit: (event) => {
+                        event.preventDefault();
+                        void confirm();
+                    }, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: label }), _jsx(DialogDescription, { children: "Type the phrase exactly to confirm." })] }), _jsx(Field, { label: `Type ${phrase} to confirm`, children: _jsx(Input, { ref: input, autoComplete: "off", autoCapitalize: "none", spellCheck: false, value: typed, onChange: (event) => {
+                                    setTyped(event.currentTarget.value);
+                                } }) }), _jsxs(FormFooter, { error: message, children: [_jsx(DialogClose, { render: _jsx(Button, { variant: "ghost" }), disabled: busy, children: "Cancel" }), _jsx(Button, { type: "submit", variant: "destructive", disabled: !matches, loading: busy, result: result, children: confirmLabel })] })] }) })] }));
+}

package/dist/components/copy-field.d.ts

@@ -0,0 +1,53 @@
+import { type HTMLAttributes } from "react";
+/** The colour role of one run of text in a block's code. */
+export type CopyFieldTokenKind = "text" | "tag" | "attribute" | "string";
+/** One run of a block's code; the runs, joined, are the copied value. */
+export type CopyFieldToken = {
+    kind: CopyFieldTokenKind;
+    text: string;
+};
+/** Props accepted by CopyField. */
+export type CopyFieldProps = {
+    /** Copy action text; the code presentations default to "Copy". */
+    label?: string;
+} & ({
+    value: string;
+    /** Absent: show the value as wrapped code beside its copy action. */
+    fieldLabel?: undefined;
+    displayValue?: undefined;
+    layout?: "inline";
+    title?: undefined;
+    tokens?: undefined;
+} | {
+    value: string;
+    /** Visible label of a read-only input that holds the value. */
+    fieldLabel: string;
+    /** Readable text shown in the input instead of the copied value. */
+    displayValue?: string;
+    layout?: "inline";
+    title?: undefined;
+    tokens?: undefined;
+} | ({
+    /**
+     * `block`: a titled code panel for a snippet someone pastes elsewhere.
+     * Lines keep their breaks and scroll inside the panel, never the page.
+     */
+    layout: "block";
+    fieldLabel?: undefined;
+    displayValue?: undefined;
+    /** Short caption in the panel's header, such as the language. */
+    title?: string;
+} & ({
+    value: string;
+    tokens?: undefined;
+} | {
+    /** Coloured runs of the code; joined, they are what is copied. */
+    tokens: readonly CopyFieldToken[];
+    value?: undefined;
+}))) & Omit<HTMLAttributes<HTMLElement>, "children" | "title">;
+/**
+ * A value with an explicit copy action and visible outcome: wrapped code by
+ * default, a labelled read-only input when `fieldLabel` is given, or a titled
+ * code panel with `layout="block"`.
+ */
+export declare function CopyField({ value, label, fieldLabel, displayValue, layout, title, tokens, className, ...props }: CopyFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/copy-field.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, Copy } from "lucide-react";
+import { useId, useState } from "react";
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { InputGroup } from "./input-group.js";
+import { Label } from "./label.js";
+import { VisuallyHidden } from "./visually-hidden.js";
+/** Key each run by where it starts in the value, which is stable and unique. */
+function tokenRuns(tokens) {
+    let offset = 0;
+    return tokens.map((token) => {
+        const run = { ...token, offset };
+        offset += token.text.length;
+        return run;
+    });
+}
+/**
+ * A value with an explicit copy action and visible outcome: wrapped code by
+ * default, a labelled read-only input when `fieldLabel` is given, or a titled
+ * code panel with `layout="block"`.
+ */
+export function CopyField({ value, label, fieldLabel, displayValue, layout, title, tokens, className, ...props }) {
+    const id = useId();
+    const [state, setState] = useState({ kind: "ready" });
+    const copied = tokens ? tokens.map((token) => token.text).join("") : value;
+    const copy = async () => {
+        setState(await navigator.clipboard.writeText(copied).then(() => ({ kind: "copied" }), (cause) => ({ kind: "failed", cause })));
+    };
+    if (fieldLabel !== undefined)
+        return (_jsxs("div", { ...props, className: cn("caps-copy-field-input", className), children: [_jsx(Label, { htmlFor: id, children: fieldLabel }), _jsxs(InputGroup, { children: [_jsx(Input, { className: "caps-copy-field-control", "aria-label": fieldLabel, id: id, onFocus: (event) => {
+                                event.currentTarget.select();
+                            }, readOnly: true, value: displayValue ?? copied }), _jsx(Button, { onClick: () => void copy(), size: "sm", variant: "outline", children: state.kind === "copied" ? "Copied" : (label ?? "Copy") })] }), state.kind === "failed" ? (_jsx("span", { role: "status", children: "Could not copy. Select the text to copy it." })) : null] }));
+    const text = state.kind === "copied"
+        ? "Copied"
+        : state.kind === "failed"
+            ? "Copy failed"
+            : (label ?? "Copy");
+    if (layout === "block")
+        return (_jsxs("figure", { ...props, className: cn("caps-copy-field-block", className), "data-state": state.kind, children: [_jsxs("figcaption", { className: "caps-copy-field-header", children: [_jsx("span", { className: "caps-copy-field-title", children: title }), _jsxs(Button, { onClick: () => void copy(), size: "sm", variant: state.kind === "copied" ? "ghost" : "outline", children: [state.kind === "copied" ? (_jsx(Check, { "aria-hidden": "true", size: 15 })) : (_jsx(Copy, { "aria-hidden": "true", size: 15 })), text] }), _jsx(VisuallyHidden, { role: "status", children: state.kind === "copied"
+                                ? "Copied to the clipboard"
+                                : state.kind === "failed"
+                                    ? "Could not copy. Select the code to copy it."
+                                    : "" })] }), _jsx("pre", { className: "caps-copy-field-code", tabIndex: 0, children: _jsx("code", { children: tokens
+                            ? tokenRuns(tokens).map((run) => (_jsx("span", { className: "caps-copy-field-token", "data-kind": run.kind, children: run.text }, run.offset)))
+                            : copied }) })] }));
+    return (_jsxs("div", { ...props, className: cn("caps-copy-field", className), children: [_jsx("code", { className: "caps-copy-field-value", children: copied }), _jsxs(Button, { "aria-label": `${text}: ${copied}`, onClick: () => void copy(), size: "sm", variant: "outline", children: [state.kind === "copied" ? _jsx(Check, { size: 15 }) : _jsx(Copy, { size: 15 }), text] })] }));
+}

package/dist/components/count-badge.d.ts

@@ -0,0 +1,15 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+/** Props accepted by CountBadge. */
+export type CountBadgeProps = {
+    count: ReactNode;
+    /** Semantic count emphasis; warnings call attention to items needing action. */
+    tone?: "neutral" | "warning";
+    label?: ReactNode;
+} & HTMLAttributes<HTMLSpanElement>;
+/** A badge displaying a caller-provided count and label. */
+export declare const CountBadge: import("react").ForwardRefExoticComponent<{
+    count: ReactNode;
+    /** Semantic count emphasis; warnings call attention to items needing action. */
+    tone?: "neutral" | "warning";
+    label?: ReactNode;
+} & HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/count-badge.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+/** A badge displaying a caller-provided count and label. */
+export const CountBadge = forwardRef(function CountBadge({ className, count, label, tone = "neutral", ...props }, ref) {
+    return (_jsxs("span", { ...props, className: cn("inline-flex items-center gap-xs", className), ref: ref, children: [_jsx("span", { className: tone === "warning"
+                    ? "badge badge-warning badge-sm tabular-nums caps-numeric"
+                    : "badge badge-neutral badge-sm tabular-nums caps-numeric", children: count }), label !== undefined ? (_jsx("span", { className: "text-sm text-base-content", children: label })) : null] }));
+});

package/dist/components/cover-pattern.d.ts

@@ -0,0 +1,19 @@
+import { type SVGAttributes } from "react";
+/** Props accepted by CoverPattern. */
+export type CoverPatternProps = {
+    /** Stable identity that picks the garden; the same seed draws the same one. */
+    seed: string;
+    /** Names the pattern for assistive technology; without it the pattern is decorative. */
+    label?: string;
+} & Omit<SVGAttributes<SVGSVGElement>, "children" | "role" | "aria-label">;
+/**
+ * A garden of mushrooms over a thread of mycelium: the stand-in for a cover
+ * that has no picture yet. It fills its box, holds no text, and takes every
+ * color from the theme.
+ */
+export declare const CoverPattern: import("react").ForwardRefExoticComponent<{
+    /** Stable identity that picks the garden; the same seed draws the same one. */
+    seed: string;
+    /** Names the pattern for assistive technology; without it the pattern is decorative. */
+    label?: string;
+} & Omit<SVGAttributes<SVGSVGElement>, "role" | "aria-label" | "children"> & import("react").RefAttributes<SVGSVGElement>>;

package/dist/components/cover-pattern.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+import { seedHash } from "../lib/seed-hash.js";
+/** Theme tones a mushroom cap may take; the current Stipe theme supplies each color. */
+const capTones = [
+    "primary",
+    "secondary",
+    "accent",
+    "info",
+    "warning",
+    "error",
+];
+/** A small seeded generator, so one seed always draws one garden. */
+function sequence(seed) {
+    let state = seedHash(seed) || 1;
+    return () => {
+        state = (state + 0x6d2b79f5) | 0;
+        let mixed = Math.imul(state ^ (state >>> 15), 1 | state);
+        mixed = (mixed + Math.imul(mixed ^ (mixed >>> 7), 61 | mixed)) ^ mixed;
+        return ((mixed ^ (mixed >>> 14)) >>> 0) / 4294967296;
+    };
+}
+const number = (value) => value.toFixed(1);
+/**
+ * A garden of mushrooms over a thread of mycelium: the stand-in for a cover
+ * that has no picture yet. It fills its box, holds no text, and takes every
+ * color from the theme.
+ */
+export const CoverPattern = forwardRef(function CoverPattern({ seed, label, className, ...props }, ref) {
+    const next = sequence(seed);
+    const count = 5 + Math.floor(next() * 2);
+    const mushrooms = Array.from({ length: count }, (_, index) => {
+        const size = 11 + next() * 11;
+        return {
+            x: 14 + (index * 132) / (count - 1) + (next() - 0.5) * 12,
+            base: 74 + next() * 20,
+            size,
+            tone: capTones[Math.floor(next() * capTones.length)] ?? "primary",
+            spots: 2 + Math.floor(next() * 2),
+            lean: (next() - 0.5) * 0.5,
+        };
+    }).sort((a, b) => a.base - b.base);
+    const threads = Array.from({ length: 4 }, () => {
+        const y = 80 + next() * 16;
+        return `M-4 ${number(y)} C40 ${number(y - 8 + next() * 16)} 100 ${number(y - 8 + next() * 16)} 164 ${number(y - 6 + next() * 12)}`;
+    });
+    const spores = Array.from({ length: 9 }, () => ({
+        x: next() * 160,
+        y: 6 + next() * 50,
+        r: 0.7 + next() * 1.3,
+    }));
+    return (_jsxs("svg", { ...props, "aria-hidden": label ? undefined : true, "aria-label": label, className: cn("caps-cover-pattern", className), focusable: "false", preserveAspectRatio: "xMidYMid slice", ref: ref, role: label ? "img" : undefined, viewBox: "0 0 160 100", children: [_jsx("rect", { width: "160", height: "100", style: {
+                    fill: "color-mix(in oklab, var(--color-base-300) 88%, var(--color-secondary))",
+                } }), _jsx("circle", { cx: number(110 + next() * 34), cy: number(20 + next() * 8), r: "9", style: {
+                    fill: "color-mix(in oklab, var(--color-warning) 45%, var(--color-base-300))",
+                } }), _jsx("path", { d: "M0 74 Q36 62 76 70 T160 66 V100 H0 Z", style: {
+                    fill: "color-mix(in oklab, var(--color-success) 30%, var(--color-base-300))",
+                } }), threads.map((path) => (_jsx("path", { d: path, fill: "none", strokeLinecap: "round", strokeWidth: "0.6", style: {
+                    stroke: "color-mix(in oklab, var(--color-base-content) 22%, transparent)",
+                } }, path))), spores.map((spore) => (_jsx("circle", { cx: number(spore.x), cy: number(spore.y), r: number(spore.r), style: {
+                    fill: "color-mix(in oklab, var(--color-base-content) 28%, transparent)",
+                } }, `${number(spore.x)}-${number(spore.y)}`))), mushrooms.map((mushroom) => {
+                const stemWidth = mushroom.size * 0.55;
+                const stemHeight = mushroom.size * 0.95;
+                const capBase = mushroom.base - stemHeight;
+                return (_jsxs("g", { transform: `rotate(${number(mushroom.lean * 20)} ${number(mushroom.x)} ${number(mushroom.base)})`, children: [_jsx("rect", { x: number(mushroom.x - stemWidth / 2), y: number(capBase - 1), width: number(stemWidth), height: number(stemHeight + 1), rx: number(stemWidth / 2), style: {
+                                fill: "color-mix(in oklab, var(--color-base-100) 92%, var(--color-warning))",
+                            } }), _jsx("path", { d: `M${number(mushroom.x - mushroom.size)} ${number(capBase)} A${number(mushroom.size)} ${number(mushroom.size * 0.85)} 0 0 1 ${number(mushroom.x + mushroom.size)} ${number(capBase)} Z`, style: { fill: `var(--color-${mushroom.tone})` } }), Array.from({ length: mushroom.spots }, (_, spot) => (_jsx("circle", { cx: number(mushroom.x +
+                                (spot - (mushroom.spots - 1) / 2) * mushroom.size * 0.62), cy: number(capBase - mushroom.size * (spot % 2 === 0 ? 0.42 : 0.22)), r: number(mushroom.size * 0.16), style: {
+                                fill: "color-mix(in oklab, var(--color-base-100) 90%, transparent)",
+                            } }, spot)))] }, `${number(mushroom.x)}-${number(mushroom.base)}`));
+            })] }));
+});

package/dist/components/data-list.d.ts

@@ -0,0 +1,25 @@
+import { type HTMLAttributes, type LiHTMLAttributes, type ReactNode } from "react";
+/** Props accepted by DataList. */
+export type DataListProps = HTMLAttributes<HTMLUListElement> & {
+    density?: "regular" | "compact";
+};
+/** A list wrapper for caller-provided rows. */
+export declare const DataList: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
+    density?: "regular" | "compact";
+} & import("react").RefAttributes<HTMLUListElement>>;
+/** A list row for a caller-provided label and value. */
+export declare const DataRow: import("react").ForwardRefExoticComponent<LiHTMLAttributes<HTMLLIElement> & import("react").RefAttributes<HTMLLIElement>>;
+/** Props accepted by DataListHeading. */
+export type DataListHeadingProps = HTMLAttributes<HTMLHeadingElement> & {
+    /** Heading level; the host keeps its document outline. */
+    level?: 2 | 3;
+    /** Optional trailing count or status, such as a Badge. */
+    aside?: ReactNode;
+};
+/** A quiet small-caps section label that groups the rows below it. */
+export declare const DataListHeading: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & {
+    /** Heading level; the host keeps its document outline. */
+    level?: 2 | 3;
+    /** Optional trailing count or status, such as a Badge. */
+    aside?: ReactNode;
+} & import("react").RefAttributes<HTMLHeadingElement>>;

package/dist/components/data-list.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, } from "react";
+import { cn } from "../lib/cn.js";
+/** A list wrapper for caller-provided rows. */
+export const DataList = forwardRef(function DataList({ className, density = "regular", ...props }, ref) {
+    return (_jsx("ul", { ...props, className: cn("list", density === "compact" && "list-sm", className), ref: ref }));
+});
+/** A list row for a caller-provided label and value. */
+export const DataRow = forwardRef(function DataRow({ className, ...props }, ref) {
+    return _jsx("li", { ...props, className: cn("list-row", className), ref: ref });
+});
+/** A quiet small-caps section label that groups the rows below it. */
+export const DataListHeading = forwardRef(function DataListHeading({ aside, children, className, level = 2, ...props }, ref) {
+    const Heading = level === 3 ? "h3" : "h2";
+    return (_jsxs(Heading, { ...props, className: cn("caps-data-list-heading", className), ref: ref, children: [_jsx("span", { children: children }), aside !== undefined ? (_jsx("span", { className: "caps-data-list-heading-aside", children: aside })) : null] }));
+});

package/dist/components/dialog.d.ts

@@ -0,0 +1,39 @@
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import { type HTMLAttributes } from "react";
+/** Details supplied to a Dialog open-change callback. */
+export type DialogChangeDetails = BaseDialog.Root.ChangeEventDetails;
+/** Supported DialogChangeReason values. */
+export type DialogChangeReason = BaseDialog.Root.ChangeEventReason;
+/** Supported DialogInteractionOwner values. */
+export type DialogInteractionOwner = "host" | "local";
+/** Props accepted by Dialog. */
+export type DialogProps<Payload = unknown> = BaseDialog.Root.Props<Payload> & {
+    interactionOwner?: DialogInteractionOwner;
+};
+/** A dialog controller with explicit controlled or uncontrolled open state. */
+export declare function Dialog<Payload = unknown>({ children, interactionOwner, modal, onOpenChange, ...props }: DialogProps<Payload>): import("react/jsx-runtime").JSX.Element;
+/** The trigger control for a Dialog. */
+export declare const DialogTrigger: import("react").ForwardRefExoticComponent<Omit<BaseDialog.Trigger.Props<unknown>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+/** Shell dialog destination, with Base UI container and mount lifetime overrides. */
+export declare const DialogPortal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/** The styled backdrop for a composed Dialog. */
+export declare const DialogBackdrop: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogBackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/** The styled popup with Base UI composition and caller-controlled focus targets. */
+export declare const DialogPopup: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/** Props accepted by DialogContent. */
+export type DialogContentProps = BaseDialog.Popup.Props & Pick<BaseDialog.Portal.Props, "container" | "keepMounted">;
+/**
+ * The default portal, backdrop and popup composition for a Dialog.
+ * Keeps child state across closes. Like Base UI, only full modal mode has a backdrop.
+ */
+export declare const DialogContent: import("react").ForwardRefExoticComponent<Omit<DialogContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/** A footer layout for caller-provided Dialog actions. */
+export declare function DialogFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+/** A header layout for caller-provided Dialog content. */
+export declare function DialogHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+/** The accessible title for a Dialog. */
+export declare const DialogTitle: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogTitleProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+/** The accessible description for a Dialog. */
+export declare const DialogDescription: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogDescriptionProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+/** A control that requests a Dialog to close. */
+export declare const DialogClose: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogCloseProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/dialog.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import { createContext, forwardRef, useContext, } from "react";
+import { cn, resolveClassName } from "../lib/cn.js";
+import { useOverlayRoot } from "./overlay-root.js";
+const DialogContext = createContext(null);
+/** A dialog controller with explicit controlled or uncontrolled open state. */
+export function Dialog({ children, interactionOwner = "local", modal = true, onOpenChange, ...props }) {
+    return (_jsx(DialogContext.Provider, { value: { interactionOwner, modal }, children: _jsx(BaseDialog.Root, { ...props, modal: modal, onOpenChange: (next, details) => {
+                if (interactionOwner === "host" &&
+                    !next &&
+                    details.reason === "escape-key") {
+                    details.cancel();
+                    details.allowPropagation();
+                    return;
+                }
+                onOpenChange?.(next, details);
+            }, children: children }) }));
+}
+function useDialogContext() {
+    const context = useContext(DialogContext);
+    if (!context)
+        throw new Error("Dialog parts must be used inside <Dialog>");
+    return context;
+}
+/** The trigger control for a Dialog. */
+export const DialogTrigger = forwardRef(function DialogTrigger({ className, type = "button", ...props }, ref) {
+    return (_jsx(BaseDialog.Trigger, { ...props, className: (state) => cn("btn", resolveClassName(className, state)), ref: ref, type: type }));
+});
+/** Shell dialog destination, with Base UI container and mount lifetime overrides. */
+export const DialogPortal = forwardRef(function DialogPortal({ container, ...props }, ref) {
+    const root = useOverlayRoot("dialog");
+    if (container == null && root === null)
+        return null;
+    return (_jsx(BaseDialog.Portal, { ...props, container: container ?? root, ref: ref }));
+});
+/** The styled backdrop for a composed Dialog. */
+export const DialogBackdrop = forwardRef(function DialogBackdrop({ className, ...props }, ref) {
+    return (_jsx(BaseDialog.Backdrop, { ...props, ref: ref, className: (state) => cn("caps-dialog-backdrop fixed inset-0 bg-black/40", resolveClassName(className, state)) }));
+});
+/** The styled popup with Base UI composition and caller-controlled focus targets. */
+export const DialogPopup = forwardRef(function DialogPopup({ className, finalFocus, ...props }, ref) {
+    const dialog = useDialogContext();
+    return (_jsx(BaseDialog.Popup, { ...props, className: (state) => cn("caps-dialog-popup max-h-screen w-11/12 max-w-(--container-lg) overflow-y-auto overscroll-contain rounded-box bg-base-100 p-lg text-base-content shadow-xl", resolveClassName(className, state)), finalFocus: dialog.interactionOwner === "host" ? false : (finalFocus ?? true), ref: ref }));
+});
+/**
+ * The default portal, backdrop and popup composition for a Dialog.
+ * Keeps child state across closes. Like Base UI, only full modal mode has a backdrop.
+ */
+export const DialogContent = forwardRef(function DialogContent({ container, keepMounted = true, className, ...props }, ref) {
+    const { modal } = useDialogContext();
+    return (_jsxs(DialogPortal, { container: container, keepMounted: keepMounted, children: [modal === true ? _jsx(DialogBackdrop, {}) : null, _jsx(DialogPopup, { ...props, className: (state) => cn("fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2", resolveClassName(className, state)), ref: ref })] }));
+});
+/** A footer layout for caller-provided Dialog actions. */
+export function DialogFooter({ className, ...props }) {
+    return (_jsx("div", { ...props, className: cn("flex justify-end gap-sm", className) }));
+}
+/** A header layout for caller-provided Dialog content. */
+export function DialogHeader({ className, ...props }) {
+    return _jsx("div", { ...props, className: cn("flex flex-col gap-sm", className) });
+}
+/** The accessible title for a Dialog. */
+export const DialogTitle = forwardRef(function DialogTitle({ className, ...props }, ref) {
+    return (_jsx(BaseDialog.Title, { ...props, className: (state) => cn("text-lg font-semibold", resolveClassName(className, state)), ref: ref }));
+});
+/** The accessible description for a Dialog. */
+export const DialogDescription = forwardRef(function DialogDescription({ className, ...props }, ref) {
+    return (_jsx(BaseDialog.Description, { ...props, className: (state) => cn("text-sm text-base-content", resolveClassName(className, state)), ref: ref }));
+});
+/** A control that requests a Dialog to close. */
+export const DialogClose = forwardRef(function DialogClose({ className, type = "button", ...props }, ref) {
+    return (_jsx(BaseDialog.Close, { ...props, className: (state) => cn("btn btn-ghost", resolveClassName(className, state)), ref: ref, type: type }));
+});

package/dist/components/diff-view.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from "react";
+/** One presentational diff line; the caller owns parsing. */
+export type DiffViewLine = Readonly<{
+    kind: "add" | "context" | "file" | "hunk" | "remove";
+    text: string;
+}>;
+/** Props accepted by DiffView. */
+export type DiffViewProps = {
+    lines: readonly DiffViewLine[];
+    /** Lines the caller omitted, shown as a trailing note. */
+    hiddenLines?: number;
+} & Omit<HTMLAttributes<HTMLPreElement>, "children">;
+/** A compact monospace diff with add/remove/hunk/file line tones. */
+export declare function DiffView({ lines, hiddenLines, className, ...props }: DiffViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/diff-view.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+const markers = {
+    add: "+",
+    context: " ",
+    file: "",
+    hunk: "@@",
+    remove: "-",
+};
+/** A compact monospace diff with add/remove/hunk/file line tones. */
+export function DiffView({ lines, hiddenLines = 0, className, ...props }) {
+    return (_jsxs("pre", { ...props, className: cn("caps-diff", className), children: [lines.map((line, index) => (_jsxs("span", { className: "caps-diff-line", "data-kind": line.kind, children: [_jsx("span", { "aria-hidden": "true", className: "caps-diff-marker", children: markers[line.kind] }), line.text, "\n"] }, `${String(index)}:${line.kind}`))), hiddenLines > 0 ? (_jsxs("span", { className: "caps-diff-line", "data-kind": "more", children: ["\u2026 ", String(hiddenLines), " more lines"] })) : null] }));
+}

package/dist/components/disclosure.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+/** Semantic tone of the disclosure header. */
+export type DisclosureTone = "neutral" | "error";
+/** Density: `group` for a summary header, `row` for a compact nested row. */
+export type DisclosureSize = "group" | "row";
+/** Props accepted by Disclosure. */
+export type DisclosureProps = Readonly<{
+    /** Controlled open state; the caller owns persistence. */
+    open: boolean;
+    /** Called with the requested open state. */
+    onOpenChange: (open: boolean) => void;
+    /** One-line header content. */
+    summary: ReactNode;
+    /** Optional leading visual, such as a status bead or icon. */
+    leading?: ReactNode;
+    /** Optional trailing metadata, such as a duration. */
+    trailing?: ReactNode;
+    /** Panel content, mounted only while open. */
+    children?: ReactNode;
+    tone?: DisclosureTone;
+    size?: DisclosureSize;
+    className?: string;
+}>;
+/**
+ * A controlled one-line disclosure over Base UI Collapsible. The header is a
+ * native button carrying `aria-expanded` and `aria-controls`, so Enter and
+ * Space toggle it.
+ */
+export declare function Disclosure({ open, onOpenChange, summary, leading, trailing, children, tone, size, className, }: DisclosureProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/disclosure.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Collapsible } from "@base-ui/react/collapsible";
+import { ChevronRight } from "lucide-react";
+import { cn, cva } from "../lib/cn.js";
+const disclosureVariants = cva("caps-disclosure", {
+    variants: {
+        tone: { neutral: "", error: "caps-disclosure-error" },
+        size: { group: "caps-disclosure-group", row: "caps-disclosure-row" },
+    },
+    defaultVariants: { tone: "neutral", size: "group" },
+});
+/**
+ * A controlled one-line disclosure over Base UI Collapsible. The header is a
+ * native button carrying `aria-expanded` and `aria-controls`, so Enter and
+ * Space toggle it.
+ */
+export function Disclosure({ open, onOpenChange, summary, leading, trailing, children, tone, size, className, }) {
+    return (_jsxs(Collapsible.Root, { className: cn(disclosureVariants({ tone, size }), className), onOpenChange: onOpenChange, open: open, children: [_jsxs(Collapsible.Trigger, { className: "caps-disclosure-trigger", children: [leading === undefined ? null : (_jsx("span", { className: "caps-disclosure-leading", children: leading })), _jsx("span", { className: "caps-disclosure-summary", children: summary }), trailing === undefined ? null : (_jsx("span", { className: "caps-disclosure-trailing", children: trailing })), _jsx(ChevronRight, { "aria-hidden": "true", className: "caps-disclosure-chevron", size: 12 })] }), _jsx(Collapsible.Panel, { className: "caps-disclosure-panel", children: children })] }));
+}

package/dist/components/dropdown-menu.d.ts

@@ -0,0 +1,49 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import * as React from "react";
+/** Details supplied to a DropdownMenu open-change callback. */
+export type DropdownMenuChangeDetails = BaseMenu.Root.ChangeEventDetails;
+/** Supported DropdownMenuChangeReason values. */
+export type DropdownMenuChangeReason = BaseMenu.Root.ChangeEventReason;
+/** Supported DropdownMenuInteractionOwner values. */
+export type DropdownMenuInteractionOwner = "host" | "local";
+/** Props accepted by DropdownMenu. */
+export type DropdownMenuProps<Payload = unknown> = BaseMenu.Root.Props<Payload> & {
+    interactionOwner?: DropdownMenuInteractionOwner;
+};
+/** A menu controller with explicit controlled or uncontrolled open state. */
+export declare function DropdownMenu<Payload = unknown>({ actionsRef: suppliedActionsRef, children, interactionOwner, onOpenChange, ...props }: DropdownMenuProps<Payload>): import("react/jsx-runtime").JSX.Element;
+/** Access the nearest DropdownMenu close operation. */
+export declare function useDropdownMenu(): {
+    /** Close the nearest menu, if it is mounted. */
+    close: () => void | undefined;
+};
+/** The trigger control for a DropdownMenu. */
+export declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<Omit<BaseMenu.Trigger.Props<unknown>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/** Shell popover destination, with Base UI container and mount lifetime overrides. */
+export declare const DropdownMenuPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** Base UI owns placement; a shell's popover root supplies its collision boundary. */
+export declare const DropdownMenuPositioner: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** The styled popup for caller-composed menu placement and portal ownership. */
+export declare const DropdownMenuPopup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** Props accepted by DropdownMenuContent. */
+export type DropdownMenuContentProps = BaseMenu.Popup.Props & Pick<BaseMenu.Portal.Props, "container" | "keepMounted"> & Pick<BaseMenu.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">;
+/** The positioned content region for a DropdownMenu. */
+export declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** Props accepted by DropdownMenuItem. */
+export type DropdownMenuItemProps = Omit<BaseMenu.Item.Props, "onSelect"> & {
+    /** Called when this item is selected. */
+    onSelect?: (event: React.SyntheticEvent<HTMLDivElement>) => void;
+    variant?: "default" | "destructive";
+};
+/** An actionable item in a DropdownMenu. */
+export declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuItemProps, "ref"> & React.RefAttributes<HTMLElement>>;
+/** Props accepted by DropdownMenuCheckboxItem. */
+export type DropdownMenuCheckboxItemProps = Omit<BaseMenu.CheckboxItem.Props, "onSelect"> & Pick<DropdownMenuItemProps, "onSelect">;
+/** A checkable item in a DropdownMenu. */
+export declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuCheckboxItemProps, "ref"> & React.RefAttributes<HTMLElement>>;
+/** A visual separator in a DropdownMenu. */
+export declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** A named set of related items; pair it with a DropdownMenuLabel. */
+export declare const DropdownMenuGroup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** The visible name of a DropdownMenuGroup, announced with its items. */
+export declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;