@nextlyhq/ui 0.0.2-alpha.56 → 0.0.2-alpha.58

package/dist/index.mjs

@@ -33,8 +33,9 @@ var buttonVariants = cva(
         destructive: "bg-destructive-solid text-destructive-foreground border border-transparent hover:bg-destructive-600",
         // border-border is the decorative separator token, and it is the right
         // one here: a button is identified by its label and fill, so its edge
-        // carries no meaning on its own and is not held to the 3:1 minimum that
-        // border-input meets for controls identified by their boundary. It is
+        // carries no meaning on its own, unlike border-input, which is the
+        // token for controls identified by their boundary (that token is now
+        // below 1.4.11's 3:1 in light mode; see contrast/accepted.ts). It is
         // still used in preference to a faint primary alpha, which reads as a
         // tint of the brand colour rather than as an edge.
         outline: "border border-border text-foreground hover-unified bg-background",
@@ -91,11 +92,22 @@ import { cva as cva2 } from "class-variance-authority";
 import { forwardRef as forwardRef2 } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var inputVariants = cva2(
-  "file:text-foreground placeholder:text-muted-foreground placeholder:opacity-50 selection:bg-primary selection:text-primary-foreground w-full min-w-0 rounded-md border border-input bg-background text-sm transition-all duration-150 outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus:ring-0 focus:ring-offset-0 focus:outline-none focus:border-primary! focus-visible:border-primary! aria-invalid:border-destructive aria-invalid:focus:border-destructive! data-[invalid=true]:border-destructive data-[invalid=true]:focus:border-destructive!",
+  // `text-foreground` is explicit rather than inherited. Tailwind's preflight
+  // sets `color: inherit` on form controls, so without it the typed value takes
+  // whatever colour an ancestor happens to carry -- muted inside a
+  // `text-muted-foreground` block, red inside a `text-destructive` one. Select
+  // and Textarea have always pinned it; Input was the one control that did not,
+  // and callers were compensating by putting the token on a wrapper.
+  "file:text-foreground text-foreground placeholder:text-muted-foreground placeholder:opacity-50 selection:bg-primary selection:text-primary-foreground w-full min-w-0 rounded-md border border-input bg-background text-sm transition-all duration-150 outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus:ring-0 focus:ring-offset-0 focus:outline-none focus:border-primary! focus-visible:border-primary! aria-invalid:border-destructive aria-invalid:focus:border-destructive! data-[invalid=true]:border-destructive data-[invalid=true]:focus:border-destructive!",
   {
     variants: {
       size: {
-        sm: "h-[var(--nx-control-height-sm)] px-2.5 py-2 text-sm",
+        // `-md` rather than `-sm`, so that a small input is the same height as
+        // a small button standing beside it in a toolbar or a filter row.
+        // Button's `sm` has always used this step; an input reading `-sm` made
+        // `size="sm"` mean 36px on one control and 32px on another, and a form
+        // row mixing them sat 4px out of line.
+        sm: "h-[var(--nx-control-height-md)] px-2.5 py-2 text-sm",
         default: "h-[var(--nx-control-height)] px-3 py-2.5 text-sm",
         lg: "h-[var(--nx-control-height-lg)] px-4 py-3 text-base"
       }
@@ -677,9 +689,12 @@ var Checkbox = forwardRef11(({ className, indeterminate, ...props }, ref) => /*
     ref,
     "data-slot": "checkbox",
     className: cn(
-      // Resting border uses border-input (a visible 3:1 boundary); the checked
-      // state switches to border-primary below, keeping the two states distinct.
-      "peer relative h-4 w-4 shrink-0 rounded-sm border border-input ring-offset-background before:absolute before:left-1/2 before:top-1/2 before:h-6 before:w-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-[''] focus:border-primary! focus-visible:border-primary! focus:outline-none focus-visible:outline-none aria-invalid:border-destructive aria-invalid:focus:border-destructive! aria-invalid:focus-visible:border-destructive! disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:border-primary transition-all duration-200",
+      // Resting border uses border-control-border, NOT border-input. An
+      // unchecked box has no label, value or focus ring to identify it -- the
+      // border is the whole control -- so it is held to 1.4.11's 3:1, which
+      // border-input deliberately no longer meets. The checked state switches
+      // to border-primary below, keeping the two states distinct.
+      "peer relative h-4 w-4 shrink-0 rounded-sm border border-control-border ring-offset-background before:absolute before:left-1/2 before:top-1/2 before:h-6 before:w-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-[''] focus:border-primary! focus-visible:border-primary! focus:outline-none focus-visible:outline-none aria-invalid:border-destructive aria-invalid:focus:border-destructive! aria-invalid:focus-visible:border-destructive! disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:border-primary transition-all duration-200",
       className
     ),
     ...props,
@@ -719,13 +734,15 @@ var RadioGroupItem = forwardRef12(({ className, ...props }, ref) => {
       className: cn(
         // Unchecked outline uses primary/40 (clearly visible) instead of primary/5
         // (~5% opacity, effectively invisible); hover strengthens above the resting state.
-        // Resting border uses border-input (a visible 3:1 boundary); the checked
-        // state switches to border-primary below, keeping the two states distinct.
+        // Resting border uses border-control-border, NOT border-input. An
+        // unchecked radio is only its ring, with nothing else to identify it,
+        // so it is held to 1.4.11's 3:1 -- which border-input deliberately no
+        // longer meets. The checked state switches to border-primary below.
         // rounded-full is fixed rather than derived from --radius: the circle is
         // what tells the user only one option can be chosen. The thick checked
         // border leaves a background-coloured core, and because the border's
         // inner edge is curved too that core reads as a round dot.
-        "peer h-4 w-4 shrink-0 rounded-full border border-input bg-background cursor-pointer transition-all duration-150 focus:border-primary! focus-visible:border-primary! focus:outline-none focus-visible:outline-none aria-invalid:border-destructive aria-invalid:focus:border-destructive! aria-invalid:focus-visible:border-destructive! disabled:cursor-not-allowed disabled:opacity-50 hover:border-primary/70 data-[state=checked]:border-primary data-[state=checked]:border-[5px]",
+        "peer h-4 w-4 shrink-0 rounded-full border border-control-border bg-background cursor-pointer transition-all duration-150 focus:border-primary! focus-visible:border-primary! focus:outline-none focus-visible:outline-none aria-invalid:border-destructive aria-invalid:focus:border-destructive! aria-invalid:focus-visible:border-destructive! disabled:cursor-not-allowed disabled:opacity-50 hover:border-primary/70 data-[state=checked]:border-primary data-[state=checked]:border-[5px]",
         className
       ),
       ...props,
@@ -749,7 +766,21 @@ function Switch({ className, ...props }) {
       className: cn(
         "peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full  border border-border transition-all outline-none focus-visible:border-primary aria-invalid:border-destructive aria-invalid:focus-visible:border-destructive! disabled:cursor-not-allowed disabled:opacity-50",
         "data-[state=checked]:bg-primary data-[state=checked]:border-primary!",
-        "data-[state=unchecked]:bg-input data-[state=unchecked]:border-border dark:data-[state=unchecked]:bg-input/80",
+        // An unchecked switch is a track and a thumb and nothing else -- no
+        // label inside it, no value, no glyph -- so 1.4.11 applies to both the
+        // track against the page and the thumb against the track. `bg-input`
+        // cannot serve here: it is the FIELD border weight, deliberately below
+        // the minimum, and at that value the pill and its thumb both vanish
+        // into a light page. The control token is the same answer used for the
+        // checkbox and radio boundary, for the same reason.
+        // At full strength in both modes. A `/80` here read as a softening of
+        // the dark track and was in fact a removal of the guarantee the token
+        // carries: composited over the surfaces the switch renders on it
+        // measures 3.02 on the page, 2.94 on a card, 2.85 on a popover or the
+        // sidebar and 2.65 on muted, so three of the four fall under the 3:1
+        // this token exists to hold. Opaque, the same four are 4.23, 4.01,
+        // 3.79 and 3.40.
+        "data-[state=unchecked]:bg-control-border data-[state=unchecked]:border-control-border",
         className
       ),
       ...props,
@@ -914,41 +945,57 @@ AvatarFallback.displayName = "AvatarFallback";
 
 // src/components/tabs.tsx
 import { Root as Root7, List, Trigger as Trigger3, Content as Content3 } from "@radix-ui/react-tabs";
+import { cva as cva8 } from "class-variance-authority";
 import { forwardRef as forwardRef15 } from "react";
 import { jsx as jsx20 } from "react/jsx-runtime";
 var Tabs = Root7;
-var TabsList = forwardRef15(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx20(
-    List,
-    {
-      ref,
-      "data-slot": "tabs-list",
-      className: cn(
-        // Square corners: underline tabs, so the list never draws a rounded surface.
-        "inline-flex h-10 items-center justify-center gap-1 rounded-none p-0 text-muted-foreground",
-        className
-      ),
-      ...props
-    }
-  )
+var TABS_LIST_VARIANTS = {
+  default: "h-10",
+  ghost: "h-8 bg-transparent"
+};
+var tabsListVariants = cva8(
+  // Square corners: underline tabs, so the list never draws a rounded surface.
+  // `gap-1` and `p-0` are invariant across the variants, so they belong here —
+  // repeating them in each arm gives any future adjustment two sites to change
+  // and one to forget.
+  "inline-flex items-center justify-center gap-1 rounded-none p-0 text-muted-foreground",
+  {
+    variants: { variant: TABS_LIST_VARIANTS },
+    defaultVariants: { variant: "default" }
+  }
 );
+var TabsList = forwardRef15(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx20(
+  List,
+  {
+    ref,
+    "data-slot": "tabs-list",
+    className: cn(tabsListVariants({ variant }), className),
+    ...props
+  }
+));
 TabsList.displayName = List.displayName;
-var TabsTrigger = forwardRef15(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx20(
-    Trigger3,
-    {
-      ref,
-      "data-slot": "tabs-trigger",
-      className: cn(
-        // Square corners: the active state is a 2px bottom border that has to
-        // run the full width of the trigger.
-        "inline-flex items-center justify-center whitespace-nowrap rounded-none bg-transparent px-4 py-2 text-sm font-medium cursor-pointer transition-all duration-200 border-b-2 relative -mb-0.5 data-[state=active]:border-b-primary! data-[state=active]:text-primary data-[state=inactive]:border-transparent data-[state=inactive]:text-muted-foreground hover:text-primary hover:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed",
-        className
-      ),
-      ...props
-    }
-  )
+var TABS_TRIGGER_SIZES = {
+  default: "text-sm",
+  sm: "text-xs"
+};
+var tabsTriggerVariants = cva8(
+  // Square corners: the active state is a 2px bottom border that has to run the
+  // full width of the trigger.
+  "inline-flex items-center justify-center whitespace-nowrap rounded-none bg-transparent px-4 py-2 font-medium cursor-pointer transition-all duration-200 border-b-2 relative -mb-0.5 data-[state=active]:border-b-primary! data-[state=active]:text-primary data-[state=inactive]:border-transparent data-[state=inactive]:text-muted-foreground hover:text-primary hover:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed",
+  {
+    variants: { size: TABS_TRIGGER_SIZES },
+    defaultVariants: { size: "default" }
+  }
 );
+var TabsTrigger = forwardRef15(({ className, size, ...props }, ref) => /* @__PURE__ */ jsx20(
+  Trigger3,
+  {
+    ref,
+    "data-slot": "tabs-trigger",
+    className: cn(tabsTriggerVariants({ size }), className),
+    ...props
+  }
+));
 TabsTrigger.displayName = Trigger3.displayName;
 var TabsContent = forwardRef15(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx20(
@@ -994,7 +1041,7 @@ PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 // src/components/dialog.tsx
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { cva as cva8 } from "class-variance-authority";
+import { cva as cva9 } from "class-variance-authority";
 import { X } from "lucide-react";
 import { forwardRef as forwardRef17 } from "react";
 import { jsx as jsx22, jsxs as jsxs4 } from "react/jsx-runtime";
@@ -1020,7 +1067,7 @@ var DialogOverlay = forwardRef17(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var dialogContentVariants = cva8("", {
+var dialogContentVariants = cva9("", {
   variants: {
     size: {
       sm: "max-w-sm",
@@ -1379,7 +1426,7 @@ DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 // src/components/select.tsx
 import * as SelectPrimitive from "@radix-ui/react-select";
-import { cva as cva9 } from "class-variance-authority";
+import { cva as cva10 } from "class-variance-authority";
 import { Check as Check3, ChevronDown as ChevronDown2, ChevronUp } from "lucide-react";
 import { forwardRef as forwardRef20 } from "react";
 import { jsx as jsx25, jsxs as jsxs7 } from "react/jsx-runtime";
@@ -1396,14 +1443,17 @@ function SelectValue({
 }) {
   return /* @__PURE__ */ jsx25(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
 }
-var selectTriggerVariants = cva9(
+var selectTriggerVariants = cva10(
   // hover:border-primary (full strength) keeps the hover boundary more visible
   // than the resting border-input, not a fainter alpha of it.
   "flex w-full items-center justify-between gap-2 rounded-md border border-input bg-background px-3 text-sm text-foreground cursor-pointer transition-all duration-150 focus:border-primary! focus-visible:border-primary! focus:outline-none hover:border-primary disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-primary/5 data-[placeholder]:text-muted-foreground aria-[invalid=true]:border-destructive aria-[invalid=true]:focus:border-destructive! [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4",
   {
     variants: {
       size: {
-        sm: "h-[var(--nx-control-height-sm)] text-sm",
+        // `-md`, matching Button and Input: one height for one size name. A
+        // select sitting beside a small button in a filter row is the case that
+        // makes a 4px difference visible.
+        sm: "h-[var(--nx-control-height-md)] text-sm",
         default: "h-[var(--nx-control-height)] text-sm",
         lg: "h-[var(--nx-control-height-lg)] text-base"
       }
@@ -1548,7 +1598,7 @@ function SelectScrollDownButton({
 
 // src/components/sheet.tsx
 import * as DialogPrimitive2 from "@radix-ui/react-dialog";
-import { cva as cva10 } from "class-variance-authority";
+import { cva as cva11 } from "class-variance-authority";
 import * as React7 from "react";
 import { jsx as jsx26, jsxs as jsxs8 } from "react/jsx-runtime";
 var Sheet = DialogPrimitive2.Root;
@@ -1574,7 +1624,7 @@ var SheetOverlay = React7.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SheetOverlay.displayName = DialogPrimitive2.Overlay.displayName;
-var sheetVariants = cva10(
+var sheetVariants = cva11(
   "fixed z-50 gap-4 bg-background p-6 shadow-lg will-change-transform transition ease-in-out data-[state=closed]:duration-150 data-[state=open]:duration-150 data-[state=open]:animate-in data-[state=closed]:animate-out",
   {
     variants: {
@@ -1656,7 +1706,7 @@ SheetDescription.displayName = DialogPrimitive2.Description.displayName;
 
 // src/components/command.tsx
 import * as DialogPrimitive3 from "@radix-ui/react-dialog";
-import { Command as CommandPrimitive } from "cmdk";
+import { Command as CommandPrimitive, defaultFilter } from "cmdk";
 import { Search } from "lucide-react";
 import { forwardRef as forwardRef22 } from "react";
 import { jsx as jsx27, jsxs as jsxs9 } from "react/jsx-runtime";
@@ -1694,13 +1744,19 @@ var CommandDialogOverlay = forwardRef22(({ className, ...props }, ref) => /* @__
   }
 ));
 CommandDialogOverlay.displayName = "CommandDialogOverlay";
-var CommandDialog = ({ children, ...props }) => {
+var CommandDialog = ({
+  children,
+  commandProps,
+  contentProps,
+  ...props
+}) => {
   const portalContainer = usePortalContainer();
   return /* @__PURE__ */ jsx27(DialogPrimitive3.Root, { ...props, children: /* @__PURE__ */ jsxs9(DialogPrimitive3.Portal, { container: portalContainer, children: [
     /* @__PURE__ */ jsx27(CommandDialogOverlay, {}),
     /* @__PURE__ */ jsx27(
       DialogPrimitive3.Content,
       {
+        ...contentProps,
         "data-slot": "command-content",
         className: cn(
           // Position
@@ -1726,7 +1782,19 @@ var CommandDialog = ({ children, ...props }) => {
           "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
           "data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%]"
         ),
-        children: /* @__PURE__ */ jsx27(Command, { className: "[&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wide [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:mb-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-3 [&_[cmdk-item]]:py-2 [&_[cmdk-item]_svg]:h-4 [&_[cmdk-item]_svg]:w-4", children })
+        children: /* @__PURE__ */ jsx27(
+          Command,
+          {
+            ...commandProps,
+            className: cn(
+              "[&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wide [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:mb-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-3 [&_[cmdk-item]]:py-2 [&_[cmdk-item]_svg]:h-4 [&_[cmdk-item]_svg]:w-4",
+              // Merged rather than overridden: a caller passing `className` for its own reason
+              // would otherwise silently drop every layout rule this dialog depends on.
+              commandProps?.className
+            ),
+            children
+          }
+        )
       }
     )
   ] }) });
@@ -1864,13 +1932,14 @@ var CommandShortcut = forwardRef22(
   }
 );
 CommandShortcut.displayName = "CommandShortcut";
+var commandDefaultFilter = defaultFilter;
 
 // src/components/spinner.tsx
-import { cva as cva11 } from "class-variance-authority";
+import { cva as cva12 } from "class-variance-authority";
 import { Loader2 } from "lucide-react";
 import { forwardRef as forwardRef23 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
-var spinnerVariants = cva11("animate-spin motion-reduce:animate-none", {
+var spinnerVariants = cva12("animate-spin motion-reduce:animate-none", {
   variants: {
     size: {
       sm: "h-4 w-4",
@@ -2111,7 +2180,7 @@ var TableSkeleton = ({
         ] })
       ] }) : /* @__PURE__ */ jsx33(GrayBar, { className: "h-4 w-[60%] max-w-[120px]" }) }, colIdx)) }, rowIdx)) })
     ] }) }),
-    !hideFooter && /* @__PURE__ */ jsx33("div", { className: "table-footer  border-t border-border", children: /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-between px-2 py-4 p-4", children: [
+    !hideFooter && /* @__PURE__ */ jsx33("div", { className: "table-footer  border-t border-border", children: /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-between px-2 py-4", children: [
       /* @__PURE__ */ jsx33("div", { className: "flex items-center gap-2 text-sm", children: /* @__PURE__ */ jsx33(GrayBar, { className: "h-4 w-[120px]" }) }),
       /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-6", children: [
         /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
@@ -2136,11 +2205,353 @@ var TableSkeleton = ({
 };
 TableSkeleton.displayName = "TableSkeleton";
 
+// src/components/color-picker.tsx
+import { Pipette } from "lucide-react";
+import * as React9 from "react";
+
+// src/lib/color/convert.ts
+var clamp01 = (n) => n < 0 ? 0 : n > 1 ? 1 : n;
+function normalizeHue(hue) {
+  if (!Number.isFinite(hue)) return 0;
+  const wrapped = hue % 360;
+  return wrapped < 0 ? wrapped + 360 : wrapped;
+}
+function hsvToRgb({ h, s, v }) {
+  const hue = normalizeHue(h);
+  const sat = clamp01(s);
+  const val = clamp01(v);
+  const sector = hue / 60;
+  const chroma = val * sat;
+  const x = chroma * (1 - Math.abs(sector % 2 - 1));
+  const base = val - chroma;
+  let rgb;
+  if (sector < 1) rgb = [chroma, x, 0];
+  else if (sector < 2) rgb = [x, chroma, 0];
+  else if (sector < 3) rgb = [0, chroma, x];
+  else if (sector < 4) rgb = [0, x, chroma];
+  else if (sector < 5) rgb = [x, 0, chroma];
+  else rgb = [chroma, 0, x];
+  return { r: rgb[0] + base, g: rgb[1] + base, b: rgb[2] + base };
+}
+function rgbToHsv({ r, g, b }) {
+  const red = clamp01(r);
+  const green = clamp01(g);
+  const blue = clamp01(b);
+  const max = Math.max(red, green, blue);
+  const min = Math.min(red, green, blue);
+  const chroma = max - min;
+  let hue = 0;
+  if (chroma !== 0) {
+    if (max === red) hue = (green - blue) / chroma % 6;
+    else if (max === green) hue = (blue - red) / chroma + 2;
+    else hue = (red - green) / chroma + 4;
+    hue *= 60;
+  }
+  return {
+    h: normalizeHue(hue),
+    s: max === 0 ? 0 : chroma / max,
+    v: max
+  };
+}
+
+// src/lib/color/hex.ts
+var HEX = /^#?(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+var clamp012 = (n) => n < 0 ? 0 : n > 1 ? 1 : n;
+function pair(channel) {
+  const value = Number.isFinite(channel) ? clamp012(channel) : 0;
+  return Math.round(value * 255).toString(16).padStart(2, "0");
+}
+function parseHex(input) {
+  const text = input.trim();
+  if (!HEX.test(text)) return null;
+  const digits = text.replace("#", "");
+  const short = digits.length < 6;
+  const size = short ? 1 : 2;
+  const channel = (index) => {
+    const slice = digits.slice(index * size, index * size + size);
+    return parseInt(short ? slice + slice : slice, 16) / 255;
+  };
+  const hasAlpha = digits.length === 4 || digits.length === 8;
+  return {
+    r: channel(0),
+    g: channel(1),
+    b: channel(2),
+    alpha: hasAlpha ? channel(3) : 1
+  };
+}
+function toHex(color, alpha = 1) {
+  const opacity = Number.isFinite(alpha) ? clamp012(alpha) : 1;
+  const opaque = `#${pair(color.r)}${pair(color.g)}${pair(color.b)}`;
+  return opacity === 1 ? opaque : `${opaque}${pair(opacity)}`;
+}
+
+// src/lib/color/picker-geometry.ts
+var clamp013 = (n) => n < 0 ? 0 : n > 1 ? 1 : n;
+function pointOnSurface(clientX, clientY, rect) {
+  return {
+    x: rect.width === 0 ? 0 : clamp013((clientX - rect.left) / rect.width),
+    y: rect.height === 0 ? 0 : clamp013((clientY - rect.top) / rect.height)
+  };
+}
+function saturationValueAt(point) {
+  return { s: clamp013(point.x), v: 1 - clamp013(point.y) };
+}
+function surfacePointFor(s, v) {
+  return { x: clamp013(s), y: 1 - clamp013(v) };
+}
+function hueAt(fraction) {
+  const hue = clamp013(fraction) * 360;
+  return hue >= 360 ? 0 : hue;
+}
+function huePosition(hue) {
+  const wrapped = (hue % 360 + 360) % 360;
+  return wrapped / 360;
+}
+function hueSliderValue(hue, max) {
+  const step = Math.round(huePosition(hue) * (max + 1));
+  return step > max ? max : step;
+}
+
+// src/components/color-picker.tsx
+import { Fragment as Fragment2, jsx as jsx34, jsxs as jsxs13 } from "react/jsx-runtime";
+function toHsva(hex) {
+  const parsed = parseHex(hex);
+  if (!parsed) return { h: 0, s: 0, v: 0, a: 1 };
+  const { r, g, b, alpha } = parsed;
+  return { ...rgbToHsv({ r, g, b }), a: alpha };
+}
+function toHexString(hsva, withAlpha) {
+  return toHex(hsvToRgb(hsva), withAlpha ? hsva.a : 1);
+}
+var HUE_MAX = 359;
+function hsvaFrom(color, alpha, currentHue) {
+  const hsv = rgbToHsv(color);
+  return { ...hsv, h: hsv.s === 0 ? currentHue : hsv.h, a: alpha };
+}
+var SLIDER = "h-3 w-full cursor-pointer appearance-none rounded-full";
+var CHECKERBOARD = "repeating-conic-gradient(#c8c8c8 0% 25%, #ffffff 0% 50%)";
+function eyeDropperSupported() {
+  return typeof window !== "undefined" && "EyeDropper" in window;
+}
+function ColorPicker({
+  color,
+  onColorChange,
+  swatches = [],
+  onSwatchSelect,
+  recentColors = [],
+  showAlpha = false,
+  className
+}) {
+  const fieldId = React9.useId();
+  const surfaceRef = React9.useRef(null);
+  const [hsva, setHsva] = React9.useState(() => toHsva(color));
+  const [draftHex, setDraftHex] = React9.useState(null);
+  const rendered = toHexString(hsva, showAlpha);
+  React9.useEffect(() => {
+    const incoming = parseHex(color);
+    if (incoming && toHex(incoming, showAlpha ? incoming.alpha : 1) !== rendered) {
+      setHsva((prev) => hsvaFrom(incoming, incoming.alpha, prev.h));
+    }
+  }, [color, rendered, showAlpha]);
+  const commit = (next) => {
+    setHsva(next);
+    setDraftHex(null);
+    onColorChange(toHexString(next, showAlpha));
+  };
+  const trackPointer = (event) => {
+    const rect = surfaceRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    const { s, v } = saturationValueAt(
+      pointOnSurface(event.clientX, event.clientY, rect)
+    );
+    commit({ ...hsva, s, v });
+  };
+  const nudge = (ds, dv) => {
+    const { s, v } = saturationValueAt(
+      surfacePointFor(hsva.s + ds, hsva.v + dv)
+    );
+    commit({ ...hsva, s, v });
+  };
+  const handleSurfaceKey = (event) => {
+    const step = event.shiftKey ? 0.1 : 0.01;
+    const moves = {
+      ArrowLeft: [-step, 0],
+      ArrowRight: [step, 0],
+      ArrowUp: [0, step],
+      ArrowDown: [0, -step]
+    };
+    const move = moves[event.key];
+    if (!move) return;
+    event.preventDefault();
+    nudge(move[0], move[1]);
+  };
+  const [canPickFromScreen, setCanPickFromScreen] = React9.useState(false);
+  React9.useEffect(() => {
+    setCanPickFromScreen(eyeDropperSupported());
+  }, []);
+  const handle = surfacePointFor(hsva.s, hsva.v);
+  const hueOnly = toHex(hsvToRgb({ h: hsva.h, s: 1, v: 1 }));
+  const pickFromScreen = async () => {
+    const ctor = window.EyeDropper;
+    if (!ctor) return;
+    let sampled;
+    try {
+      sampled = (await new ctor().open()).sRGBHex;
+    } catch {
+      return;
+    }
+    const parsed = parseHex(sampled);
+    if (parsed) commit(hsvaFrom(parsed, hsva.a, hsva.h));
+  };
+  return /* @__PURE__ */ jsxs13("div", { className: cn("w-64 space-y-3", className), children: [
+    /* @__PURE__ */ jsx34(
+      "div",
+      {
+        ref: surfaceRef,
+        role: "application",
+        tabIndex: 0,
+        "aria-label": `Saturation and brightness: ${Math.round(hsva.s * 100)}% saturation, ${Math.round(hsva.v * 100)}% brightness. Arrow keys adjust.`,
+        className: "ring-offset-background focus-visible:ring-ring relative h-40 w-full cursor-crosshair touch-none rounded-md focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
+        style: {
+          backgroundColor: hueOnly,
+          // Value on TOP of saturation. CSS paints the first layer nearest the
+          // viewer, so the reverse order lets the opaque white end of the
+          // saturation ramp cover the black end of the value ramp: the
+          // bottom-left corner displays white while selecting black.
+          backgroundImage: "linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent)"
+        },
+        onKeyDown: handleSurfaceKey,
+        onPointerDown: (event) => {
+          event.currentTarget.setPointerCapture(event.pointerId);
+          trackPointer(event);
+        },
+        onPointerMove: (event) => {
+          if (event.buttons === 1) trackPointer(event);
+        },
+        children: /* @__PURE__ */ jsx34(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute size-3 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-sm ring-1 ring-black/60",
+            style: { left: `${handle.x * 100}%`, top: `${handle.y * 100}%` }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx34("label", { className: "sr-only", htmlFor: `${fieldId}-hue`, children: "Hue" }),
+    /* @__PURE__ */ jsx34(
+      "input",
+      {
+        id: `${fieldId}-hue`,
+        type: "range",
+        min: 0,
+        max: HUE_MAX,
+        step: 1,
+        value: hueSliderValue(hsva.h, HUE_MAX),
+        onChange: (event) => commit({ ...hsva, h: hueAt(+event.target.value / (HUE_MAX + 1)) }),
+        className: SLIDER,
+        style: {
+          backgroundImage: "linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)"
+        }
+      }
+    ),
+    showAlpha && /* @__PURE__ */ jsxs13(Fragment2, { children: [
+      /* @__PURE__ */ jsx34("label", { className: "sr-only", htmlFor: `${fieldId}-alpha`, children: "Opacity" }),
+      /* @__PURE__ */ jsx34(
+        "input",
+        {
+          id: `${fieldId}-alpha`,
+          type: "range",
+          min: 0,
+          max: 100,
+          step: 1,
+          value: Math.round(hsva.a * 100),
+          onChange: (event) => commit({ ...hsva, a: +event.target.value / 100 }),
+          className: SLIDER,
+          style: {
+            // The ramp runs to the colour being edited, over a chequerboard,
+            // so the track shows what the slider actually controls. Without
+            // any background this rendered as a blank 12px strip whose only
+            // label was screen-reader-only.
+            backgroundImage: `linear-gradient(to right, transparent, ${toHexString({ ...hsva, a: 1 }, false)}), ${CHECKERBOARD}`,
+            backgroundSize: "100% 100%, 8px 8px"
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx34("label", { className: "sr-only", htmlFor: `${fieldId}-hex`, children: "Hex colour" }),
+      /* @__PURE__ */ jsx34(
+        Input,
+        {
+          id: `${fieldId}-hex`,
+          className: "font-mono",
+          value: draftHex ?? rendered,
+          onChange: (event) => {
+            const text = event.target.value;
+            setDraftHex(text);
+            const parsed = parseHex(text);
+            if (parsed) {
+              setHsva(hsvaFrom(parsed, parsed.alpha, hsva.h));
+              onColorChange(toHex(parsed, showAlpha ? parsed.alpha : 1));
+            }
+          },
+          onBlur: () => setDraftHex(null)
+        }
+      ),
+      canPickFromScreen && /* @__PURE__ */ jsx34(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "icon",
+          "aria-label": "Pick a colour from the screen",
+          onClick: () => void pickFromScreen(),
+          children: /* @__PURE__ */ jsx34(Pipette, { className: "size-4" })
+        }
+      )
+    ] }),
+    swatches.length > 0 && /* @__PURE__ */ jsxs13("div", { children: [
+      /* @__PURE__ */ jsx34("p", { className: "text-muted-foreground mb-1 text-xs", children: "Presets" }),
+      /* @__PURE__ */ jsx34("div", { className: "flex flex-wrap gap-1", children: swatches.map((swatch) => /* @__PURE__ */ jsx34(
+        "button",
+        {
+          type: "button",
+          title: swatch.label,
+          "aria-label": swatch.label,
+          className: "size-6 rounded border shadow-sm",
+          style: { backgroundColor: swatch.color },
+          onClick: () => onSwatchSelect?.(swatch)
+        },
+        swatch.id
+      )) })
+    ] }),
+    recentColors.length > 0 && /* @__PURE__ */ jsxs13("div", { children: [
+      /* @__PURE__ */ jsx34("p", { className: "text-muted-foreground mb-1 text-xs", children: "Recent" }),
+      /* @__PURE__ */ jsx34("div", { className: "flex flex-wrap gap-1", children: recentColors.map((recent) => /* @__PURE__ */ jsx34(
+        "button",
+        {
+          type: "button",
+          title: recent,
+          "aria-label": recent,
+          className: "size-6 rounded border shadow-sm",
+          style: { backgroundColor: recent },
+          onClick: () => {
+            const parsed = parseHex(recent);
+            if (parsed) commit(hsvaFrom(parsed, parsed.alpha, hsva.h));
+          }
+        },
+        recent
+      )) })
+    ] })
+  ] });
+}
+
 // src/components/context-menu.tsx
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
 import { Check as Check4, ChevronRight as ChevronRight2, Circle as Circle2 } from "lucide-react";
-import * as React9 from "react";
-import { jsx as jsx34, jsxs as jsxs13 } from "react/jsx-runtime";
+import * as React10 from "react";
+import { jsx as jsx35, jsxs as jsxs14 } from "react/jsx-runtime";
 var menuItemBase2 = "cursor-pointer transition-colors data-[highlighted]:bg-muted data-[highlighted]:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
 var menuSurface = "z-50 max-h-[var(--radix-context-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 origin-[--radix-context-menu-content-transform-origin]";
 var ContextMenu = ContextMenuPrimitive.Root;
@@ -2148,7 +2559,7 @@ var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
 var ContextMenuGroup = ContextMenuPrimitive.Group;
 var ContextMenuSub = ContextMenuPrimitive.Sub;
 var ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
-var ContextMenuSubTrigger = React9.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs13(
+var ContextMenuSubTrigger = React10.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs14(
   ContextMenuPrimitive.SubTrigger,
   {
     ref,
@@ -2161,14 +2572,14 @@ var ContextMenuSubTrigger = React9.forwardRef(({ className, inset, children, ...
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx34(ChevronRight2, { className: "ml-auto" })
+      /* @__PURE__ */ jsx35(ChevronRight2, { className: "ml-auto" })
     ]
   }
 ));
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
-var ContextMenuSubContent = React9.forwardRef(({ className, ...props }, ref) => {
+var ContextMenuSubContent = React10.forwardRef(({ className, ...props }, ref) => {
   const portalContainer = usePortalContainer();
-  return /* @__PURE__ */ jsx34(ContextMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(ContextMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx35(
     ContextMenuPrimitive.SubContent,
     {
       ref,
@@ -2178,9 +2589,9 @@ var ContextMenuSubContent = React9.forwardRef(({ className, ...props }, ref) =>
   ) });
 });
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
-var ContextMenuContent = React9.forwardRef(({ className, ...props }, ref) => {
+var ContextMenuContent = React10.forwardRef(({ className, ...props }, ref) => {
   const portalContainer = usePortalContainer();
-  return /* @__PURE__ */ jsx34(ContextMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(ContextMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx35(
     ContextMenuPrimitive.Content,
     {
       ref,
@@ -2190,7 +2601,7 @@ var ContextMenuContent = React9.forwardRef(({ className, ...props }, ref) => {
   ) });
 });
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
-var ContextMenuItem = React9.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx34(
+var ContextMenuItem = React10.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx35(
   ContextMenuPrimitive.Item,
   {
     ref,
@@ -2204,7 +2615,7 @@ var ContextMenuItem = React9.forwardRef(({ className, inset, ...props }, ref) =>
   }
 ));
 ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
-var ContextMenuCheckboxItem = React9.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs13(
+var ContextMenuCheckboxItem = React10.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs14(
   ContextMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -2216,13 +2627,13 @@ var ContextMenuCheckboxItem = React9.forwardRef(({ className, children, checked,
     checked,
     ...props,
     children: [
-      /* @__PURE__ */ jsx34("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx34(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx34(Check4, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx35("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx35(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx35(Check4, { className: "h-4 w-4" }) }) }),
       children
     ]
   }
 ));
 ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
-var ContextMenuRadioItem = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs13(
+var ContextMenuRadioItem = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs14(
   ContextMenuPrimitive.RadioItem,
   {
     ref,
@@ -2233,13 +2644,13 @@ var ContextMenuRadioItem = React9.forwardRef(({ className, children, ...props },
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx34("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx34(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx34(Circle2, { className: "h-2 w-2 fill-current" }) }) }),
+      /* @__PURE__ */ jsx35("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx35(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx35(Circle2, { className: "h-2 w-2 fill-current" }) }) }),
       children
     ]
   }
 ));
 ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
-var ContextMenuLabel = React9.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx34(
+var ContextMenuLabel = React10.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx35(
   ContextMenuPrimitive.Label,
   {
     ref,
@@ -2252,7 +2663,7 @@ var ContextMenuLabel = React9.forwardRef(({ className, inset, ...props }, ref) =
   }
 ));
 ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
-var ContextMenuSeparator = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx34(
+var ContextMenuSeparator = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx35(
   ContextMenuPrimitive.Separator,
   {
     ref,
@@ -2264,7 +2675,7 @@ ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
 var ContextMenuShortcut = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx34(
+}) => /* @__PURE__ */ jsx35(
   "span",
   {
     className: cn(
@@ -2279,11 +2690,11 @@ ContextMenuShortcut.displayName = "ContextMenuShortcut";
 // src/components/resizable.tsx
 import { GripVertical } from "lucide-react";
 import * as ResizablePrimitive from "react-resizable-panels";
-import { jsx as jsx35, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs15 } from "react/jsx-runtime";
 var ResizablePanelGroup = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx35(
+}) => /* @__PURE__ */ jsx36(
   ResizablePrimitive.Group,
   {
     className: cn("h-full w-full", className),
@@ -2296,7 +2707,7 @@ var ResizableHandle = ({
   className,
   children,
   ...props
-}) => /* @__PURE__ */ jsxs14(
+}) => /* @__PURE__ */ jsxs15(
   ResizablePrimitive.Separator,
   {
     className: cn(
@@ -2316,7 +2727,7 @@ var ResizableHandle = ({
     ),
     ...props,
     children: [
-      withGrip ? /* @__PURE__ */ jsx35("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border border-border bg-border", children: /* @__PURE__ */ jsx35(GripVertical, { className: "h-2.5 w-2.5 text-muted-foreground" }) }) : null,
+      withGrip ? /* @__PURE__ */ jsx36("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border border-border bg-border", children: /* @__PURE__ */ jsx36(GripVertical, { className: "h-2.5 w-2.5 text-muted-foreground" }) }) : null,
       children
     ]
   }
@@ -2325,8 +2736,8 @@ var ResizableHandle = ({
 // src/components/tree-view.tsx
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { ChevronRight as ChevronRight3 } from "lucide-react";
-import * as React10 from "react";
-import { jsx as jsx36, jsxs as jsxs15 } from "react/jsx-runtime";
+import * as React11 from "react";
+import { jsx as jsx37, jsxs as jsxs16 } from "react/jsx-runtime";
 var ROW_HEIGHT = 28;
 var INDENT_PER_LEVEL = 12;
 function textOf(node) {
@@ -2367,13 +2778,13 @@ function flatten(nodes, expanded) {
   return rows;
 }
 function useControllable(controlled, fallback) {
-  const [uncontrolled, setUncontrolled] = React10.useState(fallback);
+  const [uncontrolled, setUncontrolled] = React11.useState(fallback);
   return [
     controlled === void 0 ? uncontrolled : controlled,
     setUncontrolled
   ];
 }
-var TreeView = React10.forwardRef(
+var TreeView = React11.forwardRef(
   ({
     nodes,
     expandedIds,
@@ -2388,8 +2799,8 @@ var TreeView = React10.forwardRef(
     "aria-describedby": ariaDescribedBy,
     ...props
   }, forwardedRef) => {
-    const scrollRef = React10.useRef(null);
-    const attachScroll = React10.useCallback(
+    const scrollRef = React11.useRef(null);
+    const attachScroll = React11.useCallback(
       (node) => {
         scrollRef.current = node;
         if (typeof forwardedRef === "function") forwardedRef(node);
@@ -2403,7 +2814,7 @@ var TreeView = React10.forwardRef(
       expandedIds === void 0 ? void 0 : [...expandedIds],
       [...defaultExpandedIds ?? []]
     );
-    const expanded = React10.useMemo(
+    const expanded = React11.useMemo(
       () => new Set(expandedIds ?? expandedState),
       [expandedIds, expandedState]
     );
@@ -2411,11 +2822,11 @@ var TreeView = React10.forwardRef(
       selectedId === void 0 ? void 0 : selectedId,
       defaultSelectedId ?? null
     );
-    const rows = React10.useMemo(
+    const rows = React11.useMemo(
       () => flatten(nodes, expanded),
       [nodes, expanded]
     );
-    const [activeId, setActiveId] = React10.useState(null);
+    const [activeId, setActiveId] = React11.useState(null);
     const activeIndex = Math.max(
       0,
       rows.findIndex((row) => row.node.id === (activeId ?? selected))
@@ -2459,7 +2870,7 @@ var TreeView = React10.forwardRef(
       }
       return from;
     };
-    const typeahead = React10.useRef({ query: "", at: 0 });
+    const typeahead = React11.useRef({ query: "", at: 0 });
     const onKeyDown = (event) => {
       const index = activeIndex;
       const row = rows[index];
@@ -2556,13 +2967,13 @@ var TreeView = React10.forwardRef(
     const virtualItems = virtualizer.getVirtualItems();
     const usable = (index) => rows[index]?.node.disabled !== true;
     const tabStopIndex = virtualItems.some((item) => item.index === activeIndex) && usable(activeIndex) ? activeIndex : virtualItems.find((item) => usable(item.index))?.index ?? -1;
-    return /* @__PURE__ */ jsx36(
+    return /* @__PURE__ */ jsx37(
       "div",
       {
         ref: attachScroll,
         className: cn("overflow-auto", className),
         ...props,
-        children: /* @__PURE__ */ jsx36(
+        children: /* @__PURE__ */ jsx37(
           "div",
           {
             role: "tree",
@@ -2575,7 +2986,7 @@ var TreeView = React10.forwardRef(
               const row = rows[item.index];
               if (row === void 0) return null;
               const isSelected = selected === row.node.id;
-              return /* @__PURE__ */ jsxs15(
+              return /* @__PURE__ */ jsxs16(
                 "div",
                 {
                   "data-tree-index": item.index,
@@ -2605,7 +3016,7 @@ var TreeView = React10.forwardRef(
                     paddingLeft: 4 + row.level * INDENT_PER_LEVEL
                   },
                   children: [
-                    /* @__PURE__ */ jsx36(
+                    /* @__PURE__ */ jsx37(
                       "span",
                       {
                         "aria-hidden": "true",
@@ -2615,7 +3026,7 @@ var TreeView = React10.forwardRef(
                           event.stopPropagation();
                           setExpansion(row.node.id, !expanded.has(row.node.id));
                         },
-                        children: row.hasChildren ? /* @__PURE__ */ jsx36(
+                        children: row.hasChildren ? /* @__PURE__ */ jsx37(
                           ChevronRight3,
                           {
                             className: cn(
@@ -2626,8 +3037,8 @@ var TreeView = React10.forwardRef(
                         ) : null
                       }
                     ),
-                    row.node.icon !== void 0 ? /* @__PURE__ */ jsx36("span", { className: "flex size-4 shrink-0 items-center justify-center text-muted-foreground", children: row.node.icon }) : null,
-                    /* @__PURE__ */ jsx36("span", { className: "truncate", children: row.node.label })
+                    row.node.icon !== void 0 ? /* @__PURE__ */ jsx37("span", { className: "flex size-4 shrink-0 items-center justify-center text-muted-foreground", children: row.node.icon }) : null,
+                    /* @__PURE__ */ jsx37("span", { className: "truncate", children: row.node.label })
                   ]
                 },
                 row.node.id
@@ -2643,7 +3054,7 @@ TreeView.displayName = "TreeView";
 
 // src/components/slider.tsx
 import * as SliderPrimitive from "@radix-ui/react-slider";
-import * as React11 from "react";
+import * as React12 from "react";
 
 // src/lib/dev-warn.ts
 var emitted = /* @__PURE__ */ new Set();
@@ -2662,14 +3073,14 @@ function devWarnOnce(condition, message) {
 }
 
 // src/components/slider.tsx
-import { jsx as jsx37, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs17 } from "react/jsx-runtime";
 function thumbCount(value, defaultValue) {
   return Math.max(1, value?.length ?? defaultValue?.length ?? 1);
 }
 function hasAccessibleName(value) {
   return value !== void 0 && value.trim() !== "";
 }
-var Slider = React11.forwardRef(
+var Slider = React12.forwardRef(
   ({
     className,
     value,
@@ -2680,7 +3091,7 @@ var Slider = React11.forwardRef(
     "aria-labelledby": ariaLabelledBy,
     ...props
   }, ref) => {
-    const initialUncontrolledCount = React11.useRef(
+    const initialUncontrolledCount = React12.useRef(
       thumbCount(void 0, defaultValue)
     ).current;
     const count = value?.length ?? initialUncontrolledCount;
@@ -2725,7 +3136,7 @@ var Slider = React11.forwardRef(
       // `aria-label`/`aria-labelledby` are destructured out above rather than
       // spread here: left on the root they would be a second, roleless copy
       // of a name only the thumb is read for.
-      /* @__PURE__ */ jsxs16(
+      /* @__PURE__ */ jsxs17(
         SliderPrimitive.Root,
         {
           ref,
@@ -2753,14 +3164,14 @@ var Slider = React11.forwardRef(
           defaultValue: isEmptyDefault ? void 0 : defaultValue,
           ...props,
           children: [
-            /* @__PURE__ */ jsx37(
+            /* @__PURE__ */ jsx38(
               SliderPrimitive.Track,
               {
                 className: cn(
                   "bg-secondary relative grow overflow-hidden rounded-full",
                   isVertical ? "h-full w-1.5" : "h-1.5 w-full"
                 ),
-                children: /* @__PURE__ */ jsx37(
+                children: /* @__PURE__ */ jsx38(
                   SliderPrimitive.Range,
                   {
                     className: cn(
@@ -2771,7 +3182,7 @@ var Slider = React11.forwardRef(
                 )
               }
             ),
-            Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx37(
+            Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx38(
               SliderPrimitive.Thumb,
               {
                 ...ariaFor(i),
@@ -2794,7 +3205,7 @@ var Slider = React11.forwardRef(
 Slider.displayName = SliderPrimitive.Root.displayName;
 
 // src/lib/shortcuts/react.tsx
-import * as React12 from "react";
+import * as React13 from "react";
 
 // src/lib/shortcuts/key-spec.ts
 function normalizeKey(key) {
@@ -2980,7 +3391,7 @@ function createShortcutManager(options = {}) {
   let pendingKey = null;
   function layerShape(bindings, options2) {
     const keys = bindings.map((b) => b.binding.keys).join("\0");
-    return `${keys}
${options2.depth}
${options2.blocking === true}
${options2.enabled !== false}`;
+    return `${keys}
${options2.depth}
${options2.priority ?? 0}
${options2.blocking === true}
${options2.enabled !== false}`;
   }
   function blocking() {
     return ordered().some((layer) => layer.options.blocking === true);
@@ -2999,7 +3410,7 @@ function createShortcutManager(options = {}) {
   }
   function ordered() {
     return [...layers].filter((layer) => layer.options.enabled !== false).sort(
-      (a, b) => b.options.depth - a.options.depth || b.sequence - a.sequence
+      (a, b) => (b.options.priority ?? 0) - (a.options.priority ?? 0) || b.options.depth - a.options.depth || b.sequence - a.sequence
     );
   }
   function matchDepth(prepared, pressed) {
@@ -3128,6 +3539,7 @@ function createShortcutManager(options = {}) {
     }
   }
   function handle(event) {
+    if (typeof event.key !== "string") return false;
     if (event.defaultPrevented) {
       abandonSequence();
       return true;
@@ -3321,10 +3733,10 @@ var FIELD_KEYS = /* @__PURE__ */ new Set([
 ]);
 
 // src/lib/shortcuts/react.tsx
-import { jsx as jsx38 } from "react/jsx-runtime";
-var ShortcutContext = React12.createContext(null);
+import { jsx as jsx39 } from "react/jsx-runtime";
+var ShortcutContext = React13.createContext(null);
 var ownersByTarget = /* @__PURE__ */ new WeakMap();
-var useIsomorphicLayoutEffect = typeof document === "undefined" ? React12.useEffect : React12.useLayoutEffect;
+var useIsomorphicLayoutEffect = typeof document === "undefined" ? React13.useEffect : React13.useLayoutEffect;
 function optionsFingerprint(options) {
   return [
     options.isApple ?? "auto",
@@ -3337,13 +3749,13 @@ function ShortcutProvider({
   target,
   ...managerOptions
 }) {
-  const parent = React12.useContext(ShortcutContext);
+  const parent = React13.useContext(ShortcutContext);
   const resolvedTarget = target === null ? null : target ?? (typeof document === "undefined" ? null : document);
   const nestedOnSameTarget = parent !== null && parent.target === resolvedTarget;
-  const optionsRef = React12.useRef(managerOptions);
-  const ownManagers = React12.useRef(/* @__PURE__ */ new WeakMap());
-  const ownDetached = React12.useRef(null);
-  const detached = React12.useMemo(() => {
+  const optionsRef = React13.useRef(managerOptions);
+  const ownManagers = React13.useRef(/* @__PURE__ */ new WeakMap());
+  const ownDetached = React13.useRef(null);
+  const detached = React13.useMemo(() => {
     if (resolvedTarget === null) {
       ownDetached.current ??= createShortcutManager(optionsRef.current);
       return ownDetached.current;
@@ -3399,20 +3811,20 @@ function ShortcutProvider({
     };
   }, [resolvedTarget, manager]);
   const depth = nestedOnSameTarget && parent ? parent.depth : 0;
-  const value = React12.useMemo(
+  const value = React13.useMemo(
     () => ({ manager, depth, target: resolvedTarget, options: fingerprint }),
     [manager, depth, resolvedTarget, fingerprint]
   );
-  return /* @__PURE__ */ jsx38(ShortcutContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx39(ShortcutContext.Provider, { value, children });
 }
 function ShortcutScope({
   children
 }) {
-  const parent = React12.useContext(ShortcutContext);
+  const parent = React13.useContext(ShortcutContext);
   if (!parent) {
     throw new Error("ShortcutScope must be rendered inside a ShortcutProvider");
   }
-  const value = React12.useMemo(
+  const value = React13.useMemo(
     () => ({
       manager: parent.manager,
       depth: parent.depth + 1,
@@ -3423,16 +3835,16 @@ function ShortcutScope({
     }),
     [parent.manager, parent.depth, parent.target, parent.options]
   );
-  return /* @__PURE__ */ jsx38(ShortcutContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx39(ShortcutContext.Provider, { value, children });
 }
 function useShortcuts(bindings, options) {
-  const context = React12.useContext(ShortcutContext);
+  const context = React13.useContext(ShortcutContext);
   if (!context) {
     throw new Error("useShortcuts must be called inside a ShortcutProvider");
   }
   const { manager, depth } = context;
-  const registration = React12.useRef(null);
-  const latest = React12.useRef({ bindings, options });
+  const registration = React13.useRef(null);
+  const latest = React13.useRef({ bindings, options });
   useIsomorphicLayoutEffect(() => {
     registration.current = manager.register([], {
       name: latest.current.options.name,
@@ -3449,12 +3861,13 @@ function useShortcuts(bindings, options) {
       name: options.name,
       depth,
       enabled: options.enabled,
-      blocking: options.blocking
+      blocking: options.blocking,
+      priority: options.priority
     });
   });
 }
 function useShortcutManager() {
-  const context = React12.useContext(ShortcutContext);
+  const context = React13.useContext(ShortcutContext);
   if (!context) {
     throw new Error(
       "useShortcutManager must be called inside a ShortcutProvider"
@@ -3464,7 +3877,7 @@ function useShortcutManager() {
 }
 function useActiveShortcuts() {
   const manager = useShortcutManager();
-  return React12.useSyncExternalStore(
+  return React13.useSyncExternalStore(
     manager.subscribe,
     manager.activeBindings,
     manager.activeBindings
@@ -3505,6 +3918,7 @@ export {
   Collapsible,
   CollapsibleContent2 as CollapsibleContent,
   CollapsibleTrigger2 as CollapsibleTrigger,
+  ColorPicker,
   Command,
   CommandDialog,
   CommandEmpty,
@@ -3626,6 +4040,7 @@ export {
   badgeVariants,
   buttonVariants,
   cardVariants,
+  commandDefaultFilter,
   createShortcutManager,
   dialogContentVariants,
   inputVariants,