doodleui-react 0.2.0 → 0.4.0

package/dist/index.cjs

@@ -7,6 +7,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
 var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 var Dialog = require('@radix-ui/react-dialog');
+var framerMotion = require('framer-motion');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var SelectPrimitive = require('@radix-ui/react-select');
 var SwitchPrimitive = require('@radix-ui/react-switch');
@@ -15,6 +16,12 @@ var ToastPrimitive = require('@radix-ui/react-toast');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var AvatarPrimitive = require('@radix-ui/react-avatar');
 var SliderPrimitive = require('@radix-ui/react-slider');
+var LabelPrimitive = require('@radix-ui/react-label');
+var CollapsiblePrimitive = require('@radix-ui/react-collapsible');
+var PopoverPrimitive = require('@radix-ui/react-popover');
+var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
+var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
+var cmdk = require('cmdk');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -48,6 +55,11 @@ var ToastPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToastPrimitive);
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
 var SliderPrimitive__namespace = /*#__PURE__*/_interopNamespace(SliderPrimitive);
+var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
+var CollapsiblePrimitive__namespace = /*#__PURE__*/_interopNamespace(CollapsiblePrimitive);
+var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
+var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
+var AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(AlertDialogPrimitive);
 
 // src/types.ts
 function toRoughOptions(props) {
@@ -83,6 +95,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);
 }
@@ -283,6 +300,177 @@ function RoughSvg({
     }
   );
 }
