@kolkrabbi/kol-component 0.1.2 → 0.3.0

package/src/graphics/Graphic.jsx

@@ -4,29 +4,54 @@
  * Globs ./svg/<category>/<name>.svg at build time. Usage:
  *   <Graphic category="patterns" name="pattern-05" />
  *
- * When an asset is missing, renders an AssetPlaceholder with the
- * category/name labeled — missing graphics are visible rather than silently
- * empty. Matches the logo loader pattern (loader lives with assets).
+ * The raw SVG strings (~4.8 MB) live in ./graphicData.js behind a single
+ * dynamic import — their chunk streams in parallel with boot instead of
+ * bloating the consumer's entry chunk (same pattern as kol-loader's Icon).
+ * Until the chunk lands, renders a sized empty box (no layout shift); a
+ * genuinely missing asset renders an AssetPlaceholder so it's visible rather
+ * than silently empty.
  */
-import AssetPlaceholder from '../primitives/AssetPlaceholder.jsx'
+import { useEffect, useState } from 'react'
+import AssetPlaceholder from '../atoms/AssetPlaceholder.jsx'
 
-const svgModules = import.meta.glob('./svg/**/*.svg', { eager: true, query: '?raw', import: 'default' })
+let RAW = null              // category → name → raw svg, once the chunk resolves
+let loadPromise = null
+const subscribers = new Set()
 
