@kolkrabbi/kol-component 0.1.2 → 0.3.0

package/src/atoms/HlsVideo.jsx

@@ -0,0 +1,56 @@
+import { useEffect, useRef } from 'react'
+import Hls from 'hls.js'
+
+/**
+ * HlsVideo — background/decorative HLS-streaming video atom. A single native
+ * <video>: the effect attaches an .m3u8 stream via hls.js (Safari-native HLS
+ * when hls.js isn't supported) and destroys the instance on unmount/src
+ * change. Deliberately inert — pointer-events none plus the full hardening
+ * attribute set (no controls, PiP, context menu, download, fullscreen, or
+ * remote playback) keep it non-interactive on every device; do not strip
+ * these without explicit approval. All layout/sizing arrives via `className`
+ * (consumer decides `absolute inset-0 object-cover`, etc.).
+ *
+ * @param {string}   src       HLS manifest URL (.m3u8); attach effect re-runs on change
+ * @param {string}   poster    native poster frame shown before playback
+ * @param {string}   className all layout/sizing/positioning (consumer-supplied)
+ * @param {Function} onEnded   end-of-playback callback; its presence disables `loop`
+ */
+export default function HlsVideo({ src, poster, className, onEnded, ...props }) {
+  const videoRef = useRef(null)
+
+  useEffect(() => {
+    const video = videoRef.current
+    if (!video || !src) return
+
+    if (Hls.isSupported()) {
+      const hls = new Hls()
+      hls.loadSource(src)
+      hls.attachMedia(video)
+      return () => hls.destroy()
+    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+      // Safari native HLS support
+      video.src = src
+    }
+  }, [src])
+
+  return (
+    <video
+      ref={videoRef}
+      poster={poster}
+      className={className}
+      style={{ pointerEvents: 'none' }}
+      autoPlay
+      loop={!onEnded}
+      muted
+      onEnded={onEnded}
+      playsInline
+      controls={false}
+      disablePictureInPicture
+      disableRemotePlayback
+      controlsList="nodownload nofullscreen noremoteplayback"
+      onContextMenu={(e) => e.preventDefault()}
+      {...props}
+    />
+  )
+}

package/src/atoms/Input.jsx

