@madebywild/wvk 0.0.1 → 0.1.0

package/dist/index.js

@@ -7,6 +7,7 @@ var __export = (target, all) => {
 
 // src/components/ui/alert.tsx
 import * as React from "react";
+import { motion } from "framer-motion";
 import { cva } from "class-variance-authority";
 
 // src/lib/utils.ts
@@ -4745,12 +4746,15 @@ var Alert = React.forwardRef(
     const resolvedIcon = icon ?? defaultIcons[resolvedVariant];
     const bodyId = React.useId();
     return /* @__PURE__ */ jsxs17(
-      "div",
+      motion.div,
       {
         className: cn(alertVariants({ variant, className })),
         ref,
         role: "alert",
         "aria-describedby": children ? bodyId : void 0,
+        initial: { opacity: 0, y: -6 },
+        animate: { opacity: 1, y: 0 },
+        transition: { duration: 0.25, ease: "easeOut" },
         ...props,
         children: [
           resolvedIcon && /* @__PURE__ */ jsx184("span", { className: "mt-0.5 shrink-0", children: resolvedIcon }),
@@ -4835,11 +4839,11 @@ BottomTabBarItem.displayName = "BottomTabBarItem";
 
 // src/components/ui/button.tsx
 import * as React3 from "react";
-import { Slot } from "@radix-ui/react-slot";
+import { useRender } from "@base-ui-components/react/use-render";
 import { cva as cva2 } from "class-variance-authority";
 import { Fragment as Fragment2, jsx as jsx186, jsxs as jsxs19 } from "react/jsx-runtime";
 var buttonVariants = cva2(
-  "inline-flex items-center justify-center font-bold whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center font-bold whitespace-nowrap transition-[transform,colors] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[0.97]",
   {
     variants: {
       variant: {
@@ -4854,11 +4858,21 @@ var buttonVariants = cva2(
         sm: "h-8 px-3 text-xs rounded-[var(--radius-md)] gap-1",
         md: "h-10 px-4 text-sm rounded-[var(--radius-md)] gap-1.5",
         lg: "h-14 px-6 text-sm rounded-[var(--radius-md)] gap-2"
+      },
+      iconOnly: {
+        true: "p-0 gap-0",
+        false: ""
       }
     },
+    compoundVariants: [
+      { size: "sm", iconOnly: true, class: "w-8" },
+      { size: "md", iconOnly: true, class: "w-10" },
+      { size: "lg", iconOnly: true, class: "w-14" }
+    ],
     defaultVariants: {
       variant: "primary",
-      size: "lg"
+      size: "lg",
+      iconOnly: false
     }
   }
 );
@@ -4867,37 +4881,56 @@ var Button = React3.forwardRef(
     className,
     variant,
     size,
-    asChild = false,
+    iconOnly,
+    render,
     leadingIcon,
     trailingIcon,
     children,
     ...props
   }, ref) => {
-    const Comp = asChild ? Slot : "button";
     const resolvedSize = size ?? "lg";
-    const showIcons = !asChild && Boolean(leadingIcon || trailingIcon);
-    const content = showIcons ? /* @__PURE__ */ jsxs19(Fragment2, { children: [
-      leadingIcon ? /* @__PURE__ */ jsx186("span", { className: "inline-flex shrink-0 items-center justify-center text-current [&_svg]:block", children: leadingIcon }) : null,
-      /* @__PURE__ */ jsx186("span", { className: "min-w-0", children }),
-      trailingIcon ? /* @__PURE__ */ jsx186("span", { className: "inline-flex shrink-0 items-center justify-center text-current [&_svg]:block", children: trailingIcon }) : null
-    ] }) : children;
-    return /* @__PURE__ */ jsx186(
-      Comp,
-      {
-        className: cn(buttonVariants({ variant, size: resolvedSize, className })),
-        ref,
+    const showIcons = !iconOnly && !render && Boolean(leadingIcon || trailingIcon);
+    let content;
+    if (iconOnly) {
+      content = /* @__PURE__ */ jsx186("span", { className: "inline-flex shrink-0 items-center justify-center text-current [&_svg]:block", children });
+    } else if (showIcons) {
+      content = /* @__PURE__ */ jsxs19(Fragment2, { children: [
+        leadingIcon ? /* @__PURE__ */ jsx186("span", { className: "inline-flex shrink-0 items-center justify-center text-current [&_svg]:block", children: leadingIcon }) : null,
+        /* @__PURE__ */ jsx186("span", { className: "min-w-0", children }),
+        trailingIcon ? /* @__PURE__ */ jsx186("span", { className: "inline-flex shrink-0 items-center justify-center text-current [&_svg]:block", children: trailingIcon }) : null
+      ] });
+    } else {
+      content = children;
+    }
+    const element = useRender({
+      defaultTagName: "button",
+      render,
+      ref,
+      props: {
         ...props,
+        className: cn(
+          buttonVariants({
+            variant,
+            size: resolvedSize,
+            iconOnly: Boolean(iconOnly),
+            className
+          })
+        ),
         children: content
       }
-    );
+    });
+    return element;
   }
 );
 Button.displayName = "Button";
 
 // src/components/ui/checkbox.tsx
 import * as React4 from "react";
+import { Checkbox as BaseCheckbox } from "@base-ui-components/react/checkbox";
+import { motion as motion2 } from "framer-motion";
 import { cva as cva3 } from "class-variance-authority";
 import { jsx as jsx187, jsxs as jsxs20 } from "react/jsx-runtime";
+var CHECKBOX_TAP_TRANSITION = { type: "spring", stiffness: 600, damping: 22 };
 var CHECKMARK_PATH = "m7.951 12.537 7.296-8.195a1 1 0 0 1 1.506 1.317l-8 9a1 1 0 0 1-1.46.048l-4-4a1 1 0 1 1 1.414-1.414z";
 var MINUS_PATH = "M4 9h12a1 1 0 1 1 0 2H4a1 1 0 1 1 0-2Z";
 var CHECKBOX_MARK_GROUP_TRANSFORM = `translate(11 11) scale(${11 / 12}) translate(-10 -10)`;
@@ -4905,7 +4938,7 @@ var checkboxFrameVariants = cva3(
   [
     "relative inline-flex items-center justify-center p-0 bg-transparent border-0 cursor-pointer transition-colors",
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-    "disabled:pointer-events-none disabled:opacity-50"
+    "data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
   ],
   {
     variants: {
@@ -4922,75 +4955,74 @@ var checkboxFrameVariants = cva3(
 );
 var Checkbox = React4.forwardRef(
   ({
-    checked = false,
-    indeterminate = false,
-    onCheckedChange,
-    disabled = false,
     className,
-    size = "lg",
-    onClick,
+    size,
+    onCheckedChange,
+    indeterminate,
     ...rest
   }, ref) => {
-    const handleClick = (e) => {
-      onClick?.(e);
-      if (!disabled && !e.defaultPrevented) {
-        onCheckedChange?.(!checked);
-      }
-    };
-    const isActive = checked || indeterminate;
     const s = size ?? "lg";
     return /* @__PURE__ */ jsx187(
-      "button",
+      BaseCheckbox.Root,
       {
-        ...rest,
         ref,
-        type: "button",
-        role: "checkbox",
-        "aria-checked": indeterminate ? "mixed" : checked,
-        disabled,
-        onClick: handleClick,
+        indeterminate,
+        onCheckedChange: (checked) => onCheckedChange?.(checked),
+        nativeButton: true,
         className: cn(checkboxFrameVariants({ size: s }), className),
-        children: /* @__PURE__ */ jsxs20(
-          "svg",
-          {
-            className: "size-full max-h-none max-w-none",
-            viewBox: "0 0 22 22",
-            fill: "none",
-            xmlns: "http://www.w3.org/2000/svg",
-            "aria-hidden": true,
-            children: [
-              /* @__PURE__ */ jsx187(
-                "rect",
-                {
-                  x: "0.5",
-                  y: "0.5",
-                  width: "21",
-                  height: "21",
-                  rx: "4",
-                  fill: isActive ? "var(--color-primary)" : "transparent",
-                  stroke: isActive ? "var(--color-primary)" : "var(--color-primary)",
-                  strokeWidth: "1"
-                }
-              ),
-              checked && !indeterminate ? /* @__PURE__ */ jsx187(
-                "g",
-                {
-                  fill: "var(--color-primary-foreground)",
-                  transform: CHECKBOX_MARK_GROUP_TRANSFORM,
-                  children: /* @__PURE__ */ jsx187("path", { d: CHECKMARK_PATH })
-                }
-              ) : null,
-              indeterminate ? /* @__PURE__ */ jsx187(
-                "g",
+        ...rest,
+        render: (props, state) => {
+          const isActive = state.checked || state.indeterminate;
+          return /* @__PURE__ */ jsx187(
+            motion2.span,
+            {
+              className: "inline-flex",
+              whileTap: { scale: 0.85 },
+              transition: CHECKBOX_TAP_TRANSITION,
+              children: /* @__PURE__ */ jsx187("button", { ...props, type: "button", children: /* @__PURE__ */ jsxs20(
+                "svg",
                 {
-                  fill: "var(--color-primary-foreground)",
-                  transform: CHECKBOX_MARK_GROUP_TRANSFORM,
-                  children: /* @__PURE__ */ jsx187("path", { d: MINUS_PATH })
+                  className: "size-full max-h-none max-w-none",
+                  viewBox: "0 0 22 22",
+                  fill: "none",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  "aria-hidden": true,
+                  children: [
+                    /* @__PURE__ */ jsx187(
+                      "rect",
+                      {
+                        x: "0.5",
+                        y: "0.5",
+                        width: "21",
+                        height: "21",
+                        rx: "4",
+                        fill: isActive ? "var(--color-primary)" : "transparent",
+                        stroke: "var(--color-primary)",
+                        strokeWidth: "1"
+                      }
+                    ),
+                    state.checked && !state.indeterminate ? /* @__PURE__ */ jsx187(
+                      "g",
+                      {
+                        fill: "var(--color-primary-foreground)",
+                        transform: CHECKBOX_MARK_GROUP_TRANSFORM,
+                        children: /* @__PURE__ */ jsx187("path", { d: CHECKMARK_PATH })
+                      }
+                    ) : null,
+                    state.indeterminate ? /* @__PURE__ */ jsx187(
+                      "g",
+                      {
+                        fill: "var(--color-primary-foreground)",
+                        transform: CHECKBOX_MARK_GROUP_TRANSFORM,
+                        children: /* @__PURE__ */ jsx187("path", { d: MINUS_PATH })
+                      }
+                    ) : null
+                  ]
                 }
-              ) : null
-            ]
-          }
-        )
+              ) })
+            }
+          );
+        }
       }
     );
   }
@@ -5002,6 +5034,7 @@ import * as React6 from "react";
 
 // src/components/ui/tooltip.tsx
 import * as React5 from "react";
+import { Tooltip as BaseTooltip } from "@base-ui-components/react/tooltip";
 import { cva as cva4 } from "class-variance-authority";
 import { jsx as jsx188, jsxs as jsxs21 } from "react/jsx-runtime";
 var tooltipVariants = cva4("relative rounded-[var(--radius-md)] w-max", {
@@ -5062,6 +5095,41 @@ var Tooltip = React5.forwardRef(
   }
 );
 Tooltip.displayName = "Tooltip";
+var TooltipProvider = BaseTooltip.Provider;
+function TooltipPopup({
+  trigger,
+  children,
+  theme,
+  size,
+  side = "top",
+  sideOffset = 8,
+  className,
+  ...rest
+}) {
+  const resolvedTheme = theme ?? "dark";
+  return /* @__PURE__ */ jsxs21(BaseTooltip.Root, { children: [
+    /* @__PURE__ */ jsx188(BaseTooltip.Trigger, { render: trigger }),
+    /* @__PURE__ */ jsx188(BaseTooltip.Portal, { children: /* @__PURE__ */ jsx188(BaseTooltip.Positioner, { side, sideOffset, children: /* @__PURE__ */ jsxs21(
+      BaseTooltip.Popup,
+      {
+        className: cn(tooltipVariants({ theme, size }), className),
+        ...rest,
+        children: [
+          children,
+          /* @__PURE__ */ jsx188(
+            BaseTooltip.Arrow,
+            {
+              className: cn(
+                "h-0 w-0 border-l-[4px] border-r-[4px] border-t-[4px] border-l-transparent border-r-transparent",
+                resolvedTheme === "dark" ? "border-t-primary" : "border-t-border"
+              )
+            }
+          )
+        ]
+      }
+    ) }) })
+  ] });
+}
 
 // src/components/ui/field-label.tsx
 import { Fragment as Fragment3, jsx as jsx189, jsxs as jsxs22 } from "react/jsx-runtime";
@@ -5255,16 +5323,17 @@ InfoBar.displayName = "InfoBar";
 
 // src/components/ui/link.tsx
 import * as React8 from "react";
+import { motion as motion3 } from "framer-motion";
 import { cva as cva5 } from "class-variance-authority";
-import { jsx as jsx192 } from "react/jsx-runtime";
+import { jsx as jsx192, jsxs as jsxs24 } from "react/jsx-runtime";
 var linkVariants = cva5(
-  "inline-flex w-fit items-center gap-[var(--wvk-gap-sm)] font-bold border-b-2 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+  "relative inline-flex w-fit items-center gap-[var(--wvk-gap-sm)] font-bold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
   {
     variants: {
       theme: {
-        dark: "text-primary border-primary",
-        light: "text-primary-foreground border-primary-foreground",
-        medium: "text-muted-foreground border-muted-foreground"
+        dark: "text-primary",
+        light: "text-primary-foreground",
+        medium: "text-muted-foreground"
       },
       size: {
         body: "text-sm leading-5",
@@ -5278,13 +5347,36 @@ var linkVariants = cva5(
   }
 );
 var Link2 = React8.forwardRef(
-  ({ className, theme, size, ...props }, ref) => {
-    return /* @__PURE__ */ jsx192(
+  ({ className, theme, size, underlined = false, children, onMouseEnter, onMouseLeave, ...props }, ref) => {
+    const [hovered, setHovered] = React8.useState(false);
+    const showUnderline = underlined ? !hovered : hovered;
+    return /* @__PURE__ */ jsxs24(
       "a",
       {
         className: cn(linkVariants({ theme, size, className })),
         ref,
-        ...props
+        onMouseEnter: (e) => {
+          setHovered(true);
+          onMouseEnter?.(e);
+        },
+        onMouseLeave: (e) => {
+          setHovered(false);
+          onMouseLeave?.(e);
+        },
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsx192(
+            motion3.span,
+            {
+              "aria-hidden": true,
+              className: "pointer-events-none absolute bottom-0 left-0 h-0.5 w-full origin-left bg-current",
+              animate: { scaleX: showUnderline ? 1 : 0 },
+              initial: { scaleX: underlined ? 1 : 0 },
+              transition: { duration: 0.2, ease: [0.4, 0, 0.2, 1] }
+            }
+          )
+        ]
       }
     );
   }
@@ -5294,7 +5386,7 @@ Link2.displayName = "Link";
 // src/components/ui/list-item.tsx
 import * as React9 from "react";
 import { cva as cva6 } from "class-variance-authority";
-import { jsx as jsx193, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx193, jsxs as jsxs25 } from "react/jsx-runtime";
 var LIST_CHECKMARK_PATH = "m7.951 12.537 7.296-8.195a1 1 0 0 1 1.506 1.317l-8 9a1 1 0 0 1-1.46.048l-4-4a1 1 0 1 1 1.414-1.414z";
 var LIST_CHECKBOX_MARK_TRANSFORM = `translate(10 10) scale(${5 / 6}) translate(-10 -10)`;
 var listItemVariants = cva6(
@@ -5312,7 +5404,7 @@ var listItemVariants = cva6(
     }
   }
 );
-var ListItemCheckbox = ({ checked }) => /* @__PURE__ */ jsx193("span", { className: "relative inline-flex size-5 shrink-0", children: /* @__PURE__ */ jsxs24(
+var ListItemCheckbox = ({ checked }) => /* @__PURE__ */ jsx193("span", { className: "relative inline-flex size-5 shrink-0", children: /* @__PURE__ */ jsxs25(
   "svg",
   {
     className: "size-full",
@@ -5345,7 +5437,7 @@ var ListItemCheckbox = ({ checked }) => /* @__PURE__ */ jsx193("span", { classNa
     ]
   }
 ) });
-var ListItemRadio = ({ checked }) => /* @__PURE__ */ jsxs24(
+var ListItemRadio = ({ checked }) => /* @__PURE__ */ jsxs25(
   "svg",
   {
     width: "20",
@@ -5416,7 +5508,7 @@ var ListItem = React9.forwardRef(
         onCheckedChange?.(!checked);
       }
     };
-    return /* @__PURE__ */ jsxs24(
+    return /* @__PURE__ */ jsxs25(
       "div",
       {
         ...rest,
@@ -5484,7 +5576,7 @@ LoadingSpinner.displayName = "LoadingSpinner";
 // src/components/ui/media.tsx
 import * as React11 from "react";
 import { cva as cva8 } from "class-variance-authority";
-import { jsx as jsx195, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx195, jsxs as jsxs26 } from "react/jsx-runtime";
 var placeholderVariants = cva8(
   "relative flex items-center justify-center bg-muted rounded-[var(--radius-md)] overflow-hidden",
   {
@@ -5511,7 +5603,7 @@ var ImagePlaceholder = React11.forwardRef(
 );
 ImagePlaceholder.displayName = "ImagePlaceholder";
 var VideoPlaceholder = React11.forwardRef(
-  ({ className, size, ...props }, ref) => /* @__PURE__ */ jsxs25("div", { ref, className: cn(placeholderVariants({ size }), className), ...props, children: [
+  ({ className, size, ...props }, ref) => /* @__PURE__ */ jsxs26("div", { ref, className: cn(placeholderVariants({ size }), className), ...props, children: [
     /* @__PURE__ */ jsx195("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx195("div", { className: "w-12 h-12 rounded-full bg-primary flex items-center justify-center", children: /* @__PURE__ */ jsx195(
       Play_default,
       {
@@ -5532,7 +5624,7 @@ VideoPlaceholder.displayName = "VideoPlaceholder";
 var VideoControls = React11.forwardRef(
   ({ className, progress = 0, ...props }, ref) => {
     const clamped = Math.min(100, Math.max(0, progress));
-    return /* @__PURE__ */ jsxs25(
+    return /* @__PURE__ */ jsxs26(
       "div",
       {
         ref,
@@ -5559,10 +5651,58 @@ var VideoControls = React11.forwardRef(
 );
 VideoControls.displayName = "VideoControls";
 
-// src/components/ui/pagination.tsx
+// src/components/ui/menu.tsx
 import * as React12 from "react";
-import { cva as cva9 } from "class-variance-authority";
+import { Menu as BaseMenu } from "@base-ui-components/react/menu";
 import { jsx as jsx196 } from "react/jsx-runtime";
+var Menu2 = BaseMenu.Root;
+var MenuTrigger = BaseMenu.Trigger;
+var MenuPopup = React12.forwardRef(
+  ({ className, children, side = "bottom", sideOffset = 6, ...rest }, ref) => /* @__PURE__ */ jsx196(BaseMenu.Portal, { children: /* @__PURE__ */ jsx196(BaseMenu.Positioner, { side, sideOffset, children: /* @__PURE__ */ jsx196(
+    BaseMenu.Popup,
+    {
+      ref,
+      className: cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-[var(--radius-md)] border border-border bg-popover p-1 text-popover-foreground shadow-md outline-none",
+        className
+      ),
+      ...rest,
+      children
+    }
+  ) }) })
+);
+MenuPopup.displayName = "MenuPopup";
+var MenuItem = React12.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx196(
+  BaseMenu.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full cursor-pointer select-none items-center rounded-[var(--radius-sm)] px-2 py-1.5 text-sm outline-none transition-colors",
+      "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...rest
+  }
+));
+MenuItem.displayName = "MenuItem";
+var MenuSeparator = React12.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx196(
+  "div",
+  {
+    ref,
+    role: "separator",
+    className: cn("my-1 h-px bg-border", className),
+    ...rest
+  }
+));
+MenuSeparator.displayName = "MenuSeparator";
+var MenuGroup = BaseMenu.Group;
+var MenuGroupLabel = BaseMenu.GroupLabel;
+
+// src/components/ui/pagination.tsx
+import * as React13 from "react";
+import { cva as cva9 } from "class-variance-authority";
+import { jsx as jsx197 } from "react/jsx-runtime";
 var paginationVariants = cva9("inline-flex items-center", {
   variants: {
     size: {
@@ -5580,11 +5720,11 @@ var dotSizes = {
   md: { active: "w-2.5 h-2.5", inactive: "w-2 h-2" },
   lg: { active: "w-3 h-3", inactive: "w-2 h-2" }
 };
-var Pagination = React12.forwardRef(
+var Pagination = React13.forwardRef(
   ({ pages, current, onPageChange, size = "md", className, ...rest }, ref) => {
     const sizeKey = size ?? "md";
     const sizes = dotSizes[sizeKey];
-    return /* @__PURE__ */ jsx196(
+    return /* @__PURE__ */ jsx197(
       "div",
       {
         ...rest,
@@ -5594,7 +5734,7 @@ var Pagination = React12.forwardRef(
         className: cn(paginationVariants({ size, className })),
         children: Array.from({ length: pages }, (_, i) => {
           const isActive = i === current;
-          return /* @__PURE__ */ jsx196(
+          return /* @__PURE__ */ jsx197(
             "button",
             {
               type: "button",
@@ -5616,43 +5756,54 @@ var Pagination = React12.forwardRef(
 Pagination.displayName = "Pagination";
 
 // src/components/ui/progress-bar.tsx
-import * as React13 from "react";
-import { jsx as jsx197 } from "react/jsx-runtime";
-var ProgressBar = React13.forwardRef(
+import * as React14 from "react";
+import { Progress as BaseProgress } from "@base-ui-components/react/progress";
+import { Meter as BaseMeter } from "@base-ui-components/react/meter";
+import { jsx as jsx198 } from "react/jsx-runtime";
+var ProgressBar = React14.forwardRef(
   ({ className, value = 0, ...props }, ref) => {
-    const clampedValue = Math.min(100, Math.max(0, value));
-    return /* @__PURE__ */ jsx197(
-      "div",
+    return /* @__PURE__ */ jsx198(
+      BaseProgress.Root,
       {
-        className: cn("w-full h-2 bg-muted rounded-full overflow-hidden", className),
         ref,
-        role: "progressbar",
-        "aria-valuenow": clampedValue,
-        "aria-valuemin": 0,
-        "aria-valuemax": 100,
+        value,
+        className: cn("w-full", className),
         ...props,
-        children: /* @__PURE__ */ jsx197(
-          "div",
-          {
-            className: "h-full bg-primary rounded-full transition-all duration-300",
-            style: { width: `${clampedValue}%` }
-          }
-        )
+        children: /* @__PURE__ */ jsx198(BaseProgress.Track, { className: "block h-2 w-full overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx198(BaseProgress.Indicator, { className: "block h-full rounded-full bg-primary transition-all duration-300" }) })
       }
     );
   }
 );
 ProgressBar.displayName = "ProgressBar";
+var Meter = React14.forwardRef(
+  ({ className, value = 0, ...props }, ref) => {
+    return /* @__PURE__ */ jsx198(
+      BaseMeter.Root,
+      {
+        ref,
+        value,
+        className: cn("w-full", className),
+        ...props,
+        children: /* @__PURE__ */ jsx198(BaseMeter.Track, { className: "block h-2 w-full overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx198(BaseMeter.Indicator, { className: "block h-full rounded-full bg-primary transition-all duration-300" }) })
+      }
+    );
+  }
+);
+Meter.displayName = "Meter";
 
 // src/components/ui/radio.tsx
-import * as React14 from "react";
+import * as React15 from "react";
+import { Radio as BaseRadio } from "@base-ui-components/react/radio";
+import { RadioGroup as BaseRadioGroup } from "@base-ui-components/react/radio-group";
+import { motion as motion4 } from "framer-motion";
 import { cva as cva10 } from "class-variance-authority";
-import { jsx as jsx198, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx199, jsxs as jsxs27 } from "react/jsx-runtime";
+var RADIO_TAP_TRANSITION = { type: "spring", stiffness: 600, damping: 22 };
 var radioFrameVariants = cva10(
   [
     "inline-flex items-center justify-center p-0 bg-transparent border-0 cursor-pointer transition-colors",
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-    "disabled:pointer-events-none disabled:opacity-50"
+    "data-[disabled]:pointer-events-none data-[disabled]:opacity-50 disabled:pointer-events-none disabled:opacity-50"
   ],
   {
     variants: {
@@ -5667,7 +5818,33 @@ var radioFrameVariants = cva10(
     }
   }
 );
-var Radio = React14.forwardRef(
+function RadioGlyph({ checked }) {
+  return /* @__PURE__ */ jsxs27(
+    "svg",
+    {
+      className: "size-full max-h-none max-w-none",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsx199(
+          "circle",
+          {
+            cx: "12",
+            cy: "12",
+            r: "11.5",
+            stroke: "var(--color-primary)",
+            strokeWidth: "1",
+            fill: "transparent"
+          }
+        ),
+        checked && /* @__PURE__ */ jsx199("circle", { cx: "12", cy: "12", r: "5", fill: "var(--color-primary)" })
+      ]
+    }
+  );
+}
+var Radio = React15.forwardRef(
   ({
     checked = false,
     onCheckedChange,
@@ -5680,57 +5857,80 @@ var Radio = React14.forwardRef(
   }, ref) => {
     const handleClick = (e) => {
       onClick?.(e);
-      if (!disabled && !e.defaultPrevented) {
-        onCheckedChange?.(!checked);
+      if (!disabled && !e.defaultPrevented && !checked) {
+        onCheckedChange?.(true);
       }
     };
     const s = size ?? "lg";
-    return /* @__PURE__ */ jsx198(
-      "button",
+    return /* @__PURE__ */ jsx199(
+      motion4.span,
+      {
+        className: cn("inline-flex", disabled && "pointer-events-none"),
+        whileTap: { scale: 0.85 },
+        transition: RADIO_TAP_TRANSITION,
+        children: /* @__PURE__ */ jsx199(
+          "button",
+          {
+            ...rest,
+            ref,
+            type: "button",
+            role: "radio",
+            "aria-checked": checked,
+            "data-value": value,
+            disabled,
+            onClick: handleClick,
+            className: cn(radioFrameVariants({ size: s }), className),
+            children: /* @__PURE__ */ jsx199(RadioGlyph, { checked })
+          }
+        )
+      }
+    );
+  }
+);
+Radio.displayName = "Radio";
+var RadioGroup = React15.forwardRef(
+  ({ className, onValueChange, ...rest }, ref) => /* @__PURE__ */ jsx199(
+    BaseRadioGroup,
+    {
+      ref,
+      onValueChange: (value) => onValueChange?.(value),
+      className: cn("flex flex-col gap-2", className),
+      ...rest
+    }
+  )
+);
+RadioGroup.displayName = "RadioGroup";
+var RadioGroupItem = React15.forwardRef(
+  ({ className, size, ...rest }, ref) => {
+    const s = size ?? "lg";
+    return /* @__PURE__ */ jsx199(
+      BaseRadio.Root,
       {
-        ...rest,
         ref,
-        type: "button",
-        role: "radio",
-        "aria-checked": checked,
-        "data-value": value,
-        disabled,
-        onClick: handleClick,
+        nativeButton: true,
         className: cn(radioFrameVariants({ size: s }), className),
-        children: /* @__PURE__ */ jsxs26(
-          "svg",
+        ...rest,
+        render: (props, state) => /* @__PURE__ */ jsx199(
+          motion4.span,
           {
-            className: "size-full max-h-none max-w-none",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            xmlns: "http://www.w3.org/2000/svg",
-            "aria-hidden": true,
-            children: [
-              /* @__PURE__ */ jsx198(
-                "circle",
-                {
-                  cx: "12",
-                  cy: "12",
-                  r: "11.5",
-                  stroke: "var(--color-primary)",
-                  strokeWidth: "1",
-                  fill: "transparent"
-                }
-              ),
-              checked && /* @__PURE__ */ jsx198("circle", { cx: "12", cy: "12", r: "5", fill: "var(--color-primary)" })
-            ]
+            className: "inline-flex",
+            whileTap: { scale: 0.85 },
+            transition: RADIO_TAP_TRANSITION,
+            children: /* @__PURE__ */ jsx199("button", { ...props, type: "button", children: /* @__PURE__ */ jsx199(RadioGlyph, { checked: state.checked }) })
           }
         )
       }
     );
   }
 );
-Radio.displayName = "Radio";
+RadioGroupItem.displayName = "RadioGroupItem";
 
 // src/components/ui/segmented-control.tsx
-import * as React15 from "react";
+import * as React16 from "react";
+import { ToggleGroup as BaseToggleGroup } from "@base-ui-components/react/toggle-group";
+import { Toggle as BaseToggle } from "@base-ui-components/react/toggle";
 import { cva as cva11 } from "class-variance-authority";
-import { Fragment as Fragment4, jsx as jsx199, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx200, jsxs as jsxs28 } from "react/jsx-runtime";
 var controlVariants = cva11(
   [
     "inline-flex min-w-0 items-stretch overflow-hidden rounded-[var(--radius-md)]",
@@ -5761,7 +5961,11 @@ var segmentVariants = cva11(
     "text-center text-sm font-bold leading-5 transition-colors",
     "border-0 border-r border-[var(--wvk-border-bold)] last:border-r-0",
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-    "[&_svg]:shrink-0 [&_svg]:text-current"
+    "[&_svg]:shrink-0 [&_svg]:text-current",
+    /** Semantic primary / primary-foreground: blue pill + white ink in light; white pill + blue ink in dark. */
+    "data-[pressed]:bg-primary data-[pressed]:text-primary-foreground",
+    "bg-transparent text-[var(--wvk-foreground-primary)] hover:bg-[var(--wvk-surface-tertiary)]",
+    "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:pointer-events-none"
   ],
   {
     variants: {
@@ -5770,11 +5974,6 @@ var segmentVariants = cva11(
         md: "gap-2 px-[var(--wvk-px-md)] py-0 text-sm leading-5",
         lg: "gap-2 px-[var(--wvk-px-lg)] py-0 text-sm leading-5"
       },
-      active: {
-        /** Semantic primary / primary-foreground: blue pill + white ink in light; white pill + blue ink in dark. */
-        true: "bg-primary text-primary-foreground",
-        false: "bg-transparent text-[var(--wvk-foreground-primary)] hover:bg-[var(--wvk-surface-tertiary)]"
-      },
       widthMode: {
         fill: "min-w-0 flex-1",
         auto: "shrink-0 grow-0"
@@ -5782,20 +5981,19 @@ var segmentVariants = cva11(
     },
     defaultVariants: {
       size: "md",
-      active: false,
       widthMode: "fill"
     }
   }
 );
-var SegmentedControlContext = React15.createContext(null);
+var SegmentedControlContext = React16.createContext(null);
 function useSegmentedControlContext(component) {
-  const ctx = React15.useContext(SegmentedControlContext);
+  const ctx = React16.useContext(SegmentedControlContext);
   if (!ctx) {
     throw new Error(`${component} must be used within <SegmentedControl>`);
   }
   return ctx;
 }
-var SegmentedControl = React15.forwardRef(
+var SegmentedControl = React16.forwardRef(
   ({
     value,
     onChange,
@@ -5812,31 +6010,30 @@ var SegmentedControl = React15.forwardRef(
     labelInfo,
     children
   }, ref) => {
-    const labelId = React15.useId();
+    const labelId = React16.useId();
     const resolvedSize = size ?? "md";
     const widthMode = autoWidth ? "auto" : "fill";
     const labelled = fieldLabel && hasRenderableFieldLabelText(label);
-    const notify = React15.useCallback(
+    const notify = React16.useCallback(
       (next) => {
         onValueChange?.(next);
         onChange?.(next);
       },
       [onChange, onValueChange]
     );
-    const ctx = React15.useMemo(
-      () => ({
-        value,
-        onValueChange: notify,
-        size: resolvedSize,
-        widthMode
-      }),
-      [value, notify, resolvedSize, widthMode]
+    const ctx = React16.useMemo(
+      () => ({ size: resolvedSize, widthMode }),
+      [resolvedSize, widthMode]
     );
-    const tablist = /* @__PURE__ */ jsx199(
-      "div",
+    const group = /* @__PURE__ */ jsx200(
+      BaseToggleGroup,
       {
         ref,
-        role: "tablist",
+        value: value ? [value] : [],
+        onValueChange: (next) => {
+          const v = next[0];
+          if (typeof v === "string") notify(v);
+        },
         "aria-label": labelled ? void 0 : ariaLabel,
         "aria-labelledby": labelled ? labelId : void 0,
         className: cn(
@@ -5845,8 +6042,8 @@ var SegmentedControl = React15.forwardRef(
         children
       }
     );
-    return /* @__PURE__ */ jsx199(SegmentedControlContext.Provider, { value: ctx, children: labelled ? /* @__PURE__ */ jsxs27("div", { className: "flex w-full min-w-0 flex-col gap-1", children: [
-      /* @__PURE__ */ jsx199(
+    return /* @__PURE__ */ jsx200(SegmentedControlContext.Provider, { value: ctx, children: labelled ? /* @__PURE__ */ jsxs28("div", { className: "flex w-full min-w-0 flex-col gap-1", children: [
+      /* @__PURE__ */ jsx200(
         FieldLabel,
         {
           id: labelId,
@@ -5857,28 +6054,23 @@ var SegmentedControl = React15.forwardRef(
           children: label
         }
       ),
-      tablist
-    ] }) : tablist });
+      group
+    ] }) : group });
   }
 );
 SegmentedControl.displayName = "SegmentedControl";
-var SegmentedControlItem = React15.forwardRef(
+var SegmentedControlItem = React16.forwardRef(
   ({
-    value: itemValue,
+    value,
     label,
     icon,
     iconPlacement = "trailing",
-    disabled,
     className,
-    type = "button",
     ...rest
   }, ref) => {
-    const { value, onValueChange, size, widthMode } = useSegmentedControlContext(
-      "SegmentedControlItem"
-    );
-    const isActive = itemValue === value;
+    const { size, widthMode } = useSegmentedControlContext("SegmentedControlItem");
     const iconBoxClass2 = size === "sm" ? wvkIconSmClass : wvkIconLgClass;
-    const iconBox = icon ? /* @__PURE__ */ jsx199(
+    const iconBox = icon ? /* @__PURE__ */ jsx200(
       "span",
       {
         className: cn(
@@ -5890,30 +6082,19 @@ var SegmentedControlItem = React15.forwardRef(
     ) : null;
     const hasLabel = Boolean(label);
     const hasIcon = Boolean(icon);
-    const content = hasLabel && hasIcon ? iconPlacement === "leading" ? /* @__PURE__ */ jsxs27(Fragment4, { children: [
+    const content = hasLabel && hasIcon ? iconPlacement === "leading" ? /* @__PURE__ */ jsxs28(Fragment4, { children: [
       iconBox,
-      /* @__PURE__ */ jsx199("span", { className: "min-w-0 truncate", children: label })
-    ] }) : /* @__PURE__ */ jsxs27(Fragment4, { children: [
-      /* @__PURE__ */ jsx199("span", { className: "min-w-0 truncate", children: label }),
+      /* @__PURE__ */ jsx200("span", { className: "min-w-0 truncate", children: label })
+    ] }) : /* @__PURE__ */ jsxs28(Fragment4, { children: [
+      /* @__PURE__ */ jsx200("span", { className: "min-w-0 truncate", children: label }),
       iconBox
-    ] }) : hasIcon ? iconBox : hasLabel ? /* @__PURE__ */ jsx199("span", { className: "min-w-0 truncate", children: label }) : null;
-    return /* @__PURE__ */ jsx199(
-      "button",
+    ] }) : hasIcon ? iconBox : hasLabel ? /* @__PURE__ */ jsx200("span", { className: "min-w-0 truncate", children: label }) : null;
+    return /* @__PURE__ */ jsx200(
+      BaseToggle,
       {
         ref,
-        type,
-        role: "tab",
-        "aria-selected": isActive,
-        disabled,
-        "data-active": isActive ? "" : void 0,
-        onClick: () => {
-          if (!disabled) onValueChange(itemValue);
-        },
-        className: cn(
-          segmentVariants({ size, active: isActive, widthMode }),
-          disabled && "cursor-not-allowed opacity-50 pointer-events-none",
-          className
-        ),
+        value,
+        className: cn(segmentVariants({ size, widthMode }), className),
         ...rest,
         children: content
       }
@@ -5925,20 +6106,21 @@ var SegmentedControlTrigger = SegmentedControlItem;
 SegmentedControlTrigger.displayName = "SegmentedControlTrigger";
 
 // src/components/ui/select.tsx
-import * as React16 from "react";
+import * as React17 from "react";
+import { Select as BaseSelect } from "@base-ui-components/react/select";
 import { cva as cva12 } from "class-variance-authority";
-import { jsx as jsx200, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx201, jsxs as jsxs29 } from "react/jsx-runtime";
 var selectShellVariants = cva12(
   [
     "relative isolate min-h-0 min-w-0 w-full overflow-visible border-0 bg-[var(--input-surface)] text-[var(--input-text)] outline-none transition-[box-shadow,background-color,color]",
-    "focus-within:outline-none",
-    "has-[:disabled]:bg-wvk-tertiary has-[:disabled]:text-[var(--input-text)]/40"
+    "data-[popup-open]:shadow-[0_0_0_2px_var(--input-focus)] focus-visible:shadow-[0_0_0_2px_var(--input-focus)]",
+    "data-[disabled]:bg-wvk-tertiary data-[disabled]:text-[var(--input-text)]/40 data-[disabled]:cursor-not-allowed"
   ],
   {
     variants: {
       inputStyle: {
-        border: "shadow-[0_0_0_1px_var(--input-border-rest)] has-[:disabled]:shadow-[0_0_0_1px_var(--input-border-rest)]",
-        solid: "shadow-none has-[:disabled]:shadow-none"
+        border: "shadow-[0_0_0_1px_var(--input-border-rest)] data-[disabled]:shadow-[0_0_0_1px_var(--input-border-rest)]",
+        solid: "shadow-none data-[disabled]:shadow-none"
       },
       size: {
         sm: "h-8 rounded-[var(--radius-md)]",
@@ -5952,26 +6134,11 @@ var selectShellVariants = cva12(
     }
   }
 );
-var selectFieldVariants = cva12(
-  [
-    "absolute inset-0 z-[1] box-border min-h-0 min-w-0 h-full w-full cursor-pointer appearance-none border-0 bg-transparent py-0",
-    "outline-none ring-0 focus:border-0 focus:outline-none focus:ring-0",
-    "text-[var(--input-text)] disabled:cursor-not-allowed"
-  ],
-  {
-    variants: {
-      size: {
-        /* pr: inset + chevron (kit 20px on md/lg, 14px sm) + gap so text never clips the icon */
-        sm: "rounded-[var(--radius-md)] pl-[var(--wvk-px-sm)] pr-[calc(var(--wvk-px-sm)+var(--wvk-icon-sm)+var(--wvk-gap-lg))] text-xs",
-        md: "rounded-[var(--radius-md)] pl-[var(--wvk-px-md)] pr-[calc(var(--wvk-px-md)+var(--wvk-icon-lg)+var(--wvk-gap-lg))] text-sm",
-        lg: "rounded-[var(--radius-md)] pl-[var(--wvk-px-lg)] pr-[calc(var(--wvk-px-lg)+var(--wvk-icon-lg)+var(--wvk-gap-lg))] text-sm"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-);
+var triggerInsetClass = {
+  sm: "pl-[var(--wvk-px-sm)] pr-[calc(var(--wvk-px-sm)+var(--wvk-icon-sm)+var(--wvk-gap-lg))] text-xs",
+  md: "pl-[var(--wvk-px-md)] pr-[calc(var(--wvk-px-md)+var(--wvk-icon-lg)+var(--wvk-gap-lg))] text-sm",
+  lg: "pl-[var(--wvk-px-lg)] pr-[calc(var(--wvk-px-lg)+var(--wvk-icon-lg)+var(--wvk-gap-lg))] text-sm"
+};
 var chevronInset = {
   sm: "right-[var(--wvk-px-sm)]",
   md: "right-[var(--wvk-px-md)]",
@@ -5982,292 +6149,302 @@ var chevronIconClass = {
   md: "size-[length:var(--wvk-icon-lg)] min-h-0 min-w-0 shrink-0",
   lg: "size-[length:var(--wvk-icon-lg)] min-h-0 min-w-0 shrink-0"
 };
-var Select = React16.forwardRef(
-  ({
-    className,
-    inputStyle,
-    size = "md",
-    placeholder,
-    children,
-    disabled,
-    onFocus,
-    onBlur,
-    fieldLabel = false,
-    label,
-    labelRequired,
-    labelOptional = false,
-    labelIcon,
-    labelInfo,
-    id: idProp,
-    ...props
-  }, ref) => {
-    const [active, setActive] = React16.useState(false);
-    const generatedId = React16.useId();
+var SelectContext = React17.createContext({ multiple: false });
+var Select = React17.forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      inputStyle,
+      size = "md",
+      placeholder,
+      children,
+      disabled,
+      multiple,
+      value,
+      defaultValue,
+      onValueChange,
+      fieldLabel = false,
+      label,
+      labelRequired,
+      labelOptional = false,
+      labelIcon,
+      labelInfo,
+      id: idProp,
+      name,
+      required,
+      open,
+      defaultOpen,
+      onOpenChange,
+      "aria-label": ariaLabel
+    } = props;
+    const generatedId = React17.useId();
     const controlId = idProp ?? generatedId;
     const s = size ?? "md";
     const style = inputStyle ?? "border";
-    const shellClass = cn(
-      selectShellVariants({ inputStyle: style, size: s }),
-      !disabled && active && "shadow-[0_0_0_2px_var(--input-focus)]",
-      className
-    );
-    const shell = /* @__PURE__ */ jsxs28("div", { className: shellClass, "data-wvk-select": "", children: [
-      /* @__PURE__ */ jsxs28(
-        "select",
-        {
-          ref,
-          id: controlId,
-          disabled,
-          className: selectFieldVariants({ size: s }),
-          onFocus: (e) => {
-            setActive(true);
-            onFocus?.(e);
-          },
-          onBlur: (e) => {
-            setActive(false);
-            onBlur?.(e);
-          },
-          ...props,
-          children: [
-            placeholder && /* @__PURE__ */ jsx200("option", { value: "", disabled: true, hidden: true, children: placeholder }),
-            children
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx200(
-        "div",
-        {
-          className: cn(
-            "pointer-events-none absolute top-1/2 z-[2] flex -translate-y-1/2 items-center justify-center overflow-visible text-[var(--input-icon-muted)]",
-            chevronInset[s]
-          ),
-          "aria-hidden": true,
-          children: /* @__PURE__ */ jsx200(
-            ChevronUpDown_default,
+    const isMultiple = Boolean(multiple);
+    const trigger = /* @__PURE__ */ jsxs29(
+      BaseSelect.Trigger,
+      {
+        ref,
+        id: controlId,
+        disabled,
+        "aria-label": ariaLabel,
+        className: cn(
+          selectShellVariants({ inputStyle: style, size: s }),
+          "flex items-center gap-1 text-left",
+          triggerInsetClass[s],
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx201(BaseSelect.Value, { className: "flex-1 min-w-0 truncate", children: (v) => {
+            const empty = v == null || v === "" || Array.isArray(v) && v.length === 0;
+            if (empty) {
+              return /* @__PURE__ */ jsx201("span", { className: "text-[var(--input-placeholder)]", children: placeholder });
+            }
+            if (Array.isArray(v)) return v.join(", ");
+            return v;
+          } }),
+          /* @__PURE__ */ jsx201(
+            BaseSelect.Icon,
             {
-              className: chevronIconClass[s],
               "aria-hidden": true,
-              focusable: false
+              className: cn(
+                "pointer-events-none absolute top-1/2 z-[2] flex -translate-y-1/2 items-center justify-center text-[var(--input-icon-muted)]",
+                chevronInset[s]
+              ),
+              children: /* @__PURE__ */ jsx201(ChevronUpDown_default, { className: chevronIconClass[s], "aria-hidden": true })
             }
           )
-        }
-      )
-    ] });
-    if (fieldLabel && hasRenderableFieldLabelText(label)) {
-      return /* @__PURE__ */ jsxs28("div", { className: "flex w-full min-w-0 flex-col gap-1", children: [
-        /* @__PURE__ */ jsx200(
-          FieldLabel,
+        ]
+      }
+    );
+    const popup = /* @__PURE__ */ jsx201(BaseSelect.Portal, { children: /* @__PURE__ */ jsx201(
+      BaseSelect.Positioner,
+      {
+        alignItemWithTrigger: false,
+        sideOffset: 6,
+        className: "z-50 outline-none",
+        children: /* @__PURE__ */ jsx201(
+          BaseSelect.Popup,
           {
-            htmlFor: controlId,
-            required: labelRequired,
-            optional: labelOptional,
-            icon: labelIcon,
-            info: labelInfo,
-            children: label
+            className: cn(
+              /* `--available-height` caps to viewport; the explicit `max-h` caps to a
+                 reasonable list size so menus with many items scroll. */
+              "min-w-[var(--anchor-width)] max-h-[min(var(--available-height),18rem)] overflow-auto",
+              "rounded-[var(--radius-md)]",
+              "bg-[var(--wvk-surface-primary)] text-[var(--wvk-foreground-primary)]",
+              /* Border sits *outside* the popup via ring (no layout shift) and uses
+                 the kit's low-transparency "dark" ramp — blue on light theme,
+                 white on dark theme — so the outline reads against either canvas.
+                 shadow-lg = elevated drop. */
+              "shadow-lg ring-1 ring-[var(--wvk-transparency-dark-20)]",
+              "p-1 outline-none"
+            ),
+            children: /* @__PURE__ */ jsx201(BaseSelect.List, { children })
           }
+        )
+      }
+    ) });
+    const baseProps = {
+      disabled,
+      name,
+      required,
+      open,
+      defaultOpen,
+      onOpenChange: onOpenChange ? (next) => onOpenChange(next) : void 0
+    };
+    const root = isMultiple ? /* @__PURE__ */ jsxs29(
+      BaseSelect.Root,
+      {
+        multiple: true,
+        value,
+        defaultValue,
+        onValueChange: (v) => onValueChange?.(
+          v
         ),
-        shell
-      ] });
+        ...baseProps,
+        children: [
+          trigger,
+          popup
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs29(
+      BaseSelect.Root,
+      {
+        value,
+        defaultValue,
+        onValueChange: (v) => onValueChange?.(
+          v
+        ),
+        ...baseProps,
+        children: [
+          trigger,
+          popup
+        ]
+      }
+    );
+    const ctx = React17.useMemo(
+      () => ({ multiple: isMultiple }),
+      [isMultiple]
+    );
+    const wrappedRoot = /* @__PURE__ */ jsx201(SelectContext.Provider, { value: ctx, children: root });
+    if (fieldLabel && hasRenderableFieldLabelText(label)) {
+      return /* @__PURE__ */ jsxs29("div", { className: "flex w-full min-w-0 flex-col gap-1", children: [
+        /* @__PURE__ */ jsx201(
+          FieldLabel,
+          {
+            htmlFor: controlId,
+            required: labelRequired,
+            optional: labelOptional,
+            icon: labelIcon,
+            info: labelInfo,
+            children: label
+          }
+        ),
+        wrappedRoot
+      ] });
     }
-    return shell;
+    return wrappedRoot;
   }
 );
 Select.displayName = "Select";
+function MultiSelectGlyph({ checked }) {
+  return /* @__PURE__ */ jsx201(
+    "span",
+    {
+      className: cn(
+        "inline-flex size-4 shrink-0 items-center justify-center rounded-[3px] border border-[var(--color-primary)] transition-colors",
+        checked ? "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]" : "bg-transparent text-transparent"
+      ),
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx201(Checkmark_default, { className: "size-3" })
+    }
+  );
+}
+var SelectItem = React17.forwardRef(
+  ({ className, children, leadingIcon, trailingIcon, ...rest }, ref) => {
+    const { multiple } = React17.useContext(SelectContext);
+    return /* @__PURE__ */ jsxs29(
+      BaseSelect.Item,
+      {
+        ref,
+        className: cn(
+          "relative flex w-full cursor-pointer select-none items-center gap-2 rounded-[var(--radius-sm)] px-2 py-1.5 text-sm outline-none transition-colors",
+          "text-[var(--wvk-foreground-primary)] data-[selected]:font-bold",
+          "data-[highlighted]:bg-[var(--wvk-surface-tertiary)]",
+          "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+          className
+        ),
+        ...rest,
+        children: [
+          multiple ? (
+            /* Multi: checkbox on the LEFT, always rendered so labels align. */
+            /* @__PURE__ */ jsx201(
+              BaseSelect.ItemIndicator,
+              {
+                keepMounted: true,
+                render: (props, state) => /* @__PURE__ */ jsx201("span", { ...props, children: /* @__PURE__ */ jsx201(MultiSelectGlyph, { checked: state.selected }) }),
+                className: "inline-flex shrink-0 items-center justify-center"
+              }
+            )
+          ) : null,
+          leadingIcon ? /* @__PURE__ */ jsx201(
+            "span",
+            {
+              className: "inline-flex size-4 shrink-0 items-center justify-center text-current [&_svg]:size-full",
+              "aria-hidden": true,
+              children: leadingIcon
+            }
+          ) : null,
+          /* @__PURE__ */ jsx201(BaseSelect.ItemText, { className: "min-w-0 flex-1 truncate", children }),
+          trailingIcon ? /* @__PURE__ */ jsx201(
+            "span",
+            {
+              className: "inline-flex size-4 shrink-0 items-center justify-center text-current [&_svg]:size-full",
+              "aria-hidden": true,
+              children: trailingIcon
+            }
+          ) : null,
+          !multiple ? (
+            /* Single: tick on the RIGHT, only when selected. */
+            /* @__PURE__ */ jsx201(BaseSelect.ItemIndicator, { className: "inline-flex size-4 shrink-0 items-center justify-center text-current", children: /* @__PURE__ */ jsx201(Checkmark_default, { className: "size-4", "aria-hidden": true }) })
+          ) : null
+        ]
+      }
+    );
+  }
+);
+SelectItem.displayName = "SelectItem";
+var SelectGroup = BaseSelect.Group;
+var SelectGroupLabel = React17.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx201(
+  BaseSelect.GroupLabel,
+  {
+    ref,
+    className: cn(
+      "px-2 py-1 text-xs font-bold uppercase tracking-wide text-[var(--wvk-foreground-tertiary)]",
+      className
+    ),
+    ...rest
+  }
+));
+SelectGroupLabel.displayName = "SelectGroupLabel";
+var SelectSeparator = React17.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx201(
+  "div",
+  {
+    ref,
+    role: "separator",
+    className: cn("my-1 h-px bg-[var(--wvk-border-default)]", className),
+    ...rest
+  }
+));
+SelectSeparator.displayName = "SelectSeparator";
 
 // src/components/ui/slider.tsx
-import * as React17 from "react";
-import { Fragment as Fragment5, jsx as jsx201, jsxs as jsxs29 } from "react/jsx-runtime";
-function clamp(val, min, max) {
-  return Math.min(Math.max(val, min), max);
-}
-var Slider = React17.forwardRef(
+import * as React18 from "react";
+import { Slider as BaseSlider } from "@base-ui-components/react/slider";
+import { Fragment as Fragment5, jsx as jsx202, jsxs as jsxs30 } from "react/jsx-runtime";
+var thumbClass = "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-4 h-4 rounded-[var(--radius-full)] bg-white border-2 border-primary cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background dark:bg-primary-foreground";
+var Slider = React18.forwardRef(
   ({
     value,
     onChange,
     min = 0,
     max = 100,
+    step = 1,
     disabled = false,
     className,
     ...rest
   }, ref) => {
-    const trackRef = React17.useRef(null);
-    const draggingRef = React17.useRef(null);
     const isRange = Array.isArray(value);
-    const singleValue = isRange ? 0 : value ?? min;
-    const rangeValue = isRange ? value : [min, max];
-    const toPercent = (v) => (v - min) / (max - min) * 100;
-    const valueFromPosition = (clientX) => {
-      const track = trackRef.current;
-      if (!track) return min;
-      const rect = track.getBoundingClientRect();
-      const ratio = clamp((clientX - rect.left) / rect.width, 0, 1);
-      return Math.round(min + ratio * (max - min));
-    };
-    const handlePointerDown = (e, thumb) => {
-      if (disabled) return;
-      e.preventDefault();
-      e.target.setPointerCapture(e.pointerId);
-      draggingRef.current = thumb;
-    };
-    const handlePointerMove = (e) => {
-      if (!draggingRef.current || disabled) return;
-      const next = valueFromPosition(e.clientX);
-      if (draggingRef.current === "single") {
-        onChange?.(next);
-      } else if (draggingRef.current === "start") {
-        onChange?.([clamp(next, min, rangeValue[1]), rangeValue[1]]);
-      } else {
-        onChange?.([rangeValue[0], clamp(next, rangeValue[0], max)]);
-      }
-    };
-    const handlePointerUp = () => {
-      draggingRef.current = null;
-    };
-    const handleKeyDown = (e, thumb) => {
-      if (disabled) return;
-      const step = 1;
-      if (thumb === "single") {
-        if (e.key === "ArrowRight" || e.key === "ArrowUp") {
-          e.preventDefault();
-          onChange?.(clamp(singleValue + step, min, max));
-        } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
-          e.preventDefault();
-          onChange?.(clamp(singleValue - step, min, max));
-        } else if (e.key === "Home") {
-          e.preventDefault();
-          onChange?.(min);
-        } else if (e.key === "End") {
-          e.preventDefault();
-          onChange?.(max);
-        }
-      } else if (thumb === "start") {
-        if (e.key === "ArrowRight" || e.key === "ArrowUp") {
-          e.preventDefault();
-          onChange?.([clamp(rangeValue[0] + step, min, rangeValue[1]), rangeValue[1]]);
-        } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
-          e.preventDefault();
-          onChange?.([clamp(rangeValue[0] - step, min, rangeValue[1]), rangeValue[1]]);
-        } else if (e.key === "Home") {
-          e.preventDefault();
-          onChange?.([min, rangeValue[1]]);
-        } else if (e.key === "End") {
-          e.preventDefault();
-          onChange?.([rangeValue[1], rangeValue[1]]);
-        }
-      } else {
-        if (e.key === "ArrowRight" || e.key === "ArrowUp") {
-          e.preventDefault();
-          onChange?.([rangeValue[0], clamp(rangeValue[1] + step, rangeValue[0], max)]);
-        } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
-          e.preventDefault();
-          onChange?.([rangeValue[0], clamp(rangeValue[1] - step, rangeValue[0], max)]);
-        } else if (e.key === "Home") {
-          e.preventDefault();
-          onChange?.([rangeValue[0], rangeValue[0]]);
-        } else if (e.key === "End") {
-          e.preventDefault();
-          onChange?.([rangeValue[0], max]);
-        }
-      }
-    };
-    const handleTrackClick = (e) => {
-      if (disabled) return;
-      const next = valueFromPosition(e.clientX);
-      if (!isRange) {
-        onChange?.(next);
-      } else {
-        const distStart = Math.abs(next - rangeValue[0]);
-        const distEnd = Math.abs(next - rangeValue[1]);
-        if (distStart <= distEnd) {
-          onChange?.([clamp(next, min, rangeValue[1]), rangeValue[1]]);
-        } else {
-          onChange?.([rangeValue[0], clamp(next, rangeValue[0], max)]);
-        }
-      }
-    };
-    const thumbStyle = "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-4 h-4 rounded-[var(--radius-full)] bg-white border-2 border-primary cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background dark:bg-primary-foreground";
-    return /* @__PURE__ */ jsx201(
-      "div",
+    return /* @__PURE__ */ jsx202(
+      BaseSlider.Root,
       {
-        ...rest,
         ref,
+        value,
+        onValueChange: (next) => {
+          if (Array.isArray(next)) {
+            onChange?.([next[0], next[1]]);
+          } else {
+            onChange?.(next);
+          }
+        },
+        min,
+        max,
+        step,
+        disabled,
         className: cn(
           "relative w-full select-none",
-          disabled && "pointer-events-none opacity-50",
+          disabled && "opacity-50",
           className
         ),
-        children: /* @__PURE__ */ jsx201(
-          "div",
-          {
-            ref: trackRef,
-            className: "relative h-2 w-full cursor-pointer rounded-[var(--radius-full)] bg-muted",
-            onClick: handleTrackClick,
-            onPointerMove: handlePointerMove,
-            onPointerUp: handlePointerUp,
-            children: isRange ? /* @__PURE__ */ jsxs29(Fragment5, { children: [
-              /* @__PURE__ */ jsx201(
-                "div",
-                {
-                  className: "absolute top-0 h-full rounded-[var(--radius-full)] bg-primary",
-                  style: {
-                    left: `${toPercent(rangeValue[0])}%`,
-                    width: `${toPercent(rangeValue[1]) - toPercent(rangeValue[0])}%`
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsx201(
-                "div",
-                {
-                  role: "slider",
-                  tabIndex: disabled ? -1 : 0,
-                  "aria-valuemin": min,
-                  "aria-valuemax": max,
-                  "aria-valuenow": rangeValue[0],
-                  className: thumbStyle,
-                  style: { left: `${toPercent(rangeValue[0])}%` },
-                  onPointerDown: (e) => handlePointerDown(e, "start"),
-                  onKeyDown: (e) => handleKeyDown(e, "start")
-                }
-              ),
-              /* @__PURE__ */ jsx201(
-                "div",
-                {
-                  role: "slider",
-                  tabIndex: disabled ? -1 : 0,
-                  "aria-valuemin": min,
-                  "aria-valuemax": max,
-                  "aria-valuenow": rangeValue[1],
-                  className: thumbStyle,
-                  style: { left: `${toPercent(rangeValue[1])}%` },
-                  onPointerDown: (e) => handlePointerDown(e, "end"),
-                  onKeyDown: (e) => handleKeyDown(e, "end")
-                }
-              )
-            ] }) : /* @__PURE__ */ jsxs29(Fragment5, { children: [
-              /* @__PURE__ */ jsx201(
-                "div",
-                {
-                  className: "absolute top-0 left-0 h-full rounded-[var(--radius-full)] bg-primary",
-                  style: { width: `${toPercent(singleValue)}%` }
-                }
-              ),
-              /* @__PURE__ */ jsx201(
-                "div",
-                {
-                  role: "slider",
-                  tabIndex: disabled ? -1 : 0,
-                  "aria-valuemin": min,
-                  "aria-valuemax": max,
-                  "aria-valuenow": singleValue,
-                  className: thumbStyle,
-                  style: { left: `${toPercent(singleValue)}%` },
-                  onPointerDown: (e) => handlePointerDown(e, "single"),
-                  onKeyDown: (e) => handleKeyDown(e, "single")
-                }
-              )
-            ] })
-          }
-        )
+        ...rest,
+        children: /* @__PURE__ */ jsxs30(BaseSlider.Control, { className: "relative h-2 w-full cursor-pointer rounded-[var(--radius-full)] bg-muted", children: [
+          /* @__PURE__ */ jsx202(BaseSlider.Track, { className: "h-full w-full rounded-[var(--radius-full)]", children: /* @__PURE__ */ jsx202(BaseSlider.Indicator, { className: "h-full rounded-[var(--radius-full)] bg-primary" }) }),
+          isRange ? /* @__PURE__ */ jsxs30(Fragment5, { children: [
+            /* @__PURE__ */ jsx202(BaseSlider.Thumb, { index: 0, className: thumbClass }),
+            /* @__PURE__ */ jsx202(BaseSlider.Thumb, { index: 1, className: thumbClass })
+          ] }) : /* @__PURE__ */ jsx202(BaseSlider.Thumb, { className: thumbClass })
+        ] })
       }
     );
   }
@@ -6275,9 +6452,9 @@ var Slider = React17.forwardRef(
 Slider.displayName = "Slider";
 
 // src/components/ui/split-button.tsx
-import * as React18 from "react";
+import * as React19 from "react";
 import { cva as cva13 } from "class-variance-authority";
-import { jsx as jsx202, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx203, jsxs as jsxs31 } from "react/jsx-runtime";
 var splitButtonVariants = cva13(
   "inline-flex items-center font-bold whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50",
   {
@@ -6311,9 +6488,9 @@ var caretPadding = {
   lg: "px-4"
 };
 function CaretIcon({ className }) {
-  return /* @__PURE__ */ jsx202(ChevronDown_default, { className: cn(wvkIconLgClass, className), "aria-hidden": true });
+  return /* @__PURE__ */ jsx203(ChevronDown_default, { className: cn(wvkIconLgClass, className), "aria-hidden": true });
 }
-var SplitButton = React18.forwardRef(
+var SplitButton = React19.forwardRef(
   ({
     className,
     variant,
@@ -6325,7 +6502,7 @@ var SplitButton = React18.forwardRef(
     ...props
   }, ref) => {
     const resolvedSize = size ?? "lg";
-    return /* @__PURE__ */ jsxs30(
+    return /* @__PURE__ */ jsxs31(
       "div",
       {
         ...wrapperProps,
@@ -6334,7 +6511,7 @@ var SplitButton = React18.forwardRef(
           wrapperProps?.className
         ),
         children: [
-          /* @__PURE__ */ jsx202(
+          /* @__PURE__ */ jsx203(
             "button",
             {
               ref,
@@ -6347,14 +6524,14 @@ var SplitButton = React18.forwardRef(
               children
             }
           ),
-          /* @__PURE__ */ jsx202(
+          /* @__PURE__ */ jsx203(
             "span",
             {
               className: "h-8 w-px self-center opacity-20 bg-current",
               "aria-hidden": "true"
             }
           ),
-          /* @__PURE__ */ jsx202(
+          /* @__PURE__ */ jsx203(
             "button",
             {
               type: "button",
@@ -6365,7 +6542,7 @@ var SplitButton = React18.forwardRef(
                 caretPadding[resolvedSize]
               ),
               "aria-label": "Open menu",
-              children: /* @__PURE__ */ jsx202(CaretIcon, {})
+              children: /* @__PURE__ */ jsx203(CaretIcon, {})
             }
           )
         ]
@@ -6376,17 +6553,17 @@ var SplitButton = React18.forwardRef(
 SplitButton.displayName = "SplitButton";
 
 // src/components/ui/star-rating.tsx
-import * as React19 from "react";
-import { jsx as jsx203 } from "react/jsx-runtime";
+import * as React20 from "react";
+import { jsx as jsx204 } from "react/jsx-runtime";
 function StarIcon({ filled }) {
   if (filled) {
-    return /* @__PURE__ */ jsx203(StarActive_default, { className: wvkIconLgClass, "aria-hidden": true });
+    return /* @__PURE__ */ jsx204(StarActive_default, { className: wvkIconLgClass, "aria-hidden": true });
   }
-  return /* @__PURE__ */ jsx203(Star_default, { className: wvkIconLgClass, "aria-hidden": true });
+  return /* @__PURE__ */ jsx204(Star_default, { className: wvkIconLgClass, "aria-hidden": true });
 }
-var StarRating = React19.forwardRef(
+var StarRating = React20.forwardRef(
   ({ value = 0, onChange, readonly = false, className }, ref) => {
-    const buttonRefs = React19.useRef([]);
+    const buttonRefs = React20.useRef([]);
     const handleKeyDown = (e, starValue) => {
       if (readonly) return;
       if (e.key === "ArrowRight" || e.key === "ArrowUp") {
@@ -6401,7 +6578,7 @@ var StarRating = React19.forwardRef(
         buttonRefs.current[next - 1]?.focus();
       }
     };
-    return /* @__PURE__ */ jsx203(
+    return /* @__PURE__ */ jsx204(
       "div",
       {
         ref,
@@ -6411,7 +6588,7 @@ var StarRating = React19.forwardRef(
         children: Array.from({ length: 5 }, (_, i) => {
           const starValue = i + 1;
           const filled = starValue <= value;
-          return /* @__PURE__ */ jsx203(
+          return /* @__PURE__ */ jsx204(
             "button",
             {
               ref: (el) => {
@@ -6429,7 +6606,7 @@ var StarRating = React19.forwardRef(
                 readonly ? "cursor-default" : "cursor-pointer hover:scale-110 transition-transform",
                 filled ? "text-primary" : "text-muted-foreground"
               ),
-              children: /* @__PURE__ */ jsx203(StarIcon, { filled })
+              children: /* @__PURE__ */ jsx204(StarIcon, { filled })
             },
             starValue
           );
@@ -6441,11 +6618,12 @@ var StarRating = React19.forwardRef(
 StarRating.displayName = "StarRating";
 
 // src/components/ui/tabs.tsx
-import * as React20 from "react";
+import * as React21 from "react";
+import { Tabs as BaseTabs } from "@base-ui-components/react/tabs";
 import { cva as cva14 } from "class-variance-authority";
-import { Fragment as Fragment6, jsx as jsx204, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx205, jsxs as jsxs32 } from "react/jsx-runtime";
 var tabListVariants = cva14(
-  "inline-flex w-full items-stretch border-b border-[var(--wvk-border-bold)]",
+  "inline-flex w-full items-stretch border-b border-[var(--wvk-transparency-dark-20)]",
   {
     variants: {
       size: {
@@ -6459,44 +6637,40 @@ var tabListVariants = cva14(
     }
   }
 );
-var TabsContext = React20.createContext(null);
-var TabListContext = React20.createContext(null);
+var TabListContext = React21.createContext(null);
 function Tabs({
-  value: valueProp,
+  value,
   defaultValue = "",
   onValueChange,
+  className,
   children,
-  className
+  ...rest
 }) {
-  const [uncontrolled, setUncontrolled] = React20.useState(defaultValue);
-  const isControlled = valueProp !== void 0;
-  const value = isControlled ? valueProp : uncontrolled;
-  const setValue = React20.useCallback(
-    (next) => {
-      if (!isControlled) setUncontrolled(next);
-      onValueChange?.(next);
-    },
-    [isControlled, onValueChange]
-  );
-  const ctx = React20.useMemo(
-    () => ({ value, onValueChange: setValue }),
-    [value, setValue]
+  return /* @__PURE__ */ jsx205(
+    BaseTabs.Root,
+    {
+      value,
+      defaultValue,
+      onValueChange: (next) => onValueChange?.(next),
+      className: cn("w-full", className),
+      ...rest,
+      children
+    }
   );
-  return /* @__PURE__ */ jsx204(TabsContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx204("div", { className: cn("w-full", className), children }) });
 }
-var TabList = React20.forwardRef(
-  ({ children, size, autoWidth = false, className }, ref) => {
+var TabList = React21.forwardRef(
+  ({ children, size, autoWidth = false, className, ...rest }, ref) => {
     const resolvedSize = size ?? "md";
-    const listCtx = React20.useMemo(
+    const listCtx = React21.useMemo(
       () => ({ size: resolvedSize, autoWidth }),
       [resolvedSize, autoWidth]
     );
-    return /* @__PURE__ */ jsx204(TabListContext.Provider, { value: listCtx, children: /* @__PURE__ */ jsx204(
-      "div",
+    return /* @__PURE__ */ jsx205(TabListContext.Provider, { value: listCtx, children: /* @__PURE__ */ jsx205(
+      BaseTabs.List,
       {
         ref,
-        role: "tablist",
         className: cn(tabListVariants({ size: resolvedSize }), className),
+        ...rest,
         children
       }
     ) });
@@ -6508,68 +6682,58 @@ var tabTextSize = {
   md: "text-sm",
   lg: "text-sm"
 };
-var Tab = React20.forwardRef(
+var Tab = React21.forwardRef(
   ({
     value: tabValue = "",
     label,
     icon,
     iconPlacement = "trailing",
-    active: activeLegacy,
     children,
-    onClick,
     className,
-    type = "button",
     ...rest
   }, ref) => {
-    const tabsCtx = React20.useContext(TabsContext);
-    const listCtx = React20.useContext(TabListContext);
+    const listCtx = React21.useContext(TabListContext);
     const size = listCtx?.size ?? "md";
     const fillRow = listCtx ? !listCtx.autoWidth : true;
-    const isActive = tabsCtx ? tabsCtx.value === tabValue : Boolean(activeLegacy);
-    const iconBox = icon ? /* @__PURE__ */ jsx204(
+    const iconBox = icon ? /* @__PURE__ */ jsx205(
       "span",
       {
         className: cn(
           wvkIconMdClass,
-          "inline-flex items-center justify-center text-current [&_svg]:size-full"
+          "inline-flex shrink-0 items-center justify-center text-current [&_svg]:size-full"
         ),
         children: icon
       }
     ) : null;
     let inner;
     if (!icon) {
-      inner = label != null ? /* @__PURE__ */ jsx204("span", { className: "min-w-0 truncate", children: label }) : children;
+      inner = label != null ? /* @__PURE__ */ jsx205("span", { className: "min-w-0 truncate", children: label }) : children;
     } else {
       const textContent = label ?? children;
       const hasText = textContent != null && textContent !== false && !(Array.isArray(textContent) && textContent.length === 0);
-      inner = hasText && icon ? iconPlacement === "leading" ? /* @__PURE__ */ jsxs31(Fragment6, { children: [
+      inner = hasText && icon ? iconPlacement === "leading" ? /* @__PURE__ */ jsxs32(Fragment6, { children: [
         iconBox,
-        /* @__PURE__ */ jsx204("span", { className: "inline-flex min-w-0 items-center justify-center gap-0.5 truncate", children: textContent })
-      ] }) : /* @__PURE__ */ jsxs31(Fragment6, { children: [
-        /* @__PURE__ */ jsx204("span", { className: "inline-flex min-w-0 items-center justify-center gap-0.5 truncate", children: textContent }),
+        /* @__PURE__ */ jsx205("span", { className: "min-w-0 truncate", children: textContent })
+      ] }) : /* @__PURE__ */ jsxs32(Fragment6, { children: [
+        /* @__PURE__ */ jsx205("span", { className: "min-w-0 truncate", children: textContent }),
         iconBox
       ] }) : iconBox;
     }
-    return /* @__PURE__ */ jsx204(
-      "button",
+    return /* @__PURE__ */ jsx205(
+      BaseTabs.Tab,
       {
         ref,
-        type,
-        role: "tab",
-        "aria-selected": isActive,
+        value: tabValue,
         className: cn(
-          "inline-flex items-center justify-center gap-2 px-4",
+          "flex items-center justify-center gap-2 px-4 -mb-px",
           fillRow ? "min-w-0 flex-1" : "shrink-0 grow-0",
           "border-0 border-b-2 bg-transparent transition-colors",
           tabTextSize[size],
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-          isActive ? "border-[var(--wvk-border-bold)] font-bold text-foreground" : "border-transparent font-normal text-muted-foreground hover:text-foreground/80",
+          "border-transparent font-normal text-foreground hover:text-foreground/80",
+          "data-[active]:border-[var(--wvk-border-bold)] data-[active]:font-bold data-[active]:text-foreground",
           className
         ),
-        onClick: (e) => {
-          tabsCtx?.onValueChange(tabValue);
-          onClick?.(e);
-        },
         ...rest,
         children: inner
       }
@@ -6577,22 +6741,23 @@ var Tab = React20.forwardRef(
   }
 );
 Tab.displayName = "Tab";
+var TabPanel = BaseTabs.Panel;
+var TabIndicator = BaseTabs.Indicator;
 var TabsList = TabList;
-TabsList.displayName = "TabsList";
 var TabsTrigger = Tab;
-TabsTrigger.displayName = "TabsTrigger";
+var TabsContent = TabPanel;
 
 // src/components/ui/tag.tsx
-import * as React21 from "react";
+import * as React22 from "react";
 import { cva as cva15 } from "class-variance-authority";
-import { jsx as jsx205, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx206, jsxs as jsxs33 } from "react/jsx-runtime";
 function TagIconGlyph(props) {
-  return /* @__PURE__ */ jsx205(Tag_default, { ...props });
+  return /* @__PURE__ */ jsx206(Tag_default, { ...props });
 }
 function applyTagIconSizing(node) {
-  if (!React21.isValidElement(node)) return node;
+  if (!React22.isValidElement(node)) return node;
   const el = node;
-  return React21.cloneElement(el, {
+  return React22.cloneElement(el, {
     className: cn("size-full", el.props.className)
   });
 }
@@ -6625,15 +6790,15 @@ function resolveTagLeadingContent(showLeadingIcon, leadingIcon, icon, size) {
   if (showLeadingIcon === false) return null;
   if (showLeadingIcon === true) {
     if (leadingIcon != null) {
-      return /* @__PURE__ */ jsx205(TagLeadingIcon, { name: leadingIcon, className: "size-full", "aria-hidden": true });
+      return /* @__PURE__ */ jsx206(TagLeadingIcon, { name: leadingIcon, className: "size-full", "aria-hidden": true });
     }
     if (icon != null) return applyTagIconSizing(icon);
-    return /* @__PURE__ */ jsx205(TagIconGlyph, { className: "size-full", "aria-hidden": true });
+    return /* @__PURE__ */ jsx206(TagIconGlyph, { className: "size-full", "aria-hidden": true });
   }
   if (icon != null) return applyTagIconSizing(icon);
   return null;
 }
-var Tag2 = React21.forwardRef(
+var Tag2 = React22.forwardRef(
   ({
     className,
     tagStyle,
@@ -6658,14 +6823,14 @@ var Tag2 = React21.forwardRef(
     const body = hasLabelProp ? label : children;
     const hasBody = body != null && body !== false && !(typeof body === "string" && body.trim() === "");
     const clampTitle = labelTooltip ?? (hasLabelProp && typeof label === "string" && label.length > 0 ? label : void 0) ?? (typeof children === "string" && children.trim().length > 0 ? children : void 0);
-    return /* @__PURE__ */ jsxs32(
+    return /* @__PURE__ */ jsxs33(
       "span",
       {
         className: cn(tagVariants({ tagStyle, size, className })),
         ref,
         ...props,
         children: [
-          leading != null ? /* @__PURE__ */ jsx205(
+          leading != null ? /* @__PURE__ */ jsx206(
             "span",
             {
               className: cn(tagIconBoxClass[resolvedSize]),
@@ -6673,7 +6838,7 @@ var Tag2 = React21.forwardRef(
               children: leading
             }
           ) : null,
-          hasBody ? /* @__PURE__ */ jsx205(
+          hasBody ? /* @__PURE__ */ jsx206(
             "span",
             {
               className: "min-h-0 min-w-0 flex-1 line-clamp-3 break-words text-left whitespace-normal [overflow-wrap:anywhere]",
@@ -6681,7 +6846,7 @@ var Tag2 = React21.forwardRef(
               children: body
             }
           ) : null,
-          onClose ? /* @__PURE__ */ jsx205(
+          onClose ? /* @__PURE__ */ jsx206(
             "button",
             {
               type: "button",
@@ -6691,7 +6856,7 @@ var Tag2 = React21.forwardRef(
                 tagIconBoxClass[resolvedSize]
               ),
               "aria-label": "Remove",
-              children: /* @__PURE__ */ jsx205(Close_default, { className: "size-full", "aria-hidden": true })
+              children: /* @__PURE__ */ jsx206(Close_default, { className: "size-full", "aria-hidden": true })
             }
           ) : null
         ]
@@ -6702,9 +6867,10 @@ var Tag2 = React21.forwardRef(
 Tag2.displayName = "Tag";
 
 // src/components/ui/text-area.tsx
-import * as React22 from "react";
+import * as React23 from "react";
+import { Field as BaseField } from "@base-ui-components/react/field";
 import { cva as cva16 } from "class-variance-authority";
-import { jsx as jsx206, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx207, jsxs as jsxs34 } from "react/jsx-runtime";
 var textAreaShellVariants = cva16(
   [
     "relative flex w-full min-w-0 flex-col border-0 bg-[var(--input-surface)] text-[var(--input-text)] outline-none transition-[box-shadow,background-color,color]",
@@ -6764,7 +6930,7 @@ function mergeRefs(...refs) {
     }
   };
 }
-var TextArea = React22.forwardRef(
+var TextArea = React23.forwardRef(
   ({
     className,
     inputStyle,
@@ -6780,16 +6946,17 @@ var TextArea = React22.forwardRef(
     id: idProp,
     ...props
   }, ref) => {
-    const innerRef = React22.useRef(null);
+    const innerRef = React23.useRef(null);
     const setRefs = mergeRefs(ref, innerRef);
-    const generatedId = React22.useId();
+    const generatedId = React23.useId();
     const controlId = idProp ?? generatedId;
     const s = size ?? "md";
     const minH = MIN_HEIGHT_PX[s];
-    const [heightPx, setHeightPx] = React22.useState(null);
-    const dragRef = React22.useRef(
+    const [heightPx, setHeightPx] = React23.useState(null);
+    const dragRef = React23.useRef(
       null
     );
+    const [isDragging, setIsDragging] = React23.useState(false);
     const onResizePointerDown = (e) => {
       if (disabled) return;
       e.preventDefault();
@@ -6801,6 +6968,7 @@ var TextArea = React22.forwardRef(
         startY: e.clientY,
         startH: ta.getBoundingClientRect().height
       };
+      setIsDragging(true);
     };
     const onResizePointerMove = (e) => {
       const drag = dragRef.current;
@@ -6815,10 +6983,11 @@ var TextArea = React22.forwardRef(
         e.currentTarget.releasePointerCapture(e.pointerId);
       }
       dragRef.current = null;
+      setIsDragging(false);
     };
-    const shell = /* @__PURE__ */ jsxs33("div", { className: cn(textAreaShellVariants({ inputStyle, size }), className), children: [
-      /* @__PURE__ */ jsx206(
-        "textarea",
+    const shell = /* @__PURE__ */ jsxs34("div", { "data-wvk-input": "shell", style: { cursor: disabled ? "not-allowed" : "var(--wvk-cursor-text)" }, className: cn(textAreaShellVariants({ inputStyle, size }), className), children: [
+      /* @__PURE__ */ jsx207(
+        BaseField.Control,
         {
           ref: setRefs,
           id: controlId,
@@ -6828,20 +6997,24 @@ var TextArea = React22.forwardRef(
             ...style,
             ...heightPx != null ? { height: `${heightPx}px` } : void 0
           },
+          render: /* @__PURE__ */ jsx207("textarea", {}),
           ...props
         }
       ),
-      !disabled && /* @__PURE__ */ jsx206(
+      !disabled && /* @__PURE__ */ jsx207(
         "button",
         {
           type: "button",
-          className: "absolute bottom-0 right-0 z-10 flex h-8 w-8 cursor-ns-resize touch-none items-center justify-center border-0 bg-transparent p-0 select-none outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          className: cn(
+            "absolute bottom-0 right-0 z-10 flex h-8 w-8 touch-none items-center justify-center border-0 bg-transparent p-0 select-none outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            isDragging ? "cursor-grabbing" : "cursor-ns-resize"
+          ),
           onPointerDown: onResizePointerDown,
           onPointerMove: onResizePointerMove,
           onPointerUp: onResizePointerUp,
           onPointerCancel: onResizePointerUp,
           "aria-label": "Drag to resize height",
-          children: /* @__PURE__ */ jsx206(
+          children: /* @__PURE__ */ jsx207(
             Expand_default,
             {
               className: cn(
@@ -6855,8 +7028,8 @@ var TextArea = React22.forwardRef(
       )
     ] });
     if (fieldLabel && hasRenderableFieldLabelText(label)) {
-      return /* @__PURE__ */ jsxs33("div", { className: "flex w-full min-w-0 flex-col gap-1", children: [
-        /* @__PURE__ */ jsx206(
+      return /* @__PURE__ */ jsxs34("div", { className: "flex w-full min-w-0 flex-col gap-1", children: [
+        /* @__PURE__ */ jsx207(
           FieldLabel,
           {
             htmlFor: controlId,
@@ -6876,9 +7049,10 @@ var TextArea = React22.forwardRef(
 TextArea.displayName = "TextArea";
 
 // src/components/ui/text-input.tsx
-import * as React23 from "react";
+import * as React24 from "react";
+import { Input as BaseInput } from "@base-ui-components/react/input";
 import { cva as cva17 } from "class-variance-authority";
-import { Fragment as Fragment7, jsx as jsx207, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx208, jsxs as jsxs35 } from "react/jsx-runtime";
 var textInputShellVariants = cva17(
   [
     "flex min-w-0 w-full items-center border-0 bg-[var(--input-surface)] text-[var(--input-text)] outline-none transition-[box-shadow,background-color,color]",
@@ -6938,15 +7112,15 @@ function mergeRefs2(...refs) {
   };
 }
 function ClearGlyph() {
-  return /* @__PURE__ */ jsx207(Close_default, { "aria-hidden": true, className: "size-full" });
+  return /* @__PURE__ */ jsx208(Close_default, { "aria-hidden": true, className: "size-full" });
 }
 function TextInputSearchIcon(props) {
-  return /* @__PURE__ */ jsx207(MagnifyingGlass_default, { "aria-hidden": true, className: "size-full", ...props });
+  return /* @__PURE__ */ jsx208(MagnifyingGlass_default, { "aria-hidden": true, className: "size-full", ...props });
 }
 function TextInputCalendarIcon(props) {
-  return /* @__PURE__ */ jsx207(Calendar_default, { "aria-hidden": true, className: "size-full", ...props });
+  return /* @__PURE__ */ jsx208(Calendar_default, { "aria-hidden": true, className: "size-full", ...props });
 }
-var TextInput = React23.forwardRef(
+var TextInput = React24.forwardRef(
   ({
     className,
     inputStyle,
@@ -6969,11 +7143,11 @@ var TextInput = React23.forwardRef(
     id: idProp,
     ...props
   }, ref) => {
-    const innerRef = React23.useRef(null);
-    const generatedId = React23.useId();
+    const innerRef = React24.useRef(null);
+    const generatedId = React24.useId();
     const inputId = idProp ?? generatedId;
     const controlled = value !== void 0;
-    const [internalValue, setInternalValue] = React23.useState(
+    const [internalValue, setInternalValue] = React24.useState(
       () => defaultValue?.toString() ?? ""
     );
     const displayLength = controlled ? String(value ?? "").length : internalValue.length;
@@ -6995,7 +7169,7 @@ var TextInput = React23.forwardRef(
       onChange?.(e);
     };
     const setRefs = mergeRefs2(ref, innerRef);
-    const clearBtn = reserveClear ? /* @__PURE__ */ jsx207(
+    const clearBtn = reserveClear ? /* @__PURE__ */ jsx208(
       "button",
       {
         type: "button",
@@ -7008,16 +7182,18 @@ var TextInput = React23.forwardRef(
           showClear ? "hover:text-[var(--input-text)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--input-surface)]" : "pointer-events-none opacity-0"
         ),
         "aria-label": "Clear input",
-        children: /* @__PURE__ */ jsx207(ClearGlyph, {})
+        children: /* @__PURE__ */ jsx208(ClearGlyph, {})
       }
     ) : null;
     const hasAction = action != null && action !== false;
-    const shell = /* @__PURE__ */ jsxs34(
+    const shell = /* @__PURE__ */ jsxs35(
       "div",
       {
+        "data-wvk-input": "shell",
+        style: { cursor: disabled ? "not-allowed" : "var(--wvk-cursor-text)" },
         className: cn(textInputShellVariants({ inputStyle, size }), className),
         children: [
-          leadingIcon ? /* @__PURE__ */ jsx207(
+          leadingIcon ? /* @__PURE__ */ jsx208(
             "span",
             {
               className: cn(iconBoxClass[s], "text-[var(--input-icon-muted)]"),
@@ -7025,8 +7201,8 @@ var TextInput = React23.forwardRef(
               children: leadingIcon
             }
           ) : null,
-          /* @__PURE__ */ jsx207(
-            "input",
+          /* @__PURE__ */ jsx208(
+            BaseInput,
             {
               ref: setRefs,
               id: inputId,
@@ -7037,9 +7213,9 @@ var TextInput = React23.forwardRef(
               ...props
             }
           ),
-          /* @__PURE__ */ jsxs34("div", { className: "flex min-w-0 shrink-0 items-center gap-2", children: [
+          /* @__PURE__ */ jsxs35("div", { className: "flex min-w-0 shrink-0 items-center gap-2", children: [
             clearBtn,
-            trailingIcon ? /* @__PURE__ */ jsx207(
+            trailingIcon ? /* @__PURE__ */ jsx208(
               "span",
               {
                 className: cn(
@@ -7050,23 +7226,23 @@ var TextInput = React23.forwardRef(
                 children: trailingIcon
               }
             ) : null,
-            hasAction ? /* @__PURE__ */ jsxs34(Fragment7, { children: [
-              /* @__PURE__ */ jsx207(
+            hasAction ? /* @__PURE__ */ jsxs35(Fragment7, { children: [
+              /* @__PURE__ */ jsx208(
                 "span",
                 {
                   className: "h-6 w-px shrink-0 rounded-full bg-[var(--input-border-rest)]",
                   "aria-hidden": true
                 }
               ),
-              /* @__PURE__ */ jsx207("div", { className: "min-w-0 text-sm font-bold uppercase leading-5 text-[var(--input-text)] [&_a]:border-0 [&_a]:text-sm [&_a]:font-bold [&_a]:uppercase [&_a]:leading-5 [&_a]:text-[var(--input-text)]", children: action })
+              /* @__PURE__ */ jsx208("div", { className: "min-w-0 text-sm font-bold uppercase leading-5 text-[var(--input-text)] [&_a]:border-0 [&_a]:text-sm [&_a]:font-bold [&_a]:uppercase [&_a]:leading-5 [&_a]:text-[var(--input-text)]", children: action })
             ] }) : null
           ] })
         ]
       }
     );
     if (fieldLabel && hasRenderableFieldLabelText(label)) {
-      return /* @__PURE__ */ jsxs34("div", { className: "flex w-full min-w-0 flex-col gap-1", children: [
-        /* @__PURE__ */ jsx207(
+      return /* @__PURE__ */ jsxs35("div", { className: "flex w-full min-w-0 flex-col gap-1", children: [
+        /* @__PURE__ */ jsx208(
           FieldLabel,
           {
             htmlFor: inputId,
@@ -7086,15 +7262,19 @@ var TextInput = React23.forwardRef(
 TextInput.displayName = "TextInput";
 
 // src/components/ui/toggle-switch.tsx
-import * as React24 from "react";
+import * as React25 from "react";
+import { Switch as BaseSwitch } from "@base-ui-components/react/switch";
+import { motion as motion5 } from "framer-motion";
 import { cva as cva18 } from "class-variance-authority";
-import { jsx as jsx208 } from "react/jsx-runtime";
+import { jsx as jsx209 } from "react/jsx-runtime";
 var toggleSwitchVariants = cva18(
   [
-    "relative inline-flex shrink-0 cursor-pointer border transition-colors",
+    "relative inline-flex shrink-0 cursor-pointer border transition-colors overflow-hidden",
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-    "disabled:pointer-events-none disabled:opacity-50",
-    "rounded-full"
+    "data-[disabled]:pointer-events-none data-[disabled]:opacity-50 disabled:pointer-events-none disabled:opacity-50",
+    "rounded-full",
+    "data-[checked]:bg-primary data-[checked]:border-primary",
+    "data-[unchecked]:bg-transparent data-[unchecked]:border-primary"
   ],
   {
     variants: {
@@ -7105,15 +7285,10 @@ var toggleSwitchVariants = cva18(
         md: "h-7 w-12 [--toggle-pad:3px] [--thumb-size:20px]",
         /** ~32×56px — pairs with Checkbox/Radio `lg`. */
         lg: "h-8 w-14 [--toggle-pad:2px] [--thumb-size:26px]"
-      },
-      checked: {
-        true: "bg-primary border-primary",
-        false: "bg-transparent border-primary"
       }
     },
     defaultVariants: {
-      size: "lg",
-      checked: false
+      size: "lg"
     }
   }
 );
@@ -7121,49 +7296,82 @@ var toggleThumbVariants = cva18(
   [
     "pointer-events-none absolute top-1/2 -translate-y-1/2 rounded-full",
     "h-[length:var(--thumb-size)] w-[length:var(--thumb-size)]",
-    "transition-[left] duration-200 ease-in-out"
-  ],
-  {
-    variants: {
-      checked: {
-        true: "left-[calc(100%_-_var(--toggle-pad)_-_var(--thumb-size))] bg-white dark:bg-primary-foreground",
-        false: "left-[var(--toggle-pad)] bg-primary"
-      }
-    },
-    defaultVariants: {
-      checked: false
-    }
-  }
-);
-var ToggleSwitch = React24.forwardRef(
+    "transition-[left] duration-200 ease-in-out",
+    "data-[checked]:left-[calc(100%_-_var(--toggle-pad)_-_var(--thumb-size))] data-[checked]:bg-white dark:data-[checked]:bg-primary-foreground",
+    "data-[unchecked]:left-[var(--toggle-pad)] data-[unchecked]:bg-primary"
+  ]
+);
+var THUMB_CONFIG = {
+  sm: { size: 16, pad: 3, leftOn: 23 },
+  md: { size: 20, pad: 3, leftOn: 23 },
+  lg: { size: 26, pad: 2, leftOn: 26 }
+};
+var ToggleSwitch = React25.forwardRef(
   ({
-    checked = false,
-    onCheckedChange,
-    disabled = false,
     className,
     size = "lg",
-    onClick,
+    onCheckedChange,
     ...rest
   }, ref) => {
-    const handleClick = (e) => {
-      onClick?.(e);
-      if (!disabled && !e.defaultPrevented) {
-        onCheckedChange?.(!checked);
-      }
-    };
     const s = size ?? "lg";
-    return /* @__PURE__ */ jsx208(
-      "button",
+    const cfg = THUMB_CONFIG[s];
+    const [isPressed, setIsPressed] = React25.useState(false);
+    return /* @__PURE__ */ jsx209(
+      BaseSwitch.Root,
       {
-        ...rest,
         ref,
-        type: "button",
-        role: "switch",
-        "aria-checked": checked,
-        disabled,
-        onClick: handleClick,
-        className: cn(toggleSwitchVariants({ size: s, checked }), className),
-        children: /* @__PURE__ */ jsx208("span", { className: toggleThumbVariants({ checked }) })
+        onCheckedChange: (checked) => onCheckedChange?.(checked),
+        nativeButton: true,
+        className: cn(toggleSwitchVariants({ size: s }), className),
+        ...rest,
+        render: (props, state) => /* @__PURE__ */ jsx209(
+          "button",
+          {
+            ...props,
+            type: "button",
+            onPointerDown: (e) => {
+              setIsPressed(true);
+              props.onPointerDown?.(e);
+            },
+            onPointerUp: (e) => {
+              setIsPressed(false);
+              props.onPointerUp?.(e);
+            },
+            onPointerLeave: (e) => {
+              setIsPressed(false);
+              props.onPointerLeave?.(e);
+            },
+            onPointerCancel: () => setIsPressed(false),
+            children: /* @__PURE__ */ jsx209(
+              motion5.span,
+              {
+                "aria-hidden": true,
+                className: cn(
+                  "pointer-events-none absolute rounded-full",
+                  state.checked ? "bg-white dark:bg-primary-foreground" : "bg-primary"
+                ),
+                style: {
+                  height: cfg.size,
+                  top: "50%",
+                  marginTop: -(cfg.size / 2),
+                  originX: state.checked ? 1 : 0
+                },
+                initial: false,
+                animate: {
+                  left: state.checked ? cfg.leftOn : cfg.pad,
+                  width: cfg.size,
+                  scaleX: isPressed ? 1.28 : 1,
+                  scaleY: isPressed ? 0.82 : 1
+                },
+                transition: {
+                  left: { type: "spring", stiffness: 420, damping: 30 },
+                  scaleX: { type: "spring", stiffness: 700, damping: 22 },
+                  scaleY: { type: "spring", stiffness: 700, damping: 22 }
+                }
+              }
+            )
+          }
+        )
       }
     );
   }
@@ -7171,16 +7379,351 @@ var ToggleSwitch = React24.forwardRef(
 ToggleSwitch.displayName = "ToggleSwitch";
 
 // src/components/theme-provider.tsx
-import * as React25 from "react";
-import { jsx as jsx209 } from "react/jsx-runtime";
+import * as React27 from "react";
+
+// src/components/whimsy-cursor.tsx
+import * as React26 from "react";
+import { motion as motion6 } from "framer-motion";
+import { jsx as jsx210, jsxs as jsxs36 } from "react/jsx-runtime";
+var INTERACTIVE_SELECTOR = [
+  "a[href]",
+  "button:not(:disabled)",
+  '[role="button"]:not([aria-disabled="true"])',
+  '[role="link"]',
+  '[role="tab"]',
+  '[role="menuitem"]',
+  "label[for]",
+  "summary",
+  'input[type="checkbox"]:not(:disabled)',
+  'input[type="radio"]:not(:disabled)',
+  "select:not(:disabled)",
+  ".cursor-pointer"
+].join(",");
+var ACTIVE_CLASS = "wvk-whimsy-cursor-active";
+var HIDE_STYLE_ID = "wvk-whimsy-cursor-style";
+var HIDE_NATIVE_CSS = `
+html.${ACTIVE_CLASS},
+html.${ACTIVE_CLASS} *,
+html.${ACTIVE_CLASS} *::before,
+html.${ACTIVE_CLASS} *::after {
+  cursor: none !important;
+}
+`;
+function injectStyle(id, css) {
+  if (typeof document === "undefined" || document.getElementById(id)) return;
+  const style = document.createElement("style");
+  style.id = id;
+  style.textContent = css;
+  document.head.appendChild(style);
+}
+function WhimsyCursor({
+  hoverRotateDeg = -22
+} = {}) {
+  const wrapperRef = React26.useRef(null);
+  const [hover, setHover] = React26.useState(false);
+  const [visible, setVisible] = React26.useState(false);
+  const variant = hover ? "pointer" : "default";
+  const hotspot = variant === "pointer" ? { x: 12, y: 8 } : { x: 9, y: 5 };
+  React26.useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (!window.matchMedia("(pointer: fine)").matches) return;
+    injectStyle(HIDE_STYLE_ID, HIDE_NATIVE_CSS);
+    document.documentElement.classList.add(ACTIVE_CLASS);
+    let rafId = null;
+    let nextX = 0;
+    let nextY = 0;
+    let dirty = false;
+    const draw = () => {
+      rafId = null;
+      if (!dirty) return;
+      const el = wrapperRef.current;
+      if (el) {
+        el.style.transform = `translate3d(${nextX}px, ${nextY}px, 0)`;
+      }
+      dirty = false;
+    };
+    const schedule = () => {
+      if (rafId == null) rafId = requestAnimationFrame(draw);
+    };
+    const onMove = (e) => {
+      nextX = e.clientX;
+      nextY = e.clientY;
+      dirty = true;
+      setVisible(true);
+      const target = e.target;
+      const isInteractive = !!target?.closest?.(INTERACTIVE_SELECTOR);
+      setHover((prev) => prev !== isInteractive ? isInteractive : prev);
+      schedule();
+    };
+    const onLeave = () => setVisible(false);
+    const onEnter = () => setVisible(true);
+    window.addEventListener("pointermove", onMove, { passive: true });
+    document.addEventListener("pointerleave", onLeave);
+    document.addEventListener("pointerenter", onEnter);
+    return () => {
+      window.removeEventListener("pointermove", onMove);
+      document.removeEventListener("pointerleave", onLeave);
+      document.removeEventListener("pointerenter", onEnter);
+      if (rafId != null) cancelAnimationFrame(rafId);
+      document.documentElement.classList.remove(ACTIVE_CLASS);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx210(
+    "div",
+    {
+      ref: wrapperRef,
+      "aria-hidden": true,
+      style: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        width: 32,
+        height: 32,
+        pointerEvents: "none",
+        zIndex: 2147483647,
+        opacity: visible ? 1 : 0,
+        transition: "opacity 120ms ease",
+        marginLeft: -hotspot.x,
+        marginTop: -hotspot.y,
+        willChange: "transform"
+      },
+      children: /* @__PURE__ */ jsx210(
+        motion6.div,
+        {
+          className: "wvk-whimsy-cursor-rotor",
+          "data-hover": hover ? "true" : "false",
+          animate: { rotate: hover ? hoverRotateDeg : 0 },
+          transition: { type: "spring", stiffness: 600, damping: 12, mass: 0.4 },
+          style: {
+            width: 32,
+            height: 32,
+            transformOrigin: `${hotspot.x}px ${hotspot.y}px`
+          },
+          children: variant === "pointer" ? /* @__PURE__ */ jsx210(PointerSvg, {}) : /* @__PURE__ */ jsx210(DefaultSvg, {})
+        }
+      )
+    }
+  );
+}
+function DefaultSvg() {
+  return /* @__PURE__ */ jsxs36(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: 32,
+      height: 32,
+      fill: "none",
+      viewBox: "0 0 32 32",
+      children: [
+        /* @__PURE__ */ jsx210("defs", { children: /* @__PURE__ */ jsx210(
+          "filter",
+          {
+            id: "wvk-whimsy-cursor-default-shadow",
+            filterUnits: "userSpaceOnUse",
+            x: "-4",
+            y: "-4",
+            width: "40",
+            height: "40",
+            colorInterpolationFilters: "sRGB",
+            children: /* @__PURE__ */ jsx210(
+              "feDropShadow",
+              {
+                dx: "0",
+                dy: "1.25",
+                stdDeviation: "1",
+                floodColor: "#000000",
+                floodOpacity: "0.38"
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsxs36("g", { filter: "url(#wvk-whimsy-cursor-default-shadow)", children: [
+          /* @__PURE__ */ jsx210(
+            "path",
+            {
+              fill: "#0055FF",
+              d: "M10 6.028v14.637a.5.5 0 0 0 .86.348l2.424-2.503a.5.5 0 0 1 .808.127l2.225 4.523a1 1 0 0 0 1.379.435l2.234-1.229a1 1 0 0 0 .41-1.33l-2.192-4.31a.5.5 0 0 1 .446-.726h3.96a.5.5 0 0 0 .31-.893L10.808 5.635a.5.5 0 0 0-.809.393Z"
+            }
+          ),
+          /* @__PURE__ */ jsx210(
+            "path",
+            {
+              stroke: "white",
+              strokeOpacity: ".8",
+              strokeWidth: "2",
+              d: "M9.42 4.985a1.502 1.502 0 0 1 1.882-.225l.125.089L23.48 14.32a1.501 1.501 0 0 1-.926 2.68h-3.147l1.823 3.583a2 2 0 0 1-.819 2.66l-2.234 1.229a2 2 0 0 1-2.759-.87l-1.911-3.886-1.93 1.993A1.5 1.5 0 0 1 9 20.665V6.028a1.5 1.5 0 0 1 .32-.926l.1-.117Z"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function PointerSvg() {
+  return /* @__PURE__ */ jsxs36(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: 32,
+      height: 32,
+      fill: "none",
+      viewBox: "0 0 32 32",
+      children: [
+        /* @__PURE__ */ jsx210("defs", { children: /* @__PURE__ */ jsx210(
+          "filter",
+          {
+            id: "wvk-whimsy-cursor-pointer-shadow",
+            filterUnits: "userSpaceOnUse",
+            x: "-4",
+            y: "-4",
+            width: "40",
+            height: "40",
+            colorInterpolationFilters: "sRGB",
+            children: /* @__PURE__ */ jsx210(
+              "feDropShadow",
+              {
+                dx: "0",
+                dy: "1.25",
+                stdDeviation: "1",
+                floodColor: "#000000",
+                floodOpacity: "0.38"
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsxs36("g", { filter: "url(#wvk-whimsy-cursor-pointer-shadow)", children: [
+          /* @__PURE__ */ jsx210(
+            "path",
+            {
+              fill: "white",
+              d: "M18.5 30H13c-5.44 0-9.083-4.964-11.41-14.272C.659 12.003 3.917 8.913 7 9.65V6a5 5 0 0 1 10 0v2.1a4.99 4.99 0 0 1 2.105.98A5 5 0 0 1 24.001 11a5 5 0 0 1 5 5v4c0 .19-.019.38-.054.565C28.409 25.897 23.907 30 18.5 30Z"
+            }
+          ),
+          /* @__PURE__ */ jsx210(
+            "path",
+            {
+              fill: "#0055FF",
+              d: "M25 19.5V16a1 1 0 1 0-2 0 1 1 0 1 1-2 0v-2a1 1 0 1 0-2 0 1 1 0 1 1-2 0 3 3 0 0 1 5.895-.79A3 3 0 0 1 27 16v4a1 1 0 0 1-.033.256A8.5 8.5 0 0 1 18.5 28H13c-4.284 0-7.37-4.357-9.47-12.758-.698-2.792 2.321-4.805 4.177-2.95L9 13.587V6a3 3 0 1 1 6 0v7a1 1 0 1 1-2 0V6a1 1 0 1 0-2 0v10a1 1 0 0 1-1.707.707l-3-3c-.344-.344-1.053.129-.823 1.05C7.37 22.358 9.95 26 13 26h5.5a6.5 6.5 0 0 0 6.5-6.5ZM16 10a3 3 0 0 1 3 3v1a1 1 0 1 1-2 0v-1a1 1 0 1 0-2 0 1 1 0 1 1-2 0 3 3 0 0 1 3-3Zm-1 7a1 1 0 0 1 1 1v3a1 1 0 1 1-2 0v-3a1 1 0 0 1 1-1Zm4 0a1 1 0 0 1 1 1v3a1 1 0 1 1-2 0v-3a1 1 0 0 1 1-1Z"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/theme-provider.tsx
+import { jsx as jsx211, jsxs as jsxs37 } from "react/jsx-runtime";
 var STORAGE_KEY = "wvk-theme";
-var ThemeContext = React25.createContext(null);
+var CURSOR_STYLE_STORAGE_KEY = "wvk-cursor-style";
+var CURSOR_STYLE_CLASS_ARROW = "wvk-cursor-style-arrow";
+var CURSOR_STYLE_ID = "wvk-cursor-style";
+var CURSOR_DEFAULT = 'url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8ZGVmcz4KICAgIDxmaWx0ZXIKICAgICAgaWQ9Ind2ay1jdXJzb3Itc2hhZG93IgogICAgICBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiCiAgICAgIHg9Ii00IgogICAgICB5PSItNCIKICAgICAgd2lkdGg9IjQwIgogICAgICBoZWlnaHQ9IjQwIgogICAgICBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiCiAgICA+CiAgICAgIDxmZURyb3BTaGFkb3cgZHg9IjAiIGR5PSIxLjI1IiBzdGREZXZpYXRpb249IjEiIGZsb29kLWNvbG9yPSIjMDAwMDAwIiBmbG9vZC1vcGFjaXR5PSIwLjM4IiAvPgogICAgPC9maWx0ZXI+CiAgPC9kZWZzPgogIDxnIGZpbHRlcj0idXJsKCN3dmstY3Vyc29yLXNoYWRvdykiPgogICAgPHBhdGggZmlsbD0iIzAwNTVGRiIgZD0iTTEwIDYuMDI4djE0LjYzN2EuNS41IDAgMCAwIC44Ni4zNDhsMi40MjQtMi41MDNhLjUuNSAwIDAgMSAuODA4LjEyN2wyLjIyNSA0LjUyM2ExIDEgMCAwIDAgMS4zNzkuNDM1bDIuMjM0LTEuMjI5YTEgMSAwIDAgMCAuNDEtMS4zM2wtMi4xOTItNC4zMWEuNS41IDAgMCAxIC40NDYtLjcyNmgzLjk2YS41LjUgMCAwIDAgLjMxLS44OTNMMTAuODA4IDUuNjM1YS41LjUgMCAwIDAtLjgwOS4zOTNaIi8+CiAgICA8cGF0aCBzdHJva2U9IndoaXRlIiBzdHJva2Utb3BhY2l0eT0iLjgiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTkuNDIgNC45ODVhMS41MDIgMS41MDIgMCAwIDEgMS44ODItLjIyNWwuMTI1LjA4OUwyMy40OCAxNC4zMmExLjUwMSAxLjUwMSAwIDAgMS0uOTI2IDIuNjhoLTMuMTQ3bDEuODIzIDMuNTgzYTIgMiAwIDAgMS0uODE5IDIuNjZsLTIuMjM0IDEuMjI5YTIgMiAwIDAgMS0yLjc1OS0uODdsLTEuOTExLTMuODg2LTEuOTMgMS45OTNBMS41IDEuNSAwIDAgMSA5IDIwLjY2NVY2LjAyOGExLjUgMS41IDAgMCAxIC4zMi0uOTI2bC4xLS4xMTdaIi8+CiAgPC9nPgo8L3N2Zz4K") 9 5, default';
+var CURSOR_POINTER = 'url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8ZGVmcz4KICAgIDxmaWx0ZXIKICAgICAgaWQ9Ind2ay1jdXJzb3Itc2hhZG93IgogICAgICBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiCiAgICAgIHg9Ii00IgogICAgICB5PSItNCIKICAgICAgd2lkdGg9IjQwIgogICAgICBoZWlnaHQ9IjQwIgogICAgICBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiCiAgICA+CiAgICAgIDxmZURyb3BTaGFkb3cgZHg9IjAiIGR5PSIxLjI1IiBzdGREZXZpYXRpb249IjEiIGZsb29kLWNvbG9yPSIjMDAwMDAwIiBmbG9vZC1vcGFjaXR5PSIwLjM4IiAvPgogICAgPC9maWx0ZXI+CiAgPC9kZWZzPgogIDxnIGZpbHRlcj0idXJsKCN3dmstY3Vyc29yLXNoYWRvdykiPgogICAgPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0xOC41IDMwSDEzYy01LjQ0IDAtOS4wODMtNC45NjQtMTEuNDEtMTQuMjcyQy42NTkgMTIuMDAzIDMuOTE3IDguOTEzIDcgOS42NVY2YTUgNSAwIDAgMSAxMCAwdjIuMWE0Ljk5IDQuOTkgMCAwIDEgMi4xMDUuOThBNSA1IDAgMCAxIDI0LjAwMSAxMWE1IDUgMCAwIDEgNSA1djRjMCAuMTktLjAxOS4zOC0uMDU0LjU2NUMyOC40MDkgMjUuODk3IDIzLjkwNyAzMCAxOC41IDMwWiIvPgogICAgPHBhdGggZmlsbD0iIzAwNTVGRiIgZD0iTTI1IDE5LjVWMTZhMSAxIDAgMSAwLTIgMCAxIDEgMCAxIDEtMiAwdi0yYTEgMSAwIDEgMC0yIDAgMSAxIDAgMSAxLTIgMCAzIDMgMCAwIDEgNS44OTUtLjc5QTMgMyAwIDAgMSAyNyAxNnY0YTEgMSAwIDAgMS0uMDMzLjI1NkE4LjUgOC41IDAgMCAxIDE4LjUgMjhIMTNjLTQuMjg0IDAtNy4zNy00LjM1Ny05LjQ3LTEyLjc1OC0uNjk4LTIuNzkyIDIuMzIxLTQuODA1IDQuMTc3LTIuOTVMOSAxMy41ODdWNmEzIDMgMCAxIDEgNiAwdjdhMSAxIDAgMSAxLTIgMFY2YTEgMSAwIDEgMC0yIDB2MTBhMSAxIDAgMCAxLTEuNzA3LjcwN2wtMy0zYy0uMzQ0LS4zNDQtMS4wNTMuMTI5LS44MjMgMS4wNUM3LjM3IDIyLjM1OCA5Ljk1IDI2IDEzIDI2aDUuNWE2LjUgNi41IDAgMCAwIDYuNS02LjVaTTE2IDEwYTMgMyAwIDAgMSAzIDN2MWExIDEgMCAxIDEtMiAwdi0xYTEgMSAwIDEgMC0yIDAgMSAxIDAgMSAxLTIgMCAzIDMgMCAwIDEgMy0zWm0tMSA3YTEgMSAwIDAgMSAxIDF2M2ExIDEgMCAxIDEtMiAwdi0zYTEgMSAwIDAgMSAxLTFabTQgMGExIDEgMCAwIDEgMSAxdjNhMSAxIDAgMSAxLTIgMHYtM2ExIDEgMCAwIDEgMS0xWiIvPgogIDwvZz4KPC9zdmc+Cg==") 12 8, pointer';
+var CURSOR_MOVE = 'url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8ZGVmcz4KICAgIDxmaWx0ZXIKICAgICAgaWQ9Ind2ay1jdXJzb3Itc2hhZG93IgogICAgICBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiCiAgICAgIHg9Ii00IgogICAgICB5PSItNCIKICAgICAgd2lkdGg9IjQwIgogICAgICBoZWlnaHQ9IjQwIgogICAgICBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiCiAgICA+CiAgICAgIDxmZURyb3BTaGFkb3cgZHg9IjAiIGR5PSIxLjI1IiBzdGREZXZpYXRpb249IjEiIGZsb29kLWNvbG9yPSIjMDAwMDAwIiBmbG9vZC1vcGFjaXR5PSIwLjM4IiAvPgogICAgPC9maWx0ZXI+CiAgPC9kZWZzPgogIDxnIGZpbHRlcj0idXJsKCN3dmstY3Vyc29yLXNoYWRvdykiPgogICAgPHBhdGggZmlsbD0id2hpdGUiIGQ9Im0xNiAyLjAzIDE0LjE0MiAxNC4xNEwxNiAzMC4zMTQgMS44NTggMTYuMTcgMTYgMi4wM1oiLz4KICAgIDxwYXRoIGZpbGw9IiMwMDU1RkYiIGQ9Ik0xMCAxOC45NmEuNS41IDAgMCAxLS44MTMuMzlsLTMuNy0yLjk2YS41LjUgMCAwIDEgMC0uNzhsMy43LTIuOTZhLjUuNSAwIDAgMSAuODEzLjM5VjE1bDQuOTk5LS4wMDF2LTVoLTEuOTZhLjUuNSAwIDAgMS0uMzktLjgxMmwyLjk2LTMuN2EuNS41IDAgMCAxIC43ODEgMGwyLjk2IDMuN2EuNS41IDAgMCAxLS4zOS44MTJIMTdsLS4wMDEgNWg1di0xLjk2YS41LjUgMCAwIDEgLjgxMy0uMzlsMy43IDIuOTZhLjUuNSAwIDAgMSAwIC43OGwtMy43IDIuOTZhLjUuNSAwIDAgMS0uODEyLS4zOVYxN2gtNS4wMDF2NWgxLjk2YS41LjUgMCAwIDEgLjM5LjgxM2wtMi45NTkgMy43YS41LjUgMCAwIDEtLjc4IDBsLTIuOTYtMy43YS41LjUgMCAwIDEgLjM5LS44MTNIMTVsLS4wMDEtNWgtNXYxLjk2WiIvPgogIDwvZz4KPC9zdmc+Cg==") 16 16, move';
+var CURSOR_DEFAULT_ARROW = 'url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMyIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDMyIDMzIj4KICA8ZyBmaWx0ZXI9InVybCgjYSkiPgogICAgPHBhdGggZmlsbD0iIzAwNTVGRiIgZD0iTTEwIDI0VjcuMjE2YzAtLjg2MSAxLjAxNi0xLjMyIDEuNjYyLS43NWwxMy4wNDYgMTEuNTExYy43MjUuNjQuMjEgMS44MzQtLjc1MiAxLjc0NmwtNy40LS42NzJhMSAxIDAgMCAwLS44OS4zOTVMMTEuOCAyNC42Yy0uNTc3Ljc2OS0xLjguMzYxLTEuOC0uNloiLz4KICAgIDxwYXRoIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTkgNy4yMTZjMC0xLjcyMiAyLjAzMi0yLjY0IDMuMzIzLTEuNUwyNS4zNyAxNy4yMjdjMS40NSAxLjI4LjQyMiAzLjY2Ny0xLjUwNCAzLjQ5MmwtNy40LS42NzJMMTIuNiAyNS4yQzExLjQ0NiAyNi43MzcgOSAyNS45MjIgOSAyNFY3LjIxNloiLz4KICA8L2c+CiAgPGRlZnM+CiAgICA8ZmlsdGVyIGlkPSJhIiB3aWR0aD0iMjcuMDU1IiBoZWlnaHQ9IjMwLjc5NiIgeD0iNCIgeT0iMi4yMSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgogICAgICA8ZmVDb2xvck1hdHJpeCBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0iaGFyZEFscGhhIiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDEyNyAwIi8+CiAgICAgIDxmZU9mZnNldCBkeT0iMiIvPgogICAgICA8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIyIi8+CiAgICAgIDxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMC4xNiAwIi8+CiAgICAgIDxmZUJsZW5kIGluMj0iQmFja2dyb3VuZEltYWdlRml4IiByZXN1bHQ9ImVmZmVjdDFfZHJvcFNoYWRvd180ODA5XzY2OSIvPgogICAgICA8ZmVCbGVuZCBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJlZmZlY3QxX2Ryb3BTaGFkb3dfNDgwOV82NjkiIHJlc3VsdD0ic2hhcGUiLz4KICAgIDwvZmlsdGVyPgogIDwvZGVmcz4KPC9zdmc+Cg==") 10 7, default';
+var CURSOR_GRABBING = 'url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNSIgaGVpZ2h0PSIzNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDM1IDM2Ij4KICA8ZyBmaWx0ZXI9InVybCgjYSkiPgogICAgPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0zMC4xNzYgMTguNjY3QzMwLjE3NiAyNC45MjYgMjUuMTAyIDMwIDE4Ljg0MyAzMGgtMy4xODhhMTAgMTAgMCAwIDEtOS4wOC01LjgxTDQuNjUgMjAuMDE4Yy0xLjY4NS0zLjY1LjA1Ni03LjgyNCAzLjU0LTkuMzQ1YTUgNSAwIDAgMSA4LjA5LTMuNTkxIDQuOTc3IDQuOTc3IDAgMCAxIDQgMSA0Ljk3NyA0Ljk3NyAwIDAgMSAzLjk3Ny45ODFBNC45IDQuOSAwIDAgMSAyNS4wNDQgOWE1LjEzNCA1LjEzNCAwIDAgMSA1LjEzMyA1LjEzNHY0LjUzM1oiLz4KICA8L2c+CiAgPHBhdGggZmlsbD0iIzAwNTVGRiIgZD0iTTEzLjE3NyA4YzEuMDYyIDAgMS45OTQuNTU0IDIuNTI3IDEuMzg4YTIuOTk2IDIuOTk2IDAgMCAxIDQgMSAyLjk5NyAyLjk5NyAwIDAgMSAzLjk3NC45NTdBMi44NSAyLjg1IDAgMCAxIDI1LjA0MyAxMWEzLjEzNCAzLjEzNCAwIDAgMSAzLjEzNCAzLjEzNHY0LjUzM0E5LjMzNCA5LjMzNCAwIDAgMSAxOC44NDQgMjhoLTMuMTg5YTggOCAwIDAgMS03LjI2NC00LjY0OEw2LjQ2NiAxOS4xOGMtMS4zODItMi45OTMuNDYtNi40OCAzLjcxLTcuMDI3VjExYTMgMyAwIDAgMSAzLTNabTAgMmExIDEgMCAwIDAtMSAxdjVhMSAxIDAgMCAxLTIgMHYtMS44YTMgMyAwIDAgMC0xLjg5NiA0LjE0bDEuOTI3IDQuMTc1QTYgNiAwIDAgMCAxNS42NTUgMjZoMy4xODlhNy4zMzQgNy4zMzQgMCAwIDAgNy4zMzMtNy4zMzN2LTQuNTMzYzAtLjYyNi0uNTA4LTEuMTM0LTEuMTM0LTEuMTM0YS44NjcuODY3IDAgMCAwLS44NjYuODY2VjE0YTEgMSAwIDAgMS0yIDB2LTFhMSAxIDAgMCAwLTEuOTk1LS4xMDJsLS4wMS4yMDRBMSAxIDAgMCAxIDE4LjE3NyAxM3YtMWExIDEgMCAwIDAtMS45OTUtLjEwMmwtLjAxLjIwNEExIDEgMCAwIDEgMTQuMTc3IDEydi0xYTEgMSAwIDAgMC0xLTFabTMgN2ExIDEgMCAwIDEgMSAxdjNhMSAxIDAgMCAxLTIgMHYtM2ExIDEgMCAwIDEgMS0xWm00IDBhMSAxIDAgMCAxIDEgMXYzYTEgMSAwIDAgMS0yIDB2LTNhMSAxIDAgMCAxIDEtMVoiLz4KICA8ZGVmcz4KICAgIDxmaWx0ZXIgaWQ9ImEiIHdpZHRoPSIzNC4xNzYiIGhlaWdodD0iMzIiIHg9IjAiIHk9IjQiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KICAgICAgPGZlQ29sb3JNYXRyaXggaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9ImhhcmRBbHBoYSIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAxMjcgMCIvPgogICAgICA8ZmVPZmZzZXQgZHk9IjIiLz4KICAgICAgPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIvPgogICAgICA8ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMTYgMCIvPgogICAgICA8ZmVCbGVuZCBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJlZmZlY3QxX2Ryb3BTaGFkb3dfNDgxMF83MzAiLz4KICAgICAgPGZlQmxlbmQgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iZWZmZWN0MV9kcm9wU2hhZG93XzQ4MTBfNzMwIiByZXN1bHQ9InNoYXBlIi8+CiAgICA8L2ZpbHRlcj4KICA8L2RlZnM+Cjwvc3ZnPgo=") 17 18, grabbing';
+var CURSOR_TEXT = 'url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzNCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDMyIDM0Ij4KICA8ZyBmaWx0ZXI9InVybCgjYSkiPgogICAgPHBhdGggZmlsbD0id2hpdGUiIGZpbGwtb3BhY2l0eT0iLjgiIGQ9Ik0xNC41ODYgNGMuNDg4IDAgLjk2Ni4wOSAxLjQxNC4yNi40NDgtLjE3LjkyNi0uMjYgMS40MTQtLjI2SDIwYTMgMyAwIDEgMSAwIDZoLTF2MTJoMWEzIDMgMCAxIDEgMCA2aC0yLjU4NmMtLjQ4OCAwLS45NjYtLjA5LTEuNDE0LS4yNi0uNDQ4LjE3LS45MjYuMjYtMS40MTQuMjZIMTJhMyAzIDAgMSAxIDAtNmgxVjEwaC0xYTMgMyAwIDEgMSAwLTZoMi41ODZaIi8+CiAgPC9nPgogIDxwYXRoIHN0cm9rZT0iIzAwNTVGRiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIGQ9Ik0xMiA3aDIuMTcyYTIgMiAwIDAgMSAxLjQxNC41ODZMMTYgOG0wIDB2MTZtMC0xNiAuNDE0LS40MTRBMiAyIDAgMCAxIDE3LjgyOCA3SDIwbS00IDE3IC40MTQuNDE0YTIgMiAwIDAgMCAxLjQxNC41ODZIMjBtLTQtMS0uNDE0LjQxNGEyIDIgMCAwIDEtMS40MTQuNTg2SDEyIi8+CiAgPGRlZnM+CiAgICA8ZmlsdGVyIGlkPSJhIiB3aWR0aD0iMjIiIGhlaWdodD0iMzIiIHg9IjUiIHk9IjIiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KICAgICAgPGZlQ29sb3JNYXRyaXggaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9ImhhcmRBbHBoYSIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAxMjcgMCIvPgogICAgICA8ZmVPZmZzZXQgZHk9IjIiLz4KICAgICAgPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIvPgogICAgICA8ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMTYgMCIvPgogICAgICA8ZmVCbGVuZCBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJlZmZlY3QxX2Ryb3BTaGFkb3dfNDgxMF82ODUiLz4KICAgICAgPGZlQmxlbmQgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iZWZmZWN0MV9kcm9wU2hhZG93XzQ4MTBfNjg1IiByZXN1bHQ9InNoYXBlIi8+CiAgICA8L2ZpbHRlcj4KICA8L2RlZnM+Cjwvc3ZnPgo=") 16 17, text';
+var CURSOR_FALLBACK_CSS = `
+:root {
+  --wvk-cursor-default: ${CURSOR_DEFAULT};
+  --wvk-cursor-default-arrow: ${CURSOR_DEFAULT_ARROW};
+  --wvk-cursor-pointer: ${CURSOR_POINTER};
+  --wvk-cursor-move: ${CURSOR_MOVE};
+  --wvk-cursor-grabbing: ${CURSOR_GRABBING};
+  --wvk-cursor-text: ${CURSOR_TEXT};
+}
+
+html.${CURSOR_STYLE_CLASS_ARROW} {
+  --wvk-cursor-default: var(--wvk-cursor-default-arrow);
+}
+
+html {
+  cursor: var(--wvk-cursor-default);
+}
+
+input:not([type]),
+input[type="text"],
+input[type="search"],
+input[type="email"],
+input[type="tel"],
+input[type="url"],
+input[type="password"],
+input[type="number"],
+textarea,
+[contenteditable="true"],
+[data-wvk-input="shell"] {
+  cursor: var(--wvk-cursor-text);
+}
+
+[data-wvk-input="shell"]:has(:disabled) {
+  cursor: not-allowed;
+}
+
+a[href],
+button:not(:disabled),
+[role="button"]:not([aria-disabled="true"]),
+[role="link"],
+[role="tab"],
+[role="menuitem"],
+label[for],
+summary,
+input[type="checkbox"]:not(:disabled),
+input[type="radio"]:not(:disabled),
+select:not(:disabled),
+.cursor-pointer {
+  cursor: var(--wvk-cursor-pointer);
+}
+
+.cursor-default {
+  cursor: var(--wvk-cursor-default);
+}
+
+.cursor-text {
+  cursor: var(--wvk-cursor-text);
+}
+
+.cursor-grabbing {
+  cursor: var(--wvk-cursor-grabbing);
+}
+
+.cursor-move,
+.cursor-grab {
+  cursor: var(--wvk-cursor-move);
+}
+`;
+var ThemeContext = React27.createContext(null);
 function applyThemeClass(theme) {
   document.documentElement.classList.toggle("dark", theme === "dark");
 }
-function ThemeProvider({ children }) {
-  const [theme, setThemeState] = React25.useState("light");
-  React25.useEffect(() => {
+function applyCursorStyleClass(style) {
+  document.documentElement.classList.toggle(
+    CURSOR_STYLE_CLASS_ARROW,
+    style === "arrow"
+  );
+}
+function ensureCursorStyleFallback() {
+  const root = document.documentElement;
+  const hasPackageCursorCss = getComputedStyle(root).getPropertyValue("--wvk-cursor-default").trim();
+  if (hasPackageCursorCss || document.getElementById(CURSOR_STYLE_ID)) {
+    return;
+  }
+  const style = document.createElement("style");
+  style.id = CURSOR_STYLE_ID;
+  style.textContent = CURSOR_FALLBACK_CSS;
+  document.head.appendChild(style);
+}
+function ThemeProvider({
+  children,
+  cursorStyle: cursorStyleProp = "default",
+  whimsyCursor = true
+}) {
+  const [theme, setThemeState] = React27.useState("light");
+  const [cursorStyle, setCursorStyleState] = React27.useState(cursorStyleProp);
+  React27.useInsertionEffect(() => {
+    ensureCursorStyleFallback();
+  }, []);
+  React27.useEffect(() => {
     const stored = localStorage.getItem(STORAGE_KEY);
     if (stored === "dark" || stored === "light") {
       setThemeState(stored);
@@ -7188,37 +7731,63 @@ function ThemeProvider({ children }) {
       setThemeState("dark");
     }
   }, []);
-  React25.useEffect(() => {
+  React27.useEffect(() => {
+    const stored = localStorage.getItem(CURSOR_STYLE_STORAGE_KEY);
+    if (stored === "default" || stored === "arrow") {
+      setCursorStyleState(stored);
+    } else if (document.documentElement.classList.contains(CURSOR_STYLE_CLASS_ARROW)) {
+      setCursorStyleState("arrow");
+    }
+  }, []);
+  React27.useEffect(() => {
     applyThemeClass(theme);
   }, [theme]);
-  const setTheme = React25.useCallback((t) => {
+  React27.useEffect(() => {
+    applyCursorStyleClass(cursorStyle);
+  }, [cursorStyle]);
+  const setTheme = React27.useCallback((t) => {
     setThemeState(t);
     localStorage.setItem(STORAGE_KEY, t);
   }, []);
-  const value = React25.useMemo(
-    () => ({ theme, setTheme }),
-    [theme, setTheme]
+  const setCursorStyle = React27.useCallback((c) => {
+    setCursorStyleState(c);
+    localStorage.setItem(CURSOR_STYLE_STORAGE_KEY, c);
+  }, []);
+  const value = React27.useMemo(
+    () => ({ theme, setTheme, cursorStyle, setCursorStyle }),
+    [theme, setTheme, cursorStyle, setCursorStyle]
   );
-  return /* @__PURE__ */ jsx209(ThemeContext.Provider, { value, children });
+  const cursorProps = cursorStyle === "arrow" || whimsyCursor === false ? null : whimsyCursor === true ? {} : whimsyCursor;
+  return /* @__PURE__ */ jsxs37(ThemeContext.Provider, { value, children: [
+    cursorProps ? /* @__PURE__ */ jsx211(WhimsyCursor, { ...cursorProps }) : null,
+    children
+  ] });
 }
 function useTheme() {
-  const ctx = React25.useContext(ThemeContext);
+  const ctx = React27.useContext(ThemeContext);
   if (!ctx) {
     throw new Error("useTheme must be used inside <ThemeProvider>");
   }
   return ctx;
 }
+function useCursorStyle() {
+  const ctx = React27.useContext(ThemeContext);
+  if (!ctx) {
+    throw new Error("useCursorStyle must be used inside <ThemeProvider>");
+  }
+  return { cursorStyle: ctx.cursorStyle, setCursorStyle: ctx.setCursorStyle };
+}
 
 // src/components/theme-switcher.tsx
-import * as React26 from "react";
-import { jsx as jsx210, jsxs as jsxs35 } from "react/jsx-runtime";
+import * as React28 from "react";
+import { jsx as jsx212, jsxs as jsxs38 } from "react/jsx-runtime";
 function ThemeSwitcher() {
-  const ctx = React26.useContext(ThemeContext);
+  const ctx = React28.useContext(ThemeContext);
   if (!ctx) {
     return null;
   }
   const { theme, setTheme } = ctx;
-  return /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsxs38(
     SegmentedControl,
     {
       size: "sm",
@@ -7227,19 +7796,19 @@ function ThemeSwitcher() {
       onValueChange: (v) => setTheme(v),
       "aria-label": "Color theme",
       children: [
-        /* @__PURE__ */ jsx210(
+        /* @__PURE__ */ jsx212(
           SegmentedControlItem,
           {
             value: "light",
-            icon: /* @__PURE__ */ jsx210(Sun_default, { "aria-hidden": true, className: "size-full" }),
+            icon: /* @__PURE__ */ jsx212(Sun_default, { "aria-hidden": true, className: "size-full" }),
             "aria-label": "Light theme"
           }
         ),
-        /* @__PURE__ */ jsx210(
+        /* @__PURE__ */ jsx212(
           SegmentedControlItem,
           {
             value: "dark",
-            icon: /* @__PURE__ */ jsx210(Moon_default, { "aria-hidden": true, className: "size-full" }),
+            icon: /* @__PURE__ */ jsx212(Moon_default, { "aria-hidden": true, className: "size-full" }),
             "aria-label": "Dark theme"
           }
         )
@@ -7248,48 +7817,29 @@ function ThemeSwitcher() {
   );
 }
 
-// src/lib/button-decorative-icons.tsx
-import { jsx as jsx211 } from "react/jsx-runtime";
-var BUTTON_DECORATIVE_ICON_NAMES = [
-  "none",
-  "plus",
-  "chevronRight",
-  "home",
-  "search",
-  "user",
-  "settings"
-];
-var iconClass = (size) => cn(size === "lg" ? wvkIconLgClass : wvkIconMdClass, "shrink-0");
-function ButtonDecorativeIconGlyph({
-  name,
-  size,
-  className
-}) {
-  const c = cn(iconClass(size), className);
-  switch (name) {
-    case "plus":
-      return /* @__PURE__ */ jsx211(Plus_default, { className: c, "aria-hidden": true });
-    case "chevronRight":
-      return /* @__PURE__ */ jsx211(ChevronRight_default, { className: c, "aria-hidden": true });
-    case "home":
-      return /* @__PURE__ */ jsx211(Home_default, { className: c, "aria-hidden": true });
-    case "search":
-      return /* @__PURE__ */ jsx211(MagnifyingGlass_default, { className: c, "aria-hidden": true });
-    case "user":
-      return /* @__PURE__ */ jsx211(User_default, { className: c, "aria-hidden": true });
-    case "settings":
-      return /* @__PURE__ */ jsx211(Settings_default, { className: c, "aria-hidden": true });
-    default:
-      return null;
+// src/lib/motion-presets.ts
+import { AnimatePresence, motion as motion7 } from "framer-motion";
+var staggerContainer = {
+  hidden: { opacity: 0 },
+  show: {
+    opacity: 1,
+    transition: { staggerChildren: 0.05 }
   }
-}
+};
+var fadeInUp = {
+  hidden: { opacity: 0, y: 8 },
+  show: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.2, ease: "easeOut" }
+  }
+};
 export {
   Alert,
-  BUTTON_DECORATIVE_ICON_NAMES,
+  AnimatePresence,
   BottomTabBar,
   BottomTabBarItem,
   Button,
-  ButtonDecorativeIconGlyph,
   Checkbox,
   FieldGroup,
   FieldLabel,
@@ -7298,20 +7848,37 @@ export {
   Link2 as Link,
   ListItem,
   LoadingSpinner,
+  Menu2 as Menu,
+  MenuGroup,
+  MenuGroupLabel,
+  MenuItem,
+  MenuPopup,
+  MenuSeparator,
+  MenuTrigger,
+  Meter,
   Pagination,
   ProgressBar,
   Radio,
+  RadioGroup,
+  RadioGroupItem,
   SegmentedControl,
   SegmentedControlItem,
   SegmentedControlTrigger,
   Select,
+  SelectGroup,
+  SelectGroupLabel,
+  SelectItem,
+  SelectSeparator,
   Slider,
   SplitButton,
   StarRating,
   TAG_LEADING_ICON_NAMES,
   Tab,
+  TabIndicator,
   TabList,
+  TabPanel,
   Tabs,
+  TabsContent,
   TabsList,
   TabsTrigger,
   Tag2 as Tag,
@@ -7326,20 +7893,25 @@ export {
   ThemeSwitcher,
   ToggleSwitch,
   Tooltip,
+  TooltipPopup,
+  TooltipProvider,
   VideoControls,
   VideoPlaceholder,
+  WhimsyCursor,
   buttonVariants,
   checkboxFrameVariants,
   cn,
+  fadeInUp,
   hasRenderableFieldLabelText,
   linkVariants,
   listItemVariants,
+  motion7 as motion,
   placeholderVariants,
   radioFrameVariants,
-  selectFieldVariants,
   selectShellVariants,
   selectShellVariants as selectVariants,
   splitButtonVariants,
+  staggerContainer,
   tabListVariants,
   tagVariants,
   textAreaFieldVariants,
@@ -7347,6 +7919,7 @@ export {
   textInputShellVariants,
   toggleSwitchVariants,
   toggleThumbVariants,
+  useCursorStyle,
   useTheme,
   wvkIconBoxLgClass,
   wvkIconLgClass,