@evinvest/uikit 0.26.0 → 0.27.0

package/dist/primitives/dismissable-layer.js

@@ -1,13 +1,77 @@
 "use client";
+import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-const stack = [];
-function isInsideHigherLayer(own, target) {
-  const index = stack.indexOf(own);
-  if (index < 0) return false;
-  return stack.slice(index + 1).some((layer) => layer.current?.contains(target) ?? false);
+const STORE_KEY = /* @__PURE__ */ Symbol.for("@evinvest/uikit/dismissable-layers@1");
+function isStore(value) {
+  return typeof value === "object" && value !== null && "stack" in value && Array.isArray(value.stack);
+}
+function sharedStore() {
+  const existing = Reflect.get(globalThis, STORE_KEY);
+  if (isStore(existing)) return existing;
+  const store2 = {
+    stack: [],
+    info: /* @__PURE__ */ new WeakMap(),
+    seen: /* @__PURE__ */ new WeakMap(),
+    snapshot: (event) => {
+      if (!store2.seen.has(event)) store2.seen.set(event, store2.stack.slice());
+    }
+  };
+  Reflect.set(globalThis, STORE_KEY, store2);
+  return store2;
+}
+const store = sharedStore();
+const LAYER_IGNORE_ATTR = "data-dismissable-layer-ignore";
+function layersAt(event) {
+  return store.seen.get(event) ?? store.stack;
+}
+function isPointerOutside(own, event) {
+  const target = event.target;
+  if (!(target instanceof Node)) return false;
+  const el = target instanceof Element ? target : target.parentElement;
+  if (el?.closest(`[${LAYER_IGNORE_ATTR}]`)) return false;
+  const layers = layersAt(event);
+  const index = layers.indexOf(own);
+  if (index < 0) return true;
+  const above = layers.slice(index + 1);
+  if (above.some((layer) => store.info.get(layer)?.modal === true)) return false;
+  return !above.some((layer) => layer.current?.contains(target) ?? false);
+}
+function ownsEscape(own, event) {
+  const layers = layersAt(event);
+  return layers[layers.length - 1] === own;
+}
+function isDescendant(layer, ancestor) {
+  for (let p = store.info.get(layer)?.parent ?? null; p; p = store.info.get(p)?.parent ?? null) {
+    if (p === ancestor) return true;
+  }
+  return false;
+}
+function push(layer) {
+  const { stack } = store;
+  if (stack.length === 0) {
+    window.addEventListener("keydown", store.snapshot, true);
+    window.addEventListener("pointerdown", store.snapshot, true);
+  }
+  const firstChild = stack.findIndex((other) => isDescendant(other, layer));
+  if (firstChild < 0) stack.push(layer);
+  else stack.splice(firstChild, 0, layer);
+}
+function pop(layer) {
+  const { stack } = store;
+  const index = stack.indexOf(layer);
+  if (index >= 0) stack.splice(index, 1);
+  if (stack.length === 0) {
+    window.removeEventListener("keydown", store.snapshot, true);
+    window.removeEventListener("pointerdown", store.snapshot, true);
+  }
+}
+const ParentLayerContext = React.createContext(null);
+function DismissableLayerScope({ layer, children }) {
+  return /* @__PURE__ */ jsx(ParentLayerContext.Provider, { value: layer, children });
 }
 function useDismissableLayer(opts) {
-  const { enabled, onDismiss, exclude } = opts;
+  const { enabled, onDismiss, exclude, pointerOutside = true, modal = false } = opts;
+  const parent = React.useContext(ParentLayerContext);
   const ref = React.useRef(null);
   const onDismissRef = React.useRef(onDismiss);
   const excludeRef = React.useRef(exclude);
@@ -17,32 +81,33 @@ function useDismissableLayer(opts) {
   });
   React.useEffect(() => {
     if (!enabled) return;
-    stack.push(ref);
+    store.info.set(ref, { parent, modal });
+    push(ref);
     function onPointerDown(event) {
       const target = event.target;
-      if (!target) return;
+      if (!(target instanceof Node)) return;
       if (ref.current && ref.current.contains(target)) return;
       for (const r of excludeRef.current ?? []) {
         if (r.current && r.current.contains(target)) return;
       }
-      if (isInsideHigherLayer(ref, target)) return;
-      onDismissRef.current(event);
+      if (isPointerOutside(ref, event)) onDismissRef.current(event);
     }
     function onKeyDown(event) {
-      if (event.key === "Escape" && stack[stack.length - 1] === ref) onDismissRef.current(event);
+      if (event.key === "Escape" && ownsEscape(ref, event)) onDismissRef.current(event);
     }
-    document.addEventListener("pointerdown", onPointerDown, true);
+    if (pointerOutside) document.addEventListener("pointerdown", onPointerDown, true);
     document.addEventListener("keydown", onKeyDown);
     return () => {
-      const index = stack.indexOf(ref);
-      if (index >= 0) stack.splice(index, 1);
+      pop(ref);
       document.removeEventListener("pointerdown", onPointerDown, true);
       document.removeEventListener("keydown", onKeyDown);
     };
-  }, [enabled]);
+  }, [enabled, pointerOutside, modal, parent]);
   return ref;
 }
 export {
+  DismissableLayerScope,
+  LAYER_IGNORE_ATTR,
   useDismissableLayer
 };
 //# sourceMappingURL=dismissable-layer.js.map

