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

package/dist/index.cjs

@@ -53,6 +53,7 @@ __export(src_exports, {
   AvatarFallback: () => AvatarFallback,
   AvatarImage: () => AvatarImage,
   Badge: () => Badge,
+  Bleed: () => Bleed,
   Button: () => Button,
   Card: () => Card,
   CardAction: () => CardAction,
@@ -117,11 +118,12 @@ __export(src_exports, {
   FieldShell: () => FieldShell,
   FormActions: () => FormActions,
   FormLabelWithTooltip: () => FormLabelWithTooltip,
-  FormLayout: () => FormLayout,
   FormSection: () => FormSection,
   Grid: () => Grid,
   Input: () => Input,
   Label: () => Label,
+  PageHeader: () => PageHeader,
+  PageShell: () => PageShell,
   Popover: () => Popover,
   PopoverAnchor: () => PopoverAnchor,
   PopoverContent: () => PopoverContent,
@@ -133,6 +135,7 @@ __export(src_exports, {
   ResizableHandle: () => ResizableHandle,
   ResizablePanel: () => ResizablePanel,
   ResizablePanelGroup: () => ResizablePanelGroup,
+  SHELL_MEASURE: () => SHELL_MEASURE,
   Select: () => Select,
   SelectContent: () => SelectContent,
   SelectGroup: () => SelectGroup,
@@ -191,8 +194,10 @@ __export(src_exports, {
   badgeVariants: () => badgeVariants,
   buttonVariants: () => buttonVariants,
   cardVariants: () => cardVariants,
+  chordMatches: () => chordMatches,
   commandDefaultFilter: () => commandDefaultFilter,
   createShortcutManager: () => createShortcutManager,
+  detectApplePlatform: () => detectApplePlatform,
   dialogContentVariants: () => dialogContentVariants,
   inputVariants: () => inputVariants,
   parseKeys: () => parseKeys,
@@ -202,6 +207,7 @@ __export(src_exports, {
   spinnerVariants: () => spinnerVariants,
   toast: () => import_sonner.toast,
   useActiveShortcuts: () => useActiveShortcuts,
+  useCommandHighlight: () => useCommandHighlight,
   usePortalContainer: () => usePortalContainer,
   useShortcutManager: () => useShortcutManager,
   useShortcuts: () => useShortcuts
@@ -1193,15 +1199,23 @@ var tabsListVariants = (0, import_class_variance_authority8.cva)(
     defaultVariants: { variant: "default" }
   }
 );
-var TabsList = (0, import_react13.forwardRef)(({ className, variant, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-  import_react_tabs.List,
-  {
-    ref,
-    "data-slot": "tabs-list",
-    className: cn(tabsListVariants({ variant }), className),
-    ...props
-  }
-));
+var TabsList = (0, import_react13.forwardRef)(({ className, variant, scrollable = false, ...props }, ref) => {
+  const list = /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    import_react_tabs.List,
+    {
+      ref,
+      "data-slot": "tabs-list",
+      className: cn(
+        tabsListVariants({ variant }),
+        scrollable && "w-max min-w-full",
+        className
+      ),
+      ...props
+    }
+  );
+  if (!scrollable) return list;
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { "data-slot": "tabs-list-scroller", className: "w-full overflow-x-auto", children: list });
+});
 TabsList.displayName = import_react_tabs.List.displayName;
 var TABS_TRIGGER_SIZES = {
   default: "text-sm",
@@ -2176,6 +2190,7 @@ var CommandShortcut = (0, import_react17.forwardRef)(
 );
 CommandShortcut.displayName = "CommandShortcut";
 var commandDefaultFilter = import_cmdk.defaultFilter;
+var useCommandHighlight = () => (0, import_cmdk.useCommandState)((state) => state.value);
 
 // src/components/spinner.tsx
 var import_class_variance_authority12 = require("class-variance-authority");
@@ -2444,7 +2459,7 @@ TableSkeleton.displayName = "TableSkeleton";
 
 // src/components/color-picker.tsx
 var import_lucide_react12 = require("lucide-react");
-var React9 = __toESM(require("react"), 1);
+var React10 = __toESM(require("react"), 1);
 
 // src/lib/color/convert.ts
 var clamp01 = (n) => n < 0 ? 0 : n > 1 ? 1 : n;
@@ -2549,6 +2564,10 @@ function hueSliderValue(hue, max) {
   return step > max ? max : step;
 }
 
+// src/lib/isomorphic-layout-effect.ts
+var React9 = __toESM(require("react"), 1);
+var useIsomorphicLayoutEffect = typeof document === "undefined" ? React9.useEffect : React9.useLayoutEffect;
+
 // src/components/color-picker.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
 function toHsva(hex) {
@@ -2570,6 +2589,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,
@@ -2579,20 +2601,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) => {
@@ -2622,8 +2724,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);
@@ -2631,163 +2733,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__ */ (0, import_jsx_runtime34.jsxs)("div", { className: cn("w-64 space-y-3", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-      "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__ */ (0, import_jsx_runtime34.jsx)(
-          "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__ */ (0, import_jsx_runtime34.jsx)("label", { className: "sr-only", htmlFor: `${fieldId}-hue`, children: "Hue" }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-      "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__ */ (0, import_jsx_runtime34.jsxs)(
+    "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__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("label", { className: "sr-only", htmlFor: `${fieldId}-alpha`, children: "Opacity" }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-        "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__ */ (0, import_jsx_runtime34.jsx)(
+          "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__ */ (0, import_jsx_runtime34.jsx)(
+              "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__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("label", { className: "sr-only", htmlFor: `${fieldId}-hex`, children: "Hex colour" }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-        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__ */ (0, import_jsx_runtime34.jsx)("label", { className: "sr-only", htmlFor: `${fieldId}-hue`, children: "Hue" }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          "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__ */ (0, import_jsx_runtime34.jsx)(
-        Button,
-        {
-          type: "button",
-          variant: "outline",
-          size: "icon",
-          "aria-label": "Pick a colour from the screen",
-          onClick: () => void pickFromScreen(),
-          children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react12.Pipette, { className: "size-4" })
-        }
-      )
-    ] }),
-    swatches.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-muted-foreground mb-1 text-xs", children: "Presets" }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex flex-wrap gap-1", children: swatches.map((swatch) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-        "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__ */ (0, import_jsx_runtime34.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-muted-foreground mb-1 text-xs", children: "Recent" }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex flex-wrap gap-1", children: recentColors.map((recent) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-        "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__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("label", { className: "sr-only", htmlFor: `${fieldId}-alpha`, children: "Opacity" }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            "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__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("label", { className: "sr-only", htmlFor: `${fieldId}-hex`, children: "Hex colour" }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            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__ */ (0, import_jsx_runtime34.jsx)(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              size: "icon",
+              "aria-label": "Pick a colour from the screen",
+              onClick: () => void pickFromScreen(),
+              children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react12.Pipette, { className: "size-4" })
+            }
+          )
+        ] }),
+        swatches.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-muted-foreground mb-1 text-xs", children: "Presets" }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex flex-wrap gap-1", children: swatches.map((swatch) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            "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__ */ (0, import_jsx_runtime34.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-muted-foreground mb-1 text-xs", children: "Recent" }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex flex-wrap gap-1", children: recentColors.map((recent) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            "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
 var ContextMenuPrimitive = __toESM(require("@radix-ui/react-context-menu"), 1);
 var import_lucide_react13 = require("lucide-react");
-var React10 = __toESM(require("react"), 1);
+var React11 = __toESM(require("react"), 1);
 var import_jsx_runtime35 = require("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]";
@@ -2796,7 +2922,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__ */ (0, import_jsx_runtime35.jsxs)(
+var ContextMenuSubTrigger = React11.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
   ContextMenuPrimitive.SubTrigger,
   {
     ref,
@@ -2814,7 +2940,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__ */ (0, import_jsx_runtime35.jsx)(ContextMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     ContextMenuPrimitive.SubContent,
@@ -2826,7 +2952,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__ */ (0, import_jsx_runtime35.jsx)(ContextMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     ContextMenuPrimitive.Content,
@@ -2838,7 +2964,7 @@ var ContextMenuContent = React10.forwardRef(({ className, ...props }, ref) => {
   ) });
 });
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
-var ContextMenuItem = React10.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+var ContextMenuItem = React11.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
   ContextMenuPrimitive.Item,
   {
     ref,
@@ -2852,7 +2978,7 @@ var ContextMenuItem = React10.forwardRef(({ className, inset, ...props }, ref) =
   }
 ));
 ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
-var ContextMenuCheckboxItem = React10.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+var ContextMenuCheckboxItem = React11.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
   ContextMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -2870,7 +2996,7 @@ var ContextMenuCheckboxItem = React10.forwardRef(({ className, children, checked
   }
 ));
 ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
-var ContextMenuRadioItem = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+var ContextMenuRadioItem = React11.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
   ContextMenuPrimitive.RadioItem,
   {
     ref,
@@ -2887,7 +3013,7 @@ var ContextMenuRadioItem = React10.forwardRef(({ className, children, ...props }
   }
 ));
 ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
-var ContextMenuLabel = React10.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+var ContextMenuLabel = React11.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
   ContextMenuPrimitive.Label,
   {
     ref,
@@ -2900,7 +3026,7 @@ var ContextMenuLabel = React10.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
-var ContextMenuSeparator = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+var ContextMenuSeparator = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
   ContextMenuPrimitive.Separator,
   {
     ref,
@@ -2973,7 +3099,7 @@ var ResizableHandle = ({
 // src/components/tree-view.tsx
 var import_react_virtual = require("@tanstack/react-virtual");
 var import_lucide_react15 = require("lucide-react");
-var React11 = __toESM(require("react"), 1);
+var React12 = __toESM(require("react"), 1);
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var ROW_HEIGHT = 28;
 var INDENT_PER_LEVEL = 12;
@@ -3015,19 +3141,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,
@@ -3036,8 +3171,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);
@@ -3051,7 +3186,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]
     );
@@ -3059,11 +3194,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))
@@ -3085,9 +3220,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];
@@ -3107,11 +3242,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();
@@ -3166,7 +3302,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();
@@ -3214,6 +3352,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,
@@ -3222,7 +3361,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__ */ (0, import_jsx_runtime37.jsxs)(
                 "div",
                 {
@@ -3236,16 +3380,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,
@@ -3291,7 +3440,7 @@ TreeView.displayName = "TreeView";
 
 // src/components/slider.tsx
 var SliderPrimitive = __toESM(require("@radix-ui/react-slider"), 1);
-var React12 = __toESM(require("react"), 1);
+var React13 = __toESM(require("react"), 1);
 
 // src/lib/dev-warn.ts
 var emitted = /* @__PURE__ */ new Set();
@@ -3322,7 +3471,7 @@ function thumbCount(value, defaultValue) {
 function hasAccessibleName(value) {
   return value !== void 0 && value.trim() !== "";
 }
-var Slider = React12.forwardRef(
+var Slider = React13.forwardRef(
   ({
     className,
     value,
@@ -3333,7 +3482,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;
@@ -3442,7 +3591,7 @@ var Slider = React12.forwardRef(
 Slider.displayName = SliderPrimitive.Root.displayName;
 
 // src/lib/shortcuts/react.tsx
-var React13 = __toESM(require("react"), 1);
+var React14 = __toESM(require("react"), 1);
 
 // src/lib/shortcuts/key-spec.ts
 function normalizeKey(key) {
@@ -3971,9 +4120,8 @@ var FIELD_KEYS = /* @__PURE__ */ new Set([
 
 // src/lib/shortcuts/react.tsx
 var import_jsx_runtime39 = require("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",
@@ -3986,13 +4134,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;
@@ -4048,7 +4196,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]
   );
@@ -4057,11 +4205,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,
@@ -4075,13 +4223,13 @@ function ShortcutScope({
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(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,
@@ -4104,7 +4252,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"
@@ -4114,7 +4262,7 @@ function useShortcutManager() {
 }
 function useActiveShortcuts() {
   const manager = useShortcutManager();
-  return React13.useSyncExternalStore(
+  return React14.useSyncExternalStore(
     manager.subscribe,
     manager.activeBindings,
     manager.activeBindings
@@ -4241,29 +4389,12 @@ function FormSection({
       ),
       description ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-sm text-muted-foreground", children: description }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Card, { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "divide-y divide-foreground/10 px-6", children }) })
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Card, { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "nx-form-section-rows divide-y divide-foreground/10 px-6", children }) })
   ] });
 }
 
-// src/components/form-layout.tsx
-var import_class_variance_authority14 = require("class-variance-authority");
+// src/components/form-actions.tsx
 var import_jsx_runtime42 = require("react/jsx-runtime");
-var measure = (0, import_class_variance_authority14.cva)("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__ */ (0, import_jsx_runtime42.jsx)("div", { className: cn(measure({ width }), className), children });
-}
 function FormActions({ dirty, className, children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     "div",
@@ -4286,6 +4417,120 @@ function FormActions({ dirty, className, children }) {
     }
   );
 }
+
+// src/components/page-shell.tsx
+var import_react21 = require("react");
+var import_jsx_runtime43 = require("react/jsx-runtime");
+function hasBareTextChild(shell) {
+  return Array.from(shell.childNodes).some(
+    (node) => node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== ""
+  );
+}
+var InsideShell = (0, import_react21.createContext)(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 = (0, import_react21.forwardRef)(
+  ({ width = "form", className, children, style, ...props }, ref) => {
+    const shellRef = (0, import_react21.useRef)(null);
+    const attachRef = (0, import_react21.useCallback)(
+      (node) => {
+        shellRef.current = node;
+        if (typeof ref === "function") return ref(node);
+        if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    const nested = (0, import_react21.useContext)(InsideShell);
+    (0, import_react21.useEffect)(() => {
+      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__ */ (0, import_jsx_runtime43.jsx)(InsideShell.Provider, { value: true, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      "div",
+      {
+        ref: attachRef,
+        "data-slot": "page-shell",
+        style: shellStyle,
+        className: cn("nx-page-shell py-8", className),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+PageShell.displayName = "PageShell";
+var Bleed = (0, import_react21.forwardRef)(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    "div",
+    {
+      ref,
+      "data-slot": "bleed",
+      className: cn("nx-bleed", className),
+      ...props,
+      children
+    }
+  )
+);
+Bleed.displayName = "Bleed";
+
+// src/components/page-header.tsx
+var import_react22 = require("react");
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var PageHeader = (0, import_react22.forwardRef)(
+  ({ title, description, breadcrumbs, actions, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+    "header",
+    {
+      ref,
+      "data-slot": "page-header",
+      className: cn("mb-8", className),
+      ...props,
+      children: [
+        breadcrumbs ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "mb-6", children: breadcrumbs }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex flex-col justify-between gap-4 sm:flex-row sm:items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("h1", { className: "text-xl font-semibold tracking-tight", children: title }),
+            description ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: "mt-1 text-sm font-normal text-muted-foreground", children: description }) : null
+          ] }),
+          actions ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex items-center gap-3", children: actions }) : null
+        ] })
+      ]
+    }
+  )
+);
+PageHeader.displayName = "PageHeader";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -4310,6 +4555,7 @@ function FormActions({ dirty, className, children }) {
   AvatarFallback,
   AvatarImage,
   Badge,
+  Bleed,
   Button,
   Card,
   CardAction,
@@ -4374,11 +4620,12 @@ function FormActions({ dirty, className, children }) {
   FieldShell,
   FormActions,
   FormLabelWithTooltip,
-  FormLayout,
   FormSection,
   Grid,
   Input,
   Label,
+  PageHeader,
+  PageShell,
   Popover,
   PopoverAnchor,
   PopoverContent,
@@ -4390,6 +4637,7 @@ function FormActions({ dirty, className, children }) {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
+  SHELL_MEASURE,
   Select,
   SelectContent,
   SelectGroup,
@@ -4448,8 +4696,10 @@ function FormActions({ dirty, className, children }) {
   badgeVariants,
   buttonVariants,
   cardVariants,
+  chordMatches,
   commandDefaultFilter,
   createShortcutManager,
+  detectApplePlatform,
   dialogContentVariants,
   inputVariants,
   parseKeys,
@@ -4459,6 +4709,7 @@ function FormActions({ dirty, className, children }) {
   spinnerVariants,
   toast,
   useActiveShortcuts,
+  useCommandHighlight,
   usePortalContainer,
   useShortcutManager,
   useShortcuts