@cronus-ui/ui 0.6.0

package/dist/components/sidebar.js

@@ -0,0 +1,290 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { createContext, forwardRef, isValidElement, useCallback, useContext, useEffect, useMemo, useState, useSyncExternalStore, } from "react";
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+import { ScrollArea } from "./scroll-area.js";
+import { Separator } from "./separator.js";
+import { Sheet, SheetContent, SheetDescription, SheetTitle } from "./sheet.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
+/* ------------------------------------------------------------------ *
+ * Constants
+ * ------------------------------------------------------------------ */
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3.5rem";
+const SIDEBAR_MOBILE_BREAKPOINT = 768;
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+/* ------------------------------------------------------------------ *
+ * Mobile-breakpoint store (SSR-safe via useSyncExternalStore)
+ * ------------------------------------------------------------------ */
+const MOBILE_MEDIA_QUERY = `(max-width: ${SIDEBAR_MOBILE_BREAKPOINT - 1}px)`;
+function subscribeMobile(callback) {
+    if (typeof window === "undefined" || !window.matchMedia) {
+        return () => { };
+    }
+    const query = window.matchMedia(MOBILE_MEDIA_QUERY);
+    query.addEventListener("change", callback);
+    return () => query.removeEventListener("change", callback);
+}
+function getMobileSnapshot() {
+    if (typeof window === "undefined" || !window.matchMedia) {
+        return false;
+    }
+    return window.matchMedia(MOBILE_MEDIA_QUERY).matches;
+}
+// Server snapshot must be a stable value to keep SSR markup deterministic;
+// React reconciles the real client value right after hydration without a
+// hydration-mismatch warning (it's a post-mount store read, not render markup).
+function getMobileServerSnapshot() {
+    return false;
+}
+const SidebarContext = createContext(null);
+export function useSidebar() {
+    const context = useContext(SidebarContext);
+    if (!context) {
+        throw new Error("useSidebar must be used within a <SidebarProvider>.");
+    }
+    return context;
+}
+export const SidebarProvider = forwardRef(({ defaultOpen = true, open: openProp, onOpenChange, enableKeyboardShortcut = true, className, style, children, ...props }, ref) => {
+    const isMobile = useSyncExternalStore(subscribeMobile, getMobileSnapshot, getMobileServerSnapshot);
+    const [openMobile, setOpenMobile] = useState(false);
+    // Internal state for the uncontrolled case.
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const open = openProp ?? internalOpen;
+    const setOpen = useCallback((value) => {
+        if (openProp === undefined) {
+            setInternalOpen(value);
+        }
+        onOpenChange?.(value);
+    }, [openProp, onOpenChange]);
+    const toggleSidebar = useCallback(() => {
+        if (isMobile) {
+            setOpenMobile((value) => !value);
+        }
+        else {
+            setOpen(!open);
+        }
+    }, [isMobile, open, setOpen]);
+    // Ctrl/Cmd+B keyboard shortcut.
+    useEffect(() => {
+        if (!enableKeyboardShortcut || typeof window === "undefined") {
+            return;
+        }
+        const onKeyDown = (event) => {
+            // Ignore auto-repeat from a held key.
+            if (event.repeat) {
+                return;
+            }
+            if (event.key.toLowerCase() === SIDEBAR_KEYBOARD_SHORTCUT &&
+                (event.metaKey || event.ctrlKey)) {
+                // Don't hijack the shortcut while the user is typing in an editable
+                // field (input/textarea/select/contenteditable).
+                const target = event.target;
+                if (target) {
+                    const tag = target.tagName;
+                    if (tag === "INPUT" ||
+                        tag === "TEXTAREA" ||
+                        tag === "SELECT" ||
+                        target.isContentEditable) {
+                        return;
+                    }
+                }
+                event.preventDefault();
+                toggleSidebar();
+            }
+        };
+        window.addEventListener("keydown", onKeyDown);
+        return () => window.removeEventListener("keydown", onKeyDown);
+    }, [enableKeyboardShortcut, toggleSidebar]);
+    const state = open ? "expanded" : "collapsed";
+    const contextValue = useMemo(() => ({
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+    }), [state, open, setOpen, isMobile, openMobile, toggleSidebar]);
+    return (_jsx(SidebarContext.Provider, { value: contextValue, children: _jsx("div", { ref: ref, "data-slot": "sidebar-wrapper", "data-state": state, style: {
+                "--sidebar-width": SIDEBAR_WIDTH,
+                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+                ...style,
+            }, className: cn("flex min-h-svh w-full", className), ...props, children: children }) }));
+});
+SidebarProvider.displayName = "SidebarProvider";
+export const Sidebar = forwardRef(({ side = "left", variant = "sidebar", collapsible = "icon", className, children, "aria-label": ariaLabel = "Sidebar", ...props }, ref) => {
+    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+    const isOffcanvasCollapsed = collapsible === "offcanvas" && state === "collapsed";
+    // Mobile: render the sidebar contents inside a Sheet.
+    if (isMobile) {
+        return (_jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, children: _jsxs(SheetContent, { ref: ref, "data-slot": "sidebar", "data-mobile": "true", side: side, "aria-label": ariaLabel, className: "w-(--sidebar-width-mobile) gap-0 bg-surface-base p-0 [&>button]:hidden", style: { "--sidebar-width-mobile": SIDEBAR_WIDTH_MOBILE }, ...props, children: [_jsx(SheetTitle, { className: "sr-only", children: ariaLabel }), _jsx(SheetDescription, { className: "sr-only", children: "Mobile navigation menu." }), _jsx("nav", { "aria-label": ariaLabel, className: "flex h-full w-full flex-col", children: children })] }) }));
+    }
+    // Non-collapsible aside: simple fixed-width column.
+    if (collapsible === "none") {
+        return (_jsx("aside", { ref: ref, "data-slot": "sidebar", "data-variant": variant, "data-side": side, className: cn("flex h-svh w-(--sidebar-width) flex-col bg-surface-base text-fg", side === "left" ? "border-r border-border" : "border-l border-border", className), ...props, children: _jsx("nav", { "aria-label": ariaLabel, className: "flex h-full w-full flex-col", children: children }) }));
+    }
+    return (_jsx("aside", { ref: ref, "data-slot": "sidebar", "data-state": state, "data-collapsible": state === "collapsed" ? collapsible : "", "data-variant": variant, "data-side": side, 
+        // When collapsed offcanvas, take the whole aside out of the a11y tree
+        // and tab order so the hidden links/buttons aren't focusable or
+        // announced. `inert` also implies aria-hidden for the subtree.
+        inert: isOffcanvasCollapsed || undefined, className: cn("group/sidebar relative flex h-svh flex-col text-fg", 
+        // Width: expanded vs icon-collapsed vs offcanvas-collapsed.
+        "w-(--sidebar-width)", "data-[collapsible=icon]:w-(--sidebar-width-icon)", "data-[collapsible=offcanvas]:w-0", 
+        // Smooth width/transform transition (respects prefers-reduced-motion globally).
+        "transition-[width] duration-200 ease-[var(--ease-out-quart)] motion-reduce:transition-none", 
+        // Surface + border by side.
+        variant === "floating"
+            ? "m-2 rounded-xl border border-border bg-surface-base shadow-sm data-[collapsible=offcanvas]:m-0"
+            : variant === "inset"
+                ? "m-2 rounded-xl bg-surface-base"
+                : cn("bg-surface-base", side === "left" ? "border-r border-border" : "border-l border-border"), 
+        // Offcanvas collapse hides content while preserving layout flow.
+        "data-[collapsible=offcanvas]:overflow-hidden data-[collapsible=offcanvas]:border-0", className), ...props, children: _jsx("nav", { "aria-label": ariaLabel, className: "flex h-full w-full flex-col", children: children }) }));
+});
+Sidebar.displayName = "Sidebar";
+export const SidebarTrigger = forwardRef(({ className, onClick, children, ...props }, ref) => {
+    const { toggleSidebar, state } = useSidebar();
+    return (_jsxs(Button, { ref: ref, type: "button", variant: "ghost", size: "icon-sm", "data-slot": "sidebar-trigger", "aria-label": "Toggle sidebar", "aria-expanded": state === "expanded", className: cn(className), onClick: (event) => {
+            onClick?.(event);
+            if (!event.defaultPrevented) {
+                toggleSidebar();
+            }
+        }, ...props, children: [children ?? _jsx(SidebarTriggerIcon, {}), _jsx("span", { className: "sr-only", children: "Toggle sidebar" })] }));
+});
+SidebarTrigger.displayName = "SidebarTrigger";
+function SidebarTriggerIcon() {
+    return (_jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2" }), _jsx("path", { d: "M9 4v16" })] }));
+}
+/**
+ * A thin draggable-looking rail rendered along the inner edge of the sidebar
+ * that toggles collapse on click. Hidden on mobile (the Sheet handles dismissal).
+ */
+export const SidebarRail = forwardRef(({ className, onClick, ...props }, ref) => {
+    const { toggleSidebar, isMobile } = useSidebar();
+    if (isMobile) {
+        return null;
+    }
+    return (_jsx("button", { ref: ref, type: "button", "data-slot": "sidebar-rail", "aria-label": "Toggle sidebar", tabIndex: -1, className: cn("absolute inset-y-0 z-20 hidden w-3 -translate-x-1/2 cursor-col-resize transition-colors sm:flex", "after:absolute after:inset-y-0 after:left-1/2 after:w-px after:bg-transparent hover:after:bg-border", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", "group-data-[side=left]/sidebar:right-0 group-data-[side=right]/sidebar:left-0", className), onClick: (event) => {
+            onClick?.(event);
+            if (!event.defaultPrevented) {
+                toggleSidebar();
+            }
+        }, ...props }));
+});
+SidebarRail.displayName = "SidebarRail";
+/**
+ * Content region sibling to a `variant="inset"` sidebar. Provides the rounded,
+ * inset surface that pairs with the floating/inset sidebar styles. Not a
+ * landmark — the consumer owns the `<main>` per route.
+ */
+export const SidebarInset = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, "data-slot": "sidebar-inset", className: cn("relative flex min-h-svh flex-1 flex-col bg-surface-base", "md:m-2 md:ml-0 md:rounded-xl md:border md:border-border md:shadow-sm", className), ...props }));
+});
+SidebarInset.displayName = "SidebarInset";
+/* ------------------------------------------------------------------ *
+ * Structural regions
+ * ------------------------------------------------------------------ */
+export const SidebarHeader = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, "data-slot": "sidebar-header", className: cn("flex flex-col gap-2 p-2", className), ...props }));
+});
+SidebarHeader.displayName = "SidebarHeader";
+export const SidebarFooter = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, "data-slot": "sidebar-footer", className: cn("flex flex-col gap-2 p-2", className), ...props }));
+});
+SidebarFooter.displayName = "SidebarFooter";
+/**
+ * Scrollable middle region. Uses ScrollArea so long nav trees stay accessible
+ * without clipping. Collapses its overflow padding in icon mode.
+ */
+export const SidebarContent = forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, "data-slot": "sidebar-content", className: cn("min-h-0 flex-1 group-data-[collapsible=offcanvas]/sidebar:overflow-hidden", className), ...props, children: _jsx(ScrollArea, { className: "h-full", children: _jsx("div", { className: "flex flex-col gap-2 p-2 group-data-[collapsible=icon]/sidebar:items-center", children: children }) }) }));
+});
+SidebarContent.displayName = "SidebarContent";
+export const SidebarSeparator = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(Separator, { ref: ref, "data-slot": "sidebar-separator", className: cn("mx-2 w-auto bg-border", className), ...props }));
+});
+SidebarSeparator.displayName = "SidebarSeparator";
+/* ------------------------------------------------------------------ *
+ * Group
+ * ------------------------------------------------------------------ */
+export const SidebarGroup = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, "data-slot": "sidebar-group", role: "group", className: cn("relative flex w-full min-w-0 flex-col gap-1", className), ...props }));
+});
+SidebarGroup.displayName = "SidebarGroup";
+export const SidebarGroupLabel = forwardRef(({ className, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    return (_jsx(Comp, { ref: ref, "data-slot": "sidebar-group-label", className: cn("flex h-7 shrink-0 items-center px-2 text-xs font-medium text-fg-tertiary", "transition-[margin,opacity] duration-200 ease-[var(--ease-out-quart)] motion-reduce:transition-none", 
+        // Hidden when collapsed to icons.
+        "group-data-[collapsible=icon]/sidebar:-mt-8 group-data-[collapsible=icon]/sidebar:opacity-0", className), ...props }));
+});
+SidebarGroupLabel.displayName = "SidebarGroupLabel";
+export const SidebarGroupContent = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, "data-slot": "sidebar-group-content", className: cn("w-full text-sm", className), ...props }));
+});
+SidebarGroupContent.displayName = "SidebarGroupContent";
+/* ------------------------------------------------------------------ *
+ * Menu
+ * ------------------------------------------------------------------ */
+export const SidebarMenu = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("ul", { ref: ref, "data-slot": "sidebar-menu", className: cn("flex w-full min-w-0 flex-col gap-1", className), ...props }));
+});
+SidebarMenu.displayName = "SidebarMenu";
+export const SidebarMenuItem = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("li", { ref: ref, "data-slot": "sidebar-menu-item", className: cn("group/menu-item relative", className), ...props }));
+});
+SidebarMenuItem.displayName = "SidebarMenuItem";
+const sidebarMenuButtonVariants = cva(cn("group/menu-button peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md text-left text-sm", "transition-[background,color,box-shadow] duration-150 ease-[var(--ease-out-quart)] motion-reduce:transition-none", "text-fg-secondary hover:bg-surface-inset hover:text-fg", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-base", "disabled:opacity-50 disabled:pointer-events-none", "aria-disabled:opacity-50 aria-disabled:pointer-events-none", "data-[active=true]:bg-surface-inset data-[active=true]:font-medium data-[active=true]:text-fg", "[&>svg]:size-4 [&>svg]:shrink-0 [&>span:last-child]:truncate", 
+// Icon-collapsed: square button, hide text labels.
+"group-data-[collapsible=icon]/sidebar:size-8 group-data-[collapsible=icon]/sidebar:justify-center group-data-[collapsible=icon]/sidebar:p-0", "group-data-[collapsible=icon]/sidebar:[&>span:last-child]:hidden"), {
+    variants: {
+        size: {
+            sm: "h-7 px-2 text-xs",
+            md: "h-8 px-2",
+            lg: "h-10 px-2.5",
+        },
+    },
+    defaultVariants: { size: "md" },
+});
+export const SidebarMenuButton = forwardRef(({ className, asChild = false, isActive = false, size, tooltip, type, ...props }, ref) => {
+    const { state, isMobile } = useSidebar();
+    const Comp = asChild ? Slot : "button";
+    const button = (_jsx(Comp, { ref: ref, type: asChild ? undefined : (type ?? "button"), "data-slot": "sidebar-menu-button", "data-active": isActive, "aria-current": isActive ? "page" : undefined, className: cn(sidebarMenuButtonVariants({ size }), className), ...props }));
+    // No tooltip needed when expanded or on mobile (labels are visible).
+    if (!tooltip || state !== "collapsed" || isMobile) {
+        return button;
+    }
+    // A plain object with `children` (and not a React element) is treated as
+    // full TooltipContent props; anything else is used directly as the label.
+    const isPropsForm = typeof tooltip === "object" &&
+        tooltip !== null &&
+        !isValidElement(tooltip) &&
+        "children" in tooltip;
+    const tooltipProps = isPropsForm
+        ? tooltip
+        : { children: tooltip };
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: button }), _jsx(TooltipContent, { side: "right", align: "center", ...tooltipProps })] }));
+});
+SidebarMenuButton.displayName = "SidebarMenuButton";
+/* ------------------------------------------------------------------ *
+ * Menu sub
+ * ------------------------------------------------------------------ */
+export const SidebarMenuSub = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("ul", { ref: ref, "data-slot": "sidebar-menu-sub", className: cn("ml-3.5 flex min-w-0 flex-col gap-1 border-l border-border pl-2.5 py-0.5", "group-data-[collapsible=icon]/sidebar:hidden", className), ...props }));
+});
+SidebarMenuSub.displayName = "SidebarMenuSub";
+export const SidebarMenuSubItem = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("li", { ref: ref, "data-slot": "sidebar-menu-sub-item", className: cn("group/menu-sub-item relative", className), ...props }));
+});
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
+export const SidebarMenuSubButton = forwardRef(({ className, asChild = false, isActive = false, size = "md", type, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (_jsx(Comp, { ref: ref, type: asChild ? undefined : (type ?? "button"), "data-slot": "sidebar-menu-sub-button", "data-active": isActive, "aria-current": isActive ? "page" : undefined, className: cn("flex min-w-0 items-center gap-2 overflow-hidden rounded-md px-2 text-fg-tertiary", "transition-[background,color,box-shadow] duration-150 ease-[var(--ease-out-quart)] motion-reduce:transition-none", "hover:bg-surface-inset hover:text-fg outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-base", "disabled:opacity-50 disabled:pointer-events-none", "aria-disabled:opacity-50 aria-disabled:pointer-events-none", "data-[active=true]:text-fg data-[active=true]:font-medium", "[&>svg]:size-4 [&>svg]:shrink-0 [&>span:last-child]:truncate", size === "sm" ? "h-6 text-xs" : "h-7 text-sm", "group-data-[collapsible=icon]/sidebar:hidden", className), ...props }));
+});
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
+export { sidebarMenuButtonVariants };
+//# sourceMappingURL=sidebar.js.map

package/dist/components/signature-pad.d.ts

@@ -0,0 +1,44 @@
+import { type HTMLAttributes } from "react";
+/** Imperative surface exposed through the forwarded ref. */
+export interface SignaturePadHandle {
+    /** Erase every stroke and notify `onChange` with `null`. */
+    clear: () => void;
+    /** Remove the most recent stroke and re-notify `onChange`. */
+    undo: () => void;
+    /** `true` while no ink has been laid down on the pad. */
+    isEmpty: () => boolean;
+    /** Snapshot the current drawing as a data URL (`null` while the pad is empty). */
+    toDataURL: (type?: string, quality?: number) => string | null;
+}
+export interface SignaturePadProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /**
+     * Fired when a stroke is committed, undone, or the pad is cleared. Receives a
+     * PNG data URL of the drawing, or `null` once the pad is empty again.
+     */
+    onChange?: (dataUrl: string | null) => void;
+    /** Freezes the pad: pointer input is ignored and the overlay actions disable. */
+    disabled?: boolean;
+}
+/**
+ * A canvas signature input. Pointer events (mouse / touch / pen) are captured
+ * on the canvas and rendered as midpoint-smoothed quadratic curves: every raw
+ * sample is used as a control point between successive midpoints, so shaky
+ * input still produces a fluid line. Pointer moves never touch React state —
+ * samples are queued in refs and painted inside a single pending
+ * `requestAnimationFrame`, so drawing costs zero re-renders.
+ *
+ * The bitmap is `devicePixelRatio`-aware: a `ResizeObserver` resizes the
+ * backing store to CSS-size × DPR and replays the stroke model (strokes are
+ * stored in CSS pixels), so the ink stays crisp on retina displays and
+ * survives layout changes. Ink color is resolved from the wrapper's computed
+ * CSS `color` at stroke time, so the line follows the `text-fg` token (and
+ * re-resolves per stroke after theme switches).
+ *
+ * The forwarded ref exposes an imperative API — `clear()`, `undo()`,
+ * `isEmpty()`, `toDataURL()` — and `onChange` reports a PNG data URL (or
+ * `null` when empty) whenever a stroke is committed, undone, or cleared. A
+ * dashed "Sign here" baseline fades away once drawing starts
+ * (`motion-reduce` disables the fade transition).
+ */
+export declare const SignaturePad: import("react").ForwardRefExoticComponent<SignaturePadProps & import("react").RefAttributes<SignaturePadHandle>>;
+//# sourceMappingURL=signature-pad.d.ts.map