package/dist/primitives/dismissable-layer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/primitives/dismissable-layer.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\ntype LayerRef = React.RefObject<HTMLDivElement | null>;\n\n// The open layers, oldest first. An overlay opened inside another (a Select in\n// a Dialog, a Popover in a Drawer) is portaled out of its parent's subtree, so\n// \"outside the parent\" would include it: the stack is what tells a nested\n// layer from the rest of the page.\nconst stack: LayerRef[] = [];\n\nfunction isInsideHigherLayer(own: LayerRef, target: Node): boolean {\n  const index = stack.indexOf(own);\n  // Not on the stack (a listener outliving its cleanup): nothing is above it.\n  if (index < 0) return false;\n  return stack.slice(index + 1).some((layer) => layer.current?.contains(target) ?? false);\n}\n\n/** Why a layer is being dismissed: the event itself, for a caller that treats keys and pointers apart. */\nexport type DismissEvent = PointerEvent | KeyboardEvent;\n\n/**\n * Calls `onDismiss` on Escape or on a pointer-down outside the layer — the\n * dep-light core of every overlay's \"click away to close\". Pass refs to any\n * nodes that should NOT count as outside (e.g. the trigger), via `exclude`.\n *\n * Layers stack, in the order they opened: Escape dismisses only the topmost\n * layer on this stack, and a pointer-down inside a layer opened above this one\n * is not outside it — so a Select's list inside a Dialog closes the list, not\n * the Dialog. The stack knows only the overlays built on this hook: a\n * `Drawer` or `CommandDialog` (Escape in their own React `onKeyDown`) is not\n * on it, and a menu that also closes on Escape in its React `onKeyDown` lets\n * the key bubble through React's tree to what holds it. Moving those onto the\n * stack is a follow-up.\n *\n * Mirrors the dismiss behaviour Rust expresses with a full-screen backdrop.\n */\nexport function useDismissableLayer(opts: {\n  enabled: boolean;\n  onDismiss: (event: DismissEvent) => void;\n  exclude?: Array<React.RefObject<Element | null>>;\n}): React.RefObject<HTMLDivElement | null> {\n  const { enabled, onDismiss, exclude } = opts;\n  const ref = React.useRef<HTMLDivElement | null>(null);\n  const onDismissRef = React.useRef(onDismiss);\n  // Callers pass `exclude` inline, a new array each render: read through a ref,\n  // or the effect would re-run and move this layer to the top of the stack.\n  const excludeRef = React.useRef(exclude);\n  React.useEffect(() => {\n    onDismissRef.current = onDismiss;\n    excludeRef.current = exclude;\n  });\n\n  React.useEffect(() => {\n    if (!enabled) return;\n    stack.push(ref);\n\n    function onPointerDown(event: PointerEvent) {\n      const target = event.target as Node | null;\n      if (!target) return;\n      if (ref.current && ref.current.contains(target)) return;\n      for (const r of excludeRef.current ?? []) {\n        if (r.current && r.current.contains(target)) return;\n      }\n      if (isInsideHigherLayer(ref, target)) return;\n      onDismissRef.current(event);\n    }\n\n    function onKeyDown(event: KeyboardEvent) {\n      if (event.key === \"Escape\" && stack[stack.length - 1] === ref) onDismissRef.current(event);\n    }\n\n    document.addEventListener(\"pointerdown\", onPointerDown, true);\n    document.addEventListener(\"keydown\", onKeyDown);\n    return () => {\n      const index = stack.indexOf(ref);\n      if (index >= 0) stack.splice(index, 1);\n      document.removeEventListener(\"pointerdown\", onPointerDown, true);\n      document.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [enabled]);\n\n  return ref;\n}\n"],"mappings":";AAEA,YAAY,WAAW;AAQvB,MAAM,QAAoB,CAAC;AAE3B,SAAS,oBAAoB,KAAe,QAAuB;AACjE,QAAM,QAAQ,MAAM,QAAQ,GAAG;AAE/B,MAAI,QAAQ,EAAG,QAAO;AACtB,SAAO,MAAM,MAAM,QAAQ,CAAC,EAAE,KAAK,CAAC,UAAU,MAAM,SAAS,SAAS,MAAM,KAAK,KAAK;AACxF;AAqBO,SAAS,oBAAoB,MAIO;AACzC,QAAM,EAAE,SAAS,WAAW,QAAQ,IAAI;AACxC,QAAM,MAAM,MAAM,OAA8B,IAAI;AACpD,QAAM,eAAe,MAAM,OAAO,SAAS;AAG3C,QAAM,aAAa,MAAM,OAAO,OAAO;AACvC,QAAM,UAAU,MAAM;AACpB,iBAAa,UAAU;AACvB,eAAW,UAAU;AAAA,EACvB,CAAC;AAED,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,QAAS;AACd,UAAM,KAAK,GAAG;AAEd,aAAS,cAAc,OAAqB;AAC1C,YAAM,SAAS,MAAM;AACrB,UAAI,CAAC,OAAQ;AACb,UAAI,IAAI,WAAW,IAAI,QAAQ,SAAS,MAAM,EAAG;AACjD,iBAAW,KAAK,WAAW,WAAW,CAAC,GAAG;AACxC,YAAI,EAAE,WAAW,EAAE,QAAQ,SAAS,MAAM,EAAG;AAAA,MAC/C;AACA,UAAI,oBAAoB,KAAK,MAAM,EAAG;AACtC,mBAAa,QAAQ,KAAK;AAAA,IAC5B;AAEA,aAAS,UAAU,OAAsB;AACvC,UAAI,MAAM,QAAQ,YAAY,MAAM,MAAM,SAAS,CAAC,MAAM,IAAK,cAAa,QAAQ,KAAK;AAAA,IAC3F;AAEA,aAAS,iBAAiB,eAAe,eAAe,IAAI;AAC5D,aAAS,iBAAiB,WAAW,SAAS;AAC9C,WAAO,MAAM;AACX,YAAM,QAAQ,MAAM,QAAQ,GAAG;AAC/B,UAAI,SAAS,EAAG,OAAM,OAAO,OAAO,CAAC;AACrC,eAAS,oBAAoB,eAAe,eAAe,IAAI;AAC/D,eAAS,oBAAoB,WAAW,SAAS;AAAA,IACnD;AAAA,EACF,GAAG,CAAC,OAAO,CAAC;AAEZ,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../src/primitives/dismissable-layer.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\ntype LayerRef = React.RefObject<HTMLDivElement | null>;\n\ninterface LayerInfo {\n  /** The layer this one was rendered inside, from context — not the one below it on the stack. */\n  parent: LayerRef | null;\n  modal: boolean;\n}\n\ninterface LayerStore {\n  // The open layers, bottom first. An overlay opened inside another (a Select\n  // in a Dialog, a Popover in a Drawer) is portaled out of its parent's\n  // subtree, so \"outside the parent\" would include it: the stack is what tells\n  // a nested layer from the rest of the page.\n  stack: LayerRef[];\n  info: WeakMap<LayerRef, LayerInfo>;\n  // The stack as it stood when an event started its trip. By the time the\n  // document hears an Escape, a React `onKeyDown` on the way (a Select's, a\n  // consumer's) may already have closed the top layer and — a discrete update\n  // commits synchronously — popped it, so the layer below would find itself\n  // on top and close on the same key; a pointer-down can close an upper modal\n  // the same way and lift its barrier mid-flight. Taken in the window's\n  // capture phase, which runs before any DOM listener, React's root included.\n  seen: WeakMap<Event, LayerRef[]>;\n  snapshot: (event: Event) => void;\n}\n\n// One stack per page, not per module copy: a micro-frontend that bundles its\n// own uikit must see the host's layers, and the host its. Versioned, so a copy\n// with a different store shape keeps to itself instead of misreading this one.\nconst STORE_KEY = Symbol.for(\"@evinvest/uikit/dismissable-layers@1\");\n\nfunction isStore(value: unknown): value is LayerStore {\n  return typeof value === \"object\" && value !== null && \"stack\" in value && Array.isArray(value.stack);\n}\n\nfunction sharedStore(): LayerStore {\n  const existing: unknown = Reflect.get(globalThis, STORE_KEY);\n  if (isStore(existing)) return existing;\n  const store: LayerStore = {\n    stack: [],\n    info: new WeakMap(),\n    seen: new WeakMap(),\n    snapshot: (event) => {\n      if (!store.seen.has(event)) store.seen.set(event, store.stack.slice());\n    },\n  };\n  Reflect.set(globalThis, STORE_KEY, store);\n  return store;\n}\n\nconst store = sharedStore();\n\n/**\n * Elements carrying this attribute are outside every layer without being a\n * click away from any: a press there dismisses nothing (the toaster).\n */\nexport const LAYER_IGNORE_ATTR = \"data-dismissable-layer-ignore\";\n\nfunction layersAt(event: Event): LayerRef[] {\n  // An event dispatched where the window never sees it falls back to the live stack.\n  return store.seen.get(event) ?? store.stack;\n}\n\nfunction isPointerOutside(own: LayerRef, event: PointerEvent): boolean {\n  const target = event.target;\n  if (!(target instanceof Node)) return false;\n  const el = target instanceof Element ? target : target.parentElement;\n  if (el?.closest(`[${LAYER_IGNORE_ATTR}]`)) return false;\n  const layers = layersAt(event);\n  const index = layers.indexOf(own);\n  // Not on the stack (a listener outliving its cleanup): nothing is above it.\n  if (index < 0) return true;\n  const above = layers.slice(index + 1);\n  // A modal above is a barrier: whatever the press landed on — its scrim, its\n  // panel, a toast over it — the modal answers for it, not the layers below.\n  if (above.some((layer) => store.info.get(layer)?.modal === true)) return false;\n  return !above.some((layer) => layer.current?.contains(target) ?? false);\n}\n\nfunction ownsEscape(own: LayerRef, event: KeyboardEvent): boolean {\n  const layers = layersAt(event);\n  return layers[layers.length - 1] === own;\n}\n\nfunction isDescendant(layer: LayerRef, ancestor: LayerRef): boolean {\n  for (let p = store.info.get(layer)?.parent ?? null; p; p = store.info.get(p)?.parent ?? null) {\n    if (p === ancestor) return true;\n  }\n  return false;\n}\n\nfunction push(layer: LayerRef) {\n  const { stack } = store;\n  if (stack.length === 0) {\n    window.addEventListener(\"keydown\", store.snapshot, true);\n    window.addEventListener(\"pointerdown\", store.snapshot, true);\n  }\n  // Children's effects run before their parent's, so a layer opened in the\n  // same commit as one nested in it (`defaultOpen` on both, a shared `open`)\n  // arrives second: it goes below its first descendant, not on top.\n  const firstChild = stack.findIndex((other) => isDescendant(other, layer));\n  if (firstChild < 0) stack.push(layer);\n  else stack.splice(firstChild, 0, layer);\n}\n\nfunction pop(layer: LayerRef) {\n  const { stack } = store;\n  const index = stack.indexOf(layer);\n  if (index >= 0) stack.splice(index, 1);\n  if (stack.length === 0) {\n    window.removeEventListener(\"keydown\", store.snapshot, true);\n    window.removeEventListener(\"pointerdown\", store.snapshot, true);\n  }\n}\n\nconst ParentLayerContext = React.createContext<LayerRef | null>(null);\n\n/**\n * Marks `children` as rendered inside `layer` (the ref `useDismissableLayer`\n * returned), so a layer among them always stacks above it — even when both\n * open in the same commit. Wrap the overlay's content in it.\n */\nexport function DismissableLayerScope({ layer, children }: { layer: LayerRef; children?: React.ReactNode }) {\n  return <ParentLayerContext.Provider value={layer}>{children}</ParentLayerContext.Provider>;\n}\n\n/** Why a layer is being dismissed: the event itself, for a caller that treats keys and pointers apart. */\nexport type DismissEvent = PointerEvent | KeyboardEvent;\n\n/**\n * Calls `onDismiss` on Escape or on a pointer-down outside the layer — the\n * dep-light core of every overlay's \"click away to close\". Pass refs to any\n * nodes that should NOT count as outside (e.g. the trigger), via `exclude`.\n *\n * Layers stack: a layer rendered inside another's `DismissableLayerScope`\n * sits above it, the rest in the order they opened. Escape dismisses only the\n * topmost layer, and a pointer-down inside a layer above this one is not\n * outside it — so a Select's list inside a Dialog closes the list, not the\n * Dialog. The Escape goes to the layer that was on top when the key was\n * pressed, even if a handler on its way closed that layer first.\n *\n * `modal: true` makes the layer a barrier: while it is open, the layers below\n * ignore every pointer-down — a press on its scrim closes it alone. Elements\n * marked with `LAYER_IGNORE_ATTR` (the toaster) are outside no layer.\n *\n * `pointerOutside: false` keeps the layer on the stack (it takes Escape, and\n * the layers below see a pointer-down inside it as inside) but leaves outside\n * clicks to the caller — for an overlay whose own scrim is what \"outside\"\n * means (Drawer, CommandDialog).\n *\n * The stack is shared through `globalThis`, so every copy of this module on\n * the page sees one stack; parent links need one React context, so they hold\n * within a copy only.\n *\n * Mirrors the dismiss behaviour Rust expresses with a full-screen backdrop.\n */\nexport function useDismissableLayer(opts: {\n  enabled: boolean;\n  onDismiss: (event: DismissEvent) => void;\n  exclude?: Array<React.RefObject<Element | null>>;\n  /** Dismiss on a pointer-down outside the layer. Default `true`. */\n  pointerOutside?: boolean;\n  /** Bar the layers below from pointer-downs while open. Default `false`. */\n  modal?: boolean;\n}): React.RefObject<HTMLDivElement | null> {\n  const { enabled, onDismiss, exclude, pointerOutside = true, modal = false } = opts;\n  const parent = React.useContext(ParentLayerContext);\n  const ref = React.useRef<HTMLDivElement | null>(null);\n  const onDismissRef = React.useRef(onDismiss);\n  // Callers pass `exclude` inline, a new array each render: read through a ref,\n  // or the effect would re-run and move this layer to the top of the stack.\n  const excludeRef = React.useRef(exclude);\n  React.useEffect(() => {\n    onDismissRef.current = onDismiss;\n    excludeRef.current = exclude;\n  });\n\n  React.useEffect(() => {\n    if (!enabled) return;\n    store.info.set(ref, { parent, modal });\n    push(ref);\n\n    function onPointerDown(event: PointerEvent) {\n      const target = event.target;\n      if (!(target instanceof Node)) return;\n      if (ref.current && ref.current.contains(target)) return;\n      for (const r of excludeRef.current ?? []) {\n        if (r.current && r.current.contains(target)) return;\n      }\n      if (isPointerOutside(ref, event)) onDismissRef.current(event);\n    }\n\n    function onKeyDown(event: KeyboardEvent) {\n      if (event.key === \"Escape\" && ownsEscape(ref, event)) onDismissRef.current(event);\n    }\n\n    if (pointerOutside) document.addEventListener(\"pointerdown\", onPointerDown, true);\n    document.addEventListener(\"keydown\", onKeyDown);\n    return () => {\n      pop(ref);\n      document.removeEventListener(\"pointerdown\", onPointerDown, true);\n      document.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [enabled, pointerOutside, modal, parent]);\n\n  return ref;\n}\n"],"mappings":"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","names":["store"]}

