@cosxai/ui 0.4.5 → 0.4.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosxai/ui",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "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/styles/index.css

@@ -188,9 +188,18 @@ html[data-ck-chrome="seamless"] .ck-card__foot {
 /* Children inside an open disclosure group sit on top of the wrapper's
    --ck-accent-muted pill. The default gray hover above reads as a hue
    collision against the coral/indigo wrapper — swap in an accent-blended
-   overlay so the hover signal stays in the accent family. */
+   overlay so the hover signal stays in the accent family.
+
+   30% blend (was 18% in 0.4.5): 18% layered onto an --ck-accent-muted
+   wrapper (already 8–14% accent depending on chrome) composites to
+   ~30% effective saturation. At that low saturation translucent
+   orange / coral / blue all read as washed-out salmon — the hover
+   loses its hue identity against the solid --ck-accent text right
+   beside it. 30% pushes the overlay past the "dilution reads as
+   pink" inflection so the workspace's actual brand colour is
+   recognisable.  */
 .ck-actionbar-group--open .ck-actionbar-btn:hover:not(:disabled):not(.ck-actionbar-btn--primary) {
-  background: color-mix(in oklab, var(--ck-accent) 18%, transparent);
+  background: color-mix(in oklab, var(--ck-accent) 30%, transparent);
 }
 .ck-actionbar-btn--primary {
   background: var(--ck-accent);