@cosxai/ui 0.9.0 → 0.10.1

package/package.json

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

package/src/actionbar/ActionBar.tsx

@@ -78,6 +78,25 @@ function loadCollapsed(storageKey: string): boolean {
   }
 }
 
+function loadAdminMode(storageKey: string): boolean {
+  if (typeof window === "undefined") return false;
+  try {
+    return window.localStorage.getItem(`${storageKey}:admin`) === "1";
+  } catch {
+    return false;
+  }
+}
+
+function persistAdminMode(storageKey: string, on: boolean) {
+  if (typeof window === "undefined") return;
+  try {
+    if (on) window.localStorage.setItem(`${storageKey}:admin`, "1");
+    else window.localStorage.removeItem(`${storageKey}:admin`);
+  } catch {
+    /* ignore */
+  }
+}
+
 interface BuildEntry {
   kind: "flat" | "group";
   expansionKey: string;
@@ -175,6 +194,26 @@ export function ActionBar({
     return () => window.removeEventListener("resize", reclamp);
   }, []);
 
+  // ----- Admin mode toggle (any registered item with adminOnly=true) -----
+  // Admin items stay hidden by default; a small toggle button (rendered
+  // between the grip and the first item) flips this to reveal them.
+  // Persisted per storageKey so admin users stay in the mode they
+  // last chose across route navigations. When no consumer registers
+  // admin items, the toggle button doesn't render.
+  const [adminMode, setAdminMode] = useState<boolean>(() => loadAdminMode(storageKey));
+  const toggleAdminMode = useCallback(() => {
+    setAdminMode((prev) => {
+      const next = !prev;
+      persistAdminMode(storageKey, next);
+      return next;
+    });
+  }, [storageKey]);
+  const hasAdminItems = useMemo(() => items.some((it) => it.adminOnly === true), [items]);
+  const visibleItems = useMemo(
+    () => (adminMode ? items : items.filter((it) => it.adminOnly !== true)),
+    [items, adminMode],
+  );
+
   // ----- Collapsed state (phone only) -----
   const [collapsed, setCollapsed] = useState<boolean>(() => loadCollapsed(storageKey));
   useEffect(() => {
@@ -241,14 +280,14 @@ export function ActionBar({
   const { leadingEntries, trailingEntries } = useMemo(() => {
     const leading: ActionBarItem[] = [];
     const trailing: ActionBarItem[] = [];
-    for (const it of items) {
+    for (const it of visibleItems) {
       (it.slot === "trailing" ? trailing : leading).push(it);
     }
     return {
       leadingEntries: buildEntries(leading),
       trailingEntries: buildEntries(trailing),
     };
-  }, [items]);
+  }, [visibleItems]);
   const entries = useMemo(
     () => [...leadingEntries, ...trailingEntries],
     [leadingEntries, trailingEntries],
@@ -359,12 +398,21 @@ export function ActionBar({
         alignItems: "center",
         gap: 4,
         zIndex: 80,
-        background: "var(--ck-bg-surface)",
-        border: "1px solid var(--ck-border-subtle)",
+        // Subtle accent tint when admin mode is active so the bar reads
+        // as "elevated privileges on" without a full colour swap.
+        background: adminMode
+          ? "color-mix(in oklab, var(--ck-accent, #4f46e5) 8%, var(--ck-bg-surface))"
+          : "var(--ck-bg-surface)",
+        border: `1px solid ${
+          adminMode
+            ? "var(--ck-accent, #4f46e5)"
+            : "var(--ck-border-subtle)"
+        }`,
         borderRadius: 999,
         boxShadow: "var(--ck-shadow-3)",
         fontFamily: "var(--ck-font-sans)",
         color: "var(--ck-text-primary)",
+        transition: "background 180ms ease-out, border-color 180ms ease-out",
         ...style,
       }}
     >
@@ -411,6 +459,63 @@ export function ActionBar({
         </button>
       ) : null}
 
+      {/* Admin-mode toggle. Only renders when at least one registered
+          item has adminOnly=true. Styled to match the grip: no border,
+          transparent background, icon-only. Muted stroke by default,
+          accent when active — same visual weight as the other bar
+          items so the affordance sits comfortably next to Theme /
+          Share / etc. */}
+      {hasAdminItems && (
+        <button
+          type="button"
+          onClick={toggleAdminMode}
+          aria-label={adminMode ? "Exit admin mode" : "Enter admin mode"}
+          aria-pressed={adminMode}
+          title={adminMode ? "Admin mode · click to exit" : "Enter admin mode"}
+          data-ck-actionbar-admin-toggle
+          data-active={adminMode ? "1" : "0"}
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: 28,
+            height: 28,
+            padding: 0,
+            marginLeft: 2,
+            marginRight: 2,
+            borderRadius: 999,
+            background: "transparent",
+            color: adminMode
+              ? "var(--ck-accent, #4f46e5)"
+              : "var(--ck-text-secondary, #666)",
+            border: "none",
+            cursor: "pointer",
+            transition: "color 160ms ease-out",
+          }}
+        >
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.8"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden
+          >
+            {/* Sliders/tuning icon — reads as "surface more controls",
+                which is exactly what admin mode does. Two horizontal
+                tracks with a knob on each; the active vs. inactive
+                distinction comes from stroke colour, not fill. */}
+            <line x1="4" y1="8" x2="20" y2="8" />
+            <line x1="4" y1="16" x2="20" y2="16" />
+            <circle cx="10" cy="8" r="2" fill="currentColor" />
+            <circle cx="15" cy="16" r="2" fill="currentColor" />
+          </svg>
+        </button>
+      )}
+
       {/* Balancing leading spacer — only present when the right side
           holds ONLY a status dot (no trailing items). With a left
           and right spacer of equal flex weight, the leading items

package/src/actionbar/types.ts

@@ -47,6 +47,19 @@ export interface ActionBarItem {
   // a flex spacer so they pin to the right edge regardless of
   // registration order — system status indicators belong here.
   slot?: ActionBarItemSlot;
+  // Marks this item as admin-only. Hidden until the ActionBar's
+  // admin-mode toggle is switched on. The toggle button auto-appears
+  // on the bar whenever at least one registered item has adminOnly=
+  // true; when no consumer registers such items, the toggle stays
+  // hidden and the bar looks exactly as it always did.
+  //
+  // Use for elevated-privilege actions that would confuse regular
+  // users (version history, retry render, delete forever, etc.).
+  // Consumer decides eligibility upstream — typically by only
+  // registering the item when the caller has `capabilities.manage`
+  // (or an equivalent gate) === true. The kit does not check
+  // permissions; it only handles the toggle UX.
+  adminOnly?: boolean;
 }
 
 // Category definition — declared at the provider level. Drives