@kolkrabbi/kol-component 0.33.1 → 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.33.1",
+  "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",
@@ -24,7 +29,7 @@
     "@floating-ui/react": "^0.27.19",
     "embla-carousel-react": "^8.6.0",
     "react-syntax-highlighter": "^16.1.1",
-    "@kolkrabbi/kol-icons": "^0.13.0"
+    "@kolkrabbi/kol-icons": "^0.14.0"
   },
   "peerDependencies": {
     "framer-motion": "^12.0.0",

package/src/atoms/Badge.jsx

@@ -7,14 +7,18 @@
 
 import { Icon } from '@kolkrabbi/kol-icons'
 
+/* Tone names mirror StatusChip's --ui-* ladder (error/warning/info/success —
+ * siblings, one language). `destructive` and `critical` are legacy aliases
+ * of `error`; canonical name in new call sites is `error`. */
 const VARIANT_MAP = {
   default: 'kol-badge-default',
   secondary: 'kol-badge-secondary',
-  destructive: 'kol-badge-destructive',
+  error: 'kol-badge-error',
+  destructive: 'kol-badge-error',
+  critical: 'kol-badge-error',
   outline: 'kol-badge-outline',
   success: 'kol-badge-success',
   warning: 'kol-badge-warning',
-  critical: 'kol-badge-critical',
   info: 'kol-badge-info'
 }
 

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) |
@@ -34,13 +39,19 @@
  *   onClick         — if provided, renders as <button>; else <span>.
  *   title           — passes through.
  */