+var DoodleUIContext = react.createContext(null);
+function DoodleUIProvider({
+  children,
+  animate = true,
+  forceAnimate = false
+}) {
+  const value = react.useMemo(
+    () => ({ animate, forceAnimate }),
+    [animate, forceAnimate]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(DoodleUIContext.Provider, { value, children });
+}
+function useDoodleUI() {
+  return react.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 react.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] = react.useState(target);
+  const valueRef = react.useRef(target);
+  valueRef.current = value;
+  react.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) {
+  react.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 = react.forwardRef(
   function SketchBox2({
     children,
@@ -301,12 +489,21 @@ var SketchBox = react.forwardRef(
     strokeWidth,
     inset,
     path,
+    animate,
+    drawInDuration = DRAW_IN_DURATION_MS,
+    drawInKey,
     ...rest
   }, ref) {
+    const rootRef = react.useRef(null);
+    const shouldAnimate = useAnimate(animate);
+    useDrawIn(rootRef, drawInDuration, shouldAnimate, drawInKey);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        ref,
+        ref: (node) => {
+          rootRef.current = node;
+          assignRef(ref, node);
+        },
         className: cn(className),
         style: { position: "relative", ...style },
         ...rest,
@@ -364,6 +561,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 = react.forwardRef(
   function Button2({
     children,
@@ -378,18 +579,28 @@ var Button = react.forwardRef(
     fillStyle,
     strokeWidth,
     disabled,
+    animate,
     onMouseEnter,
     onMouseLeave,
     ...rest
   }, ref) {
+    const rootRef = react.useRef(null);
     const [hovered, setHovered] = react.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__ */ jsxRuntime.jsxs(
       "button",
       {
-        ref,
+        ref: (node) => {
+          rootRef.current = node;
+          assignRef2(ref, node);
+        },
         type: "button",
         className: cn(className),
         disabled,
@@ -425,12 +636,12 @@ var Button = react.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__ */ jsxRuntime.jsx("span", { style: { position: "relative", zIndex: 1 }, children })
@@ -452,11 +663,18 @@ var Input = react.forwardRef(function Input2({
   id,
   onFocus,
   onBlur,
+  animate,
   ...rest
 }, ref) {
   const [focused, setFocused] = react.useState(false);
+  const fieldRef = react.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__ */ jsxRuntime.jsxs(
     "label",
     {
@@ -480,17 +698,17 @@ var Input = react.forwardRef(function Input2({
             children: label
           }
         ) : null,
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { position: "relative", display: "block" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { ref: fieldRef, style: { position: "relative", display: "block" }, children: [
           /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
@@ -544,10 +762,17 @@ var Textarea = react.forwardRef(
     rows = 4,
     onFocus,
     onBlur,
+    animate,
     ...rest
   }, ref) {
     const [focused, setFocused] = react.useState(false);
+    const fieldRef = react.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__ */ jsxRuntime.jsxs(
       "label",
       {
@@ -571,17 +796,17 @@ var Textarea = react.forwardRef(
               children: label
             }
           ) : null,
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { position: "relative", display: "block" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { ref: fieldRef, style: { position: "relative", display: "block" }, children: [
             /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
@@ -626,6 +851,36 @@ var Textarea = react.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 = react.useRef(null);
+  useDrawIn(ref, DRAW_IN_MARK_MS, shouldAnimate);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ref,
+      style: { position: "absolute", inset: 0, pointerEvents: "none" },
+      children: /* @__PURE__ */ jsxRuntime.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 = react.forwardRef(
   function Checkbox2({
     className,
@@ -641,11 +896,15 @@ var Checkbox = react.forwardRef(
     defaultChecked,
     onCheckedChange,
     id,
+    animate,
     ...rest
   }, ref) {
     const ink = sketchColor ?? SKETCH_COLORS.ink;
     const generatedId = react.useId();
     const inputId = id ?? generatedId;
+    const boxRef = react.useRef(null);
+    const shouldAnimate = useAnimate(animate);
+    useDrawIn(boxRef, DRAW_IN_DURATION_MS, shouldAnimate);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "span",
       {
@@ -680,16 +939,23 @@ var Checkbox = react.forwardRef(
               ...rest,
               children: [
                 /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                      RoughSvg,
+                      {
+                        shape: "rectangle",
+                        roughness,
+                        seed,
+                        sketchColor: ink,
+                        bowing,
+                        fillStyle,
+                        strokeWidth: strokeWidth ?? 1.6,
+                        inset: 1.5
+                      }
+                    )
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -701,16 +967,13 @@ var Checkbox = react.forwardRef(
                       display: "block"
                     },
                     children: /* @__PURE__ */ jsxRuntime.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
                       }
                     )
                   }
@@ -751,6 +1014,53 @@ var RadioGroup = react.forwardRef(
   }
 );
 var SIZE = 20;
+function RadioDot({
+  roughness,
+  seed,
+  bowing,
+  shouldAnimate
+}) {
+  const ref = react.useRef(null);
+  useDrawIn(ref, DRAW_IN_MARK_MS, shouldAnimate);
+  react.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__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ref,
+      style: {
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        display: "block"
+      },
+      children: /* @__PURE__ */ jsxRuntime.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 = react.forwardRef(function Radio2({
   className,
   style,
@@ -762,11 +1072,15 @@ var Radio = react.forwardRef(function Radio2({
   fillStyle,
   strokeWidth,
   id,
+  animate,
   ...rest
 }, ref) {
   const ink = sketchColor ?? SKETCH_COLORS.ink;
   const generatedId = react.useId();
   const inputId = id ?? generatedId;
+  const ringRef = react.useRef(null);
+  const shouldAnimate = useAnimate(animate);
+  useDrawIn(ringRef, DRAW_IN_DURATION_MS, shouldAnimate);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
     {
@@ -799,16 +1113,23 @@ var Radio = react.forwardRef(function Radio2({
             ...rest,
             children: [
               /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                    RoughSvg,
+                    {
+                      shape: "ellipse",
+                      roughness,
+                      seed,
+                      sketchColor: ink,
+                      bowing,
+                      fillStyle,
+                      strokeWidth: strokeWidth ?? 1.6,
+                      inset: 1.5
+                    }
+                  )
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -820,17 +1141,12 @@ var Radio = react.forwardRef(function Radio2({
                     display: "block"
                   },
                   children: /* @__PURE__ */ jsxRuntime.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
                     }
                   )
                 }
@@ -864,6 +1180,7 @@ var Card = react.forwardRef(function Card2({
   bowing,
   fillStyle,
   strokeWidth,
+  animate,
   ...rest
 }, ref) {
   const boxProps = {
@@ -874,7 +1191,8 @@ var Card = react.forwardRef(function Card2({
     sketchColor: sketchColor ?? SKETCH_COLORS.ink,
     bowing,
     fillStyle,
-    strokeWidth
+    strokeWidth,
+    animate
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     SketchBox,
@@ -914,6 +1232,7 @@ var Badge = react.forwardRef(function Badge2({
   bowing,
   fillStyle,
   strokeWidth,
+  animate,
   ...rest
 }, ref) {
   const ink = variant === "accent" ? sketchColor ?? SKETCH_COLORS.accent : sketchColor ?? SKETCH_COLORS.ink;
@@ -941,6 +1260,7 @@ var Badge = react.forwardRef(function Badge2({
       sketchColor: ink,
       bowing,
       strokeWidth: strokeWidth ?? 1.4,
+      animate,
       ...rest,
       children: /* @__PURE__ */ jsxRuntime.jsx("span", { ref, children })
     }
@@ -971,6 +1291,7 @@ var Alert = react.forwardRef(function Alert2({
   fillStyle,
   strokeWidth,
   role = "status",
+  animate,
   ...rest
 }, ref) {
   const color = sketchColor ?? VARIANT_COLOR[variant];
@@ -989,6 +1310,8 @@ var Alert = react.forwardRef(function Alert2({
       fillStyle: fillStyle ?? "hachure",
       fill: VARIANT_FILL[variant],
       strokeWidth,
+      animate,
+      drawInDuration: DRAW_IN_ALERT_MS,
       ...rest,
       children: [
         title ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -1021,15 +1344,27 @@ function Modal({
   sketchColor,
   bowing,
   fillStyle,
-  strokeWidth
+  strokeWidth,
+  animate
 }) {
   const ink = sketchColor ?? SKETCH_COLORS.ink;
-  return /* @__PURE__ */ jsxRuntime.jsxs(Dialog__namespace.Root, { open, defaultOpen, onOpenChange, children: [
+  const [uncontrolled, setUncontrolled] = react.useState(defaultOpen === true);
+  const isOpen = open ?? uncontrolled;
+  const shouldAnimate = useAnimate(animate);
+  function handleOpenChange(next) {
+    setUncontrolled(next);
+    onOpenChange?.(next);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(Dialog__namespace.Root, { open: isOpen, onOpenChange: handleOpenChange, children: [
     trigger ? /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Trigger, { asChild: true, children: trigger }) : null,
-    /* @__PURE__ */ jsxRuntime.jsxs(Dialog__namespace.Portal, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Dialog__namespace.Overlay,
+    /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen ? /* @__PURE__ */ jsxRuntime.jsxs(Dialog__namespace.Portal, { forceMount: true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Overlay, { asChild: true, forceMount: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        framerMotion.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,
@@ -1037,92 +1372,121 @@ function Modal({
             zIndex: 70
           }
         }
-      ),
+      ) }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        Dialog__namespace.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__ */ jsxRuntime.jsxs(
-            SketchBox,
+          children: /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Content, { asChild: true, forceMount: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+            framerMotion.motion.div,
             {
-              roughness,
-              seed,
-              sketchColor: ink,
-              bowing,
-              fillStyle: fillStyle ?? "solid",
-              fill: "#f7f6f2",
-              strokeWidth: strokeWidth ?? 2,
-              shadow: true,
-              contentStyle: { padding: "20px 22px 18px" },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  "div",
-                  {
-                    style: {
-                      display: "flex",
-                      alignItems: "flex-start",
-                      justifyContent: "space-between",
-                      gap: 12,
-                      marginBottom: title ? 10 : 0
-                    },
-                    children: [
-                      title ? /* @__PURE__ */ jsxRuntime.jsx(
-                        Dialog__namespace.Title,
-                        {
-                          style: {
-                            margin: 0,
-                            fontSize: 18,
-                            fontWeight: doodleUiFontWeight(700),
-                            fontFamily: doodleUiFontFamily,
-                            color: ink
-                          },
-                          children: title
-                        }
-                      ) : /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Title, { style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }, children: "Dialog" }),
-                      /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-                        Button,
-                        {
-                          variant: "ghost",
-                          size: "sm",
-                          roughness,
-                          seed,
-                          sketchColor: ink,
-                          "aria-label": "Close",
-                          children: "Close"
-                        }
-                      ) })
-                    ]
-                  }
-                ),
-                description ? /* @__PURE__ */ jsxRuntime.jsx(
-                  Dialog__namespace.Description,
-                  {
-                    style: {
-                      margin: "0 0 14px",
-                      fontSize: 14,
-                      lineHeight: 1.5,
-                      color: ink,
-                      opacity: 0.8
-                    },
-                    children: description
-                  }
-                ) : null,
-                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "flex-start",
+                          justifyContent: "space-between",
+                          gap: 12,
+                          marginBottom: title ? 10 : 0
+                        },
+                        children: [
+                          title ? /* @__PURE__ */ jsxRuntime.jsx(
+                            Dialog__namespace.Title,
+                            {
+                              style: {
+                                margin: 0,
+                                fontSize: 18,
+                                fontWeight: doodleUiFontWeight(700),
+                                fontFamily: doodleUiFontFamily,
+                                color: ink
+                              },
+                              children: title
+                            }
+                          ) : /* @__PURE__ */ jsxRuntime.jsx(
+                            Dialog__namespace.Title,
+                            {
+                              style: {
+                                position: "absolute",
+                                width: 1,
+                                height: 1,
+                                overflow: "hidden",
+                                clip: "rect(0 0 0 0)"
+                              },
+                              children: "Dialog"
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                            Button,
+                            {
+                              variant: "ghost",
+                              size: "sm",
+                              roughness,
+                              seed,
+                              sketchColor: ink,
+                              animate,
+                              "aria-label": "Close",
+                              children: "Close"
+                            }
+                          ) })
+                        ]
+                      }
+                    ),
+                    description ? /* @__PURE__ */ jsxRuntime.jsx(
+                      Dialog__namespace.Description,
+                      {
+                        style: {
+                          margin: "0 0 14px",
+                          fontSize: 14,
+                          lineHeight: 1.5,
+                          color: ink,
+                          opacity: 0.8
+                        },
+                        children: description
+                      }
+                    ) : null,
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { children })
+                  ]
+                }
+              )
             }
-          )
+          ) })
         }
       )
-    ] })
+    ] }) : null })
   ] });
 }
 var ModalRoot = Dialog__namespace.Root;
@@ -1140,13 +1504,20 @@ var Divider = react.forwardRef(
     sketchColor,
     bowing,
     strokeWidth,
+    animate,
     ...rest
   }, ref) {
+    const rootRef = react.useRef(null);
+    const shouldAnimate = useAnimate(animate);
     const horizontal = orientation === "horizontal";
+    useDrawIn(rootRef, DRAW_IN_DURATION_MS, shouldAnimate);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        ref,
+        ref: (node) => {
+          rootRef.current = node;
+          assignRef(ref, node);
+        },
         role: "separator",
         "aria-orientation": orientation,
         className: cn(className),
@@ -1186,15 +1557,27 @@ var Progress = react.forwardRef(
     bowing,
     fillStyle,
     strokeWidth,
+    animate,
     ...rest
   }, ref) {
+    const rootRef = react.useRef(null);
+    const trackRef = react.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__ */ jsxRuntime.jsxs(
       "div",
       {
-        ref,
+        ref: (node) => {
+          rootRef.current = node;
+          assignRef(ref, node);
+        },
         role: "progressbar",
         "aria-valuemin": 0,
         "aria-valuemax": max,
@@ -1209,18 +1592,25 @@ var Progress = react.forwardRef(
         ...rest,
         children: [
           /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                RoughSvg,
+                {
+                  shape: "rectangle",
+                  roughness,
+                  seed: resolvedSeed,
+                  sketchColor: SKETCH_COLORS.ink,
+                  bowing,
+                  strokeWidth: strokeWidth ?? 1.5,
+                  inset: 2
+                }
+              )
             }
           ),
-          percent > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+          displayed > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               style: {
@@ -1228,16 +1618,16 @@ var Progress = react.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__ */ jsxRuntime.jsx(
                 RoughSvg,
                 {
                   shape: "rectangle",
-                  roughness: (roughness ?? 1.5) + 0.55,
-                  seed,
+                  roughness: fillRoughness,
+                  seed: fillSeed,
                   sketchColor: ink,
                   fill: ink,
                   fillStyle: fillStyle ?? "hachure",
@@ -1265,7 +1655,8 @@ function Tooltip({
   sketchColor,
   bowing,
   fillStyle,
-  strokeWidth
+  strokeWidth,
+  animate
 }) {
   const ink = sketchColor ?? SKETCH_COLORS.ink;
   return /* @__PURE__ */ jsxRuntime.jsxs(TooltipPrimitive__namespace.Root, { delayDuration, children: [
@@ -1287,6 +1678,8 @@ function Tooltip({
             fillStyle: fillStyle ?? "solid",
             fill: "#f7f6f2",
             strokeWidth: strokeWidth ?? 1.4,
+            animate,
+            drawInDuration: DRAW_IN_TOOLTIP_MS,
             contentStyle: {
               padding: "6px 10px",
               fontSize: 13,
@@ -1328,6 +1721,7 @@ function Select({
   value,
   defaultValue,
   onValueChange,
+  animate,
   "aria-label": ariaLabel,
   ...rest
 }) {
@@ -1350,7 +1744,8 @@ function Select({
         ink,
         selectedValue,
         selectedLabel,
-        placeholder
+        placeholder,
+        animate
       },
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         SelectPrimitive__namespace.Root,
@@ -1391,10 +1786,16 @@ var SelectTrigger = react.forwardRef(
   function SelectTrigger2({ className, style, placeholder, children, ...rest }, ref) {
     const sketch = useSelectSketch();
     const [openish, setOpenish] = react.useState(false);
+    const rootRef = react.useRef(null);
+    const shouldAnimate = useAnimate(sketch.animate);
+    useDrawIn(rootRef, DRAW_IN_DURATION_MS, shouldAnimate);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       SelectPrimitive__namespace.Trigger,
       {
-        ref,
+        ref: (node) => {
+          rootRef.current = node;
+          assignRef(ref, node);
+        },
         className: cn(className),
         onPointerDown: () => setOpenish(true),
         onBlur: () => setOpenish(false),
@@ -1503,6 +1904,7 @@ var SelectContent = react.forwardRef(
             fillStyle: sketch.fillStyle ?? "solid",
             fill: "#f7f6f2",
             strokeWidth: sketch.strokeWidth ?? 1.5,
+            animate: sketch.animate,
             contentStyle: { padding: "6px 4px" },
             children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Viewport, { children })
           }
@@ -1593,12 +1995,17 @@ var Switch = react.forwardRef(
     defaultChecked,
     onCheckedChange,
     id,
+    animate,
     ...rest
   }, ref) {
     const [uncontrolled, setUncontrolled] = react.useState(defaultChecked === true);
     const isOn = checked ?? uncontrolled;
     const ink = sketchColor ?? SKETCH_COLORS.ink;
     const resolvedSeed = useResolvedSeed(seed);
+    const shouldAnimate = useAnimate(animate);
+    const trackRef = react.useRef(null);
+    const trackSeed = shouldAnimate ? deriveSeed(resolvedSeed, isOn ? "on" : "off") : resolvedSeed;
+    useDrawIn(trackRef, DRAW_IN_DURATION_MS, shouldAnimate, trackSeed);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "span",
       {
@@ -1637,22 +2044,32 @@ var Switch = react.forwardRef(
               ...rest,
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  RoughSvg,
+                  "span",
                   {
-                    shape: "rectangle",
-                    roughness,
-                    seed: resolvedSeed,
-                    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
+                    ref: trackRef,
+                    style: { position: "absolute", inset: 0, pointerEvents: "none" },
+                    children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                  SwitchPrimitive__namespace.Thumb,
+                /* @__PURE__ */ jsxRuntime.jsx(SwitchPrimitive__namespace.Thumb, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  framerMotion.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,
@@ -1660,8 +2077,6 @@ var Switch = react.forwardRef(
                       width: THUMB,
                       height: THUMB,
                       display: "block",
-                      transform: `translateX(${isOn ? THUMB_ON : THUMB_OFF}px)`,
-                      transition: "transform 160ms ease",
                       zIndex: 1
                     },
                     children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1679,7 +2094,7 @@ var Switch = react.forwardRef(
                       }
                     )
                   }
-                )
+                ) })
               ]
             }
           ),
@@ -1721,12 +2136,14 @@ var Tabs = react.forwardRef(function Tabs2({
   bowing,
   fillStyle,
   strokeWidth,
+  animate,
   ...rest
 }, ref) {
   const [uncontrolled, setUncontrolled] = react.useState(defaultValue);
   const current = value ?? uncontrolled;
   const resolvedSeed = useResolvedSeed(seed);
   const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const shouldAnimate = useAnimate(animate);
   return /* @__PURE__ */ jsxRuntime.jsx(
     TabsSketchContext.Provider,
     {
@@ -1739,7 +2156,8 @@ var Tabs = react.forwardRef(function Tabs2({
         strokeWidth,
         resolvedSeed,
         ink,
-        current
+        current,
+        shouldAnimate
       },
       children: /* @__PURE__ */ jsxRuntime.jsx(
         TabsPrimitive__namespace.Root,
@@ -1760,29 +2178,102 @@ var Tabs = react.forwardRef(function Tabs2({
     }
   );
 });
+function TabUnderline({
+  box,
+  seed,
+  sketch
+}) {
+  const ref = react.useRef(null);
+  useDrawIn(ref, DRAW_IN_MARK_MS, sketch.shouldAnimate, seed);
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 = react.forwardRef(
   function TabList2({ className, style, children, ...rest }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    const sketch = useTabsSketch();
+    const listRef = react.useRef(null);
+    const [underline, setUnderline] = react.useState(null);
+    react.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__ */ jsxRuntime.jsxs(
       TabsPrimitive__namespace.List,
       {
-        ref,
+        ref: (node) => {
+          listRef.current = node;
+          assignRef(ref, node);
+        },
         className: cn(className),
         style: {
           display: "flex",
           flexWrap: "wrap",
           gap: 4,
+          position: "relative",
           ...style
         },
         ...rest,
-        children
-      }
-    );
+        children: [
+          children,
+          underline && sketch.current ? /* @__PURE__ */ jsxRuntime.jsx(
+            TabUnderline,
+            {
+              box: underline,
+              seed: deriveSeed(sketch.resolvedSeed, sketch.current),
+              sketch
+            }
+          ) : null
+        ]
+      }
+    );
   }
 );
 var Tab = react.forwardRef(function Tab2({ className, style, children, value, ...rest }, ref) {
   const sketch = useTabsSketch();
   const active = sketch.current === value;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     TabsPrimitive__namespace.Trigger,
     {
       ref,
@@ -1802,34 +2293,7 @@ var Tab = react.forwardRef(function Tab2({ className, style, children, value, ..
         ...style
       },
       ...rest,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { position: "relative", zIndex: 1 }, children }),
-        active ? /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            style: {
-              position: "absolute",
-              left: 8,
-              right: 8,
-              bottom: 2,
-              height: 10,
-              pointerEvents: "none"
-            },
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              RoughSvg,
-              {
-                shape: "line",
-                roughness: (sketch.roughness ?? 1.5) + 0.35,
-                seed: deriveSeed(sketch.resolvedSeed, value),
-                sketchColor: SKETCH_COLORS.accent,
-                bowing: sketch.bowing ?? 1.8,
-                strokeWidth: (sketch.strokeWidth ?? 1.75) + 0.4,
-                inset: 2
-              }
-            )
-          }
-        ) : null
-      ]
+      children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { position: "relative", zIndex: 1 }, children })
     }
   );
 });
@@ -1864,6 +2328,46 @@ function useTableSketch() {
   }
   return ctx;
 }
+function TableRule({
+  line,
+  headerUnderline,
+  roughness,
+  resolvedSeed,
+  ink,
+  bowing,
+  strokeWidth,
+  shouldAnimate
+}) {
+  const ref = react.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__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      style: {
+        position: "absolute",
+        left: 0,
+        width: line.width,
+        top: line.y - 6,
+        height: 12
+      },
+      children: /* @__PURE__ */ jsxRuntime.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 = react.forwardRef(function Table2({
   className,
   style,
@@ -1875,6 +2379,7 @@ var Table = react.forwardRef(function Table2({
   bowing,
   fillStyle,
   strokeWidth,
+  animate,
   ...rest
 }, ref) {
   const wrapperRef = react.useRef(null);
@@ -1882,6 +2387,7 @@ var Table = react.forwardRef(function Table2({
   const [lines, setLines] = react.useState([]);
   const resolvedSeed = useResolvedSeed(seed);
   const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const shouldAnimate = useAnimate(animate);
   react.useLayoutEffect(() => {
     const wrapper = wrapperRef.current;
     const table = tableRef.current;
@@ -1897,7 +2403,8 @@ var Table = react.forwardRef(function Table2({
           y: row.offsetTop + row.offsetHeight,
           width: table.offsetWidth,
           key: isHeader ? `header-${index}` : `row-${index}`,
-          header: Boolean(isHeader)
+          header: Boolean(isHeader),
+          index
         });
       });
       setLines(next);
@@ -1919,7 +2426,8 @@ var Table = react.forwardRef(function Table2({
         fillStyle,
         strokeWidth,
         resolvedSeed,
-        ink
+        ink,
+        shouldAnimate
       },
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
@@ -1939,34 +2447,20 @@ var Table = react.forwardRef(function Table2({
                   zIndex: 1,
                   overflow: "visible"
                 },
-                children: lines.map((line) => {
-                  if (line.header && !headerUnderline) return null;
-                  return /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      style: {
-                        position: "absolute",
-                        left: 0,
-                        width: line.width,
-                        top: line.y - 6,
-                        height: 12
-                      },
-                      children: /* @__PURE__ */ jsxRuntime.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
-                        }
-                      )
-                    },
-                    line.key
-                  );
-                })
+                children: lines.map((line) => /* @__PURE__ */ jsxRuntime.jsx(
+                  TableRule,
+                  {
+                    line,
+                    headerUnderline,
+                    roughness,
+                    resolvedSeed,
+                    ink,
+                    bowing,
+                    strokeWidth,
+                    shouldAnimate
+                  },
+                  line.key
+                ))
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -1974,8 +2468,7 @@ var Table = react.forwardRef(function Table2({
               {
                 ref: (node) => {
                   tableRef.current = node;
-                  if (typeof ref === "function") ref(node);
-                  else if (ref) ref.current = node;
+                  assignRef(ref, node);
                 },
                 style: {
                   width: "100%",
@@ -2137,84 +2630,89 @@ function Toast({
   sketchColor,
   bowing,
   fillStyle,
-  strokeWidth
+  strokeWidth,
+  animate
 }) {
   const position = react.useContext(ToastPositionContext);
   const fromTop = position.startsWith("top");
-  const [entered, setEntered] = react.useState(false);
+  const [uncontrolled, setUncontrolled] = react.useState(defaultOpen ?? false);
+  const isOpen = open ?? uncontrolled;
+  const shouldAnimate = useAnimate(animate);
   const color = sketchColor ?? VARIANT_COLOR2[variant];
-  const visible = open ?? true;
-  react.useLayoutEffect(() => {
-    if (!visible) {
-      setEntered(false);
-      return;
-    }
-    setEntered(false);
-    const frame = requestAnimationFrame(() => {
-      requestAnimationFrame(() => setEntered(true));
-    });
-    return () => cancelAnimationFrame(frame);
-  }, [visible]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const offset = fromTop ? -14 : 14;
+  function handleOpenChange(next) {
+    setUncontrolled(next);
+    onOpenChange?.(next);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen ? /* @__PURE__ */ jsxRuntime.jsx(
     ToastPrimitive__namespace.Root,
     {
-      open,
-      defaultOpen,
-      onOpenChange,
+      open: isOpen,
+      onOpenChange: handleOpenChange,
       duration,
-      className: cn(className),
-      style: {
-        transform: entered ? "translateY(0)" : `translateY(${fromTop ? "-10px" : "10px"})`,
-        opacity: entered ? 1 : 0,
-        transition: "transform 200ms ease, opacity 200ms ease",
-        outline: "none",
-        ...style
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        SketchBox,
+      forceMount: true,
+      asChild: true,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        framerMotion.motion.li,
         {
-          roughness,
-          seed,
-          sketchColor: color,
-          bowing,
-          fillStyle: fillStyle ?? "hachure",
-          fill: VARIANT_FILL2[variant],
-          strokeWidth: strokeWidth ?? 1.7,
-          shadow: true,
-          contentStyle: { padding: "12px 16px" },
-          children: [
-            title ? /* @__PURE__ */ jsxRuntime.jsx(
-              ToastPrimitive__namespace.Title,
-              {
-                style: {
-                  margin: 0,
-                  fontWeight: doodleUiFontWeight(700),
-                  fontSize: 15,
-                  fontFamily: doodleUiFontFamily,
-                  color,
-                  marginBottom: children ? 4 : 0
-                },
-                children: title
-              }
-            ) : null,
-            children ? /* @__PURE__ */ jsxRuntime.jsx(
-              ToastPrimitive__namespace.Description,
-              {
-                style: {
-                  margin: 0,
-                  fontSize: 14,
-                  lineHeight: 1.5,
-                  fontFamily: doodleUiFontFamily,
-                  color: SKETCH_COLORS.ink
-                },
-                children
-              }
-            ) : null
-          ]
+          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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                  ToastPrimitive__namespace.Title,
+                  {
+                    style: {
+                      margin: 0,
+                      fontWeight: doodleUiFontWeight(700),
+                      fontSize: 15,
+                      fontFamily: doodleUiFontFamily,
+                      color,
+                      marginBottom: children ? 4 : 0
+                    },
+                    children: title
+                  }
+                ) : null,
+                children ? /* @__PURE__ */ jsxRuntime.jsx(
+                  ToastPrimitive__namespace.Description,
+                  {
+                    style: {
+                      margin: 0,
+                      fontSize: 14,
+                      lineHeight: 1.5,
+                      fontFamily: doodleUiFontFamily,
+                      color: SKETCH_COLORS.ink
+                    },
+                    children
+                  }
+                ) : null
+              ]
+            }
+          )
         }
       )
     }
-  );
+  ) : null });
 }
 var ToastRoot = ToastPrimitive__namespace.Root;
 var ToastTitle = ToastPrimitive__namespace.Title;
@@ -3245,12 +3743,1495 @@ var Stepper = react.forwardRef(
     );
   }
 );
+var Label2 = react.forwardRef(function Label3({
+  className,
+  style,
+  children,
+  required,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  strokeWidth,
+  animate,
+  ...rest
+}, ref) {
+  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const resolvedSeed = useResolvedSeed(seed);
+  const shouldAnimate = useAnimate(animate);
+  const markRef = react.useRef(null);
+  useDrawIn(markRef, DRAW_IN_MARK_MS, shouldAnimate);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    LabelPrimitive__namespace.Root,
+    {
+      ref,
+      className: cn(className),
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 4,
+        fontFamily: doodleUiFontFamily,
+        fontSize: 13,
+        fontWeight: doodleUiFontWeight(600),
+        color: ink,
+        cursor: "default",
+        ...style
+      },
+      ...rest,
+      children: [
+        children,
+        required ? /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            ref: markRef,
+            "aria-hidden": "true",
+            style: { position: "relative", width: 10, height: 10, flexShrink: 0 },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              RoughSvg,
+              {
+                shape: "ellipse",
+                roughness: (roughness ?? 1.5) * 0.9,
+                seed: resolvedSeed,
+                sketchColor: SKETCH_COLORS.accent,
+                bowing,
+                fillStyle: "solid",
+                fill: SKETCH_COLORS.accent,
+                strokeWidth: strokeWidth ?? 1.2,
+                inset: 1
+              }
+            )
+          }
+        ) : null
+      ]
+    }
+  );
+});
+var CHEVRON_PATH4 = "M 6 4 L 12 10 L 6 16";
+var CollapsibleSketchContext = react.createContext(null);
+function useCollapsibleSketch() {
+  const ctx = react.useContext(CollapsibleSketchContext);
+  if (!ctx) {
+    throw new Error(
+      "Collapsible parts must be used inside <Collapsible>."
+    );
+  }
+  return ctx;
+}
+var Collapsible = react.forwardRef(
+  function Collapsible2({
+    className,
+    style,
+    children,
+    open,
+    defaultOpen,
+    onOpenChange,
+    disabled,
+    roughness,
+    seed,
+    sketchColor,
+    bowing,
+    fillStyle,
+    strokeWidth,
+    ...rest
+  }, ref) {
+    const resolvedSeed = useResolvedSeed(seed);
+    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const [uncontrolled, setUncontrolled] = react.useState(defaultOpen ?? false);
+    const isOpen = open ?? uncontrolled;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      CollapsibleSketchContext.Provider,
+      {
+        value: {
+          roughness,
+          seed: resolvedSeed,
+          sketchColor,
+          bowing,
+          fillStyle,
+          strokeWidth,
+          resolvedSeed,
+          ink,
+          open: isOpen
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          CollapsiblePrimitive__namespace.Root,
+          {
+            ref,
+            open: isOpen,
+            disabled,
+            className: cn(className),
+            style,
+            onOpenChange: (next) => {
+              setUncontrolled(next);
+              onOpenChange?.(next);
+            },
+            ...rest,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+var CollapsibleTrigger = react.forwardRef(function CollapsibleTrigger2({ className, style, children, ...rest }, ref) {
+  const sketch = useCollapsibleSketch();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    CollapsiblePrimitive__namespace.Trigger,
+    {
+      ref,
+      className: cn(className),
+      style: {
+        display: "flex",
+        width: "100%",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 12,
+        padding: "10px 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__ */ jsxRuntime.jsx("span", { children }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            style: {
+              position: "relative",
+              width: 18,
+              height: 18,
+              flexShrink: 0,
+              transform: sketch.open ? "rotate(90deg)" : "rotate(0deg)",
+              transition: "transform 180ms ease"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              RoughSvg,
+              {
+                shape: "path",
+                path: CHEVRON_PATH4,
+                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 CollapsibleContent = react.forwardRef(function CollapsibleContent2({ className, style, children, ...rest }, ref) {
+  const sketch = useCollapsibleSketch();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    CollapsiblePrimitive__namespace.Content,
+    {
+      ref,
+      className: cn(className),
+      style: {
+        padding: "0 4px 12px",
+        fontFamily: doodleUiFontFamily,
+        fontSize: 14,
+        lineHeight: 1.5,
+        color: sketch.ink,
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+});
+var PopoverSketchContext = react.createContext(
+  null
+);
+function usePopoverSketch() {
+  const ctx = react.useContext(PopoverSketchContext);
+  if (!ctx) {
+    throw new Error("Popover parts must be used inside <Popover>.");
+  }
+  return ctx;
+}
+function Popover({
+  children,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  fillStyle,
+  strokeWidth,
+  animate,
+  ...rest
+}) {
+  const resolvedSeed = useResolvedSeed(seed);
+  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    PopoverSketchContext.Provider,
+    {
+      value: {
+        roughness,
+        seed: resolvedSeed,
+        sketchColor,
+        bowing,
+        fillStyle,
+        strokeWidth,
+        resolvedSeed,
+        ink,
+        animate
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Root, { ...rest, children })
+    }
+  );
+}
+var PopoverTrigger = PopoverPrimitive__namespace.Trigger;
+var PopoverAnchor = PopoverPrimitive__namespace.Anchor;
+var PopoverClose = PopoverPrimitive__namespace.Close;
+var PopoverContent = react.forwardRef(
+  function PopoverContent2({ className, style, children, sideOffset = 8, ...rest }, ref) {
+    const sketch = usePopoverSketch();
+    return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      PopoverPrimitive__namespace.Content,
+      {
+        ref,
+        sideOffset,
+        className: cn(className),
+        style: { zIndex: 80, outline: "none", ...style },
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.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,
+            shadow: true,
+            animate: sketch.animate,
+            contentStyle: { padding: "14px 16px", minWidth: 200 },
+            children
+          }
+        )
+      }
+    ) });
+  }
+);
+var PopoverArrow = react.forwardRef(
+  function PopoverArrow2(props, ref) {
+    const sketch = usePopoverSketch();
+    return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Arrow, { ref, fill: sketch.ink, ...props });
+  }
+);
+var DropdownMenuSketchContext = react.createContext(null);
+function useDropdownMenuSketch() {
+  const ctx = react.useContext(DropdownMenuSketchContext);
+  if (!ctx) {
+    throw new Error(
+      "DropdownMenu parts must be used inside <DropdownMenu>."
+    );
+  }
+  return ctx;
+}
+function DropdownMenu({
+  children,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  fillStyle,
+  strokeWidth,
+  animate,
+  ...rest
+}) {
+  const resolvedSeed = useResolvedSeed(seed);
+  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownMenuSketchContext.Provider,
+    {
+      value: {
+        roughness,
+        seed: resolvedSeed,
+        sketchColor,
+        bowing,
+        fillStyle,
+        strokeWidth,
+        resolvedSeed,
+        ink,
+        animate
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Root, { ...rest, children })
+    }
+  );
+}
+var DropdownMenuTrigger = DropdownMenuPrimitive__namespace.Trigger;
+var DropdownMenuGroup = DropdownMenuPrimitive__namespace.Group;
+var DropdownMenuRadioGroup = DropdownMenuPrimitive__namespace.RadioGroup;
+var DropdownMenuSub = DropdownMenuPrimitive__namespace.Sub;
+var DropdownMenuContent = react.forwardRef(function DropdownMenuContent2({ className, style, children, sideOffset = 6, align = "start", ...rest }, ref) {
+  const sketch = useDropdownMenuSketch();
+  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownMenuPrimitive__namespace.Content,
+    {
+      ref,
+      sideOffset,
+      align,
+      className: cn(className),
+      style: { zIndex: 80, outline: "none", minWidth: 180, ...style },
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.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,
+          shadow: true,
+          animate: sketch.animate,
+          contentStyle: { padding: "6px 4px" },
+          children
+        }
+      )
+    }
+  ) });
+});
+function useMark(highlighted) {
+  const sketch = useDropdownMenuSketch();
+  return { sketch, mark: highlighted };
+}
+var DropdownMenuItem = react.forwardRef(function DropdownMenuItem2({ className, style, children, inset, ...rest }, ref) {
+  const [highlighted, setHighlighted] = react.useState(false);
+  const { sketch, mark } = useMark(highlighted);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    DropdownMenuPrimitive__namespace.Item,
+    {
+      ref,
+      className: cn(className),
+      onPointerMove: () => setHighlighted(true),
+      onPointerLeave: () => setHighlighted(false),
+      onFocus: () => setHighlighted(true),
+      onBlur: () => setHighlighted(false),
+      style: {
+        position: "relative",
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        padding: inset ? "7px 12px 7px 26px" : "7px 12px",
+        fontFamily: doodleUiFontFamily,
+        fontSize: 14,
+        color: sketch.ink,
+        outline: "none",
+        cursor: "pointer",
+        userSelect: "none",
+        ...style
+      },
+      ...rest,
+      children: [
+        mark ? /* @__PURE__ */ jsxRuntime.jsx(
+          RoughSvg,
+          {
+            shape: "line",
+            roughness: (sketch.roughness ?? 1.5) + 0.4,
+            seed: sketch.resolvedSeed,
+            sketchColor: sketch.ink,
+            bowing: sketch.bowing ?? 1.6,
+            strokeWidth: 1.3,
+            inset: 4,
+            style: { opacity: 0.4 }
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { position: "relative", zIndex: 1 }, children })
+      ]
+    }
+  );
+});
+var CHECK_PATH2 = "M 2 6 L 5 9 L 10 3";
+var DropdownMenuCheckboxItem = react.forwardRef(function DropdownMenuCheckboxItem2({ className, style, children, checked, ...rest }, ref) {
+  const [highlighted, setHighlighted] = react.useState(false);
+  const { sketch, mark } = useMark(highlighted);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    DropdownMenuPrimitive__namespace.CheckboxItem,
+    {
+      ref,
+      checked,
+      className: cn(className),
+      onPointerMove: () => setHighlighted(true),
+      onPointerLeave: () => setHighlighted(false),
+      style: {
+        position: "relative",
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        padding: "7px 12px 7px 26px",
+        fontFamily: doodleUiFontFamily,
+        fontSize: 14,
+        color: sketch.ink,
+        outline: "none",
+        cursor: "pointer",
+        userSelect: "none",
+        ...style
+      },
+      ...rest,
+      children: [
+        mark ? /* @__PURE__ */ jsxRuntime.jsx(
+          RoughSvg,
+          {
+            shape: "line",
+            roughness: (sketch.roughness ?? 1.5) + 0.4,
+            seed: sketch.resolvedSeed,
+            sketchColor: sketch.ink,
+            bowing: sketch.bowing ?? 1.6,
+            strokeWidth: 1.3,
+            inset: 4,
+            style: { opacity: 0.4 }
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            style: {
+              position: "relative",
+              width: 12,
+              height: 12,
+              flexShrink: 0,
+              marginLeft: -18
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              RoughSvg,
+              {
+                shape: "path",
+                path: CHECK_PATH2,
+                roughness: (sketch.roughness ?? 1.5) * 0.7,
+                seed: deriveSeed(sketch.resolvedSeed, "checkbox-mark"),
+                sketchColor: SKETCH_COLORS.accent,
+                bowing: sketch.bowing,
+                strokeWidth: 1.6,
+                inset: 0
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { position: "relative", zIndex: 1 }, children })
+      ]
+    }
+  );
+});
+var DropdownMenuRadioItem = react.forwardRef(function DropdownMenuRadioItem2({ className, style, children, ...rest }, ref) {
+  const [highlighted, setHighlighted] = react.useState(false);
+  const { sketch, mark } = useMark(highlighted);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    DropdownMenuPrimitive__namespace.RadioItem,
+    {
+      ref,
+      className: cn(className),
+      onPointerMove: () => setHighlighted(true),
+      onPointerLeave: () => setHighlighted(false),
+      style: {
+        position: "relative",
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        padding: "7px 12px 7px 26px",
+        fontFamily: doodleUiFontFamily,
+        fontSize: 14,
+        color: sketch.ink,
+        outline: "none",
+        cursor: "pointer",
+        userSelect: "none",
+        ...style
+      },
+      ...rest,
+      children: [
+        mark ? /* @__PURE__ */ jsxRuntime.jsx(
+          RoughSvg,
+          {
+            shape: "line",
+            roughness: (sketch.roughness ?? 1.5) + 0.4,
+            seed: sketch.resolvedSeed,
+            sketchColor: sketch.ink,
+            bowing: sketch.bowing ?? 1.6,
+            strokeWidth: 1.3,
+            inset: 4,
+            style: { opacity: 0.4 }
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            style: {
+              position: "relative",
+              width: 8,
+              height: 8,
+              flexShrink: 0,
+              marginLeft: -18
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              RoughSvg,
+              {
+                shape: "ellipse",
+                roughness: (sketch.roughness ?? 1.5) * 0.8,
+                seed: deriveSeed(sketch.resolvedSeed, "radio-mark"),
+                sketchColor: SKETCH_COLORS.accent,
+                bowing: sketch.bowing,
+                fillStyle: "solid",
+                fill: SKETCH_COLORS.accent,
+                strokeWidth: 1.2,
+                inset: 0
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { position: "relative", zIndex: 1 }, children })
+      ]
+    }
+  );
+});
+var DropdownMenuLabel = react.forwardRef(function DropdownMenuLabel2({ className, style, children, ...rest }, ref) {
+  const sketch = useDropdownMenuSketch();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownMenuPrimitive__namespace.Label,
+    {
+      ref,
+      className: cn(className),
+      style: {
+        padding: "6px 12px",
+        fontFamily: doodleUiFontFamily,
+        fontSize: 12,
+        fontWeight: 700,
+        color: sketch.ink,
+        opacity: 0.6,
+        textTransform: "uppercase",
+        letterSpacing: 0.4,
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+});
+var DropdownMenuSeparator = react.forwardRef(function DropdownMenuSeparator2({ className, style, ...rest }, ref) {
+  const sketch = useDropdownMenuSketch();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownMenuPrimitive__namespace.Separator,
+    {
+      ref,
+      className: cn(className),
+      style: { position: "relative", height: 10, margin: "2px 0", ...style },
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        RoughSvg,
+        {
+          shape: "line",
+          roughness: (sketch.roughness ?? 1.5) + 0.2,
+          seed: deriveSeed(sketch.resolvedSeed, "separator"),
+          sketchColor: sketch.ink,
+          bowing: sketch.bowing ?? 1.8,
+          strokeWidth: 1.2,
+          inset: 6,
+          style: { opacity: 0.5 }
+        }
+      )
+    }
+  );
+});
+var DialogSketchContext = react.createContext(
+  null
+);
+function useDialogSketch() {
+  const ctx = react.useContext(DialogSketchContext);
+  if (!ctx) {
+    throw new Error("Dialog parts must be used inside <Dialog>.");
+  }
+  return ctx;
+}
+function Dialog2({
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  fillStyle,
+  strokeWidth,
+  animate,
+  ...rest
+}) {
+  const resolvedSeed = useResolvedSeed(seed);
+  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const [uncontrolled, setUncontrolled] = react.useState(defaultOpen === true);
+  const isOpen = open ?? uncontrolled;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DialogSketchContext.Provider,
+    {
+      value: {
+        roughness,
+        seed: resolvedSeed,
+        sketchColor,
+        bowing,
+        fillStyle,
+        strokeWidth,
+        resolvedSeed,
+        ink,
+        animate,
+        open: isOpen
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Dialog__namespace.Root,
+        {
+          open: isOpen,
+          onOpenChange: (next) => {
+            setUncontrolled(next);
+            onOpenChange?.(next);
+          },
+          ...rest,
+          children
+        }
+      )
+    }
+  );
+}
+var DialogTrigger = Dialog__namespace.Trigger;
+var DialogPortal = Dialog__namespace.Portal;
+var DialogClose = Dialog__namespace.Close;
+var DialogOverlay = react.forwardRef(
+  function DialogOverlay2({ style, ...rest }, ref) {
+    const sketch = useDialogSketch();
+    const shouldAnimate = useAnimate(sketch.animate);
+    return /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Overlay, { ref, asChild: true, forceMount: true, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
+      framerMotion.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,
+          background: "rgba(31, 29, 26, 0.38)",
+          zIndex: 70,
+          ...style
+        }
+      }
+    ) });
+  }
+);
+var DialogContent = react.forwardRef(
+  function DialogContent2({ className, style, contentStyle, children, ...rest }, ref) {
+    const sketch = useDialogSketch();
+    const shouldAnimate = useAnimate(sketch.animate);
+    return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: sketch.open ? /* @__PURE__ */ jsxRuntime.jsxs(Dialog__namespace.Portal, { forceMount: true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            inset: 0,
+            zIndex: 80,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            pointerEvents: "none",
+            padding: 16
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Content, { ref, asChild: true, forceMount: true, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
+            framerMotion.motion.div,
+            {
+              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(420px, calc(100vw - 32px))",
+                outline: "none",
+                pointerEvents: "auto",
+                ...style
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                SketchBox,
+                {
+                  roughness: sketch.roughness,
+                  seed: sketch.resolvedSeed,
+                  sketchColor: sketch.ink,
+                  bowing: sketch.bowing,
+                  fillStyle: sketch.fillStyle ?? "solid",
+                  fill: "#f7f6f2",
+                  strokeWidth: sketch.strokeWidth ?? 2,
+                  animate: sketch.animate,
+                  contentStyle: { padding: 20, ...contentStyle },
+                  children
+                }
+              )
+            }
+          ) })
+        }
+      )
+    ] }) : null });
+  }
+);
+function DialogHeader({ children, className, style }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(className),
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 6,
+        marginBottom: 12,
+        ...style
+      },
+      children
+    }
+  );
+}
+function DialogFooter({ children, className, style }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(className),
+      style: {
+        display: "flex",
+        justifyContent: "flex-end",
+        gap: 8,
+        marginTop: 16,
+        ...style
+      },
+      children
+    }
+  );
+}
+var DialogTitle = react.forwardRef(
+  function DialogTitle2({ style, ...rest }, ref) {
+    const sketch = useDialogSketch();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Dialog__namespace.Title,
+      {
+        ref,
+        style: {
+          margin: 0,
+          fontSize: 18,
+          fontWeight: doodleUiFontWeight(700),
+          fontFamily: doodleUiFontFamily,
+          color: sketch.ink,
+          ...style
+        },
+        ...rest
+      }
+    );
+  }
+);
+var DialogDescription = react.forwardRef(function DialogDescription2({ style, ...rest }, ref) {
+  const sketch = useDialogSketch();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Dialog__namespace.Description,
+    {
+      ref,
+      style: {
+        margin: 0,
+        fontSize: 14,
+        lineHeight: 1.5,
+        fontFamily: doodleUiFontFamily,
+        color: sketch.ink,
+        opacity: 0.8,
+        ...style
+      },
+      ...rest
+    }
+  );
+});
+var AlertDialogSketchContext = react.createContext(null);
+function useAlertDialogSketch() {
+  const ctx = react.useContext(AlertDialogSketchContext);
+  if (!ctx) {
+    throw new Error(
+      "AlertDialog parts must be used inside <AlertDialog>."
+    );
+  }
+  return ctx;
+}
+function AlertDialog({
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  fillStyle,
+  strokeWidth,
+  animate,
+  ...rest
+}) {
+  const resolvedSeed = useResolvedSeed(seed);
+  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const [uncontrolled, setUncontrolled] = react.useState(defaultOpen === true);
+  const isOpen = open ?? uncontrolled;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AlertDialogSketchContext.Provider,
+    {
+      value: {
+        roughness,
+        seed: resolvedSeed,
+        sketchColor,
+        bowing,
+        fillStyle,
+        strokeWidth,
+        resolvedSeed,
+        ink,
+        animate,
+        open: isOpen
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        AlertDialogPrimitive__namespace.Root,
+        {
+          open: isOpen,
+          onOpenChange: (next) => {
+            setUncontrolled(next);
+            onOpenChange?.(next);
+          },
+          ...rest,
+          children
+        }
+      )
+    }
+  );
+}
+var AlertDialogTrigger = AlertDialogPrimitive__namespace.Trigger;
+var AlertDialogPortal = AlertDialogPrimitive__namespace.Portal;
+var AlertDialogOverlay = react.forwardRef(function AlertDialogOverlay2({ style, ...rest }, ref) {
+  const sketch = useAlertDialogSketch();
+  const shouldAnimate = useAnimate(sketch.animate);
+  return /* @__PURE__ */ jsxRuntime.jsx(AlertDialogPrimitive__namespace.Overlay, { ref, asChild: true, forceMount: true, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.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,
+        background: "rgba(31, 29, 26, 0.38)",
+        zIndex: 70,
+        ...style
+      }
+    }
+  ) });
+});
+var AlertDialogContent = react.forwardRef(function AlertDialogContent2({ className, style, contentStyle, children, ...rest }, ref) {
+  const sketch = useAlertDialogSketch();
+  const shouldAnimate = useAnimate(sketch.animate);
+  return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: sketch.open ? /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogPrimitive__namespace.Portal, { forceMount: true, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(AlertDialogOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          inset: 0,
+          zIndex: 80,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          pointerEvents: "none",
+          padding: 16
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(AlertDialogPrimitive__namespace.Content, { ref, asChild: true, forceMount: true, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
+          framerMotion.motion.div,
+          {
+            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(420px, calc(100vw - 32px))",
+              outline: "none",
+              pointerEvents: "auto",
+              ...style
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              SketchBox,
+              {
+                roughness: sketch.roughness,
+                seed: sketch.resolvedSeed,
+                sketchColor: sketch.ink,
+                bowing: sketch.bowing,
+                fillStyle: sketch.fillStyle ?? "solid",
+                fill: "#f7f6f2",
+                strokeWidth: sketch.strokeWidth ?? 2,
+                animate: sketch.animate,
+                contentStyle: { padding: 20, ...contentStyle },
+                children
+              }
+            )
+          }
+        ) })
+      }
+    )
+  ] }) : null });
+});
+function AlertDialogHeader({
+  children,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(className),
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 6,
+        marginBottom: 12,
+        ...style
+      },
+      children
+    }
+  );
+}
+function AlertDialogFooter({
+  children,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(className),
+      style: {
+        display: "flex",
+        justifyContent: "flex-end",
+        gap: 8,
+        marginTop: 16,
+        ...style
+      },
+      children
+    }
+  );
+}
+var AlertDialogTitle = react.forwardRef(function AlertDialogTitle2({ style, ...rest }, ref) {
+  const sketch = useAlertDialogSketch();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AlertDialogPrimitive__namespace.Title,
+    {
+      ref,
+      style: {
+        margin: 0,
+        fontSize: 18,
+        fontWeight: doodleUiFontWeight(700),
+        fontFamily: doodleUiFontFamily,
+        color: sketch.ink,
+        ...style
+      },
+      ...rest
+    }
+  );
+});
+var AlertDialogDescription = react.forwardRef(function AlertDialogDescription2({ style, ...rest }, ref) {
+  const sketch = useAlertDialogSketch();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AlertDialogPrimitive__namespace.Description,
+    {
+      ref,
+      style: {
+        margin: 0,
+        fontSize: 14,
+        lineHeight: 1.5,
+        fontFamily: doodleUiFontFamily,
+        color: sketch.ink,
+        opacity: 0.8,
+        ...style
+      },
+      ...rest
+    }
+  );
+});
+var AlertDialogAction = react.forwardRef(function AlertDialogAction2({ children, ...rest }, ref) {
+  const sketch = useAlertDialogSketch();
+  return /* @__PURE__ */ jsxRuntime.jsx(AlertDialogPrimitive__namespace.Action, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Button,
+    {
+      ref,
+      variant: "primary",
+      sketchColor: sketch.sketchColor,
+      roughness: sketch.roughness,
+      seed: sketch.resolvedSeed,
+      bowing: sketch.bowing,
+      animate: sketch.animate,
+      ...rest,
+      children
+    }
+  ) });
+});
+var AlertDialogCancel = react.forwardRef(function AlertDialogCancel2({ children, ...rest }, ref) {
+  const sketch = useAlertDialogSketch();
+  return /* @__PURE__ */ jsxRuntime.jsx(AlertDialogPrimitive__namespace.Cancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Button,
+    {
+      ref,
+      variant: "outline",
+      sketchColor: sketch.sketchColor,
+      roughness: sketch.roughness,
+      seed: sketch.resolvedSeed,
+      bowing: sketch.bowing,
+      animate: sketch.animate,
+      ...rest,
+      children
+    }
+  ) });
+});
+var CommandSketchContext = react.createContext(
+  null
+);
+function useCommandSketch() {
+  const ctx = react.useContext(CommandSketchContext);
+  if (!ctx) {
+    throw new Error("Command parts must be used inside <Command>.");
+  }
+  return ctx;
+}
+var Command = react.forwardRef(
+  function Command2({
+    className,
+    style,
+    children,
+    roughness,
+    seed,
+    sketchColor,
+    bowing,
+    fillStyle,
+    strokeWidth,
+    animate,
+    ...rest
+  }, ref) {
+    const resolvedSeed = useResolvedSeed(seed);
+    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      CommandSketchContext.Provider,
+      {
+        value: {
+          roughness,
+          seed: resolvedSeed,
+          sketchColor,
+          bowing,
+          fillStyle,
+          strokeWidth,
+          resolvedSeed,
+          ink,
+          animate
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          SketchBox,
+          {
+            className: cn(className),
+            style,
+            roughness,
+            seed: resolvedSeed,
+            sketchColor: ink,
+            bowing,
+            fillStyle: fillStyle ?? "solid",
+            fill: "#f7f6f2",
+            strokeWidth: strokeWidth ?? 1.5,
+            animate,
+            contentStyle: { padding: 0, display: "flex", flexDirection: "column" },
+            children: /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command, { ref, ...rest, children })
+          }
+        )
+      }
+    );
+  }
+);
+var CommandInput = react.forwardRef(
+  function CommandInput2({ className, style, ...rest }, ref) {
+    const sketch = useCommandSketch();
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", padding: "10px 12px 12px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        cmdk.CommandInput,
+        {
+          ref,
+          className: cn(className),
+          style: {
+            width: "100%",
+            boxSizing: "border-box",
+            border: "none",
+            outline: "none",
+            background: "transparent",
+            color: sketch.ink,
+            fontFamily: doodleUiFontFamily,
+            fontSize: 15,
+            padding: "2px 2px 8px",
+            ...style
+          },
+          ...rest
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        RoughSvg,
+        {
+          shape: "line",
+          roughness: (sketch.roughness ?? 1.5) + 0.2,
+          seed: deriveSeed(sketch.resolvedSeed, "command-divider"),
+          sketchColor: sketch.ink,
+          bowing: sketch.bowing ?? 1.6,
+          strokeWidth: 1.2,
+          inset: 4,
+          style: { position: "absolute", bottom: 0, left: 0, right: 0, height: 8, opacity: 0.4 }
+        }
+      )
+    ] });
+  }
+);
+var CommandList = react.forwardRef(
+  function CommandList2({ className, style, ...rest }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      cmdk.CommandList,
+      {
+        ref,
+        className: cn(className),
+        style: {
+          maxHeight: 280,
+          overflowY: "auto",
+          padding: "4px 4px 8px",
+          ...style
+        },
+        ...rest
+      }
+    );
+  }
+);
+var CommandEmpty = react.forwardRef(
+  function CommandEmpty2({ className, style, ...rest }, ref) {
+    const sketch = useCommandSketch();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      cmdk.CommandEmpty,
+      {
+        ref,
+        className: cn(className),
+        style: {
+          padding: "16px 12px",
+          textAlign: "center",
+          fontFamily: doodleUiFontFamily,
+          fontSize: 14,
+          color: sketch.ink,
+          opacity: 0.6,
+          ...style
+        },
+        ...rest
+      }
+    );
+  }
+);
+var CommandGroup = react.forwardRef(
+  function CommandGroup2({ className, style, ...rest }, ref) {
+    const sketch = useCommandSketch();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      cmdk.CommandGroup,
+      {
+        ref,
+        className: cn(className),
+        style: { padding: "4px 2px", color: sketch.ink, ...style },
+        ...rest
+      }
+    );
+  }
+);
+var CommandItem = react.forwardRef(
+  function CommandItem2({ className, style, children, onMouseEnter, onMouseLeave, ...rest }, ref) {
+    const sketch = useCommandSketch();
+    const [highlighted, setHighlighted] = react.useState(false);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      cmdk.CommandItem,
+      {
+        ref,
+        className: cn(className),
+        onMouseEnter: (event) => {
+          setHighlighted(true);
+          onMouseEnter?.(event);
+        },
+        onMouseLeave: (event) => {
+          setHighlighted(false);
+          onMouseLeave?.(event);
+        },
+        style: {
+          position: "relative",
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          padding: "7px 10px",
+          borderRadius: 4,
+          fontFamily: doodleUiFontFamily,
+          fontSize: 14,
+          color: sketch.ink,
+          cursor: "pointer",
+          userSelect: "none",
+          outline: "none",
+          ...style
+        },
+        ...rest,
+        children: [
+          highlighted ? /* @__PURE__ */ jsxRuntime.jsx(
+            RoughSvg,
+            {
+              shape: "line",
+              roughness: (sketch.roughness ?? 1.5) + 0.4,
+              seed: sketch.resolvedSeed,
+              sketchColor: sketch.ink,
+              bowing: sketch.bowing ?? 1.6,
+              strokeWidth: 1.3,
+              inset: 3,
+              style: { opacity: 0.4 }
+            }
+          ) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { position: "relative", zIndex: 1, flex: 1 }, children })
+        ]
+      }
+    );
+  }
+);
+var CommandSeparator = react.forwardRef(function CommandSeparator2({ className, style, ...rest }, ref) {
+  const sketch = useCommandSketch();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    cmdk.CommandSeparator,
+    {
+      ref,
+      className: cn(className),
+      style: { position: "relative", height: 10, margin: "2px 4px", ...style },
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        RoughSvg,
+        {
+          shape: "line",
+          roughness: (sketch.roughness ?? 1.5) + 0.2,
+          seed: deriveSeed(sketch.resolvedSeed, "command-separator"),
+          sketchColor: sketch.ink,
+          bowing: sketch.bowing ?? 1.8,
+          strokeWidth: 1.2,
+          inset: 4,
+          style: { opacity: 0.4 }
+        }
+      )
+    }
+  );
+});
+function CommandShortcut({
+  children,
+  className,
+  style
+}) {
+  const sketch = useCommandSketch();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: cn(className),
+      style: {
+        marginLeft: "auto",
+        fontFamily: doodleUiFontFamily,
+        fontSize: 12,
+        color: sketch.ink,
+        opacity: 0.5,
+        letterSpacing: 0.4,
+        ...style
+      },
+      children
+    }
+  );
+}
+var CHEVRON_PATH5 = "M 4 6 L 10 12 L 16 6";
+function Combobox({
+  options,
+  placeholder = "Select\u2026",
+  searchPlaceholder = "Search\u2026",
+  emptyMessage = "No results.",
+  value,
+  defaultValue,
+  onValueChange,
+  disabled,
+  className,
+  style,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  fillStyle,
+  strokeWidth,
+  animate,
+  "aria-label": ariaLabel
+}) {
+  const [open, setOpen] = react.useState(false);
+  const [uncontrolled, setUncontrolled] = react.useState(defaultValue);
+  const selectedValue = value ?? uncontrolled;
+  const selectedOption = options.find(
+    (option) => option.value === selectedValue
+  );
+  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const resolvedSeed = useResolvedSeed(seed);
+  const shouldAnimate = useAnimate(animate);
+  const triggerRef = react.useRef(null);
+  useDrawIn(triggerRef, DRAW_IN_DURATION_MS, shouldAnimate);
+  function handleSelect(nextValue) {
+    setUncontrolled(nextValue);
+    onValueChange?.(nextValue);
+    setOpen(false);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(PopoverPrimitive__namespace.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref: (node) => assignRef(triggerRef, node),
+        type: "button",
+        role: "combobox",
+        "aria-expanded": open,
+        "aria-label": ariaLabel,
+        disabled,
+        className: cn(className),
+        style: {
+          position: "relative",
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: 12,
+          width: "100%",
+          minWidth: 200,
+          minHeight: 38,
+          padding: "8px 12px",
+          border: "none",
+          background: "transparent",
+          cursor: disabled ? "not-allowed" : "pointer",
+          opacity: disabled ? 0.5 : 1,
+          color: ink,
+          fontFamily: doodleUiFontFamily,
+          fontSize: 15,
+          lineHeight: 1.2,
+          outline: "none",
+          textAlign: "left",
+          ...style
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            RoughSvg,
+            {
+              shape: "rectangle",
+              roughness,
+              seed: resolvedSeed,
+              sketchColor: open ? SKETCH_COLORS.accent : ink,
+              bowing,
+              fillStyle,
+              strokeWidth: open ? (strokeWidth ?? 1.75) + 0.35 : strokeWidth
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: {
+                position: "relative",
+                zIndex: 1,
+                flex: 1,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              },
+              children: selectedOption?.label ?? placeholder
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: { position: "relative", zIndex: 1, width: 18, height: 18, flexShrink: 0 },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                RoughSvg,
+                {
+                  shape: "path",
+                  path: CHEVRON_PATH5,
+                  roughness: roughness ? roughness * 0.7 : 1.05,
+                  seed: resolvedSeed,
+                  sketchColor: ink,
+                  bowing,
+                  strokeWidth: (strokeWidth ?? 1.6) + 0.2,
+                  inset: 0
+                }
+              )
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      PopoverPrimitive__namespace.Content,
+      {
+        align: "start",
+        sideOffset: 8,
+        style: {
+          zIndex: 80,
+          outline: "none",
+          width: "var(--radix-popover-trigger-width)"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          Command,
+          {
+            roughness,
+            seed: resolvedSeed,
+            sketchColor: ink,
+            bowing,
+            fillStyle,
+            strokeWidth,
+            animate,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(CommandInput, { placeholder: searchPlaceholder }),
+              /* @__PURE__ */ jsxRuntime.jsxs(CommandList, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(CommandEmpty, { children: emptyMessage }),
+                /* @__PURE__ */ jsxRuntime.jsx(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+                  CommandItem,
+                  {
+                    value: option.value,
+                    disabled: option.disabled,
+                    onSelect: handleSelect,
+                    children: option.label
+                  },
+                  option.value
+                )) })
+              ] })
+            ]
+          }
+        )
+      }
+    ) })
+  ] });
+}
 
 exports.Accordion = Accordion;
 exports.AccordionContent = AccordionContent;
 exports.AccordionItem = AccordionItem;
 exports.AccordionTrigger = AccordionTrigger;
 exports.Alert = Alert;
