@kolkrabbi/kol-component 0.2.0 → 0.3.0

package/src/atoms/TiltCard.jsx

@@ -0,0 +1,127 @@
+import { useEffect, useState } from 'react'
+import { motion, useSpring, useTransform } from 'framer-motion'
+import useTilt from '../hooks/useTilt.js'
+import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
+
+/**
+ * True on coarse-pointer (touch) devices. Local to TiltCard; re-evaluates on
+ * device/orientation change via the media-query change event (the monorepo
+ * source froze this in a module-load const — fixed on recreate).
+ */
+function useCoarsePointer() {
+  const [coarse, setCoarse] = useState(
+    () => typeof window !== 'undefined' && window.matchMedia('(pointer: coarse)').matches,
+  )
+
+  useEffect(() => {
+    const mq = window.matchMedia('(pointer: coarse)')
+    const onChange = () => setCoarse(mq.matches)
+    mq.addEventListener('change', onChange)
+    return () => mq.removeEventListener('change', onChange)
+  }, [])
+
+  return coarse
+}
+
+/**
+ * TiltCard — self-contained image card with a spring-based 3D tilt that
+ * follows the pointer (via the shared useTilt hook). On coarse-pointer
+ * devices or when the user prefers reduced motion it renders a plain,
+ * tilt-free card — no springs, no listeners.
+ *
+ * `variant="grounded"` gives a "planted at the bottom" feel: tilt targets
+ * are snapped to 3 zones, rescaled, chased by a slower lazy spring, and the
+ * card only ever tilts back — never forward — pivoting about its bottom edge
+ * (`transform-origin: center bottom`).
+ *
+ * Purely structural — no tokens, no colors. Corner radius, size, and any
+ * surface treatment come from the consumer via `className` (the image
+ * wrapper is `rounded-[inherit]`, so the root's radius clips the image);
+ * overlays (labels, gradients) render above the image via `children`.
+ *
+ * @param {string}    src         image source (rendered `object-cover`)
+ * @param {string}    alt         image alt text
+ * @param {string}    className   classes on the root — supplies size + corner radius
+ * @param {string}    variant     'default' (free tilt) | 'grounded' (zone-snapped, bottom-pinned)
+ * @param {number}    magnitude   max tilt in degrees (±)
+ * @param {number}    perspective CSS transform perspective in px
+ * @param {ReactNode} children    content overlaid above the image
+ */
+export default function TiltCard({
+  src,
+  alt = '',
+  className = '',
+  variant = 'default',
+  magnitude = 4,
+  perspective = 700,
+  children,
+}) {
+  const coarse = useCoarsePointer()
+  const reduced = usePrefersReducedMotion()
+
+  if (coarse || reduced) {
+    return (
+      <div className={`relative ${className}`}>
+        <div className="absolute inset-0 overflow-hidden rounded-[inherit]">
+          <img src={src} alt={alt} className="w-full h-full object-cover" />
+        </div>
+        {children}
+      </div>
+    )
+  }
+
+  return (
+    <TiltCardInner
+      src={src}
+      alt={alt}
+      className={className}
+      variant={variant}
+      magnitude={magnitude}
+      perspective={perspective}
+    >
+      {children}
+    </TiltCardInner>
+  )
+}
+
+function TiltCardInner({ src, alt, className, variant, magnitude, perspective, children }) {
+  const tilt = useTilt({ magnitude, perspective })
+  const grounded = variant === 'grounded'
+
+  /* Zone-based tilt: normalize the spring output back to -1..1, snap it to
+   * 3 zones, rescale to ±2.5°, and let a slower lazy spring catch up so the
+   * card lags and settles into quantized angles. rotateX is clamped to
+   * min(0, …) — grounded cards only ever tilt back. */
+  const zones = 3
+  const snap = (v) => Math.round(v * zones) / zones
+  const lazySpring = { stiffness: 250, damping: 25, mass: 0.6 }
+
+  const targetX = useTransform(tilt.motionValues.rotateX, (v) =>
+    grounded ? Math.min(0, snap(-v / magnitude) * 2.5) : v,
+  )
+  const targetY = useTransform(tilt.motionValues.rotateY, (v) =>
+    grounded ? snap(v / magnitude) * 2.5 : v,
+  )
+
+  const lazyRotateX = useSpring(targetX, lazySpring)
+  const lazyRotateY = useSpring(targetY, lazySpring)
+
+  const style = grounded
+    ? { ...tilt.style, rotateX: lazyRotateX, rotateY: lazyRotateY, transformOrigin: 'center bottom' }
+    : tilt.style
+
+  return (
+    <motion.div
+      ref={tilt.ref}
+      className={`relative ${className}`}
+      style={style}
+      onMouseMove={tilt.onMouseMove}
+      onMouseLeave={tilt.onMouseLeave}
+    >
+      <div className="absolute inset-0 overflow-hidden rounded-[inherit]">
+        <img src={src} alt={alt} className="w-full h-full object-cover" />
+      </div>
+      {children}
+    </motion.div>
+  )
+}

