@kolkrabbi/kol-component 0.195.0 → 0.196.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.195.0",
+  "version": "0.196.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/atoms/Input.jsx

@@ -20,6 +20,12 @@ import { glyphSize } from '../hooks/glyphLadders.js'
  *                                scope expression, not every keystroke. With it
  *                                the field keeps a local draft seeded from
  *                                `value`; `onChange` still fires live if given.
+ *                                After the commit the draft RE-SNAPS to `value`,
+ *                                so a rejected commit falls back to the last
+ *                                good value rather than lingering — which makes
+ *                                `type="number"` + `onCommit` the draft/commit
+ *                                number idiom outright (parse and clamp at the
+ *                                call site; fxr's NumberField, retired 2026-09-03).
  *   variant="ghost"            — legacy alias, resolves to outline
  *   variant="property"         — the Figma property field (PropertyField,
  *                                2026-08-12): filled chrome, dim `affordance`
@@ -123,7 +129,17 @@ export default function Input({
     ? {
         value: draft,
         onChange: (e) => { draftRef.current = e.target.value; setDraft(e.target.value); onChange?.(e) },
-        onBlur: () => onCommit(String(draftRef.current).trim()),
+        /* RE-SNAP AFTER EVERY COMMIT, not only when `value` changes. The
+         * effect above re-syncs the draft on a value change — so a commit the
+         * caller REJECTED (invalid input, value kept) left the bad draft on
+         * screen, and `1` → `19` → `19x` showed `19x` after blur. kol-fxr's
+         * `NumberField` existed for exactly this line (34 lines wrapping this
+         * atom: commit, then `setDraft(String(value))`); with the re-snap here
+         * it is `<Input type="number" onCommit>` and no component
+         * (editor-panels-the-held-specs A8, 2026-09-03). The order matters —
+         * commit first, so a caller that DOES accept the value re-renders
+         * with the new prop and the effect wins over this fallback. */
+        onBlur: () => { onCommit(String(draftRef.current).trim()); draftRef.current = value ?? ''; setDraft(value ?? '') },
         onKeyDown: (e) => {
           if (e.key === 'Enter') e.currentTarget.blur()
           if (e.key === 'Escape') { draftRef.current = value ?? ''; setDraft(value ?? ''); e.currentTarget.blur() }

package/src/atoms/XYPad.jsx

@@ -0,0 +1,92 @@
+import { useRef } from 'react'
+
+/**
+ * XYPad — a two-axis control pad: drag one puck to vary two values at once.
+ *
+ * Lifted verbatim from kol-fxr's editor (`compose/inspectors/XYPad.jsx`,
+ * `editor-panels-the-held-specs` A6, 2026-09-03 — the row the filer marked
+ * "portable as-is", and it was: presentation-only, no store coupling). Its own
+ * lineage runs back through kol-labs-single's para-type lab to Font Playground.
+ *
+ * Axis meaning, ranges and the write path belong to the caller. It fills its
+ * container's width and is square via `aspect-ratio`; the puck is positioned
+ * in %, so there is no `size` prop and a rail of any width takes it. `y` is
+ * inverted — top is high — because that is how every axis pad reads.
+ *
+ * No `useCallback` on the handlers, on purpose: the labs original memoized
+ * them with `[]` deps and froze the first render's axis ranges into the drag
+ * math, so a pad whose range changed kept mapping to the old one.
+ *
+ *   <XYPad xValue={wdth} yValue={wght} xMin={50} xMax={200} yMin={100} yMax={900}
+ *          xLabel="Width" yLabel="Weight" onChange={(x, y) => set({ wdth: x, wght: y })} />
+ *
+ * @param {number} xValue - Current x, in the x range
+ * @param {number} yValue - Current y, in the y range
+ * @param {number} [xMin=0] - x at the left edge
+ * @param {number} [xMax=1] - x at the right edge
+ * @param {number} [yMin=0] - y at the BOTTOM edge
+ * @param {number} [yMax=1] - y at the top edge
+ * @param {Function} onChange - `(x, y) => void` on pointer down and on every move while a button is held — the caller coalesces if it wants one patch per gesture
+ * @param {ReactNode} xLabel - Left label above the pad
+ * @param {ReactNode} yLabel - Right label above the pad
+ * @param {string} [className] - Extra classes on the wrapper
+ */
+export default function XYPad({
+  xValue, yValue,
+  xMin = 0, xMax = 1,
+  yMin = 0, yMax = 1,
+  onChange,
+  xLabel,
+  yLabel,
+  className = '',
+}) {
+  const ref = useRef(null)
+
+  const handlePos = (e) => {
+    const el = ref.current
+    if (!el) return
+    const rect = el.getBoundingClientRect()
+    const px = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
+    const py = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height))
+    const x = xMin + px * (xMax - xMin)
+    const y = yMax - py * (yMax - yMin) /* invert: top = high */
+    onChange?.(x, y)
+  }
+
+  const onPointerDown = (e) => {
+    e.target.setPointerCapture?.(e.pointerId)
+    handlePos(e)
+  }
+  const onPointerMove = (e) => {
+    if (e.buttons === 0) return
+    handlePos(e)
+  }
+
+  const span = (max, min) => (max - min) || 1
+  const puckX = ((xValue - xMin) / span(xMax, xMin)) * 100
+  const puckY = (1 - (yValue - yMin) / span(yMax, yMin)) * 100
+
+  return (
+    <div className={`flex flex-col gap-1 ${className}`.trim()}>
+      <div className="flex justify-between kol-helper-10 tracking-widest text-meta">
+        <span>{xLabel}</span>
+        <span>{yLabel}</span>
+      </div>
+      <div
+        ref={ref}
+        onPointerDown={onPointerDown}
+        onPointerMove={onPointerMove}
+        className="relative w-full aspect-square border border-fg-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" />
+        {/* 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"
+          style={{ left: `${puckX}%`, top: `${puckY}%` }}
+        />
+      </div>
+    </div>
+  )
+}

package/src/index.js

@@ -65,6 +65,9 @@ export { default as ToggleSwitch } from './atoms/ToggleSwitch.jsx'
 export { default as TiltCard } from './utilities/TiltCard.jsx'
 export { default as TransparentX } from './utilities/TransparentX.jsx'
 export { default as ViewToggle } from './atoms/ViewToggle.jsx'
+/* the design-editor parts, taken per row from editor-panels-the-held-specs (2026-09-03) */
+export { default as XYPad } from './atoms/XYPad.jsx'
+export { default as InspectorRail } from './molecules/InspectorRail.jsx'
 
 // molecules
 export { Accordion, AccordionPanel } from './molecules/Accordion.jsx'

package/src/molecules/InspectorRail.jsx

@@ -0,0 +1,59 @@
+/**
+ * InspectorRail — the selection-routing shell of an inspector panel.
+ *
+ * Lifted from kol-fxr's editor (`compose/InspectorRail.jsx`,
+ * `editor-panels-the-held-specs` A7, 2026-09-03) with ALL of its coupling
+ * dropped: it read the compose store and imported three concrete panels. What
+ * is left is the one piece of logic the filer said everyone gets wrong — the
+ * precedence — and it is the thing that makes an inspector rail a component
+ * rather than a `<div>`:
+ *
+ *   nothing selected       → renders NOTHING (user ruling 2026-08-12: no dummy
+ *                            empty-state copy; selection must visibly spawn
+ *                            its controls)
+ *   the canvas is selected → `renderers.canvas`, and it WINS over multi-select.
+ *                            Selecting the canvas selects every layer with it,
+ *                            so without this precedence "inspect the canvas"
+ *                            with two layers in frame fell into the multi
+ *                            branch and hid the fill / opacity controls
+ *   exactly one id         → `renderers.single(id)`
+ *   two or more ids        → `renderers.multi(ids)` — the canvas id excluded
+ *                            from the count; it is selectable but not a layer
+ *
+ * The panels themselves are the consumer's — a layer inspector delegating by
+ * type, a canvas inspector, a multi-select summary with a Group action — and
+ * they arrive as render functions so this file imports none of them.
+ *
+ *   <InspectorRail
+ *     selectedIds={selectedIds}
+ *     canvasId="canvas"
+ *     renderers={{
+ *       canvas: () => <CanvasInspector />,
+ *       single: (id) => <LayerInspector layer={find(id)} />,
+ *       multi:  (ids) => <MultiSummary ids={ids} onGroup={group} />,
+ *     }}
+ *   />
+ *
+ * @param {string[]} selectedIds - The current selection, in selection order; may include `canvasId`
+ * @param {string} [canvasId='canvas'] - The id that means "the canvas itself" — precedence, and excluded from the multi count
+ * @param {{canvas?: Function, single?: Function, multi?: Function}} renderers - `canvas()`, `single(id)`, `multi(ids)` — each returns the node for that state; a missing renderer renders nothing for it
+ * @param {string} [className] - Extra classes on the rail
+ */
+export default function InspectorRail({ selectedIds = [], canvasId = 'canvas', renderers = {}, className = '' }) {
+  const isCanvas = selectedIds.includes(canvasId)
+  const layerIds = selectedIds.filter((id) => id !== canvasId)
+
+  const body = isCanvas
+    ? renderers.canvas?.()
+    : layerIds.length >= 2
+      ? renderers.multi?.(layerIds)
+      : layerIds.length === 1
+        ? renderers.single?.(layerIds[0])
+        : null
+
+  return (
+    <div className={`kol-inspector-rail ${className}`.trim()}>
+      {body && <div className="kol-inspector-rail-body">{body}</div>}
+    </div>
+  )
+}