+exports.AlertDialog = AlertDialog;
+exports.AlertDialogAction = AlertDialogAction;
+exports.AlertDialogCancel = AlertDialogCancel;
+exports.AlertDialogContent = AlertDialogContent;
+exports.AlertDialogDescription = AlertDialogDescription;
+exports.AlertDialogFooter = AlertDialogFooter;
+exports.AlertDialogHeader = AlertDialogHeader;
+exports.AlertDialogOverlay = AlertDialogOverlay;
+exports.AlertDialogPortal = AlertDialogPortal;
+exports.AlertDialogTitle = AlertDialogTitle;
+exports.AlertDialogTrigger = AlertDialogTrigger;
 exports.Avatar = Avatar;
 exports.Badge = Badge;
 exports.Breadcrumb = Breadcrumb;
@@ -3258,12 +5239,51 @@ exports.BreadcrumbItem = BreadcrumbItem;
 exports.Button = Button;
 exports.Card = Card;
 exports.Checkbox = Checkbox;
+exports.Collapsible = Collapsible;
+exports.CollapsibleContent = CollapsibleContent;
+exports.CollapsibleTrigger = CollapsibleTrigger;
+exports.Combobox = Combobox;
+exports.Command = Command;
+exports.CommandEmpty = CommandEmpty;
+exports.CommandGroup = CommandGroup;
+exports.CommandInput = CommandInput;
+exports.CommandItem = CommandItem;
+exports.CommandList = CommandList;
+exports.CommandSeparator = CommandSeparator;
+exports.CommandShortcut = CommandShortcut;
 exports.DEFAULT_BOWING = DEFAULT_BOWING;
 exports.DEFAULT_INK = DEFAULT_INK;
 exports.DEFAULT_ROUGHNESS = DEFAULT_ROUGHNESS;
 exports.DEFAULT_STROKE_WIDTH = DEFAULT_STROKE_WIDTH;
