@kolkrabbi/kol-component 0.45.0 → 0.46.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.45.0",
+  "version": "0.46.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",

package/src/atoms/ActionButton.jsx

@@ -0,0 +1,116 @@
+import { useRef, useState, useEffect } from 'react'
+import { AnimatePresence, motion } from 'framer-motion'
+import { Icon } from '@kolkrabbi/kol-icons'
+import { glyphSize } from '../hooks/glyphLadders.js'
+
+/**
+ * ActionButton — an icon control that CONFIRMS what it did (2026-08-15 user
+ * ruling: *"where is the 'code copied' or whatever message"*).
+ *
+ * The confirm-flip existed exactly once, welded to the clipboard inside
+ * CopyButton: fire, swap `copy`→`check` for 2s, flip the accessible label.
+ * Nothing else could reuse it, so every other in-frame control — download,
+ * select, anything a card puts over its media — had no way to acknowledge a
+ * click at all. This is that behaviour with the clipboard taken out of it;
+ * CopyButton is now a six-line wrapper around it and keeps its own API.
+ *
+ * The swap is ANIMATED, which the original was not — it hard-cut between two
+ * glyphs. framer-motion is already a declared peer of this package (TiltCard),
+ * so nothing new is installed. The curve is the house curve
+ * `cubic-bezier(0.16, 1, 0.3, 1)`, not `--kol-transition-base`'s generic
+ * material ease: the rest of the card family moves on the house curve and a
+ * control inside a card that eases differently reads as a foreign part.
+ *
+ * Chrome is `.kol-copy-btn` (kol-theme) — the DS's action-button look, which
+ * predates this component and is misnamed for it. Positioning stays the
+ * parent's job, exactly as before: pass `.kol-frame-control` to sit it in a
+ * card's corner, or nothing to leave it in flow.
+ *
+ * @param {string}   icon         glyph at rest
+ * @param {string}   confirmIcon  glyph while confirming (default 'check')
+ * @param {string}   label        accessible label at rest
+ * @param {string}   confirmLabel accessible label while confirming
+ * @param {Function} onAction     (event) => void | Promise — awaited; the
+ *                                confirm only fires once it resolves
+ * @param {string}   href         renders an <a> instead of a <button>
+ * @param {number}   hold         ms to hold the confirm state (default 2000)
+ * @param {string}   size         sm | md | lg — the pinned square (28/32/36)
+ *                                and its SOLO glyph (16/20/24) move together,
+ *                                resolved from hooks/glyphLadders.js. This was
+ *                                a raw px number and defaulted to 16 in a 32px
+ *                                box: the sm glyph in the md square, which is
+ *                                the exact hand-transcription the ladders file
+ *                                exists to stop.
+ * @param {number}   iconSize     px override for the glyph only — the square
+ *                                never moves with it (2026-07-28 law)
+ */
+const HOUSE_EASE = [0.16, 1, 0.3, 1]
+
+export default function ActionButton({
+  icon,
+  confirmIcon = 'check',
+  label,
+  confirmLabel,
+  onAction,
+  href,
+  hold = 2000,
+  size = 'md',
+  iconSize,
+  className = '',
+  ...rest
+}) {
+  const [done, setDone] = useState(false)
+  const timer = useRef(null)
+
+  /* the timer outlives the click — clear it if the control unmounts mid-hold,
+   * or React warns and the callback fires into a dead component */
+  useEffect(() => () => clearTimeout(timer.current), [])
+
+  const handle = async (event) => {
+    if (onAction) await onAction(event)
+    clearTimeout(timer.current)
+    setDone(true)
+    timer.current = setTimeout(() => setDone(false), hold)
+  }
+
+  const aria = (done && confirmLabel) || label
+  const cls = `kol-copy-btn kol-copy-btn-${size} ${className}`.trim()
+  const glyphPx = iconSize ?? glyphSize(size, true)
+
+  /* A HANDOFF, not a swap (user ruling 2026-08-15). `mode="wait"` held the box
+   * empty while the outgoing glyph finished, which reads as a blink at 32px.
+   * Both glyphs occupy the SAME grid cell and cross over each other: the old
+   * one lifts and fades as the new one rises into place. */
+  const glyph = (
+    <span className="inline-grid place-items-center" style={{ width: glyphPx, height: glyphPx }}>
+      <AnimatePresence initial={false}>
+        <motion.span
+          key={done ? 'confirm' : 'rest'}
+          className="inline-flex"
+          style={{ gridArea: '1 / 1' }}
+          initial={{ opacity: 0, scale: 0.6, y: 4 }}
+          animate={{ opacity: 1, scale: 1, y: 0 }}
+          exit={{ opacity: 0, scale: 0.6, y: -4 }}
+          transition={{ duration: 0.22, ease: HOUSE_EASE }}
+        >
+          <Icon name={done ? confirmIcon : icon} size={glyphPx} />
+        </motion.span>
+      </AnimatePresence>
+    </span>
+  )
+
+  /* The element follows the affordance — IconFrame's contract, same reasoning:
+   * a link must be a real <a> for middle-click, focus order and screen readers. */
+  if (href) {
+    return (
+      <a className={cls} href={href} onClick={handle} aria-label={aria} title={aria} {...rest}>
+        {glyph}
+      </a>
+    )
+  }
+  return (
+    <button type="button" className={cls} onClick={handle} aria-label={aria} title={aria} {...rest}>
+      {glyph}
+    </button>
+  )
+}

package/src/hooks/usePlaceholders.js

