@kolkrabbi/kol-component 0.34.0 → 0.35.0

package/README.md

@@ -30,3 +30,15 @@ import { Icon } from '@kolkrabbi/kol-icons'
 ```
 
 Atoms (Button, Input, Slider, Toggle\*, …), molecules (Dropdown, Tag, Badge, Modal, Popover, …), primitives (Accordion, Carousel, CodeBlock, Image, …), an organism (Table), graphics, and hooks (`useReveal`, `useScrollSpy`). See the [usage reference](https://github.com/Tor-Grimsson/kol-ds/tree/main/docs/usage) for real examples of each.
+
+### Deep imports — skip the barrel, skip the peers
+
+The barrel (`import { Button } from '@kolkrabbi/kol-component'`) statically imports the whole tree, so building against it requires every organism peer (`framer-motion`, `gsap`, `hls.js`) even if you render none of them — module resolution happens before tree-shaking. Consumers that want a slice import the file directly and only its own chain resolves:
+
+```jsx
+import Button from '@kolkrabbi/kol-component/atoms/Button'
+import Modal from '@kolkrabbi/kol-component/molecules/Modal'
+import useReveal from '@kolkrabbi/kol-component/hooks/useReveal'
+```
+
+Subpaths: `./atoms/*`, `./molecules/*`, `./organisms/*`, `./utilities/*` (`.jsx`) and `./hooks/*` (`.js`). Most files default-export their component; multi-part families (`Modal`, `MenuItem`, `Accordion`) export named — mirror whatever the barrel re-exports. The barrel stays for showcase-style consumers that want everything.

package/package.json

@@ -1,13 +1,18 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.34.0",
+  "version": "0.35.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",
   "main": "./src/index.js",
   "module": "./src/index.js",
   "exports": {
-    ".": "./src/index.js"
+    ".": "./src/index.js",
+    "./atoms/*": "./src/atoms/*.jsx",
+    "./molecules/*": "./src/molecules/*.jsx",
+    "./organisms/*": "./src/organisms/*.jsx",
+    "./utilities/*": "./src/utilities/*.jsx",
+    "./hooks/*": "./src/hooks/*.js"
   },
   "files": [
     "src",

package/src/atoms/ColorSwatch.jsx

@@ -11,10 +11,15 @@
  *   hex             — color string, e.g. '#FF6F00'. Ignored if showTransparent.
  *   selected        — adds active border + ring (border-fg-64 ring-1).
  *   size            — number (px) for fixed-size, 'fill' (w-full aspect-square,
- *                     for grid cells that should stay square), or 'stretch'
- *                     (w-full h-full, for grid cells that stretch to row height).
- *                     Default 24.
+ *                     for grid cells that should stay square), 'stretch'
+ *                     (w-full h-full, for grid cells that stretch to row height),
+ *                     or 'control-sm' (26px — the kol-control-sm row height, so
+ *                     a swatch sits flush beside sm input chrome in a paint bar;
+ *                     ColorSwatchFieldSizing 2026-08-12). Default 24.
  *   radius          — 'sm' (4px, default) | 'tight' (2px) | 'none' | 'full' (circle).
+ *                     Default was 'tight' until 2026-08-12 — flipped to 'sm' per
+ *                     the system radius law (containers are 4px everywhere);
+ *                     square-corner contexts opt out via 'tight'/'none'.
  *   frame           — boolean (default true). When false, no border drawn —
  *                     used by tightly-packed grid layouts.
  *   variant         — 'default' (border-based chrome) |
@@ -41,6 +46,12 @@ const SIZE_CLASSES = {
   stretch: 'w-full h-full',
 }
 
+/* Named px sizes that track the control ladder — inline style, not a
+ * utility class (package chrome never rides arbitrary utilities). */
+const NAMED_PX = {
+  'control-sm': 26, // kol-control-sm outer height — paint-bar swatch flush with sm input chrome
+}
+
 const RADIUS_CLASSES = {
   none:  'rounded-none',
   tight: 'rounded-[var(--kol-radius-xs)]',
@@ -54,7 +65,7 @@ export default function ColorSwatch({
   hex,
   selected = false,
   size = 24,
-  radius = 'tight',
+  radius = 'sm',
   frame = true,
   variant = 'default',
   hoverable = true,
@@ -66,9 +77,10 @@ export default function ColorSwatch({
   ...rest
 }) {
   const interactive = typeof onClick === 'function'
-  const isNamed = typeof size === 'string'
-  const sizeCls   = isNamed ? (SIZE_CLASSES[size] ?? '') : ''
-  const sizeStyle = isNamed ? null : { width: size, height: size }
+  const resolvedSize = NAMED_PX[size] ?? size
+  const isNamed = typeof resolvedSize === 'string'
+  const sizeCls   = isNamed ? (SIZE_CLASSES[resolvedSize] ?? '') : ''
+  const sizeStyle = isNamed ? null : { width: resolvedSize, height: resolvedSize }
 
   const isHalo  = variant === 'halo'
   const radiusCls = RADIUS_CLASSES[radius] ?? RADIUS_CLASSES.sm

package/src/atoms/Input.jsx

@@ -26,6 +26,10 @@ import { glyphSize } from '../hooks/glyphLadders.js'
  *     the shell at text-meta. aria-hidden — affordances, not labels.
  *   iconLeft — name of a leading icon rendered inside the shell (e.g.
  *     "search-16"). iconSize overrides the size-derived default.
+ *   slotLeft — arbitrary leading node rendered inside the shell, before
+ *     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.
  *
  * Chrome (bg/border/padding/transition/disabled) comes from .kol-control;
  * Input owns prefix/suffix/icon layout + the inner <input> styling.
@@ -42,6 +46,7 @@ export default function Input({
   chars,
   prefix,
   suffix,
+  slotLeft,
   iconLeft,
   iconSize = null,
   placeholder,
@@ -99,6 +104,9 @@ export default function Input({
       style={width ? { width: typeof width === 'number' ? `${width}px` : width } : undefined}
       aria-disabled={disabled || undefined}
     >
+      {slotLeft && (
+        <span className="flex items-center shrink-0 pr-2">{slotLeft}</span>
+      )}
       {iconLeft && (
         <span aria-hidden="true" className="flex items-center text-auto opacity-50 shrink-0 pr-2">
           <Icon name={iconLeft} size={resolvedIconSize} />

package/src/atoms/Textarea.jsx

@@ -15,7 +15,14 @@ import { Icon } from '@kolkrabbi/kol-icons'
  * dominating the panel). Resize is real (2026-07-08): native resize is
  * OFF (Firefox's built-in grip cannot be hidden any other way) and the
  * kol-icon-set-v1 `resize-grip` icon IS the drag handle — corner drag,
- * both axes, min 120×40. One grip, every browser.
+ * min 120×40. One grip, every browser.
+ *
+ * The X-drag is container-clamped (2026-08-12, TextareaResizeClamp): the
+ * width write caps at the parent's content width, so a drag can never
+ * overflow the box the Textarea sits in. `axis` narrows the drag:
+ *   axis="both" (default) — corner drag, clamped
+ *   axis="y"              — height only; rail-mounted textareas have
+ *                           nowhere meaningful to grow on X
  *
  * Controlled OR uncontrolled:
  *   - pass `value` + `onChange` for controlled,
@@ -32,6 +39,7 @@ export default function Textarea({
   variant = 'filled',
   size = 'md',
   rows = 3,
+  axis = 'both',
   placeholder,
   disabled = false,
   className = '',
@@ -72,8 +80,11 @@ export default function Textarea({
         aria-hidden="true"
         className="kol-textarea-resize-icon"
         onPointerDown={(e) => {
-          // The grip IS the resize handle — corner drag, both axes
-          // (min 120×40). Width lands on the shell, height on the textarea.
+          // The grip IS the resize handle — corner drag (min 120×40).
+          // Width lands on the shell, height on the textarea. The width
+          // write is clamped to the parent's content width so an X-drag
+          // can never overflow the container; the 120 floor wins if the
+          // container is narrower than that.
           const shell = e.currentTarget.parentElement
           const ta = shell?.querySelector('textarea')
           if (!shell || !ta) return
@@ -82,8 +93,17 @@ export default function Textarea({
           const startY = e.clientY
           const startW = shell.offsetWidth
           const startH = ta.offsetHeight
+          const parent = shell.parentElement
+          let maxW = Infinity
+          if (parent) {
+            const pcs = getComputedStyle(parent)
+            maxW = parent.clientWidth
+              - parseFloat(pcs.paddingLeft) - parseFloat(pcs.paddingRight)
+          }
           const move = (ev) => {
-            shell.style.width = `${Math.max(startW + ev.clientX - startX, 120)}px`
+            if (axis !== 'y') {
+              shell.style.width = `${Math.max(Math.min(startW + ev.clientX - startX, maxW), 120)}px`
+            }
             ta.style.height = `${Math.max(startH + ev.clientY - startY, 40)}px`
           }
           const up = () => {

package/src/molecules/ColorInputRow.jsx

@@ -127,7 +127,9 @@ export default function ColorInputRow({
     chip(24)
   )
 
-  const labelCls = `kol-helper-12 truncate ${unused ? 'text-meta' : 'text-emphasis'}`
+  /* leading-normal: truncate's overflow clip cuts mono descenders on
+   * kol-helper's 1-em line box (MenuItemDescenderClip sweep, 2026-08-12). */
+  const labelCls = `kol-helper-12 truncate leading-normal ${unused ? 'text-meta' : 'text-emphasis'}`
 
   const hexInput = (
     <Input
@@ -156,7 +158,7 @@ export default function ColorInputRow({
         >
           {swatchCell}
           <span className={labelCls}>{labelVisible ? label : ''}</span>
-          <span className={`kol-helper-10 truncate ${unused ? 'text-subtle' : 'text-meta'}`}>
+          <span className={`kol-helper-10 truncate leading-normal ${unused ? 'text-subtle' : 'text-meta'}`}>
             {tokenName}
           </span>
           {hexInput}

package/src/molecules/FieldRow.jsx

@@ -236,7 +236,8 @@ export default function FieldRow({
       <div className={`kol-mono-12 text-emphasis${type === 'media' ? ' self-start pt-1' : ''}`}>{label}</div>
       <div className="min-w-0">{control}</div>
       {hint != null && (
-        <div className="col-start-2 kol-helper-12 text-meta pt-2 truncate">{hint}</div>
+        /* leading-normal: descender fix (MenuItemDescenderClip sweep, 2026-08-12) */
+        <div className="col-start-2 kol-helper-12 text-meta pt-2 truncate leading-normal">{hint}</div>
       )}
     </div>
   )

package/src/molecules/MenuItem.jsx

@@ -101,7 +101,11 @@ export function MenuDropdownItem({ onClick, disabled, prefix, iconLeft, shortcut
     >
       {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>}
-      <span className="flex-1 truncate">{children}</span>
+      {/* leading-normal: kol-helper-12 is line-height 1, and truncate's
+        * overflow clip cuts mono descenders on a 1-em line box ("Show grid"
+        * loses its g). The h-8 centered row absorbs the taller line box —
+        * zero layout shift (MenuItemDescenderClip, 2026-08-12). */}
+      <span className="flex-1 truncate leading-normal">{children}</span>
       {shortcut && <span className="kol-helper-10 text-emphasis shrink-0 inline-flex items-center">{shortcut}</span>}
     </button>
   )
@@ -133,7 +137,8 @@ export function MenuDropdownNest({ prefix, iconLeft, label, children }) {
       >
         {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>}
-        <span className="flex-1 truncate">{label}</span>
+        {/* leading-normal — same descender fix as MenuDropdownItem above. */}
+        <span className="flex-1 truncate leading-normal">{label}</span>
         <Icon
           name="chevron-down"
           size={10}

package/src/molecules/Modal.jsx

@@ -9,6 +9,13 @@ import Input from '../atoms/Input.jsx'
  *   const { prompt, confirm } = useModal()
  *   const name    = await prompt('Name this frame:', 'Untitled')
  *   const proceed = await confirm('Discard unsaved changes?')
+ *   const restore = await confirm('Restore your last canvas?',
+ *                                 { okLabel: 'Restore', cancelLabel: 'New file' })
+ *
+ * Both take an options object — `{ okLabel, cancelLabel }` (prompt: third
+ * arg, after defaultValue) — so the buttons can SAY the outcome; defaults
+ * stay OK / Cancel, existing callers untouched (ModalConfirmLabels,
+ * 2026-08-12). Enter/Escape keep their meanings regardless of labels.
  *
  * Returned promise resolves to:
  *   - prompt  → string (value) on submit, `null` on cancel
@@ -30,12 +37,12 @@ export function ModalProvider({ children }) {
     })
   }, [])
 
-  const prompt = useCallback((title, defaultValue = '') =>
-    new Promise((resolve) => setState({ kind: 'prompt', title, defaultValue, resolve })),
+  const prompt = useCallback((title, defaultValue = '', { okLabel, cancelLabel } = {}) =>
+    new Promise((resolve) => setState({ kind: 'prompt', title, defaultValue, okLabel, cancelLabel, resolve })),
   [])
 
-  const confirm = useCallback((title) =>
-    new Promise((resolve) => setState({ kind: 'confirm', title, resolve })),
+  const confirm = useCallback((title, { okLabel, cancelLabel } = {}) =>
+    new Promise((resolve) => setState({ kind: 'confirm', title, okLabel, cancelLabel, resolve })),
   [])
 
   return (
@@ -85,7 +92,9 @@ function ModalView({ state, closeWith }) {
           maxWidth: '90vw',
         }}
       >
-        <p className="kol-helper-12 text-emphasis">{state.title}</p>
+        {/* kol-mono-12, not helper: dialog copy WRAPS, and helper's
+          * line-height 1 is single-line chrome only (type protocol). */}
+        <p className="kol-mono-12 text-emphasis">{state.title}</p>
         {state.kind === 'prompt' && (
           <Input
             ref={inputRef}
@@ -97,19 +106,28 @@ function ModalView({ state, closeWith }) {
           />
         )}
         <div className="flex gap-2 justify-end">
-          <Button variant="secondary" size="sm" onClick={cancel}>Cancel</Button>
-          <Button variant="primary"   size="sm" onClick={submit}>OK</Button>
+          <Button variant="secondary" size="sm" onClick={cancel}>{state.cancelLabel ?? 'Cancel'}</Button>
+          <Button variant="primary"   size="sm" onClick={submit}>{state.okLabel ?? 'OK'}</Button>
         </div>
       </div>
     </div>
   )
 }
 
+/* Warn once, not per call — the fallback swallowing a missing ModalProvider
+ * silently is how kol-fxr ran months on native window.confirm without
+ * noticing (ModalConfirmLabels, 2026-08-12). */
+let warnedNoProvider = false
+
 export function useModal() {
   const ctx = useContext(ModalCtx)
   if (ctx) return ctx
   /* No-context fallback — falls back to native prompt/confirm so callers
    * don't need to null-check. */
+  if (!warnedNoProvider && typeof console !== 'undefined') {
+    warnedNoProvider = true
+    console.warn('[kol] useModal(): no <ModalProvider> mounted — falling back to native window.prompt/confirm. Custom labels are ignored on the fallback.')
+  }
   return {
     prompt:  async (title, def = '') => {
       if (typeof window === 'undefined') return null

package/src/organisms/RecordManager.jsx

@@ -353,7 +353,7 @@ export default function RecordManager({
             {onPreview && (
               <ToolbarIcon name="play" label="Preview" onClick={() => onPreview(record)} />
             )}
-            {saveState != null && <span className="kol-helper-10 text-meta truncate">{saveState}</span>}
+            {saveState != null && <span className="kol-helper-10 text-meta truncate leading-normal">{saveState}</span>}
             {onPublish && (
               <Button variant="primary" size="sm" onClick={() => onPublish(record)}>
                 {publishLabel}