@cosxai/ui 0.4.6 → 0.4.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosxai/ui",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "description": "COSX design system — React 19 component primitives shared across product-meta and other consumers",
   "license": "UNLICENSED",
   "type": "module",

package/src/actionbar/useActionBarItems.ts

@@ -1,15 +1,33 @@
-import { useContext, useEffect, useMemo } from "react";
+import { useContext, useEffect } from "react";
 import { ActionBarContext } from "./actionbar-context";
 import type { ActionBarItem } from "./types";
 
 // Register a set of items into the global action-bar registry.
 // Auto-unregisters on unmount + on sourceKey change.
 //
-// `items` is the live array — pass a useMemo'd array to avoid
-// re-registration thrash. The provider's register() does shallow
-// equality, so passing a NEW array with identical refs is fine,
-// but a NEW array with all-new item objects (from inline JSX
-// blocks) will re-register every render.
+// **Pass a `useMemo`'d array.** The effect re-registers whenever
+// the array identity changes; the provider's `register()` then
+// dedups by item-by-item identity, so a fresh array with identical
+// item refs is cheap (state stays === and no re-render fires) but
+// a fresh array with NEW item objects (e.g. consumers whose
+// onClick closures captured updated state) does re-register —
+// downstream renders pick up the fresh handlers.
+//
+// Inline-array consumers (`useActionBarItems(key, [{...}])`)
+// will allocate new items every render and loop infinitely
+// through `register → setState → re-render → register`. The
+// useMemo on the caller side is what keeps that loop bounded
+// to "items whose deps actually changed".
+//
+// Previous versions wrapped items in a local `useMemo` keyed by
+// `[items.length, items.map(i => i.key).join('|')]`. That gate
+// suppressed identity updates whenever the keys + length stayed
+// stable, which is precisely the case for a selection-mode
+// toolbar whose buttons are fixed but whose onClicks close over
+// changing state — they ended up registered ONCE with the first
+// render's closures and never refreshed, shipping stale state to
+// every subsequent click. The gate is gone; the provider's
+// shallow item-identity dedup is the single source of truth.
 //
 // **Important**: the useEffect deps below intentionally do NOT
 // include the ctx object itself — only its stable function refs
@@ -27,15 +45,10 @@ export function useActionBarItems(sourceKey: string, items: ActionBarItem[]) {
     throw new Error("useActionBarItems must be used within <ActionBarProvider>");
   }
   const { register, unregister } = ctx;
-  const memo = useMemo(
-    () => items,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [items.length, items.map((i) => i.key).join("|")],
-  );
   useEffect(() => {
-    register(sourceKey, memo);
+    register(sourceKey, items);
     return () => unregister(sourceKey);
-  }, [register, unregister, sourceKey, memo]);
+  }, [register, unregister, sourceKey, items]);
 }
 
 export function useActionBarItemsContext() {

package/src/dialogs/Modal.tsx

@@ -161,6 +161,14 @@ export function ModalHeader({ title, subtitle, onClose, titleId }: ModalHeaderPr
           type="button"
           onClick={onClose}
           aria-label="Close"
+          onMouseEnter={(e) => {
+            (e.currentTarget as HTMLButtonElement).style.background =
+              "var(--ck-bg-muted)";
+          }}
+          onMouseLeave={(e) => {
+            (e.currentTarget as HTMLButtonElement).style.background =
+              "transparent";
+          }}
           style={{
             border: "none",
             background: "transparent",
@@ -168,7 +176,10 @@ export function ModalHeader({ title, subtitle, onClose, titleId }: ModalHeaderPr
             cursor: "pointer",
             fontSize: 18,
             lineHeight: 1,
-            padding: 2,
+            padding: 4,
+            borderRadius: "var(--ck-radius-sm, 4px)",
+            transition:
+              "background var(--ck-dur-fast) var(--ck-ease)",
           }}
         >
           ×

package/src/styles/chrome-editorial.css

@@ -116,6 +116,18 @@ html[data-ck-chrome="editorial"] [data-ck-leftnav] {
   border-right-color: var(--ck-border-subtle);
 }
 
+/* Nav-item hover — match the actionbar / button hover token so
+   every interactive surface in the editorial chrome reads as
+   actionable on pointer enter. The sketch / ambient / riso / etc.
+   chromes have always carried this rule; editorial was the only
+   gap (consumers saw rail items as static even though they're
+   navigable). Active rows keep their accent-muted background from
+   the base NavItem inline style, so the `:not([data-active="true"])`
+   guard is the same shape the other chromes use. */
+html[data-ck-chrome="editorial"] [data-ck-navitem]:not([data-active="true"]):hover {
+  background: var(--ck-bg-muted);
+}
+
 /* Topbar — flatten to the paper, lose the bottom border (the
    folio rule under it is the visual divider in editorial). */
 html[data-ck-chrome="editorial"] [data-ck-topbar] {