@kolkrabbi/kol-component 0.236.0 → 0.238.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.236.0",
+  "version": "0.238.0",
   "description": "The core component library",
   "license": "MIT",
   "type": "module",
@@ -8,6 +8,7 @@
   "module": "./src/index.js",
   "exports": {
     ".": "./src/index.js",
+    "./atoms/RotaryDial": "./src/molecules/Knob.jsx",
     "./atoms/*": "./src/atoms/*.jsx",
     "./molecules/*": "./src/molecules/*.jsx",
     "./organisms/*": "./src/organisms/*.jsx",
@@ -26,7 +27,7 @@
     "pdfjs-dist": "^6.3.289",
     "react-syntax-highlighter": "^16.1.1",
     "@kolkrabbi/kol-markdown": "^0.1.2",
-    "@kolkrabbi/kol-search": "^0.2.0"
+    "@kolkrabbi/kol-search": "^0.3.0"
   },
   "peerDependencies": {
     "@kolkrabbi/kol-icons": ">=0.22.0",
@@ -37,7 +38,7 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-icons": "^0.32.0"
+    "@kolkrabbi/kol-icons": "^0.33.0"
   },
   "files": [
     "src",

package/src/atoms/Button.jsx

@@ -1,5 +1,5 @@
 import { isValidElement } from 'react'
-import { toneClass } from '../utilities/tone.js'
+import { toneClass, VARIANT_TONE } from '../utilities/tone.js'
 import { Icon } from '@kolkrabbi/kol-icons'
 import { glyphSize } from '../hooks/glyphLadders.js'
 
@@ -12,7 +12,7 @@ import { glyphSize } from '../hooks/glyphLadders.js'
  *
  * @param {Object} props
  * @param {ReactNode} props.children - Button content
- * @param {'primary'|'secondary'|'accent'|'outline'|'ghost'|'nav'|'danger'|'grey'|'control'} props.variant - Visual variant. UNSET (the default) inherits the tone of the nearest `kol-tone-*` wrapper, else renders primary; the five ground variants are aliases of `tone`. `danger` is the destructive treatment (--ui-error fill); `nav` is the chrome rung — transparent, oq-64 ink, one step brighter than `ghost`; `control` is an alias for `ghost` (legacy call-sites).
+ * @param {'accent'|'danger'|'nav'} props.variant - The intent; the GROUND is `tone`. `primary · secondary · outline · ghost · grey · control` are deprecated aliases of tones (2026-10-01, on the retirement ledger): pass `tone` — `secondary` is `tone="inverted"`, `control` is `tone="ghost"`, the rest keep their name. Visual variant. UNSET (the default) inherits the tone of the nearest `kol-tone-*` wrapper, else renders primary; the five ground variants are aliases of `tone`. `danger` is the destructive treatment (--ui-error fill); `nav` is the chrome rung — transparent, oq-64 ink, one step brighter than `ghost`; `control` is an alias for `ghost` (legacy call-sites).
  * @param {'xs'|'sm'|'md'|'lg'} props.size - Button size (default: 'md'); xs is the panel rung (ControlsXsRung, 2026-09-01) — kol-mono-8 in a 22px shell (20 icon-only), opt-in by prop
  * @param {string} props.iconLeft - Icon name to display on the left
  * @param {string} props.iconRight - Icon name to display on the right
@@ -36,6 +36,8 @@ import { glyphSize } from '../hooks/glyphLadders.js'
  * @param {ElementType|ReactNode} props.iconComponent - Icon renderer seam — a component that receives `{ name, size, className, style }` in place of the DS Icon (custom icon registries plug in here), or a pre-rendered node dropped in verbatim where the glyph would go. Defaults to DS Icon.
  * @param {boolean} props.pressed - Toggle state — sets `aria-pressed` (true/false) and `kol-btn-pressed`; a `quiet` button drops its dimming while pressed. Leave undefined for non-toggle buttons.
  */
+const warned = new Set()
+
 const Button = ({
   children,
   variant,
@@ -85,6 +87,12 @@ const Button = ({
    * `kol-btn-secondary` (the text color as fill) until 2026-09-29, so a misspelt variant
    * shipped inverted. It now stamps nothing, like an unset variant: the wrapper's tone,
    * else primary — and says so in dev. */
+  /* the six tone-duplicates still render exactly as they did — an alias gains nothing and loses
+   * nothing — and say once in dev what replaces them */
+  if (import.meta.env.DEV && VARIANT_TONE[variant] && !warned.has(variant)) {
+    warned.add(variant)
+    console.warn(`Button: variant="${variant}" is deprecated — use tone="${VARIANT_TONE[variant]}"`)
+  }
   const KNOWN = ['primary', 'secondary', 'accent', 'outline', 'ghost', 'nav', 'danger', 'grey']
   const known = !resolvedVariant || KNOWN.includes(resolvedVariant)
   if (!known && import.meta.env.DEV) console.warn(`Button: unknown variant "${resolvedVariant}" — rendering the inherited tone (primary)`)

package/src/atoms/Input.jsx

@@ -159,8 +159,11 @@ export default function Input({
    * from the font's ascender+descender (font-metric), not strictly from
    * CSS line-height. Result: kol-control-sm ends up 26.5px instead of 26.
    * h-4 / h-[18px] / h-[22px] match the kol-mono-12 / -14 / -16 line-heights; on touch every size is
-   * the 16 / 22 rung (D5, 2026-09-29 — see SearchInput) */
-  const heightCls = `${size === 'xs' ? 'h-3' : size === 'sm' ? 'h-4' : size === 'md' ? 'h-[18px]' : 'h-[22px]'} pointer-coarse:h-[22px]`
+   * the 16 / 22 rung (D5, 2026-09-29 — see SearchInput) — except inside a hardware panel
+   * (`.kol-hw-panel`, 2026-10-02): a module's field keeps its desk height on touch, as the rest of
+   * the plate does (kol-components-controls.css). The type still goes to 16px there, so iOS does
+   * not zoom into it. */
+  const heightCls = `${size === 'xs' ? 'h-3' : size === 'sm' ? 'h-4' : size === 'md' ? 'h-[18px]' : 'h-[22px]'} pointer-coarse:not-[.kol-hw-panel_*]:h-[22px]`
 
   const inputCls = [
     'min-w-0 bg-transparent border-none outline-none text-auto',

package/src/atoms/Kbd.jsx

@@ -1,7 +1,7 @@
 /**
  * Kbd — A key cap for a shortcut. a key cap: one key or chord (↵, ⌘K, Esc) shown as an affordance.
  * Replaces the two hand-rolled <kbd> chips (SearchInput's shortcut hint and
- * the palette footer) that had drifted apart (2026-09-30). A plate, so it
+ * the search modal footer) that had drifted apart (2026-09-30). A plate, so it
  * takes oq — never fg (icons-use-oq law).
  *
  * aria-hidden by default: a cap is a hint beside a label, not the label.
@@ -10,7 +10,9 @@
  *                          md = beside helper-12 text (20px)
  * @param {string}    icon  kol-icons name drawn before the children — a key
  *                          with a symbol (↵ `corner-down-left`, ⌘ `command`)
- *                          is a GLYPH, never a typed character in the mono face
+ *                          is a GLYPH, never a typed character in the mono face.
+ *                          It follows the cap: 10 in `sm`, 12 in `md` (2026-10-02 —
+ *                          it was 12 in both, so in the small ⌘K cap the ⌘ outgrew the K)
  */
 import { Icon } from '@kolkrabbi/kol-icons'
 
@@ -18,6 +20,7 @@ const SIZE = {
   sm: 'h-4 min-w-4 px-1 kol-helper-10',
   md: 'h-5 min-w-5 px-1.5 kol-helper-12',
 }
+const GLYPH = { sm: 10, md: 12 }
 
 export default function Kbd({ size = 'md', icon, className = '', children, ...rest }) {
   return (
@@ -26,7 +29,7 @@ export default function Kbd({ size = 'md', icon, className = '', children, ...re
       className={`inline-flex items-center justify-center gap-0.5 shrink-0 rounded-[var(--kol-radius-xs)] bg-oq-08 text-oq-64 ${SIZE[size] ?? SIZE.md} ${className}`.trim()}
       {...rest}
     >
-      {icon && <Icon name={icon} size={12} />}
+      {icon && <Icon name={icon} size={GLYPH[size] ?? GLYPH.md} />}
       {children}
     </kbd>
   )

package/src/index.js

@@ -23,7 +23,7 @@ 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 CloseButton } from './atoms/CloseButton.jsx'
-export { default as ActionButton } from './atoms/ActionButton.jsx'
+export { default as ActionButton } from './molecules/ActionButton.jsx'
 export { default as FileIcon } from './atoms/FileIcon.jsx'
 export { default as SizeOrDownload } from './atoms/SizeOrDownload.jsx'
 export { default as SortHeader } from './atoms/SortHeader.jsx'
@@ -38,21 +38,22 @@ export { default as IconFrame } from './atoms/IconFrame.jsx'
 export { default as ExitPreview } from './utilities/ExitPreview.jsx'
 export { default as Figure } from './atoms/Figure.jsx'
 export { default as FullscreenOverlay } from './utilities/FullscreenOverlay.jsx'
-export { default as HlsVideo } from './atoms/HlsVideo.jsx'
-/* AudioPlayer — HlsVideo's opposite number: same tier and shape, inverted
- * intent (built to be operated, not decorative). See its header before editing
- * either one. */
-export { default as AudioPlayer } from './atoms/AudioPlayer.jsx'
+/* BackgroundVideo — renamed from HlsVideo and moved to utilities 2026-10-01 (user ruling: no UI,
+ * and the name said how it streams, not what it is for). `HlsVideo` is the alias, on the ledger. */
+export { default as BackgroundVideo, default as HlsVideo } from './utilities/BackgroundVideo.jsx'
 export { default as Input } from './atoms/Input.jsx'
 export { default as Label } from './atoms/Label.jsx'
 export { default as LabeledControl } from './molecules/LabeledControl.jsx'
 export { default as OverlayGlassPanel } from './utilities/OverlayGlassPanel.jsx'
 export { default as Pill } from './atoms/Pill.jsx'
 export { usePopover, PopoverPanel, Tooltip } from './utilities/Popover.jsx'
+/* armLongPress — the touch hold the panel value controls report (moved from kol-hardware 2026-10-01) */
+export { armLongPress } from './utilities/armLongPress.js'
 export { default as ContextMenu, useContextMenu } from './molecules/ContextMenu.jsx'
 export { default as ProsePreview } from './utilities/ProsePreview.jsx'
 export { default as QuantityInput } from './molecules/QuantityInput.jsx'
-export { default as RotaryDial } from './atoms/RotaryDial.jsx'
+/* Knob — the survivor's name (2026-10-02): `variant` dial · panel. `RotaryDial` is the alias, on the ledger. */
+export { default as Knob, default as RotaryDial } from './molecules/Knob.jsx'
 export { default as SearchInput } from './molecules/SearchInput.jsx'
 export { default as InspectorSection, default as Section } from './molecules/InspectorSection.jsx'
 export { default as SectionText } from './molecules/SectionText.jsx'
@@ -96,8 +97,10 @@ export { default as SectionCardItem, default as CardFeatureItem } from './molecu
 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 './atoms/ColorSwatch.jsx'
+export { default as ColorSwatch } from './molecules/ColorSwatch.jsx'
 export { default as Dropdown } from './molecules/Dropdown.jsx'
+/* MultiSelect — several pick-one settings in one dropdown, a column each (2026-10-01, first cut) */
+export { default as MultiSelect } from './molecules/MultiSelect.jsx'
 export { default as FieldRow, StatusChip } from './molecules/FieldRow.jsx'
 export { default as FramedMediaBand } from './organisms/FramedMediaBand.jsx'
 export { default as Image } from './atoms/Image.jsx'
@@ -185,10 +188,11 @@ export { default as SectionNewsletter } from './organisms/SectionNewsletter.jsx'
 export { default as NewsletterBand } from './organisms/NewsletterBand.jsx'
 export { default as ColumnBrowser } from './organisms/ColumnBrowser.jsx'
 export { default as KindPreview } from './molecules/KindPreview.jsx'
-export { default as AudioPreview, AudioTile, VideoTile, formatLength } from './molecules/AudioPreview.jsx'
-export { default as VideoSheet } from './molecules/VideoSheet.jsx'
+/* MediaPlayer — the one player (2026-10-02): `variant` video · audio, `frame` for the Quick Look
+ * window. VideoSheet · AudioSheet · AudioPreview · AudioPlayer are its aliases, on the ledger. */
+export { default as MediaPlayer, VideoSheet, AudioSheet, AudioPreview, AudioPlayer } from './molecules/MediaPlayer.jsx'
+export { AudioTile, VideoTile, formatLength } from './molecules/PlayTile.jsx'
 export { default as PlaybackBar } from './molecules/PlaybackBar.jsx'
-export { default as AudioSheet } from './molecules/AudioSheet.jsx'
 export { default as QuickLookFrame } from './molecules/QuickLookFrame.jsx'
 export { default as MediaTile } from './molecules/MediaTile.jsx'
 export { default as RowMenuButton } from './molecules/RowMenuButton.jsx'

package/src/molecules/ColorInputRow.jsx

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

package/src/molecules/ColorRamp.jsx

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

package/src/molecules/CopyButton.jsx

@@ -1,4 +1,4 @@
-import ActionButton from '../atoms/ActionButton.jsx'
+import ActionButton from './ActionButton.jsx'
 
 /**
  * CopyButton — Copy text to the clipboard. THE copy-to-clipboard control (2026-08-09 user ruling): the

package/src/molecules/Dropdown.jsx

@@ -36,6 +36,19 @@ import { glyphSize, indicatorSize } from '../hooks/glyphLadders.js'
 
 /* xs (ControlsXsRung, 2026-09-01): the panel rung, opt-in by prop — the default stays sm (2026-07-28 law) */
 const SIZE_TYPE = { xs: 'kol-mono-8', sm: 'kol-mono-12', md: 'kol-mono-14', lg: 'kol-mono-16' }
+/* THE LIST IS THE TRIGGER'S, CONTINUED (2026-10-02 — user: *"the list has different padding then the
+ * button"*). Two things were off at every size but one. The rows were set in `kol-helper-12`
+ * whatever the trigger wore, and the helper is wider — "Newest first" fitted its trigger and was
+ * cut off in its own row. And the rows sat 4px in from the trigger's text, because the list pads
+ * itself by 4 on top of the row's padding. So: the row wears the trigger's face, and its side
+ * padding is the trigger's (8 · 12 · 16 · 20) less the list's 4. */
+const ROW_PAD = { xs: 'px-1', sm: 'px-2', md: 'px-3', lg: 'px-4' }
+/* …AND THE TRIGGER'S HEIGHT (same day — user: *"is it always the same regardless of size?"*). It was:
+ * 32px rows at sm · md · lg whatever the trigger stood (26 · 32 · 40), 20 at xs. A row is the
+ * trigger's box now, on the control ramp (22 · 26 · 32 · 40 — `--kol-ctl-*`, so the touch rung and
+ * a hardware panel move rows and trigger together). */
+const ROW_H = { xs: 'h-[var(--kol-ctl-xs)]', sm: 'h-[var(--kol-ctl-sm)]', md: 'h-[var(--kol-ctl-md)]', lg: 'h-[var(--kol-ctl-lg)]' }
+const ROW = { xs: `kol-mono-8 ${ROW_PAD.xs} ${ROW_H.xs}`, sm: `kol-mono-12 ${ROW_PAD.sm} ${ROW_H.sm}`, md: `kol-mono-14 ${ROW_PAD.md} ${ROW_H.md}`, lg: `kol-mono-16 ${ROW_PAD.lg} ${ROW_H.lg}` }
 /* Caret size comes from the INDICATOR ladder (glyphLadders.js) — the private
  * map that lived here was a transcription of ADJACENT, which is the wrong
  * ladder for a decoration: it put a caret one rung HEAVIER than the label
@@ -95,6 +108,11 @@ const Dropdown = ({
    * has one implementation and the drawing stays the caller's. */
   triggerAdornment,
   defaultOpen = false,
+  /* `stayOpen` — a click outside does not close the list (the trigger and Esc still do). For a
+   * surface where the open list is the thing being looked at while other controls are worked:
+   * the showcase's preview, with its toolbar pickers beside it (user 2026-10-02: *"can we
+   * disclude the preview from that behaviour?"*). */
+  stayOpen = false,
   className = ''
 }) => {
   const [isOpen, setIsOpen] = useState(defaultOpen)
@@ -107,12 +125,26 @@ const Dropdown = ({
    * ambient case is the one only this can serve. */
   const triggerRef = useRef(null)
   const [ambient, setAmbient] = useState(null)
+  /* …AND SO IS A ZOOM (2026-10-02, kol-monitor's rack — user: *"what about the dropdown in general?
+   * its kinda wrong no"*). A trigger inside a zoomed surface (the rack at 80%) is drawn smaller,
+   * but the portalled list was not: it kept its full-size type inside a panel pinned to the
+   * trigger's SHRUNKEN width, so the names were cut off — 18 of monitor's 40 presets at 80%, all
+   * of them at 50%. The trigger's scale is its drawn width over its layout width; the list's
+   * content takes the same zoom, so trigger and list stay one piece at any scale. */
+  const [scale, setScale] = useState(1)
+  const [inPanel, setInPanel] = useState(false)
   useLayoutEffect(() => {
     if (!isOpen || !triggerRef.current) return
     const cs = getComputedStyle(triggerRef.current)
     const vars = {}
     for (const v of TONE_VARS) { const val = cs.getPropertyValue(v).trim(); if (val) vars[v] = val }
     setAmbient(vars)
+    const laid = triggerRef.current.offsetWidth
+    const s = laid ? triggerRef.current.getBoundingClientRect().width / laid : 1
+    setScale(Math.abs(s - 1) > 0.01 ? s : 1)
+    /* and the panel it opened from: a hardware plate keeps its desk sizes on touch, and the
+     * portalled list would otherwise take the touch rung its trigger skipped */
+    setInPanel(!!triggerRef.current.closest('.kol-hw-panel'))
   }, [isOpen])
 
   // sm everywhere unless explicitly overridden (see docblock size law).
@@ -132,6 +164,7 @@ const Dropdown = ({
     flip: false,
     matchReferenceWidth: true,
     role: 'listbox',
+    dismiss: stayOpen ? { outsidePress: false } : true,
   })
 
   /* Width belongs to the CALL SITE (2026-08-09 user call — "width without any
@@ -163,7 +196,9 @@ const Dropdown = ({
   /* `{ divider: true }` in `options` draws a hairline between groups (FoundationsTones, 2026-09-26 —
    * user: none on top, the filled tones in order, outline and ghost apart). It is never a choice:
    * the lookup, the fallback and the trigger's width all read the choices only. */
-  const choices = options.filter((opt) => !opt?.divider)
+  /* `{ heading: 'Variant' }` names the list (2026-10-01 — user: "first item 'variant' then divider
+   * then the list"): a row that says what the dropdown sets, never a choice. */
+  const choices = options.filter((opt) => !opt?.divider && !opt?.heading)
   const currentOption = choices.find((opt) => opt.value === value) || choices[0]
 
   /* A clamped list (Popover caps the panel to the viewport) can open with the
@@ -172,7 +207,7 @@ const Dropdown = ({
   const listRef = useRef(null)
   useEffect(() => {
     if (!isOpen) return
-    const idx = options.findIndex((opt) => !opt?.divider && opt.value === currentOption?.value)
+    const idx = options.findIndex((opt) => !opt?.divider && !opt?.heading && opt.value === currentOption?.value)
     listRef.current?.children[idx]?.scrollIntoView({ block: 'nearest' })
   }, [isOpen]) // eslint-disable-line react-hooks/exhaustive-deps
 
@@ -239,20 +274,25 @@ const Dropdown = ({
         popover={popover}
         panel={false}
         focus={false}
-        className={`kol-dd-panel ${resolvedVariant ? `kol-dd-panel--${resolvedVariant}` : ''} ${toneClass(tone)}`.replace(/\s+/g, ' ').trim()}
+        className={`kol-dd-panel ${resolvedVariant ? `kol-dd-panel--${resolvedVariant}` : ''} ${toneClass(tone)} ${inPanel ? 'kol-hw-panel' : ''}`.replace(/\s+/g, ' ').trim()}
         style={{
           ...ambient,
           '--kol-dd-max-rows': maxRows ?? 10,
-          /* xs rows are 20px; the panel's max-height reads the row height */
-          ...(resolvedSize === 'xs' && rowHeight == null ? { '--kol-dd-row-h': '20px' } : null),
+          /* a row is the trigger's height; the panel's max-height reads it */
+          ...(rowHeight == null ? { '--kol-dd-row-h': `var(--kol-ctl-${resolvedSize})` } : null),
           ...(rowHeight != null ? { '--kol-dd-row-h': typeof rowHeight === 'number' ? `${rowHeight}px` : rowHeight } : null),
         }}
       >
-        {(resolvedVariant === 'primary' || resolvedVariant === 'grey') && <div className="kol-dd-div" />}
+        {/* THE HAIRLINE UNDER THE TRIGGER, ALWAYS (2026-10-02 — user: *"I see it sometimes and sometimes
+          * not"*). It was drawn only for `variant="primary" | "grey"`: a dropdown toned by `tone=`
+          * got none, and an outline one lost its divider too — the panel sits 1px over the trigger's
+          * bottom border, which was meant to be it. One rule: an open dropdown has the line. */}
+        <div className="kol-dd-div" />
 
-        <div ref={listRef} className="kol-dd-list" role="listbox">
+        <div ref={listRef} className="kol-dd-list" role="listbox" style={scale !== 1 ? { zoom: scale } : undefined}>
           {options.map((option, i) => {
             if (option?.divider) return <MenuDropdownDivider key={`divider-${i}`} />
+            if (option?.heading) return <div key={`heading-${i}`} className={`${resolvedSize === 'xs' ? 'kol-mono-8' : 'kol-helper-12'} ${ROW_H[resolvedSize] ?? ROW_H.sm} ${ROW_PAD[resolvedSize] ?? ROW_PAD.sm} flex shrink-0 items-center text-meta`}>{option.heading}</div>
             const isActive = option.value === currentOption?.value
             return (
               <MenuDropdownItem
@@ -265,6 +305,7 @@ const Dropdown = ({
                  * brighten. The check mark is what marks the current value. */
                 hover={false}
                 size={resolvedSize}
+                rowClass={ROW[resolvedSize] ?? ROW.sm}
                 height={rowHeight}
                 onPointerEnter={onOptionHover ? () => reportHover(option.value) : undefined}
                 onPointerLeave={onOptionHover ? () => reportHover(null) : undefined}

package/src/molecules/KindPreview.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
-import { AudioTile, VideoTile } from './AudioPreview.jsx'
-import HlsVideo from '../atoms/HlsVideo.jsx'
+import { AudioTile, VideoTile } from './PlayTile.jsx'
+import BackgroundVideo from '../utilities/BackgroundVideo.jsx'
 import CodeBlock from './CodeBlock.jsx'
 import AssetPlaceholder from '../utilities/AssetPlaceholder.jsx'
 import FileIcon from '../atoms/FileIcon.jsx'
@@ -16,11 +16,11 @@ import DocPage from './DocPage.jsx'
  * KindPreview — A preview for any kind of file. a preview for any kind of file: kol-r2b2's `KindPreview.jsx`,
  * promoted 2026-08-27 (SettingsPanelChromeAndColumnPreview). Before it, anything
  * that was not an image or a video showed a grey box with the word "text".
- * HLS → `HlsVideo` (inert — the DS's background-video atom, preview only),
+ * HLS → `BackgroundVideo` (inert — the DS's background-video atom, preview only),
  * video → `VideoTile` and audio → `AudioTile` (ColumnBrowserMediaFacts
  * 2026-08-27 — the square column tile with one play/pause control; no Figure, no
  * border — `VideoBlock`'s Figure border is why kol-r2b2 bypassed it; the overlay
- * player is `AudioPreview`), markdown → rendered prose in `.kol-prose`
+ * player is `MediaPlayer`), markdown → rendered prose in `.kol-prose`
  * (markdownToHtml, KindPreviewMarkdown 2026-08-27), json / yaml / text / code →
  * `CodeBlock` (language by kind or extension) — every document on ONE plate,
  * `DocPage` (DocPageAndKindShowcase 2026-08-27: the overlay's A-series page, the
@@ -171,10 +171,10 @@ export default function KindPreview({
 
   if (kind === 'playlist') {
     /* the caption is pane chrome — in a tile it is a line of prose over the picture */
-    if (fit !== 'pane') return <HlsVideo src={url} poster={poster} className="w-full h-full object-cover" />
+    if (fit !== 'pane') return <BackgroundVideo src={url} poster={poster} className="w-full h-full object-cover" />
     return (
       <div className="flex flex-col items-center gap-2">
-        <HlsVideo src={url} poster={poster} className="max-w-full max-h-[70vh] rounded" />
+        <BackgroundVideo src={url} poster={poster} className="max-w-full max-h-[70vh] rounded" />
         <span className="kol-mono-12 text-meta">HLS stream · playback is preview-only, no controls</span>
       </div>
     )

package/src/{atoms/RotaryDial.jsx → molecules/Knob.jsx}

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
+import KnobPanel from './KnobPanel.jsx'
 
 /** Clamp to min–max, snapped to the nearest step from min. */
 const snapTo = (v, min, max, step) => {
@@ -7,12 +8,17 @@ const snapTo = (v, min, max, step) => {
 }
 
 /**
- * RotaryDial — drag-to-set rotary knob numeric input. The KNOB VARIANT of
+ * Knob — drag-to-set rotary knob numeric input. The ROTARY TWIN of
  * Slider (molecules/Slider.jsx): both implement the shared value-control
  * contract — `value` / `min` / `max` / `step` / `onChange(next: number)` /
  * `label` / `size` / `disabled` / `formatValue`. Controlled; onChange always
  * fires with the plain number.
  *
+ * ONE KNOB, TWO VARIANTS (user ruling 2026-10-02: *"knob being the more simple form, rotary dial
+ * being more of a variant"*). It was `RotaryDial` with kol-hardware's `Knob` wrapped over it; the
+ * name is `Knob` now, `dial` is the ring-and-disc drawing that name used to mean, and `RotaryDial`
+ * is the alias on the retirement ledger.
+ *
  * 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. A local visual buffer keeps rotation
@@ -30,9 +36,12 @@ const snapTo = (v, min, max, step) => {
  * @param {number}   size        dial px size (default 80); derives ring + disc radii
  * @param {boolean}  disabled    blocks drag + keyboard and dims the control (default false)
  * @param {Function} formatValue optional readout formatter (value: number) => string; default `${value}%`
+ * @param {'dial'|'panel'} variant  `dial` (default) = the ring and disc · `panel` = the rack knob (kol-hardware's, merged 2026-10-01): a cap in the hardware colors;
+ *                            there `size` is `sm · md · lg · xl` (24 · 32 · 40 · 64) and it also takes `labelPlacement`
+ *                            (`column · row · row-left · row-right`), `bipolar`, `labelMinWidth` and `onHold`
  * @param {number}   defaultValue alt-click the dial resets to this (falls back to `min`) — Slider carries the same gesture
  */
-export default function RotaryDial({
+export default function Knob({
   label,
   value = 0,
   onChange,
@@ -43,6 +52,11 @@ export default function RotaryDial({
   disabled = false,
   formatValue,
   defaultValue,
+  variant = 'dial',
+  labelPlacement,
+  bipolar,
+  labelMinWidth,
+  onHold,
 }) {
   const [isDragging, setIsDragging] = useState(false)
   const [localValue, setLocalValue] = useState(value) // visual buffer — updates every move
@@ -119,6 +133,10 @@ export default function RotaryDial({
     handlePointerDown(e)
   }
 
+  if (variant === 'panel') {
+    return <KnobPanel value={value} onChange={onChange} min={bipolar && min === 0 ? undefined : min} max={max} label={label} variant={labelPlacement} bipolar={bipolar} labelMinWidth={labelMinWidth} size={typeof size === 'string' ? size : undefined} defaultValue={defaultValue} onHold={onHold} />
+  }
+
   const outerRadius = size / 2
   const innerRadius = (size * 0.7) / 2
   const strokeWidth = 2

package/src/molecules/KnobPanel.jsx

@@ -0,0 +1,116 @@
+import { useCallback } from 'react'
+import { armLongPress } from '../utilities/armLongPress.js'
+
+const NO_HOLD = { move() {}, cancel() {} }
+
+const SIZES = { sm: 24, md: 32, lg: 40, xl: 64 }
+
+/**
+ * KnobPanel — Knob's `variant="panel"`: the rack knob. A cap and a pointer line in the
+ * hardware cap colors, sized 24 · 32 · 40 · 64 by name, with the four label placements and the
+ * bipolar legend. It was kol-hardware's own `Knob` (kol-monitor's rack, lifted 2026-09-01) and is
+ * carried here class for class — merged in 2026-10-01 (user ruling). Not exported:
+ * reach it through `<Knob variant="panel">`.
+ */
+export default function KnobPanel({ value, onChange, min, max, label, variant = 'column', bipolar = false, labelMinWidth, size: sizeProp = 'sm', defaultValue, onHold }) {
+  const size = SIZES[sizeProp] || SIZES.sm
+  const effMin = min ?? (bipolar ? -100 : 0)
+  const effMax = max ?? 100
+  const effDefault = defaultValue ?? (bipolar ? 0 : 50)
+  const angle = ((value - effMin) / (effMax - effMin)) * 270 - 135
+  const r = size / 2
+  const ir = r * 0.56
+
+  const handlePointerDown = useCallback((e) => {
+    e.preventDefault()
+    // Alt/Option + click resets to default instead of starting a drag
+    if (e.altKey) {
+      onChange(effDefault)
+      return
+    }
+    const startY = e.clientY
+    const startVal = value
+    const range = effMax - effMin
+
+    const id = e.pointerId
+    const handleMove = (e) => {
+      if (e.pointerId !== id) return  // a second finger is a pan, not this knob
+      hold.move(e)
+      const delta = (startY - e.clientY) * (range / 200)
+      const next = Math.round(Math.max(effMin, Math.min(effMax, startVal + delta)))
+      onChange(next)
+    }
+    const handleUp = () => {
+      hold.cancel()
+      window.removeEventListener('pointermove', handleMove)
+      window.removeEventListener('pointerup', handleUp)
+    }
+    // Touch: hold still 500ms → the holder's sheet instead of the drag
+    const hold = onHold ? armLongPress(e, () => { handleUp(); onHold({ label, value, min: effMin, max: effMax, defaultValue: effDefault }) }) : NO_HOLD
+    window.addEventListener('pointermove', handleMove)
+    window.addEventListener('pointerup', handleUp)
+  }, [value, effMin, effMax, effDefault, onChange, onHold, label])
+
+  const knobSvg = (
+    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+      <circle cx={r} cy={r} r={r * 0.75} style={{ fill: 'var(--kol-ctl-hw-cap)', stroke: 'var(--kol-fg-24)' }} strokeWidth="1" />
+      <line
+        x1={r} y1={r}
+        x2={r + ir * Math.cos((angle - 90) * Math.PI / 180)}
+        y2={r + ir * Math.sin((angle - 90) * Math.PI / 180)}
+        style={{ stroke: 'var(--kol-ctl-hw-on-cap)' }} strokeWidth="1.5" strokeLinecap="round"
+      />
+    </svg>
+  )
+
+  if (variant === 'row-left' || variant === 'row') {
+    return (
+      <div
+        onPointerDown={handlePointerDown}
+        style={{ cursor: 'ns-resize', touchAction: 'none', display: 'flex', alignItems: 'center', gap: 4 }}
+      >
+        {label && (
+          <span className="kol-helper-8 text-fg-32" style={{ textTransform: 'uppercase', lineHeight: 1 }}>
+            {label}
+          </span>
+        )}
+        {knobSvg}
+      </div>
+    )
+  }
+
+  if (variant === 'row-right') {
+    return (
+      <div
+        onPointerDown={handlePointerDown}
+        style={{ cursor: 'ns-resize', touchAction: 'none', display: 'flex', alignItems: 'center', gap: 4 }}
+      >
+        {knobSvg}
+        {label && (
+          <span className="kol-helper-8 text-fg-32" style={{ textTransform: 'uppercase', lineHeight: 1, minWidth: labelMinWidth }}>
+            {label}
+          </span>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div
+      onPointerDown={handlePointerDown}
+      style={{ cursor: 'ns-resize', touchAction: 'none', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}
+    >
+      {bipolar && (
+        <span className="kol-helper-8 text-fg-32" style={{ lineHeight: 1 }}>
+          -/+
+        </span>
+      )}
+      {knobSvg}
+      {label && (
+        <span className="kol-helper-8 text-fg-32" style={{ textTransform: 'uppercase', lineHeight: 1 }}>
+          {label}
+        </span>
+      )}
+    </div>
+  )
+}

package/src/molecules/LabeledControl.jsx

@@ -23,6 +23,9 @@
  *            kol-monitor 2026-09-01 — in a narrow multi-column grid a fixed
  *            160 label left the control 4px, and a nowrap combo painted into
  *            the neighbour column; the 48px column gap had been hiding it).
+ *   variant — `'panel'` is the hardware panel label (was kol-hardware `PanelLabel`, merged
+ *            2026-10-01): `kol-helper-8`, uppercase, hugging the control; it takes
+ *            `labelPosition` (`top · bottom · left · right`, default bottom), `labelClass` and `gap`.
  *   children — the control body.
  *   className — additional classes on the wrapper.
  */
@@ -33,7 +36,26 @@ export default function LabeledControl({
   labelWidth = 48,
   children,
   className = '',
+  variant,
+  labelPosition = 'bottom',
+  labelClass = 'kol-helper-8',
+  gap = 0,
 }) {
+  if (variant === 'panel') {
+    const isRow = labelPosition === 'left' || labelPosition === 'right'
+    const labelEl = label && (
+      <span className={`${labelClass} text-fg-32`} style={{ textTransform: 'uppercase', lineHeight: 1 }}>
+        {label}
+      </span>
+    )
+    return (
+      <div style={{ display: 'inline-flex', flexDirection: isRow ? 'row' : 'column', alignItems: 'center', gap }}>
+        {(labelPosition === 'top' || labelPosition === 'left') && labelEl}
+        {children}
+        {(labelPosition === 'bottom' || labelPosition === 'right') && labelEl}
+      </div>
+    )
+  }
   const showLabel  = !!label
   const labelInner = (
     <>