+exports.DRAW_IN_ALERT_MS = DRAW_IN_ALERT_MS;
+exports.DRAW_IN_DURATION_MS = DRAW_IN_DURATION_MS;
+exports.DRAW_IN_MARK_MS = DRAW_IN_MARK_MS;
+exports.DRAW_IN_TOOLTIP_MS = DRAW_IN_TOOLTIP_MS;
+exports.Dialog = Dialog2;
+exports.DialogClose = DialogClose;
+exports.DialogContent = DialogContent;
+exports.DialogDescription = DialogDescription;
+exports.DialogFooter = DialogFooter;
+exports.DialogHeader = DialogHeader;
+exports.DialogOverlay = DialogOverlay;
+exports.DialogPortal = DialogPortal;
+exports.DialogTitle = DialogTitle;
+exports.DialogTrigger = DialogTrigger;
 exports.Divider = Divider;
+exports.DoodleUIProvider = DoodleUIProvider;
+exports.DropdownMenu = DropdownMenu;
+exports.DropdownMenuCheckboxItem = DropdownMenuCheckboxItem;
+exports.DropdownMenuContent = DropdownMenuContent;
+exports.DropdownMenuGroup = DropdownMenuGroup;
+exports.DropdownMenuItem = DropdownMenuItem;
+exports.DropdownMenuLabel = DropdownMenuLabel;
+exports.DropdownMenuRadioGroup = DropdownMenuRadioGroup;
+exports.DropdownMenuRadioItem = DropdownMenuRadioItem;
+exports.DropdownMenuSeparator = DropdownMenuSeparator;
+exports.DropdownMenuSub = DropdownMenuSub;
+exports.DropdownMenuTrigger = DropdownMenuTrigger;
 exports.Input = Input;