@@ -0,0 +1,72 @@
+import { useCallback, useEffect, useState } from 'react'
+
+/**
+ * usePlaceholders — the ONE gate for placeholder / empty-state prose
+ * (GatedEmptyState, filed from kol-fxr 2026-08-15).
+ *
+ * The ticket's ruling, and the reason this is one concept rather than three:
+ * the filing repo had invented "helper text" vs "empty state" vs "hint" as
+ * separate ideas, and that is precisely what let the prose creep back — each
+ * kind had its own home and none had an off switch. There is one kind here,
+ * it is called a placeholder, and it is OFF until asked for.
+ *
+ * WHAT THE DS OWNS: the preference, its persistence, and the `.kol-placeholder`
+ * suppression rule in kol-utilities.css.
+ * WHAT THE CONSUMER OWNS: the keybind. A design system that grabs a global
+ * key collides with every app that already used it — kol-fxr's own `H` is
+ * already `toggle-visibility` in its editor keymap, which is exactly the
+ * collision the DS must not ship. Call `toggle` from whatever key you like.
+ *
+ * The hiding is CSS, not a render branch, so it covers a consumer's OWN prose
+ * the moment they put `.kol-placeholder` on it — not just <EmptyState gated>.
+ * One rule, no re-render, nothing to thread through a tree.
+ */
+
+const STORAGE_KEY = 'kol-placeholders'
+const ATTR = 'data-kol-placeholders'
+
+const root = () => document.documentElement
+
+/* Module-level subscribers: a settings checkbox and a keybind are usually two
+ * different components calling this hook, and per-component useState would let
+ * them disagree about a preference there is only one of. The CSS never
+ * desyncs (it reads the attribute), but the reported `shown` would. */
+const listeners = new Set()
+
+function read() {
+  try {
+    return localStorage.getItem(STORAGE_KEY) === 'on'
+  } catch {
+    return false // storage blocked → stay off, which is the default anyway
+  }
+}
+
+function write(on) {
+  if (on) root().setAttribute(ATTR, '')
+  else root().removeAttribute(ATTR)
+  try {
+    localStorage.setItem(STORAGE_KEY, on ? 'on' : 'off')
+  } catch { /* storage blocked — the attribute still holds for this session */ }
+  listeners.forEach((fn) => fn(on))
+}
+
+export default function usePlaceholders() {
+  const [shown, setShown] = useState(false)
+
+  /* Boot from storage and stamp the attribute. Default OFF is the ruling, so
+   * an absent key and a blocked localStorage both land on the same answer. */
+  useEffect(() => {
+    const on = read()
+    if (on) root().setAttribute(ATTR, '')
+    setShown(on)
+    listeners.add(setShown)
+    return () => listeners.delete(setShown)
+  }, [])
+
+  /* Read-then-flip off storage rather than state: a keybind handler bound once
+   * would otherwise close over the first render's value and toggle from stale. */
+  const toggle = useCallback(() => write(!read()), [])
+  const set = useCallback((on) => write(!!on), [])
+
+  return { shown, toggle, setShown: set }
+}

package/src/index.js

@@ -22,7 +22,8 @@ export { default as AssetPlaceholder } from './utilities/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 ActionButton } from './atoms/ActionButton.jsx'
+export { default as CopyButton } from './molecules/CopyButton.jsx'
 export { default as CurveOverlay } from './atoms/CurveOverlay.jsx'
 export { default as Divider } from './atoms/Divider.jsx'
 export { default as DocsToc } from './molecules/DocsToc.jsx'
@@ -79,6 +80,15 @@ export { default as FramedMediaBand } from './organisms/FramedMediaBand.jsx'
 export { default as Image } from './atoms/Image.jsx'
 export { default as MediaCard } from './molecules/MediaCard.jsx'
 export { default as MediaRow } from './molecules/MediaRow.jsx'
+
+/* content-card system (2026-08-15) — the ruled card/row family:
+ * docs/documentation/03-components/06-content-card-system.md */
+export { default as ContentText } from './molecules/ContentText.jsx'
+export { default as ContentMedia } from './molecules/ContentMedia.jsx'
+export { default as ContentCard } from './molecules/ContentCard.jsx'
+export { default as ContentRow } from './molecules/ContentRow.jsx'
+export { default as ContentItem } from './molecules/ContentItem.jsx'
+export { default as ContentCollection } from './organisms/ContentCollection.jsx'
 export { MenuItem, MenuDropdownItem, MenuDropdownDivider, MenuDropdownNest } from './molecules/MenuItem.jsx'
 export { MenuPopover } from './molecules/MenuPopover.jsx'
 export { ModalProvider, useModal } from './molecules/Modal.jsx'
@@ -148,6 +158,7 @@ export { default as useTilt } from './hooks/useTilt.js'
 export { default as useCoarsePointer } from './hooks/useCoarsePointer.js'
 export { default as useAxisAnimation } from './hooks/useAxisAnimation.js'
 export { useEyedropper, pickFromCanvasElement } from './hooks/useEyedropper.js'
+export { default as usePlaceholders } from './hooks/usePlaceholders.js'
 export { resolveCssVar, resolveCssColor, isLight } from './hooks/cssVar.js'
 
 // color math (support module — HSL/hex conversion + harmony generation)

package/src/molecules/CodeBlock.jsx