package/dist/primitives/use-roving-focus.js

@@ -3,12 +3,17 @@ import * as React from "react";
 function useRovingFocus(opts) {
   const { count, orientation = "vertical", loop = true, initial = 0 } = opts;
   const [activeIndex, setActiveIndex] = React.useState(initial);
-  const next = (dir) => setActiveIndex((i) => {
-    let n = i + dir;
-    if (n < 0) n = loop ? count - 1 : 0;
-    else if (n >= count) n = loop ? 0 : count - 1;
-    return n;
-  });
+  const resolveCount = () => typeof count === "function" ? count() : count;
+  const next = (dir) => {
+    const total = resolveCount();
+    if (total <= 0) return;
+    setActiveIndex((i) => {
+      let n = Math.min(Math.max(i, 0), total - 1) + dir;
+      if (n < 0) n = loop ? total - 1 : 0;
+      else if (n >= total) n = loop ? 0 : total - 1;
+      return n;
+    });
+  };
   const onKeyDown = (event) => {
     const horiz = orientation === "horizontal" || orientation === "both";
     const vert = orientation === "vertical" || orientation === "both";
@@ -29,7 +34,8 @@ function useRovingFocus(opts) {
       setActiveIndex(0);
     } else if (event.key === "End") {
       event.preventDefault();
-      setActiveIndex(count - 1);
+      const total = resolveCount();
+      if (total > 0) setActiveIndex(total - 1);
     }
   };
   return { activeIndex, setActiveIndex, onKeyDown };

package/dist/primitives/use-roving-focus.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/primitives/use-roving-focus.ts"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\n/**\n * Arrow-key roving focus over a set of items — the dep-light core of menus,\n * tabs, radio-groups and toolbars (replacing `@radix-ui/react-roving-focus`).\n * Returns an `onKeyDown` to spread on the container and the active index; items\n * should set `tabIndex={index === activeIndex ? 0 : -1}`.\n *\n * Mirrors the keyboard navigation Rust drives with a focused-index signal.\n */\nexport function useRovingFocus(opts: {\n  count: number;\n  orientation?: \"horizontal\" | \"vertical\" | \"both\";\n  loop?: boolean;\n  initial?: number;\n}): {\n  activeIndex: number;\n  setActiveIndex: (i: number) => void;\n  onKeyDown: (event: React.KeyboardEvent) => void;\n} {\n  const { count, orientation = \"vertical\", loop = true, initial = 0 } = opts;\n  const [activeIndex, setActiveIndex] = React.useState(initial);\n\n  const next = (dir: 1 | -1) =>\n    setActiveIndex((i) => {\n      let n = i + dir;\n      if (n < 0) n = loop ? count - 1 : 0;\n      else if (n >= count) n = loop ? 0 : count - 1;\n      return n;\n    });\n\n  const onKeyDown = (event: React.KeyboardEvent) => {\n    const horiz = orientation === \"horizontal\" || orientation === \"both\";\n    const vert = orientation === \"vertical\" || orientation === \"both\";\n    if (vert && event.key === \"ArrowDown\") {\n      event.preventDefault();\n      next(1);\n    } else if (vert && event.key === \"ArrowUp\") {\n      event.preventDefault();\n      next(-1);\n    } else if (horiz && event.key === \"ArrowRight\") {\n      event.preventDefault();\n      next(1);\n    } else if (horiz && event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      next(-1);\n    } else if (event.key === \"Home\") {\n      event.preventDefault();\n      setActiveIndex(0);\n    } else if (event.key === \"End\") {\n      event.preventDefault();\n      setActiveIndex(count - 1);\n    }\n  };\n\n  return { activeIndex, setActiveIndex, onKeyDown };\n}\n"],"mappings":";AAEA,YAAY,WAAW;AAUhB,SAAS,eAAe,MAS7B;AACA,QAAM,EAAE,OAAO,cAAc,YAAY,OAAO,MAAM,UAAU,EAAE,IAAI;AACtE,QAAM,CAAC,aAAa,cAAc,IAAI,MAAM,SAAS,OAAO;AAE5D,QAAM,OAAO,CAAC,QACZ,eAAe,CAAC,MAAM;AACpB,QAAI,IAAI,IAAI;AACZ,QAAI,IAAI,EAAG,KAAI,OAAO,QAAQ,IAAI;AAAA,aACzB,KAAK,MAAO,KAAI,OAAO,IAAI,QAAQ;AAC5C,WAAO;AAAA,EACT,CAAC;AAEH,QAAM,YAAY,CAAC,UAA+B;AAChD,UAAM,QAAQ,gBAAgB,gBAAgB,gBAAgB;AAC9D,UAAM,OAAO,gBAAgB,cAAc,gBAAgB;AAC3D,QAAI,QAAQ,MAAM,QAAQ,aAAa;AACrC,YAAM,eAAe;AACrB,WAAK,CAAC;AAAA,IACR,WAAW,QAAQ,MAAM,QAAQ,WAAW;AAC1C,YAAM,eAAe;AACrB,WAAK,EAAE;AAAA,IACT,WAAW,SAAS,MAAM,QAAQ,cAAc;AAC9C,YAAM,eAAe;AACrB,WAAK,CAAC;AAAA,IACR,WAAW,SAAS,MAAM,QAAQ,aAAa;AAC7C,YAAM,eAAe;AACrB,WAAK,EAAE;AAAA,IACT,WAAW,MAAM,QAAQ,QAAQ;AAC/B,YAAM,eAAe;AACrB,qBAAe,CAAC;AAAA,IAClB,WAAW,MAAM,QAAQ,OAAO;AAC9B,YAAM,eAAe;AACrB,qBAAe,QAAQ,CAAC;AAAA,IAC1B;AAAA,EACF;AAEA,SAAO,EAAE,aAAa,gBAAgB,UAAU;AAClD;","names":[]}
+{"version":3,"sources":["../../src/primitives/use-roving-focus.ts"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\n/**\n * Arrow-key roving focus over a set of items — the dep-light core of menus,\n * tabs, radio-groups and toolbars (replacing `@radix-ui/react-roving-focus`).\n * Returns an `onKeyDown` to spread on the container and the active index; items\n * should set `tabIndex={index === activeIndex ? 0 : -1}`.\n *\n * `count` may be a getter: containers whose items are only known from the DOM\n * (menus with conditionally rendered or disabled items, inline sub-menus) pass\n * one so the bound is read at keydown time — never during render, which keeps\n * the hook safe under SSR.\n *\n * Mirrors the keyboard navigation Rust drives with a focused-index signal.\n */\nexport function useRovingFocus(opts: {\n  count: number | (() => number);\n  orientation?: \"horizontal\" | \"vertical\" | \"both\";\n  loop?: boolean;\n  initial?: number;\n}): {\n  activeIndex: number;\n  setActiveIndex: (i: number) => void;\n  onKeyDown: (event: React.KeyboardEvent) => void;\n} {\n  const { count, orientation = \"vertical\", loop = true, initial = 0 } = opts;\n  const [activeIndex, setActiveIndex] = React.useState(initial);\n\n  const resolveCount = () => (typeof count === \"function\" ? count() : count);\n\n  const next = (dir: 1 | -1) => {\n    const total = resolveCount();\n    if (total <= 0) return;\n    setActiveIndex((i) => {\n      // Clamp first: the item set may have shrunk since the index was set.\n      let n = Math.min(Math.max(i, 0), total - 1) + dir;\n      if (n < 0) n = loop ? total - 1 : 0;\n      else if (n >= total) n = loop ? 0 : total - 1;\n      return n;\n    });\n  };\n\n  const onKeyDown = (event: React.KeyboardEvent) => {\n    const horiz = orientation === \"horizontal\" || orientation === \"both\";\n    const vert = orientation === \"vertical\" || orientation === \"both\";\n    if (vert && event.key === \"ArrowDown\") {\n      event.preventDefault();\n      next(1);\n    } else if (vert && event.key === \"ArrowUp\") {\n      event.preventDefault();\n      next(-1);\n    } else if (horiz && event.key === \"ArrowRight\") {\n      event.preventDefault();\n      next(1);\n    } else if (horiz && event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      next(-1);\n    } else if (event.key === \"Home\") {\n      event.preventDefault();\n      setActiveIndex(0);\n    } else if (event.key === \"End\") {\n      event.preventDefault();\n      const total = resolveCount();\n      if (total > 0) setActiveIndex(total - 1);\n    }\n  };\n\n  return { activeIndex, setActiveIndex, onKeyDown };\n}\n"],"mappings":";AAEA,YAAY,WAAW;AAehB,SAAS,eAAe,MAS7B;AACA,QAAM,EAAE,OAAO,cAAc,YAAY,OAAO,MAAM,UAAU,EAAE,IAAI;AACtE,QAAM,CAAC,aAAa,cAAc,IAAI,MAAM,SAAS,OAAO;AAE5D,QAAM,eAAe,MAAO,OAAO,UAAU,aAAa,MAAM,IAAI;AAEpE,QAAM,OAAO,CAAC,QAAgB;AAC5B,UAAM,QAAQ,aAAa;AAC3B,QAAI,SAAS,EAAG;AAChB,mBAAe,CAAC,MAAM;AAEpB,UAAI,IAAI,KAAK,IAAI,KAAK,IAAI,GAAG,CAAC,GAAG,QAAQ,CAAC,IAAI;AAC9C,UAAI,IAAI,EAAG,KAAI,OAAO,QAAQ,IAAI;AAAA,eACzB,KAAK,MAAO,KAAI,OAAO,IAAI,QAAQ;AAC5C,aAAO;AAAA,IACT,CAAC;AAAA,EACH;AAEA,QAAM,YAAY,CAAC,UAA+B;AAChD,UAAM,QAAQ,gBAAgB,gBAAgB,gBAAgB;AAC9D,UAAM,OAAO,gBAAgB,cAAc,gBAAgB;AAC3D,QAAI,QAAQ,MAAM,QAAQ,aAAa;AACrC,YAAM,eAAe;AACrB,WAAK,CAAC;AAAA,IACR,WAAW,QAAQ,MAAM,QAAQ,WAAW;AAC1C,YAAM,eAAe;AACrB,WAAK,EAAE;AAAA,IACT,WAAW,SAAS,MAAM,QAAQ,cAAc;AAC9C,YAAM,eAAe;AACrB,WAAK,CAAC;AAAA,IACR,WAAW,SAAS,MAAM,QAAQ,aAAa;AAC7C,YAAM,eAAe;AACrB,WAAK,EAAE;AAAA,IACT,WAAW,MAAM,QAAQ,QAAQ;AAC/B,YAAM,eAAe;AACrB,qBAAe,CAAC;AAAA,IAClB,WAAW,MAAM,QAAQ,OAAO;AAC9B,YAAM,eAAe;AACrB,YAAM,QAAQ,aAAa;AAC3B,UAAI,QAAQ,EAAG,gBAAe,QAAQ,CAAC;AAAA,IACzC;AAAA,EACF;AAEA,SAAO,EAAE,aAAa,gBAAgB,UAAU;AAClD;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evinvest/uikit",
-  "version": "0.26.0",
+  "version": "0.27.0",
   "description": "Dep-light React UI kit: shadcn-semantics components with zero @radix-ui / cva, mirroring the ev_lib::uikit Rust feature. Ships the shared design tokens.",
   "license": "BlueOak-1.0.0",
   "publishConfig": {

package/styles/ev.css

@@ -60,8 +60,10 @@
   --accent-warn: #f2c94c;
   --on-accent-warn: #070d18;
   /* lifted off the brand red #da251d, which failed AA on a card. This one value
-   * carries both the fill and the text; the vivid brand red is a gitops
-   * constant, not a UI token. */
+   * is the fill and the text on a bare surface; on its own 10 % tint (a
+   * destructive menu row) the text is the derived --accent-error-ink, which
+   * EV leaves to the contract: #ec8379, 4.83:1 on that tint over popover. The
+   * vivid brand red is a gitops constant, not a UI token. */
   --accent-error: #ef5b52;
   --on-accent-error: #070d18;
 

package/styles/theme.css

@@ -538,6 +538,7 @@
   --color-on-accent-warn: var(--on-accent-warn);
   --color-accent-error: var(--accent-error);
   --color-on-accent-error: var(--on-accent-error);
+  --color-accent-error-ink: var(--accent-error-ink);
 
   /* charts — distinguishable hues carrying no significance */
   --color-chart-1: var(--chart-1);
@@ -565,6 +566,12 @@
    * side — ink over white needs ~47% to clear it, dark lands near 4:1. */
   --input: color-mix(in srgb, var(--ink) 48%, transparent);
   --ring: var(--primary-ink);
+  /* the error role as text on its own 10 % tint — a destructive menu row
+   * (lib#166). The fill alone read 3.76:1 there on EV and 2.48:1 on a dark
+   * brand; 30 % of the ink pulls it toward whichever polarity the text needs.
+   * Derived rather than required so a brand file that predates it still
+   * renders; one that misses the floor pins its own (docs/spec/accents.md). */
+  --accent-error-ink: color-mix(in srgb, var(--accent-error) 70%, var(--ink));
 }
 
 /* Geometry. A `[data-brand]` scope is a theme root of its own, so it restarts

package/styles/tokens.css

@@ -21,6 +21,8 @@
  *              accent-trace · accent-debug · accent-info · accent-warn · accent-error
  *              primary-ink — the primary role as ink on a surface, where the
  *              fill and the readable value are different colours
+ *              accent-error-ink — the error role as text on its own tint;
+ *              derived from accent-error and ink, a palette may pin it
  *   SCALARS    radius · control-* · display-scale · page-* · shell-* · shadows · fonts
  *   MOTION     ev-ease-* · ev-dur-* · ev-rise · ev-stagger(-section)
  *   CHARTS     chart-1 … chart-5
@@ -37,7 +39,8 @@
  *
  * Accents are ordered by significance, not by meaning; see docs/spec/accents.md.
  * Their values are read outside CSS (gitops mirrors them into Discord embed
- * bars), so they stay plain hex — no color-mix.
+ * bars), so they stay plain hex — no color-mix. `accent-error-ink` is not an
+ * accent but a reading of one, so it lives with the derived tokens.
  */
 
 /*
@@ -579,6 +582,7 @@
   --color-on-accent-warn: var(--on-accent-warn);
   --color-accent-error: var(--accent-error);
   --color-on-accent-error: var(--on-accent-error);
+  --color-accent-error-ink: var(--accent-error-ink);
 
   /* charts — distinguishable hues carrying no significance */
   --color-chart-1: var(--chart-1);
@@ -606,6 +610,12 @@
    * side — ink over white needs ~47% to clear it, dark lands near 4:1. */
   --input: color-mix(in srgb, var(--ink) 48%, transparent);
   --ring: var(--primary-ink);
+  /* the error role as text on its own 10 % tint — a destructive menu row
+   * (lib#166). The fill alone read 3.76:1 there on EV and 2.48:1 on a dark
+   * brand; 30 % of the ink pulls it toward whichever polarity the text needs.
+   * Derived rather than required so a brand file that predates it still
+   * renders; one that misses the floor pins its own (docs/spec/accents.md). */
+  --accent-error-ink: color-mix(in srgb, var(--accent-error) 70%, var(--ink));
 }
 
 /* Geometry. A `[data-brand]` scope is a theme root of its own, so it restarts
@@ -754,8 +764,10 @@
   --accent-warn: #f2c94c;
   --on-accent-warn: #070d18;
   /* lifted off the brand red #da251d, which failed AA on a card. This one value
-   * carries both the fill and the text; the vivid brand red is a gitops
-   * constant, not a UI token. */
+   * is the fill and the text on a bare surface; on its own 10 % tint (a
+   * destructive menu row) the text is the derived --accent-error-ink, which
+   * EV leaves to the contract: #ec8379, 4.83:1 on that tint over popover. The
+   * vivid brand red is a gitops constant, not a UI token. */
   --accent-error: #ef5b52;
   --on-accent-error: #070d18;