@@ -102,10 +102,15 @@ export default function Input({
       {prefix !== undefined && (
         <span aria-hidden="true" className="text-meta pr-1 shrink-0">{prefix}</span>
       )}
+      {/* Controlled only when a `value` prop is passed — otherwise stay
+        * uncontrolled so prop-less usages (search stubs, quick demos) type
+        * normally instead of freezing on a value-without-onChange input.
+        * Controlled + no onChange = deliberate display-only → readOnly. */}
       <input
         type={type}
-        value={value ?? ''}
-        onChange={onChange}
+        {...(value !== undefined
+          ? { value: value ?? '', onChange, readOnly: !onChange || undefined }
+          : { onChange })}
         placeholder={placeholder}
         disabled={disabled}
         spellCheck={false}

package/src/atoms/OverlayGlassPanel.jsx

@@ -0,0 +1,40 @@
+/**
+ * OverlayGlassPanel — the KOL frosted-glass content card that floats over
+ * hero/carousel media: translucent surface-primary (color-mix) + a 1px
+ * backdrop blur, children stacked vertically. Extracted from 4 identical
+ * inline copies in the monorepo (StudioHero, StudioAboutCard,
+ * FeaturedCarousel, TypefacePage). The 80% / 1px defaults ARE the design —
+ * exposed as props, not tokenized away.
+ *
+ * @param {number} surfaceOpacity  % of surface-primary in the color-mix
+ * @param {string} blur            backdrop-filter blur radius
+ * @param {string} align           'center' | 'start' | 'end' (cross-axis + text)
+ * @param {string} gap             vertical rhythm class between children
+ * @param {string} maxWidth        optional max-w-* class (adds mx-auto)
+ */
+export default function OverlayGlassPanel({
+  children,
+  surfaceOpacity = 80,
+  blur = '1px',
+  align = 'center',
+  gap = 'gap-6',
+  maxWidth = '',
+  className = '',
+}) {
+  const alignCls =
+    align === 'start' ? 'items-start text-left'
+    : align === 'end' ? 'items-end text-right'
+    : 'items-center text-center'
+
+  return (
+    <div
+      className={`flex flex-col ${alignCls} ${gap} rounded-[2px] px-6 py-8 ${maxWidth ? `${maxWidth} mx-auto` : ''} ${className}`.trim()}
+      style={{
+        backgroundColor: `color-mix(in srgb, var(--kol-surface-primary) ${surfaceOpacity}%, transparent)`,
+        backdropFilter: `blur(${blur})`,
+      }}
+    >
+      {children}
+    </div>
+  )
+}

package/src/atoms/PriceDisplay.jsx

@@ -0,0 +1,34 @@
+/**
+ * PriceDisplay — baseline-aligned price line: a large primary amount beside a
+ * small muted secondary note (a second-currency echo or a cost breakdown).
+ * Formats `amount` via Intl.NumberFormat in whole units (prints are priced in
+ * round numbers); `secondary` is authored at the call site, parens and all —
+ * omit it to render the primary alone.
+ *
+ * Presentational — pure scalars in, formatted currency out. Seed atom for the
+ * price/sale/edition family.
+ *
+ * @param {number}    amount    primary price, run through the currency formatter
+ * @param {string}    currency  ISO 4217 code for `amount` (e.g. 'EUR', 'ISK')
+ * @param {string}    locale    number-format locale
+ * @param {ReactNode} secondary muted trailing note (omit to hide)
+ */
+export default function PriceDisplay({
+  amount,
+  currency = 'EUR',
+  locale = 'de-DE',
+  secondary,
+}) {
+  const formatted = new Intl.NumberFormat(locale, {
+    style: 'currency',
+    currency,
+    maximumFractionDigits: 0,
+  }).format(amount)
+
+  return (
+    <div className="flex flex-wrap items-baseline gap-3">
+      <span className="kol-sans-heading-03">{formatted}</span>
+      {secondary != null && <span className="kol-mono-12 text-fg-48">{secondary}</span>}
+    </div>
+  )
+}

package/src/atoms/ProsePreview.jsx

@@ -0,0 +1,53 @@
+/**
+ * ProsePreview — a full rich-text specimen: one `.kol-prose` block exercising
+ * every long-form element — H1–H4 ladder, section lede, body paragraph,
+ * blockquote, indented passage, code block, pullout, and unordered/ordered
+ * lists — so the KOL prose stylesheet can be reviewed end-to-end in one view.
+ * The "long-form" member of the type-specimen kit.
+ *
+ * Fixed structure; only the text slots vary. All element styling comes from
+ * the prose stylesheet (kol-typography.css) plus the kit's
+ * `.kol-prose-indented` / `.kol-prose-pullout` chrome — none lives here.
+ *
+ * @param {string} h1        trailing text of the H1 (rendered as `H1 — {h1}`)
+ * @param {string} paragraph body paragraph text
+ * @param {string} code      contents of the <pre><code> block
+ * @param {string} pullout   trailing text of the pullout (rendered as `Pullout — {pullout}`)
+ * @param {string} quote     blockquote text
+ */
+export default function ProsePreview({ h1, paragraph, code, pullout, quote = 'Above as below — justice is a starfield.' }) {
+  return (
+    <div className="kol-prose">
+      <h1>H1 — {h1}</h1>
+      <h2>H2 — Section title</h2>
+      <h3>H3 — Subsection</h3>
+      <h4>H4 — Block title</h4>
+      <p className="kol-sans-body-01 text-strong mb-6">
+        Section lede — a larger paragraph used to introduce a section and
+        establish tone before the body copy begins.
+      </p>
+      <p>{paragraph}</p>
+      <blockquote><p>{quote}</p></blockquote>
+      <div className="kol-prose-indented">
+        <p>
+          Indented passage. Used for tangential copy, contextual notes, or
+          nested argument that supports the main line.
+        </p>
+      </div>
+      <pre className="bg-fg-04 border border-fg-08"><code>{code}</code></pre>
+      <p className="kol-prose-pullout kol-helper-12 tracking-widest text-body">
+        Pullout — {pullout}
+      </p>
+      <ul>
+        <li>Unordered list — item one</li>
+        <li>Item two</li>
+        <li>Item three</li>
+      </ul>
+      <ol>
+        <li>Ordered list — item one</li>
+        <li>Item two</li>
+        <li>Item three</li>
+      </ol>
+    </div>
+  )
+}

package/src/atoms/RotaryDial.jsx

@@ -0,0 +1,150 @@
+import { useEffect, useRef, useState } from 'react'
+
+/** Clamp to min–max, snapped to the nearest step from min. */
+const snapTo = (v, min, max, step) => {
+  const stepped = min + Math.round((v - min) / step) * step
+  return Math.max(min, Math.min(max, stepped))
+}
+
+/**
+ * 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.
+ *
+ * @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
+ */
+export default function RotaryDial({
+  label,
+  value = 0,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  size = 80,
+}) {
+  const [isDragging, setIsDragging] = useState(false)
+  const [localValue, setLocalValue] = useState(value) // visual buffer — updates every move
+  const dragRef = useRef({ startY: 0, startValue: 0 })
+  const rafRef = useRef(null)
+  const onChangeRef = useRef(onChange)
+  onChangeRef.current = onChange
+
+  // External updates land whenever a drag isn't in progress
+  useEffect(() => {
+    if (!isDragging) setLocalValue(value)
+  }, [value, isDragging])
+
+  useEffect(() => {
+    if (!isDragging) return
+    let current = dragRef.current.startValue
+    const handleMove = (e) => {
+      // absolute delta from drag start; full min→max sweep ≈ 200px
+      const deltaY = dragRef.current.startY - e.clientY
+      current = snapTo(dragRef.current.startValue + deltaY * ((max - min) / 200), min, max, step)
+      setLocalValue(current)
+      if (!rafRef.current) {
+        rafRef.current = requestAnimationFrame(() => {
+          onChangeRef.current?.(current)
+          rafRef.current = null
+        })
+      }
+    }
+    const handleUp = () => {
+      setIsDragging(false)
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current)
+        rafRef.current = null
+      }
+      onChangeRef.current?.(current)
+    }
+    window.addEventListener('pointermove', handleMove)
+    window.addEventListener('pointerup', handleUp)
+    window.addEventListener('pointercancel', handleUp)
+    return () => {
+      window.removeEventListener('pointermove', handleMove)
+      window.removeEventListener('pointerup', handleUp)
+      window.removeEventListener('pointercancel', handleUp)
+    }
+  }, [isDragging, min, max, step])
+
+  const handlePointerDown = (e) => {
+    setIsDragging(true)
+    dragRef.current = { startY: e.clientY, startValue: localValue }
+  }
+
+  const handleKeyDown = (e) => {
+    let next = null
+    if (e.key === 'ArrowUp' || e.key === 'ArrowRight') next = snapTo(localValue + step, min, max, step)
+    else if (e.key === 'ArrowDown' || e.key === 'ArrowLeft') next = snapTo(localValue - step, min, max, step)
+    if (next === null) return
+    e.preventDefault()
+    setLocalValue(next)
+    onChange?.(next)
+  }
+
+  const outerRadius = size / 2
+  const innerRadius = (size * 0.7) / 2
+  const strokeWidth = 2
+  const angle = -135 + ((localValue - min) / (max - min || 1)) * 270
+
+  return (
+    <div className="flex flex-col items-center gap-2">
+      <div
+        role="slider"
+        tabIndex={0}
+        aria-label={label}
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-valuenow={localValue}
+        className="relative cursor-pointer select-none touch-none"
+        style={{
+          width: size,
+          height: size,
+          transform: `rotate(${angle}deg)`,
+          willChange: isDragging ? 'transform' : 'auto',
+        }}
+        onPointerDown={handlePointerDown}
+        onKeyDown={handleKeyDown}
+      >
+        <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ overflow: 'visible' }}>
+          {/* outer dashed tick ring */}
+          <circle
+            cx={outerRadius}
+            cy={outerRadius}
+            r={outerRadius - strokeWidth}
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={strokeWidth}
+            strokeDasharray="4 4"
+            className="text-fg-24"
+          />
+          {/* inner solid disc */}
+          <circle cx={outerRadius} cy={outerRadius} r={innerRadius} fill="currentColor" className="text-fg-96" />
+          {/* pointer notch — reads as a cut into the disc */}
+          <line
+            x1={outerRadius}
+            y1={outerRadius}
+            x2={outerRadius}
+            y2={outerRadius - innerRadius + 4}
+            stroke="var(--kol-surface-primary)"
+            strokeWidth={2}
+            strokeLinecap="round"
+          />
+        </svg>
+      </div>
+      {label && <div className="kol-helper-12 text-fg-64">{label}</div>}
+      {label && <div className="kol-helper-12 text-fg-96">{value}%</div>}
+    </div>
+  )
+}