@@ -1,6 +1,6 @@
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
-import CopyButton from '../atoms/CopyButton.jsx'
+import CopyButton from './CopyButton.jsx'
 
 /**
  * CodeBlock — REPLICATED from the elder reference
@@ -105,7 +105,7 @@ export default function CodeBlock({ children, code: codeProp, language: language
         >
           {code}
         </SyntaxHighlighter>
-        <CopyButton text={code} className="kol-codeblock-copy" />
+        <CopyButton text={code} className="kol-frame-control" />
       </div>
     </div>
   )

package/src/molecules/ContentCard.jsx

@@ -0,0 +1,140 @@
+import ContentMedia from './ContentMedia.jsx'
+import ContentText from './ContentText.jsx'
+
+/**
+ * ContentCard — the card form of the content-card system. Variants differ in
+ * text composition, media ratio, and the RULED box structure, all defaulted
+ * from the live review (06-content-card-system.md §2/§3):
+ *
+ *   stack      media (own ratio) on top, text plate below  — default · article · work
+ *   fill-card  the CARD is the ratio frame; media fills the remainder above
+ *              the plate — catalog · print (the A4 cards)
+ *   canvas     the card is the ratio frame; media fills it absolutely and the
+ *              text plate floats on top — typeface (details over specimen)
+ *
+ * Padding spells the TOKENS (--kol-pad-card-{sm,md,lg} = 12/16/24), never a
+ * literal. Passing `pad` overrides the plate padding with one token step
+ * (named `pad`, not `size` — `size` is the ruled TEXT slot). Image-only cards
+ * (print) pass no text slots and render no plate. Exotic chrome (drawers,
+ * keylines, specimens) is consumer content through `media`.
+ */
+
+/* ruled defaults — defaults, not hardcodes; `ratio` stays overridable while
+ * the A4 question is open (06-content-card-system.md §4). */
+const RATIOS = {
+  default: '1 / 1',
+  catalog: '1 / 1.41421',
+  print: '1 / 1.41421',
+  article: '16 / 9',
+  work: '3 / 4',
+  typeface: '1 / 1.41421',
+}
+
+/* ruled box values per variant, verbatim from the §3 reference cards —
+ * paddings in tokens: pad-card-sm 12 · pad-card-md 16 · pad-card-lg 24 */
+const BOX = {
+  default:  { layout: 'stack', border: 'var(--kol-fg-12)', bg: 'var(--kol-fg-02)', pad: 'var(--kol-pad-card-sm)' },
+  catalog:  { layout: 'fill-card', border: 'var(--kol-fg-04)', bg: 'var(--kol-fg-04)', pad: 'var(--kol-pad-card-sm) var(--kol-pad-card-md)', plateTop: true, plateBg: 'var(--kol-surface-primary)' },
+  print:    { layout: 'fill-card', border: null, bg: 'var(--kol-surface-secondary)', pad: 'var(--kol-pad-card-sm) var(--kol-pad-card-md)', plateTop: true },
+  article:  { layout: 'stack', border: null, bg: null, pad: '0', mediaGap: 'var(--kol-spacing-4)' },
+  work:     { layout: 'stack', border: 'var(--kol-fg-04)', bg: null, pad: 'var(--kol-pad-card-md)' },
+  typeface: { layout: 'canvas', border: 'var(--kol-fg-08)', bg: 'var(--kol-surface-primary)', pad: 'var(--kol-pad-card-lg)' },
+}
+
+export default function ContentCard({
+  variant = 'default',
+  pad,
+  media,
+  ratio,
+  control,
+  actions,
+  selected = false,
+  onClick,
+  className = '',
+  ...text
+}) {
+  const box = BOX[variant] ?? BOX.default
+  const r = ratio ?? RATIOS[variant]
+  const padding = pad ? `var(--kol-pad-card-${pad})` : box.pad
+  /* image-only cards (print) pass no text slots — the empty plate must not render */
+  const hasText = ['title', 'body', 'kicker', 'detail', 'date', 'size', 'meta'].some((k) => text[k] != null)
+  /* `actions` — consumer content BELOW the text, in flow (2026-08-15 ruling).
+   * The other half of what MediaCard hardcodes: `control` sits OVER the media,
+   * this sits under the copy. Two positions, two slots, and a plate renders for
+   * either — an actions-only card is legal. */
+  const hasPlate = hasText || actions != null
+  const framed = box.border != null || box.bg != null
+
+  const textNode = hasPlate ? (
+    <div
+      style={{
+        padding,
+        marginTop: box.layout === 'stack' ? box.mediaGap : undefined,
+        borderTop: box.plateTop ? '1px solid var(--kol-fg-04)' : undefined,
+        background: box.plateBg,
+        position: box.layout === 'canvas' ? 'relative' : undefined,
+        zIndex: box.layout === 'canvas' ? 1 : undefined,
+      }}
+    >
+      {hasText && <ContentText variant={variant} form="card" {...text} />}
+      {actions && <div style={{ marginTop: hasText ? 'var(--kol-spacing-2)' : undefined }}>{actions}</div>}
+    </div>
+  ) : null
+
+  /* The CARD clips its own corners when it is framed, so the media must not
+   * round again — two radii on one edge is the visible double-round (user
+   * ruling 2026-08-15). Unframed variants (`article`) have nothing clipping
+   * them, so their media keeps its radius. The ROW is untouched: it does not
+   * clip, so ContentRow's thumb rounds as before. */
+  const mediaRadius = !framed
+
+  /* `control` — the in-frame control slot (user ruling 2026-08-15). One node,
+   * placed in the media frame's corner by `.kol-frame-control` (kol-theme).
+   * The CARD owns WHERE, the consumer owns WHAT: CopyButton, IconFrame with an
+   * href, a select indicator — the card knows none of them by name. This is
+   * what MediaCard hardcodes as a download link plus a select checkbox, and
+   * the reason its media library could not migrate onto ContentCard. */
+  const controlNode = control ? <div className="kol-frame-control">{control}</div> : null
+
+  const body =
+    box.layout === 'stack' ? (
+      <>
+        <div className="relative">
+          <ContentMedia ratio={r} radius={mediaRadius}>{media}</ContentMedia>
+          {controlNode}
+        </div>
+        {textNode}
+      </>
+    ) : box.layout === 'fill-card' ? (
+      <>
+        <div className="flex-1 min-w-0 relative overflow-hidden">
+          <ContentMedia ratio={null} radius={mediaRadius}>{media}</ContentMedia>
+          {controlNode}
+        </div>
+        {textNode}
+      </>
+    ) : (
+      /* canvas — media fills the frame, plate floats on top */
+      <>
+        <div className="absolute" style={{ inset: 0 }}>
+          <ContentMedia ratio={null} radius={mediaRadius}>{media}</ContentMedia>
+          {controlNode}
+        </div>
+        {textNode}
+      </>
+    )
+
+  return (
+    <article
+      onClick={onClick}
+      className={`flex flex-col ${framed ? 'overflow-hidden rounded-[var(--kol-radius-sm)]' : ''} ${box.border ? 'border' : ''} ${box.layout === 'canvas' ? 'relative' : ''} ${onClick ? 'cursor-pointer select-none' : ''} ${className}`.trim()}
+      style={{
+        borderColor: box.border ? (selected ? 'var(--kol-fg-64)' : box.border) : undefined,
+        background: box.bg ?? undefined,
+        aspectRatio: box.layout !== 'stack' ? r : undefined,
+      }}
+    >
+      {body}
+    </article>
+  )
+}

package/src/molecules/ContentItem.jsx

@@ -0,0 +1,14 @@
+import ContentCard from './ContentCard.jsx'
+import ContentRow from './ContentRow.jsx'
+
+/**
+ * ContentItem — the form switch the estate hand-wrote nine times
+ * (`layout === 'list' ? row : card`). One prop picks the form; everything
+ * else passes through to ContentCard / ContentRow unchanged, so a listing
+ * under a LIST/GRID toggle is one component with one prop flipped.
+ *
+ * @param {string} form  'card' | 'row'
+ */
+export default function ContentItem({ form = 'card', ...rest }) {
+  return form === 'row' ? <ContentRow {...rest} /> : <ContentCard {...rest} />
+}

package/src/molecules/ContentMedia.jsx

