@kolkrabbi/kol-component 0.236.0 → 0.238.0

package/src/molecules/SliderPanel.jsx

@@ -0,0 +1,88 @@
+import { useRef, useCallback } from 'react'
+import { armLongPress } from '../utilities/armLongPress.js'
+
+const NO_HOLD = { move() {}, cancel() {} }
+
+/**
+ * SliderPanel — Slider's `variant="panel"`: the rack slider. A 2px track and an 8px thumb for a
+ * 24px hardware panel, drawn rather than a native range, with a vertical direction. It was
+ * kol-hardware's `Fader` (kol-monitor's rack, lifted 2026-09-01) and is carried here class for
+ * class — merged into Slider 2026-10-01 (user ruling: one slider, not two that look alike).
+ * Not exported: reach it through `<Slider variant="panel">`.
+ */
+export default function SliderPanel({ value, onChange, min = 0, max = 100, step = 1, label, direction = 'horizontal', height, onHold }) {
+  const trackRef = useRef(null)
+  const vertical = direction === 'vertical'
+
+  const handlePointerDown = useCallback((e) => {
+    e.preventDefault()
+    const track = trackRef.current
+    if (!track) return
+
+    const update = (e) => {
+      const rect = track.getBoundingClientRect()
+      const ratio = vertical
+        ? Math.max(0, Math.min(1, 1 - (e.clientY - rect.top) / rect.height))
+        : Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
+      const raw = min + ratio * (max - min)
+      onChange(Math.round(raw / step) * step)
+    }
+
+    update(e)
+    const id = e.pointerId
+    const onMove = (e) => { if (e.pointerId === id) { hold.move(e); update(e) } }  // a second finger is a pan
+    const onUp = () => {
+      hold.cancel()
+      window.removeEventListener('pointermove', onMove)
+      window.removeEventListener('pointerup', onUp)
+    }
+    // Touch: hold still 500ms → the holder's sheet instead of the drag
+    const hold = onHold ? armLongPress(e, () => { onUp(); onHold({ label, value, min, max, step }) }) : NO_HOLD
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', onUp)
+  }, [min, max, step, onChange, vertical, onHold, label, value])
+
+  const norm = max > min ? ((value ?? 0) - min) / (max - min) : 0
+
+  if (vertical) {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
+        {label && (
+          <span className="kol-helper-8 text-fg-32" style={{ textTransform: 'uppercase', lineHeight: 1 }}>
+            {label}
+          </span>
+        )}
+        <div
+          ref={trackRef}
+          onPointerDown={handlePointerDown}
+          className="bg-fg-16"
+          style={{ width: 2, height: height ?? 60, position: 'relative', cursor: 'ns-resize', touchAction: 'none' }}
+        >
+          <div className="bg-fg-16" style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: `${norm * 100}%` }} />
+          <div className="bg-fg-72" style={{ position: 'absolute', bottom: `calc(${norm * 100}% - 4px)`, left: -3, width: 8, height: 8, borderRadius: '50%' }} />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 8, flex: 1 }}>
+      {label && (
+        <span className="kol-helper-8 text-fg-32" style={{ textTransform: 'uppercase', lineHeight: 1, flexShrink: 0, minWidth: 20 }}>
+          {label}
+        </span>
+      )}
+      <div
+        ref={trackRef}
+        onPointerDown={handlePointerDown}
+        className="bg-fg-16"
+        style={{ flex: 1, height: 2, position: 'relative', cursor: 'pointer', touchAction: 'none' }}
+      >
+        <div className="bg-fg-72" style={{ position: 'absolute', left: `calc(${norm * 100}% - 4px)`, top: -3, width: 8, height: 8, borderRadius: '50%' }} />
+      </div>
+      <span className="kol-helper-8 text-fg-32" style={{ lineHeight: 1, flexShrink: 0, minWidth: 16, textAlign: 'right' }}>
+        {Math.round(value ?? 0)}
+      </span>
+    </div>
+  )
+}

package/src/molecules/SplitToolButton.jsx

@@ -17,7 +17,7 @@ import { glyphSize } from '../hooks/glyphLadders.js'
  * corner fold inside its own box, and `blurOnClick` must blur the button
  * itself. The class output — kol-btn kol-btn-ghost kol-btn-icon kol-btn-{size}
  * + kol-btn-quiet / kol-btn-pressed — is exactly what