package/src/atoms/TypeSample.jsx

@@ -0,0 +1,50 @@
+/**
+ * TypeSample — a single labeled type-specimen block: an optional mono caption
+ * over one paragraph whose typography is driven entirely by props via inline
+ * style. The atomic unit of the type-specimen kit — stack several to show a
+ * scale, a weight range, or a family; adjacent samples get a hairline
+ * separator (`.kol-type-sample + .kol-type-sample`).
+ *
+ * Presentational — arbitrary px values are the point, so props map to inline
+ * style rather than fixed kol-* size stops. Label and children render
+ * verbatim as authored.
+ *
+ * @param {string}    family     font family name (wrapped as `"family", sans-serif`); defaults to the KOL sans token
+ * @param {number}    weight     font-weight
+ * @param {boolean}   italic     italic sample
+ * @param {number}    size       font-size in px
+ * @param {number}    lineHeight line-height in px; unitless 1.2 when unset
+ * @param {string}    label      mono caption above the sample (omit to hide)
+ * @param {ReactNode} children   the specimen text itself
+ */
+export default function TypeSample({
+  family,
+  weight = 400,
+  italic = false,
+  size = 32,
+  lineHeight,
+  label,
+  children,
+}) {
+  return (
+    <div className="kol-type-sample py-6">
+      {label && (
+        <p className="kol-helper-12 tracking-wider text-meta m-0 mb-3">
+          {label}
+        </p>
+      )}
+      <p
+        className="kol-type-sample-body m-0 text-auto"
+        style={{
+          fontFamily: family ? `"${family}", sans-serif` : 'var(--kol-font-family-sans)',
+          fontWeight: weight,
+          fontStyle: italic ? 'italic' : 'normal',
+          fontSize: `${size}px`,
+          lineHeight: lineHeight ? `${lineHeight}px` : '1.2',
+        }}
+      >
+        {children}
+      </p>
+    </div>
+  )
+}

package/src/atoms/TypeSpecCard.jsx

@@ -0,0 +1,42 @@
+/**
+ * TypeSpecCard — a two-column type-spec row: a left meta panel of key/value
+ * pairs (font metrics) beside a live sample slot on the right, with an
+ * optional corner label. The "data-sheet" member of the type-specimen kit —
+ * pairs the numeric spec of a type style with a rendered example of it
+ * (often a TypeSample passed as children, composed at the call site).
+ *
+ * Single column on mobile; `240px + fluid` two-column at lg. `meta` is
+ * arbitrary tuples — no fixed metric schema. Sample paragraphs get 16px
+ * rhythm via `.kol-type-spec-sample p` (Preflight zeroes <p> margins).
+ *
+ * @param {string}                label    corner caption, absolute top-left (omit to hide)
+ * @param {Array<[string, ReactNode]>} meta key/value rows in the left panel
+ * @param {ReactNode}             children the live type sample on the right
+ */
+export default function TypeSpecCard({ label, meta = [], children }) {
+  return (
+    <div className="kol-type-spec relative py-12 border-t border-fg-08">
+      {label && (
+        <span className="kol-type-spec-label kol-helper-12 tracking-widest text-meta absolute top-4 left-0">
+          {label}
+        </span>
+      )}
+      <div className="kol-type-spec-row grid grid-cols-1 gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-12 items-start pt-6">
+        <div className="kol-type-spec-meta flex flex-col">
+          {meta.map(([key, value]) => (
+            <div
+              key={key}
+              className="kol-type-spec-meta-row grid grid-cols-[auto_minmax(0,1fr)] gap-4 items-baseline py-2 border-b border-[var(--kol-fg-04)] last:border-b-0"
+            >
+              <span className="kol-helper-10 text-meta">{key}</span>
+              <span className="kol-helper-10 text-strong text-right [overflow-wrap:anywhere]">{value}</span>
+            </div>
+          ))}
+        </div>
+        <div className="kol-type-spec-sample min-w-0">
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -6,7 +6,7 @@
  * lives in @kol/theme (kol-components-*.css).
  *
  * Placement follows the taxonomy rules in
- * docs/taxonomy/01-component-placement.md:
+ * 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
@@ -16,22 +16,34 @@
  */
 
 // 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 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'
@@ -41,14 +53,29 @@ 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'
+/* 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'
@@ -56,11 +83,45 @@ export { MenuItem, MenuDropdownItem, MenuDropdownDivider, MenuDropdownNest } fro
 export { MenuPopover } from './molecules/MenuPopover.jsx'
 export { ModalProvider, useModal } from './molecules/Modal.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'
+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)
@@ -70,5 +131,9 @@ export { Icon } from '@kolkrabbi/kol-loader'
 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/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>
+  )
+}