@@ -0,0 +1,35 @@
+import AssetPlaceholder from '../utilities/AssetPlaceholder.jsx'
+
+/**
+ * ContentMedia — the media slot of the content-card system.
+ *
+ * Ratio is the only knob (`fit` was cut 2026-08-15 — a card image covers,
+ * full stop). No children → AssetPlaceholder at the same ratio, so a card
+ * with no media is visibly flagged, never collapsed.
+ *
+ * `ratio` is a FREE prop (06-content-card-system.md §4 — the A4 question is
+ * open; nothing hardcodes a ratio). The ruled per-variant defaults live in
+ * ContentCard/ContentRow, not here.
+ *
+ * `radius` (2026-08-15 user ruling): OFF when the host frame already clips its
+ * own corners. A card that clips and a media slot that rounds are two radii on
+ * one edge — the visible double-round. ContentCard turns it off for its framed
+ * variants; the ROW keeps it, because a row does not clip.
+ *
+ * @param {string}    ratio     CSS aspect-ratio, e.g. '1 / 1', '16 / 9', '1 / 1.41421'
+ * @param {boolean}   radius    round the media's own corners (default true)
+ * @param {ReactNode} children  the real media; rendered object-cover
+ */
+export default function ContentMedia({ ratio = '1 / 1', radius = true, children, className = '' }) {
+  if (children == null) {
+    return <AssetPlaceholder radius={radius} aspectRatio={ratio ?? undefined} className={ratio == null ? `h-full ${className}` : className} />
+  }
+  return (
+    <div
+      className={`relative w-full overflow-hidden ${radius ? 'rounded-[var(--kol-radius-sm)]' : ''} [&>img]:h-full [&>img]:w-full [&>img]:object-cover [&>video]:h-full [&>video]:w-full [&>video]:object-cover ${ratio == null ? 'h-full' : ''} ${className}`.trim()}
+      style={ratio != null ? { aspectRatio: ratio } : undefined}
+    >
+      {children}
+    </div>
+  )
+}

package/src/molecules/ContentRow.jsx

@@ -0,0 +1,71 @@
+import ContentMedia from './ContentMedia.jsx'
+import ContentText from './ContentText.jsx'
+
+/**
+ * ContentRow — the row form of the content-card system: leading thumb (where
+ * the variant has one) beside the ruled text. Box values — thumb size, gap,
+ * padding, frame — default per variant to the RULED structures from the live
+ * review (06-content-card-system.md §2 boxes): default is a bare table-like
+ * line with a 48px thumb; catalog/print are framed between-headers with no
+ * thumb; article rides a 120px 16:9 thumb; work a framed 64px row; typeface a
+ * framed no-thumb block.
+ *
+ * @param {string}    variant   default | catalog | print | article | work | typeface
+ * @param {ReactNode} media     thumb content (omit → placeholder)
+ * @param {number}    thumb     thumb edge px — overrides the ruled default; 0 hides
+ * @param {string}    ratio     thumb aspect-ratio — overrides the ruled default
+ * @param {number}    paddingY  vertical padding px — overrides the ruled default
+ * @param {boolean}   selected
+ * @param {Function}  onClick
+ * text slots + *Class seams forwarded to ContentText.
+ */
+
+/* ruled row boxes per variant (the §2 review) — paddings/gaps spell the
+ * --kol-spacing-* tokens (2=8 · 3=12 · 4=16 · 6=24), never a literal */
+const S2 = 'var(--kol-spacing-2)', S3 = 'var(--kol-spacing-3)', S4 = 'var(--kol-spacing-4)', S6 = 'var(--kol-spacing-6)'
+const BOX = {
+  default:  { thumb: 48,  ratio: '1 / 1',  pad: `${S2} 0`,     gap: S3, align: 'items-center', divider: true },
+  catalog:  { thumb: 0,   ratio: '1 / 1',  pad: `${S2} ${S3}`, gap: S3, frame: 'var(--kol-fg-04)', bg: 'var(--kol-surface-secondary)', minH: 36, align: 'items-center' },
+  print:    { thumb: 0,   ratio: '1 / 1',  pad: `${S2} ${S3}`, gap: S3, frame: 'var(--kol-fg-04)', bg: 'var(--kol-surface-secondary)', minH: 36, align: 'items-center' },
+  article:  { thumb: 120, ratio: '16 / 9', pad: '0',           gap: S6, align: 'items-start' },
+  work:     { thumb: 64,  ratio: '1 / 1',  pad: S4,            gap: S4, frame: 'var(--kol-fg-08)', bg: 'var(--kol-surface-secondary)', minH: 96, align: 'items-stretch' },
+  typeface: { thumb: 0,   ratio: '1 / 1',  pad: S6,            gap: S6, frame: 'var(--kol-fg-08)', bg: 'var(--kol-surface-primary)', align: 'items-start' },
+}
+
+export default function ContentRow({
+  variant = 'default',
+  media,
+  thumb,
+  ratio,
+  paddingY,
+  actions,
+  selected = false,
+  onClick,
+  className = '',
+  ...text
+}) {
+  const box = BOX[variant] ?? BOX.default
+  const thumbPx = thumb ?? box.thumb
+  return (
+    <div
+      onClick={onClick}
+      className={`flex ${box.align} ${box.divider ? 'border-b border-fg-08' : ''} ${box.frame ? 'rounded-[var(--kol-radius-sm)] border' : ''} ${onClick ? 'cursor-pointer select-none' : ''} ${className}`.trim()}
+      style={{
+        gap: box.gap,
+        padding: paddingY != null ? `${paddingY}px 0` : box.pad,
+        minHeight: box.minH,
+        borderColor: box.frame || undefined,
+        background: selected ? 'var(--kol-fg-04)' : box.bg,
+      }}
+    >
+      {thumbPx > 0 && (
+        <div className="shrink-0" style={{ width: thumbPx }}>
+          <ContentMedia ratio={ratio ?? box.ratio}>{media}</ContentMedia>
+        </div>
+      )}
+      <ContentText variant={variant} form="row" className="flex-1" {...text} />
+      {/* trailing edge, never in the text flow — MediaRow's placement */}
+      {actions && <div className="shrink-0">{actions}</div>}
+    </div>
+  )
+}

package/src/molecules/ContentText.jsx