package/src/atoms/SearchInput.jsx

@@ -0,0 +1,108 @@
+import { Icon } from '@kolkrabbi/kol-loader'
+
+/**
+ * SearchInput — controlled search field on the .kol-control shell. The
+ * search-flavored sibling of Input (same variant/size chrome + inner-input
+ * treatment), standalone because atoms can't nest atoms. Leading search
+ * icon, then two mutually exclusive trailing affordances: a caller-authored
+ * shortcut kbd chip while the value is empty, a clear × while it isn't.
+ *
+ * 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> —
+ * ShellSearchOverlay drives its combobox wiring through that seam.
+ *
+ * `type="search"` for semantics (searchbox role, mobile "search" enter key);
+ * the native WebKit cancel button is hidden so the × stays the only clear
+ * affordance.
+ *
+ * @param {string}   value        controlled value
+ * @param {Function} onChange     (event) => void — input change
+ * @param {string}   placeholder  placeholder text
+ * @param {Function} onClear      () => void — trailing × click; × renders only when set and value is non-empty
+ * @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 {boolean}  bare         borderless inline field for overlay panels (full width, no shell chrome; keeps icon/clear/chip slots)
+ * @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 }
+
+export default function SearchInput({
+  value = '',
+  onChange,
+  placeholder = 'Search…',
+  onClear,
+  shortcutHint,
+  onFocus,
+  size = 'md',
+  variant = 'filled',
+  bare = false,
+  className = '',
+  ...inputProps
+}) {
+  const shellCls = [
+    bare
+      ? 'flex w-full gap-2.5 px-4 py-3'
+      : `kol-control kol-control--${variant} kol-control-${size} gap-2`,
+    'items-center cursor-text',
+    SIZE_TYPE[size],
+    className,
+  ].filter(Boolean).join(' ')
+
+  /* Same height pin as Input: Chromium sizes an <input> from font metrics,
+   * not CSS line-height, so without this the shell lands ~0.5px tall.
+   * h-4 / h-[18px] match the kol-mono-12 / -14 line-heights. */
+  const heightCls = size === 'sm' ? 'h-4' : 'h-[18px]'
+
+  const inputCls = [
+    'min-w-0 flex-1 bg-transparent border-none outline-none text-auto',
+    'appearance-none [&::-webkit-search-cancel-button]:hidden',
+    heightCls,
+  ].join(' ')
+
+  return (
+    <label className={shellCls}>
+      <span
+        aria-hidden="true"
+        className={`flex items-center shrink-0 ${bare ? 'text-fg-48' : 'text-auto opacity-50'}`}
+      >
+        <Icon name="search" size={ICON_SIZE[size] ?? 14} />
+      </span>
+      <input
+        type="search"
+        value={value ?? ''}
+        onChange={onChange}
+        readOnly={!onChange || undefined}
+        onFocus={onFocus}
+        placeholder={placeholder}
+        spellCheck={false}
+        className={inputCls}
+        {...inputProps}
+      />
+      {onClear && value ? (
+        <button
+          type="button"
+          aria-label="Clear"
+          /* preventDefault on mousedown keeps focus in the input across the clear */
+          onMouseDown={(e) => e.preventDefault()}
+          onClick={onClear}
+          className="inline-flex items-center justify-center shrink-0 cursor-pointer text-fg-48 hover:text-fg-96 transition-colors"
+        >
+          <Icon name="x" size={12} />
+        </button>
+      ) : shortcutHint ? (
+        /* aria-hidden — affordance, not a label (same stance as Input's prefix/suffix) */
+        <kbd
+          aria-hidden="true"
+          className="inline-flex items-center justify-center shrink-0 h-4 min-w-4 px-1 rounded-[3px] bg-fg-08 kol-helper-10 text-fg-48"
+        >
+          {shortcutHint}
+        </kbd>
+      ) : null}
+    </label>
+  )
+}

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

