@cosxai/ui 0.3.1 → 0.3.3

package/package.json

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

package/src/actionbar/ActionBar.tsx

@@ -276,7 +276,11 @@ export function ActionBar({
   }, [expandedKey, setExpandedKey]);
 
   // ----- Empty state -----
-  if (items.length === 0) return null;
+  // Bar renders when EITHER any page item is registered OR the
+  // status dot is set. Without the statusDot check, an app whose
+  // only consumer is `useActionBarStatusDot` (e.g. a system-status-
+  // only surface) would never see the bar at all.
+  if (items.length === 0 && !statusDot) return null;
 
   // ----- Collapsed handle (phone only) -----
   if (isPhone && collapsibleOnPhone && collapsed) {
@@ -399,6 +403,23 @@ export function ActionBar({
         </button>
       ) : null}
 
+      {/* 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
+          centre between the grip and the status dot. Without this,
+          a solo leading item (e.g. just "Theme · Light") looks
+          left-anchored next to the grip with a visible gap before
+          the dot, which reads as unbalanced. When trailing items ARE
+          present, they take that role on the right and the leading
+          group goes back to its natural left-anchored packing. */}
+      {leadingEntries.length > 0 && trailingEntries.length === 0 && statusDot && (
+        <span
+          aria-hidden
+          data-ck-actionbar-spacer="leading"
+          style={{ flex: "1 1 auto", minWidth: 0 }}
+        />
+      )}
+
       {/* Leading entries — flat items + group heads with disclosure regions. */}
       {leadingEntries.map(renderEntry)}