@kolkrabbi/kol-component 0.7.0 → 0.9.0

package/README.md

@@ -11,6 +11,14 @@ npm i @kolkrabbi/kol-component @kolkrabbi/kol-theme
 
 Requires a **Vite + Tailwind v4** app and the theme CSS imported (see the theme package).
 
+## Tailwind v4 consumers
+
+Tailwind skips `node_modules` when scanning, so point it at this package's source — otherwise the utility classes inside the components never generate and layouts collapse:
+
+```css
+@source "../node_modules/@kolkrabbi/kol-component/src";
+```
+
 ## Use
 
 ```jsx

package/package.json

@@ -1,16 +1,13 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.7.0",
+  "version": "0.9.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",
-    "./foundry": "./src/organisms/foundry/index.js",
-    "./dashboards": "./src/dashboards/index.js",
-    "./chess": "./src/chess/index.js"
+    ".": "./src/index.js"
   },
   "files": [
     "src",

package/src/atoms/RotaryDial.jsx

@@ -7,22 +7,29 @@ const snapTo = (v, min, max, step) => {
 }
 
 /**
- * RotaryDial — drag-to-set rotary knob numeric input. Vertical pointer drag
- * rotates the whole dial over a 270° sweep (−135° to +135°) mapped onto
- * min–max; a full sweep is ~200px of drag, movement measured absolute from
- * drag start. Controlled (`value`/`onChange`) with a local visual buffer so
- * rotation stays smooth while parent updates are RAF-throttled; the final
- * value fires on release. Focus + arrow keys step the value
- * (role="slider" with aria-valuemin/max/now). The label and `%` readout
- * rows render only when `label` is set; label text renders as authored.
+ * RotaryDial — drag-to-set rotary knob numeric input. The KNOB VARIANT of
+ * Slider (molecules/Slider.jsx): both implement the shared value-control
+ * contract — `value` / `min` / `max` / `step` / `onChange(next: number)` /
+ * `label` / `size` / `disabled` / `formatValue`. Controlled; onChange always
+ * fires with the plain number.
  *
- * @param {string}   label    text under the dial; also gates the label + readout rows
- * @param {number}   value    controlled value within min–max
- * @param {Function} onChange (next: number) => void — RAF-throttled while dragging, final on release
- * @param {number}   min      minimum value (default 0)
- * @param {number}   max      maximum value (default 100)
- * @param {number}   step     drag snap / arrow-key increment (default 1)
- * @param {number}   size     dial px size (default 80); derives ring + disc radii
+ * Vertical pointer drag rotates the whole dial over a 270° sweep (−135° to
+ * +135°) mapped onto min–max; a full sweep is ~200px of drag, movement
+ * measured absolute from drag start. A local visual buffer keeps rotation
+ * smooth while parent updates are RAF-throttled; the final value fires on
+ * release. Focus + arrow keys step the value (role="slider" with
+ * aria-valuemin/max/now). The label and readout rows render only when
+ * `label` is set; label text renders as authored.
+ *
+ * @param {string}   label       text under the dial; also gates the label + readout rows
+ * @param {number}   value       controlled value within min–max
+ * @param {Function} onChange    (next: number) => void — RAF-throttled while dragging, final on release
+ * @param {number}   min         minimum value (default 0)
+ * @param {number}   max         maximum value (default 100)
+ * @param {number}   step        drag snap / arrow-key increment (default 1)
+ * @param {number}   size        dial px size (default 80); derives ring + disc radii
+ * @param {boolean}  disabled    blocks drag + keyboard and dims the control (default false)
+ * @param {Function} formatValue optional readout formatter (value: number) => string; default `${value}%`
  */
 export default function RotaryDial({
   label,
@@ -32,6 +39,8 @@ export default function RotaryDial({
   max = 100,
   step = 1,
   size = 80,
+  disabled = false,
+  formatValue,
 }) {
   const [isDragging, setIsDragging] = useState(false)
   const [localValue, setLocalValue] = useState(value) // visual buffer — updates every move
@@ -99,23 +108,24 @@ export default function RotaryDial({
   const angle = -135 + ((localValue - min) / (max - min || 1)) * 270
 
   return (
-    <div className="flex flex-col items-center gap-2">
+    <div className={`flex flex-col items-center gap-2 ${disabled ? 'opacity-50' : ''}`}>
       <div
         role="slider"
-        tabIndex={0}
+        tabIndex={disabled ? -1 : 0}
         aria-label={label}
         aria-valuemin={min}
         aria-valuemax={max}
         aria-valuenow={localValue}
-        className="relative cursor-pointer select-none touch-none"
+        aria-disabled={disabled || undefined}
+        className={`relative select-none touch-none ${disabled ? 'cursor-default' : 'cursor-pointer'}`}
         style={{
           width: size,
           height: size,
           transform: `rotate(${angle}deg)`,
           willChange: isDragging ? 'transform' : 'auto',
         }}
-        onPointerDown={handlePointerDown}
-        onKeyDown={handleKeyDown}
+        onPointerDown={disabled ? undefined : handlePointerDown}
+        onKeyDown={disabled ? undefined : handleKeyDown}
       >
         <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ overflow: 'visible' }}>
           {/* outer dashed tick ring */}
@@ -144,7 +154,11 @@ export default function RotaryDial({
         </svg>
       </div>
       {label && <div className="kol-helper-12 text-fg-64">{label}</div>}
-      {label && <div className="kol-helper-12 text-fg-96">{value}%</div>}
+      {label && (
+        <div className="kol-helper-12 text-fg-96">
+          {formatValue ? String(formatValue(value)) : `${value}%`}
+        </div>
+      )}
     </div>
   )
 }

package/src/hooks/colorMath.js

@@ -0,0 +1,214 @@
+/**
+ * colorMath — HSL/hex conversion + harmony generation for the KOL color
+ * pickers (SpectrumControls, PaletteHarmonyWheel).
+ *
+ * Plain functions, not a hook — it lives in src/hooks/ because that is the
+ * taxonomy's only non-component folder (same rationale as cssVar.js).
+ *
+ * Two harmony paths:
+ *   - Deterministic — `harmonyColors(hue, harmony, {saturation, lightness})`
+ *     / `generateHarmony(baseHex, harmony)`: role-offset hues off a base,
+ *     no randomness, so dragging the harmony wheel is smooth + repeatable.
+ *   - Seeded/jittered — `seedHarmony(baseHex, mode)`: slot 0 = the base,
+ *     slots 1–5 derived via a mode with small random jitter, so consecutive
+ *     "randomize" clicks produce related-but-different variants around a seed.
+ */
+
+/* ── HSL / hex conversion ─────────────────────────────────────────────── */
+
+/** '#RRGGBB' → { h: 0–360, s: 0–100, l: 0–100 }. */
+export function hexToHsl(hex) {
+  const r = parseInt(hex.slice(1, 3), 16) / 255
+  const g = parseInt(hex.slice(3, 5), 16) / 255
+  const b = parseInt(hex.slice(5, 7), 16) / 255
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  let h = 0, s = 0
+  const l = (max + min) / 2
+  if (max !== min) {
+    const d = max - min
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
+    switch (max) {
+      case r: h = (g - b) / d + (g < b ? 6 : 0); break
+      case g: h = (b - r) / d + 2; break
+      case b: h = (r - g) / d + 4; break
+    }
+    h *= 60
+  }
+  return { h, s: s * 100, l: l * 100 }
+}
+
+/** (h: 0–360, s: 0–100, l: 0–100) → uppercase '#RRGGBB'. */
+export function hslToHex(h, s, l) {
+  h = normHue(h)
+  s = Math.max(0, Math.min(100, s)) / 100
+  l = Math.max(0, Math.min(100, l)) / 100
+  const c = (1 - Math.abs(2 * l - 1)) * s
+  const x = c * (1 - Math.abs(((h / 60) % 2) - 1))
+  const m = l - c / 2
+  let r = 0, g = 0, b = 0
+  if      (h <  60) { r = c; g = x; b = 0 }
+  else if (h < 120) { r = x; g = c; b = 0 }
+  else if (h < 180) { r = 0; g = c; b = x }
+  else if (h < 240) { r = 0; g = x; b = c }
+  else if (h < 300) { r = x; g = 0; b = c }
+  else              { r = c; g = 0; b = x }
+  const toHex = (v) => Math.round((v + m) * 255).toString(16).padStart(2, '0')
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase()
+}
+
+/** RGB components (0–255) → uppercase '#RRGGBB'. Shared with the eyedropper. */
+export function rgbToHex(r, g, b) {
+  return '#' + [r, g, b]
+    .map((n) => Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, '0'))
+    .join('')
+    .toUpperCase()
+}
+
+/** Wrap any hue into [0, 360). */
+export const normHue = (h) => ((h % 360) + 360) % 360
+
+/* ── Harmony schemes ──────────────────────────────────────────────────── */
+
+/**
+ * Hue offsets for the five palette roles (Primary / Secondary / Light /
+ * Dark / Accent) relative to the base hue. The wheel draws a satellite
+ * marker per unique offset; the generators emit one color per role.
+ */
+export const HARMONIES = [
+  { id: 'analogous',     label: 'Analogous',           roleOffsets: [0, -30, -15, 15, 30] },
+  { id: 'complementary', label: 'Complementary',       roleOffsets: [0, 0, 0, 180, 180] },
+  { id: 'split',         label: 'Split complementary', roleOffsets: [0, 150, 210, 0, 150] },
+  { id: 'triadic',       label: 'Triadic',             roleOffsets: [0, 120, 240, 0, 120] },
+  { id: 'tetradic',      label: 'Tetradic',            roleOffsets: [0, 90, 180, 270, 0] },
+]
+
+/** Resolve a harmony id string OR a harmony object to the object. */
+export const harmonyById = (harmony) => {
+  if (harmony && typeof harmony === 'object') return harmony
+  return HARMONIES.find((h) => h.id === harmony) ?? HARMONIES[0]
+}
+
+/**
+ * Deterministic role colors for a harmony, driven by a hue + fixed S/L.
+ * Preserves saturation/lightness across roles (only hue rotates), so the
+ * output tracks the wheel's satellite markers exactly.
+ *
+ * @param {number} hue      base hue, 0–360
+ * @param {string|object} harmony  harmony id or object
+ * @param {{saturation?: number, lightness?: number}} opts  base S/L (0–100)
+ * @returns {string[]} one '#RRGGBB' per role offset
+ */
+export function harmonyColors(hue, harmony, { saturation = 100, lightness = 50 } = {}) {
+  const { roleOffsets } = harmonyById(harmony)
+  return roleOffsets.map((off) => hslToHex(normHue(hue + off), saturation, lightness))
+}
+
+/**
+ * Deterministic role colors derived from a base hex (S/L taken from the hex).
+ * Convenience wrapper over `harmonyColors` for callers holding a color, not
+ * a hue.
+ */
+export function generateHarmony(baseHex, harmony) {
+  const { h, s, l } = hexToHsl(baseHex)
+  return harmonyColors(h, harmony, { saturation: s, lightness: l })
+}
+
+/* ── Seeded (jittered) modes ──────────────────────────────────────────── */
+
+const jitter = (range) => (Math.random() - 0.5) * 2 * range
+
+/**
+ * Seed-based generators — slot 0 = the base, slots 1–5 derived via the mode.
+ * Each call jitters parameters so repeated "randomize" produces visibly
+ * different but harmonically-related variants around the same seed.
+ */
+const SEED_MODES = {
+  random: (base) => {
+    const { h, s, l } = hexToHsl(base)
+    return [
+      base,
+      hslToHex(normHue(h + Math.random() * 360), s, l),
+      hslToHex(normHue(h + Math.random() * 360), s, l),
+      hslToHex(h, s, Math.max(10, l - 25 + jitter(10))),
+      hslToHex(h, s, Math.min(90, l + 25 + jitter(10))),
+      hslToHex(h, s * (0.4 + Math.random() * 0.4), l),
+    ]
+  },
+
+  monochromatic: (base) => {
+    const { h, s, l } = hexToHsl(base)
+    const j = 8
+    return [
+      base,
+      hslToHex(h, s, Math.max(10, l - 30 + jitter(j))),
+      hslToHex(h, s, Math.max(20, l - 15 + jitter(j))),
+      hslToHex(h, s, Math.min(85, l + 15 + jitter(j))),
+      hslToHex(h, s, Math.min(95, l + 30 + jitter(j))),
+      hslToHex(h, s, Math.min(98, l + 45 + jitter(j))),
+    ]
+  },
+
+  analogous: (base) => {
+    const { h, s, l } = hexToHsl(base)
+    return [
+      base,
+      hslToHex(normHue(h - 30 + jitter(8)), s, l),
+      hslToHex(normHue(h - 15 + jitter(8)), s, l),
+      hslToHex(normHue(h + 15 + jitter(8)), s, l),
+      hslToHex(normHue(h + 30 + jitter(8)), s, l),
+      hslToHex(normHue(h + 45 + jitter(8)), s, l),
+    ]
+  },
+
+  complementary: (base) => {
+    const { h, s, l } = hexToHsl(base)
+    return [
+      base,
+      hslToHex(h, s, Math.max(15, l - 25 + jitter(8))),
+      hslToHex(h, s, Math.min(85, l + 25 + jitter(8))),
+      hslToHex(normHue(h + 180 + jitter(10)), s, l),
+      hslToHex(normHue(h + 180 + jitter(10)), s, Math.max(15, l - 15 + jitter(8))),
+      hslToHex(normHue(h + 180 + jitter(10)), s, Math.min(85, l + 15 + jitter(8))),
+    ]
+  },
+
+  triadic: (base) => {
+    const { h, s, l } = hexToHsl(base)
+    return [
+      base,
+      hslToHex(normHue(h + 120 + jitter(10)), s, l),
+      hslToHex(normHue(h + 240 + jitter(10)), s, l),
+      hslToHex(h, s, Math.min(85, l + 20 + jitter(8))),
+      hslToHex(normHue(h + 120 + jitter(10)), s, Math.max(15, l - 20 + jitter(8))),
+      hslToHex(normHue(h + 240 + jitter(10)), s, Math.min(85, l + 20 + jitter(8))),
+    ]
+  },
+
+  doubleComplementary: (base) => {
+    const { h, s, l } = hexToHsl(base)
+    return [
+      base,
+      hslToHex(normHue(h + 90 + jitter(10)), s, l),
+      hslToHex(normHue(h + 180 + jitter(10)), s, l),
+      hslToHex(normHue(h + 270 + jitter(10)), s, l),
+      hslToHex(h, s, Math.min(85, l + 20 + jitter(8))),
+      hslToHex(normHue(h + 180 + jitter(10)), s, Math.max(15, l - 20 + jitter(8))),
+    ]
+  },
+}
+
+/** The available seed-mode ids (for a consumer's mode selector). */
+export const SEED_MODE_IDS = Object.keys(SEED_MODES)
+
+/**
+ * Generate a jittered 6-color palette from a seed hex.
+ *
+ * @param {string} baseHex  the seed color, occupies slot 0
+ * @param {string} mode     one of SEED_MODE_IDS (falls back to 'random')
+ * @returns {string[]} six '#RRGGBB' values
+ */
+export function seedHarmony(baseHex, mode = 'random') {
+  const gen = SEED_MODES[mode] ?? SEED_MODES.random
+  return gen(baseHex)
+}

package/src/hooks/useEyedropper.js

@@ -0,0 +1,124 @@
+/**
+ * useEyedropper — cross-browser color sampling.
+ *
+ * Primary path is the native `window.EyeDropper` API (Chromium): one call,
+ * samples any pixel on screen, returns an sRGB hex. Where it is unavailable
+ * (Firefox, Safari) the hook falls back to an injected `fallback` sampler —
+ * e.g. `pickFromCanvasElement`, which samples a pixel from a <canvas> the
+ * consumer renders. The DS stays decoupled: it never reaches into an app's
+ * canvas/scene — the consumer supplies the fallback.
+ *
+ * Pairs with the EyedropPick affordance in SwatchControls: gate the button on
+ * `supported`, wire the button's `onPick` to `pick`.
+ *
+ *   const { supported, pick } = useEyedropper({ fallback })
+ *   // supported → render the eyedropper button
+ *   const hex = await pick()   // '#RRGGBB' or null (cancelled / unavailable)
+ */
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { rgbToHex } from './colorMath.js'
+
+/* Native support probe — read at call time so it is correct even before the
+ * post-mount state (below) has settled. */
+function hasNativeEyeDropper() {
+  return typeof window !== 'undefined' && 'EyeDropper' in window
+}
+
+/**
+ * Generic canvas-region sampler — the reusable core of a canvas eyedropper.
+ * Sets a crosshair cursor on `canvas`, awaits one pointer press on it, reads
+ * the pixel under the cursor via getImageData, and resolves the hex. Escape,
+ * a press outside the canvas bounds, or an aborted `signal` resolve to null.
+ *
+ * Backing-store aware: scales client coords by canvas.width/height ÷ CSS box,
+ * so a HiDPI or CSS-scaled canvas still samples the right pixel.
+ *
+ * @param {HTMLCanvasElement} canvas  the canvas to sample from
+ * @param {{signal?: AbortSignal}} [opts]
+ * @returns {Promise<string|null>} uppercase '#RRGGBB' or null
+ */
+export async function pickFromCanvasElement(canvas, { signal } = {}) {
+  if (!canvas || typeof canvas.getContext !== 'function') return null
+  const ctx = canvas.getContext('2d', { willReadFrequently: true })
+  if (!ctx) return null
+  if (signal?.aborted) return null
+
+  const prevCursor = canvas.style.cursor
+  canvas.style.cursor = 'crosshair'
+
+  return new Promise((resolve) => {
+    const cleanup = () => {
+      canvas.removeEventListener('pointerdown', onDown, true)
+      document.removeEventListener('keydown', onKey, true)
+      signal?.removeEventListener('abort', onAbort)
+      canvas.style.cursor = prevCursor
+    }
+
+    const onDown = (e) => {
+      e.preventDefault()
+      e.stopPropagation()
+      const rect = canvas.getBoundingClientRect()
+      const sx = rect.width  ? canvas.width  / rect.width  : 1
+      const sy = rect.height ? canvas.height / rect.height : 1
+      const vx = Math.floor((e.clientX - rect.left) * sx)
+      const vy = Math.floor((e.clientY - rect.top)  * sy)
+      if (vx < 0 || vy < 0 || vx >= canvas.width || vy >= canvas.height) {
+        cleanup(); resolve(null); return
+      }
+      let data
+      try { data = ctx.getImageData(vx, vy, 1, 1).data }
+      catch { cleanup(); resolve(null); return }   /* tainted canvas */
+      cleanup()
+      resolve(rgbToHex(data[0], data[1], data[2]))
+    }
+
+    const onKey = (e) => {
+      if (e.key === 'Escape') { e.preventDefault(); cleanup(); resolve(null) }
+    }
+
+    const onAbort = () => { cleanup(); resolve(null) }
+
+    /* Capture phase so we beat the consumer's own canvas handlers. */
+    canvas.addEventListener('pointerdown', onDown, true)
+    document.addEventListener('keydown', onKey, true)
+    signal?.addEventListener('abort', onAbort)
+  })
+}
+
+/**
+ * @param {{fallback?: (opts?: {signal?: AbortSignal}) => Promise<string|null>}} [options]
+ *   fallback — sampler used when the native EyeDropper API is absent. Return
+ *   a hex or null. Without a fallback, unsupported browsers report
+ *   `supported: false` and `pick` resolves null.
+ * @returns {{supported: boolean, nativeSupported: boolean,
+ *            pick: (opts?: {signal?: AbortSignal}) => Promise<string|null>}}
+ */
+export function useEyedropper({ fallback } = {}) {
+  /* Resolved after mount so SSR / first paint stays stable (starts false,
+   * flips true only where the native API exists). */
+  const [nativeSupported, setNativeSupported] = useState(false)
+  useEffect(() => { setNativeSupported(hasNativeEyeDropper()) }, [])
+
+  const fallbackRef = useRef(fallback)
+  fallbackRef.current = fallback
+
+  const supported = nativeSupported || !!fallback
+
+  const pick = useCallback(async ({ signal } = {}) => {
+    if (hasNativeEyeDropper()) {
+      try {
+        const res = await new window.EyeDropper().open(signal ? { signal } : undefined)
+        return res?.sRGBHex ? res.sRGBHex.toUpperCase() : null
+      } catch {
+        return null   /* user cancelled (Escape) rejects the promise */
+      }
+    }
+    if (fallbackRef.current) return (await fallbackRef.current({ signal })) ?? null
+    return null
+  }, [])
+
+  return useMemo(
+    () => ({ supported, nativeSupported, pick }),
+    [supported, nativeSupported, pick],
+  )
+}

package/src/index.js

@@ -38,7 +38,6 @@ export { default as LabeledControl } from './atoms/LabeledControl.jsx'
 export { default as OverlayGlassPanel } from './atoms/OverlayGlassPanel.jsx'
 export { default as Pill } from './atoms/Pill.jsx'
 export { usePopover, PopoverPanel, Tooltip } from './atoms/Popover.jsx'
-export { default as PriceDisplay } from './atoms/PriceDisplay.jsx'
 export { default as ProsePreview } from './atoms/ProsePreview.jsx'
 export { default as QuantityInput } from './atoms/QuantityInput.jsx'
 export { default as RotaryDial } from './atoms/RotaryDial.jsx'
@@ -52,22 +51,18 @@ 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 TextPressure } from './atoms/TextPressure.jsx'
 export { default as TiltCard } from './atoms/TiltCard.jsx'
 export { default as TransparentX } from './atoms/TransparentX.jsx'
-export { default as TypeSample } from './atoms/TypeSample.jsx'
-export { default as TypeSpecCard } from './atoms/TypeSpecCard.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'
 /* monorepo sets (P6–P10) — molecule members */
 export { default as AlignmentGrid } from './molecules/AlignmentGrid.jsx'
-export { default as ArticleCard } from './molecules/ArticleCard.jsx'
 export { default as ImageBlock } from './molecules/ImageBlock.jsx'
 export { default as SelectionOverlay } from './molecules/SelectionOverlay.jsx'
 export { default as VideoBlock, getEmbedUrl } from './molecules/VideoBlock.jsx'
-export { default as WorkListItem } from './molecules/WorkListItem.jsx'
 export { default as CardFeatureItem } from './molecules/CardFeatureItem.jsx'
 export { default as CodeBlock } from './molecules/CodeBlock.jsx'
 export { default as ColorInputRow } from './molecules/ColorInputRow.jsx'
@@ -81,6 +76,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 './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'
@@ -88,28 +84,20 @@ export { default as ShellSearchOverlay } from './molecules/ShellSearchOverlay.js
 export { default as Slider } from './molecules/Slider.jsx'
 export { default as SpecList } from './molecules/SpecList.jsx'
 export { default as SpectrumControls, HueStrip, SBSquare, WheelTriangle } from './molecules/SpectrumControls.jsx'
+export { default as SplitToolButton } from './molecules/SplitToolButton.jsx'
 export { default as SwatchControls, SwatchStack, EyedropPick } from './molecules/SwatchControls.jsx'
 export { default as TabsRow } from './molecules/TabsRow.jsx'
 
 // organisms
-/* monorepo sets (P6–P10) — organism members. Foundry members are isolated
-   under the './foundry' subpath (opentype-heavy) — not re-exported here. */
-export { default as ArticleHeader } from './organisms/ArticleHeader.jsx'
+/* monorepo sets (P6–P10) — organism members. Foundry members live in the
+   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 DiagonalMarqueeRiver } from './organisms/DiagonalMarqueeRiver.jsx'
 export { default as EditorShell } from './organisms/EditorShell.jsx'
 export { default as GalleryCarousel } from './organisms/GalleryCarousel.jsx'
-export { default as ParallaxShelf } from './organisms/ParallaxShelf.jsx'
-export { default as PortableTextRenderer, slugify } from './organisms/PortableTextRenderer.jsx'
-export { default as ProductDetailLayout } from './organisms/ProductDetailLayout.jsx'
-export { default as ScrollDriftGallery } from './organisms/ScrollDriftGallery.jsx'
-export { default as StackHero } from './organisms/StackHero.jsx'
-export { default as WorkCard } from './organisms/WorkCard.jsx'
-export { default as WorkViewToggle } from './organisms/WorkViewToggle.jsx'
 export { default as AsciiCursor } from './organisms/AsciiCursor.jsx'
 export { default as BentoCard } from './organisms/BentoCard.jsx'
 export { default as Carousel } from './organisms/Carousel.jsx'
-export { default as ColorLoader } from './organisms/ColorLoader.jsx'
 export { default as ContentFilters } from './organisms/ContentFilters.jsx'
 export { default as CtaGlobal } from './organisms/CtaGlobal.jsx'
 export { default as ErrorBoundary } from './organisms/ErrorBoundary.jsx'
@@ -118,6 +106,7 @@ export { default as FeaturedCarousel } from './organisms/FeaturedCarousel.jsx'
 export { default as FeaturesCardSection } from './organisms/FeaturesCardSection.jsx'
 export { default as FullBleedHero } from './organisms/FullBleedHero.jsx'
 export { default as LoaderOverlay } from './organisms/LoaderOverlay.jsx'
+export { default as MediaTileGallery } from './organisms/MediaTileGallery.jsx'
 export { default as MediaViewer } from './organisms/MediaViewer.jsx'
 export { default as NewsletterBand } from './organisms/NewsletterBand.jsx'
 export { default as SpectrumGrid } from './organisms/SpectrumGrid.jsx'
@@ -135,4 +124,12 @@ export { default as useReveal } from './hooks/useReveal.js'
 export { default as useScrollSpy } from './hooks/useScrollSpy.js'
 export { default as useTilt } from './hooks/useTilt.js'
 export { default as useAxisAnimation } from './hooks/useAxisAnimation.js'
+export { useEyedropper, pickFromCanvasElement } from './hooks/useEyedropper.js'
 export { resolveCssVar, resolveCssColor, isLight } from './hooks/cssVar.js'
+
+// color math (support module — HSL/hex conversion + harmony generation)
+export {
+  hexToHsl, hslToHex, rgbToHex, normHue,
+  HARMONIES, harmonyById, harmonyColors, generateHarmony,
+  SEED_MODE_IDS, seedHarmony,
+} from './hooks/colorMath.js'

package/src/molecules/ButtonGroup.jsx

@@ -0,0 +1,45 @@
+/* taxonomy-ok: composes consumer-passed Buttons via children — nesting happens at the call site */
+
+/**
+ * ButtonGroup — responsive layout wrapper for a group of Buttons: stacked
+ * full-width on mobile, horizontal row from `sm` up, aligned left / center /
+ * right. Pure layout — children compose at the call site and render as-is
+ * (nothing is cloned, no props injected); all button behavior lives on each
+ * Button. `center` (default) hugs its content and self-centers; `left` /
+ * `right` stay full-width block. Alignment classes come from static lookup
+ * maps of complete literals — never interpolated — so Tailwind's scanner
+ * sees them.
+ *
+ * @param {'left'|'center'|'right'} align horizontal alignment + container layout mode (default 'center')
+ * @param {string}    title     optional heading rendered above the group, authored at the call site
+ * @param {string}    className extra container classes (appended)
+ * @param {ReactNode} children  the Buttons
+ */
+
+const CONTAINER = {
+  left: 'flex flex-col w-full',
+  center: 'flex sm:inline-flex flex-col w-full sm:w-auto sm:mx-auto',
+  right: 'flex flex-col w-full',
+}
+
+const JUSTIFY = {
+  left: 'sm:justify-start',
+  center: 'sm:justify-center',
+  right: 'sm:justify-end',
+}
+
+export default function ButtonGroup({ align = 'center', title, className = '', children }) {
+  return (
+    <div className={[CONTAINER[align] || CONTAINER.center, className].filter(Boolean).join(' ')}>
+      {title && <h3 className="kol-sans-heading-05 text-emphasis mb-6">{title}</h3>}
+      <div
+        className={[
+          'flex flex-col gap-4 sm:flex-row sm:items-center',
+          JUSTIFY[align] || JUSTIFY.center,
+        ].join(' ')}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}