@@ -0,0 +1,138 @@
+/**
+ * ContentText — the ruled text block of the content-card system.
+ *
+ * Renders the per-variant / per-form type ramp ruled 2026-08-15
+ * (docs/documentation/03-components/06-content-card-system.md §3). The laws:
+ * title is the ONLY slot that steps between card and row (size only, one
+ * family); body and meta are identical in both forms; helper-* only where a
+ * single line is guaranteed; ink is three roles (emphasis · body · meta).
+ *
+ * Every type class is a SEAM: pass `<slot>Class` to replace the ruled
+ * class+ink string whole (consumers on their own faces swap here). Passing
+ * nothing renders the ruled values.
+ *
+ * @param {string} variant   default | catalog | print | article | work | typeface
+ * @param {string} form      card | row
+ * @param {ReactNode} title
+ * @param {ReactNode} body       article · work · typeface
+ * @param {ReactNode} kicker     article only
+ * @param {ReactNode} detail     catalog · print
+ * @param {ReactNode} date       default · article · typeface
+ * @param {ReactNode} size       default · article (file size / read length)
+ * @param {ReactNode} meta       work only
+ * @param {number}    gap        inner line gap in px (defaults per variant/form)
+ * @param {string}    titleClass … kickerClass, bodyClass, detailClass,
+ *                    dateClass, sizeClass, metaClass — full class overrides
+ */
+
+/* [variant][form][slot] → 'type-class ink-role', verbatim from the ruled table */
+const RAMP = {
+  default: {
+    card: { title: 'kol-helper-12 text-emphasis truncate', date: 'kol-helper-12 text-meta', size: 'kol-helper-12 text-body' },
+    row:  { title: 'kol-helper-12 text-emphasis truncate', date: 'kol-helper-12 text-meta', size: 'kol-helper-12 text-body' },
+  },
+  catalog: {
+    card: { title: 'kol-mono-14 text-emphasis', detail: 'kol-mono-10 text-meta' },
+    row:  { title: 'kol-mono-12 text-emphasis', detail: 'kol-mono-10 text-meta' },
+  },
+  print: {
+    card: { title: 'kol-mono-14 text-body', detail: 'kol-mono-10 text-meta' },
+    row:  { title: 'kol-mono-10 text-body', detail: 'kol-mono-10 text-meta' },
+  },
+  article: {
+    card: { kicker: 'kol-helper-12 text-body', title: 'kol-sans-heading-03 text-emphasis', body: 'kol-mono-14 text-body', date: 'kol-helper-12 text-meta', size: 'kol-helper-12 text-body' },
+    row:  { kicker: 'kol-helper-12 text-body', title: 'kol-sans-heading-05 text-emphasis', body: 'kol-mono-14 text-body', date: 'kol-helper-12 text-meta', size: 'kol-helper-12 text-body' },
+  },
+  work: {
+    card: { title: 'kol-sans-display-02 text-emphasis', body: 'kol-mono-14 text-body', meta: 'kol-mono-12 text-body' },
+    row:  { title: 'kol-sans-display-03 text-emphasis', body: 'kol-mono-14 text-body', meta: 'kol-mono-12 text-body' },
+  },
+  typeface: {
+    card: { title: 'kol-mono-20 text-emphasis', body: 'kol-mono-14 text-body', date: 'kol-mono-12 text-body' },
+    row:  { title: 'kol-mono-14 text-emphasis', body: 'kol-mono-14 text-body', date: 'kol-mono-12 text-body' },
+  },
+}
+
+/* render order per variant/form. Strings are slots; arrays are ONE line:
+ * ['group', …] = 16px baseline group · ['between', …] = header.between ·
+ * ['line', …] = one flex line, first slot flex-1 truncating, rest fixed.
+ * Directions are the RULED structures (06-content-card-system.md §2 boxes):
+ * default row is a single table-like line, catalog/print rows are between-
+ * headers. work row: line 2 stays the big line and carries the TITLE (fields
+ * were crossed in the shipped WorkListItem — ruled, do not re-derive). */
+const ORDER = {
+  default:  { card: ['title', ['group', 'date', 'size']], row: [['line', 'title', 'date', 'size']] },
+  catalog:  { card: ['title', 'detail'], row: [['between', 'title', 'detail']] },
+  print:    { card: ['title', 'detail'], row: [['between', 'title', 'detail']] },
+  article:  { card: ['kicker', 'title', 'body', ['group', 'date', 'size']], row: ['kicker', 'title', 'body', ['group', 'date', 'size']] },
+  work:     { card: ['title', 'body', 'meta'], row: ['body', 'title', 'meta'] },
+  typeface: { card: ['title', 'body', 'date'], row: [['between', 'title', 'date'], 'body'] },
+}
+
+/* inner line gap per variant/form, read from the shipped boxes — spelled in
+ * --kol-spacing-* tokens where the value sits on the scale (10px is the
+ * shipped article-row literal; the scale has no rung there) */
+const GAPS = {
+  default: { card: 'var(--kol-spacing-3)', row: 'var(--kol-spacing-3)' },
+  catalog: { card: 'var(--kol-spacing-2)', row: 'var(--kol-spacing-2)' },
+  print: { card: 'var(--kol-spacing-2)', row: 'var(--kol-spacing-2)' },
+  article: { card: 'var(--kol-spacing-3)', row: '10px' },
+  work: { card: 'var(--kol-spacing-2)', row: 'var(--kol-spacing-3)' },
+  typeface: { card: 'var(--kol-spacing-2)', row: 'var(--kol-spacing-6)' },
+}
+
+export default function ContentText({
+  variant = 'default',
+  form = 'card',
+  title, body, kicker, detail, date, size, meta,
+  gap,
+  titleClass, bodyClass, kickerClass, detailClass, dateClass, sizeClass, metaClass,
+  className = '',
+}) {
+  const ramp = RAMP[variant]?.[form] ?? RAMP.default[form] ?? RAMP.default.card
+  const order = ORDER[variant]?.[form] ?? ORDER.default.card
+  const values = { title, body, kicker, detail, date, size, meta }
+  const overrides = { title: titleClass, body: bodyClass, kicker: kickerClass, detail: detailClass, date: dateClass, size: sizeClass, meta: metaClass }
+
+  const line = (slot) =>
+    values[slot] == null ? null : (
+      <div key={slot} className={overrides[slot] ?? ramp[slot] ?? ''}>{values[slot]}</div>
+    )
+
+  const nodes = order.map((entry, i) => {
+    if (typeof entry === 'string') return line(entry)
+    const [kind, ...slots] = entry
+    const parts = slots.map(line).filter(Boolean)
+    if (!parts.length) return null
+    if (kind === 'line') {
+      /* ruled (default row): title flex-1 truncate · date w-24 · size w-20,
+       * trailing fields right-aligned fixed columns so rows align in a list */
+      const W = [null, 96, 80]
+      return (
+        <div key={`line-${i}`} className="flex items-baseline min-w-0" style={{ gap: '12px' }}>
+          {parts.map((p, j) => (j === 0
+            ? <div key={j} className="flex-1 min-w-0 truncate">{p}</div>
+            : <div key={j} className="shrink-0 text-right" style={{ width: W[j] ?? undefined }}>{p}</div>))}
+        </div>
+      )
+    }
+    return (
+      <div
+        key={`${kind}-${i}`}
+        className={`flex items-baseline ${kind === 'between' ? 'justify-between' : ''}`}
+        style={{ gap: 'var(--kol-spacing-4)' }}
+      >
+        {parts}
+      </div>
+    )
+  })
+
+  return (
+    <div
+      className={`flex min-w-0 flex-col ${className}`.trim()}
+      style={{ gap: typeof gap === 'number' ? `${gap}px` : gap ?? GAPS[variant]?.[form] ?? 'var(--kol-spacing-2)' }}
+    >
+      {nodes}
+    </div>
+  )
+}