-// category → name → raw SVG string. Exported so gallery/table consumers
-// (e.g. AssetTable) read raw markup without a cross-package glob.
-export const GRAPHIC_RAW = Object.entries(svgModules).reduce((acc, [path, svg]) => {
+const loadGraphics = () => {
+  if (!loadPromise) {
+    loadPromise = import('./graphicData.js').then((mod) => {
+      RAW = mod.GRAPHIC_RAW
+      subscribers.forEach((fn) => fn())
+      return mod
+    })
+  }
+  return loadPromise
+}
+
+// Start fetching at module eval — in flight alongside the rest of boot.
+loadGraphics()
+
+const useGraphicsReady = () => {
+  const [ready, setReady] = useState(() => !!RAW)
+  useEffect(() => {
+    if (RAW) return undefined
+    const cb = () => setReady(true)
+    subscribers.add(cb)
+    loadGraphics()
+    return () => subscribers.delete(cb)
+  }, [])
+  return ready
+}
+
+/* Inventory (category → sorted names) from a keys-only glob — paths resolve at
+ * build time without pulling any SVG content into the chunk. */
+export const GRAPHICS = Object.keys(import.meta.glob('./svg/**/*.svg')).reduce((acc, path) => {
   const [category, file] = path.replace('./svg/', '').split('/')
-  const name = file.replace('.svg', '')
-  if (!acc[category]) acc[category] = {}
-  acc[category][name] = svg
+  ;(acc[category] ||= []).push(file.replace('.svg', ''))
   return acc
 }, {})
-
-const GRAPHIC_CACHE = GRAPHIC_RAW
-
-export const GRAPHICS = Object.fromEntries(
-  Object.entries(GRAPHIC_CACHE).map(([category, items]) => [category, Object.keys(items).sort()])
-)
+for (const names of Object.values(GRAPHICS)) names.sort()
 
 export default function Graphic({
   category,
@@ -36,7 +61,20 @@ export default function Graphic({
   title,
   aspectRatio = '1 / 1',
 }) {
-  const raw = GRAPHIC_CACHE[category]?.[name]
+  const ready = useGraphicsReady()
+
+  // Chunk still streaming — hold a same-sized box so layout doesn't shift.
+  if (!ready) {
+    return (
+      <span
+        aria-hidden="true"
+        className={`kol-graphic inline-flex w-full h-auto ${className}`.trim()}
+        style={{ aspectRatio, ...style }}
+      />
+    )
+  }
+
+  const raw = RAW[category]?.[name]
   if (!raw) {
     if (import.meta.env.DEV) console.warn(`Graphic: ${category}/${name} not found`)
     return <AssetPlaceholder category={category} name={name} aspectRatio={aspectRatio} note="pending" className={className} />

package/src/graphics/graphicData.js

@@ -0,0 +1,19 @@
+/**
+ * graphicData — the raw SVG map behind <Graphic>.
+ *
+ * ~4.8 MB of illustration SVGs (some wrap embedded raster images) eager-inline
+ * here, but this module is only reached via the dynamic `import()` in
+ * Graphic.jsx — the bundler splits it into its own async chunk instead of
+ * folding it into the consumer's entry chunk. Same pattern as kol-loader's
+ * iconData.js (kol-labs-single 2026-06-19 entry-chunk fix).
+ */
+const svgModules = import.meta.glob('./svg/**/*.svg', { eager: true, query: '?raw', import: 'default' })
+
+// category → name → raw SVG string.
+export const GRAPHIC_RAW = Object.entries(svgModules).reduce((acc, [path, svg]) => {
+  const [category, file] = path.replace('./svg/', '').split('/')
+  const name = file.replace('.svg', '')
+  if (!acc[category]) acc[category] = {}
+  acc[category][name] = svg
+  return acc
+}, {})

package/src/hooks/cssVar.js

@@ -0,0 +1,53 @@
+/**
+ * CSS-variable + color utilities for token-doc widgets (ColorRamp,
+ * SpectrumGrid, swatch tables). One probe-based resolver instead of the
+ * three inline getComputedStyle forks the monorepo sources carried.
+ * Plain functions, not hooks — they live here because src/hooks is the
+ * taxonomy's only non-component folder.
+ */
+
+/** Read a custom property's raw value off an element (default: :root). */
+export function resolveCssVar(name, el) {
+  if (typeof document === 'undefined') return ''
+  const target = el || document.documentElement
+  const prop = name.startsWith('--') ? name : `--${name}`
+  return getComputedStyle(target).getPropertyValue(prop).trim()
+}
+
+/**
+ * Resolve ANY css color expression (var(), color-mix(), keywords) to the
+ * browser's computed `rgb(...)`/`rgba(...)` form via a detached probe —
+ * getPropertyValue alone can't evaluate color-mix.
+ */
+export function resolveCssColor(value, el) {
+  if (typeof document === 'undefined') return ''
+  const probe = document.createElement('span')
+  probe.style.display = 'none'
+  probe.style.color = value
+  ;(el || document.body).appendChild(probe)
+  const out = getComputedStyle(probe).color
+  probe.remove()
+  return out
+}
+
+/**
+ * Perceptual is-this-color-light test (BT.709 luma) — drives contrast
+ * label flips on swatches. Accepts hex or rgb()/rgba() strings; any other
+ * expression goes through resolveCssColor first.
+ */
+export function isLight(color) {
+  let r, g, b
+  const hex = color.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i)
+  if (hex) {
+    let h = hex[1]
+    if (h.length === 3) h = h.split('').map((c) => c + c).join('')
+    r = parseInt(h.slice(0, 2), 16)
+    g = parseInt(h.slice(2, 4), 16)
+    b = parseInt(h.slice(4, 6), 16)
+  } else {
+    const rgb = (color.startsWith('rgb') ? color : resolveCssColor(color)).match(/[\d.]+/g)
+    if (!rgb) return false
+    ;[r, g, b] = rgb.map(Number)
+  }
+  return (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255 > 0.55
+}

package/src/hooks/useAxisAnimation.js

@@ -0,0 +1,91 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import usePrefersReducedMotion from './usePrefersReducedMotion.js'
+
+/**
+ * useAxisAnimation — ping-pong rAF over a variable-font axis range.
+ *
+ * Owns a single numeric value that auto-oscillates between `min` and `max`
+ * (bouncing at each end) while `running` is true, then hands the value + a
+ * setter back to the caller so a slider can scrub it (scrub = call `setValue`,
+ * flip `running` off). This is the reusable core lifted out of the monorepo's
+ * VariableFontSection, whose auto-oscillator was inline and unguarded.
+ *
+ * Timing uses the `performance.now()` interval-accumulator pattern (the same
+ * shape as fontviewer's GlyphAnimator) rather than a `Date.now()` / `delta>16`
+ * throttle — the accumulator carries the sub-interval remainder so the step is
+ * frame-rate independent and doesn't jitter.
+ *
+ * Reduced-motion gate: when the user asks for reduced motion the loop never
+ * mounts and the hook returns its static default (`initial`, else the range
+ * midpoint) — the widget still renders and stays scrubbable, it just doesn't
+ * auto-play. `reduced` is returned so the caller can reflect it in its
+ * play/pause affordance.
+ *
+ * The value is axis-agnostic: the render boundary decides whether it feeds
+ * `fontWeight` (wght) or `font-variation-settings` (wdth/slnt/…).
+ *
+ * @param {Object}  opts
+ * @param {number}  opts.min      - Lower bound of the oscillation + slider min (default 300).
+ * @param {number}  opts.max      - Upper bound of the oscillation + slider max (default 900).
+ * @param {number}  opts.step     - Units advanced per frame (default 2).
+ * @param {number}  opts.fps      - Target frame cadence for the accumulator (default 60).
+ * @param {boolean} opts.running  - Whether the loop is active (default true). Gated by reduced-motion.
+ * @param {number}  opts.initial  - Starting / reduced-motion static value (default range midpoint).
+ * @returns {{ value: number, setValue: (v:number)=>void, reduced: boolean }}
+ */
+export default function useAxisAnimation({
+  min = 300,
+  max = 900,
+  step = 2,
+  fps = 60,
+  running = true,
+  initial,
+} = {}) {
+  const reduced = usePrefersReducedMotion()
+  const staticDefault = initial ?? Math.round((min + max) / 2)
+
+  const [value, setValueState] = useState(staticDefault)
+  const valueRef = useRef(staticDefault)
+  const dirRef = useRef(1)
+  const rafRef = useRef(null)
+
+  // External override (slider scrub). Keeps the ref in sync so a subsequent
+  // resume ping-pongs from where the user left it, not from a stale value.
+  const setValue = useCallback((v) => {
+    valueRef.current = v
+    setValueState(v)
+  }, [])
+
+  useEffect(() => {
+    if (reduced || !running) return
+
+    const interval = 1000 / fps
+    let last = performance.now()
+
+    const animate = (now) => {
+      const elapsed = now - last
+      if (elapsed >= interval) {
+        let next = valueRef.current + dirRef.current * step
+        if (next >= max) {
+          next = max
+          dirRef.current = -1
+        } else if (next <= min) {
+          next = min
+          dirRef.current = 1
+        }
+        valueRef.current = next
+        setValueState(next)
+        // Carry the sub-interval remainder so the cadence stays even.
+        last = now - (elapsed % interval)
+      }
+      rafRef.current = requestAnimationFrame(animate)
+    }
+
+    rafRef.current = requestAnimationFrame(animate)
+    return () => {
+      if (rafRef.current) cancelAnimationFrame(rafRef.current)
+    }
+  }, [reduced, running, min, max, step, fps])
+
+  return { value, setValue, reduced }
+}

package/src/hooks/usePrefersReducedMotion.js

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react'
+
+/**
+ * True when the user asks for reduced motion. The DS-wide motion gate:
+ * every animated/effect component checks this and renders its static
+ * form when true (the monorepo sources never did — added on recreate).
+ */
+export default function usePrefersReducedMotion() {
+  const [reduced, setReduced] = useState(
+    () => typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches,
+  )
+
+  useEffect(() => {
+    const mq = window.matchMedia('(prefers-reduced-motion: reduce)')
+    const onChange = () => setReduced(mq.matches)
+    mq.addEventListener('change', onChange)
+    return () => mq.removeEventListener('change', onChange)
+  }, [])
+
+  return reduced
+}

package/src/hooks/useTilt.js

@@ -0,0 +1,49 @@
+import { useRef } from 'react'
+import { useMotionValue, useSpring, useTransform } from 'framer-motion'
+
+/**
+ * Pointer-driven 3D tilt (framer-motion springs) — the ONE tilt hook.
+ * Ported from the monorepo's useBentoTiltMotion; TiltCard, BentoCard and
+ * friends all compose this instead of forking their own.
+ *
+ * Returns `{ ref, style, onMouseMove, onMouseLeave, motionValues }` —
+ * spread `ref`/handlers on a `motion.div` and pass `style` to it.
+ * `motionValues` exposes the raw springs for derived variants
+ * (e.g. TiltCard's `grounded` zone-snapping).
+ *
+ * Defaults are the design: tilt ±4°, spring 350/35, perspective 700,
+ * rest position center (0.5/0.5).
+ */
+export default function useTilt({
+  magnitude = 4,
+  perspective = 700,
+  stiffness = 350,
+  damping = 35,
+} = {}) {
+  const ref = useRef(null)
+  const mouseX = useMotionValue(0.5)
+  const mouseY = useMotionValue(0.5)
+
+  const rotateX = useSpring(useTransform(mouseY, [0, 1], [magnitude, -magnitude]), { stiffness, damping })
+  const rotateY = useSpring(useTransform(mouseX, [0, 1], [-magnitude, magnitude]), { stiffness, damping })
+
+  const onMouseMove = (e) => {
+    const rect = ref.current?.getBoundingClientRect()
+    if (!rect) return
+    mouseX.set((e.clientX - rect.left) / rect.width)
+    mouseY.set((e.clientY - rect.top) / rect.height)
+  }
+
+  const onMouseLeave = () => {
+    mouseX.set(0.5)
+    mouseY.set(0.5)
+  }
+
+  return {
+    ref,
+    style: { rotateX, rotateY, transformStyle: 'preserve-3d', transformPerspective: perspective },
+    onMouseMove,
+    onMouseLeave,
+    motionValues: { mouseX, mouseY, rotateX, rotateY },
+  }
+}

package/src/index.js

@@ -1,59 +1,139 @@
 /**
  * @kol/component - Canonical KOL design-system primitives
  *
- * Shared atoms/molecules consumed by both apps/web (via @kol/ui re-export)
- * and apps/brand. Components emit canonical kol-* classes; CSS lives in
- * @kol/theme (kol-components-*.css).
+ * Shared atoms/molecules/organisms consumed by both apps/web (via @kol/ui
+ * re-export) and apps/brand. Components emit canonical kol-* classes; CSS
+ * lives in @kol/theme (kol-components-*.css).
+ *
+ * Placement follows the taxonomy rules in
+ * docs/documentation/02-components/02-placement.md:
+ *   atom     — nests no KOL component (kol-loader Icon/Graphic are
+ *              infrastructure, they don't count)
+ *   molecule — nests at least one KOL component
+ *   organism — a self-contained composed UI region
+ * `scripts/validate-taxonomy.mjs` enforces the closed folder set and the
+ * downward-only import rule (atoms never import molecules/organisms).
  */
 
-export { default as Divider } from './atoms/Divider.jsx'
-export { default as DropdownTagFilter } from './molecules/DropdownTagFilter.jsx'
-export { default as QuantityInput } from './molecules/QuantityInput.jsx'
-export { default as QuantityStepper } from './molecules/QuantityStepper.jsx'
-export { default as Pill } from './molecules/Pill.jsx'
-export { default as ToggleCheckbox } from './atoms/ToggleCheckbox.jsx'
-export { default as ToggleSwitch } from './atoms/ToggleSwitch.jsx'
-export { default as ToggleBracket } from './molecules/ToggleBracket.jsx'
-export { Icon } from '@kolkrabbi/kol-loader'
-export { default as Tag } from './molecules/Tag.jsx'
-export { default as Badge } from './molecules/Badge.jsx'
-export { default as SectionLabel } from './molecules/SectionLabel.jsx'
-export { default as Section } from './molecules/Section.jsx'
-export { default as Button } from './atoms/Button.jsx'
-export { default as Input } from './atoms/Input.jsx'
-export { default as Slider } from './atoms/Slider.jsx'
-export { default as Dropdown } from './molecules/Dropdown.jsx'
-export { usePopover, PopoverPanel, Tooltip } from './molecules/Popover.jsx'
-export { MenuItem, MenuDropdownItem, MenuDropdownDivider, MenuDropdownNest } from './molecules/MenuItem.jsx'
-
-/* ── Folded from apps/brand (Phase 4 — brand is canonical, brand wins) ────── */
 // 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 Avatar } from './atoms/Avatar.jsx'
-export { default as ColorSwatch } from './atoms/ColorSwatch.jsx'
+export { default as Badge } from './atoms/Badge.jsx'
+export { default as Button } from './atoms/Button.jsx'
+export { default as CopyButton } from './atoms/CopyButton.jsx'
+export { default as CurveOverlay } from './atoms/CurveOverlay.jsx'
+export { default as Divider } from './atoms/Divider.jsx'
+export { default as DocsToc } from './atoms/DocsToc.jsx'
+export { default as DropdownTagFilter } from './atoms/DropdownTagFilter.jsx'
+export { default as EmptyState } from './atoms/EmptyState.jsx'
+export { default as ExitPreview } from './atoms/ExitPreview.jsx'
+export { default as Figure } from './atoms/Figure.jsx'
+export { default as FullscreenOverlay } from './atoms/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 './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 QuantityStepper } from './atoms/QuantityStepper.jsx'
+export { default as RotaryDial } from './atoms/RotaryDial.jsx'
+export { default as SearchInput } from './atoms/SearchInput.jsx'
+export { default as Section } from './atoms/Section.jsx'
+export { default as SectionLabel } from './atoms/SectionLabel.jsx'
+export { default as SegmentedToggle } from './atoms/SegmentedToggle.jsx'
 export { default as Stepper } from './atoms/Stepper.jsx'
+export { default as Tag } from './atoms/Tag.jsx'
 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 { default as ContentFilters } from './molecules/ContentFilters.jsx'
-export { default as LabeledControl } from './molecules/LabeledControl.jsx'
+export { Accordion, AccordionPanel } from './molecules/Accordion.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'
+export { default as ColorRamp } from './molecules/ColorRamp.jsx'
+export { default as ColorSwatch } from './molecules/ColorSwatch.jsx'
+export { default as Dropdown } from './molecules/Dropdown.jsx'
+export { default as FramedMediaBand } from './molecules/FramedMediaBand.jsx'
+export { default as Image } from './molecules/Image.jsx'
+export { default as MediaCard } from './molecules/MediaCard.jsx'
+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 PropertyInput } from './molecules/PropertyInput.jsx'
-export { default as SegmentedToggle } from './molecules/SegmentedToggle.jsx'
-export { default as ViewToggle } from './molecules/ViewToggle.jsx'
-// primitives
-export { Accordion, AccordionPanel } from './primitives/Accordion.jsx'
-export { default as AssetPlaceholder } from './primitives/AssetPlaceholder.jsx'
-export { default as Carousel } from './primitives/Carousel.jsx'
-export { default as CodeBlock } from './primitives/CodeBlock.jsx'
-export { default as ExitPreview } from './primitives/ExitPreview.jsx'
-export { default as FullscreenOverlay } from './primitives/FullscreenOverlay.jsx'
-export { default as Image } from './primitives/Image.jsx'
-// graphics (SVG illustration loader — globs its own ./graphics/svg/**)
-export { default as Graphic, GRAPHICS, GRAPHIC_RAW } from './graphics/Graphic.jsx'
+export { default as ShapeDropdown } from './molecules/ShapeDropdown.jsx'
+export { default as ShellDrawer } from './molecules/ShellDrawer.jsx'
+export { default as ShellSearchOverlay } from './molecules/ShellSearchOverlay.jsx'
+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 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'
+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'
+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 FullBleedHero } from './organisms/FullBleedHero.jsx'
+export { default as LoaderOverlay } from './organisms/LoaderOverlay.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'
 export { default as Table } from './organisms/Table.jsx'
+
+// loaders (re-export — infrastructure, documented on /docs/loaders)
+export { Icon } from '@kolkrabbi/kol-loader'
+
+// graphics (SVG illustration loader — globs its own ./graphics/svg/**)
+export { default as Graphic, GRAPHICS } from './graphics/Graphic.jsx'
+
 // hooks
+export { default as usePrefersReducedMotion } from './hooks/usePrefersReducedMotion.js'
 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 { resolveCssVar, resolveCssColor, isLight } from './hooks/cssVar.js'

package/src/{primitives → molecules}/Accordion.jsx

@@ -1,6 +1,9 @@
 /**
  * Accordion — collapsible panel group.
  *
+ * taxonomy-ok: molecule — Accordion nests AccordionPanel in this same file,
+ * which the import-based validator can't see.
+ *
  * Composition-based: <Accordion> wraps <AccordionPanel> children. Each panel
  * owns its open/closed state independently (additive — multiple can be open).
  * For single-open behavior, manage state from the parent and pass controlled
@@ -37,7 +40,7 @@ export function AccordionPanel({
       >
         <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>}
-        <span className="kol-accordion-chevron font-mono text-[18px] text-fg-48 min-w-3 transition-colors duration-[120ms] ml-auto" aria-hidden="true">{open ? '−' : '+'}</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>}
     </div>

package/src/molecules/AlignmentGrid.jsx

@@ -0,0 +1,53 @@
+import Button from '../atoms/Button.jsx'
+
+/**
+ * AlignmentGrid — a six-cell alignment row: horizontal start/center/end then
+ * vertical start/center/end, each a quiet icon Button that emits an
+ * `(axis, mode)` alignment intent. Driven off a static config array (the
+ * default 6, overridable via `items`). Presentation only — the consumer wires
+ * `onAlign` to whatever "align these" means in its context (align a box to the
+ * canvas bounds, align a multi-selection's common bbox, …).
+ *
+ * Ported from the brand editor's AlignmentPanel with the store coupling
+ * dropped (per lobby spec): `useComposeState().alignSelected` → an `onAlign`
+ * prop; the hand-rolled `kol-btn-quiet` buttons → DS `Button` (quiet +
+ * iconOnly) so the DS owns the button atom; `EditorIcon` → the DS Icon
+ * (through Button).
+ *
+ * [icon-gap] The source's `align-h-{start,center,end}` / `align-v-{start,
+ * center,end}` glyph names are NOT in the loader. Remapped to the closest
+ * existing loader glyphs (stroke/layout): `align-horizontal-{left,center,
+ * right}` and `align-vertical-{top,center,bottom}`. Same six align marks,
+ * different names — no visual gap.
+ *
+ * @param {(axis:'h'|'v', mode:'start'|'center'|'end') => void} onAlign  fired on cell click
+ * @param {Array} items  [{ axis, mode, icon, title }] cells (default the standard 6)
+ */
+const ALIGN_BUTTONS = [
+  { axis: 'h', mode: 'start',  icon: 'align-horizontal-left',   title: 'Align left' },
+  { axis: 'h', mode: 'center', icon: 'align-horizontal-center', title: 'Align horizontal center' },
+  { axis: 'h', mode: 'end',    icon: 'align-horizontal-right',  title: 'Align right' },
+  { axis: 'v', mode: 'start',  icon: 'align-vertical-top',      title: 'Align top' },
+  { axis: 'v', mode: 'center', icon: 'align-vertical-center',   title: 'Align vertical center' },
+  { axis: 'v', mode: 'end',    icon: 'align-vertical-bottom',   title: 'Align bottom' },
+]
+
+export default function AlignmentGrid({ onAlign, items = ALIGN_BUTTONS }) {
+  return (
+    <div className="grid grid-cols-6 gap-1">
+      {items.map((b) => (
+        <Button
+          key={`${b.axis}-${b.mode}`}
+          quiet
+          iconOnly={b.icon}
+          iconSize={16}
+          onClick={() => onAlign?.(b.axis, b.mode)}
+          title={b.title}
+          aria-label={b.title}
+          className="w-full"
+          style={{ height: 28, padding: 6 }}
+        />
+      ))}
+    </div>
+  )
+}