-import TransparentX from './TransparentX'
+import TransparentX from '../utilities/TransparentX'
 
 const SIZE_CLASSES = {
   fill:    'w-full aspect-square',
   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/Image.jsx

@@ -6,7 +6,7 @@
  * visible at its intended size (aspect-ratio preserved).
  */
 import { useState } from 'react'
-import AssetPlaceholder from './AssetPlaceholder'
+import AssetPlaceholder from '../utilities/AssetPlaceholder'
 
 export default function Image({
   src,

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/graphics/Graphic.jsx

@@ -12,7 +12,7 @@
  * than silently empty.
  */
 import { useEffect, useState } from 'react'
-import AssetPlaceholder from '../atoms/AssetPlaceholder.jsx'
+import AssetPlaceholder from '../utilities/AssetPlaceholder.jsx'
 
 let RAW = null              // category → name → raw svg, once the chunk resolves
 let loadPromise = null

package/src/index.js

@@ -17,8 +17,8 @@
 
 // atoms
 export { default as AnimatedTitle } from './atoms/AnimatedTitle.jsx'
-export { default as AssetGrid } from './atoms/AssetGrid.jsx'
-export { default as AssetPlaceholder } from './atoms/AssetPlaceholder.jsx'
+export { default as AssetGrid } from './utilities/AssetGrid.jsx'
+export { default as AssetPlaceholder } from './utilities/AssetPlaceholder.jsx'
 export { default as Avatar } from './atoms/Avatar.jsx'
 export { default as Badge } from './atoms/Badge.jsx'
 export { default as Button } from './atoms/Button.jsx'
@@ -27,19 +27,19 @@ export { default as CurveOverlay } from './atoms/CurveOverlay.jsx'
 export { default as Divider } from './atoms/Divider.jsx'
 export { default as DocsToc } from './molecules/DocsToc.jsx'
 export { default as DropdownTagFilter } from './molecules/DropdownTagFilter.jsx'
-export { default as EmptyState } from './atoms/EmptyState.jsx'
+export { default as EmptyState } from './molecules/EmptyState.jsx'
 export { default as IconFrame } from './atoms/IconFrame.jsx'
-export { default as ExitPreview } from './atoms/ExitPreview.jsx'
+export { default as ExitPreview } from './utilities/ExitPreview.jsx'
 export { default as Figure } from './atoms/Figure.jsx'
-export { default as FullscreenOverlay } from './molecules/FullscreenOverlay.jsx'
+export { default as FullscreenOverlay } from './utilities/FullscreenOverlay.jsx'
 export { default as HlsVideo } from './atoms/HlsVideo.jsx'
 export { default as Input } from './atoms/Input.jsx'
 export { default as Label } from './atoms/Label.jsx'
 export { default as LabeledControl } from './molecules/LabeledControl.jsx'
-export { default as OverlayGlassPanel } from './atoms/OverlayGlassPanel.jsx'
+export { default as OverlayGlassPanel } from './utilities/OverlayGlassPanel.jsx'
 export { default as Pill } from './atoms/Pill.jsx'
-export { usePopover, PopoverPanel, Tooltip } from './atoms/Popover.jsx'
-export { default as ProsePreview } from './atoms/ProsePreview.jsx'
+export { usePopover, PopoverPanel, Tooltip } from './utilities/Popover.jsx'
+export { default as ProsePreview } from './utilities/ProsePreview.jsx'
 export { default as QuantityInput } from './molecules/QuantityInput.jsx'
 export { default as RotaryDial } from './atoms/RotaryDial.jsx'
 export { default as SearchInput } from './molecules/SearchInput.jsx'
@@ -52,17 +52,16 @@ export { default as Textarea } from './atoms/Textarea.jsx'
 export { default as ToggleBracket } from './atoms/ToggleBracket.jsx'
 export { default as ToggleCheckbox } from './atoms/ToggleCheckbox.jsx'
 export { default as ToggleSwitch } from './atoms/ToggleSwitch.jsx'
-export { default as TiltCard } from './atoms/TiltCard.jsx'
-export { default as TransparentX } from './atoms/TransparentX.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'
 
 // molecules
 export { Accordion, AccordionPanel } from './molecules/Accordion.jsx'
-export { default as ButtonGroup } from './molecules/ButtonGroup.jsx'
+export { default as ButtonGroup } from './utilities/ButtonGroup.jsx'
 /* monorepo sets (P6–P10) — molecule members */
 export { default as AlignmentGrid } from './molecules/AlignmentGrid.jsx'
 export { default as ImageBlock } from './molecules/ImageBlock.jsx'
-export { default as InteractiveImage } from './atoms/InteractiveImage.jsx'
 export { default as SelectionOverlay } from './atoms/SelectionOverlay.jsx'
 export { default as VideoBlock, getEmbedUrl } from './molecules/VideoBlock.jsx'
 export { default as CardFeatureItem } from './molecules/CardFeatureItem.jsx'
@@ -79,7 +78,7 @@ export { default as MediaRow } from './molecules/MediaRow.jsx'
 export { MenuItem, MenuDropdownItem, MenuDropdownDivider, MenuDropdownNest } from './molecules/MenuItem.jsx'
 export { MenuPopover } from './molecules/MenuPopover.jsx'
 export { ModalProvider, useModal } from './molecules/Modal.jsx'
-export { default as PaletteHarmonyWheel } from './atoms/PaletteHarmonyWheel.jsx'
+export { default as PaletteHarmonyWheel } from './molecules/PaletteHarmonyWheel.jsx'
 export { default as PropertyInput } from './molecules/PropertyInput.jsx'
 export { default as ShapeDropdown } from './molecules/ShapeDropdown.jsx'
 export { default as ShellDrawer } from './molecules/ShellDrawer.jsx'
@@ -96,20 +95,20 @@ export { default as TabsRow } from './molecules/TabsRow.jsx'
    standalone @kolkrabbi/kol-foundry package (with the type-specimen kit +
    live-font effects moved there 2026-07-09) — never re-exported here. */
 export { default as Canvas, CanvasFrame, PanViewport, CANVAS_VIRTUAL_W, DEFAULT_ASPECTS, CANVAS_DEFAULTS } from './organisms/Canvas.jsx'
-export { default as EditorShell } from './organisms/EditorShell.jsx'
+export { default as EditorShell } from './utilities/EditorShell.jsx'
 export { default as GalleryCarousel } from './organisms/GalleryCarousel.jsx'
-export { default as AsciiCursor } from './atoms/AsciiCursor.jsx'
+export { default as AsciiCursor } from './utilities/AsciiCursor.jsx'
 export { default as BentoCard } from './molecules/BentoCard.jsx'
 export { default as Carousel } from './molecules/Carousel.jsx'
 export { default as ContentFilters } from './organisms/ContentFilters.jsx'
 export { default as CtaGlobal } from './organisms/CtaGlobal.jsx'
-export { default as ErrorBoundary } from './molecules/ErrorBoundary.jsx'
+export { default as ErrorBoundary } from './utilities/ErrorBoundary.jsx'
 export { default as FeatureSplit } from './organisms/FeatureSplit.jsx'
 export { default as FeaturedCarousel } from './organisms/FeaturedCarousel.jsx'
 export { default as FeaturesCardSection } from './organisms/FeaturesCardSection.jsx'
 export { default as FoundryCTA } from './organisms/FoundryCTA.jsx'
 export { default as FullBleedHero } from './organisms/FullBleedHero.jsx'
-export { default as LoaderOverlay } from './molecules/LoaderOverlay.jsx'
+export { default as LoaderOverlay } from './utilities/LoaderOverlay.jsx'
 export { default as MediaLibrary, MediaLibraryProvider, useMediaLibrary, MediaPicker, MediaBrowser } from './organisms/MediaLibrary.jsx'
 export { default as MediaTileGallery } from './organisms/MediaTileGallery.jsx'
 export { default as MediaViewer } from './organisms/MediaViewer.jsx'

package/src/molecules/BentoCard.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import { motion } from 'framer-motion'
 import HlsVideo from '../atoms/HlsVideo.jsx'
-import AssetPlaceholder from '../atoms/AssetPlaceholder.jsx'
+import AssetPlaceholder from '../utilities/AssetPlaceholder.jsx'
 import Button from '../atoms/Button.jsx'
 import Image from '../atoms/Image.jsx'
 import useTilt from '../hooks/useTilt.js'

package/src/molecules/ColorInputRow.jsx

@@ -2,7 +2,7 @@ import { useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
 import ColorSwatch from '../atoms/ColorSwatch'
 import Input from '../atoms/Input'
-import { usePopover, PopoverPanel } from '../atoms/Popover'
+import { usePopover, PopoverPanel } from '../utilities/Popover'
 
 /**
  * ColorInputRow — swatch chip + `#` hex input row. The single merged form of
@@ -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/Dropdown.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
 import { MenuDropdownItem } from './MenuItem.jsx'
-import { PopoverPanel, usePopover } from '../atoms/Popover.jsx'
+import { PopoverPanel, usePopover } from '../utilities/Popover.jsx'
 import { indicatorSize } from '../hooks/glyphLadders.js'
 
 /**

package/src/{atoms → molecules}/EmptyState.jsx

@@ -13,10 +13,14 @@
 export default function EmptyState({ eyebrow, title, body, footer }) {
   return (
     <div>
+      {/* helper (line-height 1) is single-line chrome ONLY — title and footer
+        * can wrap, so they ride the line-height-bearing kol-mono-* scale
+        * (the type-conform fault line; user, 2026-08-09). Eyebrow stays
+        * helper: a one-line kicker. */}
       {eyebrow && <p className="kol-helper-10 text-meta mb-1">{eyebrow}</p>}
-      {title && <p className="kol-helper-16 text-emphasis mb-3">{title}</p>}
+      {title && <p className="kol-mono-16 text-emphasis mb-3">{title}</p>}
       {body && <p className="kol-sans-body-03 text-body mb-4">{body}</p>}
-      {footer && <p className="kol-helper-12 text-meta pt-3 border-t border-fg-08">{footer}</p>}
+      {footer && <p className="kol-mono-12 text-meta pt-3 border-t border-fg-08">{footer}</p>}
     </div>
   )
 }

package/src/molecules/FieldRow.jsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
 import Input from '../atoms/Input'
-import { usePopover, PopoverPanel } from '../atoms/Popover'
+import { usePopover, PopoverPanel } from '../utilities/Popover'
 import Dropdown from './Dropdown'
 
 /**
@@ -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

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
-import { PopoverPanel, usePopover } from '../atoms/Popover.jsx'
+import { PopoverPanel, usePopover } from '../utilities/Popover.jsx'
 
 /**
  * MenuItem — top-level menu entry. Trigger button + popover panel.
@@ -54,11 +54,13 @@ export function MenuItem({
           style={{ transform: open ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 200ms' }}
         />
       </button>
+      {/* w-max: floats size to CONTENT, never to the containing block —
+        * same family law as ShapeDropdown's panel (2026-08-09 review). */}
       <PopoverPanel
         popover={popover}
         panel={false}
         focus={false}
