@cosxai/ui 0.3.2 → 0.3.4

package/package.json

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

package/src/actionbar/ActionBar.tsx

@@ -346,7 +346,15 @@ export function ActionBar({
               bottom: pos.bottom,
             }),
         height: BAR_HEIGHT,
-        padding: "0 6px 0 0",
+        // Symmetric horizontal padding so the bar's interior content
+        // area is centred. Previously only the right side had 6px
+        // padding (legacy from when the right edge held normal items
+        // and the left edge was an interactive grip), which made the
+        // grip sit flush against the left curve while the rightmost
+        // element (now the status dot) had visible breathing room.
+        // The asymmetry pushed the leading items a few pixels left of
+        // the bar's true centre.
+        padding: "0 6px",
         display: "flex",
         alignItems: "center",
         gap: 4,
@@ -403,6 +411,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)}
 
@@ -414,7 +439,7 @@ export function ActionBar({
         <span
           aria-hidden
           data-ck-actionbar-spacer
-          style={{ flex: "1 1 auto", minWidth: 12 }}
+          style={{ flex: "1 1 auto", minWidth: 0 }}
         />
       )}