+exports.Label = Label2;
 exports.Modal = Modal;
 exports.ModalClose = ModalClose;
 exports.ModalDescription = ModalDescription;
@@ -3271,6 +5291,12 @@ exports.ModalRoot = ModalRoot;
 exports.ModalTitle = ModalTitle;
 exports.ModalTrigger = ModalTrigger;
 exports.Pagination = Pagination;
+exports.Popover = Popover;
+exports.PopoverAnchor = PopoverAnchor;
+exports.PopoverArrow = PopoverArrow;
+exports.PopoverClose = PopoverClose;
+exports.PopoverContent = PopoverContent;
+exports.PopoverTrigger = PopoverTrigger;
 exports.Progress = Progress;
 exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;
@@ -3291,6 +5317,7 @@ exports.SketchSeedProvider = SketchSeedProvider;
 exports.Slider = Slider;
 exports.Stepper = Stepper;
 exports.Switch = Switch;
+exports.TABLE_STAGGER_MS = TABLE_STAGGER_MS;
 exports.Tab = Tab;
 exports.TabList = TabList;
 exports.TabPanel = TabPanel;
@@ -3314,6 +5341,9 @@ exports.Tooltip = Tooltip;
 exports.TooltipProvider = TooltipProvider;
 exports.deriveSeed = deriveSeed;
 exports.toRoughOptions = toRoughOptions;
+exports.useAnimate = useAnimate;
+exports.useDoodleUI = useDoodleUI;
+exports.useDrawIn = useDrawIn;
 exports.useResolvedSeed = useResolvedSeed;
 exports.useSketchSeed = useSketchSeed;
 //# sourceMappingURL=index.cjs.map