@kolkrabbi/kol-component 0.225.0 → 0.227.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.225.0",
+  "version": "0.227.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",
@@ -35,7 +35,7 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-icons": "^0.27.1"
+    "@kolkrabbi/kol-icons": "^0.29.0"
   },
   "files": [
     "src",

package/src/atoms/Input.jsx

@@ -56,6 +56,9 @@ import { glyphSize } from '../hooks/glyphLadders.js'
  *     iconLeft/prefix — the paint-bar anatomy ([swatch] FFFFFF is ONE
  *     container, not two boxes; ColorSwatchFieldSizing 2026-08-12). The
  *     consumer owns the node's sizing; the shell's padding frames it.
+ *   slotRight — its trailing mirror: an interactive node inside the shell, after the unit /
+ *     suffix — a combo field's chevron (the design editor's type size, 2026-09-27: the chevron
+ *     sat OUTSIDE the field as a second control). Not aria-hidden: it is a control.
  *
  * Chrome (bg/border/padding/transition/disabled) comes from .kol-control;
  * Input owns prefix/suffix/icon layout + the inner <input> styling.
@@ -75,6 +78,7 @@ export default function Input({
   prefix,
   suffix,
   slotLeft,
+  slotRight,
   affordance,
   unit,
   iconLeft,
@@ -217,6 +221,9 @@ export default function Input({
       {suffix !== undefined && (
         <span aria-hidden="true" className="text-meta pl-1 shrink-0">{suffix}</span>
       )}
+      {slotRight && (
+        <span className="flex items-center shrink-0 pl-1 ml-auto">{slotRight}</span>
+      )}
     </label>
   )
 }

package/src/atoms/SegmentedToggle.jsx

@@ -29,7 +29,8 @@
  *               strip (canvas alignment, transform cluster); onChange is the
  *               action dispatch.
  *   onChange  — handler (newValue) => void
- *   options   — [{ value, label, ariaLabel? }]
+ *   options   — [{ value, label, ariaLabel?, tooltip? }] — a cell whose label is not a string
+ *               (a glyph) shows its `ariaLabel` as a KOL Tooltip; `tooltip` overrides it
  *   variant   — 'default' (shipped chrome: shared outer stroke + dividers,
  *               filled active cell) | 'filled' (the state law's tiles: every
  *               cell a surface-secondary tile with 1px transparent gaps, NO
@@ -53,6 +54,7 @@
  *   className — additional classes on the outer shell
  */
 import { toneClass } from '../utilities/tone.js'
+import { Tooltip } from '../utilities/Popover.jsx'
 
 export default function SegmentedToggle({ value, onChange, options = [], variant = 'default', size = 'md', tone = 'default', ariaLabel, className = '' }) {
   const cellType = { xs: 'kol-mono-8', sm: 'kol-mono-12', md: 'kol-mono-14', lg: 'kol-mono-16' }[size]
@@ -86,8 +88,8 @@ export default function SegmentedToggle({ value, onChange, options = [], variant
       {options.map((opt, i) => {
         const isActive = !stateless && opt.value === value
         return (
+          <Tooltip key={opt.value} asChild label={opt.tooltip ?? (typeof opt.label === 'string' ? null : opt.ariaLabel)}>
           <button
-            key={opt.value}
             type="button"
             role={stateless ? undefined : 'radio'}
             aria-checked={stateless ? undefined : isActive}
@@ -98,6 +100,7 @@ export default function SegmentedToggle({ value, onChange, options = [], variant
           >
             {opt.label}
           </button>
+          </Tooltip>
         )
       })}
     </div>

package/src/atoms/XYPad.jsx

@@ -76,14 +76,14 @@ export default function XYPad({
         ref={ref}
         onPointerDown={onPointerDown}
         onPointerMove={onPointerMove}
-        className="relative w-full aspect-square border border-fg-16 bg-fg-04 rounded cursor-crosshair touch-none"
+        className="relative w-full aspect-square border border-oq-16 bg-fg-04 rounded cursor-crosshair touch-none"
       >
         {/* crosshair guides */}
-        <div className="absolute inset-x-0 top-1/2 border-t border-fg-08" />
-        <div className="absolute inset-y-0 left-1/2 border-l border-fg-08" />
+        <div className="absolute inset-x-0 top-1/2 border-t border-oq-08" />
+        <div className="absolute inset-y-0 left-1/2 border-l border-oq-08" />
         {/* puck */}
         <div
-          className="absolute w-3 h-3 -ml-1.5 -mt-1.5 rounded-full bg-fg-96 border border-fg-04 pointer-events-none"
+          className="absolute w-3 h-3 -ml-1.5 -mt-1.5 rounded-full bg-fg-96 border border-oq-04 pointer-events-none"
           style={{ left: `${puckX}%`, top: `${puckY}%` }}
         />
       </div>

package/src/molecules/FieldRow.jsx

@@ -148,7 +148,7 @@ export default function FieldRow({
       onClick={onPick}
       /* reference empty tile: FILLED, no border — a plain grey slab with the
        * + centred (frame 2026-08-09) */
-      className="flex h-18 w-34 items-center justify-center rounded border-0 bg-fg-04 text-body transition-colors duration-150 enabled:cursor-pointer enabled:hover:text-emphasis disabled:opacity-60"
+      className="flex h-18 w-34 items-center justify-center rounded border-0 bg-fg-04 text-oq-64 transition-colors duration-150 enabled:cursor-pointer enabled:hover:text-emphasis disabled:opacity-60"
     >
       <Icon name="plus" size={16} />
     </button>
@@ -217,7 +217,7 @@ export default function FieldRow({
             type="button"
             aria-label={label}
             onClick={() => onChange(null)}
-            className="inline-flex shrink-0 cursor-pointer border-0 bg-transparent p-0 text-body hover:text-emphasis"
+            className="inline-flex shrink-0 cursor-pointer border-0 bg-transparent p-0 text-oq-64 hover:text-emphasis"
           >
             <Icon name="x" size={12} />
           </button>

package/src/molecules/InspectorSection.jsx

@@ -17,12 +17,42 @@
  * ponytail: a `SectionStack` parent could own this instead of each child
  * declaring it — that is the upgrade path if a consumer ever needs the stack
  * to vary the rule per-gap. One prop is a smaller API than a new component.
+ *
+ * `pane` (editor inspector rebuild, 2026-09-27 — user: "why are we not sectioning off the panes?
+ * saying 'this is type' 'this is transform'"): the Affinity panel shape instead of a labelled form
+ * group — a titled header strip, a padded body, and a FULL-WIDTH rule between panes. Mount panes
+ * in a container with no horizontal padding; each pane pads itself, so its rule runs edge to edge.
+ *
+ * @param {ReactNode} label    the group's name
+ * @param {ReactNode} actions  controls on the label's row, right-aligned
+ * @param {boolean}   divided  a hairline between divided siblings
+ * @param {boolean}   pane     the panel shape: header strip + body, full-width rules between panes
+ * @param {string}    className
  */
-export default function InspectorSection({ label, children, divided = false, className = '' }) {
+export default function InspectorSection({ label, actions = null, children, divided = false, pane = false, className = '' }) {
+  if (pane) {
+    return (
+      <section className={`kol-inspector-pane ${className}`.trim()}>
+        {(label || actions) && (
+          <header className="kol-inspector-pane-head">
+            {label && <h3 className="kol-inspector-pane-title">{label}</h3>}
+            {actions}
+          </header>
+        )}
+        <div className="kol-inspector-pane-body">{children}</div>
+      </section>
+    )
+  }
   return (
     <div className={`flex flex-col gap-2${divided ? ' kol-section--divided' : ''} ${className}`}>
-      {label && (
-        <p className="kol-helper-10 tracking-widest text-meta">{label}</p>
+      {/* `actions` — controls on the label's row, right-aligned (Figma's eye / plus on Fill and
+        * Stroke). From the design editor's own Section, retired into this (editor DS sync,
+        * 2026-09-27). */}
+      {(label || actions) && (
+        <div className="flex items-center gap-2 min-h-6">
+          {label && <p className="kol-helper-10 tracking-widest text-meta flex-1">{label}</p>}
+          {actions}
+        </div>
       )}
       {children}
     </div>

package/src/molecules/MenuItem.jsx

@@ -51,7 +51,7 @@ export function MenuItem({
         ref={popover.refs.setReference}
         {...popover.getReferenceProps()}
         type="button"
-        className={`kol-helper-12 px-3 h-8 inline-flex items-center gap-2 rounded text-body hover:text-emphasis transition-colors ${buttonClassName}`}
+        className={`kol-menu-btn kol-helper-12 px-3 h-8 inline-flex items-center gap-2 rounded text-body hover:text-emphasis transition-colors ${buttonClassName}`}
       >
         <span>{label}</span>
         {caret && (
@@ -125,7 +125,7 @@ export function MenuDropdownItem({ onClick, onPointerEnter, onPointerLeave, disa
       disabled={disabled}
       role="menuitem"
       style={height != null ? { height } : undefined}
-      className={`w-full ${ROW_BY_SIZE[size] ?? ROW_BY_SIZE.sm} shrink-0 inline-flex items-center gap-2 text-body ${hover ? 'hover:text-emphasis' : ''} disabled:opacity-40 disabled:cursor-not-allowed text-left`}
+      className={`kol-menu-btn w-full ${ROW_BY_SIZE[size] ?? ROW_BY_SIZE.sm} shrink-0 inline-flex items-center gap-2 text-body ${hover ? 'hover:text-emphasis' : ''} disabled:opacity-40 disabled:cursor-not-allowed text-left`}
     >
       {prefix && <span className="shrink-0 inline-flex items-center">{prefix}</span>}
       {iconLeft && <span className="shrink-0 w-4 inline-flex items-center justify-center">{iconLeft}</span>}
@@ -140,7 +140,7 @@ export function MenuDropdownItem({ onClick, onPointerEnter, onPointerLeave, disa
 }
 
 export function MenuDropdownDivider() {
-  return <div className="border-t border-fg-08 my-1" />
+  return <div className="border-t border-oq-08 my-1" />
 }
 
 /**
@@ -161,7 +161,7 @@ export function MenuDropdownNest({ prefix, iconLeft, label, children }) {
         type="button"
         onClick={() => setOpen((v) => !v)}
         aria-expanded={open}
-        className="w-full kol-helper-12 px-3 h-8 inline-flex items-center gap-2 text-body hover:text-emphasis text-left"
+        className="kol-menu-btn w-full kol-helper-12 px-3 h-8 inline-flex items-center gap-2 text-body hover:text-emphasis text-left"
       >
         {prefix && <span className="shrink-0 inline-flex items-center">{prefix}</span>}
         {iconLeft && <span className="shrink-0 w-4 inline-flex items-center justify-center">{iconLeft}</span>}
@@ -175,7 +175,7 @@ export function MenuDropdownNest({ prefix, iconLeft, label, children }) {
         />
       </button>
       {open && (
-        <div className="ml-3 border-l border-fg-08">
+        <div className="ml-3 border-l border-oq-08">
           {children}
         </div>
       )}

package/src/molecules/SearchInput.jsx

@@ -245,7 +245,7 @@ export default function SearchInput({
           /* preventDefault on mousedown keeps focus in the input across the clear */
           onMouseDown={(e) => e.preventDefault()}
           onClick={onClear}
-          className="inline-flex items-center justify-center shrink-0 cursor-pointer text-fg-48 hover:text-fg-96 transition-colors"
+          className="inline-flex items-center justify-center shrink-0 cursor-pointer text-oq-48 hover:text-oq-96 transition-colors"
         >
           <Icon name="x" size={12} />
         </button>

package/src/molecules/SectionText.jsx

@@ -101,6 +101,8 @@ export default function SectionText({
   const cls = (base, slot) => `${base} ${slotClass[slot] ?? (slot === 'eyebrow' ? slotClass.label : undefined) ?? ''}`.trim()
   const alignCls = align === 'center' ? 'items-center text-center' : 'items-start text-left'
   const inlineActions = actionsPlacement === 'inline' && !!actions && !!body
+  const inlineHead = actionsPlacement === 'inline' && !!actions && !body && !!headline
+  const headlineNode = headline && <Headline className={cls(`kol-section-text-headline ${headlineClass ?? (HEADLINE_ROLE[headlineSize] ?? HEADLINE_ROLE['heading-02'])}${headlineCase === 'upper' ? ' kol-section-text-caps' : ''}`, 'headline')} style={slotStyle.headline}>{headline}</Headline>
   const bodyNode = body && (typeof body === 'string'
     ? <p className={cls(bodyClass, 'body')} style={slotStyle.body}>{body}</p>
     : <div className={cls(bodyClass, 'body')} style={slotStyle.body}>{body}</div>)
@@ -112,7 +114,19 @@ export default function SectionText({
       {/* `kol-section-text-eyebrow` = uppercase by ROLE (kol-theme ≥0.55.0);
         * `labelClass` is the voice riding beside it */}
       {eb && <span className={cls(`kol-section-text-eyebrow ${ebClass}`, 'eyebrow')} style={slotStyle.eyebrow ?? slotStyle.label}>{eb}</span>}
-      {headline && <Headline className={cls(`kol-section-text-headline ${headlineClass ?? (HEADLINE_ROLE[headlineSize] ?? HEADLINE_ROLE['heading-02'])}${headlineCase === 'upper' ? ' kol-section-text-caps' : ''}`, 'headline')} style={slotStyle.headline}>{headline}</Headline>}
+      {headlineNode && (inlineHead
+        ? (
+          /* INLINE WITH NO BODY → the cluster shares the HEADLINE's row (the tool frame, 2026-09-27 —
+           * a tool's masthead is its title with its controls on the right, apps/media's). This
+           * comment used to sit on the fallthrough below, which stacked the cluster under the
+           * headline instead: the docstring promised a row the code never drew. It WRAPS: on a
+           * phone a wide cluster drops under the title rather than pushing the page sideways. */
+          <div className="flex flex-wrap self-stretch items-baseline justify-between gap-x-6 gap-y-3">
+            {headlineNode}
+            <div className={cls(`${actionsClass} shrink-0`, 'actions')} style={slotStyle.actions}>{actions}</div>
+          </div>
+        )
+        : headlineNode)}
       {bodyNode && (inlineActions
         ? (
           /* SELF-STRETCH (the Hub review, 2026-09-26 — user, on fxr's /settings: "there should
@@ -126,8 +140,7 @@ export default function SectionText({
         )
         : bodyNode)}
       {children}
-      {/* inline with no body → the cluster shares the HEADLINE's row instead */}
-      {actions && !inlineActions && <div className={cls(actionsClass, 'actions')} style={slotStyle.actions}>{actions}</div>}
+      {actions && !inlineActions && !inlineHead && <div className={cls(actionsClass, 'actions')} style={slotStyle.actions}>{actions}</div>}
     </div>
   )
 }

package/src/molecules/SplitToolButton.jsx

@@ -140,7 +140,7 @@ const SplitToolButton = ({
         popover={popover}
         panel={false}
         focus={false}
-        className="w-max bg-surface-secondary border border-fg-08 rounded shadow-lg"
+        className="w-max bg-surface-secondary border border-oq-08 rounded shadow-lg"
       >
         {variants.map((variant) => {
           const isActive = active && variant.id === value

package/src/molecules/Stepper.jsx

@@ -123,7 +123,7 @@ export default function Stepper({
         <button
           type="button"
           onClick={handleIncrement}
-          className="flex items-center justify-center text-meta hover:text-emphasis transition-colors"
+          className="flex items-center justify-center text-oq-48 hover:text-emphasis transition-colors"
           aria-label="Increment"
         >
           <Icon name="chevron-up" size={chevronWidth} />
@@ -131,7 +131,7 @@ export default function Stepper({
         <button
           type="button"
           onClick={handleDecrement}
-          className="flex items-center justify-center text-meta hover:text-emphasis transition-colors"
+          className="flex items-center justify-center text-oq-48 hover:text-emphasis transition-colors"
           aria-label="Decrement"
         >
           <Icon name="chevron-down" size={chevronWidth} />

package/src/molecules/TabsRow.jsx

@@ -71,7 +71,7 @@ export default function TabsRow({ tabs = [], value, onChange, onClose, onMinimis
           type="button"
           onClick={onMinimise}
           aria-label="Minimise"
-          className="ml-auto text-meta hover:text-emphasis self-center"
+          className="ml-auto text-oq-48 hover:text-emphasis self-center"
           style={{ lineHeight: 0 }}
         >
           <Icon name="chevron-down" size={12} />

package/src/organisms/Canvas.jsx

@@ -87,10 +87,15 @@ export function CanvasFrame({
   customRatio,
   aspects,
   bgColor,
-  guideColor = CANVAS_DEFAULTS.guideColor,
+  guideColor,
   children,
 }) {
   const { ratio, label } = resolveAspect(aspect, customRatio, aspects)
+  /* NO guideColor → THEME INK (editor DS sync 2026-09-27, from the design editor's copy, which had
+   * it and this lift had not): the border and label follow the theme, so the frame reads on a light
+   * page and a dark one. A guideColor (a type frame's own colour) still tints both. */
+  const borderColor = guideColor ? `color-mix(in srgb, ${guideColor} 24%, transparent)` : 'var(--kol-oq-24)'
+  const labelColor = guideColor ? `color-mix(in srgb, ${guideColor} 70%, transparent)` : 'var(--kol-fg-64)'
   const virtualH = CANVAS_VIRTUAL_W / ratio
 
   const rectRef = useRef(null)
@@ -127,7 +132,7 @@ export function CanvasFrame({
         className="absolute inset-0 pointer-events-none z-[2]"
         style={{
           border:      '1px solid',
-          borderColor: `color-mix(in srgb, ${guideColor} 24%, transparent)`,
+          borderColor,
         }}
       />
       <span
@@ -139,7 +144,7 @@ export function CanvasFrame({
           fontSize:      10,
           fontFamily:    'var(--kol-font-family-mono)',
           letterSpacing: '0.1em',
-          color:         `color-mix(in srgb, ${guideColor} 70%, transparent)`,
+          color:         labelColor,
           pointerEvents: 'none',
         }}
       >
@@ -197,7 +202,7 @@ export default function Canvas({
   customRatio,
   aspects,
   bgColor,
-  guideColor = CANVAS_DEFAULTS.guideColor,
+  guideColor,
   align = 'center',
   panEnabled = false,
   backdrop,
@@ -820,7 +825,7 @@ export function CanvasRuler({ containerRef, virtualWidth = CANVAS_VIRTUAL_W, dis
   const tickColor   = 'var(--kol-fg-48)'
   const textColor   = 'var(--kol-fg-64)'
   const barBg       = 'var(--kol-fg-08)'
-  const borderColor = 'var(--kol-fg-16)'
+  const borderColor = 'var(--kol-oq-16)'
   const labelStyle  = { fontFamily: 'var(--kol-font-family-mono)', fontSize: 9 }
 
   return (

package/src/organisms/KeyframeEditor.jsx

@@ -42,7 +42,7 @@ export const DEFAULT_KEYFRAMES = [
  *
  * @param {Array<Object>} keyframes - The track; empty falls back to `DEFAULT_KEYFRAMES`
  * @param {Function} onChange - `(keyframes) => void` — the whole track, sorted
- * @param {number} t - The clock's current LAYER-LOCAL phase, 0..1 — what "Add @ playhead" stamps
+ * @param {number} t - The clock's current LAYER-LOCAL phase, 0..1 — what "Add @ playhead" stamps; or a function returning it, read at the click — a clock that runs without re-rendering (the design editor's transport) would otherwise stamp the phase of the last render
  * @param {Function} onSeek - `(t) => void` — a key was selected; seek the clock to its local `t`
  * @param {Function} [onPause] - Called before the seek, so the render holds on the pose
  * @param {Array<{value: string, label: string}>} [easeOptions] - The Ease menu (default `KEYFRAME_EASES`)
@@ -72,7 +72,7 @@ export default function KeyframeEditor({
   const onAdd = () => {
     const base = kfs[sel] || { rot: [0, 0, 0], pos: [0, 0, 0], scale: 1, ease: 'inout' }
     const nk = {
-      t: Math.max(0, Math.min(1, t)),
+      t: Math.max(0, Math.min(1, typeof t === 'function' ? t() : t)),
       rot: [...(base.rot || [0, 0, 0])],
       pos: [...(base.pos || [0, 0, 0])],
       scale: base.scale ?? 1,

package/src/organisms/MediaLibraryPages.jsx

@@ -334,7 +334,7 @@ function FolderRow({ name, icon = 'folder', onClick, onDoubleClick, depth = 0, e
       {onToggle ? (
         <button type="button" aria-label={expanded ? `Collapse ${name}` : `Expand ${name}`} aria-expanded={!!expanded}
           onClick={(e) => { e.stopPropagation(); onToggle() }}
-          className="w-4 h-4 shrink-0 flex items-center justify-center text-fg-32 hover:text-fg-default transition-transform"
+          className="w-4 h-4 shrink-0 flex items-center justify-center text-oq-32 hover:text-fg-default transition-transform"
           style={{ transform: expanded ? 'rotate(90deg)' : 'none' }}>
           <Icon name="chevron-right" size={12} />
         </button>

package/src/organisms/RecordManager.jsx

@@ -27,7 +27,7 @@ const ToolbarIcon = ({ name, label, onClick, active = false, triggerClassName })
        * icon, and only when pressed". Rest is bare; hover is ink only. */
       /* 20px glyph, half-step pad — "TOO SMALL, TOO MUCH PADDING" (user
        * frames 2026-08-09): the reference icons nearly fill their box. */
-      className={`inline-flex cursor-pointer rounded-sm border-0 p-0.5 transition-colors duration-150 ${active ? 'bg-fg-08 text-emphasis' : 'bg-transparent text-body hover:text-emphasis'}`}
+      className={`inline-flex cursor-pointer rounded-sm border-0 p-0.5 transition-colors duration-150 ${active ? 'bg-fg-08 text-emphasis' : 'bg-transparent text-oq-64 hover:text-emphasis'}`}
     >
       <Icon name={name} size={20} />
     </button>
@@ -255,7 +255,7 @@ export default function RecordManager({
               <button
                 type="button"
                 aria-label={reorderLabel(i + 1)}
-                className="inline-flex w-4 cursor-grab touch-none justify-center border-0 bg-transparent p-0 text-meta hover:text-emphasis"
+                className="inline-flex w-4 cursor-grab touch-none justify-center border-0 bg-transparent p-0 text-oq-48 hover:text-emphasis"
                 onPointerDown={(e) => startDrag(e, i)}
               >
                 <Icon name="drag-handle" size={16} />

package/src/organisms/TimelineDock.jsx

@@ -250,7 +250,7 @@ export default function TimelineDock({ tracks = [], t = 0, onSeek, onChange, eas
   }
 
   return (
-    <div className={`kol-timeline-dock border-t border-fg-08 px-4 py-2 flex flex-col gap-1 select-none ${className}`.trim()} style={{ background: 'var(--kol-surface-primary)' }}>
+    <div className={`kol-timeline-dock border-t border-oq-08 px-4 py-2 flex flex-col gap-1 select-none ${className}`.trim()} style={{ background: 'var(--kol-surface-primary)' }}>
       <ScrubRuler t={t} onSeek={onSeek} />
       {tracks.map((track) => (
         <TrackRow key={track.id} track={track} t={t} selected={selected} setSelected={setSelected} writeKeys={writeKeys} />

package/src/organisms/ToolPalette.jsx

@@ -43,7 +43,7 @@ const ToolPalette = ({
   iconComponent = Icon,
   className = '',
 }) => (
-  <div className={`flex items-center gap-1 min-w-0 overflow-x-auto ${className}`.trim()}>
+  <div className={`kol-tool-palette 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" />
       if (it.kind === 'split') {