@kolkrabbi/kol-component 0.244.0 → 0.246.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.244.0",
+  "version": "0.246.0",
   "description": "The core component library",
   "license": "MIT",
   "type": "module",
@@ -26,8 +26,8 @@
     "embla-carousel-react": "^8.6.0",
     "pdfjs-dist": "^6.3.289",
     "react-syntax-highlighter": "^16.1.1",
-    "@kolkrabbi/kol-search": "^0.3.0",
-    "@kolkrabbi/kol-markdown": "^0.1.3"
+    "@kolkrabbi/kol-markdown": "^0.1.3",
+    "@kolkrabbi/kol-search": "^0.3.0"
   },
   "peerDependencies": {
     "@kolkrabbi/kol-icons": ">=0.22.0",

package/src/atoms/SegmentedToggle.jsx

@@ -29,8 +29,12 @@
  *               strip (canvas alignment, transform cluster); onChange is the
  *               action dispatch.
  *   onChange  — handler (newValue) => void
- *   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
+ *   options   — [{ value, label, ariaLabel?, tooltip?, disabled? }] — a cell whose label is not a string
+ *               (a glyph) shows its `ariaLabel` as a KOL Tooltip; `tooltip` overrides it.
+ *               `disabled` (kol-fxr 2026-10-09): the cell draws the family's disabled ink
+ *               (`aria-disabled`, not the attribute — the tooltip still gives the reason),
+ *               refuses the press, and ←/→ step over it. It may still be the current `value`
+ *               (the ground changed under it): selected + disabled, no throw.
  *   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
@@ -66,7 +70,12 @@ export default function SegmentedToggle({ value, onChange, options = [], variant
     const dir = { ArrowLeft: -1, ArrowUp: -1, ArrowRight: 1, ArrowDown: 1 }[e.key]
     if (!dir || !options.length) return
     e.preventDefault()
-    const next = (focusIdx + dir + options.length) % options.length
+    let next = focusIdx
+    for (let step = 0; step < options.length; step++) {
+      next = (next + dir + options.length) % options.length
+      if (!options[next].disabled) break
+    }
+    if (options[next].disabled) return
     onChange?.(options[next].value)
     e.currentTarget.children[next]?.focus()
   }
@@ -94,8 +103,9 @@ export default function SegmentedToggle({ value, onChange, options = [], variant
             role={stateless ? undefined : 'radio'}
             aria-checked={stateless ? undefined : isActive}
             aria-label={opt.ariaLabel}
+            aria-disabled={opt.disabled || undefined}
             tabIndex={stateless ? 0 : (i === focusIdx ? 0 : -1)}
-            onClick={() => onChange?.(opt.value)}
+            onClick={opt.disabled ? undefined : () => onChange?.(opt.value)}
             className={['kol-seg-cell', cellType, isActive && 'is-active'].filter(Boolean).join(' ')}
           >
             {opt.label}

package/src/hooks/usePointerSort.js

@@ -0,0 +1,51 @@
+import { useRef, useState } from 'react'
+
+/**
+ * usePointerSort — a vertical reorder by pointer, the ~50 lines `RecordManager` carried inline
+ * (2026-08-09, "util before any dependency"), lifted so `StepList` is not a second copy (kol-fxr
+ * StepList, 2026-10-09). Pointer events, so a finger works where HTML drag does not.
+ *
+ *   const { drag, startDrag } = usePointerSort(onReorder)
+ *   <button onPointerDown={(e) => startDrag(e, i, rowEls)} className="touch-none">⠿</button>
+ *
+ * `startDrag(e, from, rowEls)`: `rowEls` is the list of row elements in order (a NodeList or an
+ * array); their rects are measured once at the start. While the pointer is down `drag` is
+ * `{ from, over, x, y }` — `over` is the row under the pointer, `x`/`y` the pointer, for a
+ * floating label — and null otherwise. On release `onReorder(from, over)` fires when they differ.
+ * Without `onReorder` a start is a no-op, so a handle can render conditionally on it.
+ */
+export default function usePointerSort(onReorder) {
+  const dragRef = useRef(null)
+  const [drag, setDrag] = useState(null)
+
+  const startDrag = (e, from, rowEls) => {
+    if (!onReorder) return
+    e.preventDefault()
+    if (!rowEls?.length) return
+    const rects = [...rowEls].map((el) => el.getBoundingClientRect())
+    const move = (ev) => {
+      const hit = rects.findIndex((r) => ev.clientY < r.bottom)
+      const over = hit === -1 ? rects.length - 1 : hit
+      dragRef.current = { from, over, x: ev.clientX, y: ev.clientY }
+      setDrag(dragRef.current)
+    }
+    const up = () => {
+      window.removeEventListener('pointermove', move)
+      window.removeEventListener('pointerup', up)
+      document.body.style.cursor = ''
+      document.body.style.userSelect = ''
+      const d = dragRef.current
+      dragRef.current = null
+      setDrag(null)
+      if (d && d.over !== d.from) onReorder(d.from, d.over)
+    }
+    window.addEventListener('pointermove', move)
+    window.addEventListener('pointerup', up)
+    document.body.style.cursor = 'grabbing'
+    document.body.style.userSelect = 'none'
+    dragRef.current = { from, over: from, x: e.clientX, y: e.clientY }
+    setDrag(dragRef.current)
+  }
+
+  return { drag, startDrag }
+}

package/src/index.js

@@ -38,6 +38,9 @@ export { default as IconFrame } from './atoms/IconFrame.jsx'
 export { default as ExitPreview } from './utilities/ExitPreview.jsx'
 export { default as Figure } from './atoms/Figure.jsx'
 export { default as FullscreenOverlay } from './utilities/FullscreenOverlay.jsx'
+/* the overlay layer stack — which open layer owns Escape; exported so a layer in another package
+ * (kol-shell's walkthrough) joins the same stack instead of a second one (2026-10-09) */
+export { pushLayer, popLayer, isTopLayer } from './utilities/layerStack.js'
 /* BackgroundVideo — renamed from HlsVideo and moved to utilities 2026-10-01 (user ruling: no UI,
  * and the name said how it streams, not what it is for). `HlsVideo` is the alias, on the ledger. */
 export { default as BackgroundVideo, default as HlsVideo } from './utilities/BackgroundVideo.jsx'
@@ -79,6 +82,7 @@ export { default as InspectorRail } from './molecules/InspectorRail.jsx'
 export { default as PathNodeOverlay } from './utilities/PathNodeOverlay.jsx'
 export { default as CropOverlay } from './utilities/CropOverlay.jsx'
 export { default as LayerStack, AddLayerButton, BLEND_MODES } from './organisms/LayerStack.jsx'
+export { default as StepList } from './molecules/StepList.jsx'
 export { TYPE_LABELS, BOOL_OP_LABELS, SHAPE_KIND_LABELS, labelForLayer, rowLabelForLayer, findLayerDeep } from './hooks/layerTree.js'
 export { default as TimelineDock, sampleTrack, TIMELINE_EASINGS } from './organisms/TimelineDock.jsx'
 export { default as CurveEditor, CURVE_KINDS, defaultCurveFor } from './organisms/CurveEditor.jsx'

package/src/molecules/SectionText.jsx

@@ -107,7 +107,7 @@ export default function SectionText({
     ? <p className={cls(bodyClass, 'body')} style={slotStyle.body}>{body}</p>
     : <div className={cls(bodyClass, 'body')} style={slotStyle.body}>{body}</div>)
   const cluster = actions && (
-    <div className={cls(`${actionsClass} shrink-0 h-0 self-center`, 'actions')} style={slotStyle.actions}>{actions}</div>
+    <div className={cls(`${actionsClass} shrink-0 md:h-0 md:self-center`, 'actions')} style={slotStyle.actions}>{actions}</div>
   )
   return (
     <div className={`kol-section-text flex flex-col ${gap} ${alignCls} ${className}`.replace(/\s+/g, ' ').trim()} style={style}>
@@ -133,7 +133,10 @@ export default function SectionText({
            * have been space between … on the right edge"). The column is `items-start`, so this
            * row shrank to its content and `justify-between` had no room to act: the cluster sat
            * against the subtitle on every PageHeader with actions. */
-          <div className="flex self-stretch items-baseline justify-between gap-6">
+          /* BELOW `md` THE CLUSTER DROPS UNDER THE BODY (kol-fxr 2026-10-09, HubSettingsHeaderAt390:
+           * at 390 the cluster kept its natural width and left the lede ~110px, three lines). It
+           * takes its own row there, with its real height; the zero-height trick is a desk rule. */
+          <div className="flex flex-col md:flex-row self-stretch md:items-baseline md:justify-between gap-3 md:gap-6">
             {bodyNode}
             {cluster}
           </div>

package/src/molecules/StepList.jsx

@@ -0,0 +1,109 @@
+import { useRef } from 'react'
+import Button from '../atoms/Button.jsx'
+import { Icon } from '@kolkrabbi/kol-icons'
+import usePointerSort from '../hooks/usePointerSort.js'
+
+/**
+ * StepList — A numbered list of slots ordered by hand. the Morph rail's steps in kol-fxr (each row a
+ * generator preset, the morph tweening from row 1 to row N), generic enough for any ordered slots —
+ * a playlist, a chain of stages (lobby: StepList, kol-fxr 2026-10-09). One row is active, × removes
+ * a row, the dashed last row adds one.
+ *
+ *   <StepList items={steps} activeIndex={i} onSelect={setI} onRemove={remove} onMove={move} onAdd={add} />
+ *
+ * Reorder is `usePointerSort` — the pointer sort `RecordManager` runs — not the HTML drag the brief
+ * named from `LayerStack`: HTML drag does nothing under a finger, and fxr runs on a phone. The
+ * `arrows` variant is the keyboard path.
+ *
+ * @param {{ id: string|number, label: import('react').ReactNode }[]} items  the rows, in order
+ * @param {number|null} activeIndex  the highlighted (editing) row
+ * @param {'grab'|'arrows'} reorder  `grab`: a ⠿ handle and a pointer drag (touch too) · `arrows`: ↑ ↓ quiet buttons, one slot a press
+ * @param {boolean} readOnly  no handle or arrows, no ×, no add row; the body does not open
+ * @param {'xs'|'sm'|'md'|'lg'} size  the control rung the × and the arrows ride
+ * @param {(index: number) => void} onSelect  the body pressed
+ * @param {(index: number) => void} onRemove  ×
+ * @param {(from: number, to: number) => void} onMove  after a drop or an arrow press
+ * @param {() => void} onAdd  the dashed row
+ * @param {import('react').ReactNode} addLabel  the dashed row's words — the consumer's copy
+ * @param {string} className  on the list
+ */
+export default function StepList({
+  items = [],
+  activeIndex = null,
+  reorder = 'grab',
+  readOnly = false,
+  size = 'sm',
+  onSelect,
+  onRemove,
+  onMove,
+  onAdd,
+  addLabel = 'Add a step',
+  className = '',
+}) {
+  const listRef = useRef(null)
+  const { drag, startDrag } = usePointerSort(readOnly ? null : onMove)
+  const grab = !readOnly && reorder === 'grab' && !!onMove
+  const arrows = !readOnly && reorder === 'arrows' && !!onMove
+  const rows = () => listRef.current?.querySelectorAll('.kol-step-list-item')
+
+  return (
+    <ul ref={listRef} className={`flex flex-col gap-1 ${className}`.trim()}>
+      {items.map((it, i) => {
+        const active = i === activeIndex
+        const dragging = drag && drag.from === i
+        const over = drag && drag.over === i && drag.over !== drag.from
+        const mark = over ? (drag.over > drag.from ? 'bottom-0' : 'top-0') : null
+        return (
+          <li
+            key={it.id}
+            className={`kol-step-list-item relative flex items-center gap-2 rounded px-2 py-1${active ? ' bg-fg-08' : ''}${dragging ? ' opacity-40' : ''}`}
+          >
+            {/* the drop mark: a 1px accent line above or below the row under the pointer */}
+            {mark && <span aria-hidden="true" className={`absolute left-2 right-2 h-px ${mark}`} style={{ background: 'var(--kol-accent-primary)' }} />}
+            {grab && (
+              <button
+                type="button"
+                aria-label={`Reorder step ${i + 1}`}
+                className="cursor-grab shrink-0 touch-none border-0 bg-transparent p-0"
+                onPointerDown={(e) => startDrag(e, i, rows())}
+              >
+                <Icon name="drag-handle" size={12} className="text-oq-48" />
+              </button>
+            )}
+            {arrows && (
+              <span className="flex shrink-0 items-center">
+                <Button tone="ghost" quiet iconOnly="chevron-up" size={size} aria-label={`Move step ${i + 1} up`} disabled={i === 0} onClick={() => onMove(i, i - 1)} />
+                <Button tone="ghost" quiet iconOnly="chevron-down" size={size} aria-label={`Move step ${i + 1} down`} disabled={i === items.length - 1} onClick={() => onMove(i, i + 1)} />
+              </span>
+            )}
+            <button
+              type="button"
+              className="flex min-w-0 flex-1 items-center gap-2 border-0 bg-transparent p-0 text-left"
+              onClick={readOnly ? undefined : () => onSelect?.(i)}
+              disabled={readOnly}
+            >
+              <span className="kol-helper-10 text-meta tabular-nums w-4 shrink-0">{i + 1}</span>
+              <span className="kol-mono-12 text-emphasis truncate">{it.label}</span>
+            </button>
+            {!readOnly && onRemove && (
+              <Button tone="ghost" quiet iconOnly="x" size={size} aria-label={`Remove step ${i + 1}`} onClick={() => onRemove(i)} />
+            )}
+          </li>
+        )
+      })}
+      {!readOnly && onAdd && (
+        <li>
+          <button
+            type="button"
+            className="flex w-full items-center gap-2 rounded border border-dashed border-oq-16 px-2 py-1 text-meta hover:text-body hover:border-oq-24"
+            onClick={onAdd}
+          >
+            <span className="kol-helper-10 tabular-nums w-4 shrink-0">{items.length + 1}</span>
+            <Icon name="plus" size={12} className="text-oq-48" />
+            <span className="kol-mono-12">{addLabel}</span>
+          </button>
+        </li>
+      )}
+    </ul>
+  )
+}

package/src/organisms/ContentFilters.jsx

@@ -523,19 +523,39 @@ const ContentFilters = ({
 
       {/* the view family's own line below md (`auto`) or always (`below`) —
         * full width, wrapping, so no view is ever off the page */}
-      {viewModeOptions && viewPlacement !== 'header' && (
-        <div className={`${viewPlacement === 'auto' ? 'md:hidden ' : ''}mb-3`}>
-          {viewStrip('flex flex-wrap gap-y-2')}
-        </div>
-      )}
-      {/* the consumer's trailing controls: their OWN line below md (`auto`) or
-        * always (`below`) — full width, wrapping. In the below row's right
-        * group they measured 223px beside LIST/GRID in a 342px track. */}
-      {trailingActions && trailingPlacement !== 'header' && (
-        <div className={`${trailingPlacement === 'auto' ? 'md:hidden ' : ''}mb-3 flex flex-wrap items-center gap-6 gap-y-2`}>
-          {trailingActions}
-        </div>
-      )}
+      {/* BELOW `md` THE VIEW STRIP AND THE TRAILING CONTROLS SHARE ONE WRAPPING LINE (kol-fxr
+        * 2026-10-09, HubSettingsHeaderAt390: fxr's SETTINGS label and its options/shortcuts toggle
+        * were two ragged rows of one rung). Same rung, same line; it still wraps when they do not
+        * fit, so nothing is ever off the page. `below` placements keep their own line at every width. */}
+      {(() => {
+        const view = viewModeOptions && viewPlacement !== 'header'
+        const trail = trailingActions && trailingPlacement !== 'header'
+        const shared = view && trail && viewPlacement === 'auto' && trailingPlacement === 'auto'
+        if (shared) return (
+          <div className="md:hidden mb-3 flex flex-wrap items-center gap-6 gap-y-2">
+            {/* the desk's order — trailing, then the strip — so a consumer's divider sits between them */}
+            {trailingActions}
+            {viewStrip('flex flex-wrap gap-y-2')}
+          </div>
+        )
+        return (
+          <>
+            {view && (
+              <div className={`${viewPlacement === 'auto' ? 'md:hidden ' : ''}mb-3`}>
+                {viewStrip('flex flex-wrap gap-y-2')}
+              </div>
+            )}
+            {/* the consumer's trailing controls: their OWN line below md (`auto`) or
+              * always (`below`) — full width, wrapping. In the below row's right
+              * group they measured 223px beside LIST/GRID in a 342px track. */}
+            {trail && (
+              <div className={`${trailingPlacement === 'auto' ? 'md:hidden ' : ''}mb-3 flex flex-wrap items-center gap-6 gap-y-2`}>
+                {trailingActions}
+              </div>
+            )}
+          </>
+        )
+      })()}
 
       {/* BELOW the divider: the filter GROUPS only. Left-aligned columns —
         * label above values — visible only while the filter toggle is open.

package/src/organisms/RecordManager.jsx

@@ -10,6 +10,7 @@ import FieldRow, { StatusChip } from '../molecules/FieldRow'
 import { Tooltip } from '../utilities/Popover'
 import Table from './Table'
 import MediaLibrary from './MediaLibrary'
+import usePointerSort from '../hooks/usePointerSort.js'
 
 /* TOOLBAR ICONS ARE BARE GLYPHS (user ruling 2026-08-09, verbatim: "did I
  * ask for a button?? … the only thing that should hover is full opacity and
@@ -93,8 +94,9 @@ export default function RecordManager({
 }) {
   const wrapRef = useRef(null)
   const [searchOpen, setSearchOpen] = useState(false)
-  const dragRef = useRef(null)
-  const [drag, setDrag] = useState(null) // { from, over, x, y } during a drag
+  /* { from, over, x, y } during a drag — the sort lives in hooks/usePointerSort (lifted 2026-10-09
+   * so StepList is not a second copy); this file keeps only which rows it measures */
+  const { drag, startDrag: beginSort } = usePointerSort(onReorder)
   const [active, setActive] = useState(null)
   const [picker, setPicker] = useState(null) // the field being picked for
   const [selected, setSelected] = useState(() => new Set())
@@ -118,36 +120,7 @@ export default function RecordManager({
     onSelectionChange?.([...next])
   }
 
-  /* ── pointer sort ─────────────────────────────────────────────────────── */
-  const startDrag = (e, from) => {
-    if (!onReorder) return
-    e.preventDefault()
-    const rowEls = wrapRef.current?.querySelectorAll('.kol-table-row')
-    if (!rowEls?.length) return
-    const rects = [...rowEls].map((el) => el.getBoundingClientRect())
-    const move = (ev) => {
-      const hit = rects.findIndex((r) => ev.clientY < r.bottom)
-      const over = hit === -1 ? rects.length - 1 : hit
-      dragRef.current = { from, over, x: ev.clientX, y: ev.clientY }
-      setDrag(dragRef.current)
-    }
-    const up = () => {
-      window.removeEventListener('pointermove', move)
-      window.removeEventListener('pointerup', up)
-      document.body.style.cursor = ''
-      document.body.style.userSelect = ''
-      const d = dragRef.current
-      dragRef.current = null
-      setDrag(null)
-      if (d && d.over !== d.from) onReorder(d.from, d.over)
-    }
-    window.addEventListener('pointermove', move)
-    window.addEventListener('pointerup', up)
-    document.body.style.cursor = 'grabbing'
-    document.body.style.userSelect = 'none'
-    dragRef.current = { from, over: from, x: e.clientX, y: e.clientY }
-    setDrag(dragRef.current)
-  }
+  const startDrag = (e, from) => beginSort(e, from, wrapRef.current?.querySelectorAll('.kol-table-row'))
 
   /* ── columns: resolve types, prepend handle + checkbox ────────────────── */
   const builtColumns = useMemo(() => {