-        className={`bg-surface-secondary rounded ${panelClassName}`}
+        className={`w-max bg-surface-secondary rounded ${panelClassName}`}
         style={panelStyle}
       >
         <div
@@ -99,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>
   )
@@ -131,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/molecules/ShapeDropdown.jsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
 import Button from '../atoms/Button.jsx'
-import { PopoverPanel, usePopover } from '../atoms/Popover.jsx'
+import { PopoverPanel, usePopover } from '../utilities/Popover.jsx'
 import { MenuDropdownItem } from './MenuItem.jsx'
 
 /**
@@ -68,11 +68,15 @@ const ShapeDropdown = ({ options = [], value, onChange, onAction, className = ''
       >
         <Button variant="ghost" size="sm" quiet iconOnly="chevron-down" iconSize={10} aria-label="Variants" />
       </span>
+      {/* w-max: a float sizes to its CONTENT (floating-ui contract) — without
+        * it the absolutely-positioned panel can stretch against its containing
+        * block and ignore both its rows and its trigger (2026-08-09 review,
+        * the shape menu spanning the whole card). */}
       <PopoverPanel
         popover={popover}
         panel={false}
         focus={false}
-        className="bg-surface-secondary border border-fg-08 rounded shadow-lg"
+        className="w-max bg-surface-secondary border border-fg-08 rounded shadow-lg"
       >
         {options.map((option) => (
           <MenuDropdownItem

package/src/molecules/SplitToolButton.jsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
-import { PopoverPanel, usePopover } from '../atoms/Popover.jsx'
+import { PopoverPanel, usePopover } from '../utilities/Popover.jsx'
 
 /**
  * SplitToolButton — single-trigger split tool button + variant menu (the
@@ -100,11 +100,12 @@ const SplitToolButton = ({
         {triggerVariant && <Icon name={triggerVariant.icon} size={14} />}
         <FoldIndicator />
       </button>
+      {/* w-max — floats size to content, the menu-family law (2026-08-09). */}
       <PopoverPanel
         popover={popover}
         panel={false}
         focus={false}
-        className="bg-surface-secondary border border-fg-08 rounded shadow-lg"
+        className="w-max bg-surface-secondary border border-fg-08 rounded shadow-lg"
       >
         {variants.map((variant) => {
           const isActive = active && variant.id === value

package/src/organisms/FeaturedCarousel.jsx

@@ -2,7 +2,7 @@ import { isValidElement, useCallback, useEffect, useState } from 'react'
 import useEmblaCarousel from 'embla-carousel-react'
 import Image from '../atoms/Image.jsx'
 import HlsVideo from '../atoms/HlsVideo.jsx'
-import OverlayGlassPanel from '../atoms/OverlayGlassPanel.jsx'
+import OverlayGlassPanel from '../utilities/OverlayGlassPanel.jsx'
 
 /**
  * Per-slide media layer: a `{ src, kind }` descriptor becomes a cover-fit

package/src/organisms/MediaLibrary.jsx

@@ -2,7 +2,7 @@ import { createContext, useContext, useEffect, useMemo, useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
 import Button from '../atoms/Button.jsx'
 import SegmentedToggle from '../atoms/SegmentedToggle.jsx'
-import FullscreenOverlay from '../molecules/FullscreenOverlay.jsx'
+import FullscreenOverlay from '../utilities/FullscreenOverlay.jsx'
 import MediaCard from '../molecules/MediaCard.jsx'
 import MediaRow from '../molecules/MediaRow.jsx'
 import ContentFilters from './ContentFilters.jsx'

package/src/organisms/MediaViewer.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import useEmblaCarousel from 'embla-carousel-react'
 import { Icon } from '@kolkrabbi/kol-icons'
-import FullscreenOverlay from '../molecules/FullscreenOverlay.jsx'
+import FullscreenOverlay from '../utilities/FullscreenOverlay.jsx'
 
 /**
  * MediaViewer — THE fullscreen paged media viewer. One viewer for every

package/src/organisms/RecordManager.jsx

@@ -7,7 +7,7 @@ import ToggleCheckbox from '../atoms/ToggleCheckbox'
 import IconFrame from '../atoms/IconFrame'
 import ShellDrawer from '../molecules/ShellDrawer'
 import FieldRow, { StatusChip } from '../molecules/FieldRow'
-import { Tooltip } from '../atoms/Popover'
+import { Tooltip } from '../utilities/Popover'
 import Table from './Table'
 import MediaLibrary from './MediaLibrary'
 
@@ -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}

package/src/atoms/InteractiveImage.jsx

@@ -1,152 +0,0 @@
-import { useId, useLayoutEffect, useRef, useState } from 'react'
-import { motion } from 'framer-motion'
-import useTilt from '../hooks/useTilt.js'
-import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
-import useCoarsePointer from '../hooks/useCoarsePointer.js'
-
-/* The default mask: one closed blob authored in unit-square coordinates, so
- * it scales to any element size. Swap it via the `shape` prop — any path in
- * a 0..1 box works. */
-const BLOB =
-  'M.96.217L.855.834a.09.09 0 01-.07.072L.166.994A.09.09 0 01.06.9L.04.166A.09.09 0 01.15.073L.89.13a.09.09 0 01.07.087z'
-
-/**
- * InteractiveImage — an image seen through an organic blob mask that
- * re-centres on the cursor, floating over a blurred, scaled copy of
- * itself. The whole stage tilts in 3D toward the pointer.
- *
- * Composed, not forked: the tilt is the shared `useTilt` hook (springs,
- * not tweens — the DS has one tilt and this is it), so the motion here
- * matches TiltCard and BentoCard rather than introducing a second feel.
- * The source's gsap tweens are gone with it; nothing else needed gsap.
- *
- * Motion is gated twice — on coarse-pointer devices and under
- * prefers-reduced-motion the mask sits centred, the tilt never mounts,
- * and no listeners are attached.
- *
- * The two SVG ids are per-instance (`useId`). The monorepo source hard-coded
- * them at module scope, so a second instance on the same page silently
- * clobbered the first one's clip path and pattern — the reason this was
- * lobbied as a fresh effect rather than a migration.
- *
- * Purely image-driven: no tokens, no colors, nothing to theme. Size comes
- * from the consumer via `className` — the stage fills its box.
- *
- * @param {string} src         image source, used by both the mask and the backdrop. Required
- * @param {string} alt         accessible name for the masked image
- * @param {string} className   classes on the root — supplies the size
- * @param {string} shape       SVG path `d` in unit-square coords; the mask outline
- * @param {number} magnitude   max tilt in degrees (±)
- * @param {number} perspective CSS transform perspective, in px
- * @param {number} blur        backdrop blur radius, in px
- * @param {number} backdropScale backdrop zoom, as a multiplier — hides the blur's soft edge
- */
-export default function InteractiveImage({
-  src,
-  alt = '',
-  className = '',
-  shape = BLOB,
-  magnitude = 10,
-  perspective = 500,
-  blur = 10,
-  backdropScale = 1.1,
-}) {
-  const uid = useId()
-  const clipId = `kol-ii-clip-${uid}`
-  const patternId = `kol-ii-pattern-${uid}`
-
-  const reducedMotion = usePrefersReducedMotion()
-  const coarse = useCoarsePointer()
-  const still = reducedMotion || coarse
-
-  const tilt = useTilt({ magnitude, perspective })
-  const boxRef = useRef(null)
-  const [size, setSize] = useState({ width: 0, height: 0 })
-  /* Mask centre in element coordinates; null until the pointer arrives, which
-   * is also the resting state — `centre` below reads it as dead centre. */
-  const [point, setPoint] = useState(null)
-
-  useLayoutEffect(() => {
-    const el = boxRef.current
-    if (!el) return undefined
-    const ro = new ResizeObserver(([entry]) => {
-      const { width, height } = entry.contentRect
-      setSize({ width, height })
-    })
-    ro.observe(el)
-    return () => ro.disconnect()
-  }, [])
-
-  const centre = point ?? { x: size.width / 2, y: size.height / 2 }
-
-  /* The unit blob is scaled up to the element box, then offset so its centre
-   * lands under the pointer rather than at the origin. */
-  const maskTransform = `translate(${centre.x - size.width / 2} ${centre.y - size.height / 2}) scale(${size.width} ${size.height})`
-
-  const handleMove = (e) => {
-    if (still) return
-    tilt.onMouseMove(e)
-    const rect = boxRef.current?.getBoundingClientRect()
-    if (!rect) return
-    setPoint({ x: e.clientX - rect.left, y: e.clientY - rect.top })
-  }
-
-  const handleLeave = () => {
-    if (still) return
-    tilt.onMouseLeave()
-    setPoint(null)
-  }
-
-  return (
-    <div
-      ref={boxRef}
-      className={`relative ${className}`}
-      onMouseMove={still ? undefined : handleMove}
-      onMouseLeave={still ? undefined : handleLeave}
-    >
-      <div
-        className="absolute inset-0 bg-cover bg-center"
-        style={{
-          backgroundImage: `url(${src})`,
-          filter: `blur(${blur}px)`,
-          transform: `scale(${backdropScale})`,
-        }}
-      />
-
-      <motion.svg
-        ref={tilt.ref}
-        role="img"
-        aria-label={alt || undefined}
-        aria-hidden={alt ? undefined : true}
-        className="relative w-full h-full"
-        viewBox={`0 0 ${size.width} ${size.height}`}
-        style={still ? undefined : tilt.style}
-      >
-        <defs>
-          <clipPath id={clipId}>
-            <path d={shape} transform={maskTransform} />
-          </clipPath>
-          <pattern
-            id={patternId}
-            patternUnits="userSpaceOnUse"
-            width={size.width}
-            height={size.height}
-          >
-            <image
-              href={src}
-              width="100%"
-              height="100%"
-              preserveAspectRatio="xMidYMid slice"
-            />
-          </pattern>
-        </defs>
-        <rect
-          width="100%"
-          height="100%"
-          fill={`url(#${patternId})`}
-          clipPath={`url(#${clipId})`}
-        />
-      </motion.svg>
-    </div>
-  )
-}