@@ -1,7 +1,9 @@
 /**
- * SegmentedToggle — N-way segmented control. Joined buttons sharing one
- * outer stroke; thin dividers between cells; no gap. Active cell uses
- * bg-fg-04 + text-emphasis, inactive is text-meta with hover lifting.
+ * SegmentedToggle — N-way segmented control. Joined cells sharing one
+ * outer stroke; thin dividers between cells; no gap. Active cell fills
+ * with surface-secondary + text-emphasis, inactive is text-meta with
+ * hover lifting. Chrome comes from .kol-seg* in kol-theme (NOT Tailwind
+ * utilities — those never generate from package sources).
  *
  *   <SegmentedToggle
  *     value={current}
@@ -17,6 +19,9 @@
  * Labels accept any node — pass strings or inline SVG previews. Optional
  * `ariaLabel` per option for non-text labels.
  *
+ * A11y: radiogroup/radio semantics with a roving tabindex — Tab enters
+ * the group on the active cell, ←/→ (or ↑/↓) move selection + focus.
+ *
  * Props:
  *   value     — current option value
  *   onChange  — handler (newValue) => void
@@ -25,27 +30,41 @@
  *               only options (e.g. line-style previews) where text labels
  *               aren't used; the cells still center their contents but the
  *               outer height is tighter.
+ *   ariaLabel — accessible name for the group
  *   className — additional classes on the outer shell
  */
