@nextlyhq/ui 0.0.2-alpha.54 → 0.0.2-alpha.57

package/dist/index.mjs

@@ -22,11 +22,15 @@ var buttonVariants = cva(
       variant: {
         default: "bg-primary text-primary-foreground border border-transparent hover:opacity-90",
         primary: "bg-primary text-primary-foreground border border-transparent hover:opacity-90",
-        // Solid fill uses the emphasis token so white on-color text stays AA in
-        // dark mode (the base token is the readable text color, too light here).
-        // Hover darkens to a deeper shade instead of opacity-90, which would
-        // composite the fill toward the page and drop white text under 4.5:1.
-        destructive: "bg-destructive-solid text-destructive-foreground border border-transparent hover:bg-destructive-700",
+        // Solid fill uses the emphasis token so on-color text stays AA in dark
+        // mode (the base token is the readable text color, too light here).
+        // Hover darkens to a deeper shade rather than opacity-90, which would
+        // composite the fill toward the page and drop the label under 4.5:1.
+        // One step, not two: the label is white in light mode and black in
+        // dark, so mixing the fill toward black moves it away from the label in
+        // one mode and into it in the other. `-600` clears both (5.92:1 light,
+        // 5.67:1 dark); `-700` reads at 3.70:1 against the dark label.
+        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
@@ -2107,7 +2111,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: [
@@ -2132,11 +2136,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;
@@ -2144,7 +2490,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,
@@ -2157,14 +2503,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,
@@ -2174,9 +2520,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,
@@ -2186,7 +2532,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,
@@ -2200,7 +2546,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,
@@ -2212,13 +2558,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,
@@ -2229,13 +2575,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,
@@ -2248,7 +2594,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,
@@ -2260,7 +2606,7 @@ ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
 var ContextMenuShortcut = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx34(
+}) => /* @__PURE__ */ jsx35(
   "span",
   {
     className: cn(
@@ -2275,11 +2621,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),
@@ -2292,7 +2638,7 @@ var ResizableHandle = ({
   className,
   children,
   ...props
-}) => /* @__PURE__ */ jsxs14(
+}) => /* @__PURE__ */ jsxs15(
   ResizablePrimitive.Separator,
   {
     className: cn(
@@ -2312,7 +2658,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
     ]
   }
@@ -2321,8 +2667,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) {
@@ -2363,13 +2709,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,
@@ -2384,8 +2730,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);
@@ -2399,7 +2745,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]
     );
@@ -2407,11 +2753,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))
@@ -2455,7 +2801,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];
@@ -2552,13 +2898,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",
@@ -2571,7 +2917,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,
@@ -2601,7 +2947,7 @@ var TreeView = React10.forwardRef(
                     paddingLeft: 4 + row.level * INDENT_PER_LEVEL
                   },
                   children: [
-                    /* @__PURE__ */ jsx36(
+                    /* @__PURE__ */ jsx37(
                       "span",
                       {
                         "aria-hidden": "true",
@@ -2611,7 +2957,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(
@@ -2622,8 +2968,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
@@ -2636,6 +2982,837 @@ var TreeView = React10.forwardRef(
   }
 );
 TreeView.displayName = "TreeView";
+
+// src/components/slider.tsx
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import * as React12 from "react";
+
+// src/lib/dev-warn.ts
+var emitted = /* @__PURE__ */ new Set();
+var SPEAKING_ENVIRONMENTS = /* @__PURE__ */ new Set(["development", "test"]);
+function isDevelopmentRuntime() {
+  if (typeof process === "undefined") return false;
+  const env = process?.env?.NODE_ENV;
+  return env !== void 0 && SPEAKING_ENVIRONMENTS.has(env);
+}
+function devWarnOnce(condition, message) {
+  if (condition) return;
+  if (!isDevelopmentRuntime()) return;
+  if (emitted.has(message)) return;
+  emitted.add(message);
+  console.warn(`[@nextlyhq/ui] ${message}`);
+}
+
+// src/components/slider.tsx
+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 = React12.forwardRef(
+  ({
+    className,
+    value,
+    defaultValue,
+    thumbs,
+    orientation = "horizontal",
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    ...props
+  }, ref) => {
+    const initialUncontrolledCount = React12.useRef(
+      thumbCount(void 0, defaultValue)
+    ).current;
+    const count = value?.length ?? initialUncontrolledCount;
+    const isEmptyDefault = defaultValue !== void 0 && defaultValue.length === 0;
+    const isEmptyControlled = value !== void 0 && value.length === 0;
+    devWarnOnce(
+      !isEmptyDefault && !isEmptyControlled,
+      "Slider: `value`/`defaultValue` must hold one number per thumb, and an empty array holds none \u2014 the control has nothing to slide. An empty `defaultValue` falls back to `min`; an empty `value` renders nothing at all, because a controlled slider cannot be given a value without taking state the caller owns. Render nothing until the value is loaded rather than passing `[]`."
+    );
+    if (isEmptyControlled) return null;
+    const isNamed = (index) => {
+      const own = thumbs?.[index];
+      if (hasAccessibleName(own?.["aria-label"])) return true;
+      if (hasAccessibleName(own?.["aria-labelledby"])) return true;
+      return count === 1 && (hasAccessibleName(ariaLabel) || hasAccessibleName(ariaLabelledBy));
+    };
+    devWarnOnce(
+      Array.from({ length: count }).every((_, i) => isNamed(i)),
+      "Slider: every thumb needs an accessible name. A single thumb may take it from the root's `aria-label`/`aria-labelledby`; a range needs one `thumbs` entry per thumb, because the root's name is not inherited and two thumbs sharing one name are announced identically."
+    );
+    const ariaFor = (index) => {
+      const supplied = thumbs?.[index] ?? {};
+      const ownLabel = hasAccessibleName(supplied["aria-label"]) ? supplied["aria-label"] : void 0;
+      const ownLabelledBy = hasAccessibleName(supplied["aria-labelledby"]) ? supplied["aria-labelledby"] : void 0;
+      if (count !== 1) {
+        return {
+          ...supplied,
+          "aria-label": ownLabel,
+          "aria-labelledby": ownLabelledBy
+        };
+      }
+      const namesItself = ownLabel !== void 0 || ownLabelledBy !== void 0;
+      return {
+        "aria-label": namesItself ? ownLabel : ariaLabel,
+        "aria-labelledby": namesItself ? ownLabelledBy : ariaLabelledBy,
+        "aria-valuetext": supplied["aria-valuetext"],
+        "aria-describedby": supplied["aria-describedby"]
+      };
+    };
+    const isVertical = orientation === "vertical";
+    return (
+      // `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__ */ jsxs17(
+        SliderPrimitive.Root,
+        {
+          ref,
+          className: cn(
+            "relative flex touch-none select-none items-center",
+            // WCAG 2.5.8 wants a 24px target. Padding alone does not reach it: the
+            // thumb is absolutely positioned, so the cross-axis size is the 6px
+            // track plus the padding — 22px with `py-2`. An explicit minimum
+            // states the target rather than leaving it to arithmetic that moves
+            // whenever the track thickness does.
+            isVertical ? (
+              // A vertical slider needs a LENGTH, and it cannot inherit one:
+              // `h-full` inside an auto-height parent resolves to zero, leaving
+              // a control with no track to drag along. A concrete default is
+              // usable everywhere and, being a plain utility, is replaced by a
+              // caller's own `h-*` — including `h-full`, for the fill-the-parent
+              // case this default gives up.
+              "h-44 min-w-6 flex-col px-2"
+            ) : "min-h-6 w-full py-2",
+            "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+            className
+          ),
+          orientation,
+          value,
+          defaultValue: isEmptyDefault ? void 0 : defaultValue,
+          ...props,
+          children: [
+            /* @__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__ */ jsx38(
+                  SliderPrimitive.Range,
+                  {
+                    className: cn(
+                      "bg-primary absolute",
+                      isVertical ? "w-full" : "h-full"
+                    )
+                  }
+                )
+              }
+            ),
+            Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx38(
+              SliderPrimitive.Thumb,
+              {
+                ...ariaFor(i),
+                className: cn(
+                  "border-primary bg-background block h-4 w-4 rounded-full border-2",
+                  "ring-offset-background transition-colors",
+                  "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2",
+                  "focus-visible:ring-offset-2",
+                  "disabled:pointer-events-none disabled:opacity-50"
+                )
+              },
+              i
+            ))
+          ]
+        }
+      )
+    );
+  }
+);
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+// src/lib/shortcuts/react.tsx
+import * as React13 from "react";
+
+// src/lib/shortcuts/key-spec.ts
+function normalizeKey(key) {
+  return [...key].length === 1 ? key.toLowerCase() : key;
+}
+function shiftIsMeaningful(key) {
+  if (key.length > 1) return true;
+  if (key === " ") return true;
+  return /[\p{L}\p{N}]/u.test(key);
+}
+function parseKeys(spec) {
+  const steps = spec.trim().split(/\s+/).filter(Boolean);
+  if (steps.length === 0) {
+    throw new Error(`Shortcut spec is empty: ${JSON.stringify(spec)}`);
+  }
+  return steps.map((step) => parseChord(step, spec));
+}
+function parseChord(step, spec) {
+  const trailingPlusIsKey = step.length > 2 && step.endsWith("++");
+  const body = trailingPlusIsKey ? step.slice(0, -1) : step;
+  const parts = step === "+" ? ["+"] : body.split("+").filter(Boolean);
+  let mod = false;
+  let ctrl = false;
+  let meta = false;
+  let alt = false;
+  let shift = false;
+  let key;
+  for (const raw of parts) {
+    switch (raw.toLowerCase()) {
+      case "mod":
+        mod = true;
+        break;
+      case "ctrl":
+      case "control":
+        ctrl = true;
+        break;
+      case "meta":
+      case "cmd":
+      case "command":
+        meta = true;
+        break;
+      case "alt":
+      case "option":
+        alt = true;
+        break;
+      case "shift":
+        shift = true;
+        break;
+      case "space":
+        key = " ";
+        break;
+      default:
+        if (key !== void 0) {
+          throw new Error(
+            `Shortcut step "${step}" names two keys ("${key}" and "${raw}") in ${JSON.stringify(spec)}`
+          );
+        }
+        key = raw;
+    }
+  }
+  if (trailingPlusIsKey) {
+    if (key !== void 0) {
+      throw new Error(
+        `Shortcut step has more than one key: ${JSON.stringify(step)} in ${JSON.stringify(spec)}`
+      );
+    }
+    key = "+";
+  }
+  if (key === void 0) {
+    throw new Error(
+      `Shortcut step "${step}" names modifiers but no key, in ${JSON.stringify(spec)}`
+    );
+  }
+  return { key: normalizeKey(key), mod, ctrl, meta, alt, shift };
+}
+function chordMatches(chord, key, state, isApple) {
+  if (normalizeKey(key) !== chord.key) return false;
+  const wantsCtrl = chord.ctrl || chord.mod && !isApple;
+  const wantsMeta = chord.meta || chord.mod && isApple;
+  if (state.metaKey !== wantsMeta) return false;
+  const altGraph = state.getModifierState?.("AltGraph") ?? false;
+  const synthetic = altGraph && [...chord.key].length === 1 && !wantsCtrl && !chord.alt;
+  if (!synthetic) {
+    if (state.ctrlKey !== wantsCtrl) return false;
+    if (state.altKey !== chord.alt) return false;
+  }
+  if (shiftIsMeaningful(chord.key) && state.shiftKey !== chord.shift)
+    return false;
+  return true;
+}
+function detectApplePlatform() {
+  if (typeof navigator === "undefined") return false;
+  const candidate = navigator;
+  const platform = candidate.userAgentData?.platform ?? navigator.platform ?? "";
+  return /mac|iphone|ipad|ipod/i.test(platform);
+}
+
+// src/lib/shortcuts/manager.ts
+var DEFAULT_SEQUENCE_TIMEOUT_MS = 1e3;
+function signature(event) {
+  return event.code || event.key;
+}
+function eventTarget(event) {
+  const path = event.composedPath?.();
+  return path && path.length > 0 ? path[0] ?? null : event.target;
+}
+function asElement(target) {
+  if (target === null || typeof target !== "object") return null;
+  const node = target;
+  if (node.nodeType !== 1 || typeof node.tagName !== "string") return null;
+  return target;
+}
+function inputType(element) {
+  if (element.tagName !== "INPUT") return "";
+  const value = element.type;
+  return typeof value === "string" ? value.toLowerCase() : "";
+}
+function controlOwnsKey(target, event) {
+  if (event.ctrlKey || event.metaKey || event.altKey) return false;
+  const element = asElement(target);
+  if (!element) return false;
+  const tag = element.tagName;
+  const type = inputType(element);
+  if (tag === "BUTTON" || type === "button" || type === "submit" || type === "reset" || type === "image") {
+    return event.key === " " || event.key === "Enter";
+  }
+  if (tag === "A" && element.getAttribute("href") !== null) {
+    return event.key === "Enter";
+  }
+  if (tag === "SUMMARY") return event.key === " " || event.key === "Enter";
+  if (type === "checkbox") return event.key === " ";
+  if (type === "color") return event.key === " " || event.key === "Enter";
+  if (type === "file") return event.key === " " || event.key === "Enter";
+  if (type === "range") {
+    return event.key.startsWith("Arrow") || RANGE_KEYS.has(event.key);
+  }
+  if (type === "radio") {
+    return event.key === " " || event.key.startsWith("Arrow");
+  }
+  return false;
+}
+function isTypingTarget(target) {
+  const element = asElement(target);
+  if (!element) return false;
+  if (element.isContentEditable) return true;
+  const tag = element.tagName;
+  if (tag === "TEXTAREA") return true;
+  if (tag === "SELECT") return true;
+  if (tag === "INPUT") {
+    return !NON_TEXT_INPUT_TYPES.has(inputType(element));
+  }
+  const role = element.getAttribute("role");
+  return role !== null && TYPE_AHEAD_ROLES.has(role);
+}
+var NON_TEXT_INPUT_TYPES = /* @__PURE__ */ new Set([
+  "button",
+  "checkbox",
+  "color",
+  "file",
+  "hidden",
+  "image",
+  "radio",
+  "range",
+  "reset",
+  "submit"
+]);
+function firesWhileTyping(prepared) {
+  const explicit = prepared.binding.whenTyping;
+  if (explicit !== void 0) return explicit;
+  const first = prepared.keys[0];
+  if (first === void 0) return false;
+  return first.mod || first.ctrl || first.meta || first.alt || first.key === "Escape";
+}
+function createShortcutManager(options = {}) {
+  const isApple = options.isApple ?? detectApplePlatform();
+  const sequenceTimeoutMs = options.sequenceTimeoutMs ?? DEFAULT_SEQUENCE_TIMEOUT_MS;
+  const now = options.now ?? (() => Date.now());
+  const layers = /* @__PURE__ */ new Set();
+  let nextSequence = 0;
+  let pendingAt = null;
+  let pendingLayer = null;
+  const consumedPresses = /* @__PURE__ */ new Map();
+  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}`;
+  }
+  function blocking() {
+    return ordered().some((layer) => layer.options.blocking === true);
+  }
+  function abandonSequence() {
+    pendingAt = null;
+    pressedEvents.length = 0;
+    pendingLayer = null;
+    pendingKey = null;
+  }
+  function prepare(bindings) {
+    return bindings.map((binding) => ({
+      binding,
+      keys: parseKeys(binding.keys)
+    }));
+  }
+  function ordered() {
+    return [...layers].filter((layer) => layer.options.enabled !== false).sort(
+      (a, b) => b.options.depth - a.options.depth || b.sequence - a.sequence
+    );
+  }
+  function matchDepth(prepared, pressed) {
+    if (pressed.length > prepared.keys.length) return "none";
+    for (let i = 0; i < pressed.length; i++) {
+      const chord = prepared.keys[i];
+      const event = pressed[i];
+      if (chord === void 0 || event === void 0) return "none";
+      if (!chordMatches(chord, event.key, event, isApple)) return "none";
+    }
+    return pressed.length === prepared.keys.length ? "exact" : "prefix";
+  }
+  function fire(prepared, event, invoke) {
+    if (prepared.binding.preventDefault !== false) event.preventDefault();
+    if (invoke) prepared.binding.run(event);
+  }
+  function insertsText(event, typing) {
+    if (event.key === "Tab")
+      return !event.ctrlKey && !event.metaKey && !event.altKey;
+    if (!typing) return false;
+    const altGraph = event.getModifierState?.("AltGraph") ?? false;
+    if (!altGraph && (event.ctrlKey || event.metaKey)) {
+      const letter = event.key.length === 1 ? event.key.toLowerCase() : event.key;
+      if (letter === "z" && event.shiftKey) return !event.altKey;
+      if (letter === REDO_LETTER)
+        return !isApple && !event.shiftKey && !event.altKey;
+      if (EDITING_NAVIGATION.has(event.key)) return !event.altKey || isApple;
+      if (event.shiftKey || event.altKey) return false;
+      return EDITING_LETTERS.has(letter);
+    }
+    if (!altGraph && event.altKey) {
+      if ((event.key === "ArrowDown" || event.key === "ArrowUp") && asElement(eventTarget(event))?.tagName === "SELECT") {
+        return true;
+      }
+      if (!isApple) return false;
+      if (EDITING_NAVIGATION.has(event.key)) return true;
+    }
+    if (event.key === "Dead" || event.key === "Process") return true;
+    if ([...event.key].length === 1) return true;
+    if (AMBIGUOUS_KEYS.has(event.key)) return targetOwnsAmbiguousKey(event);
+    return FIELD_KEYS.has(event.key);
+  }
+  function offer(pressed, event, typing, invoke) {
+    for (const layer of ordered()) {
+      const mayMatch = pressed.length <= 1 || pendingLayer === null || layer === pendingLayer;
+      if (mayMatch) {
+        let prefixed = false;
+        for (const prepared of layer.bindings) {
+          if (typing && !firesWhileTyping(prepared)) continue;
+          if (prepared.binding.when && !prepared.binding.when()) continue;
+          const depth = matchDepth(prepared, pressed);
+          if (depth === "exact") {
+            fire(prepared, event, invoke);
+            return "fired";
+          }
+          if (depth === "prefix") prefixed = true;
+        }
+        if (prefixed) {
+          pendingLayer = layer;
+          event.preventDefault();
+          return "pending";
+        }
+      }
+      if (layer.options.blocking) return "blocked";
+    }
+    return "none";
+  }
+  function warnOnPrefixConflicts(prepared, layerName) {
+    const resolved = (chord) => {
+      const ctrl = chord.ctrl || chord.mod && !isApple;
+      const meta = chord.meta || chord.mod && isApple;
+      const shift = shiftIsMeaningful(chord.key) ? chord.shift : false;
+      return `${chord.key}\0${ctrl}${meta}${chord.alt}${shift}`;
+    };
+    const sameChord = (a, b) => resolved(a) === resolved(b);
+    for (const short of prepared) {
+      for (const long of prepared) {
+        if (short === long || short.keys.length >= long.keys.length) continue;
+        if (short.binding.when !== void 0) continue;
+        if (!firesWhileTyping(short) && firesWhileTyping(long)) continue;
+        if (short.keys.every((chord, i) => sameChord(chord, long.keys[i]))) {
+          devWarnOnce(
+            false,
+            `shortcuts: in layer "${layerName}", "${short.binding.keys}" is a prefix of "${long.binding.keys}", so the longer one can never fire. Bind one or the other.`
+          );
+        }
+      }
+    }
+  }
+  const watchers = /* @__PURE__ */ new Set();
+  let snapshot = null;
+  function computeSnapshot() {
+    return ordered().flatMap(
+      (layer) => layer.bindings.map((prepared) => ({
+        keys: prepared.binding.keys,
+        description: prepared.binding.description,
+        layer: layer.options.name
+      }))
+    );
+  }
+  function sameShortcuts(a, b) {
+    return a.length === b.length && a.every(
+      (entry, index) => entry.keys === b[index]?.keys && entry.description === b[index]?.description && entry.layer === b[index]?.layer
+    );
+  }
+  function changed() {
+    const previous = snapshot;
+    snapshot = null;
+    if (watchers.size === 0) return;
+    const next = computeSnapshot();
+    if (previous && sameShortcuts(previous, next)) {
+      snapshot = previous;
+      return;
+    }
+    snapshot = next;
+    for (const watcher of watchers) watcher();
+  }
+  const pressedEvents = [];
+  function runOffer(pressed, event, typing) {
+    try {
+      return offer(pressed, event, typing, true);
+    } catch (error) {
+      abandonSequence();
+      consumedPresses.delete(signature(event));
+      throw error;
+    }
+  }
+  function handle(event) {
+    if (typeof event.key !== "string") return false;
+    if (event.defaultPrevented) {
+      abandonSequence();
+      return true;
+    }
+    if (event.isComposing) {
+      abandonSequence();
+      return true;
+    }
+    if (MODIFIER_KEYS.has(event.key)) return blocking();
+    if (controlOwnsKey(eventTarget(event), event)) {
+      abandonSequence();
+      return true;
+    }
+    const typing = isTypingTarget(eventTarget(event));
+    if (event.repeat) {
+      if (pendingKey !== signature(event)) {
+        abandonSequence();
+      }
+      const held = consumedPresses.get(signature(event));
+      if (held) {
+        if (held.prevented) {
+          event.preventDefault();
+        } else {
+          const still = offer([event], event, typing, false);
+          if (still !== "fired" && !insertsText(event, typing)) {
+            event.preventDefault();
+          }
+        }
+        return true;
+      }
+      const repeated = offer([event], event, typing, false);
+      if (repeated === "blocked" && !insertsText(event, typing)) {
+        event.preventDefault();
+      }
+      return repeated !== "none";
+    }
+    if (pendingAt !== null && now() - pendingAt > sequenceTimeoutMs) {
+      abandonSequence();
+    }
+    pressedEvents.push(event);
+    let outcome = runOffer(pressedEvents, event, typing);
+    if (pressedEvents.length > 1 && (outcome === "none" || outcome === "blocked")) {
+      abandonSequence();
+      pressedEvents.push(event);
+      outcome = runOffer(pressedEvents, event, typing);
+    }
+    if (outcome === "pending") {
+      pendingAt = now();
+      pendingKey = signature(event);
+      consumedPresses.set(signature(event), {
+        prevented: event.defaultPrevented
+      });
+      return true;
+    }
+    abandonSequence();
+    if (outcome === "blocked") {
+      if (!insertsText(event, typing)) event.preventDefault();
+    }
+    const consumed = outcome === "fired" || outcome === "blocked";
+    if (consumed) {
+      consumedPresses.set(signature(event), {
+        prevented: event.defaultPrevented
+      });
+    } else {
+      consumedPresses.delete(signature(event));
+    }
+    return consumed;
+  }
+  return {
+    register(bindings, layerOptions) {
+      const prepared = prepare(bindings);
+      const layer = {
+        options: layerOptions,
+        bindings: prepared,
+        sequence: nextSequence++,
+        shape: layerShape(prepared, layerOptions)
+      };
+      warnOnPrefixConflicts(layer.bindings, layerOptions.name);
+      layers.add(layer);
+      changed();
+      return {
+        update(nextBindings, nextOptions) {
+          layer.bindings = prepare(nextBindings);
+          layer.options = nextOptions;
+          warnOnPrefixConflicts(layer.bindings, nextOptions.name);
+          const shape = layerShape(layer.bindings, nextOptions);
+          const shapeChanged = shape !== layer.shape;
+          layer.shape = shape;
+          if (shapeChanged && pendingLayer === layer) abandonSequence();
+          changed();
+        },
+        dispose() {
+          layers.delete(layer);
+          changed();
+          if (pendingLayer === layer) abandonSequence();
+        }
+      };
+    },
+    handle,
+    attach(target) {
+      const listener = (event) => {
+        try {
+          if (handle(event)) event.stopPropagation();
+        } catch (error) {
+          event.stopPropagation();
+          throw error;
+        }
+      };
+      target.addEventListener("keydown", listener);
+      return () => {
+        target.removeEventListener("keydown", listener);
+        abandonSequence();
+        consumedPresses.clear();
+      };
+    },
+    subscribe(onChange) {
+      watchers.add(onChange);
+      return () => {
+        watchers.delete(onChange);
+      };
+    },
+    activeBindings() {
+      if (snapshot) return snapshot;
+      snapshot = computeSnapshot();
+      return snapshot;
+    }
+  };
+}
+var MODIFIER_KEYS = /* @__PURE__ */ new Set([
+  "Control",
+  "Meta",
+  "Alt",
+  "Shift",
+  // A dedicated AltGraph key reports its own keydown before the character-producing one. Without
+  // it here, pressing AltGraph mid-sequence abandons the sequence before the character that would
+  // have completed it ever arrives.
+  "AltGraph"
+]);
+var TYPE_AHEAD_ROLES = /* @__PURE__ */ new Set([
+  "textbox",
+  "combobox",
+  "listbox",
+  // The focused element inside an open listbox is the OPTION, and it is what the event reports;
+  // the listbox itself is only its ancestor.
+  "option",
+  "menu",
+  "menuitem",
+  "menuitemcheckbox",
+  "menuitemradio"
+]);
+var RANGE_KEYS = /* @__PURE__ */ new Set(["Home", "End", "PageUp", "PageDown"]);
+var EDITING_LETTERS = /* @__PURE__ */ new Set(["a", "c", "v", "x", "z"]);
+var REDO_LETTER = "y";
+var EDITING_NAVIGATION = /* @__PURE__ */ new Set([
+  "Insert",
+  "ArrowLeft",
+  "ArrowRight",
+  "ArrowUp",
+  "ArrowDown",
+  "Home",
+  "End",
+  "Backspace",
+  "Delete"
+]);
+var AMBIGUOUS_KEYS = /* @__PURE__ */ new Set(["Enter", "PageUp", "PageDown"]);
+function targetOwnsAmbiguousKey(event) {
+  const element = asElement(eventTarget(event));
+  if (element === null) return false;
+  const multiline = element.tagName === "TEXTAREA" || element.isContentEditable;
+  if (event.key === "Enter") return multiline;
+  return multiline || element.tagName === "SELECT";
+}
+var FIELD_KEYS = /* @__PURE__ */ new Set([
+  "Backspace",
+  "Delete",
+  "ArrowUp",
+  "ArrowDown",
+  "ArrowLeft",
+  "ArrowRight",
+  "Home",
+  "End",
+  // Shift+Insert pastes and carries no ctrl or meta, so it arrives here rather than at the
+  // chord branch where Ctrl+Insert is recognised.
+  "Insert",
+  // Tab moves focus, and a blocking layer must NOT take it. The documented case for blocking is
+  // a modal, whose focus trap only calls `preventDefault()` at the first and last tabbable
+  // element — ordinary moves between the controls inside it rely on the browser default.
+  // Suppressing every Tab therefore pinned focus to one control in exactly the situation
+  // blocking exists to serve. A layer that genuinely wants Tab binds it.
+  "Tab"
+]);
+
+// src/lib/shortcuts/react.tsx
+import { jsx as jsx39 } from "react/jsx-runtime";
+var ShortcutContext = React13.createContext(null);
+var ownersByTarget = /* @__PURE__ */ new WeakMap();
+var useIsomorphicLayoutEffect = typeof document === "undefined" ? React13.useEffect : React13.useLayoutEffect;
+function optionsFingerprint(options) {
+  return [
+    options.isApple ?? "auto",
+    options.sequenceTimeoutMs ?? "default",
+    options.now ? "clock" : "no-clock"
+  ].join("\0");
+}
+function ShortcutProvider({
+  children,
+  target,
+  ...managerOptions
+}) {
+  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 = 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;
+    }
+    const existing = ownManagers.current.get(resolvedTarget);
+    if (existing) return existing;
+    const created = createShortcutManager(optionsRef.current);
+    ownManagers.current.set(resolvedTarget, created);
+    return created;
+  }, [resolvedTarget]);
+  let owner = resolvedTarget === null ? null : ownersByTarget.get(resolvedTarget);
+  const fingerprint = optionsFingerprint(optionsRef.current);
+  if (resolvedTarget !== null && (!owner || owner.retired)) {
+    owner = {
+      manager: detached,
+      providers: 0,
+      retired: false,
+      options: fingerprint
+    };
+    ownersByTarget.set(resolvedTarget, owner);
+  }
+  const adoptedDiffers = Boolean(owner) && owner?.options !== fingerprint || nestedOnSameTarget && parent !== null && parent.options !== fingerprint;
+  devWarnOnce(
+    !adoptedDiffers,
+    "ShortcutProvider: another provider is already listening on this target with different options, so the ones passed here are being ignored. Managers are shared per target; give the providers matching options, or a target of their own."
+  );
+  const manager = nestedOnSameTarget && parent ? parent.manager : owner ? owner.manager : detached;
+  useIsomorphicLayoutEffect(() => {
+    if (resolvedTarget === null) return;
+    let entry = ownersByTarget.get(resolvedTarget);
+    if (!entry) {
+      entry = {
+        manager,
+        providers: 0,
+        retired: false,
+        options: optionsFingerprint(optionsRef.current)
+      };
+      ownersByTarget.set(resolvedTarget, entry);
+    }
+    const owned = entry;
+    owned.providers += 1;
+    owned.retired = false;
+    if (owned.providers === 1) {
+      owned.detach = owned.manager.attach(resolvedTarget);
+    }
+    return () => {
+      owned.providers -= 1;
+      if (owned.providers === 0) {
+        owned.detach?.();
+        owned.detach = void 0;
+        owned.retired = true;
+      }
+    };
+  }, [resolvedTarget, manager]);
+  const depth = nestedOnSameTarget && parent ? parent.depth : 0;
+  const value = React13.useMemo(
+    () => ({ manager, depth, target: resolvedTarget, options: fingerprint }),
+    [manager, depth, resolvedTarget, fingerprint]
+  );
+  return /* @__PURE__ */ jsx39(ShortcutContext.Provider, { value, children });
+}
+function ShortcutScope({
+  children
+}) {
+  const parent = React13.useContext(ShortcutContext);
+  if (!parent) {
+    throw new Error("ShortcutScope must be rendered inside a ShortcutProvider");
+  }
+  const value = React13.useMemo(
+    () => ({
+      manager: parent.manager,
+      depth: parent.depth + 1,
+      target: parent.target,
+      // Inherited: a scope raises precedence, it does not build a manager, so the options in force
+      // are still the ones the provider above it used.
+      options: parent.options
+    }),
+    [parent.manager, parent.depth, parent.target, parent.options]
+  );
+  return /* @__PURE__ */ jsx39(ShortcutContext.Provider, { value, children });
+}
+function useShortcuts(bindings, options) {
+  const context = React13.useContext(ShortcutContext);
+  if (!context) {
+    throw new Error("useShortcuts must be called inside a ShortcutProvider");
+  }
+  const { manager, depth } = context;
+  const registration = React13.useRef(null);
+  const latest = React13.useRef({ bindings, options });
+  useIsomorphicLayoutEffect(() => {
+    registration.current = manager.register([], {
+      name: latest.current.options.name,
+      depth
+    });
+    return () => {
+      registration.current?.dispose();
+      registration.current = null;
+    };
+  }, [manager, depth]);
+  useIsomorphicLayoutEffect(() => {
+    latest.current = { bindings, options };
+    registration.current?.update(bindings, {
+      name: options.name,
+      depth,
+      enabled: options.enabled,
+      blocking: options.blocking
+    });
+  });
+}
+function useShortcutManager() {
+  const context = React13.useContext(ShortcutContext);
+  if (!context) {
+    throw new Error(
+      "useShortcutManager must be called inside a ShortcutProvider"
+    );
+  }
+  return context.manager;
+}
+function useActiveShortcuts() {
+  const manager = useShortcutManager();
+  return React13.useSyncExternalStore(
+    manager.subscribe,
+    manager.activeBindings,
+    manager.activeBindings
+  );
+}
 export {
   Accordion,
   AccordionContent,
@@ -2671,6 +3848,7 @@ export {
   Collapsible,
   CollapsibleContent2 as CollapsibleContent,
   CollapsibleTrigger2 as CollapsibleTrigger,
+  ColorPicker,
   Command,
   CommandDialog,
   CommandEmpty,
@@ -2755,7 +3933,10 @@ export {
   SheetPortal,
   SheetTitle,
   SheetTrigger,
+  ShortcutProvider,
+  ShortcutScope,
   Skeleton,
+  Slider,
   Spinner,
   Stack,
   Stat,
@@ -2789,13 +3970,18 @@ export {
   badgeVariants,
   buttonVariants,
   cardVariants,
+  createShortcutManager,
   dialogContentVariants,
   inputVariants,
+  parseKeys,
   progressVariants,
   selectTriggerVariants,
   sheetVariants,
   spinnerVariants,
   toast,
-  usePortalContainer
+  useActiveShortcuts,
+  usePortalContainer,
+  useShortcutManager,
+  useShortcuts
 };
 //# sourceMappingURL=index.mjs.map