doodleui-react 0.1.1 → 0.3.0

package/dist/index.js

@@ -1,11 +1,19 @@
 "use client";
-import { createContext, forwardRef, useState, useId, useRef, useLayoutEffect, useContext, useCallback, useMemo } from 'react';
+import { createContext, forwardRef, useRef, useState, useId, useLayoutEffect, useContext, Children, isValidElement, cloneElement, useEffect, useSyncExternalStore, useCallback, useMemo } from 'react';
 import rough from 'roughjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as Dialog from '@radix-ui/react-dialog';
+import { motion, AnimatePresence } from 'framer-motion';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as ToastPrimitive from '@radix-ui/react-toast';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import * as SliderPrimitive from '@radix-ui/react-slider';
 
 // src/types.ts
 function toRoughOptions(props) {
@@ -41,6 +49,11 @@ var SKETCH_COLORS = {
 };
 
 // src/utils.ts
+function assignRef(ref, value) {
+  if (!ref) return;
+  if (typeof ref === "function") ref(value);
+  else ref.current = value;
+}
 function randomSeed() {
   return Math.floor(Math.random() * 2 ** 31);
 }
@@ -60,6 +73,13 @@ function cn(...parts) {
   const value = parts.filter(Boolean).join(" ");
   return value.length > 0 ? value : void 0;
 }
+function deriveSeed(base, key) {
+  let hash = 0;
+  for (let i = 0; i < key.length; i += 1) {
+    hash = hash * 31 + key.charCodeAt(i) | 0;
+  }
+  return (base + (hash >>> 0)) % 2 ** 31;
+}
 var SketchSeedContext = createContext(null);
 function SketchSeedProvider({
   children,
@@ -234,6 +254,177 @@ function RoughSvg({
     }
   );
 }
+var DoodleUIContext = createContext(null);
+function DoodleUIProvider({
+  children,
+  animate = true,
+  forceAnimate = false
+}) {
+  const value = useMemo(
+    () => ({ animate, forceAnimate }),
+    [animate, forceAnimate]
+  );
+  return /* @__PURE__ */ jsx(DoodleUIContext.Provider, { value, children });
+}
+function useDoodleUI() {
+  return useContext(DoodleUIContext) ?? { animate: true, forceAnimate: false };
+}
+
+// src/animations/resolveAnimate.ts
+function resolveAnimate({
+  animate,
+  providerAnimate = true,
+  forceAnimate = false,
+  prefersReducedMotion = false
+}) {
+  if (prefersReducedMotion && !forceAnimate) return false;
+  if (animate !== void 0) return animate;
+  return providerAnimate;
+}
+function subscribe(onStoreChange) {
+  const media = window.matchMedia("(prefers-reduced-motion: reduce)");
+  media.addEventListener("change", onStoreChange);
+  return () => media.removeEventListener("change", onStoreChange);
+}
+function getSnapshot() {
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function getServerSnapshot() {
+  return false;
+}
+function usePrefersReducedMotion() {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+
+// src/animations/useAnimate.ts
+function useAnimate(animate) {
+  const { animate: providerAnimate, forceAnimate } = useDoodleUI();
+  const prefersReducedMotion = usePrefersReducedMotion();
+  return resolveAnimate({
+    animate,
+    providerAnimate,
+    forceAnimate,
+    prefersReducedMotion
+  });
+}
+function useTweenNumber(target, enabled, duration = 400) {
+  const [value, setValue] = useState(target);
+  const valueRef = useRef(target);
+  valueRef.current = value;
+  useEffect(() => {
+    if (!enabled) {
+      valueRef.current = target;
+      setValue(target);
+      return;
+    }
+    const from = valueRef.current;
+    if (from === target) return;
+    const start = performance.now();
+    let frame = 0;
+    const tick = (now) => {
+      const t = Math.min(1, (now - start) / duration);
+      const eased = 1 - (1 - t) ** 3;
+      const next = from + (target - from) * eased;
+      valueRef.current = next;
+      setValue(next);
+      if (t < 1) frame = requestAnimationFrame(tick);
+    };
+    frame = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(frame);
+  }, [target, enabled, duration]);
+  return enabled ? value : target;
+}
+var DRAW_IN_DURATION_MS = 400;
+var DRAW_IN_ALERT_MS = 200;
+var DRAW_IN_TOOLTIP_MS = 180;
+var DRAW_IN_MARK_MS = 240;
+var TABLE_STAGGER_MS = 40;
+var DRAW_IN_EASING = "ease-out";
+var running = /* @__PURE__ */ new WeakMap();
+function collectStrokePaths(root) {
+  const groups = root.querySelectorAll("g");
+  if (groups.length > 0) {
+    const paths = [];
+    groups.forEach((group) => {
+      const children = group.querySelectorAll(":scope > path");
+      if (children.length === 0) return;
+      paths.push(children[children.length - 1]);
+    });
+    return paths;
+  }
+  return Array.from(root.querySelectorAll("path"));
+}
+function getStrokePaths(target) {
+  if (target instanceof SVGPathElement) return [target];
+  if (target instanceof SVGSVGElement) return collectStrokePaths(target);
+  const svgs = target.querySelectorAll("svg");
+  if (svgs.length > 0) {
+    return Array.from(svgs).flatMap((svg) => collectStrokePaths(svg));
+  }
+  return collectStrokePaths(target);
+}
+function clearDash(path) {
+  path.style.strokeDasharray = "";
+  path.style.strokeDashoffset = "";
+}
+function cancelDrawIn(target) {
+  if (!target) return;
+  const animations = running.get(target);
+  animations?.forEach((animation) => animation.cancel());
+  running.delete(target);
+  getStrokePaths(target).forEach(clearDash);
+}
+function drawIn(target, duration = DRAW_IN_DURATION_MS, delay = 0) {
+  cancelDrawIn(target);
+  const paths = getStrokePaths(target);
+  const animations = [];
+  for (const path of paths) {
+    let length = 0;
+    try {
+      length = path.getTotalLength();
+    } catch {
+      continue;
+    }
+    if (length <= 0) continue;
+    path.style.strokeDasharray = `${length}`;
+    path.style.strokeDashoffset = `${length}`;
+    const animation = path.animate(
+      [{ strokeDashoffset: String(length) }, { strokeDashoffset: "0" }],
+      { duration, delay, easing: DRAW_IN_EASING, fill: "forwards" }
+    );
+    animation.finished.then(() => {
+      clearDash(path);
+    }).catch(() => {
+    });
+    animations.push(animation);
+  }
+  running.set(target, animations);
+}
+function useDrawIn(pathRef, duration = DRAW_IN_DURATION_MS, enabled = true, replayKey, delay = 0) {
+  useLayoutEffect(() => {
+    const target = pathRef.current;
+    if (!target) return;
+    if (!enabled) {
+      cancelDrawIn(target);
+      return;
+    }
+    const apply = () => drawIn(target, duration, delay);
+    if (getStrokePaths(target).length > 0) {
+      apply();
+      return () => cancelDrawIn(target);
+    }
+    const observer = new MutationObserver(() => {
+      if (getStrokePaths(target).length === 0) return;
+      observer.disconnect();
+      apply();
+    });
+    observer.observe(target, { childList: true, subtree: true });
+    return () => {
+      observer.disconnect();
+      cancelDrawIn(target);
+    };
+  }, [pathRef, duration, enabled, replayKey, delay]);
+}
 var SketchBox = forwardRef(
   function SketchBox2({
     children,
@@ -252,12 +443,21 @@ var SketchBox = forwardRef(
     strokeWidth,
     inset,
     path,
+    animate,
+    drawInDuration = DRAW_IN_DURATION_MS,
+    drawInKey,
     ...rest
   }, ref) {
+    const rootRef = useRef(null);
+    const shouldAnimate = useAnimate(animate);
+    useDrawIn(rootRef, drawInDuration, shouldAnimate, drawInKey);
     return /* @__PURE__ */ jsxs(
       "div",
       {
-        ref,
+        ref: (node) => {
+          rootRef.current = node;
+          assignRef(ref, node);
+        },
         className: cn(className),
         style: { position: "relative", ...style },
         ...rest,
@@ -315,6 +515,10 @@ var SIZE_STYLES = {
   md: { fontSize: 15, padding: "8px 16px", minHeight: 38 },
   lg: { fontSize: 17, padding: "11px 22px", minHeight: 46 }
 };
+function assignRef2(ref, value) {
+  if (typeof ref === "function") ref(value);
+  else if (ref) ref.current = value;
+}
 var Button = forwardRef(
   function Button2({
     children,
@@ -329,18 +533,28 @@ var Button = forwardRef(
     fillStyle,
     strokeWidth,
     disabled,
+    animate,
     onMouseEnter,
     onMouseLeave,
     ...rest
   }, ref) {
+    const rootRef = useRef(null);
     const [hovered, setHovered] = useState(false);
+    const shouldAnimate = useAnimate(animate);
+    const resolvedSeed = useResolvedSeed(seed);
+    const hoverSeed = deriveSeed(resolvedSeed, "hover");
+    const sketchSeed = shouldAnimate && hovered && !disabled ? hoverSeed : resolvedSeed;
     const ink = sketchColor ?? SKETCH_COLORS.ink;
     const fill = variant === "primary" ? SKETCH_COLORS.accentFill : variant === "secondary" ? SKETCH_COLORS.secondaryFill : void 0;
     const stroke = variant === "ghost" && !hovered ? "transparent" : variant === "primary" ? sketchColor ?? SKETCH_COLORS.accent : ink;
+    useDrawIn(rootRef, DRAW_IN_DURATION_MS, shouldAnimate, sketchSeed);
     return /* @__PURE__ */ jsxs(
       "button",
       {
-        ref,
+        ref: (node) => {
+          rootRef.current = node;
+          assignRef2(ref, node);
+        },
         type: "button",
         className: cn(className),
         disabled,
@@ -376,12 +590,12 @@ var Button = forwardRef(
             {
               shape: "rectangle",
               roughness,
-              seed,
+              seed: sketchSeed,
               sketchColor: stroke,
               bowing,
               fillStyle: fillStyle ?? "hachure",
               fill,
-              strokeWidth: hovered ? (strokeWidth ?? 1.75) + 0.4 : strokeWidth
+              strokeWidth: !shouldAnimate && hovered ? (strokeWidth ?? 1.75) + 0.4 : strokeWidth
             }
           ),
           /* @__PURE__ */ jsx("span", { style: { position: "relative", zIndex: 1 }, children })
@@ -403,11 +617,18 @@ var Input = forwardRef(function Input2({
   id,
   onFocus,
   onBlur,
+  animate,
   ...rest
 }, ref) {
   const [focused, setFocused] = useState(false);
+  const fieldRef = useRef(null);
+  const shouldAnimate = useAnimate(animate);
+  const resolvedSeed = useResolvedSeed(seed);
+  const focusSeed = deriveSeed(resolvedSeed, "focus");
+  const sketchSeed = shouldAnimate && focused ? focusSeed : resolvedSeed;
   const ink = sketchColor ?? SKETCH_COLORS.ink;
   const inputId = id;
+  useDrawIn(fieldRef, DRAW_IN_DURATION_MS, shouldAnimate, sketchSeed);
   return /* @__PURE__ */ jsxs(
     "label",
     {
@@ -431,17 +652,17 @@ var Input = forwardRef(function Input2({
             children: label
           }
         ) : null,
-        /* @__PURE__ */ jsxs("span", { style: { position: "relative", display: "block" }, children: [
+        /* @__PURE__ */ jsxs("span", { ref: fieldRef, style: { position: "relative", display: "block" }, children: [
           /* @__PURE__ */ jsx(
             RoughSvg,
             {
               shape: "rectangle",
               roughness,
-              seed,
+              seed: sketchSeed,
               sketchColor: focused ? SKETCH_COLORS.accent : ink,
               bowing,
               fillStyle,
-              strokeWidth: focused ? (strokeWidth ?? 1.75) + 0.35 : strokeWidth
+              strokeWidth: focused && !shouldAnimate ? (strokeWidth ?? 1.75) + 0.35 : focused ? (strokeWidth ?? 1.75) + 0.2 : strokeWidth
             }
           ),
           /* @__PURE__ */ jsx(
@@ -495,10 +716,17 @@ var Textarea = forwardRef(
     rows = 4,
     onFocus,
     onBlur,
+    animate,
     ...rest
   }, ref) {
     const [focused, setFocused] = useState(false);
+    const fieldRef = useRef(null);
+    const shouldAnimate = useAnimate(animate);
+    const resolvedSeed = useResolvedSeed(seed);
+    const focusSeed = deriveSeed(resolvedSeed, "focus");
+    const sketchSeed = shouldAnimate && focused ? focusSeed : resolvedSeed;
     const ink = sketchColor ?? SKETCH_COLORS.ink;
+    useDrawIn(fieldRef, DRAW_IN_DURATION_MS, shouldAnimate, sketchSeed);
     return /* @__PURE__ */ jsxs(
       "label",
       {
@@ -522,17 +750,17 @@ var Textarea = forwardRef(
               children: label
             }
           ) : null,
-          /* @__PURE__ */ jsxs("span", { style: { position: "relative", display: "block" }, children: [
+          /* @__PURE__ */ jsxs("span", { ref: fieldRef, style: { position: "relative", display: "block" }, children: [
             /* @__PURE__ */ jsx(
               RoughSvg,
               {
                 shape: "rectangle",
                 roughness,
-                seed,
+                seed: sketchSeed,
                 sketchColor: focused ? SKETCH_COLORS.accent : ink,
                 bowing,
                 fillStyle,
-                strokeWidth: focused ? (strokeWidth ?? 1.75) + 0.35 : strokeWidth
+                strokeWidth: focused && !shouldAnimate ? (strokeWidth ?? 1.75) + 0.35 : focused ? (strokeWidth ?? 1.75) + 0.2 : strokeWidth
               }
             ),
             /* @__PURE__ */ jsx(
@@ -577,6 +805,36 @@ var Textarea = forwardRef(
 );
 var BOX = 20;
 var CHECK_PATH = "M 4.5 10.5 L 8.5 14.5 L 15.5 5.5";
+function CheckMark({
+  roughness,
+  seed,
+  bowing,
+  strokeWidth,
+  shouldAnimate
+}) {
+  const ref = useRef(null);
+  useDrawIn(ref, DRAW_IN_MARK_MS, shouldAnimate);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      style: { position: "absolute", inset: 0, pointerEvents: "none" },
+      children: /* @__PURE__ */ jsx(
+        RoughSvg,
+        {
+          shape: "path",
+          path: CHECK_PATH,
+          roughness: (roughness ?? 1.5) * 0.7,
+          seed,
+          sketchColor: SKETCH_COLORS.accent,
+          bowing,
+          strokeWidth: (strokeWidth ?? 1.6) + 0.4,
+          inset: 0
+        }
+      )
+    }
+  );
+}
 var Checkbox = forwardRef(
   function Checkbox2({
     className,
@@ -592,11 +850,15 @@ var Checkbox = forwardRef(
     defaultChecked,
     onCheckedChange,
     id,
+    animate,
     ...rest
   }, ref) {
     const ink = sketchColor ?? SKETCH_COLORS.ink;
     const generatedId = useId();
     const inputId = id ?? generatedId;
+    const boxRef = useRef(null);
+    const shouldAnimate = useAnimate(animate);
+    useDrawIn(boxRef, DRAW_IN_DURATION_MS, shouldAnimate);
     return /* @__PURE__ */ jsxs(
       "span",
       {
@@ -631,16 +893,23 @@ var Checkbox = forwardRef(
               ...rest,
               children: [
                 /* @__PURE__ */ jsx(
-                  RoughSvg,
+                  "span",
                   {
-                    shape: "rectangle",
-                    roughness,
-                    seed,
-                    sketchColor: ink,
-                    bowing,
-                    fillStyle,
-                    strokeWidth: strokeWidth ?? 1.6,
-                    inset: 1.5
+                    ref: boxRef,
+                    style: { position: "absolute", inset: 0, pointerEvents: "none" },
+                    children: /* @__PURE__ */ jsx(
+                      RoughSvg,
+                      {
+                        shape: "rectangle",
+                        roughness,
+                        seed,
+                        sketchColor: ink,
+                        bowing,
+                        fillStyle,
+                        strokeWidth: strokeWidth ?? 1.6,
+                        inset: 1.5
+                      }
+                    )
                   }
                 ),
                 /* @__PURE__ */ jsx(
@@ -652,16 +921,13 @@ var Checkbox = forwardRef(
                       display: "block"
                     },
                     children: /* @__PURE__ */ jsx(
-                      RoughSvg,
+                      CheckMark,
                       {
-                        shape: "path",
-                        path: CHECK_PATH,
-                        roughness: (roughness ?? 1.5) * 0.7,
+                        roughness,
                         seed,
-                        sketchColor: SKETCH_COLORS.accent,
                         bowing,
-                        strokeWidth: (strokeWidth ?? 1.6) + 0.4,
-                        inset: 0
+                        strokeWidth,
+                        shouldAnimate
                       }
                     )
                   }
@@ -702,6 +968,53 @@ var RadioGroup = forwardRef(
   }
 );
 var SIZE = 20;
+function RadioDot({
+  roughness,
+  seed,
+  bowing,
+  shouldAnimate
+}) {
+  const ref = useRef(null);
+  useDrawIn(ref, DRAW_IN_MARK_MS, shouldAnimate);
+  useLayoutEffect(() => {
+    const node = ref.current;
+    if (!node || !shouldAnimate) return;
+    const animation = node.animate(
+      [
+        { transform: "scale(0.35)", opacity: 0 },
+        { transform: "scale(1)", opacity: 1 }
+      ],
+      { duration: 180, easing: "ease-out", fill: "forwards" }
+    );
+    return () => animation.cancel();
+  }, [shouldAnimate]);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      style: {
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        display: "block"
+      },
+      children: /* @__PURE__ */ jsx(
+        RoughSvg,
+        {
+          shape: "ellipse",
+          roughness: (roughness ?? 1.5) + 0.2,
+          seed,
+          sketchColor: SKETCH_COLORS.accent,
+          fill: SKETCH_COLORS.accent,
+          fillStyle: "solid",
+          bowing,
+          strokeWidth: 1,
+          inset: 6
+        }
+      )
+    }
+  );
+}
 var Radio = forwardRef(function Radio2({
   className,
   style,
@@ -713,11 +1026,15 @@ var Radio = forwardRef(function Radio2({
   fillStyle,
   strokeWidth,
   id,
+  animate,
   ...rest
 }, ref) {
   const ink = sketchColor ?? SKETCH_COLORS.ink;
   const generatedId = useId();
   const inputId = id ?? generatedId;
+  const ringRef = useRef(null);
+  const shouldAnimate = useAnimate(animate);
+  useDrawIn(ringRef, DRAW_IN_DURATION_MS, shouldAnimate);
   return /* @__PURE__ */ jsxs(
     "span",
     {
@@ -750,16 +1067,23 @@ var Radio = forwardRef(function Radio2({
             ...rest,
             children: [
               /* @__PURE__ */ jsx(
-                RoughSvg,
+                "span",
                 {
-                  shape: "ellipse",
-                  roughness,
-                  seed,
-                  sketchColor: ink,
-                  bowing,
-                  fillStyle,
-                  strokeWidth: strokeWidth ?? 1.6,
-                  inset: 1.5
+                  ref: ringRef,
+                  style: { position: "absolute", inset: 0, pointerEvents: "none" },
+                  children: /* @__PURE__ */ jsx(
+                    RoughSvg,
+                    {
+                      shape: "ellipse",
+                      roughness,
+                      seed,
+                      sketchColor: ink,
+                      bowing,
+                      fillStyle,
+                      strokeWidth: strokeWidth ?? 1.6,
+                      inset: 1.5
+                    }
+                  )
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -771,17 +1095,12 @@ var Radio = forwardRef(function Radio2({
                     display: "block"
                   },
                   children: /* @__PURE__ */ jsx(
-                    RoughSvg,
+                    RadioDot,
                     {
-                      shape: "ellipse",
-                      roughness: (roughness ?? 1.5) + 0.2,
+                      roughness,
                       seed,
-                      sketchColor: SKETCH_COLORS.accent,
-                      fill: SKETCH_COLORS.accent,
-                      fillStyle: "solid",
                       bowing,
-                      strokeWidth: 1,
-                      inset: 6
+                      shouldAnimate
                     }
                   )
                 }
@@ -815,6 +1134,7 @@ var Card = forwardRef(function Card2({
   bowing,
   fillStyle,
   strokeWidth,
+  animate,
   ...rest
 }, ref) {
   const boxProps = {
@@ -825,7 +1145,8 @@ var Card = forwardRef(function Card2({
     sketchColor: sketchColor ?? SKETCH_COLORS.ink,
     bowing,
     fillStyle,
-    strokeWidth
+    strokeWidth,
+    animate
   };
   return /* @__PURE__ */ jsxs(
     SketchBox,
@@ -865,6 +1186,7 @@ var Badge = forwardRef(function Badge2({
   bowing,
   fillStyle,
   strokeWidth,
+  animate,
   ...rest
 }, ref) {
   const ink = variant === "accent" ? sketchColor ?? SKETCH_COLORS.accent : sketchColor ?? SKETCH_COLORS.ink;
@@ -892,6 +1214,7 @@ var Badge = forwardRef(function Badge2({
       sketchColor: ink,
       bowing,
       strokeWidth: strokeWidth ?? 1.4,
+      animate,
       ...rest,
       children: /* @__PURE__ */ jsx("span", { ref, children })
     }
@@ -922,6 +1245,7 @@ var Alert = forwardRef(function Alert2({
   fillStyle,
   strokeWidth,
   role = "status",
+  animate,
   ...rest
 }, ref) {
   const color = sketchColor ?? VARIANT_COLOR[variant];
@@ -940,6 +1264,8 @@ var Alert = forwardRef(function Alert2({
       fillStyle: fillStyle ?? "hachure",
       fill: VARIANT_FILL[variant],
       strokeWidth,
+      animate,
+      drawInDuration: DRAW_IN_ALERT_MS,
       ...rest,
       children: [
         title ? /* @__PURE__ */ jsx(
@@ -972,15 +1298,27 @@ function Modal({
   sketchColor,
   bowing,
   fillStyle,
-  strokeWidth
+  strokeWidth,
+  animate
 }) {
   const ink = sketchColor ?? SKETCH_COLORS.ink;
-  return /* @__PURE__ */ jsxs(Dialog.Root, { open, defaultOpen, onOpenChange, children: [
+  const [uncontrolled, setUncontrolled] = useState(defaultOpen === true);
+  const isOpen = open ?? uncontrolled;
+  const shouldAnimate = useAnimate(animate);
+  function handleOpenChange(next) {
+    setUncontrolled(next);
+    onOpenChange?.(next);
+  }
+  return /* @__PURE__ */ jsxs(Dialog.Root, { open: isOpen, onOpenChange: handleOpenChange, children: [
     trigger ? /* @__PURE__ */ jsx(Dialog.Trigger, { asChild: true, children: trigger }) : null,
-    /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
-      /* @__PURE__ */ jsx(
-        Dialog.Overlay,
+    /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen ? /* @__PURE__ */ jsxs(Dialog.Portal, { forceMount: true, children: [
+      /* @__PURE__ */ jsx(Dialog.Overlay, { asChild: true, forceMount: true, children: /* @__PURE__ */ jsx(
+        motion.div,
         {
+          initial: shouldAnimate ? { opacity: 0 } : false,
+          animate: { opacity: 1 },
+          exit: shouldAnimate ? { opacity: 0 } : void 0,
+          transition: shouldAnimate ? { duration: 0.2, ease: "easeOut" } : { duration: 0 },
           style: {
             position: "fixed",
             inset: 0,
@@ -988,92 +1326,121 @@ function Modal({
             zIndex: 70
           }
         }
-      ),
+      ) }),
       /* @__PURE__ */ jsx(
-        Dialog.Content,
+        "div",
         {
-          className: cn(className),
           style: {
             position: "fixed",
-            left: "50%",
-            top: "50%",
-            transform: "translate(-50%, -50%)",
+            inset: 0,
             zIndex: 80,
-            width: "min(480px, calc(100vw - 32px))",
-            outline: "none"
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            pointerEvents: "none",
+            padding: 16
           },
-          children: /* @__PURE__ */ jsxs(
-            SketchBox,
+          children: /* @__PURE__ */ jsx(Dialog.Content, { asChild: true, forceMount: true, children: /* @__PURE__ */ jsx(
+            motion.div,
             {
-              roughness,
-              seed,
-              sketchColor: ink,
-              bowing,
-              fillStyle: fillStyle ?? "solid",
-              fill: "#f7f6f2",
-              strokeWidth: strokeWidth ?? 2,
-              shadow: true,
-              contentStyle: { padding: "20px 22px 18px" },
-              children: [
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    style: {
-                      display: "flex",
-                      alignItems: "flex-start",
-                      justifyContent: "space-between",
-                      gap: 12,
-                      marginBottom: title ? 10 : 0
-                    },
-                    children: [
-                      title ? /* @__PURE__ */ jsx(
-                        Dialog.Title,
-                        {
-                          style: {
-                            margin: 0,
-                            fontSize: 18,
-                            fontWeight: doodleUiFontWeight(700),
-                            fontFamily: doodleUiFontFamily,
-                            color: ink
-                          },
-                          children: title
-                        }
-                      ) : /* @__PURE__ */ jsx(Dialog.Title, { style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }, children: "Dialog" }),
-                      /* @__PURE__ */ jsx(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(
-                        Button,
-                        {
-                          variant: "ghost",
-                          size: "sm",
-                          roughness,
-                          seed,
-                          sketchColor: ink,
-                          "aria-label": "Close",
-                          children: "Close"
-                        }
-                      ) })
-                    ]
-                  }
-                ),
-                description ? /* @__PURE__ */ jsx(
-                  Dialog.Description,
-                  {
-                    style: {
-                      margin: "0 0 14px",
-                      fontSize: 14,
-                      lineHeight: 1.5,
-                      color: ink,
-                      opacity: 0.8
-                    },
-                    children: description
-                  }
-                ) : null,
-                /* @__PURE__ */ jsx("div", { children })
-              ]
+              className: cn(className),
+              initial: shouldAnimate ? { opacity: 0, scale: 0.96, y: 10 } : false,
+              animate: { opacity: 1, scale: 1, y: 0 },
+              exit: shouldAnimate ? { opacity: 0, scale: 0.96, y: 8 } : void 0,
+              transition: shouldAnimate ? { duration: 0.22, ease: "easeOut" } : { duration: 0 },
+              style: {
+                width: "min(480px, calc(100vw - 32px))",
+                outline: "none",
+                pointerEvents: "auto"
+              },
+              children: /* @__PURE__ */ jsxs(
+                SketchBox,
+                {
+                  roughness,
+                  seed,
+                  sketchColor: ink,
+                  bowing,
+                  fillStyle: fillStyle ?? "solid",
+                  fill: "#f7f6f2",
+                  strokeWidth: strokeWidth ?? 2,
+                  shadow: true,
+                  animate,
+                  contentStyle: { padding: "20px 22px 18px" },
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "flex-start",
+                          justifyContent: "space-between",
+                          gap: 12,
+                          marginBottom: title ? 10 : 0
+                        },
+                        children: [
+                          title ? /* @__PURE__ */ jsx(
+                            Dialog.Title,
+                            {
+                              style: {
+                                margin: 0,
+                                fontSize: 18,
+                                fontWeight: doodleUiFontWeight(700),
+                                fontFamily: doodleUiFontFamily,
+                                color: ink
+                              },
+                              children: title
+                            }
+                          ) : /* @__PURE__ */ jsx(
+                            Dialog.Title,
+                            {
+                              style: {
+                                position: "absolute",
+                                width: 1,
+                                height: 1,
+                                overflow: "hidden",
+                                clip: "rect(0 0 0 0)"
+                              },
+                              children: "Dialog"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(
+                            Button,
+                            {
+                              variant: "ghost",
+                              size: "sm",
+                              roughness,
+                              seed,
+                              sketchColor: ink,
+                              animate,
+                              "aria-label": "Close",
+                              children: "Close"
+                            }
+                          ) })
+                        ]
+                      }
+                    ),
+                    description ? /* @__PURE__ */ jsx(
+                      Dialog.Description,
+                      {
+                        style: {
+                          margin: "0 0 14px",
+                          fontSize: 14,
+                          lineHeight: 1.5,
+                          color: ink,
+                          opacity: 0.8
+                        },
+                        children: description
+                      }
+                    ) : null,
+                    /* @__PURE__ */ jsx("div", { children })
+                  ]
+                }
+              )
             }
-          )
+          ) })
         }
       )
-    ] })
+    ] }) : null })
   ] });
 }
 var ModalRoot = Dialog.Root;
@@ -1091,13 +1458,20 @@ var Divider = forwardRef(
     sketchColor,
     bowing,
     strokeWidth,
+    animate,
     ...rest
   }, ref) {
+    const rootRef = useRef(null);
+    const shouldAnimate = useAnimate(animate);
     const horizontal = orientation === "horizontal";
+    useDrawIn(rootRef, DRAW_IN_DURATION_MS, shouldAnimate);
     return /* @__PURE__ */ jsx(
       "div",
       {
-        ref,
+        ref: (node) => {
+          rootRef.current = node;
+          assignRef(ref, node);
+        },
         role: "separator",
         "aria-orientation": orientation,
         className: cn(className),
@@ -1137,15 +1511,27 @@ var Progress = forwardRef(
     bowing,
     fillStyle,
     strokeWidth,
+    animate,
     ...rest
   }, ref) {
+    const rootRef = useRef(null);
+    const trackRef = useRef(null);
     const ink = sketchColor ?? SKETCH_COLORS.accent;
     const clamped = Math.min(max, Math.max(0, value));
     const percent = max === 0 ? 0 : clamped / max * 100;
+    const shouldAnimate = useAnimate(animate);
+    const displayed = useTweenNumber(percent, shouldAnimate, 420);
+    const resolvedSeed = useResolvedSeed(seed);
+    const fillSeed = shouldAnimate ? deriveSeed(resolvedSeed, `fill-${Math.round(displayed / 6)}`) : resolvedSeed;
+    const fillRoughness = (roughness ?? 1.5) + 0.4 + displayed / 100 * 0.7;
+    useDrawIn(trackRef, DRAW_IN_DURATION_MS, shouldAnimate);
     return /* @__PURE__ */ jsxs(
       "div",
       {
-        ref,
+        ref: (node) => {
+          rootRef.current = node;
+          assignRef(ref, node);
+        },
         role: "progressbar",
         "aria-valuemin": 0,
         "aria-valuemax": max,
@@ -1160,18 +1546,25 @@ var Progress = forwardRef(
         ...rest,
         children: [
           /* @__PURE__ */ jsx(
-            RoughSvg,
+            "span",
             {
-              shape: "rectangle",
-              roughness,
-              seed,
-              sketchColor: SKETCH_COLORS.ink,
-              bowing,
-              strokeWidth: strokeWidth ?? 1.5,
-              inset: 2
+              ref: trackRef,
+              style: { position: "absolute", inset: 0, pointerEvents: "none" },
+              children: /* @__PURE__ */ jsx(
+                RoughSvg,
+                {
+                  shape: "rectangle",
+                  roughness,
+                  seed: resolvedSeed,
+                  sketchColor: SKETCH_COLORS.ink,
+                  bowing,
+                  strokeWidth: strokeWidth ?? 1.5,
+                  inset: 2
+                }
+              )
             }
           ),
-          percent > 0 ? /* @__PURE__ */ jsx(
+          displayed > 0 ? /* @__PURE__ */ jsx(
             "div",
             {
               style: {
@@ -1179,16 +1572,16 @@ var Progress = forwardRef(
                 left: 5,
                 top: 4,
                 bottom: 4,
-                width: `calc(${percent}% - 10px)`,
-                minWidth: percent > 0 ? 8 : 0,
+                width: `calc(${displayed}% - 10px)`,
+                minWidth: displayed > 0 ? 8 : 0,
                 overflow: "hidden"
               },
               children: /* @__PURE__ */ jsx(
                 RoughSvg,
                 {
                   shape: "rectangle",
-                  roughness: (roughness ?? 1.5) + 0.55,
-                  seed,
+                  roughness: fillRoughness,
+                  seed: fillSeed,
                   sketchColor: ink,
                   fill: ink,
                   fillStyle: fillStyle ?? "hachure",
@@ -1216,7 +1609,8 @@ function Tooltip({
   sketchColor,
   bowing,
   fillStyle,
-  strokeWidth
+  strokeWidth,
+  animate
 }) {
   const ink = sketchColor ?? SKETCH_COLORS.ink;
   return /* @__PURE__ */ jsxs(TooltipPrimitive.Root, { delayDuration, children: [
@@ -1238,6 +1632,8 @@ function Tooltip({
             fillStyle: fillStyle ?? "solid",
             fill: "#f7f6f2",
             strokeWidth: strokeWidth ?? 1.4,
+            animate,
+            drawInDuration: DRAW_IN_TOOLTIP_MS,
             contentStyle: {
               padding: "6px 10px",
               fontSize: 13,
@@ -1253,7 +1649,2055 @@ function Tooltip({
     ) })
   ] });
 }
+var CHEVRON_PATH = "M 4 6 L 10 12 L 16 6";
+var UNDERLINE_INSET = 4;
+var SelectSketchContext = createContext(
+  null
+);
+function useSelectSketch() {
+  const ctx = useContext(SelectSketchContext);
+  if (!ctx) {
+    throw new Error("Select parts must be used inside <Select>.");
+  }
+  return ctx;
+}
+function Select({
+  options,
+  placeholder = "Select\u2026",
+  className,
+  style,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  fillStyle,
+  strokeWidth,
+  value,
+  defaultValue,
+  onValueChange,
+  animate,
+  "aria-label": ariaLabel,
+  ...rest
+}) {
+  const [uncontrolled, setUncontrolled] = useState(defaultValue);
+  const selectedValue = value ?? uncontrolled;
+  const selectedLabel = options.find((option) => option.value === selectedValue)?.label;
+  const resolvedSeed = useResolvedSeed(seed);
+  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  return /* @__PURE__ */ jsx(
+    SelectSketchContext.Provider,
+    {
+      value: {
+        roughness,
+        seed: resolvedSeed,
+        sketchColor,
+        bowing,
+        fillStyle,
+        strokeWidth,
+        resolvedSeed,
+        ink,
+        selectedValue,
+        selectedLabel,
+        placeholder,
+        animate
+      },
+      children: /* @__PURE__ */ jsxs(
+        SelectPrimitive.Root,
+        {
+          value,
+          defaultValue,
+          onValueChange: (next) => {
+            setUncontrolled(next);
+            onValueChange?.(next);
+          },
+          ...rest,
+          children: [
+            /* @__PURE__ */ jsx(
+              SelectTrigger,
+              {
+                className,
+                style,
+                placeholder,
+                "aria-label": ariaLabel
+              }
+            ),
+            /* @__PURE__ */ jsx(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsx(
+              SelectItem,
+              {
+                value: option.value,
+                disabled: option.disabled,
+                children: option.label
+              },
+              option.value
+            )) })
+          ]
+        }
+      )
+    }
+  );
+}
+var SelectTrigger = forwardRef(
+  function SelectTrigger2({ className, style, placeholder, children, ...rest }, ref) {
+    const sketch = useSelectSketch();
+    const [openish, setOpenish] = useState(false);
+    const rootRef = useRef(null);
+    const shouldAnimate = useAnimate(sketch.animate);
+    useDrawIn(rootRef, DRAW_IN_DURATION_MS, shouldAnimate);
+    return /* @__PURE__ */ jsxs(
+      SelectPrimitive.Trigger,
+      {
+        ref: (node) => {
+          rootRef.current = node;
+          assignRef(ref, node);
+        },
+        className: cn(className),
+        onPointerDown: () => setOpenish(true),
+        onBlur: () => setOpenish(false),
+        style: {
+          position: "relative",
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: 12,
+          minWidth: 180,
+          minHeight: 38,
+          padding: "8px 12px",
+          border: "none",
+          background: "transparent",
+          cursor: "pointer",
+          color: sketch.ink,
+          fontFamily: doodleUiFontFamily,
+          fontSize: 15,
+          lineHeight: 1.2,
+          outline: "none",
+          textAlign: "left",
+          ...style
+        },
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            RoughSvg,
+            {
+              shape: "rectangle",
+              roughness: sketch.roughness,
+              seed: sketch.resolvedSeed,
+              sketchColor: openish ? SKETCH_COLORS.accent : sketch.ink,
+              bowing: sketch.bowing,
+              fillStyle: sketch.fillStyle,
+              strokeWidth: openish ? (sketch.strokeWidth ?? 1.75) + 0.35 : sketch.strokeWidth
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                position: "relative",
+                zIndex: 1,
+                flex: 1,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              },
+              children: children ?? sketch.selectedLabel ?? placeholder
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SelectPrimitive.Icon,
+            {
+              style: {
+                position: "relative",
+                zIndex: 1,
+                width: 18,
+                height: 18,
+                flexShrink: 0
+              },
+              children: /* @__PURE__ */ jsx(
+                RoughSvg,
+                {
+                  shape: "path",
+                  path: CHEVRON_PATH,
+                  roughness: (sketch.roughness ?? 1.5) * 0.7,
+                  seed: sketch.resolvedSeed,
+                  sketchColor: sketch.ink,
+                  bowing: sketch.bowing,
+                  strokeWidth: (sketch.strokeWidth ?? 1.6) + 0.2,
+                  inset: 0
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+var SelectContent = forwardRef(
+  function SelectContent2({ className, style, children, ...rest }, ref) {
+    const sketch = useSelectSketch();
+    return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+      SelectPrimitive.Content,
+      {
+        ref,
+        position: "popper",
+        sideOffset: 6,
+        className: cn(className),
+        style: {
+          zIndex: 80,
+          outline: "none",
+          minWidth: "var(--radix-select-trigger-width)",
+          ...style
+        },
+        ...rest,
+        children: /* @__PURE__ */ jsx(
+          SketchBox,
+          {
+            roughness: sketch.roughness,
+            seed: sketch.resolvedSeed,
+            sketchColor: sketch.ink,
+            bowing: sketch.bowing,
+            fillStyle: sketch.fillStyle ?? "solid",
+            fill: "#f7f6f2",
+            strokeWidth: sketch.strokeWidth ?? 1.5,
+            animate: sketch.animate,
+            contentStyle: { padding: "6px 4px" },
+            children: /* @__PURE__ */ jsx(SelectPrimitive.Viewport, { children })
+          }
+        )
+      }
+    ) });
+  }
+);
+var SelectItem = forwardRef(
+  function SelectItem2({ className, style, children, value, ...rest }, ref) {
+    const sketch = useSelectSketch();
+    const [highlighted, setHighlighted] = useState(false);
+    const selected = sketch.selectedValue === value;
+    const mark = highlighted || selected;
+    return /* @__PURE__ */ jsxs(
+      SelectPrimitive.Item,
+      {
+        ref,
+        value,
+        className: cn(className),
+        onPointerMove: () => setHighlighted(true),
+        onPointerLeave: () => setHighlighted(false),
+        onFocus: () => setHighlighted(true),
+        onBlur: () => setHighlighted(false),
+        style: {
+          position: "relative",
+          display: "flex",
+          alignItems: "center",
+          padding: "7px 12px",
+          fontFamily: doodleUiFontFamily,
+          fontSize: 14,
+          color: sketch.ink,
+          outline: "none",
+          cursor: "pointer",
+          userSelect: "none",
+          fontWeight: selected ? doodleUiFontWeight(650) : doodleUiFontWeight(400),
+          ...style
+        },
+        ...rest,
+        children: [
+          mark ? /* @__PURE__ */ jsx(
+            RoughSvg,
+            {
+              shape: "line",
+              roughness: (sketch.roughness ?? 1.5) + 0.4,
+              seed: sketch.resolvedSeed,
+              sketchColor: selected ? SKETCH_COLORS.accent : sketch.ink,
+              bowing: sketch.bowing ?? 1.6,
+              strokeWidth: selected ? 1.8 : 1.3,
+              inset: UNDERLINE_INSET,
+              style: { opacity: selected ? 0.9 : 0.45 }
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            SelectPrimitive.ItemText,
+            {
+              style: { position: "relative", zIndex: 1 },
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+var SelectRoot = SelectPrimitive.Root;
+var SelectValue = SelectPrimitive.Value;
+var SelectGroup = SelectPrimitive.Group;
+var SelectLabel = SelectPrimitive.Label;
+var SelectSeparator = SelectPrimitive.Separator;
+var TRACK_W = 44;
+var TRACK_H = 24;
+var THUMB = 18;
+var THUMB_OFF = 3;
+var THUMB_ON = TRACK_W - THUMB - 3;
+var Switch = forwardRef(
+  function Switch2({
+    className,
+    style,
+    label,
+    roughness,
+    seed,
+    sketchColor,
+    bowing,
+    fillStyle,
+    strokeWidth,
+    checked,
+    defaultChecked,
+    onCheckedChange,
+    id,
+    animate,
+    ...rest
+  }, ref) {
+    const [uncontrolled, setUncontrolled] = useState(defaultChecked === true);
+    const isOn = checked ?? uncontrolled;
+    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const resolvedSeed = useResolvedSeed(seed);
+    const shouldAnimate = useAnimate(animate);
+    const trackRef = useRef(null);
+    const trackSeed = shouldAnimate ? deriveSeed(resolvedSeed, isOn ? "on" : "off") : resolvedSeed;
+    useDrawIn(trackRef, DRAW_IN_DURATION_MS, shouldAnimate, trackSeed);
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(className),
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 8,
+          cursor: "pointer",
+          userSelect: "none",
+          ...style
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            SwitchPrimitive.Root,
+            {
+              ref,
+              id,
+              checked,
+              defaultChecked,
+              onCheckedChange: (next) => {
+                setUncontrolled(next);
+                onCheckedChange?.(next);
+              },
+              style: {
+                position: "relative",
+                width: TRACK_W,
+                height: TRACK_H,
+                padding: 0,
+                border: "none",
+                background: "transparent",
+                flexShrink: 0,
+                cursor: "pointer",
+                outline: "none"
+              },
+              ...rest,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    ref: trackRef,
+                    style: { position: "absolute", inset: 0, pointerEvents: "none" },
+                    children: /* @__PURE__ */ jsx(
+                      RoughSvg,
+                      {
+                        shape: "rectangle",
+                        roughness,
+                        seed: trackSeed,
+                        sketchColor: isOn ? SKETCH_COLORS.accent : ink,
+                        bowing: bowing ?? 1.4,
+                        fillStyle: fillStyle ?? (isOn ? "hachure" : void 0),
+                        fill: isOn ? SKETCH_COLORS.accentFill : void 0,
+                        strokeWidth: strokeWidth ?? 1.6,
+                        inset: 1.5
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, { asChild: true, children: /* @__PURE__ */ jsx(
+                  motion.span,
+                  {
+                    initial: false,
+                    animate: { x: isOn ? THUMB_ON : THUMB_OFF },
+                    transition: shouldAnimate ? { type: "spring", stiffness: 420, damping: 30 } : { duration: 0 },
+                    style: {
+                      position: "absolute",
+                      top: (TRACK_H - THUMB) / 2,
+                      left: 0,
+                      width: THUMB,
+                      height: THUMB,
+                      display: "block",
+                      zIndex: 1
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      RoughSvg,
+                      {
+                        shape: "ellipse",
+                        roughness: (roughness ?? 1.5) * 0.85,
+                        seed: deriveSeed(resolvedSeed, "thumb"),
+                        sketchColor: isOn ? SKETCH_COLORS.accent : ink,
+                        fill: "#f7f6f2",
+                        fillStyle: "solid",
+                        bowing,
+                        strokeWidth: (strokeWidth ?? 1.5) + 0.2,
+                        inset: 1
+                      }
+                    )
+                  }
+                ) })
+              ]
+            }
+          ),
+          label ? /* @__PURE__ */ jsx(
+            "label",
+            {
+              htmlFor: id,
+              style: {
+                fontSize: 15,
+                cursor: "pointer",
+                fontFamily: doodleUiFontFamily
+              },
+              children: label
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+var TabsSketchContext = createContext(null);
+function useTabsSketch() {
+  const ctx = useContext(TabsSketchContext);
+  if (!ctx) {
+    throw new Error("Tab parts must be used inside <Tabs>.");
+  }
+  return ctx;
+}
+var Tabs = forwardRef(function Tabs2({
+  className,
+  style,
+  children,
+  value,
+  defaultValue,
+  onValueChange,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  fillStyle,
+  strokeWidth,
+  animate,
+  ...rest
+}, ref) {
+  const [uncontrolled, setUncontrolled] = useState(defaultValue);
+  const current = value ?? uncontrolled;
+  const resolvedSeed = useResolvedSeed(seed);
+  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const shouldAnimate = useAnimate(animate);
+  return /* @__PURE__ */ jsx(
+    TabsSketchContext.Provider,
+    {
+      value: {
+        roughness,
+        seed: resolvedSeed,
+        sketchColor,
+        bowing,
+        fillStyle,
+        strokeWidth,
+        resolvedSeed,
+        ink,
+        current,
+        shouldAnimate
+      },
+      children: /* @__PURE__ */ jsx(
+        TabsPrimitive.Root,
+        {
+          ref,
+          className: cn(className),
+          style,
+          value: current,
+          defaultValue,
+          onValueChange: (next) => {
+            setUncontrolled(next);
+            onValueChange?.(next);
+          },
+          ...rest,
+          children
+        }
+      )
+    }
+  );
+});
+function TabUnderline({
+  box,
+  seed,
+  sketch
+}) {
+  const ref = useRef(null);
+  useDrawIn(ref, DRAW_IN_MARK_MS, sketch.shouldAnimate, seed);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      "aria-hidden": "true",
+      style: {
+        position: "absolute",
+        left: box.left,
+        top: box.top,
+        width: box.width,
+        height: 10,
+        pointerEvents: "none",
+        transition: sketch.shouldAnimate ? "left 220ms ease, width 220ms ease, top 220ms ease" : void 0
+      },
+      children: /* @__PURE__ */ jsx(
+        RoughSvg,
+        {
+          shape: "line",
+          roughness: (sketch.roughness ?? 1.5) + 0.35,
+          seed,
+          sketchColor: SKETCH_COLORS.accent,
+          bowing: sketch.bowing ?? 1.8,
+          strokeWidth: (sketch.strokeWidth ?? 1.75) + 0.4,
+          inset: 2
+        }
+      )
+    }
+  );
+}
+var TabList = forwardRef(
+  function TabList2({ className, style, children, ...rest }, ref) {
+    const sketch = useTabsSketch();
+    const listRef = useRef(null);
+    const [underline, setUnderline] = useState(null);
+    useLayoutEffect(() => {
+      const list = listRef.current;
+      if (!list) return;
+      const measure = () => {
+        const active = list.querySelector('[data-state="active"]');
+        if (!active) {
+          setUnderline(null);
+          return;
+        }
+        setUnderline({
+          left: active.offsetLeft + 8,
+          top: active.offsetTop + active.offsetHeight - 10,
+          width: Math.max(12, active.offsetWidth - 16)
+        });
+      };
+      measure();
+      const observer = new ResizeObserver(measure);
+      observer.observe(list);
+      return () => observer.disconnect();
+    }, [sketch.current, children]);
+    return /* @__PURE__ */ jsxs(
+      TabsPrimitive.List,
+      {
+        ref: (node) => {
+          listRef.current = node;
+          assignRef(ref, node);
+        },
+        className: cn(className),
+        style: {
+          display: "flex",
+          flexWrap: "wrap",
+          gap: 4,
+          position: "relative",
+          ...style
+        },
+        ...rest,
+        children: [
+          children,
+          underline && sketch.current ? /* @__PURE__ */ jsx(
+            TabUnderline,
+            {
+              box: underline,
+              seed: deriveSeed(sketch.resolvedSeed, sketch.current),
+              sketch
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+var Tab = forwardRef(function Tab2({ className, style, children, value, ...rest }, ref) {
+  const sketch = useTabsSketch();
+  const active = sketch.current === value;
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Trigger,
+    {
+      ref,
+      value,
+      className: cn(className),
+      style: {
+        position: "relative",
+        border: "none",
+        background: "transparent",
+        cursor: "pointer",
+        padding: "8px 14px 12px",
+        fontFamily: doodleUiFontFamily,
+        fontSize: 15,
+        fontWeight: active ? doodleUiFontWeight(650) : doodleUiFontWeight(400),
+        color: sketch.ink,
+        outline: "none",
+        ...style
+      },
+      ...rest,
+      children: /* @__PURE__ */ jsx("span", { style: { position: "relative", zIndex: 1 }, children })
+    }
+  );
+});
+var TabPanel = forwardRef(
+  function TabPanel2({ className, style, children, ...rest }, ref) {
+    const sketch = useTabsSketch();
+    return /* @__PURE__ */ jsx(
+      TabsPrimitive.Content,
+      {
+        ref,
+        className: cn(className),
+        style: {
+          paddingTop: 14,
+          fontFamily: doodleUiFontFamily,
+          color: sketch.ink,
+          fontSize: 15,
+          lineHeight: 1.5,
+          outline: "none",
+          ...style
+        },
+        ...rest,
+        children
+      }
+    );
+  }
+);
+var TableSketchContext = createContext(null);
+function useTableSketch() {
+  const ctx = useContext(TableSketchContext);
+  if (!ctx) {
+    throw new Error("Table parts must be used inside <Table>.");
+  }
+  return ctx;
+}
+function TableRule({
+  line,
+  headerUnderline,
+  roughness,
+  resolvedSeed,
+  ink,
+  bowing,
+  strokeWidth,
+  shouldAnimate
+}) {
+  const ref = useRef(null);
+  const delay = shouldAnimate ? Math.min(line.index, 6) * TABLE_STAGGER_MS : 0;
+  useDrawIn(ref, DRAW_IN_DURATION_MS, shouldAnimate, void 0, delay);
+  if (line.header && !headerUnderline) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      style: {
+        position: "absolute",
+        left: 0,
+        width: line.width,
+        top: line.y - 6,
+        height: 12
+      },
+      children: /* @__PURE__ */ jsx(
+        RoughSvg,
+        {
+          shape: "line",
+          roughness: line.header ? (roughness ?? 1.5) + 0.2 : roughness ?? 1.7,
+          seed: deriveSeed(resolvedSeed, line.key),
+          sketchColor: ink,
+          bowing: bowing ?? (line.header ? 1.4 : 2),
+          strokeWidth: line.header ? (strokeWidth ?? 1.75) + 0.35 : strokeWidth ?? 1.35,
+          inset: 6
+        }
+      )
+    }
+  );
+}
+var Table = forwardRef(function Table2({
+  className,
+  style,
+  children,
+  headerUnderline = true,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  fillStyle,
+  strokeWidth,
+  animate,
+  ...rest
+}, ref) {
+  const wrapperRef = useRef(null);
+  const tableRef = useRef(null);
+  const [lines, setLines] = useState([]);
+  const resolvedSeed = useResolvedSeed(seed);
+  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const shouldAnimate = useAnimate(animate);
+  useLayoutEffect(() => {
+    const wrapper = wrapperRef.current;
+    const table = tableRef.current;
+    if (!wrapper || !table) return;
+    const measure = () => {
+      const rows = Array.from(table.querySelectorAll("tr"));
+      const next = [];
+      rows.forEach((row, index) => {
+        const isLast = index === rows.length - 1;
+        const isHeader = row.parentElement?.tagName === "THEAD";
+        if (isLast && !isHeader) return;
+        next.push({
+          y: row.offsetTop + row.offsetHeight,
+          width: table.offsetWidth,
+          key: isHeader ? `header-${index}` : `row-${index}`,
+          header: Boolean(isHeader),
+          index
+        });
+      });
+      setLines(next);
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(table);
+    observer.observe(wrapper);
+    return () => observer.disconnect();
+  }, [children]);
+  return /* @__PURE__ */ jsx(
+    TableSketchContext.Provider,
+    {
+      value: {
+        roughness,
+        seed: resolvedSeed,
+        sketchColor,
+        bowing,
+        fillStyle,
+        strokeWidth,
+        resolvedSeed,
+        ink,
+        shouldAnimate
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: wrapperRef,
+          className: cn(className),
+          style: { position: "relative", width: "100%", ...style },
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-hidden": "true",
+                style: {
+                  position: "absolute",
+                  inset: 0,
+                  pointerEvents: "none",
+                  zIndex: 1,
+                  overflow: "visible"
+                },
+                children: lines.map((line) => /* @__PURE__ */ jsx(
+                  TableRule,
+                  {
+                    line,
+                    headerUnderline,
+                    roughness,
+                    resolvedSeed,
+                    ink,
+                    bowing,
+                    strokeWidth,
+                    shouldAnimate
+                  },
+                  line.key
+                ))
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "table",
+              {
+                ref: (node) => {
+                  tableRef.current = node;
+                  assignRef(ref, node);
+                },
+                style: {
+                  width: "100%",
+                  borderCollapse: "collapse",
+                  position: "relative",
+                  zIndex: 0,
+                  fontFamily: doodleUiFontFamily,
+                  color: ink
+                },
+                ...rest,
+                children
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+});
+var TableHead = forwardRef(function TableHead2({ className, style, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "thead",
+    {
+      ref,
+      className: cn(className),
+      style,
+      ...rest
+    }
+  );
+});
+var TableBody = forwardRef(function TableBody2({ className, style, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "tbody",
+    {
+      ref,
+      className: cn(className),
+      style,
+      ...rest
+    }
+  );
+});
+var TableRow = forwardRef(function TableRow2({ className, style, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      ref,
+      className: cn(className),
+      style,
+      ...rest
+    }
+  );
+});
+var TableHeaderCell = forwardRef(function TableHeaderCell2({ className, style, children, ...rest }, ref) {
+  useTableSketch();
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      ref,
+      className: cn(className),
+      style: {
+        textAlign: "left",
+        fontWeight: doodleUiFontWeight(650),
+        fontSize: 13,
+        padding: "10px 12px",
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+});
+var TableCell = forwardRef(
+  function TableCell2({ className, style, children, ...rest }, ref) {
+    useTableSketch();
+    return /* @__PURE__ */ jsx(
+      "td",
+      {
+        ref,
+        className: cn(className),
+        style: {
+          fontSize: 14,
+          padding: "10px 12px",
+          ...style
+        },
+        ...rest,
+        children
+      }
+    );
+  }
+);
+var VARIANT_COLOR2 = {
+  info: SKETCH_COLORS.info,
+  warning: SKETCH_COLORS.warning,
+  error: SKETCH_COLORS.error,
+  success: SKETCH_COLORS.success
+};
+var VARIANT_FILL2 = {
+  info: "#d2deec",
+  warning: "#f3e2c0",
+  error: "#f3d0cc",
+  success: "#d3e8dc"
+};
+var POSITION_STYLE = {
+  "top-left": { top: 16, left: 16 },
+  "top-right": { top: 16, right: 16 },
+  "bottom-left": { bottom: 16, left: 16 },
+  "bottom-right": { bottom: 16, right: 16 }
+};
+var ToastPositionContext = createContext("bottom-right");
+function ToastProvider({
+  children,
+  position = "bottom-right",
+  duration = 4e3,
+  swipeDirection = "right",
+  label
+}) {
+  return /* @__PURE__ */ jsx(ToastPositionContext.Provider, { value: position, children: /* @__PURE__ */ jsxs(
+    ToastPrimitive.Provider,
+    {
+      duration,
+      swipeDirection,
+      label,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          ToastPrimitive.Viewport,
+          {
+            style: {
+              position: "fixed",
+              zIndex: 90,
+              display: "flex",
+              flexDirection: "column",
+              gap: 10,
+              width: "min(360px, calc(100vw - 32px))",
+              margin: 0,
+              padding: 0,
+              listStyle: "none",
+              outline: "none",
+              ...POSITION_STYLE[position]
+            }
+          }
+        )
+      ]
+    }
+  ) });
+}
+function Toast({
+  open,
+  defaultOpen,
+  onOpenChange,
+  title,
+  children,
+  variant = "info",
+  duration,
+  className,
+  style,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  fillStyle,
+  strokeWidth,
+  animate
+}) {
+  const position = useContext(ToastPositionContext);
+  const fromTop = position.startsWith("top");
+  const [uncontrolled, setUncontrolled] = useState(defaultOpen ?? false);
+  const isOpen = open ?? uncontrolled;
+  const shouldAnimate = useAnimate(animate);
+  const color = sketchColor ?? VARIANT_COLOR2[variant];
+  const offset = fromTop ? -14 : 14;
+  function handleOpenChange(next) {
+    setUncontrolled(next);
+    onOpenChange?.(next);
+  }
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen ? /* @__PURE__ */ jsx(
+    ToastPrimitive.Root,
+    {
+      open: isOpen,
+      onOpenChange: handleOpenChange,
+      duration,
+      forceMount: true,
+      asChild: true,
+      children: /* @__PURE__ */ jsx(
+        motion.li,
+        {
+          className: cn(className),
+          initial: shouldAnimate ? { y: offset, opacity: 0, rotate: -1.4 } : false,
+          animate: shouldAnimate ? { y: 0, opacity: 1, rotate: [-1.2, 0.9, -0.35, 0] } : { y: 0, opacity: 1, rotate: 0 },
+          exit: shouldAnimate ? { y: offset, opacity: 0, rotate: 1.2 } : { opacity: 0 },
+          transition: shouldAnimate ? { duration: 0.38, ease: "easeOut" } : { duration: 0 },
+          style: {
+            listStyle: "none",
+            outline: "none",
+            ...style
+          },
+          children: /* @__PURE__ */ jsxs(
+            SketchBox,
+            {
+              roughness,
+              seed,
+              sketchColor: color,
+              bowing,
+              fillStyle: fillStyle ?? "hachure",
+              fill: VARIANT_FILL2[variant],
+              strokeWidth: strokeWidth ?? 1.7,
+              shadow: true,
+              animate,
+              contentStyle: { padding: "12px 16px" },
+              children: [
+                title ? /* @__PURE__ */ jsx(
+                  ToastPrimitive.Title,
+                  {
+                    style: {
+                      margin: 0,
+                      fontWeight: doodleUiFontWeight(700),
+                      fontSize: 15,
+                      fontFamily: doodleUiFontFamily,
+                      color,
+                      marginBottom: children ? 4 : 0
+                    },
+                    children: title
+                  }
+                ) : null,
+                children ? /* @__PURE__ */ jsx(
+                  ToastPrimitive.Description,
+                  {
+                    style: {
+                      margin: 0,
+                      fontSize: 14,
+                      lineHeight: 1.5,
+                      fontFamily: doodleUiFontFamily,
+                      color: SKETCH_COLORS.ink
+                    },
+                    children
+                  }
+                ) : null
+              ]
+            }
+          )
+        }
+      )
+    }
+  ) : null });
+}
+var ToastRoot = ToastPrimitive.Root;
+var ToastTitle = ToastPrimitive.Title;
+var ToastDescription = ToastPrimitive.Description;
+var ToastClose = ToastPrimitive.Close;
+var ToastAction = ToastPrimitive.Action;
+var ToastViewport = ToastPrimitive.Viewport;
+var CHEVRON_PATH2 = "M 6 4 L 12 10 L 6 16";
+var AccordionSketchContext = createContext(null);
+function useAccordionSketch() {
+  const ctx = useContext(AccordionSketchContext);
+  if (!ctx) {
+    throw new Error("Accordion parts must be used inside <Accordion>.");
+  }
+  return ctx;
+}
+var AccordionItemContext = createContext("");
+var Accordion = forwardRef(
+  function Accordion2({
+    className,
+    style,
+    children,
+    type = "single",
+    collapsible = true,
+    value,
+    defaultValue,
+    onValueChange,
+    disabled,
+    roughness,
+    seed,
+    sketchColor,
+    bowing,
+    fillStyle,
+    strokeWidth
+  }, ref) {
+    const resolvedSeed = useResolvedSeed(seed);
+    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const [uncontrolled, setUncontrolled] = useState(defaultValue ?? (type === "multiple" ? [] : void 0));
+    const openValue = value ?? uncontrolled;
+    const sketchValue = {
+      roughness,
+      seed: resolvedSeed,
+      sketchColor,
+      bowing,
+      fillStyle,
+      strokeWidth,
+      resolvedSeed,
+      ink,
+      openValue
+    };
+    function handleChange(next) {
+      setUncontrolled(next);
+      onValueChange?.(next);
+    }
+    const root = type === "multiple" ? /* @__PURE__ */ jsx(
+      AccordionPrimitive.Root,
+      {
+        ref,
+        type: "multiple",
+        disabled,
+        className: cn(className),
+        style,
+        value: openValue,
+        defaultValue,
+        onValueChange: handleChange,
+        children
+      }
+    ) : /* @__PURE__ */ jsx(
+      AccordionPrimitive.Root,
+      {
+        ref,
+        type: "single",
+        collapsible,
+        disabled,
+        className: cn(className),
+        style,
+        value: openValue,
+        defaultValue,
+        onValueChange: handleChange,
+        children
+      }
+    );
+    return /* @__PURE__ */ jsx(AccordionSketchContext.Provider, { value: sketchValue, children: root });
+  }
+);
+var AccordionItem = forwardRef(
+  function AccordionItem2({ className, style, children, value, ...rest }, ref) {
+    const sketch = useAccordionSketch();
+    return /* @__PURE__ */ jsx(AccordionItemContext.Provider, { value, children: /* @__PURE__ */ jsxs(
+      AccordionPrimitive.Item,
+      {
+        ref,
+        value,
+        className: cn(className),
+        style: { position: "relative", ...style },
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left: 0,
+                right: 0,
+                top: -6,
+                height: 12,
+                pointerEvents: "none"
+              },
+              children: /* @__PURE__ */ jsx(
+                RoughSvg,
+                {
+                  shape: "line",
+                  roughness: (sketch.roughness ?? 1.5) + 0.25,
+                  seed: deriveSeed(sketch.resolvedSeed, `div-${value}`),
+                  sketchColor: sketch.ink,
+                  bowing: sketch.bowing ?? 1.8,
+                  strokeWidth: sketch.strokeWidth ?? 1.4,
+                  inset: 2
+                }
+              )
+            }
+          ),
+          children
+        ]
+      }
+    ) });
+  }
+);
+var AccordionTrigger = forwardRef(function AccordionTrigger2({ className, style, children, ...rest }, ref) {
+  const sketch = useAccordionSketch();
+  const itemValue = useContext(AccordionItemContext);
+  const open = Array.isArray(sketch.openValue) ? sketch.openValue.includes(itemValue) : sketch.openValue === itemValue;
+  return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { asChild: true, children: /* @__PURE__ */ jsx("h3", { style: { margin: 0 }, children: /* @__PURE__ */ jsxs(
+    AccordionPrimitive.Trigger,
+    {
+      ref,
+      className: cn(className),
+      style: {
+        display: "flex",
+        width: "100%",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 12,
+        padding: "12px 4px",
+        border: "none",
+        background: "transparent",
+        cursor: "pointer",
+        fontFamily: doodleUiFontFamily,
+        fontSize: 15,
+        fontWeight: doodleUiFontWeight(600),
+        color: sketch.ink,
+        textAlign: "left",
+        outline: "none",
+        ...style
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("span", { children }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              position: "relative",
+              width: 18,
+              height: 18,
+              flexShrink: 0,
+              transform: open ? "rotate(90deg)" : "rotate(0deg)",
+              transition: "transform 180ms ease"
+            },
+            children: /* @__PURE__ */ jsx(
+              RoughSvg,
+              {
+                shape: "path",
+                path: CHEVRON_PATH2,
+                roughness: (sketch.roughness ?? 1.5) * 0.7,
+                seed: deriveSeed(sketch.resolvedSeed, `chevron-${itemValue}`),
+                sketchColor: sketch.ink,
+                bowing: sketch.bowing,
+                strokeWidth: (sketch.strokeWidth ?? 1.6) + 0.2,
+                inset: 0
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) }) });
+});
+var AccordionContent = forwardRef(function AccordionContent2({ className, style, children, ...rest }, ref) {
+  const sketch = useAccordionSketch();
+  return /* @__PURE__ */ jsx(
+    AccordionPrimitive.Content,
+    {
+      ref,
+      className: cn(className),
+      style: {
+        padding: "0 4px 14px",
+        fontFamily: doodleUiFontFamily,
+        fontSize: 14,
+        lineHeight: 1.5,
+        color: sketch.ink,
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+});
+var STATUS_COLOR = {
+  online: SKETCH_COLORS.success,
+  offline: "#8a8680",
+  busy: SKETCH_COLORS.accent
+};
+var Avatar = forwardRef(
+  function Avatar2({
+    className,
+    style,
+    src,
+    alt,
+    fallback,
+    size = 40,
+    shape = "circle",
+    status,
+    roughness,
+    seed,
+    sketchColor,
+    bowing,
+    fillStyle,
+    strokeWidth,
+    ...rest
+  }, ref) {
+    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const resolvedSeed = useResolvedSeed(seed);
+    const roughShape = shape === "circle" ? "ellipse" : "rectangle";
+    const badge = 12;
+    const rootStyle = {
+      position: "relative",
+      display: "inline-flex",
+      width: size,
+      height: size,
+      flexShrink: 0,
+      verticalAlign: "middle",
+      ...style
+    };
+    return /* @__PURE__ */ jsxs(
+      AvatarPrimitive.Root,
+      {
+        ref,
+        className: cn(className),
+        style: rootStyle,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            RoughSvg,
+            {
+              shape: roughShape,
+              roughness,
+              seed: resolvedSeed,
+              sketchColor: ink,
+              bowing,
+              fillStyle: fillStyle ?? "solid",
+              fill: "#f7f6f2",
+              strokeWidth: strokeWidth ?? 1.6,
+              inset: 1.5
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              style: {
+                position: "absolute",
+                inset: 4,
+                overflow: "hidden",
+                borderRadius: shape === "circle" ? "50%" : 4,
+                zIndex: 1,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+              },
+              children: [
+                src ? /* @__PURE__ */ jsx(
+                  AvatarPrimitive.Image,
+                  {
+                    src,
+                    alt,
+                    style: {
+                      width: "100%",
+                      height: "100%",
+                      objectFit: "cover"
+                    }
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx(
+                  AvatarPrimitive.Fallback,
+                  {
+                    delayMs: src ? 400 : 0,
+                    style: {
+                      width: "100%",
+                      height: "100%",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      fontFamily: doodleUiFontFamily,
+                      fontWeight: doodleUiFontWeight(650),
+                      fontSize: Math.max(12, size * 0.36),
+                      color: ink,
+                      background: SKETCH_COLORS.secondaryFill
+                    },
+                    children: fallback
+                  }
+                )
+              ]
+            }
+          ),
+          status ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                position: "absolute",
+                width: badge,
+                height: badge,
+                right: -1,
+                bottom: -1,
+                zIndex: 2
+              },
+              children: /* @__PURE__ */ jsx(
+                RoughSvg,
+                {
+                  shape: "ellipse",
+                  roughness: (roughness ?? 1.5) * 0.8,
+                  seed: deriveSeed(resolvedSeed, "status"),
+                  sketchColor: STATUS_COLOR[status],
+                  fill: STATUS_COLOR[status],
+                  fillStyle: "solid",
+                  bowing,
+                  strokeWidth: 1,
+                  inset: 0.5
+                }
+              )
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+var Slider = forwardRef(function Slider2({
+  className,
+  style,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  fillStyle,
+  strokeWidth,
+  thumbShape = "circle",
+  ...rest
+}, ref) {
+  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const resolvedSeed = useResolvedSeed(seed);
+  return /* @__PURE__ */ jsxs(
+    SliderPrimitive.Root,
+    {
+      ref,
+      className: cn(className),
+      style: {
+        position: "relative",
+        display: "flex",
+        alignItems: "center",
+        width: "100%",
+        height: 28,
+        userSelect: "none",
+        touchAction: "none",
+        ...style
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs(
+          SliderPrimitive.Track,
+          {
+            style: {
+              position: "relative",
+              flex: 1,
+              height: 16
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                RoughSvg,
+                {
+                  shape: "line",
+                  roughness: roughness ?? 1.8,
+                  seed: resolvedSeed,
+                  sketchColor: ink,
+                  bowing: bowing ?? 2,
+                  strokeWidth: strokeWidth ?? 1.6,
+                  inset: 4
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                SliderPrimitive.Range,
+                {
+                  style: {
+                    position: "absolute",
+                    left: 0,
+                    height: "100%"
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    RoughSvg,
+                    {
+                      shape: "line",
+                      roughness: (roughness ?? 1.5) + 0.4,
+                      seed: deriveSeed(resolvedSeed, "range"),
+                      sketchColor: SKETCH_COLORS.accent,
+                      bowing: bowing ?? 1.6,
+                      strokeWidth: (strokeWidth ?? 1.6) + 0.6,
+                      inset: 4
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SliderPrimitive.Thumb,
+          {
+            style: {
+              display: "block",
+              width: 20,
+              height: 20,
+              position: "relative",
+              outline: "none",
+              cursor: "grab"
+            },
+            children: /* @__PURE__ */ jsx(
+              RoughSvg,
+              {
+                shape: thumbShape === "square" ? "rectangle" : "ellipse",
+                roughness: (roughness ?? 1.5) * 0.85,
+                seed: deriveSeed(resolvedSeed, "thumb"),
+                sketchColor: SKETCH_COLORS.accent,
+                fill: "#f7f6f2",
+                fillStyle: fillStyle ?? "solid",
+                bowing,
+                strokeWidth: (strokeWidth ?? 1.5) + 0.3,
+                inset: 1
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+});
+var PREV_PATH = "M 12 4 L 6 10 L 12 16";
+var NEXT_PATH = "M 6 4 L 12 10 L 6 16";
+function pageItems(page, count) {
+  if (count <= 7) {
+    return Array.from({ length: count }, (_, i) => i + 1);
+  }
+  const items = [1];
+  const start = Math.max(2, page - 1);
+  const end = Math.min(count - 1, page + 1);
+  if (start > 2) items.push("ellipsis");
+  for (let n = start; n <= end; n += 1) items.push(n);
+  if (end < count - 1) items.push("ellipsis");
+  items.push(count);
+  return items;
+}
+var Pagination = forwardRef(
+  function Pagination2({
+    className,
+    style,
+    page,
+    count,
+    onPageChange,
+    roughness,
+    seed,
+    sketchColor,
+    bowing,
+    strokeWidth,
+    ...rest
+  }, ref) {
+    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const resolvedSeed = useResolvedSeed(seed);
+    const items = pageItems(page, count);
+    return /* @__PURE__ */ jsxs(
+      "nav",
+      {
+        ref,
+        className: cn(className),
+        "aria-label": "Pagination",
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 4,
+          ...style
+        },
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            PageButton,
+            {
+              "aria-label": "Previous page",
+              disabled: page <= 1,
+              onClick: () => onPageChange?.(Math.max(1, page - 1)),
+              roughness,
+              seed: deriveSeed(resolvedSeed, "prev"),
+              ink,
+              bowing,
+              strokeWidth,
+              children: /* @__PURE__ */ jsx("span", { style: { position: "relative", width: 16, height: 16, display: "block" }, children: /* @__PURE__ */ jsx(
+                RoughSvg,
+                {
+                  shape: "path",
+                  path: PREV_PATH,
+                  roughness: (roughness ?? 1.5) * 0.7,
+                  seed: deriveSeed(resolvedSeed, "prev-arrow"),
+                  sketchColor: ink,
+                  strokeWidth: (strokeWidth ?? 1.5) + 0.2,
+                  inset: 0
+                }
+              ) })
+            }
+          ),
+          items.map(
+            (item, index) => item === "ellipsis" ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  width: 28,
+                  textAlign: "center",
+                  fontFamily: doodleUiFontFamily,
+                  color: ink
+                },
+                children: "\u2026"
+              },
+              `e-${index}`
+            ) : /* @__PURE__ */ jsx(
+              PageButton,
+              {
+                "aria-label": `Page ${item}`,
+                "aria-current": item === page ? "page" : void 0,
+                active: item === page,
+                onClick: () => onPageChange?.(item),
+                roughness,
+                seed: deriveSeed(resolvedSeed, `page-${item}`),
+                ink,
+                bowing,
+                strokeWidth,
+                children: item
+              },
+              item
+            )
+          ),
+          /* @__PURE__ */ jsx(
+            PageButton,
+            {
+              "aria-label": "Next page",
+              disabled: page >= count,
+              onClick: () => onPageChange?.(Math.min(count, page + 1)),
+              roughness,
+              seed: deriveSeed(resolvedSeed, "next"),
+              ink,
+              bowing,
+              strokeWidth,
+              children: /* @__PURE__ */ jsx("span", { style: { position: "relative", width: 16, height: 16, display: "block" }, children: /* @__PURE__ */ jsx(
+                RoughSvg,
+                {
+                  shape: "path",
+                  path: NEXT_PATH,
+                  roughness: (roughness ?? 1.5) * 0.7,
+                  seed: deriveSeed(resolvedSeed, "next-arrow"),
+                  sketchColor: ink,
+                  strokeWidth: (strokeWidth ?? 1.5) + 0.2,
+                  inset: 0
+                }
+              ) })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+function PageButton({
+  children,
+  className,
+  style,
+  active,
+  disabled,
+  roughness,
+  seed,
+  ink,
+  bowing,
+  strokeWidth,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      disabled,
+      className: cn(className),
+      style: {
+        position: "relative",
+        width: 36,
+        height: 36,
+        padding: 0,
+        border: "none",
+        background: "transparent",
+        cursor: disabled ? "not-allowed" : "pointer",
+        color: ink,
+        fontFamily: doodleUiFontFamily,
+        fontWeight: active ? doodleUiFontWeight(700) : doodleUiFontWeight(400),
+        fontSize: 14,
+        outline: "none",
+        opacity: disabled ? 0.4 : 1,
+        ...style
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          RoughSvg,
+          {
+            shape: "ellipse",
+            roughness,
+            seed,
+            sketchColor: active ? SKETCH_COLORS.accent : ink,
+            bowing,
+            fill: active ? SKETCH_COLORS.accentFill : void 0,
+            fillStyle: active ? "hachure" : void 0,
+            strokeWidth: active ? (strokeWidth ?? 1.6) + 0.3 : strokeWidth ?? 1.4,
+            inset: 1.5
+          }
+        ),
+        active ? /* @__PURE__ */ jsx(
+          RoughSvg,
+          {
+            shape: "ellipse",
+            roughness: (roughness ?? 1.5) + 0.45,
+            seed,
+            sketchColor: SKETCH_COLORS.accent,
+            bowing: bowing ?? 1.6,
+            strokeWidth: 1.1,
+            inset: -1.5,
+            style: { opacity: 0.7 }
+          }
+        ) : null,
+        /* @__PURE__ */ jsx("span", { style: { position: "relative", zIndex: 1 }, children })
+      ]
+    }
+  );
+}
+var SLASH_PATH = "M 10 3 L 6 15";
+var CHEVRON_PATH3 = "M 5 4 L 11 9 L 5 14";
+var BreadcrumbSketchContext = createContext(null);
+function useBreadcrumbSketch() {
+  const ctx = useContext(BreadcrumbSketchContext);
+  if (!ctx) {
+    throw new Error("BreadcrumbItem must be used inside <Breadcrumb>.");
+  }
+  return ctx;
+}
+var Breadcrumb = forwardRef(
+  function Breadcrumb2({
+    className,
+    style,
+    children,
+    separator = "slash",
+    roughness,
+    seed,
+    sketchColor,
+    bowing,
+    strokeWidth,
+    ...rest
+  }, ref) {
+    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const resolvedSeed = useResolvedSeed(seed);
+    const items = Children.toArray(children).filter(isValidElement);
+    return /* @__PURE__ */ jsx(
+      BreadcrumbSketchContext.Provider,
+      {
+        value: {
+          roughness,
+          seed: resolvedSeed,
+          sketchColor,
+          bowing,
+          strokeWidth,
+          resolvedSeed,
+          ink,
+          separator
+        },
+        children: /* @__PURE__ */ jsx(
+          "nav",
+          {
+            ref,
+            className: cn(className),
+            "aria-label": "Breadcrumb",
+            style,
+            ...rest,
+            children: /* @__PURE__ */ jsx(
+              "ol",
+              {
+                style: {
+                  display: "flex",
+                  flexWrap: "wrap",
+                  alignItems: "center",
+                  gap: 4,
+                  listStyle: "none",
+                  margin: 0,
+                  padding: 0,
+                  fontFamily: doodleUiFontFamily,
+                  color: ink,
+                  fontSize: 14
+                },
+                children: items.map((child, index) => /* @__PURE__ */ jsxs(
+                  "li",
+                  {
+                    style: { display: "inline-flex", alignItems: "center", gap: 4 },
+                    children: [
+                      cloneElement(child, {
+                        index
+                      }),
+                      index < items.length - 1 ? /* @__PURE__ */ jsx(
+                        SeparatorMark,
+                        {
+                          index,
+                          separator,
+                          resolvedSeed,
+                          roughness,
+                          ink,
+                          bowing,
+                          strokeWidth
+                        }
+                      ) : null
+                    ]
+                  },
+                  index
+                ))
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+function SeparatorMark({
+  index,
+  separator,
+  resolvedSeed,
+  roughness,
+  ink,
+  bowing,
+  strokeWidth
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      style: { position: "relative", width: 16, height: 18, display: "inline-block" },
+      children: /* @__PURE__ */ jsx(
+        RoughSvg,
+        {
+          shape: "path",
+          path: separator === "chevron" ? CHEVRON_PATH3 : SLASH_PATH,
+          roughness: (roughness ?? 1.5) * 0.85,
+          seed: deriveSeed(resolvedSeed, `sep-${index}`),
+          sketchColor: ink,
+          bowing: bowing ?? 1.6,
+          strokeWidth: strokeWidth ?? 1.4,
+          inset: 0
+        }
+      )
+    }
+  );
+}
+var BreadcrumbItem = forwardRef(
+  function BreadcrumbItem2({ className, style, href, current, children, index: _index, ...rest }, ref) {
+    const sketch = useBreadcrumbSketch();
+    const contentStyle = {
+      color: current ? sketch.ink : sketch.ink,
+      opacity: current ? 1 : 0.75,
+      textDecoration: "none",
+      fontFamily: doodleUiFontFamily,
+      ...style
+    };
+    if (href && !current) {
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          href,
+          className: cn(className),
+          style: contentStyle,
+          ...rest,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: cn(className),
+        "aria-current": current ? "page" : void 0,
+        style: contentStyle,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+var Skeleton = forwardRef(
+  function Skeleton2({
+    className,
+    style,
+    variant = "rect",
+    pulse = true,
+    width,
+    height,
+    roughness,
+    seed,
+    sketchColor,
+    bowing,
+    fillStyle,
+    strokeWidth,
+    ...rest
+  }, ref) {
+    const base = useResolvedSeed(seed);
+    const [tick, setTick] = useState(0);
+    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    useEffect(() => {
+      if (!pulse) return;
+      const id = window.setInterval(() => {
+        setTick((current) => current + 1);
+      }, 900);
+      return () => window.clearInterval(id);
+    }, [pulse]);
+    const resolved = pulse ? deriveSeed(base, `pulse-${tick}`) : base;
+    const shape = variant === "circle" ? "ellipse" : "rectangle";
+    const defaultHeight = variant === "text" ? 14 : variant === "circle" ? 40 : 80;
+    const defaultWidth = variant === "circle" ? 40 : "100%";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "aria-hidden": "true",
+        className: cn(className),
+        style: {
+          position: "relative",
+          width: width ?? defaultWidth,
+          height: height ?? defaultHeight,
+          maxWidth: "100%",
+          ...style
+        },
+        ...rest,
+        children: /* @__PURE__ */ jsx(
+          RoughSvg,
+          {
+            shape,
+            roughness: (roughness ?? 1.5) + 0.4,
+            seed: resolved,
+            sketchColor: ink,
+            fill: ink,
+            fillStyle: fillStyle ?? "hachure",
+            bowing: bowing ?? 1.6,
+            strokeWidth: strokeWidth ?? 1.1,
+            inset: 2,
+            style: { opacity: 0.28 }
+          }
+        )
+      }
+    );
+  }
+);
+function normalizeSteps(steps) {
+  return steps.map(
+    (step) => step !== null && typeof step === "object" && "label" in step ? step : { label: step }
+  );
+}
+var Stepper = forwardRef(
+  function Stepper2({
+    className,
+    style,
+    steps,
+    current = 0,
+    orientation = "horizontal",
+    roughness,
+    seed,
+    sketchColor,
+    bowing,
+    fillStyle,
+    strokeWidth,
+    ...rest
+  }, ref) {
+    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const resolvedSeed = useResolvedSeed(seed);
+    const items = normalizeSteps(steps);
+    const horizontal = orientation === "horizontal";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "list",
+        className: cn(className),
+        style: {
+          display: "flex",
+          flexDirection: horizontal ? "row" : "column",
+          alignItems: horizontal ? "flex-start" : "stretch",
+          ...style
+        },
+        ...rest,
+        children: items.map((step, index) => {
+          const complete = index < current;
+          const active = index === current;
+          const markerColor = complete || active ? SKETCH_COLORS.accent : ink;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "listitem",
+              "aria-current": active ? "step" : void 0,
+              style: {
+                display: "flex",
+                flex: horizontal ? 1 : void 0,
+                flexDirection: horizontal ? "column" : "row",
+                alignItems: horizontal ? "center" : "flex-start",
+                minWidth: 0
+              },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      flexDirection: horizontal ? "row" : "column",
+                      alignItems: "center",
+                      width: horizontal ? "100%" : void 0
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs(
+                        "span",
+                        {
+                          style: {
+                            position: "relative",
+                            width: 28,
+                            height: 28,
+                            flexShrink: 0,
+                            display: "inline-flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            fontFamily: doodleUiFontFamily,
+                            fontWeight: doodleUiFontWeight(700),
+                            fontSize: 13,
+                            color: markerColor
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              RoughSvg,
+                              {
+                                shape: "ellipse",
+                                roughness,
+                                seed: deriveSeed(resolvedSeed, `step-${index}`),
+                                sketchColor: markerColor,
+                                fill: complete ? SKETCH_COLORS.accentFill : active ? "#f7f6f2" : void 0,
+                                fillStyle: complete || active ? fillStyle ?? "hachure" : void 0,
+                                bowing,
+                                strokeWidth: active ? (strokeWidth ?? 1.6) + 0.4 : strokeWidth ?? 1.5,
+                                inset: 1.5
+                              }
+                            ),
+                            /* @__PURE__ */ jsx("span", { style: { position: "relative", zIndex: 1 }, children: complete ? "\u2713" : index + 1 })
+                          ]
+                        }
+                      ),
+                      index < items.length - 1 ? /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            position: "relative",
+                            flex: 1,
+                            width: horizontal ? void 0 : 12,
+                            height: horizontal ? 12 : 28,
+                            minWidth: horizontal ? 16 : 12,
+                            alignSelf: "center"
+                          },
+                          children: /* @__PURE__ */ jsx(
+                            RoughSvg,
+                            {
+                              shape: horizontal ? "line" : "line-vertical",
+                              roughness: (roughness ?? 1.5) + 0.3,
+                              seed: deriveSeed(resolvedSeed, `connector-${index}`),
+                              sketchColor: complete ? SKETCH_COLORS.accent : ink,
+                              bowing: bowing ?? 2,
+                              strokeWidth: strokeWidth ?? 1.4,
+                              inset: 2
+                            }
+                          )
+                        }
+                      ) : null
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      marginTop: horizontal ? 8 : 0,
+                      marginLeft: horizontal ? 0 : 10,
+                      paddingBottom: horizontal ? 0 : 8,
+                      textAlign: horizontal ? "center" : "left",
+                      fontFamily: doodleUiFontFamily,
+                      fontSize: 13,
+                      color: ink
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx("div", { style: { fontWeight: doodleUiFontWeight(600) }, children: step.label }),
+                      step.description ? /* @__PURE__ */ jsx("div", { style: { opacity: 0.7, fontSize: 12, marginTop: 2 }, children: step.description }) : null
+                    ]
+                  }
+                )
+              ]
+            },
+            index
+          );
+        })
+      }
+    );
+  }
+);
 
-export { Alert, Badge, Button, Card, Checkbox, DEFAULT_BOWING, DEFAULT_INK, DEFAULT_ROUGHNESS, DEFAULT_STROKE_WIDTH, Divider, Input, Modal, ModalClose, ModalDescription, ModalRoot, ModalTitle, ModalTrigger, Progress, Radio, RadioGroup, RoughSvg, SKETCH_COLORS, SketchBox, SketchSeedProvider, Textarea, Tooltip, TooltipProvider, toRoughOptions, useResolvedSeed, useSketchSeed };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, Avatar, Badge, Breadcrumb, BreadcrumbItem, Button, Card, Checkbox, DEFAULT_BOWING, DEFAULT_INK, DEFAULT_ROUGHNESS, DEFAULT_STROKE_WIDTH, DRAW_IN_ALERT_MS, DRAW_IN_DURATION_MS, DRAW_IN_MARK_MS, DRAW_IN_TOOLTIP_MS, Divider, DoodleUIProvider, Input, Modal, ModalClose, ModalDescription, ModalRoot, ModalTitle, ModalTrigger, Pagination, Progress, Radio, RadioGroup, RoughSvg, SKETCH_COLORS, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectSeparator, SelectTrigger, SelectValue, Skeleton, SketchBox, SketchSeedProvider, Slider, Stepper, Switch, TABLE_STAGGER_MS, Tab, TabList, TabPanel, Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow, Tabs, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastRoot, ToastTitle, ToastViewport, Tooltip, TooltipProvider, deriveSeed, toRoughOptions, useAnimate, useDoodleUI, useDrawIn, useResolvedSeed, useSketchSeed };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map