@kolkrabbi/kol-component 0.221.0 → 0.222.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.221.0",
+  "version": "0.222.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",

package/src/index.js

@@ -120,6 +120,7 @@ export { default as Slider } from './molecules/Slider.jsx'
 export { default as SpecList } from './molecules/SpecList.jsx'
 export { default as SpectrumControls, HueStrip, SBSquare, WheelTriangle } from './organisms/SpectrumControls.jsx'
 export { default as SplitToolButton } from './molecules/SplitToolButton.jsx'
+export { default as ToolPalette } from './organisms/ToolPalette.jsx'
 export { default as SwatchControls, SwatchStack, EyedropPick } from './molecules/SwatchControls.jsx'
 export { default as TabsRow } from './molecules/TabsRow.jsx'
 

package/src/molecules/SplitToolButton.jsx

@@ -54,7 +54,14 @@ import { glyphSize } from '../hooks/glyphLadders.js'
  * @param {boolean} props.active - Whether this tool group is the active tool — lit trigger, `aria-pressed`
  * @param {'xs'|'sm'|'md'|'lg'} props.size - Trigger box on the pinned-square ladder — 22 · 26 · 32 · 40 (default: 'md'). The glyph follows the SOLO ladder; it is never set at the call site
  * @param {boolean} props.blurOnClick - Blur the trigger after click so a canvas can reclaim focus and refresh its cursor (default: false)
+ * @param {Function} props.onTrigger - Replaces the trigger's arm: fires with the trigger variant's id on every click. For a fold of one-shot ACTIONS (Boolean: the trigger re-runs the last-picked op) — no pressed state is implied (default: arm via `onChange`)
+ * @param {boolean} props.disabled - Disables the trigger — `.kol-btn:disabled` dims it (default: false)
+ * @param {ElementType} props.iconComponent - Glyph renderer receiving `{ name, size, className, style }` — Button's seam (default: DS `Icon`)
  * @param {string} props.aria-label - Trigger label fallback when no variant resolves
+ *
+ * A variant may carry its own `onSelect()` — that row does its own thing instead of `onChange`
+ * (Text: "Text" arms the tool, "Kinetic type" inserts a layer). Without `lastPicked` the trigger
+ * remembers the last row picked from the menu (kol-fxr ToolPalette, editor-panels-the-held-specs A3).
  * @param {string} props.className - Additional classes on the trigger
  */
 