package/src/molecules/CopyButton.jsx

@@ -0,0 +1,40 @@
+import ActionButton from '../atoms/ActionButton.jsx'
+
+/**
+ * CopyButton — THE copy-to-clipboard control (2026-08-09 user ruling): the
+ * 32×32 icon button — `copy` glyph flipping to `check` for 2s on copied,
+ * no text label. This is the button CodeBlock carried privately since the
+ * 2026-07-28 elder replication, promoted to the one shared atom; the old
+ * Copy/Copied label chip (one-off SVGs outside the icon set) is retired.
+ * Chrome comes from .kol-copy-btn (kol-theme); parents add their own
+ * positioning class (e.g. .kol-frame-control).
+ *
+ * The flip itself moved to ActionButton (2026-08-15) — it was the only
+ * confirm-feedback in the system and it was welded to the clipboard, so no
+ * other in-frame control could acknowledge a click. This is now clipboard
+ * behaviour plus that component; the public API is unchanged, and the swap
+ * gained an animation it never had.
+ *
+ * Props:
+ *   text      — string (or () => string) written to the clipboard
+ *   className — extra classes (positioning etc.)
+ */
+export default function CopyButton({ text, className = '', ...props }) {
+  return (
+    <ActionButton
+      icon="copy"
+      confirmIcon="check"
+      label="Copy to clipboard"
+      confirmLabel="Copied"
+      className={className}
+      onAction={async () => {
+        try {
+          await navigator.clipboard.writeText(typeof text === 'function' ? text() : String(text ?? ''))
+        } catch {
+          /* clipboard blocked — silent */
+        }
+      }}
+      {...props}
+    />
+  )
+}

package/src/molecules/EmptyState.jsx

