@nextlyhq/ui 0.0.2-alpha.60 → 0.0.2-alpha.64

package/dist/index.mjs

@@ -998,15 +998,23 @@ var tabsListVariants = cva8(
     defaultVariants: { variant: "default" }
   }
 );
-var TabsList = forwardRef15(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx20(
-  List,
-  {
-    ref,
-    "data-slot": "tabs-list",
-    className: cn(tabsListVariants({ variant }), className),
-    ...props
-  }
-));
+var TabsList = forwardRef15(({ className, variant, scrollable = false, ...props }, ref) => {
+  const list = /* @__PURE__ */ jsx20(
+    List,
+    {
+      ref,
+      "data-slot": "tabs-list",
+      className: cn(
+        tabsListVariants({ variant }),
+        scrollable && "w-max min-w-full",
+        className
+      ),
+      ...props
+    }
+  );
+  if (!scrollable) return list;
+  return /* @__PURE__ */ jsx20("div", { "data-slot": "tabs-list-scroller", className: "w-full overflow-x-auto", children: list });
+});
 TabsList.displayName = List.displayName;
 var TABS_TRIGGER_SIZES = {
   default: "text-sm",
@@ -1657,6 +1665,7 @@ var SheetPortal = DialogPrimitive2.Portal;
 var SheetOverlay = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
   DialogPrimitive2.Overlay,
   {
+    "data-slot": "sheet-overlay",
     className: cn(
       // A modal scrim, from the `--nx-overlay` token rather than a surface
       // token. A black wash is the point — painting it from `background` would
@@ -1756,7 +1765,11 @@ SheetDescription.displayName = DialogPrimitive2.Description.displayName;
 
 // src/components/command.tsx
 import * as DialogPrimitive3 from "@radix-ui/react-dialog";
-import { Command as CommandPrimitive, defaultFilter } from "cmdk";
+import {
+  Command as CommandPrimitive,
+  defaultFilter,
+  useCommandState as useCommandStatePrimitive
+} from "cmdk";
 import { Search } from "lucide-react";
 import { forwardRef as forwardRef22 } from "react";
 import { jsx as jsx27, jsxs as jsxs9 } from "react/jsx-runtime";
@@ -1983,6 +1996,7 @@ var CommandShortcut = forwardRef22(
 );
 CommandShortcut.displayName = "CommandShortcut";
 var commandDefaultFilter = defaultFilter;
+var useCommandHighlight = () => useCommandStatePrimitive((state) => state.value);
 
 // src/components/spinner.tsx
 import { cva as cva12 } from "class-variance-authority";
@@ -2257,7 +2271,7 @@ TableSkeleton.displayName = "TableSkeleton";
 
 // src/components/color-picker.tsx
 import { Pipette } from "lucide-react";
-import * as React9 from "react";
+import * as React10 from "react";
 
 // src/lib/color/convert.ts
 var clamp01 = (n) => n < 0 ? 0 : n > 1 ? 1 : n;
@@ -2362,6 +2376,10 @@ function hueSliderValue(hue, max) {
   return step > max ? max : step;
 }
 
+// src/lib/isomorphic-layout-effect.ts
+import * as React9 from "react";
+var useIsomorphicLayoutEffect = typeof document === "undefined" ? React9.useEffect : React9.useLayoutEffect;
+
 // src/components/color-picker.tsx
 import { Fragment as Fragment2, jsx as jsx34, jsxs as jsxs13 } from "react/jsx-runtime";
 function toHsva(hex) {
@@ -2383,6 +2401,9 @@ var CHECKERBOARD = "repeating-conic-gradient(#c8c8c8 0% 25%, #ffffff 0% 50%)";
 function eyeDropperSupported() {
   return typeof window !== "undefined" && "EyeDropper" in window;
 }
+function isNode(value) {
+  return value !== null && typeof value.nodeType === "number";
+}
 function ColorPicker({
   color,
   onColorChange,
@@ -2392,20 +2413,100 @@ function ColorPicker({
   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 fieldId = React10.useId();
+  const rootRef = React10.useRef(null);
+  const insidePress = React10.useRef(false);
+  const owedFinish = React10.useRef(false);
+  const pendingTap = React10.useRef(null);
+  const latestCommit = React10.useRef(() => void 0);
+  const surfaceRef = React10.useRef(null);
+  const [hsva, setHsva] = React10.useState(() => toHsva(color));
+  const [draftHex, setDraftHex] = React10.useState(null);
+  const draftRef = React10.useRef(null);
   const rendered = toHexString(hsva, showAlpha);
-  React9.useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const incoming = parseHex(color);
     if (incoming && toHex(incoming, showAlpha ? incoming.alpha : 1) !== rendered) {
+      dropDraft();
       setHsva((prev) => hsvaFrom(incoming, incoming.alpha, prev.h));
     }
   }, [color, rendered, showAlpha]);
+  const dropDraft = () => {
+    owedFinish.current = false;
+    draftRef.current = null;
+    setDraftHex(null);
+  };
+  const commitDraft = () => {
+    owedFinish.current = false;
+    const text = draftRef.current;
+    draftRef.current = null;
+    if (text === null) return;
+    setDraftHex(null);
+    const parsed = parseHex(text);
+    if (!parsed) return;
+    setHsva((prev) => hsvaFrom(parsed, parsed.alpha, prev.h));
+    onColorChange(toHex(parsed, showAlpha ? parsed.alpha : 1));
+  };
+  useIsomorphicLayoutEffect(() => {
+    const root = rootRef.current;
+    if (root === null) return;
+    latestCommit.current = commitDraft;
+    const onPointerDown = (event) => {
+      pendingTap.current?.();
+      pendingTap.current = null;
+      const path = typeof event.composedPath === "function" ? event.composedPath() : [];
+      const inside = path.includes(root) || isNode(event.target) && root.contains(event.target);
+      insidePress.current = true;
+      if (inside) return;
+      const pointerType = event.pointerType;
+      if (pointerType === "touch") {
+        const onClick = () => {
+          owner.removeEventListener("click", onClick, true);
+          pendingTap.current = null;
+          latestCommit.current();
+        };
+        owner.addEventListener("click", onClick, true);
+        pendingTap.current = () => {
+          owner.removeEventListener("click", onClick, true);
+        };
+        return;
+      }
+      commitDraft();
+    };
+    const owner = root.ownerDocument;
+    const onPointerCancel = () => {
+      insidePress.current = false;
+      pendingTap.current?.();
+      pendingTap.current = null;
+    };
+    const onPointerUp = () => {
+      insidePress.current = false;
+    };
+    const onClickResolve = () => {
+      if (!owedFinish.current) return;
+      latestCommit.current();
+    };
+    owner.addEventListener("pointerdown", onPointerDown, true);
+    owner.addEventListener("pointercancel", onPointerCancel, true);
+    owner.addEventListener("pointerup", onPointerUp, true);
+    owner.addEventListener("click", onClickResolve, false);
+    return () => {
+      owner.removeEventListener("pointerdown", onPointerDown, true);
+      owner.removeEventListener("pointercancel", onPointerCancel, true);
+      owner.removeEventListener("pointerup", onPointerUp, true);
+      owner.removeEventListener("click", onClickResolve, false);
+    };
+  });
+  useIsomorphicLayoutEffect(
+    () => () => {
+      pendingTap.current?.();
+      pendingTap.current = null;
+    },
+    []
+  );
   const commit = (next) => {
     setHsva(next);
-    setDraftHex(null);
+    dropDraft();
     onColorChange(toHexString(next, showAlpha));
   };
   const trackPointer = (event) => {
@@ -2435,8 +2536,8 @@ function ColorPicker({
     event.preventDefault();
     nudge(move[0], move[1]);
   };
-  const [canPickFromScreen, setCanPickFromScreen] = React9.useState(false);
-  React9.useEffect(() => {
+  const [canPickFromScreen, setCanPickFromScreen] = React10.useState(false);
+  React10.useEffect(() => {
     setCanPickFromScreen(eyeDropperSupported());
   }, []);
   const handle = surfacePointFor(hsva.s, hsva.v);
@@ -2444,163 +2545,187 @@ function ColorPicker({
   const pickFromScreen = async () => {
     const ctor = window.EyeDropper;
     if (!ctor) return;
+    const owed = owedFinish.current;
+    owedFinish.current = false;
     let sampled;
     try {
       sampled = (await new ctor().open()).sRGBHex;
     } catch {
+      if (owed) commitDraft();
       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)"
+  return /* @__PURE__ */ jsxs13(
+    "div",
+    {
+      ref: rootRef,
+      className: cn("w-64 space-y-3", className),
+      onBlur: (event) => {
+        const next = event.relatedTarget;
+        const root = rootRef.current;
+        if (root !== null && isNode(next) && root.contains(next)) return;
+        if (next === null && insidePress.current) {
+          owedFinish.current = true;
+          return;
         }
-      }
-    ),
-    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"
+        commitDraft();
+      },
+      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__ */ 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));
+        ),
+        /* @__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)"
             }
-          },
-          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
-      )) })
-    ] })
-  ] });
+        ),
+        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) => {
+                draftRef.current = event.target.value;
+                setDraftHex(event.target.value);
+              },
+              onKeyDown: (event) => {
+                if (event.key !== "Enter") return;
+                if (event.nativeEvent.isComposing || event.keyCode === 229) return;
+                event.preventDefault();
+                commitDraft();
+              }
+            }
+          ),
+          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: () => {
+                if (onSwatchSelect === void 0) return;
+                dropDraft();
+                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 React10 from "react";
+import * as React11 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]";
@@ -2609,7 +2734,7 @@ var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
 var ContextMenuGroup = ContextMenuPrimitive.Group;
 var ContextMenuSub = ContextMenuPrimitive.Sub;
 var ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
-var ContextMenuSubTrigger = React10.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs14(
+var ContextMenuSubTrigger = React11.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs14(
   ContextMenuPrimitive.SubTrigger,
   {
     ref,
@@ -2627,7 +2752,7 @@ var ContextMenuSubTrigger = React10.forwardRef(({ className, inset, children, ..
   }
 ));
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
-var ContextMenuSubContent = React10.forwardRef(({ className, ...props }, ref) => {
+var ContextMenuSubContent = React11.forwardRef(({ className, ...props }, ref) => {
   const portalContainer = usePortalContainer();
   return /* @__PURE__ */ jsx35(ContextMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx35(
     ContextMenuPrimitive.SubContent,
@@ -2639,7 +2764,7 @@ var ContextMenuSubContent = React10.forwardRef(({ className, ...props }, ref) =>
   ) });
 });
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
-var ContextMenuContent = React10.forwardRef(({ className, ...props }, ref) => {
+var ContextMenuContent = React11.forwardRef(({ className, ...props }, ref) => {
   const portalContainer = usePortalContainer();
   return /* @__PURE__ */ jsx35(ContextMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx35(
     ContextMenuPrimitive.Content,
@@ -2651,7 +2776,7 @@ var ContextMenuContent = React10.forwardRef(({ className, ...props }, ref) => {
   ) });
 });
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
-var ContextMenuItem = React10.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx35(
+var ContextMenuItem = React11.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx35(
   ContextMenuPrimitive.Item,
   {
     ref,
@@ -2665,7 +2790,7 @@ var ContextMenuItem = React10.forwardRef(({ className, inset, ...props }, ref) =
   }
 ));
 ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
-var ContextMenuCheckboxItem = React10.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs14(
+var ContextMenuCheckboxItem = React11.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs14(
   ContextMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -2683,7 +2808,7 @@ var ContextMenuCheckboxItem = React10.forwardRef(({ className, children, checked
   }
 ));
 ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
-var ContextMenuRadioItem = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs14(
+var ContextMenuRadioItem = React11.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs14(
   ContextMenuPrimitive.RadioItem,
   {
     ref,
@@ -2700,7 +2825,7 @@ var ContextMenuRadioItem = React10.forwardRef(({ className, children, ...props }
   }
 ));
 ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
-var ContextMenuLabel = React10.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx35(
+var ContextMenuLabel = React11.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx35(
   ContextMenuPrimitive.Label,
   {
     ref,
@@ -2713,7 +2838,7 @@ var ContextMenuLabel = React10.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
-var ContextMenuSeparator = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx35(
+var ContextMenuSeparator = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx35(
   ContextMenuPrimitive.Separator,
   {
     ref,
@@ -2786,7 +2911,7 @@ var ResizableHandle = ({
 // src/components/tree-view.tsx
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { ChevronRight as ChevronRight3 } from "lucide-react";
-import * as React11 from "react";
+import * as React12 from "react";
 import { jsx as jsx37, jsxs as jsxs16 } from "react/jsx-runtime";
 var ROW_HEIGHT = 28;
 var INDENT_PER_LEVEL = 12;
@@ -2828,19 +2953,28 @@ function flatten(nodes, expanded) {
   return rows;
 }
 function useControllable(controlled, fallback) {
-  const [uncontrolled, setUncontrolled] = React11.useState(fallback);
+  const [uncontrolled, setUncontrolled] = React12.useState(fallback);
   return [
     controlled === void 0 ? uncontrolled : controlled,
     setUncontrolled
   ];
 }
-var TreeView = React11.forwardRef(
+function treeSelectionMode(modifiers) {
+  if (modifiers.shiftKey) return "extend";
+  if (modifiers.metaKey || modifiers.ctrlKey) return "toggle";
+  return "replace";
+}
+function isRowSelected(id, primary, selectedIds) {
+  return selectedIds === void 0 ? primary === id : selectedIds.includes(id);
+}
+var TreeView = React12.forwardRef(
   ({
     nodes,
     expandedIds,
     defaultExpandedIds,
     onExpandedChange,
     selectedId,
+    selectedIds,
     defaultSelectedId,
     onSelectedChange,
     className,
@@ -2849,8 +2983,8 @@ var TreeView = React11.forwardRef(
     "aria-describedby": ariaDescribedBy,
     ...props
   }, forwardedRef) => {
-    const scrollRef = React11.useRef(null);
-    const attachScroll = React11.useCallback(
+    const scrollRef = React12.useRef(null);
+    const attachScroll = React12.useCallback(
       (node) => {
         scrollRef.current = node;
         if (typeof forwardedRef === "function") forwardedRef(node);
@@ -2864,7 +2998,7 @@ var TreeView = React11.forwardRef(
       expandedIds === void 0 ? void 0 : [...expandedIds],
       [...defaultExpandedIds ?? []]
     );
-    const expanded = React11.useMemo(
+    const expanded = React12.useMemo(
       () => new Set(expandedIds ?? expandedState),
       [expandedIds, expandedState]
     );
@@ -2872,11 +3006,11 @@ var TreeView = React11.forwardRef(
       selectedId === void 0 ? void 0 : selectedId,
       defaultSelectedId ?? null
     );
-    const rows = React11.useMemo(
+    const rows = React12.useMemo(
       () => flatten(nodes, expanded),
       [nodes, expanded]
     );
-    const [activeId, setActiveId] = React11.useState(null);
+    const [activeId, setActiveId] = React12.useState(null);
     const activeIndex = Math.max(
       0,
       rows.findIndex((row) => row.node.id === (activeId ?? selected))
@@ -2898,9 +3032,9 @@ var TreeView = React11.forwardRef(
       else next.delete(id);
       commitExpanded(next);
     };
-    const choose = (id) => {
+    const choose = (id, mode = "replace") => {
       if (selectedId === void 0) setSelected(id);
-      onSelectedChange?.(id);
+      onSelectedChange?.(id, mode);
     };
     const focusRow = (index) => {
       const row = rows[index];
@@ -2920,11 +3054,12 @@ var TreeView = React11.forwardRef(
       }
       return from;
     };
-    const typeahead = React11.useRef({ query: "", at: 0 });
+    const typeahead = React12.useRef({ query: "", at: 0 });
     const onKeyDown = (event) => {
       const index = activeIndex;
       const row = rows[index];
       if (row === void 0) return;
+      if (event.altKey) return;
       switch (event.key) {
         case "ArrowDown":
           event.preventDefault();
@@ -2979,7 +3114,9 @@ var TreeView = React11.forwardRef(
         case "Enter":
         case " ":
           event.preventDefault();
-          if (row.node.disabled !== true) choose(row.node.id);
+          if (row.node.disabled !== true) {
+            choose(row.node.id, treeSelectionMode(event));
+          }
           return;
         case "*": {
           event.preventDefault();
@@ -3027,6 +3164,7 @@ var TreeView = React11.forwardRef(
           "div",
           {
             role: "tree",
+            "aria-multiselectable": selectedIds === void 0 ? void 0 : true,
             "aria-label": ariaLabel,
             "aria-labelledby": ariaLabelledBy,
             "aria-describedby": ariaDescribedBy,
@@ -3035,7 +3173,12 @@ var TreeView = React11.forwardRef(
             children: virtualItems.map((item) => {
               const row = rows[item.index];
               if (row === void 0) return null;
-              const isSelected = selected === row.node.id;
+              const isSelected = isRowSelected(
+                row.node.id,
+                selected,
+                selectedIds
+              );
+              const isPrimary = selected === row.node.id;
               return /* @__PURE__ */ jsxs16(
                 "div",
                 {
@@ -3049,16 +3192,21 @@ var TreeView = React11.forwardRef(
                   "aria-disabled": row.node.disabled === true ? true : void 0,
                   tabIndex: item.index === tabStopIndex ? 0 : -1,
                   onFocus: () => setActiveId(row.node.id),
-                  onClick: () => {
+                  onClick: (event) => {
                     if (row.node.disabled === true) return;
                     setActiveId(row.node.id);
-                    choose(row.node.id);
+                    choose(row.node.id, treeSelectionMode(event));
                   },
                   className: cn(
                     "absolute left-0 flex w-full select-none items-center gap-1 rounded-sm pr-2 text-sm outline-none",
                     "focus-visible:ring-1 focus-visible:ring-ring",
                     row.node.disabled === true ? "pointer-events-none opacity-50" : "cursor-pointer",
-                    isSelected ? "bg-muted text-foreground" : "hover:bg-muted/50"
+                    isSelected ? "bg-muted text-foreground" : "hover:bg-muted/50",
+                    // WEIGHT, not a second colour. Every row here is selected and
+                    // an action applies to all of them; what a reader needs is
+                    // which one the detail panel describes, and a second colour
+                    // would have to mean a second kind of selected.
+                    isSelected && isPrimary && "font-medium"
                   ),
                   style: {
                     height: item.size,
@@ -3104,7 +3252,7 @@ TreeView.displayName = "TreeView";
 
 // src/components/slider.tsx
 import * as SliderPrimitive from "@radix-ui/react-slider";
-import * as React12 from "react";
+import * as React13 from "react";
 
 // src/lib/dev-warn.ts
 var emitted = /* @__PURE__ */ new Set();
@@ -3130,7 +3278,7 @@ function thumbCount(value, defaultValue) {
 function hasAccessibleName(value) {
   return value !== void 0 && value.trim() !== "";
 }
-var Slider = React12.forwardRef(
+var Slider = React13.forwardRef(
   ({
     className,
     value,
@@ -3141,7 +3289,7 @@ var Slider = React12.forwardRef(
     "aria-labelledby": ariaLabelledBy,
     ...props
   }, ref) => {
-    const initialUncontrolledCount = React12.useRef(
+    const initialUncontrolledCount = React13.useRef(
       thumbCount(void 0, defaultValue)
     ).current;
     const count = value?.length ?? initialUncontrolledCount;
@@ -3255,7 +3403,7 @@ var Slider = React12.forwardRef(
 Slider.displayName = SliderPrimitive.Root.displayName;
 
 // src/lib/shortcuts/react.tsx
-import * as React13 from "react";
+import * as React14 from "react";
 
 // src/lib/shortcuts/key-spec.ts
 function normalizeKey(key) {
@@ -3784,9 +3932,8 @@ var FIELD_KEYS = /* @__PURE__ */ new Set([
 
 // src/lib/shortcuts/react.tsx
 import { jsx as jsx39 } from "react/jsx-runtime";
-var ShortcutContext = React13.createContext(null);
+var ShortcutContext = React14.createContext(null);
 var ownersByTarget = /* @__PURE__ */ new WeakMap();
-var useIsomorphicLayoutEffect = typeof document === "undefined" ? React13.useEffect : React13.useLayoutEffect;
 function optionsFingerprint(options) {
   return [
     options.isApple ?? "auto",
@@ -3799,13 +3946,13 @@ function ShortcutProvider({
   target,
   ...managerOptions
 }) {
-  const parent = React13.useContext(ShortcutContext);
+  const parent = React14.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(() => {
+  const optionsRef = React14.useRef(managerOptions);
+  const ownManagers = React14.useRef(/* @__PURE__ */ new WeakMap());
+  const ownDetached = React14.useRef(null);
+  const detached = React14.useMemo(() => {
     if (resolvedTarget === null) {
       ownDetached.current ??= createShortcutManager(optionsRef.current);
       return ownDetached.current;
@@ -3861,7 +4008,7 @@ function ShortcutProvider({
     };
   }, [resolvedTarget, manager]);
   const depth = nestedOnSameTarget && parent ? parent.depth : 0;
-  const value = React13.useMemo(
+  const value = React14.useMemo(
     () => ({ manager, depth, target: resolvedTarget, options: fingerprint }),
     [manager, depth, resolvedTarget, fingerprint]
   );
@@ -3870,11 +4017,11 @@ function ShortcutProvider({
 function ShortcutScope({
   children
 }) {
-  const parent = React13.useContext(ShortcutContext);
+  const parent = React14.useContext(ShortcutContext);
   if (!parent) {
     throw new Error("ShortcutScope must be rendered inside a ShortcutProvider");
   }
-  const value = React13.useMemo(
+  const value = React14.useMemo(
     () => ({
       manager: parent.manager,
       depth: parent.depth + 1,
@@ -3888,13 +4035,13 @@ function ShortcutScope({
   return /* @__PURE__ */ jsx39(ShortcutContext.Provider, { value, children });
 }
 function useShortcuts(bindings, options) {
-  const context = React13.useContext(ShortcutContext);
+  const context = React14.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 });
+  const registration = React14.useRef(null);
+  const latest = React14.useRef({ bindings, options });
   useIsomorphicLayoutEffect(() => {
     registration.current = manager.register([], {
       name: latest.current.options.name,
@@ -3917,7 +4064,7 @@ function useShortcuts(bindings, options) {
   });
 }
 function useShortcutManager() {
-  const context = React13.useContext(ShortcutContext);
+  const context = React14.useContext(ShortcutContext);
   if (!context) {
     throw new Error(
       "useShortcutManager must be called inside a ShortcutProvider"
@@ -3927,7 +4074,7 @@ function useShortcutManager() {
 }
 function useActiveShortcuts() {
   const manager = useShortcutManager();
-  return React13.useSyncExternalStore(
+  return React14.useSyncExternalStore(
     manager.subscribe,
     manager.activeBindings,
     manager.activeBindings
@@ -4054,29 +4201,12 @@ function FormSection({
       ),
       description ? /* @__PURE__ */ jsx41("p", { className: "text-sm text-muted-foreground", children: description }) : null
     ] }),
-    /* @__PURE__ */ jsx41(Card, { className: "overflow-hidden", children: /* @__PURE__ */ jsx41("div", { className: "divide-y divide-foreground/10 px-6", children }) })
+    /* @__PURE__ */ jsx41(Card, { className: "overflow-hidden", children: /* @__PURE__ */ jsx41("div", { className: "nx-form-section-rows divide-y divide-foreground/10 px-6", children }) })
   ] });
 }
 
-// src/components/form-layout.tsx
-import { cva as cva14 } from "class-variance-authority";
+// src/components/form-actions.tsx
 import { jsx as jsx42, jsxs as jsxs20 } from "react/jsx-runtime";
-var measure = cva14("mx-auto w-full px-6 py-8", {
-  variants: {
-    width: {
-      form: "max-w-[56rem]",
-      wide: "max-w-[72rem]"
-    }
-  },
-  defaultVariants: { width: "form" }
-});
-function FormLayout({
-  width = "form",
-  className,
-  children
-}) {
-  return /* @__PURE__ */ jsx42("div", { className: cn(measure({ width }), className), children });
-}
 function FormActions({ dirty, className, children }) {
   return /* @__PURE__ */ jsxs20(
     "div",
@@ -4099,6 +4229,127 @@ function FormActions({ dirty, className, children }) {
     }
   );
 }
+
+// src/components/page-shell.tsx
+import {
+  createContext as createContext5,
+  forwardRef as forwardRef28,
+  useCallback as useCallback2,
+  useContext as useContext5,
+  useEffect as useEffect4,
+  useRef as useRef5
+} from "react";
+import { jsx as jsx43 } from "react/jsx-runtime";
+function hasBareTextChild(shell) {
+  return Array.from(shell.childNodes).some(
+    (node) => node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== ""
+  );
+}
+var InsideShell = createContext5(false);
+function hasDisplayContentsChild(shell) {
+  return Array.from(shell.children).some(
+    (child) => getComputedStyle(child).display === "contents"
+  );
+}
+var SHELL_MEASURE = {
+  form: "var(--nx-measure-form)",
+  wide: "var(--nx-measure-wide)",
+  full: "100%"
+};
+var PageShell = forwardRef28(
+  ({ width = "form", className, children, style, ...props }, ref) => {
+    const shellRef = useRef5(null);
+    const attachRef = useCallback2(
+      (node) => {
+        shellRef.current = node;
+        if (typeof ref === "function") return ref(node);
+        if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    const nested = useContext5(InsideShell);
+    useEffect4(() => {
+      if (!isDevelopmentRuntime()) return;
+      const shell = shellRef.current;
+      if (!shell) return;
+      devWarnOnce(
+        !nested,
+        "PageShell: an ancestor already renders a PageShell. The two grids each add a pair of gutter tracks, so this page's content is inset twice. Remove this shell, or move the outer one."
+      );
+      const check = () => {
+        devWarnOnce(
+          !hasBareTextChild(shell),
+          "PageShell: a direct child renders as bare text. CSS Grid wraps it in an anonymous grid item, which no selector can reach, so it is placed in the gutter rather than the content column and sits outside the page's measure. Wrap it in an element \u2014 a `<p>`, or the section it belongs to."
+        );
+        devWarnOnce(
+          !hasDisplayContentsChild(shell),
+          "PageShell: a direct child has `display: contents`, so it generates no grid item and the content-column rule has nothing to apply to. Its own children are promoted into this grid, match no selector, and are placed from the gutter onward. Give the child a box, or move `display: contents` inside it."
+        );
+      };
+      check();
+      const observer = new MutationObserver(check);
+      observer.observe(shell, { childList: true });
+      return () => {
+        observer.disconnect();
+      };
+    });
+    const shellStyle = {
+      ...style,
+      "--nx-shell-measure": SHELL_MEASURE[width]
+    };
+    return /* @__PURE__ */ jsx43(InsideShell.Provider, { value: true, children: /* @__PURE__ */ jsx43(
+      "div",
+      {
+        ref: attachRef,
+        "data-slot": "page-shell",
+        style: shellStyle,
+        className: cn("nx-page-shell py-8", className),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+PageShell.displayName = "PageShell";
+var Bleed = forwardRef28(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx43(
+    "div",
+    {
+      ref,
+      "data-slot": "bleed",
+      className: cn("nx-bleed", className),
+      ...props,
+      children
+    }
+  )
+);
+Bleed.displayName = "Bleed";
+
+// src/components/page-header.tsx
+import { forwardRef as forwardRef29 } from "react";
+import { jsx as jsx44, jsxs as jsxs21 } from "react/jsx-runtime";
+var PageHeader = forwardRef29(
+  ({ title, description, breadcrumbs, actions, className, ...props }, ref) => /* @__PURE__ */ jsxs21(
+    "header",
+    {
+      ref,
+      "data-slot": "page-header",
+      className: cn("mb-8", className),
+      ...props,
+      children: [
+        breadcrumbs ? /* @__PURE__ */ jsx44("div", { className: "mb-6", children: breadcrumbs }) : null,
+        /* @__PURE__ */ jsxs21("div", { className: "flex flex-col justify-between gap-4 sm:flex-row sm:items-center", children: [
+          /* @__PURE__ */ jsxs21("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsx44("h1", { className: "text-xl font-semibold tracking-tight", children: title }),
+            description ? /* @__PURE__ */ jsx44("p", { className: "mt-1 text-sm font-normal text-muted-foreground", children: description }) : null
+          ] }),
+          actions ? /* @__PURE__ */ jsx44("div", { className: "flex items-center gap-3", children: actions }) : null
+        ] })
+      ]
+    }
+  )
+);
+PageHeader.displayName = "PageHeader";
 export {
   Accordion,
   AccordionContent,
@@ -4122,6 +4373,7 @@ export {
   AvatarFallback,
   AvatarImage,
   Badge,
+  Bleed,
   Button,
   Card,
   CardAction,
@@ -4186,11 +4438,12 @@ export {
   FieldShell,
   FormActions,
   FormLabelWithTooltip,
-  FormLayout,
   FormSection,
   Grid,
   Input,
   Label,
+  PageHeader,
+  PageShell,
   Popover,
   PopoverAnchor,
   PopoverContent,
@@ -4202,6 +4455,7 @@ export {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
+  SHELL_MEASURE,
   Select,
   SelectContent,
   SelectGroup,
@@ -4260,8 +4514,10 @@ export {
   badgeVariants,
   buttonVariants,
   cardVariants,
+  chordMatches,
   commandDefaultFilter,
   createShortcutManager,
+  detectApplePlatform,
   dialogContentVariants,
   inputVariants,
   parseKeys,
@@ -4271,6 +4527,8 @@ export {
   spinnerVariants,
   toast,
   useActiveShortcuts,
+  useCommandHighlight,
+  useIsomorphicLayoutEffect,
   usePortalContainer,
   useShortcutManager,
   useShortcuts