package/dist/components/signature-pad.js

@@ -0,0 +1,317 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Eraser, Undo2 } from "lucide-react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState, } from "react";
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+const STROKE_WIDTH = 2;
+function midpoint(a, b) {
+    return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+}
+function pointFromEvent(canvas, event) {
+    const rect = canvas.getBoundingClientRect();
+    return { x: event.clientX - rect.left, y: event.clientY - rect.top };
+}
+/**
+ * Replays one recorded stroke with the exact same midpoint-quadratic math the
+ * live pointer path uses: each raw sample becomes the *control* point of a
+ * quadratic segment that runs between successive midpoints, which rounds off
+ * the polyline corners jittery pointer input would otherwise leave behind. A
+ * lone sample renders as a dot so a tap still leaves a mark. Returns the
+ * trailing midpoint so an in-progress stroke can resume from it after a
+ * resize-triggered repaint.
+ */
+function traceStroke(ctx, stroke) {
+    const first = stroke[0];
+    if (!first)
+        return null;
+    ctx.beginPath();
+    ctx.arc(first.x, first.y, STROKE_WIDTH / 2, 0, Math.PI * 2);
+    ctx.fill();
+    let prev = first;
+    let lastMid = first;
+    for (let index = 1; index < stroke.length; index += 1) {
+        const point = stroke[index];
+        if (!point)
+            continue;
+        const mid = midpoint(prev, point);
+        ctx.beginPath();
+        ctx.moveTo(lastMid.x, lastMid.y);
+        ctx.quadraticCurveTo(prev.x, prev.y, mid.x, mid.y);
+        ctx.stroke();
+        prev = point;
+        lastMid = mid;
+    }
+    if (stroke.length > 1) {
+        // The curve chain stops at the trailing midpoint; cap it to the final sample.
+        ctx.beginPath();
+        ctx.moveTo(lastMid.x, lastMid.y);
+        ctx.lineTo(prev.x, prev.y);
+        ctx.stroke();
+    }
+    return lastMid;
+}
+/**
+ * A canvas signature input. Pointer events (mouse / touch / pen) are captured
+ * on the canvas and rendered as midpoint-smoothed quadratic curves: every raw
+ * sample is used as a control point between successive midpoints, so shaky
+ * input still produces a fluid line. Pointer moves never touch React state —
+ * samples are queued in refs and painted inside a single pending
+ * `requestAnimationFrame`, so drawing costs zero re-renders.
+ *
+ * The bitmap is `devicePixelRatio`-aware: a `ResizeObserver` resizes the
+ * backing store to CSS-size × DPR and replays the stroke model (strokes are
+ * stored in CSS pixels), so the ink stays crisp on retina displays and
+ * survives layout changes. Ink color is resolved from the wrapper's computed
+ * CSS `color` at stroke time, so the line follows the `text-fg` token (and
+ * re-resolves per stroke after theme switches).
+ *
+ * The forwarded ref exposes an imperative API — `clear()`, `undo()`,
+ * `isEmpty()`, `toDataURL()` — and `onChange` reports a PNG data URL (or
+ * `null` when empty) whenever a stroke is committed, undone, or cleared. A
+ * dashed "Sign here" baseline fades away once drawing starts
+ * (`motion-reduce` disables the fade transition).
+ */
+export const SignaturePad = forwardRef(({ className, onChange, disabled = false, "aria-label": ariaLabel = "Signature pad", ...props }, ref) => {
+    const wrapperRef = useRef(null);
+    const canvasRef = useRef(null);
+    const ctxRef = useRef(null);
+    /** Committed strokes, in CSS-pixel coordinates (the resize replay source). */
+    const strokesRef = useRef([]);
+    /** The stroke currently being drawn (`null` when the pointer is up). */
+    const currentStrokeRef = useRef(null);
+    /** Index of the first sample of the current stroke not yet painted. */
+    const paintedIndexRef = useRef(0);
+    /** Trailing midpoint of the painted curve chain (next segment starts here). */
+    const lastMidRef = useRef(null);
+    const pointerIdRef = useRef(null);
+    const frameRef = useRef(null);
+    const [hasInk, setHasInk] = useState(false);
+    const onChangeRef = useRef(onChange);
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    });
+    const getContext = useCallback(() => {
+        if (!ctxRef.current && canvasRef.current) {
+            ctxRef.current = canvasRef.current.getContext("2d");
+        }
+        return ctxRef.current;
+    }, []);
+    /**
+     * Configures the brush, resolving the ink color from the wrapper's
+     * computed `color` so the stroke follows the surrounding text token.
+     */
+    const applyBrush = useCallback((ctx) => {
+        const wrapper = wrapperRef.current;
+        const color = (wrapper && typeof window !== "undefined" && window.getComputedStyle(wrapper).color) ||
+            "currentColor";
+        ctx.strokeStyle = color;
+        ctx.fillStyle = color;
+        ctx.lineWidth = STROKE_WIDTH;
+        ctx.lineCap = "round";
+        ctx.lineJoin = "round";
+    }, []);
+    /** Wipes the bitmap and replays the whole stroke model. */
+    const repaint = useCallback(() => {
+        const canvas = canvasRef.current;
+        const ctx = getContext();
+        if (!canvas || !ctx)
+            return;
+        ctx.save();
+        ctx.setTransform(1, 0, 0, 1, 0, 0);
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.restore();
+        applyBrush(ctx);
+        for (const stroke of strokesRef.current) {
+            traceStroke(ctx, stroke);
+        }
+        const current = currentStrokeRef.current;
+        if (current) {
+            lastMidRef.current = traceStroke(ctx, current);
+            paintedIndexRef.current = current.length;
+        }
+    }, [applyBrush, getContext]);
+    /** Paints every queued-but-unpainted sample of the in-progress stroke. */
+    const paintPending = useCallback(() => {
+        const ctx = getContext();
+        const stroke = currentStrokeRef.current;
+        if (!ctx || !stroke)
+            return;
+        for (let index = Math.max(1, paintedIndexRef.current); index < stroke.length; index += 1) {
+            const prev = stroke[index - 1];
+            const point = stroke[index];
+            if (!prev || !point)
+                continue;
+            const mid = midpoint(prev, point);
+            const from = lastMidRef.current ?? prev;
+            ctx.beginPath();
+            ctx.moveTo(from.x, from.y);
+            ctx.quadraticCurveTo(prev.x, prev.y, mid.x, mid.y);
+            ctx.stroke();
+            lastMidRef.current = mid;
+        }
+        paintedIndexRef.current = stroke.length;
+    }, [getContext]);
+    const scheduleFlush = useCallback(() => {
+        if (frameRef.current !== null)
+            return;
+        frameRef.current = requestAnimationFrame(() => {
+            frameRef.current = null;
+            paintPending();
+        });
+    }, [paintPending]);
+    const emitChange = useCallback(() => {
+        const handler = onChangeRef.current;
+        if (!handler)
+            return;
+        const canvas = canvasRef.current;
+        if (strokesRef.current.length === 0 || !canvas) {
+            handler(null);
+            return;
+        }
+        handler(canvas.toDataURL());
+    }, []);
+    // Size the backing store to CSS-size × devicePixelRatio (resizing a canvas
+    // erases it, so the strokes are replayed from the model afterwards).
+    useEffect(() => {
+        const wrapper = wrapperRef.current;
+        const canvas = canvasRef.current;
+        if (!wrapper || !canvas)
+            return;
+        const resize = () => {
+            const rect = wrapper.getBoundingClientRect();
+            const dpr = window.devicePixelRatio || 1;
+            canvas.width = Math.max(1, Math.round(rect.width * dpr));
+            canvas.height = Math.max(1, Math.round(rect.height * dpr));
+            // Scale so the drawing code works in CSS pixels at native sharpness.
+            getContext()?.setTransform(dpr, 0, 0, dpr, 0, 0);
+            repaint();
+        };
+        resize();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(resize);
+        observer.observe(wrapper);
+        return () => observer.disconnect();
+    }, [getContext, repaint]);
+    // Drop any pending paint frame on unmount.
+    useEffect(() => () => {
+        if (frameRef.current !== null)
+            cancelAnimationFrame(frameRef.current);
+    }, []);
+    const handlePointerDown = useCallback((event) => {
+        if (disabled)
+            return;
+        if (event.pointerType === "mouse" && event.button !== 0)
+            return;
+        const canvas = event.currentTarget;
+        const ctx = getContext();
+        if (!ctx)
+            return;
+        pointerIdRef.current = event.pointerId;
+        if (typeof canvas.setPointerCapture === "function") {
+            try {
+                canvas.setPointerCapture(event.pointerId);
+            }
+            catch {
+                // Some environments reject capture for synthetic pointers; the
+                // move/up handlers still work for in-bounds drawing without it.
+            }
+        }
+        const point = pointFromEvent(canvas, event);
+        currentStrokeRef.current = [point];
+        paintedIndexRef.current = 1;
+        lastMidRef.current = point;
+        applyBrush(ctx);
+        // Anchor dot so a tap leaves a mark even without any movement.
+        ctx.beginPath();
+        ctx.arc(point.x, point.y, STROKE_WIDTH / 2, 0, Math.PI * 2);
+        ctx.fill();
+        setHasInk(true);
+    }, [applyBrush, disabled, getContext]);
+    const handlePointerMove = useCallback((event) => {
+        const stroke = currentStrokeRef.current;
+        if (!stroke || event.pointerId !== pointerIdRef.current)
+            return;
+        const canvas = event.currentTarget;
+        const native = event.nativeEvent;
+        // Pens and high-rate mice batch samples between frames; unpack them so
+        // fast flourishes keep their curvature instead of turning into chords.
+        const coalesced = typeof native.getCoalescedEvents === "function" ? native.getCoalescedEvents() : [];
+        const samples = coalesced.length > 0 ? coalesced : [native];
+        for (const sample of samples) {
+            stroke.push(pointFromEvent(canvas, sample));
+        }
+        scheduleFlush();
+    }, [scheduleFlush]);
+    const finishStroke = useCallback((event) => {
+        if (event.pointerId !== pointerIdRef.current)
+            return;
+        const stroke = currentStrokeRef.current;
+        if (!stroke)
+            return;
+        if (frameRef.current !== null) {
+            cancelAnimationFrame(frameRef.current);
+            frameRef.current = null;
+        }
+        paintPending();
+        const ctx = getContext();
+        const last = stroke[stroke.length - 1];
+        const lastMid = lastMidRef.current;
+        if (ctx && last && lastMid && stroke.length > 1) {
+            // Cap the curve chain through to the final sample (mirrors traceStroke).
+            ctx.beginPath();
+            ctx.moveTo(lastMid.x, lastMid.y);
+            ctx.lineTo(last.x, last.y);
+            ctx.stroke();
+        }
+        strokesRef.current.push(stroke);
+        currentStrokeRef.current = null;
+        pointerIdRef.current = null;
+        lastMidRef.current = null;
+        const canvas = event.currentTarget;
+        if (typeof canvas.releasePointerCapture === "function") {
+            try {
+                canvas.releasePointerCapture(event.pointerId);
+            }
+            catch {
+                // Capture may already be gone (e.g. pointercancel); nothing to undo.
+            }
+        }
+        emitChange();
+    }, [emitChange, getContext, paintPending]);
+    const clear = useCallback(() => {
+        if (strokesRef.current.length === 0 && !currentStrokeRef.current)
+            return;
+        strokesRef.current = [];
+        currentStrokeRef.current = null;
+        pointerIdRef.current = null;
+        lastMidRef.current = null;
+        repaint();
+        setHasInk(false);
+        emitChange();
+    }, [emitChange, repaint]);
+    const undo = useCallback(() => {
+        if (strokesRef.current.length === 0)
+            return;
+        strokesRef.current = strokesRef.current.slice(0, -1);
+        repaint();
+        setHasInk(strokesRef.current.length > 0 || currentStrokeRef.current !== null);
+        emitChange();
+    }, [emitChange, repaint]);
+    useImperativeHandle(ref, () => ({
+        clear,
+        undo,
+        isEmpty: () => strokesRef.current.length === 0 && currentStrokeRef.current === null,
+        toDataURL: (type, quality) => {
+            const canvas = canvasRef.current;
+            if (!canvas || (strokesRef.current.length === 0 && !currentStrokeRef.current)) {
+                return null;
+            }
+            return canvas.toDataURL(type, quality);
+        },
+    }), [clear, undo]);
+    return (_jsxs("div", { ref: wrapperRef, "data-slot": "signature-pad", "data-empty": hasInk ? "false" : "true", "data-disabled": disabled ? "true" : undefined, className: cn("relative h-40 w-full touch-none overflow-hidden rounded-xl border border-border bg-surface-inset text-fg shadow-xs", disabled && "opacity-60", className), ...props, children: [_jsx("canvas", { ref: canvasRef, role: "img", "aria-label": ariaLabel, "aria-disabled": disabled || undefined, "data-slot": "signature-pad-canvas", className: cn("absolute inset-0 size-full", disabled ? "cursor-not-allowed" : "cursor-crosshair"), onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: finishStroke, onPointerCancel: finishStroke }), _jsxs("div", { "aria-hidden": "true", "data-slot": "signature-pad-hint", className: cn("pointer-events-none absolute inset-x-5 bottom-7 select-none transition-opacity duration-300 motion-reduce:transition-none", hasInk ? "opacity-0" : "opacity-100"), children: [_jsx("div", { className: "border-t border-dashed border-border-strong" }), _jsx("span", { className: "mt-1.5 block text-xs text-fg-muted", children: "Sign here" })] }), _jsxs("div", { className: "absolute right-1.5 bottom-1.5 flex gap-1", children: [_jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "Undo last stroke", disabled: disabled || !hasInk, onClick: undo, children: _jsx(Undo2, { "aria-hidden": "true" }) }), _jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "Clear signature", disabled: disabled || !hasInk, onClick: clear, children: _jsx(Eraser, { "aria-hidden": "true" }) })] })] }));
+});
+SignaturePad.displayName = "SignaturePad";
+//# sourceMappingURL=signature-pad.js.map

package/dist/components/skeleton.d.ts

@@ -0,0 +1,3 @@
+import { type HTMLAttributes } from "react";
+export declare const Skeleton: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=skeleton.d.ts.map