@@ -5,14 +5,22 @@
  * the placeholder name). All lines render as authored — no auto casing
  * (the source's `uppercase` on the eyebrow was dropped per KOL rules).
  *
- * @param {string} eyebrow  kicker line above the title
- * @param {string} title    headline
- * @param {string} body     optional supporting line
- * @param {string} footer   optional note above a top hairline
+ * `gated` (GatedEmptyState, kol-fxr 2026-08-15) opts this instance into the
+ * app-wide placeholder switch — see usePlaceholders(). It is OPT-IN, not the
+ * default, on purpose: the ruling that placeholder prose defaults to hidden is
+ * the filing app's, and flipping it here would silently blank every surface
+ * already shipping an EmptyState. A consumer that wants the gate asks for it.
+ *
+ * @param {string}  eyebrow  kicker line above the title
+ * @param {string}  title    headline
+ * @param {string}  body     optional supporting line
+ * @param {string}  footer   optional note above a top hairline
+ * @param {boolean} gated    hide unless placeholders are switched on (default false)
+ * @param {string}  className extra classes on the wrapper
  */
-export default function EmptyState({ eyebrow, title, body, footer }) {
+export default function EmptyState({ eyebrow, title, body, footer, gated = false, className = '' }) {
   return (
-    <div>
+    <div className={`${gated ? 'kol-placeholder' : ''}${className ? ` ${className}` : ''}` || undefined}>
       {/* helper (line-height 1) is single-line chrome ONLY — title and footer
         * can wrap, so they ride the line-height-bearing kol-mono-* scale
         * (the type-conform fault line; user, 2026-08-09). Eyebrow stays

package/src/molecules/MediaCard.jsx

@@ -69,7 +69,7 @@ export default function MediaCard({
         {thumb}
         {selectMode ? (
           <span
-            className="absolute top-3 left-3 rounded p-1"
+            className="kol-frame-control kol-frame-control--top-left rounded p-1"
             style={{ background: 'var(--kol-fg-absolute-12, rgba(0,0,0,0.4))', backdropFilter: 'blur(4px)' }}
           >
             <SelectIndicator on={selected} />
@@ -79,7 +79,7 @@ export default function MediaCard({
             href={downloadHref}
             aria-label="Download"
             title="Download"
-            className="absolute top-3 right-3 inline-flex items-center justify-center w-8 h-8 rounded text-emphasis hover:bg-fg-absolute-24 transition-colors"
+            className="kol-frame-control inline-flex items-center justify-center w-8 h-8 rounded text-emphasis hover:bg-fg-absolute-24 transition-colors"
             style={{ background: 'var(--kol-fg-absolute-12, rgba(0,0,0,0.4))', backdropFilter: 'blur(4px)' }}
             onClick={(e) => e.stopPropagation()}
           >

package/src/molecules/Section.jsx

@@ -3,10 +3,21 @@
  *
  * A small-caps label above a vertical content stack. Used across the editor
  * inspector panels (palette / pattern / type modes): `<Section label="Aspect">…</Section>`.
+ *
+ * `divided` (InspectorSectionRhythm, 2026-08-15) adds the between-siblings
+ * hairline every rail consumer was retyping locally — the rule lives on the
+ * ADJACENT pair (`.kol-section--divided + .kol-section--divided`) in
+ * kol-components-molecules.css, so the first section in a stack never carries
+ * a stray top border. Set it on every section in the stack; a rail that mixes
+ * divided and plain sections divides only between the divided ones.
+ *
+ * ponytail: a `SectionStack` parent could own this instead of each child
+ * declaring it — that is the upgrade path if a consumer ever needs the stack
+ * to vary the rule per-gap. One prop is a smaller API than a new component.
  */
-export default function Section({ label, children, className = '' }) {
+export default function Section({ label, children, divided = false, className = '' }) {
   return (
-    <div className={`flex flex-col gap-2 ${className}`}>
+    <div className={`flex flex-col gap-2${divided ? ' kol-section--divided' : ''} ${className}`}>
       {label && (
         <p className="kol-helper-10 tracking-widest text-meta">{label}</p>
       )}

package/src/organisms/ContentCollection.jsx

@@ -0,0 +1,56 @@
+import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
+
+/**
+ * ContentCollection — the container half of the content-card system: the
+ * grid/list switch plus the motion that belongs to it. Animation lives in
+ * the wrapper — the only place it can (06-content-card-system.md §6);
+ * cards never animate themselves.
+ *
+ * Children are ContentItem / ContentCard / ContentRow (or anything). The
+ * collection owns the enter stagger, keyed to `form` so the switch re-runs
+ * it. Uses the house curve (--kol-ease-house).
+ *
+ * ponytail: form switch re-mounts with a stagger, no FLIP — add FLIP
+ * (measure → invert → play) when a consumer needs card↔row to tween.
+ *
+ * @param {string}  form     'grid' | 'list'
+ * @param {string}  min      grid track minimum (CSS length), grid form only
+ * @param {number}  gap      px between items
+ * @param {boolean} stagger  enter animation on/off (reduced motion wins)
+ */
+export default function ContentCollection({
+  form = 'grid',
+  min = '12rem',
+  gap = 16,
+  stagger = true,
+  children,
+  className = '',
+}) {
+  const reduced = usePrefersReducedMotion()
+  const animate = stagger && !reduced
+  const items = Array.isArray(children) ? children.flat() : [children]
+
+  return (
+    <ul
+      key={form}
+      className={`m-0 list-none p-0 ${className}`.trim()}
+      style={
+        form === 'grid'
+          ? { display: 'grid', gridTemplateColumns: `repeat(auto-fill, minmax(${min}, 1fr))`, gap: `${gap}px` }
+          : { display: 'flex', flexDirection: 'column', gap: `${gap}px` }
+      }
+    >
+      {items.map((child, i) =>
+        child == null ? null : (
+          <li
+            key={child.key ?? i}
+            className={animate ? 'kol-collection-item' : undefined}
+            style={animate ? { animationDelay: `${i * 40}ms` } : undefined}
+          >
+            {child}
+          </li>
+        ),
+      )}
+    </ul>
+  )
+}

package/src/organisms/ContentFilters.jsx

@@ -24,6 +24,21 @@ import IconFrame from '../atoms/IconFrame.jsx'
  * @param {Array} props.mutuallyExclusiveFilters — filter keys that should be mutually exclusive
  * @param {Array} props.customFilterKeys — filter keys handled by renderItem, not by ContentFilters
  * @param {ElementType} props.iconComponent — icon seam (defaults to DS Icon; needs `filter` + `search`)
+ *
+ * Look seams — all default to the shipped values, pass nothing and nothing changes:
+ * @param {string}  props.titleClassName      — header title type/ink
+ * @param {boolean} props.titleUppercase      — cases the title (default false)
+ * @param {string}  props.labelClassName      — filter-group label type/ink
+ * @param {boolean} props.labelUppercase      — cases the group label (default true)
+ * @param {string}  props.tagVariant          — filter chip variant ('primary' grey fill)
+ * @param {string}  props.tagSize             — filter chip size
+ * @param {string}  props.tagActiveClassName  — chip ink, selected
+ * @param {string}  props.tagRestClassName    — chip ink, unselected
+ * @param {string}  props.viewClassName       — RECENT/SAVED strip type
+ * @param {string}  props.layoutClassName     — LIST/GRID strip type
+ * @param {string}  props.stripActiveClassName — strip ink, selected (both strips)
+ * @param {string}  props.stripRestClassName  — strip ink, unselected (both strips)
+ * @param {string}  props.countClassName      — the "N of N" type/ink
  */
 const ContentFilters = ({
   items,
@@ -46,6 +61,22 @@ const ContentFilters = ({
   showCountOnlyWhenFiltering = false,
   iconComponent,
   className = '',
+  /* THE LOOK SEAMS. Every one defaults to what the component shipped, so
+   * passing nothing renders exactly as before — these exist because the
+   * hardcoded values were the wrong call for every consumer but one. */
+  titleClassName = 'kol-helper-14',
+  titleUppercase = false,
+  labelClassName = 'kol-helper-12 text-fg-96',
+  labelUppercase = true,
+  tagVariant = 'primary',
+  tagSize = 'sm',
+  tagActiveClassName = 'text-fg-96',
+  tagRestClassName = 'text-fg-48',
+  viewClassName = 'kol-helper-14',
+  layoutClassName = 'kol-helper-12',
+  stripActiveClassName = 'text-fg-96',
+  stripRestClassName = 'text-fg-32 hover:text-fg-48',
+  countClassName = 'kol-helper-12 text-fg-64',
 }) => {
   /* Icon seam — consumers on a local icon shelf pass their own component
    * rather than being forced onto the DS set. Needs `filter` + `search`. */
@@ -119,13 +150,18 @@ const ContentFilters = ({
     })
   }, [items, activeFilters, customFilterKeys, searchText, searchKeys])
 
+  const showCount = !showCountOnlyWhenFiltering || isExpanded || searchOpen || activeFilters.size > 0
+
   /* THE FILTER VALUE IS A TAG — the atom's whole reason to exist ("a Tag with
    * no handler is a Pill wearing the wrong name"). Three defects lived here
    * until 2026-08-15, all of them working around the atom instead of using it:
    *
    *   variant="default"  — not a declared variant; `VARIANTS[v] ?? primary`
-   *                        silently rendered the FILLED chip. The outlined
-   *                        chip these want is `secondary`.
+   *                        silently rendered the FILLED chip — which is what
+   *                        the chip should be. `primary` is now declared, not
+   *                        fallen through to. (An outlined `secondary` shipped
+   *                        2026-08-15 and was ruled wrong the same day: the
+   *                        grey filled chip is the look.)
    *   className border-* — hand-rolled active state beside the atom's own
    *                        `active` prop, which is what drives `.is-active`.
    *   <div onClick>      — the handler on a wrapper, so Tag rendered a <span>
@@ -147,19 +183,19 @@ const ContentFilters = ({
         * never what anyone looked at. No inline letter-spacing: the helper ramp
         * carries its own, and the override the fork added was not in the
         * rendered path either. */}
-      <h4 className="kol-helper-12 text-fg-96" style={{ textTransform: 'uppercase' }}>
+      <h4 className={labelClassName} style={labelUppercase ? { textTransform: 'uppercase' } : undefined}>
         {group.label}
       </h4>
       <div className="flex flex-wrap gap-4">
         {group.values.map((value) => (
           <Tag
             key={value}
-            size="sm"
-            variant="secondary"
+            size={tagSize}
+            variant={tagVariant}
             hash={false}
             active={activeFilters.has(`${group.key}:${value}`)}
             onClick={() => toggleFilter(group.key, value)}
-            className={activeFilters.has(`${group.key}:${value}`) ? 'text-fg-96' : 'text-fg-48'}
+            className={activeFilters.has(`${group.key}:${value}`) ? tagActiveClassName : tagRestClassName}
           >
             {value}
           </Tag>
@@ -181,7 +217,7 @@ const ContentFilters = ({
             * states"); the span here was the same defect that promoted it. */}
           <h2 className="flex items-center gap-2">
             {titleIcon && <IconFrame name={titleIcon} variant="secondary" size="md" />}
-            <span className="kol-helper-16">{title}</span>
+            <span className={titleClassName} style={titleUppercase ? { textTransform: 'uppercase' } : undefined}>{title}</span>
           </h2>
           <Divider variant="vertical" className="self-stretch py-1" />
           <div className="flex items-center gap-1">
@@ -250,11 +286,6 @@ const ContentFilters = ({
         </div>
 
         <div className="flex items-center gap-8">
-          {(!showCountOnlyWhenFiltering || isExpanded || searchOpen || activeFilters.size > 0) && (
-            <span className="kol-helper-14 text-fg-64">
-              {filteredItems.length} of {totalCount}
-            </span>
-          )}
           {/* RECENT / SAVED is the SAME STRIP as LIST / GRID, not a ViewToggle.
             * Read off kol-monitor's original (_tmp/2026-08-15-shell-adoption/
             * ContentFilters.jsx:225-232): inline spans, `kol-helper-14`,
@@ -270,7 +301,7 @@ const ContentFilters = ({
                 <span
                   key={opt.value}
                   onClick={() => handleViewModeChange(opt.value)}
-                  className={`kol-helper-14 cursor-pointer select-none ${viewMode === opt.value ? 'text-fg-96' : 'text-fg-32 hover:text-fg-48'}`}
+                  className={`${viewClassName} cursor-pointer select-none ${viewMode === opt.value ? stripActiveClassName : stripRestClassName}`}
                   style={{ textTransform: 'uppercase', letterSpacing: 1 }}
                 >
                   {opt.label}
@@ -292,7 +323,7 @@ const ContentFilters = ({
         * the values hang beneath it. The strip previously rendered in its own
         * row AFTER this block, which is why expanding a filter group pushed it
         * down the page — the defect that started the whole ticket. */}
-      {(layoutOptions || isExpanded) && (
+      {(layoutOptions || isExpanded || showCount) && (
         <div className="flex items-start justify-between gap-16 pb-4">
           <div className="flex items-start gap-16">
             {isExpanded && filterGroups.map((group) => renderFilterGroup(group))}
@@ -307,20 +338,31 @@ const ContentFilters = ({
               </button>
             )}
           </div>
-          {layoutOptions && (
-            <div className="flex items-center gap-4 flex-shrink-0">
-              {layoutOptions.map((opt) => (
-                <span
-                  key={opt.value}
-                  onClick={() => setLayout(opt.value)}
-                  className={`kol-helper-12 cursor-pointer select-none ${layout === opt.value ? 'text-fg-96' : 'text-fg-32 hover:text-fg-48'}`}
-                  style={{ letterSpacing: 1 }}
-                >
-                  {opt.label}
-                </span>
-              ))}
-            </div>
-          )}
+          {/* The count rides the LAYOUT row, not the header (user ruling
+            * 2026-08-15) — same `kol-helper-12` + 1px tracking as LIST/GRID
+            * beside it. Ink stays `text-fg-64`: it is static information, not
+            * a toggle, so it takes neither the 96 active nor the 32 rest. */}
+          <div className="flex items-center gap-4 flex-shrink-0">
+            {showCount && (
+              <span className={countClassName} style={{ letterSpacing: 1 }}>
+                {filteredItems.length} of {totalCount}
+              </span>
+            )}
+            {layoutOptions && (
+              <div className="flex items-center gap-4">
+                {layoutOptions.map((opt) => (
+                  <span
+                    key={opt.value}
+                    onClick={() => setLayout(opt.value)}
+                    className={`${layoutClassName} cursor-pointer select-none ${layout === opt.value ? stripActiveClassName : stripRestClassName}`}
+                    style={{ letterSpacing: 1 }}
+                  >
+                    {opt.label}
+                  </span>
+                ))}
+              </div>
+            )}
+          </div>
         </div>
       )}
 

package/src/utilities/AssetPlaceholder.jsx

@@ -6,17 +6,22 @@
  * are visibly flagged rather than showing the browser's broken-image icon.
  */
 
+/* `radius` (2026-08-15 user ruling): a placeholder inside a host that already
+ * CLIPS its own corners rounds twice — the visible double-round on the card
+ * form. The host turns it off; it stays on everywhere else, so nothing that
+ * renders a bare placeholder changes. */
 export default function AssetPlaceholder({
   category,
   name,
   aspectRatio = '16 / 9',
   note = 'MISSING',
+  radius = true,
   className = '',
 }) {
   const label = [category, name].filter(Boolean).join(' · ')
   return (
     <div
-      className={`kol-asset-placeholder flex flex-col items-center justify-center gap-[6px] w-full p-6 border border-dashed border-[var(--kol-fg-24)] rounded-[var(--kol-radius-sm)] bg-[var(--kol-fg-02)] text-fg-48 font-mono text-center box-border ${className}`.trim()}
+      className={`kol-asset-placeholder flex flex-col items-center justify-center gap-[6px] w-full p-6 border border-dashed border-[var(--kol-fg-24)] ${radius ? 'rounded-[var(--kol-radius-sm)]' : ''} bg-[var(--kol-fg-02)] text-fg-48 font-mono text-center box-border ${className}`.trim()}
       style={{ aspectRatio }}
       role="img"
       aria-label={`${label || 'asset'} — ${note}`}

package/src/atoms/CopyButton.jsx

@@ -1,42 +0,0 @@
-import { useState } from 'react'
-import { Icon } from '@kolkrabbi/kol-icons'
-
-/**
- * CopyButton — THE copy-to-clipboard control (2026-08-09 user ruling): the
- * 32×32 icon button — `copy` glyph flipping to `check` for 2s on copied,
- * no text label. This is the button CodeBlock carried privately since the
- * 2026-07-28 elder replication, promoted to the one shared atom; the old
- * Copy/Copied label chip (one-off SVGs outside the icon set) is retired.
- * Chrome comes from .kol-copy-btn (kol-theme); parents add their own
- * positioning class (e.g. CodeBlock's .kol-codeblock-copy).
- *
- * Props:
- *   text      — string (or () => string) written to the clipboard
- *   className — extra classes (positioning etc.)
- */
-export default function CopyButton({ text, className = '', ...props }) {
-  const [copied, setCopied] = useState(false)
-
-  const onCopy = async () => {
-    try {
-      await navigator.clipboard.writeText(typeof text === 'function' ? text() : String(text ?? ''))
-      setCopied(true)
-      setTimeout(() => setCopied(false), 2000)
-    } catch {
-      /* clipboard blocked — silent */
-    }
-  }
-
-  return (
-    <button
-      type="button"
-      className={`kol-copy-btn ${className}`.trim()}
-      onClick={onCopy}
-      aria-label={copied ? 'Copied' : 'Copy to clipboard'}
-      title={copied ? 'Copied' : 'Copy'}
-      {...props}
-    >
-      <Icon name={copied ? 'check' : 'copy'} size={16} />
-    </button>
-  )
-}