@@ -77,6 +84,9 @@ const SplitToolButton = ({
   active = false,
   size = 'md',
   blurOnClick = false,
+  onTrigger,
+  disabled = false,
+  iconComponent: IconC = Icon,
   className = '',
   'aria-label': ariaLabel,
 }) => {
@@ -89,20 +99,23 @@ const SplitToolButton = ({
     role: 'menu',
   })
 
+  const [ownLast, setOwnLast] = useState(null)
   const byId = (id) => variants.find((v) => v.id === id)
-  const triggerVariant = (active && byId(value)) || byId(lastPicked) || variants[0]
+  const triggerVariant = (active && byId(value)) || byId(lastPicked ?? ownLast) || variants[0]
   const label = triggerVariant?.label ?? ariaLabel
   const title = triggerVariant?.shortcut ? `${label} (${triggerVariant.shortcut})` : label
 
   /* Arm the last-picked variant on the same click that toggles the menu —
    * floating-ui's useClick (on the reference) handles the open/close half. */
   const handleTriggerClick = (event) => {
-    if (!active && triggerVariant) onChange?.(triggerVariant.id)
+    if (onTrigger) { if (triggerVariant) onTrigger(triggerVariant.id) }
+    else if (!active && triggerVariant) onChange?.(triggerVariant.id)
     if (blurOnClick) event.currentTarget.blur()
   }
 
   const handleSelect = (variant) => {
-    onChange?.(variant.id)
+    if (variant.onSelect) variant.onSelect()
+    else { onChange?.(variant.id); setOwnLast(variant.id) }
     setOpen(false)
   }
 
@@ -113,11 +126,12 @@ const SplitToolButton = ({
         {...popover.getReferenceProps({ onClick: handleTriggerClick })}
         type="button"
         className={`relative kol-btn kol-btn-ghost kol-btn-icon kol-btn-${size} ${active ? 'kol-btn-pressed' : 'kol-btn-quiet'} ${className}`.trim()}
-        aria-pressed={active}
+        disabled={disabled}
+        aria-pressed={onTrigger ? undefined : active}
         aria-label={label}
         title={title}
       >
-        {triggerVariant && <Icon name={triggerVariant.icon} size={glyphSize(size, true)} />}
+        {triggerVariant && <IconC name={triggerVariant.icon} size={glyphSize(size, true)} />}
         <FoldIndicator />
       </button>
       {/* w-max — floats size to content, the menu-family law (2026-08-09). */}
@@ -137,7 +151,7 @@ const SplitToolButton = ({
               className="w-full kol-helper-12 px-3 h-8 inline-flex items-center gap-2 text-body hover:text-emphasis text-left"
             >
               <span className="shrink-0 w-4 inline-flex items-center justify-center">
-                <Icon name={variant.icon} size={14} />
+                <IconC name={variant.icon} size={14} />
               </span>
               <span className="flex-1 truncate">{variant.label}</span>
               <span className="kol-helper-10 text-emphasis shrink-0">

package/src/organisms/ToolPalette.jsx

@@ -0,0 +1,70 @@
+import { Icon } from '@kolkrabbi/kol-icons'
+import Button from '../atoms/Button.jsx'
+import Divider from '../atoms/Divider.jsx'
+import SplitToolButton from '../molecules/SplitToolButton.jsx'
+
+/**
+ * ToolPalette — the editor's tool bar as one row (kol-fxr `shell/panels/ToolPalette.jsx`,
+ * editor-panels-the-held-specs A3, 2026-09-25). Four kinds of cell, all on one pinned-square rung:
+ *
+ * - `tool` — arms a mode; lit while `activeId` is its id
+ * - `action` — a one-shot operation (flip, rotate, duplicate)
+ * - `split` — a fold of variants: `SplitToolButton`. A fold of TOOLS arms (Shape); a fold with
+ *   `action: true` runs its variants instead, the trigger re-running the last-picked one
+ *   (Boolean); a variant with `action: true` inside a tool fold is a one-shot row (Text →
+ *   Kinetic type)
+ * - `divider` — a hairline between groups
+ *
+ * The store is the consumer's (the source read `useTool` + `useComposeState` directly): what
+ * is armed, what each action does and **when an item is disabled** — needs a selection, needs
+ * two booleanable layers — all arrive in `items` and are never inferred here.
+ *
+ * `min-w-0 overflow-x-auto`: at a narrow width the row scrolls in its own box instead of
+ * painting over the rail beside it, as the source learned.
+ *
+ * @param {Object} props
+ * @param {Array<{kind: 'tool'|'action'|'split'|'divider', id?: string, icon?: string, label?: string, shortcut?: string, disabled?: boolean, action?: boolean, variants?: Array<{id: string, label: string, icon: string, shortcut?: string, action?: boolean}>}>} props.items - The row, left to right
+ * @param {string} props.activeId - The armed tool's id — a `tool` item's, or any variant's of a tool fold
+ * @param {Function} props.onSelect - (id) => void — a tool (or a tool variant) was armed
+ * @param {Function} props.onAction - (id) => void — an action (or an action variant) was run
+ * @param {'xs'|'sm'|'md'|'lg'} props.size - The rung — 22 · 26 · 32 · 40 (default: 'md', the source's 32)
+ * @param {ElementType} props.iconComponent - Glyph renderer receiving `{ name, size, className, style }` (default: DS `Icon`)
+ * @param {string} props.className - Additional classes on the row
+ */
+const blur = (e) => e.currentTarget.blur()
+
+const ToolPalette = ({
+  items = [],
+  activeId,
+  onSelect,
+  onAction,
+  size = 'md',
+  iconComponent = Icon,
+  className = '',
+}) => (
+  <div className={`flex items-center gap-1 min-w-0 overflow-x-auto ${className}`.trim()}>
+    {items.map((it, i) => {
+      if (it.kind === 'divider') return <Divider key={`d${i}`} variant="vertical" height={20} className="mx-1.5 shrink-0" />
+      const tip = it.shortcut ? `${it.label} (${it.shortcut})` : it.label
+      if (it.kind === 'split') {
+        const variants = (it.variants ?? []).map((v) => (v.action && !it.action ? { ...v, onSelect: () => onAction?.(v.id) } : v))
+        const run = (id) => (it.action ? onAction : onSelect)?.(id)
+        return (
+          <SplitToolButton key={it.id} variants={variants} value={activeId} size={size} iconComponent={iconComponent}
+            active={!it.action && variants.some((v) => v.id === activeId && !v.action)}
+            onChange={run} onTrigger={it.action ? run : undefined}
+            disabled={it.disabled} blurOnClick aria-label={it.label} />
+        )
+      }
+      const isTool = it.kind === 'tool'
+      return (
+        <Button key={it.id} variant="ghost" size={size} quiet iconOnly={it.icon} iconComponent={iconComponent}
+          pressed={isTool ? activeId === it.id : undefined} disabled={it.disabled}
+          aria-label={it.label} title={tip}
+          onClick={(e) => { (isTool ? onSelect : onAction)?.(it.id); blur(e) }} />
+      )
+    })}
+  </div>
+)
+
+export default ToolPalette