-export default function SegmentedToggle({ value, onChange, options = [], size = 'md', className = '' }) {
-  const wrapHeight = size === 'sm' ? 'h-4' : 'h-[26px]'   /* 16 vs 26 */
-  const cellType   = size === 'sm' ? '' : 'kol-mono-12'
+export default function SegmentedToggle({ value, onChange, options = [], size = 'md', ariaLabel, className = '' }) {
+  const cellType = size === 'sm' ? '' : 'kol-mono-12'
+  const focusIdx = Math.max(0, options.findIndex((opt) => opt.value === value))
+
+  const handleKeyDown = (e) => {
+    const dir = { ArrowLeft: -1, ArrowUp: -1, ArrowRight: 1, ArrowDown: 1 }[e.key]
+    if (!dir || !options.length) return
+    e.preventDefault()
+    const next = (focusIdx + dir + options.length) % options.length
+    onChange?.(options[next].value)
+    e.currentTarget.children[next]?.focus()
+  }
+
   return (
-    <div className={`flex ${wrapHeight} border border-fg-04 rounded overflow-hidden ${className}`}>
+    <div
+      role="radiogroup"
+      aria-label={ariaLabel}
+      onKeyDown={handleKeyDown}
+      className={['kol-seg', size === 'sm' && 'kol-seg--sm', className].filter(Boolean).join(' ')}
+    >
       {options.map((opt, i) => {
         const isActive = opt.value === value
         return (
           <button
             key={opt.value}
             type="button"
-            onClick={() => onChange?.(opt.value)}
-            aria-pressed={isActive}
+            role="radio"
+            aria-checked={isActive}
             aria-label={opt.ariaLabel}
-            className={[
-              `flex-1 ${cellType} inline-flex items-center justify-center cursor-pointer`,
-              isActive ? 'bg-surface-secondary text-emphasis' : 'text-meta hover:text-emphasis',
-              i > 0 ? 'border-l border-fg-04' : '',
-            ].filter(Boolean).join(' ')}
+            tabIndex={i === focusIdx ? 0 : -1}
+            onClick={() => onChange?.(opt.value)}
+            className={['kol-seg-cell', cellType, isActive && 'is-active'].filter(Boolean).join(' ')}
           >
             {opt.label}
           </button>