@kolkrabbi/kol-component 0.8.0 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",
@@ -23,7 +23,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.27.19",
     "embla-carousel-react": "^8.6.0",
-    "@kolkrabbi/kol-icons": "0.5.0"
+    "@kolkrabbi/kol-icons": "0.6.0"
   },
   "peerDependencies": {
     "react": "^18.3.0 || ^19.0.0",

package/src/atoms/Button.jsx

@@ -10,7 +10,7 @@ import { Icon } from '@kolkrabbi/kol-icons'
  *
  * @param {Object} props
  * @param {ReactNode} props.children - Button content
- * @param {'primary'|'secondary'|'accent'|'outline'|'ghost'|'control'} props.variant - Visual variant. `control` is an alias for `ghost` (legacy call-sites).
+ * @param {'primary'|'secondary'|'accent'|'outline'|'ghost'|'danger'|'grey'|'control'} props.variant - Visual variant. `danger` is the destructive treatment (--ui-error fill); `control` is an alias for `ghost` (legacy call-sites).
  * @param {'sm'|'md'|'lg'} props.size - Button size (default: 'md')
  * @param {string} props.iconLeft - Icon name to display on the left
  * @param {string} props.iconRight - Icon name to display on the right
@@ -71,6 +71,10 @@ const Button = ({
     ? 'kol-btn-outline'
     : resolvedVariant === 'ghost'
     ? 'kol-btn-ghost'
+    : resolvedVariant === 'danger'
+    ? 'kol-btn-danger'
+    : resolvedVariant === 'grey'
+    ? 'kol-btn-grey'
     : 'kol-btn-secondary'
 
   // Add size class — pairs the padding rule with its mono type class.

package/src/atoms/FullscreenOverlay.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react'
 
-export default function FullscreenOverlay({ open, onClose, children }) {
+export default function FullscreenOverlay({ open, onClose, closeButton = true, children }) {
   const sheetRef = useRef(null)
 
   useEffect(() => {
@@ -24,14 +24,16 @@ export default function FullscreenOverlay({ open, onClose, children }) {
   return (
     <div className="kol-overlay" role="dialog" aria-modal="true" onMouseDown={onBackdropClick}>
       <div ref={sheetRef} className="kol-overlay-sheet">
-        <button
-          type="button"
-          className="kol-overlay-close"
-          onClick={onClose}
-          aria-label="Close"
-        >
-          ×
-        </button>
+        {closeButton && (
+          <button
+            type="button"
+            className="kol-overlay-close"
+            onClick={onClose}
+            aria-label="Close"
+          >
+            ×
+          </button>
+        )}
         {children}
       </div>
     </div>

package/src/atoms/SearchInput.jsx

@@ -1,3 +1,4 @@
+import { useEffect, useRef, useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
 
 /**
@@ -7,6 +8,14 @@ import { Icon } from '@kolkrabbi/kol-icons'
  * icon, then two mutually exclusive trailing affordances: a caller-authored
  * shortcut kbd chip while the value is empty, a clear × while it isn't.
  *
+ * `expanding` is the third body plan (after the shell and `bare`): a round
+ * icon-button pill that animates open into an inline field — the /work
+ * navbar pattern, extracted from kol-content's WorkViewToggle (2026-07-15).
+ * `open` is controllable so a parent can choreograph siblings around it
+ * (collapse a toggle, reveal a close button); uncontrolled works too.
+ * Escape reports `onOpenChange(false)` — clearing on close stays the
+ * parent's call.
+ *
  * Always controlled (`value` defaults to ''). Controlled + no onChange =
  * deliberate display-only → readOnly, same convention as Input. Extra props
  * (onKeyDown, autoFocus, role, aria-*) spread onto the inner <input> —
@@ -23,13 +32,19 @@ import { Icon } from '@kolkrabbi/kol-icons'
  * @param {string}   shortcutHint caller-authored kbd chip (e.g. "⌘K"); shown while the value is empty
  * @param {Function} onFocus      (event) => void — input focus
  * @param {string}   size         'sm' | 'md' — kol-control size + matched mono type class
- * @param {string}   variant      'filled' | 'ghost' | 'outline' — kol-control variant, same chrome as Input (ignored when bare)
+ * @param {string}   variant      'filled' | 'ghost' | 'outline' — kol-control variant, same chrome as Input (ignored when bare/expanding)
  * @param {boolean}  bare         borderless inline field for overlay panels (full width, no shell chrome; keeps icon/clear/chip slots)
+ * @param {boolean}  expanding    round icon-button pill that animates open into an inline field
+ * @param {boolean}  open         (expanding) controlled open state; omit for internal state
+ * @param {Function} onOpenChange (expanding) (bool) => void — trigger click / Escape
+ * @param {number}   expandedWidth (expanding) open pill width in px (default 280)
+ * @param {string}   triggerLabel (expanding) aria-label on the icon trigger (default 'Open search')
  * @param {string}   className    extra classes on the shell
  */
 
 const SIZE_TYPE = { sm: 'kol-mono-12', md: 'kol-mono-14' }
 const ICON_SIZE = { sm: 14, md: 14 }
+const CUBIC_EASE = 'cubic-bezier(0.16, 1, 0.3, 1)'
 
 export default function SearchInput({
   value = '',
@@ -41,9 +56,59 @@ export default function SearchInput({
   size = 'md',
   variant = 'filled',
   bare = false,
+  expanding = false,
+  open,
+  onOpenChange,
+  expandedWidth = 280,
+  triggerLabel = 'Open search',
   className = '',
   ...inputProps
 }) {
+  /* expanding body plan — hooks stay unconditional (expanding never flips at runtime) */
+  const [internalOpen, setInternalOpen] = useState(false)
+  const inputRef = useRef(null)
+  const isOpen = open !== undefined ? open : internalOpen
+  const setOpen = (next) => {
+    if (open === undefined) setInternalOpen(next)
+    onOpenChange?.(next)
+  }
+
+  useEffect(() => {
+    if (expanding && isOpen) inputRef.current?.focus()
+  }, [expanding, isOpen])
+
+  if (expanding) {
+    return (
+      <div
+        className={`flex items-center bg-fg-04 rounded-full h-9 ${className}`.trim()}
+        style={{ width: isOpen ? expandedWidth : 36, transition: `width 600ms ${CUBIC_EASE}` }}
+      >
+        <button
+          type="button"
+          className={`flex items-center justify-center w-9 h-9 rounded-full text-auto flex-shrink-0 border border-transparent ${isOpen ? '' : 'transition-colors hover:border-fg-12'}`}
+          onClick={() => !isOpen && setOpen(true)}
+          aria-label={triggerLabel}
+          aria-expanded={isOpen}
+        >
+          <Icon name="search" size={16} className="text-fg-80" />
+        </button>
+        {isOpen && (
+          <input
+            ref={inputRef}
+            type="search"
+            value={value ?? ''}
+            onChange={onChange}
+            readOnly={!onChange || undefined}
+            placeholder={placeholder}
+            spellCheck={false}
+            className="bg-transparent outline-none kol-helper-14 flex-1 text-fg-80 caret-current pr-4 min-w-0 appearance-none [&::-webkit-search-cancel-button]:hidden"
+            onKeyDown={(e) => { if (e.key === 'Escape') setOpen(false) }}
+            {...inputProps}
+          />
+        )}
+      </div>
+    )
+  }
   const shellCls = [
     bare
       ? 'flex w-full gap-2.5 px-4 py-3'

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

@@ -76,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'
@@ -123,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/Accordion.jsx

@@ -38,8 +38,10 @@ export function AccordionPanel({
         onClick={toggle}
         aria-expanded={open}
       >
-        <span className="kol-accordion-title kol-helper-12 uppercase tracking-widest">{title}</span>
-        {meta && <span className="kol-accordion-meta kol-helper-12 uppercase tracking-widest text-fg-48 ml-auto mr-3">{meta}</span>}
+        {/* no text-transform (casing law 2026-07-15): titles render as authored —
+          * kol-helper-12 already carries the tracked-caps letterspacing */}
+        <span className="kol-accordion-title kol-helper-12">{title}</span>
+        {meta && <span className="kol-accordion-meta kol-helper-12 text-fg-48 ml-auto mr-3">{meta}</span>}
         <span className="kol-accordion-chevron kol-helper-16 text-fg-48 min-w-3 transition-colors duration-[120ms] ml-auto" aria-hidden="true">{open ? '−' : '+'}</span>
       </button>
       {open && <div className="kol-accordion-body pt-2 pb-6">{children}</div>}

package/src/molecules/Dropdown.jsx

@@ -13,6 +13,8 @@ import { PopoverPanel, usePopover } from '../atoms/Popover.jsx'
  *
  *   variant="primary" (default) — filled trigger; open panel continues the
  *     same fill (one piece: no border, no gap, hairline divider inside)
+ *   variant="grey"              — oq-12 filled trigger (opaque per the fill
+ *                                 law); panel continues it
  *   variant="outline"           — bordered trigger; open panel carries the
  *     same border, trigger's bottom edge acts as the divider
  *
@@ -110,7 +112,9 @@ const Dropdown = ({
 
   const triggerCls = [
     'kol-btn',
-    `kol-btn-${resolvedVariant}`,
+    /* grey is dropdown-only chrome (2026-07-15) — no kol-btn-* class so it
+     * never leaks into Button's variant set */
+    resolvedVariant === 'grey' ? 'kol-dd-trigger--grey' : `kol-btn-${resolvedVariant}`,
     `kol-btn-${resolvedSize}`,
     SIZE_TYPE[resolvedSize],
     'kol-dd-trigger',
@@ -154,7 +158,7 @@ const Dropdown = ({
         focus={false}
         className={`kol-dd-panel kol-dd-panel--${resolvedVariant}`}
       >
-        {resolvedVariant === 'primary' && <div className="kol-dd-div" />}
+        {(resolvedVariant === 'primary' || resolvedVariant === 'grey') && <div className="kol-dd-div" />}
 
         <div className="flex max-h-[300px] flex-col items-stretch overflow-y-auto" role="listbox">
           {options.map((option) => {

package/src/molecules/MenuItem.jsx

@@ -95,7 +95,7 @@ export function MenuDropdownItem({ onClick, disabled, prefix, iconLeft, shortcut
       onClick={onClick}
       disabled={disabled}
       role="menuitem"
-      className="w-full kol-helper-12 px-3 h-8 inline-flex items-center gap-2 text-body hover:text-emphasis disabled:opacity-40 disabled:cursor-not-allowed text-left"
+      className="w-full kol-helper-12 px-3 h-8 shrink-0 inline-flex items-center gap-2 text-body hover:text-emphasis disabled:opacity-40 disabled:cursor-not-allowed text-left"
     >
       {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>}

package/src/molecules/PaletteHarmonyWheel.jsx

@@ -0,0 +1,192 @@
+import { useEffect, useRef } from 'react'
+import { HARMONIES, harmonyById, harmonyColors, normHue } from '../hooks/colorMath.js'
+
+/* taxonomy-ok: a pure-canvas hue + harmony picker in the SpectrumControls
+ * color-picker family. It nests no KOL component — its only import is the
+ * colorMath support module in hooks/ — but belongs beside its siblings
+ * SpectrumControls / SwatchControls, not down in atoms. */
+
+/*
+ * PaletteHarmonyWheel — a hue ring with a draggable base-hue handle and
+ * satellite markers at the active harmony's scheme hues. Dragging (or the
+ * arrow keys) rotates the base hue; every change emits the full set of
+ * harmony colors so the caller never re-derives them.
+ *
+ * The scheme table is DATA-INJECTED (`harmonies`, defaulting to the shared
+ * HARMONIES); saturation/lightness of the generated colors are injected too,
+ * so this stays a pure hue picker — the caller owns S/L.
+ *
+ * Controlled on `hue`; `onChange({ hue, colors })` fires on press, drag, and
+ * arrow keys. `colors` is one hex per role offset of the active harmony
+ * (see colorMath.harmonyColors), matching the satellite markers 1:1.
+ *
+ * The ring hues, marker outlines and handle halo are literal color math
+ * (hsl / #FFFFFF / rgba) on purpose — a spectrum is not themeable, and the
+ * markers sit on fully-saturated ring hues, not on the surface (same
+ * rationale as SpectrumControls). No token belongs here.
+ *
+ * @param {number}        size        px, square (default 248)
+ * @param {number}        hue         controlled base hue, 0–360
+ * @param {string|object} harmony     active harmony id or object (default 'analogous')
+ * @param {number}        saturation  base saturation for emitted colors, 0–100 (default 100)
+ * @param {number}        lightness   base lightness for emitted colors, 0–100 (default 50)
+ * @param {Array}         harmonies   injectable scheme table (default HARMONIES)
+ * @param {Function}      onChange    ({ hue, colors }) => void
+ */
+
+/* Marker outline — white for contrast against the fully-saturated ring hues
+ * (theme-independent: the wheel's colours, not the surface, sit behind it). */
+const MARKER_STROKE = '#FFFFFF'
+
+export default function PaletteHarmonyWheel({
+  size = 248,
+  hue,
+  harmony = 'analogous',
+  saturation = 100,
+  lightness = 50,
+  harmonies = HARMONIES,
+  onChange,
+}) {
+  const canvasRef   = useRef(null)
+  const draggingRef = useRef(false)
+  const emitRef     = useRef(null)
+
+  const active = harmonyById(
+    typeof harmony === 'string'
+      ? (harmonies.find((h) => h.id === harmony) ?? harmonies[0])
+      : harmony,
+  )
+
+  /* Emit next hue + its harmony colors. Held in a ref so the pointer/key
+   * handlers stay stable while always seeing the latest props. */
+  emitRef.current = (nextHue) => {
+    const h = normHue(nextHue)
+    onChange?.({ hue: h, colors: harmonyColors(h, active, { saturation, lightness }) })
+  }
+
+  const outerR = size / 2 - 8
+  const innerR = outerR - 22
+  const midR   = (outerR + innerR) / 2
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+    const dpr = window.devicePixelRatio || 1
+    canvas.width  = size * dpr
+    canvas.height = size * dpr
+    const ctx = canvas.getContext('2d')
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+    ctx.clearRect(0, 0, size, size)
+    const cx = size / 2
+    const cy = size / 2
+
+    /* Angle mapping: hue 0 at 12 o'clock, clockwise. */
+    const angleFor = (h) => ((h - 90) * Math.PI) / 180
+
+    /* Hue ring — 360 thin annulus wedges (1.5° overlap hides seams). */
+    for (let a = 0; a < 360; a++) {
+      const a0 = angleFor(a)
+      const a1 = angleFor(a + 1.5)
+      ctx.beginPath()
+      ctx.arc(cx, cy, outerR, a0, a1)
+      ctx.arc(cx, cy, innerR, a1, a0, true)
+      ctx.closePath()
+      ctx.fillStyle = `hsl(${a}, 100%, 50%)`
+      ctx.fill()
+    }
+
+    const baseHue = normHue(hue)
+    const offsets = [...new Set((active?.roleOffsets ?? [0]).map(normHue))]
+
+    /* Spokes + satellite markers at the scheme hues. */
+    for (const off of offsets) {
+      const h = normHue(baseHue + off)
+      const a = angleFor(h)
+      ctx.beginPath()
+      ctx.moveTo(cx, cy)
+      ctx.lineTo(cx + Math.cos(a) * innerR, cy + Math.sin(a) * innerR)
+      ctx.strokeStyle = 'rgba(128, 128, 128, 0.4)'
+      ctx.lineWidth = 1
+      ctx.stroke()
+      if (off === 0) continue /* base hue gets the big handle below */
+      const x = cx + Math.cos(a) * midR
+      const y = cy + Math.sin(a) * midR
+      ctx.beginPath()
+      ctx.arc(x, y, 5, 0, Math.PI * 2)
+      ctx.fillStyle = `hsl(${h}, 100%, 50%)`
+      ctx.fill()
+      ctx.strokeStyle = MARKER_STROKE
+      ctx.lineWidth = 1.5
+      ctx.stroke()
+    }
+
+    /* Base-hue handle. */
+    const ba = angleFor(baseHue)
+    const bx = cx + Math.cos(ba) * midR
+    const by = cy + Math.sin(ba) * midR
+    ctx.beginPath()
+    ctx.arc(bx, by, 9, 0, Math.PI * 2)
+    ctx.fillStyle = `hsl(${baseHue}, 100%, 50%)`
+    ctx.fill()
+    ctx.strokeStyle = MARKER_STROKE
+    ctx.lineWidth = 2
+    ctx.stroke()
+    ctx.beginPath()
+    ctx.arc(bx, by, 10.5, 0, Math.PI * 2)
+    ctx.strokeStyle = 'rgba(0, 0, 0, 0.35)'
+    ctx.lineWidth = 1
+    ctx.stroke()
+  }, [size, hue, active, outerR, innerR, midR])
+
+  const pointFromEvent = (e) => {
+    const rect = canvasRef.current.getBoundingClientRect()
+    const dx = e.clientX - rect.left - rect.width / 2
+    const dy = e.clientY - rect.top - rect.height / 2
+    return { dist: Math.hypot(dx, dy), hue: normHue((Math.atan2(dy, dx) * 180) / Math.PI + 90) }
+  }
+
+  const onPointerDown = (e) => {
+    const { dist, hue: h } = pointFromEvent(e)
+    if (dist < innerR - 14 || dist > outerR + 10) return
+    draggingRef.current = true
+    e.currentTarget.setPointerCapture(e.pointerId)
+    emitRef.current?.(h)
+  }
+
+  const onPointerMove = (e) => {
+    if (!draggingRef.current) return
+    emitRef.current?.(pointFromEvent(e).hue)
+  }
+
+  const endDrag = () => { draggingRef.current = false }
+
+  const onKeyDown = (e) => {
+    const step = e.shiftKey ? 15 : 3
+    if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {
+      e.preventDefault()
+      emitRef.current?.(normHue(hue + step))
+    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {
+      e.preventDefault()
+      emitRef.current?.(normHue(hue - step))
+    }
+  }
+
+  return (
+    <canvas
+      ref={canvasRef}
+      role="slider"
+      aria-label="Base hue"
+      aria-valuemin={0}
+      aria-valuemax={359}
+      aria-valuenow={Math.round(normHue(hue))}
+      tabIndex={0}
+      className="cursor-pointer touch-none"
+      style={{ width: size, height: size }}
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={endDrag}
+      onPointerCancel={endDrag}
+      onKeyDown={onKeyDown}
+    />
+  )
+}