- * `<Button variant="ghost" quiet pressed iconOnly>` emits, so the box and the
+ * `<Button tone="ghost" quiet pressed iconOnly>` emits, so the box and the
  * visual contract stay Button's.
  *
  * `size` was a raw px number (28) with a transcribed 14px glyph until 0.182.0:

package/src/molecules/SwatchControls.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
-import ColorSwatch from '../atoms/ColorSwatch.jsx'
+import ColorSwatch from './ColorSwatch.jsx'
 import { Tooltip } from '../utilities/Popover.jsx'
 
 /*

package/src/molecules/TiltBento.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import useInViewAttention from '../hooks/useInViewAttention.js'
 import { motion } from 'framer-motion'
-import HlsVideo from '../atoms/HlsVideo.jsx'
+import BackgroundVideo from '../utilities/BackgroundVideo.jsx'
 import AssetPlaceholder from '../utilities/AssetPlaceholder.jsx'
 import Button from '../atoms/Button.jsx'
 import Image from '../atoms/Image.jsx'
@@ -9,7 +9,7 @@ import useTilt from '../hooks/useTilt.js'
 import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
 
 /* taxonomy-ok: nests the same-file Media helper plus DS atoms/molecules
- * (HlsVideo, AssetPlaceholder, Button, Image) it composes — an organism. */
+ * (BackgroundVideo, AssetPlaceholder, Button, Image) it composes — an organism. */
 
 /**
  * True on coarse-pointer (touch/no-hover) devices. Local to TiltBento, mirrors
@@ -37,7 +37,7 @@ function useCoarsePointer() {
 
 /**
  * Media — internal, NOT exported. Sniffs `src` by extension and renders the
- * right full-bleed media element: `.m3u8` → HlsVideo, `.mov|.mp4|.webm` →
+ * right full-bleed media element: `.m3u8` → BackgroundVideo, `.mov|.mp4|.webm` →
  * autoplay <video>, any other src → the Image molecule (its own broken-asset
  * fallback), and no src → AssetPlaceholder. Positioning/fit arrive via
  * `className`; Image gets an inline height so its base `h-auto` can't beat the
@@ -45,7 +45,7 @@ function useCoarsePointer() {
  */
 function Media({ src, poster, className }) {
   if (!src) return <AssetPlaceholder className={className} />
-  if (/\.m3u8$/i.test(src)) return <HlsVideo src={src} poster={poster} className={className} />
+  if (/\.m3u8$/i.test(src)) return <BackgroundVideo src={src} poster={poster} className={className} />
   if (/\.(mov|mp4|webm)$/i.test(src)) {
     return (
       <video
@@ -198,7 +198,7 @@ export default function TiltBento({
               <div className={revealClass}>
                 <Button
                   href={href}
-                  variant="primary"
+                  tone="primary"
                   size="sm"
                   {...(isExternal
                     ? { target: '_blank', rel: 'noreferrer noopener' }

package/src/organisms/ColumnBrowser.jsx

@@ -4,7 +4,7 @@ import KindPreview, { KIND_GLYPH } from '../molecules/KindPreview.jsx'
 import FileIcon from '../atoms/FileIcon.jsx'
 import RowMenuButton from '../molecules/RowMenuButton.jsx'
 import OptionRow from '../molecules/OptionRow.jsx'
-import { formatLength } from '../molecules/AudioPreview.jsx'
+import { formatLength } from '../molecules/PlayTile.jsx'
 import { kindOf as dsKindOf, KIND_LABEL as DS_KIND_LABEL } from '../utilities/mediaKinds.js'
 import useGrabEdge from '../hooks/useGrabEdge.js'
 import useMediaQuery from '../hooks/useMediaQuery.js'

package/src/organisms/ContentFilters.jsx

@@ -117,7 +117,7 @@ const ContentFilters = ({
   searchKeys = ['label', 'name', 'title', 'type'],
   /* CONTROLLED SEARCH (2026-09-30) — same seam as `filtersOpen`: a consumer that must know the
    * query (media swaps the tree for a flat list while one is typed) or hand one in (⌘Enter from its
-   * palette) owns it. Absent, the text stays private, exactly as before. */
+   * search modal) owns it. Absent, the text stays private, exactly as before. */
   searchValue,
   onSearchChange,
   headerActions,

package/src/organisms/CurveEditor.jsx

@@ -79,7 +79,7 @@ function TermsEditor({ def, commit }) {
     <div className="flex flex-col gap-2">
       <div className="flex items-center justify-between">
         <span className="kol-helper-10 text-meta">Vectors</span>
-        <Button variant="primary" size="sm" onClick={addTerm}>Add</Button>
+        <Button tone="primary" size="sm" onClick={addTerm}>Add</Button>
       </div>
       <div className="grid grid-cols-[1fr_1fr_1fr_auto] gap-1.5 items-center min-w-0 [&>*]:min-w-0">
         <span className="kol-helper-10 text-fg-48 text-center">amp</span>
@@ -103,7 +103,7 @@ function TermRow({ term, onSet, onRemove, canRemove }) {
       {cell('amp', 1)}
       {cell('freq', 1)}
       {cell('phase', 0)}
-      <Button variant="ghost" size="sm" onClick={onRemove} disabled={!canRemove} aria-label="Remove vector">×</Button>
+      <Button tone="ghost" size="sm" onClick={onRemove} disabled={!canRemove} aria-label="Remove vector">×</Button>
     </>
   )
 }

package/src/organisms/FeaturedCarousel.jsx

@@ -1,13 +1,13 @@
 import { isValidElement, useCallback, useEffect, useRef, useState } from 'react'
 import useEmblaCarousel from 'embla-carousel-react'
 import Image from '../atoms/Image.jsx'
-import HlsVideo from '../atoms/HlsVideo.jsx'
+import BackgroundVideo from '../utilities/BackgroundVideo.jsx'
 import EmblaNav from '../molecules/EmblaNav.jsx'
 import OverlayGlassPanel from '../utilities/OverlayGlassPanel.jsx'
 
 /**
  * Per-slide media layer: a `{ src, kind }` descriptor becomes a cover-fit
- * Image / HlsVideo / inert <video> pinned over the frame
+ * Image / BackgroundVideo / inert <video> pinned over the frame
  * (`.kol-featured-carousel-media` — absolute inset-0 object-cover, CSS in
  * @kol/theme, out-cascades Image's baked `h-auto`). A ready ReactNode renders
  * as-is and must position itself (give it that same class). `onEnded` /
@@ -36,7 +36,7 @@ function SlideMedia({ media, active = true, onEnded, onTimeUpdate }) {
 
   if (kind === 'video') {
     // Non-HLS file (mp4/webm): a plain inert video. HLS manifests and the
-    // poster-only case go through HlsVideo, which owns hls.js attachment and
+    // poster-only case go through BackgroundVideo, which owns hls.js attachment and
     // the non-interactive hardening set. `loop` is dropped once `onEnded` is
     // wired so the active slide plays once, then advances.
     if (src && !src.endsWith('.m3u8')) {
@@ -57,7 +57,7 @@ function SlideMedia({ media, active = true, onEnded, onTimeUpdate }) {
       )
     }
     return (
-      <HlsVideo
+      <BackgroundVideo
         src={src}
         poster={poster}
         active={active}

package/src/organisms/KeyframeEditor.jsx

@@ -105,7 +105,7 @@ export default function KeyframeEditor({
         {kfs.map((kf, i) => (
           <Button
             key={i}
-            variant={i === sel ? 'primary' : 'secondary'}
+            tone={i === sel ? 'primary' : 'inverted'}
             size="sm"
             className="w-full"
             style={{ justifyContent: 'space-between' }}
@@ -117,8 +117,8 @@ export default function KeyframeEditor({
         ))}
       </div>
       <div className="flex gap-2">
-        <Button variant="primary" size="sm" className="flex-1" onClick={onAdd}>Add @ playhead</Button>
-        <Tooltip label="Delete keyframe"><Button variant="ghost" size="sm" onClick={onDelete} disabled={kfs.length <= 1}>Delete</Button></Tooltip>
+        <Button tone="primary" size="sm" className="flex-1" onClick={onAdd}>Add @ playhead</Button>
+        <Tooltip label="Delete keyframe"><Button tone="ghost" size="sm" onClick={onDelete} disabled={kfs.length <= 1}>Delete</Button></Tooltip>
       </div>
 
       <span className="kol-helper-10 text-meta">Pose</span>

package/src/organisms/LayerStack.jsx

@@ -425,7 +425,7 @@ export default function LayerStack({
           <Tooltip label={`Group ${layerSelectionCount} selected layers`}>
           <Button
             iconComponent={IconC}
-            variant="primary"
+            tone="primary"
             size="sm"
             iconLeft="layers"
             onClick={() => onGroup(layerSelectedIds)}
@@ -476,7 +476,7 @@ export function AddLayerButton({
         <Tooltip label="Add layer">
         <Button
           iconComponent={IconC}
-          variant="primary"
+          tone="primary"
           size="sm"
           quiet
           iconOnly="plus"

package/src/organisms/MediaLibrary.jsx

@@ -1,6 +1,6 @@
 import { createContext, useContext, useEffect, useMemo, useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
-import ActionButton from '../atoms/ActionButton.jsx'
+import ActionButton from '../molecules/ActionButton.jsx'
 import Button from '../atoms/Button.jsx'
 import Divider from '../atoms/Divider.jsx'
 import Input from '../atoms/Input.jsx'

package/src/organisms/MediaLibraryPages.jsx

@@ -8,7 +8,7 @@ import Divider from '../atoms/Divider.jsx'
 import Input from '../atoms/Input.jsx'
 import Tag from '../atoms/Tag.jsx'
 import IconFrame from '../atoms/IconFrame.jsx'
-import ActionButton from '../atoms/ActionButton.jsx'
+import ActionButton from '../molecules/ActionButton.jsx'
 import SizeOrDownload from '../atoms/SizeOrDownload.jsx'
 import ToggleCheckbox from '../atoms/ToggleCheckbox.jsx'
 import ViewToggle from '../atoms/ViewToggle.jsx'
@@ -29,10 +29,10 @@ import useMarquee from '../hooks/useMarquee.js'
 import useLongPress from '../hooks/useLongPress.js'
 import useMediaQuery from '../hooks/useMediaQuery.js'
 import KindPreview from '../molecules/KindPreview.jsx'
-import AudioSheet from '../molecules/AudioSheet.jsx'
-import VideoSheet from '../molecules/VideoSheet.jsx'
+import MediaPlayer from '../molecules/MediaPlayer.jsx'
+import Slider from '../molecules/Slider.jsx'
 import QuickLookFrame from '../molecules/QuickLookFrame.jsx'
-import { formatLength } from '../molecules/AudioPreview.jsx'
+import { formatLength } from '../molecules/PlayTile.jsx'
 import FullscreenOverlay from '../utilities/FullscreenOverlay.jsx'
 import { useModal } from '../molecules/Modal.jsx'
 import ContentFilters from './ContentFilters.jsx'
@@ -65,7 +65,7 @@ import { nearestRatio } from '../utilities/ratios.js'
  *                        SortControls · the selection bar while selecting), the
  *                        wall on ContentCard / ContentRow default, paging, the
  *                        per-bucket list cache, the stats line, the inspector
- *                        lightbox (image · VideoSheet · AudioSheet · DocPage via
+ *                        lightbox (image · MediaPlayer · DocPage via
  *                        KindPreview)
  *
  * Both take the injected `client` (`{ listMedia, mediaUrl, proxied?, buckets? }`
@@ -686,9 +686,9 @@ export function MediaInspector({ files, index, onClose, onPrev, onNext, mediaUrl
             onLoad={(e) => setDims({ key: o.key, w: e.target.naturalWidth, h: e.target.naturalHeight })} />
         </QuickLookFrame>
       ) : isVideo(o.contentType) ? (
-        <VideoSheet key={o.key} src={mediaUrl(o.key)} poster={poster ? mediaUrl(poster) : undefined} onMeta={(m) => setDims({ key: o.key, ...m })} frame={frame} />
+        <MediaPlayer key={o.key} variant="video" src={mediaUrl(o.key)} poster={poster ? mediaUrl(poster) : undefined} onMeta={(m) => setDims({ key: o.key, ...m })} frame={frame} />
       ) : kind === 'audio' ? (
-        <AudioSheet key={o.key} src={mediaUrl(o.key)} ext={extOf(o.key)} onDuration={(len) => setDims({ key: o.key, len })} frame={frame} />
+        <MediaPlayer key={o.key} variant="audio" src={mediaUrl(o.key)} ext={extOf(o.key)} onMeta={(m) => setDims({ key: o.key, ...m })} frame={frame} />
       ) : (
         <QuickLookFrame {...frame}>
           <KindPreview o={o} fit="sheet" urlOf={(x) => mediaUrl(x.key)} poster={poster ? mediaUrl(poster) : undefined} />
@@ -849,7 +849,7 @@ function TrashPanel({ trash, onClose, run, confirm }) {
     <SettingsPanel variant="drawer" title="Trash" onClose={onClose}
       footer={items.length > 0 && trash.empty ? (
         <SettingsFooter>
-          <Button variant="primary" size="sm" onClick={async () => {
+          <Button tone="primary" size="sm" onClick={async () => {
             if (confirm && !(await confirm(`Empty the trash? ${items.length} item${items.length === 1 ? '' : 's'} will be gone for good.`, { okLabel: 'Empty trash' }))) return
             run(async () => { await trash.empty(); setSel(new Set()) })
           }}>Empty trash</Button>
@@ -1069,9 +1069,9 @@ export function MediaLibraryBrowse({
    * media-hub, "two too many"). Given, the gear calls it and this page opens no drawer of its own —
    * inside a Hub the Hub's Settings is the one place. Absent, the gear opens the drawer as always. */
   onOpenSettings,
-  /* `searchSuggestions` — what the palette lists before you type. Absent: favourites, smart
+  /* `searchSuggestions` — what the search modal lists before you type. Absent: favourites, smart
    * folders, then the bucket's top-level folders. An array replaces them; a function receives them
-   * and returns the list. Rows are the palette's shape; a row with `run` calls it instead of
+   * and returns the list. Rows are the search modal's shape; a row with `run` calls it instead of
    * jumping to `id` as a file key. */
   searchSuggestions,
   /* `bucketLevel` — keep title → bucket → folders with ONE bucket (kol-client-olina 2026-09-23).
@@ -1604,13 +1604,13 @@ export function MediaLibraryBrowse({
     openQuickLook({ files, index })
   }
 
-  /* SEARCH IS THE DS'S OWN PALETTE (2026-09-22). `/` is the file-manager habit and ⌘K the app one,
+  /* SEARCH IS THE DS'S OWN MODAL (2026-09-22). `/` is the file-manager habit and ⌘K the app one,
    * so both open it; it searches the bucket's keys and JUMPS — it does not filter the list under
    * you, which is what the filter bar is for. */
   const [searchOpen, setSearchOpen] = useState(false)
   const [searchQuery, setSearchQuery] = useState('')
   /* the filter bar's own query — lifted so a typed one swaps the tree for a flat list, and so the
-   * palette's ⌘Enter can hand its query over */
+   * search modal's ⌘Enter can hand its query over */
   const [barQuery, setBarQuery] = useState('')
   /* THE ARROWS IN THE GRID AND THE ROWS (user 2026-09-23: *"arrow navigation doesnt work in grid
    * mode? nor in row mode"*). The columns have always had theirs (`ColumnBrowser`); these are the
@@ -2197,12 +2197,12 @@ export function MediaLibraryBrowse({
    * do in grid view"*) — in steps of the control ramp, not pixels, so a row is always a control height */
   const RAMP = ['xs', 'sm', 'md', 'lg']
   const rowSlider = (
-    <input type="range" className="slider-black w-32 cursor-pointer" min={0} max={RAMP.length - 1} step={1} value={Math.max(0, RAMP.indexOf(rowSize))}
-      onChange={(e) => setSettings({ ...settings, rowSize: RAMP[Number(e.target.value)] })} aria-label="Row size" />
+    <Slider readout="none" size={128} min={0} max={RAMP.length - 1} step={1} value={Math.max(0, RAMP.indexOf(rowSize))}
+      onChange={(v) => setSettings({ ...settings, rowSize: RAMP[v] })} aria-label="Row size" />
   )
   const sizeSlider = (
-    <input type="range" className="slider-black w-32 cursor-pointer" min={100} max={360} step={20} value={tileSize}
-      onChange={(e) => setSettings({ ...settings, tileSize: Number(e.target.value) })} aria-label="Tile size" />
+    <Slider readout="none" size={128} min={100} max={360} step={20} value={tileSize}
+      onChange={(v) => setSettings({ ...settings, tileSize: v })} aria-label="Tile size" />
   )
   /* `hits` = a query's results: no folders, no root level, each file named by its whole path —
    * in the tree views as a list, the rows' shape; the wall keeps its tiles */
@@ -2256,7 +2256,7 @@ export function MediaLibraryBrowse({
     </div>
   )
 
-  /* The palette's own ruling (2026-08-01) is that Enter COMMITS the query rather than navigating
+  /* The search modal's own ruling (2026-08-01) is that Enter COMMITS the query rather than navigating
    * to whatever happened to be first — so `onExpand` is where a committed query lands, and here
    * that means the top hit. Arrow-then-Enter and a click go through `onSelect`, same jump. */
   const searchResults = rankMedia(objects, searchQuery, { limit: 50 }).map((o) => ({
@@ -2265,7 +2265,7 @@ export function MediaLibraryBrowse({
     hint: o.key.slice(0, o.key.lastIndexOf('/') + 1) || 'the bucket root',
     group: KIND_LABEL[kindOf(o)] || 'File',
   }))
-  /* THE PALETTE OPENS ON SOMEWHERE TO GO (user 2026-09-30: it opened blank in olina). */
+  /* THE SEARCH MODAL OPENS ON SOMEWHERE TO GO (user 2026-09-30: it opened blank in olina). */
   const openFolder = (path) => { setAppRoot(false); goFolder(path) }
   const leafOf = (path) => path.replace(/\/$/, '').split('/').pop()
   const hintOf = (path) => dirOf(path) || 'the bucket root'
@@ -3034,8 +3034,8 @@ export function MediaLibraryLibrary({
     if (editingKey === o.key) {
       return (
         <div className="flex gap-2">
-          <Button variant="primary" size="sm" onClick={commitRename} disabled={renaming}>{renaming ? 'Saving…' : 'Save'}</Button>
-          <Button variant="ghost" size="sm" onClick={cancelRename} disabled={renaming}>Cancel</Button>
+          <Button tone="primary" size="sm" onClick={commitRename} disabled={renaming}>{renaming ? 'Saving…' : 'Save'}</Button>
+          <Button tone="ghost" size="sm" onClick={cancelRename} disabled={renaming}>Cancel</Button>
         </div>
       )
     }

package/src/organisms/RecordManager.jsx

@@ -355,7 +355,7 @@ export default function RecordManager({
             )}
             {saveState != null && <span className="kol-helper-10 text-meta truncate leading-normal">{saveState}</span>}
             {onPublish && (
-              <Button variant="primary" size="sm" onClick={() => onPublish(record)}>
+              <Button tone="primary" size="sm" onClick={() => onPublish(record)}>
                 {publishLabel}
               </Button>
             )}

package/src/organisms/SectionHero.jsx

@@ -1,7 +1,7 @@
 import { isValidElement } from 'react'
 import { FULL_BLEED, bleedClass } from './sectionBleed.js'
 import { surfaceClass } from '../utilities/sectionSurface.js'
-import HlsVideo from '../atoms/HlsVideo.jsx'
+import BackgroundVideo from '../utilities/BackgroundVideo.jsx'
 import Image from '../atoms/Image.jsx'
 import OverlayGlassPanel from '../utilities/OverlayGlassPanel.jsx'
 import AssetPlaceholder from '../utilities/AssetPlaceholder.jsx'
@@ -42,7 +42,7 @@ const SPLIT_HEIGHTS = {
 }
 
 /**
- * Background layer: a media descriptor becomes a cover-fit Image / HlsVideo /
+ * Background layer: a media descriptor becomes a cover-fit Image / BackgroundVideo /
  * inert <video> (`.kol-full-bleed-hero-media` pins it absolute + object-cover
  * — CSS in @kol/theme); a ready ReactNode renders as-is and must position
  * itself (give it that same class).
@@ -69,7 +69,7 @@ function MediaLayer({ media }) {
         />
       )
     }
-    return <HlsVideo src={src} poster={poster} className="kol-full-bleed-hero-media" />
+    return <BackgroundVideo src={src} poster={poster} className="kol-full-bleed-hero-media" />
   }
 
   return (

package/src/organisms/SectionNewsletter.jsx

@@ -1,4 +1,5 @@
 import { useId, useState } from 'react'
+import { VARIANT_TONE } from '../utilities/tone.js'
 import { bleedClass } from './sectionBleed.js'
 import { surfaceClass } from '../utilities/sectionSurface.js'
 import Input from '../atoms/Input.jsx'
@@ -185,7 +186,7 @@ export default function SectionNewsletter({
             />
             <Button
               type="submit"
-              variant={submitVariant}
+              {...(VARIANT_TONE[submitVariant] ? { tone: VARIANT_TONE[submitVariant] } : { variant: submitVariant })}
               size={controlSize}
               disabled={status === 'submitting'}
               className="w-full sm:w-auto"

package/src/organisms/ShellSearchOverlay.jsx

@@ -59,7 +59,7 @@ export function HighlightMatch({ label, query, ranges }) {
 }
 
 /**
- * ShellSearchOverlay — The ⌘K search palette. the ⌘K command palette: fullscreen dim + centered
+ * ShellSearchOverlay — The ⌘K search modal. the ⌘K search modal: fullscreen dim + centered
  * panel, a bare SearchInput on top, result rows beneath (HighlightMatch
  * label, dim hint line, right-aligned group label). Distinct from Modal
  * (prompt/confirm only) — this is the search/command primitive.
@@ -78,7 +78,7 @@ export function HighlightMatch({ label, query, ranges }) {
  * @param {Function} onClose       () => void — backdrop click, Escape, post-select
  * @param {Array}    results       pre-filtered rows: { id, label, group?, hint?, icon? }
  * @param {Array}    [suggestions] rows shown while the query is empty (same shape) —
- *                                 the palette opens on somewhere to go, not a blank box
+ *                                 the search modal opens on somewhere to go, not a blank box
  * @param {string}   query         controlled query (drives the highlight slice)
  * @param {Function} onQueryChange (string) => void — input change
  * @param {Function} onSelect      (item) => void — row click / Enter; consumer navigates
@@ -90,14 +90,17 @@ export function HighlightMatch({ label, query, ranges }) {
  * @param {Function} [onOpenResults] (query) => void — ⌘/Ctrl+Enter: every hit, on the consumer's
  *                                 own results surface. Plain Enter keeps its meaning.
  * @param {string}   [resultsLabel] the footer's second line for ⌘Enter (e.g. `All results`)
+ * @param {string}   [selectLabel] the footer's Enter line while a row is highlighted (default
+ *                                 `Go to page`) — a modal whose rows are not pages says what
+ *                                 Enter does instead (the rack's module search: `Add module`)
  */
 export default function ShellSearchOverlay({
   open,
   onClose,
   results: rawResults = [],
   suggestions = [],
-  /* EXPANDED — the palette's second state (user ruling 2026-08-01). Enter
-   * commits the query and opens `children` as the results body; the palette
+  /* EXPANDED — the search modal's second state (user ruling 2026-08-01). Enter
+   * commits the query and opens `children` as the results body; the search modal
    * and the old tag overlay are one surface with two states, not two
    * components. `chips` are the committed tag facets of the same query. */
   expanded = false,
@@ -112,6 +115,7 @@ export default function ShellSearchOverlay({
   enterLabel,
   onOpenResults,
   resultsLabel = 'All results',
+  selectLabel = 'Go to page',
 }) {
   const panelRef = useRef(null)
   const listRef = useRef(null)
@@ -176,7 +180,7 @@ export default function ShellSearchOverlay({
       if (active >= 0) select(results[active])
       else onExpand?.()
     } else if (e.key === 'Tab') {
-      /* Focus trap — the input is the palette's only tab stop. */
+      /* Focus trap — the input is the search modal's only tab stop. */
       e.preventDefault()
     }
   }
@@ -214,7 +218,7 @@ export default function ShellSearchOverlay({
             ))}
           </div>
         )}
-        {/* A REAL FIELD, inset in the panel (2026-09-30, shadcn's palette as
+        {/* A REAL FIELD, inset in the panel (2026-09-30, shadcn's search modal as
           * the aim) — the flush `bare` strip read as a hole, not a control. */}
         <div className="kol-tone-grey p-2">
         <SearchInput
@@ -243,8 +247,8 @@ export default function ShellSearchOverlay({
           *   group     section heading the row files under — 'Atoms', 'Documentation', 'Tags'
           *   icon      optional leading glyph (kol-icons name)
           *   hint      subtext shown when the LABEL was not what matched
-          *   href      a destination; dismisses the palette
-          *   action    a closure; runs and KEEPS the palette open (tag rows)
+          *   href      a destination; dismisses the search modal
+          *   action    a closure; runs and KEEPS the search modal open (tag rows)
           * Built by `buildShellSearchItems` (showcase/src/nav/shell-nav.js). */}
         {expanded ? (
           <div className="border-t border-fg-08 max-h-[70vh] overflow-y-auto">{children}</div>
@@ -289,7 +293,7 @@ export default function ShellSearchOverlay({
             {(results.length > 0 || enterLabel) && (
               <p className="flex items-center gap-2 kol-helper-12 text-fg-48 mx-2 px-4 border-x border-transparent">
                 <Kbd icon="corner-down-left" />
-                {results.length > 0 ? 'Go to page' : enterLabel}
+                {results.length > 0 ? selectLabel : enterLabel}
               </p>
             )}
             {/* THE RESULTS LINE IS A LINK (user 2026-10-01: *"make 'all results...' at the bottom

package/src/organisms/SpectrumGrid.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import ColorSwatch from '../atoms/ColorSwatch.jsx'
+import ColorSwatch from '../molecules/ColorSwatch.jsx'
 import { resolveCssVar, resolveCssColor, isLight } from '../hooks/cssVar.js'
 import { Tooltip } from '../utilities/Popover.jsx'
 

package/src/organisms/ToolPalette.jsx

@@ -60,7 +60,7 @@ const ToolPalette = ({
       return (
         /* the DS tooltip carries the key as its own chip (the native-title sweep, 2026-09-26) */
         <Tooltip key={it.id} label={it.label} shortcut={it.shortcut}>
-        <Button variant="ghost" size={size} quiet iconOnly={it.icon} iconComponent={iconComponent}
+        <Button tone="ghost" size={size} quiet iconOnly={it.icon} iconComponent={iconComponent}
           pressed={isTool ? activeId === it.id : undefined} disabled={it.disabled}
           aria-label={it.label}
           onClick={(e) => { (isTool ? onSelect : onAction)?.(it.id); blur(e) }} />

package/src/{atoms/HlsVideo.jsx → utilities/BackgroundVideo.jsx}

@@ -2,7 +2,7 @@ import { useEffect, useRef } from 'react'
 import Hls from 'hls.js'
 
 /**
- * HlsVideo — background/decorative HLS-streaming video atom. A single native
+ * BackgroundVideo — A background video with no controls. the background/decorative HLS-streaming video. 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
@@ -11,6 +11,10 @@ import Hls from 'hls.js'
  * these without explicit approval. All layout/sizing arrives via `className`
  * (consumer decides `absolute inset-0 object-cover`, etc.).
  *
+ * NAMED FOR WHAT IT IS FOR (user ruling 2026-10-01): it was `HlsVideo`, which says how it streams,
+ * and it sat in atoms. It has no UI — nothing to operate — so it is a utility; `HlsVideo` is the
+ * alias on the retirement ledger.
+ *
  * @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)
@@ -19,7 +23,7 @@ import Hls from 'hls.js'
  *   off-stage carousel slide pauses instead of autoplaying beside the
  *   active one (FeaturedCarouselFullWidth, 2026-08-26)
  */
-export default function HlsVideo({ src, poster, className, onEnded, active = true, ...props }) {
+export default function BackgroundVideo({ src, poster, className, onEnded, active = true, ...props }) {
   const videoRef = useRef(null)
 
   useEffect(() => {

package/src/utilities/ErrorBoundary.jsx

@@ -60,7 +60,7 @@ export default class ErrorBoundary extends Component {
           )}
 
           <div className="flex gap-4 justify-center flex-wrap">
-            <Button variant="primary" onClick={this.handleReset}>Try again</Button>
+            <Button tone="primary" onClick={this.handleReset}>Try again</Button>
             <Button href={this.props.homeHref ?? '/'}>Go home</Button>
           </div>
         </div>

package/src/utilities/Popover.jsx

@@ -123,7 +123,9 @@ export function usePopover({
     useClick(data.context, { enabled: click }),
     useHover(data.context, { enabled: hover, delay: hoverDelay, move: false }),
     useFocus(data.context, { enabled: focus }),
-    useDismiss(data.context, { enabled: dismiss }),
+    /* `dismiss` may be an object of floating-ui's own options — `{ outsidePress: false }` keeps Esc
+     * and drops the outside click (Dropdown `stayOpen`) */
+    useDismiss(data.context, typeof dismiss === 'object' && dismiss ? { enabled: true, ...dismiss } : { enabled: dismiss }),
     useRole(data.context, { role }),
   ])
 

package/src/utilities/QuadrantSync.jsx

@@ -469,7 +469,10 @@ export default function QuadrantSync ({
               <input
                 id="kq-fade" type="range" min={15} max={100} value={Math.round(fade * 100)}
                 onChange={(e) => setFade(Number(e.target.value) / 100)}
-                style={{ width: '100%', accentColor: handleColor, display: 'block' }}
+                /* Slider's own track, not the browser's range (2026-10-02): a utility cannot import the
+                 * Slider molecule, so the range wears its class and its `--kol-slider-track` seam */
+                className="slider-black w-full block cursor-pointer"
+                style={{ '--kol-slider-track': handleColor }}
               />
             </div>