@cosxai/ui 1.0.0-alpha.13 → 1.0.0-alpha.15

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 1.0.0-alpha.15
+
+- ActionBar `foldable={false}`: always shown in full — no fold button, and a stored fold is ignored (a page whose bar is its whole toolbar, like a document viewer).
+
+## 1.0.0-alpha.14
+
+- ActionBar: an action can carry `divider` (a rule before it), `iconOnly` (just the icon, label in the tooltip) and `wrap` + `wrapKey` (wrap the button in a menu or popover trigger so it opens something anchored to itself).
+
 ## 1.0.0-alpha.13 (2026-10-04)
 
 - BottomSheet: the scrolling list reaches the sheet's sides (its padding

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosxai/ui",
-  "version": "1.0.0-alpha.13",
+  "version": "1.0.0-alpha.15",
   "description": "COSX Design System 3.0 \u2014 tokens, Tailwind v4 theme and React components",
   "license": "UNLICENSED",
   "type": "module",

package/src/components/ActionBar.tsx

@@ -11,6 +11,7 @@ import {
   useRef,
   useState,
   type KeyboardEvent as ReactKeyboardEvent,
+  type ReactElement,
   type ReactNode,
 } from 'react';
 
@@ -35,6 +36,14 @@ export type ActionBarAction = {
   disabledReason?: string | undefined;
   /** Actions of a kind: more than two sharing a group fold into one menu. */
   group?: string | undefined;
+  /** A thin rule before it, setting it apart from the actions on its left. */
+  divider?: boolean | undefined;
+  /** Always just the icon (a star, ⋯); the label names it for screen readers and the tooltip. */
+  iconOnly?: boolean | undefined;
+  /** Wrap the button, e.g. in a menu's or popover's trigger (asChild), so it opens something anchored to itself. */
+  wrap?: ((button: ReactElement) => ReactElement) | undefined;
+  /** Changes when what `wrap` shows changes (the bar re-renders only when an action's fields change). */
+  wrapKey?: string | undefined;
 };
 
 export type ActionBarSelection = {
@@ -126,7 +135,7 @@ function editable(t: EventTarget | null): boolean {
 const dialogOpen = () => Boolean(document.querySelector('[role="dialog"][data-state="open"], [role="alertdialog"][data-state="open"]'));
 
 const signature = (a: ActionBarAction[] | null | undefined) =>
-  a ? a.map((x) => [x.id, x.label, x.shortcut, x.active, x.disabled, x.disabledReason, x.group, x.icon?.displayName].join('\u0001')).join('\u0002') : '';
+  a ? a.map((x) => [x.id, x.label, x.shortcut, x.active, x.disabled, x.disabledReason, x.group, x.icon?.displayName, x.divider, x.iconOnly, x.wrapKey].join('\u0001')).join('\u0002') : '';
 
 // ─── Provider ─────────────────────────────────────────────────────────
 
@@ -384,6 +393,8 @@ export type ActionBarProps = {
   labels?: ActionBarLabels | undefined;
   /** Lay it out in place (documentation, a demo) instead of floating: no fixed position, no dragging. */
   inline?: boolean | undefined;
+  /** false: always shown in full — no fold button, a stored fold is ignored (a page whose bar is its whole toolbar). @default true */
+  foldable?: boolean | undefined;
   className?: string | undefined;
 };
 
@@ -400,7 +411,7 @@ const itemCls = cn(
  * Narrowing drops shortcuts, then labels, then folds to a handle on the
  * left edge. Drag by the grip; double-click it to reset.
  */
-export function ActionBar({ presentation, hidden: hiddenProp, maxActions = 6, labels = {}, inline = false, className }: ActionBarProps) {
+export function ActionBar({ presentation, hidden: hiddenProp, maxActions = 6, labels = {}, inline = false, foldable = true, className }: ActionBarProps) {
   const ctx = useCtx();
   const { idle, selection, mode, hidden, activity } = ctx.read();
   const { prefs, setPrefs } = ctx;
@@ -411,7 +422,7 @@ export function ActionBar({ presentation, hidden: hiddenProp, maxActions = 6, la
   const state: ActionBarState = mode ? 'mode' : selection ? 'selection' : 'idle';
   const auto = presentation ?? presentationFor(width);
   // Entering a selection or a mode unfolds it; back in idle the user's fold state returns.
-  const folded = state === 'idle' && (auto === 'folded' || (presentation === undefined && prefs.folded));
+  const folded = foldable && state === 'idle' && (auto === 'folded' || (presentation === undefined && prefs.folded));
   const shown: Exclude<ActionBarPresentation, 'folded'> = auto === 'folded' ? 'icons' : auto;
 
   // Pull the bar back into view when the window shrinks.
@@ -465,8 +476,8 @@ export function ActionBar({ presentation, hidden: hiddenProp, maxActions = 6, la
   const renderAction = (a: ActionBarAction) => {
     const keys = a.shortcut ? formatShortcut(a.shortcut) : null;
     const Glyph = a.icon;
-    const iconOnly = shown === 'icons' && Glyph;
-    const button = (
+    const iconOnly = (shown === 'icons' || a.iconOnly) && Glyph;
+    const plain = (
       <button
         type="button"
         aria-label={iconOnly ? a.label : undefined}
@@ -479,16 +490,18 @@ export function ActionBar({ presentation, hidden: hiddenProp, maxActions = 6, la
       >
         {Glyph && <Glyph size={16} strokeWidth={1.75} aria-hidden />}
         {!iconOnly && <span>{a.label}</span>}
-        {shown === 'full' && keys && <kbd className="font-sans text-meta font-medium opacity-55">{keys}</kbd>}
+        {shown === 'full' && keys && !iconOnly && <kbd className="font-sans text-meta font-medium opacity-55">{keys}</kbd>}
       </button>
     );
-    const hint = a.disabledReason ?? (shown !== 'full' ? [a.label, keys].filter(Boolean).join(' · ') : null);
-    return hint && (iconOnly || a.disabledReason || keys) ? (
-      <Tooltip key={a.id} content={hint}>
-        {button}
-      </Tooltip>
-    ) : (
-      <Fragment key={a.id}>{button}</Fragment>
+    const button = a.wrap ? a.wrap(plain) : plain;
+    const rule = a.divider ? <span aria-hidden className="mx-1 h-5 w-px shrink-0 bg-white/20 ink:bg-ink/20" /> : null;
+    const hint = a.disabledReason ?? (shown !== 'full' || iconOnly ? [a.label, keys].filter(Boolean).join(' · ') : null);
+    const tipped = hint && (iconOnly || a.disabledReason || keys) ? <Tooltip content={hint}>{button}</Tooltip> : button;
+    return (
+      <Fragment key={a.id}>
+        {rule}
+        {tipped}
+      </Fragment>
     );
   };
 
@@ -595,7 +608,7 @@ export function ActionBar({ presentation, hidden: hiddenProp, maxActions = 6, la
           </button>
         </>
       )}
-      {state === 'idle' && (
+      {state === 'idle' && foldable && (
         <Tooltip content={`${labels.fold ?? 'Fold the action bar'} · \\`}>
           <button type="button" aria-label={labels.fold ?? 'Fold the action bar'} onClick={() => setPrefs({ folded: true })} className={cn(itemCls, 'px-2 opacity-60 hover:opacity-100 max-md:hidden')}>
             <ChevronsLeft size={16} aria-hidden />