@kolkrabbi/kol-component 0.158.0 → 0.159.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.158.0",
+  "version": "0.159.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/Button.jsx

@@ -13,7 +13,7 @@ import { glyphSize } from '../hooks/glyphLadders.js'
  * @param {Object} props
  * @param {ReactNode} props.children - Button content
  * @param {'primary'|'secondary'|'accent'|'outline'|'ghost'|'nav'|'danger'|'grey'|'control'} props.variant - Visual variant. `danger` is the destructive treatment (--ui-error fill); `nav` is the chrome rung — transparent, oq-64 ink, one step brighter than `ghost`; `control` is an alias for `ghost` (legacy call-sites).
- * @param {'sm'|'md'|'lg'} props.size - Button size (default: 'md')
+ * @param {'xs'|'sm'|'md'|'lg'} props.size - Button size (default: 'md'); xs is the panel rung (ControlsXsRung, 2026-09-01) — kol-mono-8 in a 22px shell (20 icon-only), opt-in by prop
  * @param {string} props.iconLeft - Icon name to display on the left
  * @param {string} props.iconRight - Icon name to display on the right
  * @param {string} props.iconLeftHover - Icon to show on hover (left position)
@@ -98,6 +98,8 @@ const Button = ({
   // Add size class — pairs the padding rule with its mono type class.
   const sizeClass = size === 'sm'
     ? 'kol-btn-sm kol-mono-12'
+    : size === 'xs'
+    ? 'kol-btn-xs kol-mono-8'
     : size === 'lg'
     ? 'kol-btn-lg kol-mono-16'
     : 'kol-btn-md kol-mono-14'

package/src/atoms/Input.jsx

@@ -1,3 +1,4 @@
+import { useEffect, useRef, useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
 import { toneClass } from '../utilities/tone.js'
 import { glyphSize } from '../hooks/glyphLadders.js'
@@ -11,6 +12,13 @@ import { glyphSize } from '../hooks/glyphLadders.js'
  *                                secondary, always subordinate to filled)
  *   tone="inverse"             — the dark chip (`fg-ab-24`) for a washed plane
  *                                (ControlToneInverse, 2026-08-27); same prop on ViewToggle · Dropdown
+ *   size="xs"                  — the panel rung (ControlsXsRung, 2026-09-01):
+ *                                kol-mono-8 in a 22px shell; opt-in by prop
+ *   onCommit                   — `(trimmed) => void` on blur / Enter (Escape
+ *                                restores): the rack commits a module name or a
+ *                                scope expression, not every keystroke. With it
+ *                                the field keeps a local draft seeded from
+ *                                `value`; `onChange` still fires live if given.
  *   variant="ghost"            — legacy alias, resolves to outline
  *   variant="property"         — the Figma property field (PropertyField,
  *                                2026-08-12): filled chrome, dim `affordance`
@@ -46,12 +54,13 @@ import { glyphSize } from '../hooks/glyphLadders.js'
  * Input owns prefix/suffix/icon layout + the inner <input> styling.
  */
 
-const SIZE_TYPE = { sm: 'kol-mono-12', md: 'kol-mono-14', lg: 'kol-mono-16' }
+const SIZE_TYPE = { xs: 'kol-mono-8', sm: 'kol-mono-12', md: 'kol-mono-14', lg: 'kol-mono-16' }
 
 export default function Input({
   type = 'text',
   value,
   onChange,
+  onCommit,
   variant = 'filled',
   tone = 'default',
   size = 'md',
@@ -100,6 +109,26 @@ export default function Input({
    * `${len}ch` hugs the value with no probe element, and stays number-safe
    * where the HTML `size` attr is ignored (<input type="number">). +2px keeps
    * the caret from clipping at the end. Tracks `value` → controlled only. */
+  /* commit-on-blur/Enter (ControlsXsRung, 2026-09-01 — kol-monitor's panel
+   * TextInput collapsing onto this atom): a local draft, seeded from `value`,
+   * committed trimmed; Escape restores. Only when `onCommit` is given. */
+  const [draft, setDraft] = useState(value ?? '')
+  /* the ref mirrors the draft so a blur that lands in the same tick as the
+   * last keystroke commits what was typed, not the last RENDER's draft */
+  const draftRef = useRef(value ?? '')
+  useEffect(() => { if (onCommit) { setDraft(value ?? ''); draftRef.current = value ?? '' } }, [value, onCommit])
+  const commitProps = onCommit
+    ? {
+        value: draft,
+        onChange: (e) => { draftRef.current = e.target.value; setDraft(e.target.value); onChange?.(e) },
+        onBlur: () => onCommit(String(draftRef.current).trim()),
+        onKeyDown: (e) => {
+          if (e.key === 'Enter') e.currentTarget.blur()
+          if (e.key === 'Escape') { draftRef.current = value ?? ''; setDraft(value ?? ''); e.currentTarget.blur() }
+        },
+      }
+    : null
+
   const propertyLen = Math.max(String(value ?? placeholder ?? '').length, 1)
 
   /* Pin inner input height to the typography token's line-height. Without
@@ -108,7 +137,7 @@ export default function Input({
    * from the font's ascender+descender (font-metric), not strictly from
    * CSS line-height. Result: kol-control-sm ends up 26.5px instead of 26.
    * h-4 / h-[18px] / h-[22px] match the kol-mono-12 / -14 / -16 line-heights. */
-  const heightCls = size === 'sm' ? 'h-4' : size === 'md' ? 'h-[18px]' : 'h-[22px]'
+  const heightCls = size === 'xs' ? 'h-3' : size === 'sm' ? 'h-4' : size === 'md' ? 'h-[18px]' : 'h-[22px]'
 
   const inputCls = [
     'min-w-0 bg-transparent border-none outline-none text-auto',
@@ -149,9 +178,11 @@ export default function Input({
         * Controlled + no onChange = deliberate display-only → readOnly. */}
       <input
         type={type}
-        {...(value !== undefined
-          ? { value: value ?? '', onChange, readOnly: !onChange || undefined }
-          : { onChange })}
+        {...(commitProps
+          ? commitProps
+          : value !== undefined
+            ? { value: value ?? '', onChange, readOnly: !onChange || undefined }
+            : { onChange })}
         placeholder={placeholder}
         disabled={disabled}
         spellCheck={false}
@@ -159,6 +190,8 @@ export default function Input({
         className={inputCls}
         style={isProperty ? { width: `calc(${propertyLen}ch + 2px)` } : undefined}
         {...inputProps}
+        /* the commit pair LAST, so nothing spread above it can shadow onBlur / onKeyDown */
+        {...(commitProps || {})}
       />
       {unit !== undefined && (
         <span aria-hidden="true" className="text-meta shrink-0">{unit}</span>

package/src/hooks/glyphLadders.js

@@ -24,10 +24,10 @@
  */
 
 /** Icon alone in a pinned square. Pairs with squares 28 · 32 · 36. */
-export const SOLO = { sm: 16, md: 20, lg: 24 }
+export const SOLO = { xs: 12, sm: 16, md: 20, lg: 24 }
 
 /** Icon beside a label, inside the rung's line box. */
-export const ADJACENT = { sm: 14, md: 16, lg: 18 }
+export const ADJACENT = { xs: 10, sm: 14, md: 16, lg: 18 }
 
 /**
  * Indicator glyph — a caret/chevron that DECORATES a control rather than
@@ -37,7 +37,7 @@ export const ADJACENT = { sm: 14, md: 16, lg: 18 }
  * Dropdown's caret each hand-typed their number (Dropdown took the ADJACENT
  * rung, the oversize the user called): two transcriptions, the folklore
  * threshold. */
-export const INDICATOR = { sm: 12, md: 14, lg: 16 }
+export const INDICATOR = { xs: 8, sm: 12, md: 14, lg: 16 }
 
 /**
  * Resolve a glyph size. `solo` picks the ladder; `size` indexes it.

package/src/molecules/Dropdown.jsx

@@ -32,7 +32,8 @@ import { indicatorSize } from '../hooks/glyphLadders.js'
  * (lg ≥1024 / md ≥768 / sm below) is gone.
  */
 
-const SIZE_TYPE = { sm: 'kol-mono-12', md: 'kol-mono-14', lg: 'kol-mono-16' }
+/* xs (ControlsXsRung, 2026-09-01): the panel rung, opt-in by prop — the default stays sm (2026-07-28 law) */
+const SIZE_TYPE = { xs: 'kol-mono-8', sm: 'kol-mono-12', md: 'kol-mono-14', lg: 'kol-mono-16' }
 /* Caret size comes from the INDICATOR ladder (glyphLadders.js) — the private
  * map that lived here was a transcription of ADJACENT, which is the wrong
  * ladder for a decoration: it put a caret one rung HEAVIER than the label

package/src/molecules/Stepper.jsx

@@ -1,8 +1,16 @@
 /**
  * Stepper — number input + chevron buttons, built on the .kol-control shell.
  *
- *   size="sm" (default) / "md" / "lg" — matched padding + type class.
- *   Chevron scale follows the size: 8 / 10 / 12 px each, stacked.
+ *   size="xs" / "sm" (default) / "md" / "lg" — matched padding + type class.
+ *   Chevron scale follows the size: 6 / 8 / 10 / 12 px each, stacked. xs is the
+ *   panel rung (ControlsXsRung, kol-monitor 2026-09-01).
+ *
+ *   options — step through a LIST instead of a number range (the rack's
+ *   ‹ value › Selector, as a variant of this on the ladder; user: "selector
+ *   could be a variant of ours if we make it follow the size ladder"). `value`
+ *   is one of the options, the field is read-only, the chevrons step and WRAP
+ *   at both ends, and `onChange` reports the option in the same event shape
+ *   as the number path — `{ target: { value: option } }`.
  *
  * Loaded from `00-kol/chevron-{up,down}.svg` via the Icon registry — first
  * stroke icons in the kol curated set. For a plain number input without
@@ -10,8 +18,8 @@
  */
 import { Icon } from '@kolkrabbi/kol-icons'
 
-const SIZE_TYPE    = { sm: 'kol-mono-12', md: 'kol-mono-14', lg: 'kol-mono-16' }
-const CHEVRON_SIZE = { sm: 8,             md: 10,            lg: 12 }
+const SIZE_TYPE    = { xs: 'kol-mono-8', sm: 'kol-mono-12', md: 'kol-mono-14', lg: 'kol-mono-16' }
+const CHEVRON_SIZE = { xs: 6,            sm: 8,             md: 10,            lg: 12 }
 
 export default function Stepper({
   value,
@@ -19,18 +27,27 @@ export default function Stepper({
   min,
   max,
   step = 1,
+  options,
   size = 'sm',
   className = '',
   style = {},
   ...props
 }) {
+  /* the list path: wrap at both ends, report the option */
+  const stepList = (dir) => {
+    const i = options.indexOf(value)
+    const n = i < 0 ? 0 : (i + dir + options.length) % options.length
+    onChange?.({ target: { value: options[n] } })
+  }
   const handleIncrement = () => {
+    if (options) return stepList(1)
     const newValue = Number(value) + step
     if (max !== undefined && newValue > max) return
     onChange?.({ target: { value: newValue } })
   }
 
   const handleDecrement = () => {
+    if (options) return stepList(-1)
     const newValue = Number(value) - step
     if (min !== undefined && newValue < min) return
     onChange?.({ target: { value: newValue } })
@@ -64,12 +81,13 @@ export default function Stepper({
   return (
     <div className={shellCls} style={style}>
       <input
-        type="number"
+        type={options ? 'text' : 'number'}
+        readOnly={options ? true : undefined}
         value={value ?? ''}
-        onChange={handleInputChange}
-        min={min}
-        max={max}
-        step={step}
+        onChange={options ? undefined : handleInputChange}
+        min={options ? undefined : min}
+        max={options ? undefined : max}
+        step={options ? undefined : step}
         className="w-full min-w-0 bg-transparent border-none outline-none text-auto hide-number-spinners"
         style={{ paddingRight: `${inputPaddingRight}px` }}
         {...props}