@kolkrabbi/kol-component 0.24.0 → 0.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.24.0",
+  "version": "0.26.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/Popover.jsx

@@ -68,8 +68,11 @@ export function usePopover({
     middleware.push(
       sizeMw({
         apply({ rects, elements }) {
+          /* EXACT width, not a floor (2026-08-09) — "one piece means one
+           * width": with minWidth alone, a wide row let the panel outgrow the
+           * trigger it claims to continue. Sole consumer is Dropdown. */
           Object.assign(elements.floating.style, {
-            minWidth: `${rects.reference.width}px`,
+            width: `${rects.reference.width}px`,
           })
         },
       })

package/src/hooks/glyphLadders.js

@@ -29,6 +29,16 @@ export const SOLO = { sm: 16, md: 20, lg: 24 }
 /** Icon beside a label, inside the rung's line box. */
 export const ADJACENT = { sm: 14, md: 16, lg: 18 }
 
+/**
+ * Indicator glyph — a caret/chevron that DECORATES a control rather than
+ * naming it (a dropdown caret, a sort arrow). Pairs 1:1 with the control's
+ * mono text rung, one step under ADJACENT: an indicator never outweighs the
+ * label it points at. Promoted 2026-08-09 — Table's sort chevron and
+ * Dropdown's caret each hand-typed their number (Dropdown took the ADJACENT
+ * rung, the oversize the user called): two transcriptions, the folklore
+ * threshold. */
+export const INDICATOR = { sm: 12, md: 14, lg: 16 }
+
 /**
  * Resolve a glyph size. `solo` picks the ladder; `size` indexes it.
  * Falls back to the md rung so an unknown size never yields undefined.
@@ -37,3 +47,8 @@ export function glyphSize(size, solo = false) {
   const ladder = solo ? SOLO : ADJACENT
   return ladder[size] ?? ladder.md
 }
+
+/** Resolve an indicator size. Separate helper — `solo` never applies. */
+export function indicatorSize(size) {
+  return INDICATOR[size] ?? INDICATOR.md
+}

package/src/index.js

@@ -71,6 +71,7 @@ export { default as ColorInputRow } from './molecules/ColorInputRow.jsx'
 export { default as ColorRamp } from './molecules/ColorRamp.jsx'
 export { default as ColorSwatch } from './molecules/ColorSwatch.jsx'
 export { default as Dropdown } from './molecules/Dropdown.jsx'
+export { default as FieldRow, StatusChip } from './molecules/FieldRow.jsx'
 export { default as FramedMediaBand } from './molecules/FramedMediaBand.jsx'
 export { default as Image } from './molecules/Image.jsx'
 export { default as MediaCard } from './molecules/MediaCard.jsx'
@@ -113,6 +114,7 @@ export { default as MediaLibrary, MediaLibraryProvider, useMediaLibrary, MediaPi
 export { default as MediaTileGallery } from './organisms/MediaTileGallery.jsx'
 export { default as MediaViewer } from './organisms/MediaViewer.jsx'
 export { default as NewsletterBand } from './organisms/NewsletterBand.jsx'
+export { default as RecordManager } from './organisms/RecordManager.jsx'
 export { default as SpectrumGrid } from './organisms/SpectrumGrid.jsx'
 export { default as Table } from './organisms/Table.jsx'
 
@@ -129,7 +131,7 @@ export { GRAPHIC_RAW } from './graphics/graphicData.js'
  * took `20`, and neither could reference the rule it was meant to follow.
  * Cross-package imports go through the `@kolkrabbi/*` specifier (ARCHITECTURE
  * §3), so an export is the only way another package can obey the ladder. */
-export { SOLO, ADJACENT, glyphSize } from './hooks/glyphLadders.js'
+export { SOLO, ADJACENT, INDICATOR, glyphSize, indicatorSize } from './hooks/glyphLadders.js'
 
 // hooks
 export { default as usePrefersReducedMotion } from './hooks/usePrefersReducedMotion.js'

package/src/molecules/Dropdown.jsx

@@ -1,7 +1,8 @@
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
 import { MenuDropdownItem } from './MenuItem.jsx'
 import { PopoverPanel, usePopover } from '../atoms/Popover.jsx'
+import { indicatorSize } from '../hooks/glyphLadders.js'
 
 /**
  * Dropdown — trigger IS button chrome (2026-07-08 chrome law).
@@ -28,7 +29,10 @@ import { PopoverPanel, usePopover } from '../atoms/Popover.jsx'
  */
 
 const SIZE_TYPE = { sm: 'kol-mono-12', md: 'kol-mono-14', lg: 'kol-mono-16' }
-const ICON_SIZE = { sm: 14, md: 16, lg: 18 }
+/* 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
+ * beside it (2026-08-09 user call). */
 
 const LEGACY_VARIANTS = { default: 'primary', subtle: 'primary', minimal: 'outline' }
 
@@ -42,7 +46,6 @@ const Dropdown = ({
   className = ''
 }) => {
   const [isOpen, setIsOpen] = useState(defaultOpen)
-  const [dropdownWidth, setDropdownWidth] = useState('100px')
 
   // sm everywhere unless explicitly overridden (see docblock size law).
   const resolvedSize = size || 'sm'
@@ -63,23 +66,11 @@ const Dropdown = ({
     role: 'listbox',
   })
 
-  // Width management — 100px mobile, 140px tablet, 180px desktop
-  useEffect(() => {
-    const updateWidth = () => {
-      if (typeof window === 'undefined') return
-
-      if (window.innerWidth >= 1024) {
-        setDropdownWidth('180px')
-      } else if (window.innerWidth >= 768) {
-        setDropdownWidth('140px')
-      } else {
-        setDropdownWidth('100px')
-      }
-    }
-    updateWidth()
-    window.addEventListener('resize', updateWidth)
-    return () => window.removeEventListener('resize', updateWidth)
-  }, [])
+  /* Width belongs to the CALL SITE (2026-08-09 user call — "width without any
+   * regard to context"). The viewport-keyed resize listener that handed every
+   * dropdown a fixed width by window size is gone: default is hug-content,
+   * and the consumer sizes it through className exactly as on Input. The open
+   * panel follows the trigger via matchReferenceWidth either way. */
 
   const handleSelect = (option) => {
     onChange?.(option.value)
@@ -100,15 +91,7 @@ const Dropdown = ({
   ].filter(Boolean).join(' ')
 
   return (
-    <div
-      className={`relative block ${className}`}
-      style={{
-        ...(dropdownWidth && !className.includes('w-full') && {
-          width: dropdownWidth,
-          minWidth: dropdownWidth
-        })
-      }}
-    >
+    <div className={`relative inline-block align-middle ${className}`}>
       <button
         ref={popover.refs.setReference}
         {...popover.getReferenceProps()}
@@ -118,10 +101,20 @@ const Dropdown = ({
         aria-expanded={isOpen}
         data-state={isOpen ? 'open' : 'closed'}
       >
-        <span>{currentOption?.label}</span>
+        {/* every option's label rides along hidden so the trigger is as wide
+          * as its widest value — the panel matches the trigger's width, so
+          * trigger and list stay one piece at every selection */}
+        <span className="kol-dd-label">
+          <span>{currentOption?.label}</span>
+          {options.map((option) => (
+            <span key={option.value} className="kol-dd-ghost" aria-hidden="true">
+              {option.label}
+            </span>
+          ))}
+        </span>
         {/* chrome lives in .kol-dd-caret (trailing edge + open-state flip) —
           * keyed off the trigger's data-state, no inline styles */}
-        <Icon name="chevron-down" size={ICON_SIZE[resolvedSize]} className="kol-dd-caret" />
+        <Icon name="chevron-down" size={indicatorSize(resolvedSize)} className="kol-dd-caret" />
       </button>
 
       <PopoverPanel

package/src/molecules/FieldRow.jsx

@@ -0,0 +1,145 @@
+import { useState } from 'react'
+import Input from '../atoms/Input'
+import Tag from '../atoms/Tag'
+import Button from '../atoms/Button'
+import { usePopover, PopoverPanel } from '../atoms/Popover'
+import Dropdown from './Dropdown'
+
+/**
+ * FieldRow — one labeled field row in a record surface (lobby: RecordManager).
+ * Label column left, control right; `type` picks the control:
+ *
+ *   text   → Input, with an optional hint line under it (the slug's derived URL)
+ *   status → StatusChip — interactive Tag opening a listbox in place
+ *   select → Dropdown
+ *   media  → thumbnail + hover-reveal remove ×; empty state offers onPick
+ *   file   → filename as a removable Tag (chip taxonomy: interactive → Tag);
+ *            empty state offers onPick
+ *
+ * All labels, option strings and values are authored at the call site — this
+ * component bakes no copy and transforms no casing. Media/file `value` is
+ * whatever object the consumer's picker returns; FieldRow reads only
+ * `.thumb`/`.url` for the image and `.name` for the token, and hands the whole
+ * object back through onChange untouched.
+ */
+
+/* StatusChip — the interactive status control ("Live ▾" in the reference).
+ * Chip taxonomy (Tag source, 2026-07-30): interactive → Tag, never Pill. The
+ * menu is usePopover/PopoverPanel — the same primitive Dropdown builds on —
+ * with click handled by the Tag itself (click: false here) so the chip stays
+ * the only trigger. Shared by FieldRow and RecordManager's status column. */
+export function StatusChip({ value, options = [], onChange, size = 'sm' }) {
+  const [open, setOpen] = useState(false)
+  const popover = usePopover({
+    open,
+    onOpenChange: setOpen,
+    placement: 'bottom-start',
+    click: false,
+    role: 'listbox',
+  })
+  return (
+    <>
+      <span ref={popover.refs.setReference} {...popover.getReferenceProps()} className="inline-flex">
+        <Tag variant="primary" size={size} hash={false} active={open} onClick={() => setOpen((o) => !o)}>
+          {value}
+        </Tag>
+      </span>
+      <PopoverPanel popover={popover}>
+        <ul className="flex flex-col p-1 m-0 list-none">
+          {options.map((opt) => {
+            const label = typeof opt === 'object' ? opt.label : opt
+            const val = typeof opt === 'object' ? opt.value : opt
+            return (
+              <li key={val}>
+                <button
+                  type="button"
+                  role="option"
+                  aria-selected={val === value}
+                  className={`kol-helper-12 w-full text-left px-3 py-2 bg-transparent border-0 cursor-pointer rounded-sm hover:bg-fg-08 ${val === value ? 'text-emphasis' : 'text-body'}`}
+                  onClick={() => {
+                    onChange?.(val)
+                    setOpen(false)
+                  }}
+                >
+                  {label}
+                </button>
+              </li>
+            )
+          })}
+        </ul>
+      </PopoverPanel>
+    </>
+  )
+}
+
+/* Media/file thumbnail — same small fixed-aspect rounded treatment as
+ * MediaRow's thumb cell. */
+const THUMB_CLS = 'h-10 w-14 rounded object-cover bg-fg-04'
+
+export default function FieldRow({
+  label,
+  type = 'text',
+  value,
+  onChange,
+  options = [],
+  hint,
+  onPick,
+  placeholder,
+  disabled = false,
+}) {
+  const empty = onPick ? (
+    <Button variant="nav" size="sm" iconOnly="plus" iconSize={12} onClick={onPick} aria-label={label} disabled={disabled} />
+  ) : (
+    <span className="kol-helper-10 text-meta">—</span>
+  )
+
+  let control = null
+  if (type === 'text') {
+    control = (
+      <Input
+        value={value ?? ''}
+        onChange={(e) => onChange?.(e?.target ? e.target.value : e)}
+        placeholder={placeholder}
+        disabled={disabled}
+        className="w-full"
+      />
+    )
+  } else if (type === 'status') {
+    control = <StatusChip value={value} options={options} onChange={onChange} />
+  } else if (type === 'select') {
+    control = <Dropdown options={options} value={value} onChange={onChange} />
+  } else if (type === 'media') {
+    control = value ? (
+      <span className="group relative inline-flex">
+        <img src={value.thumb ?? value.url} alt={value.name ?? ''} className={THUMB_CLS} />
+        {onChange && (
+          <Button
+            variant="nav"
+            size="sm"
+            iconOnly="x"
+            iconSize={10}
+            aria-label={label}
+            className="absolute -top-2 -right-2 opacity-0 group-hover:opacity-100 focus-visible:opacity-100"
+            onClick={() => onChange(null)}
+          />
+        )}
+      </span>
+    ) : empty
+  } else if (type === 'file') {
+    control = value ? (
+      <Tag variant="secondary" size="sm" hash={false} onRemove={onChange ? () => onChange(null) : undefined}>
+        {value.name ?? value}
+      </Tag>
+    ) : empty
+  }
+
+  return (
+    <div className="grid grid-cols-[minmax(0,10rem)_minmax(0,1fr)] items-center gap-x-6 py-3 border-b border-fg-08">
+      <div className="kol-mono-12 text-body">{label}</div>
+      <div className="min-w-0">{control}</div>
+      {hint != null && (
+        <div className="col-start-2 kol-helper-10 text-meta pt-1 truncate">{hint}</div>
+      )}
+    </div>
+  )
+}

package/src/organisms/RecordManager.jsx

@@ -0,0 +1,334 @@
+import { useMemo, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { Icon } from '@kolkrabbi/kol-icons'
+import Button from '../atoms/Button'
+import SearchInput from '../atoms/SearchInput'
+import ToggleCheckbox from '../atoms/ToggleCheckbox'
+import ShellDrawer from '../molecules/ShellDrawer'
+import Dropdown from '../molecules/Dropdown'
+import FieldRow, { StatusChip } from '../molecules/FieldRow'
+import Table from './Table'
+import MediaLibrary from './MediaLibrary'
+
+/**
+ * RecordManager — full-screen CMS record surface (lobby: RecordManager,
+ * reference: Framer CMS). A reorderable record table plus a slide-over detail
+ * panel of FieldRows.
+ *
+ * Composes existing DS only: Table (with rowClassName), ShellDrawer as the
+ * slide-over, FieldRow/StatusChip for the panel, MediaLibrary variant="modal"
+ * as the media picker (client INJECTED via `mediaClient`, never imported —
+ * ARCHITECTURE §3), ToggleCheckbox for row selection, SearchInput/Button for
+ * the toolbar.
+ *
+ * Columns use Table's contract (accessor/header/render/sortable…), plus an
+ * optional `type` this organism resolves before handing them down:
+ *   'title'  → truncating cell + hover-reveal open affordance (opens the panel)
+ *   'status' → StatusChip; column carries `options` + `onStatusChange(row, v)`
+ *   'select' → Dropdown;   column carries `options` + `onSelectChange(row, v)`
+ *   'thumb'  → small fixed-aspect thumbnail (row[accessor] = {thumb|url, name})
+ *
+ * Reorder is a ~50-line pointer sort (the brief's call: util before any
+ * dependency): pointerdown on the ⠿ handle, row rects measured once, live
+ * over-index on pointermove, onReorder(from, to) on release. The floating
+ * "Reorder row N" label rides the existing .kol-tooltip chrome. Handles render
+ * only when onReorder is passed.
+ *
+ * Fields follow FieldRow's contract: {key, label, type, options?, accept?,
+ * placeholder?, hint? (value or fn(record))}. The open record's values come
+ * from `value` (falling back to the row object); edits bubble through
+ * onChange(key, next) — data is consumer-owned, this surface never fetches.
+ */
+export default function RecordManager({
+  columns = [],
+  rows = [],
+  onReorder,
+  onSelectRow,
+  fields = [],
+  value,
+  onChange,
+  onAdd,
+  onSortToggle,
+  onFilterToggle,
+  query,
+  onQueryChange,
+  searchPlaceholder,
+  onSelectionChange,
+  saveState,
+  onPublish,
+  publishLabel = 'Publish',
+  onPreview,
+  onOverflow,
+  mediaClient,
+  reorderLabel = (n) => `Reorder row ${n}`,
+  className = '',
+}) {
+  const wrapRef = useRef(null)
+  const dragRef = useRef(null)
+  const [drag, setDrag] = useState(null) // { from, over, x, y } during a drag
+  const [active, setActive] = useState(null)
+  const [picker, setPicker] = useState(null) // the field being picked for
+  const [selected, setSelected] = useState(() => new Set())
+
+  const rowId = (row, i) => row.id ?? i
+
+  const openRecord = (row) => {
+    setActive(row)
+    onSelectRow?.(row)
+  }
+
+  const updateSelection = (next) => {
+    setSelected(next)
+    onSelectionChange?.([...next])
+  }
+
+  /* ── pointer sort ─────────────────────────────────────────────────────── */
+  const startDrag = (e, from) => {
+    if (!onReorder) return
+    e.preventDefault()
+    const rowEls = wrapRef.current?.querySelectorAll('.kol-table-row')
+    if (!rowEls?.length) return
+    const rects = [...rowEls].map((el) => el.getBoundingClientRect())
+    const move = (ev) => {
+      const hit = rects.findIndex((r) => ev.clientY < r.bottom)
+      const over = hit === -1 ? rects.length - 1 : hit
+      dragRef.current = { from, over, x: ev.clientX, y: ev.clientY }
+      setDrag(dragRef.current)
+    }
+    const up = () => {
+      window.removeEventListener('pointermove', move)
+      window.removeEventListener('pointerup', up)
+      document.body.style.cursor = ''
+      document.body.style.userSelect = ''
+      const d = dragRef.current
+      dragRef.current = null
+      setDrag(null)
+      if (d && d.over !== d.from) onReorder(d.from, d.over)
+    }
+    window.addEventListener('pointermove', move)
+    window.addEventListener('pointerup', up)
+    document.body.style.cursor = 'grabbing'
+    document.body.style.userSelect = 'none'
+    dragRef.current = { from, over: from, x: e.clientX, y: e.clientY }
+    setDrag(dragRef.current)
+  }
+
+  /* ── columns: resolve types, prepend handle + checkbox ────────────────── */
+  const builtColumns = useMemo(() => {
+    const resolved = columns.map((col) => {
+      if (col.type === 'title') {
+        return {
+          ...col,
+          render: (row) => (
+            <span className="inline-flex items-center gap-2 min-w-0 max-w-full">
+              <span className="truncate text-emphasis">{col.render ? col.render(row) : row[col.accessor]}</span>
+              <Button
+                variant="nav"
+                size="sm"
+                iconOnly="maximize"
+                iconSize={12}
+                aria-label={typeof col.header === 'string' ? col.header : 'Open'}
+                className="shrink-0 opacity-0 group-hover:opacity-100 focus-visible:opacity-100"
+                onClick={() => openRecord(row)}
+              />
+            </span>
+          ),
+        }
+      }
+      if (col.type === 'status') {
+        return {
+          ...col,
+          render: (row) => (
+            <StatusChip
+              value={row[col.accessor]}
+              options={col.options ?? []}
+              onChange={(next) => col.onStatusChange?.(row, next)}
+            />
+          ),
+        }
+      }
+      if (col.type === 'select') {
+        return {
+          ...col,
+          render: (row) => (
+            <Dropdown
+              options={col.options ?? []}
+              value={row[col.accessor]}
+              onChange={(next) => col.onSelectChange?.(row, next)}
+            />
+          ),
+        }
+      }
+      if (col.type === 'thumb') {
+        return {
+          ...col,
+          render: (row) => {
+            const media = row[col.accessor]
+            return media ? (
+              <img src={media.thumb ?? media.url} alt={media.name ?? ''} className="h-10 w-14 rounded object-cover bg-fg-04" />
+            ) : (
+              <span className="kol-helper-10 text-meta">—</span>
+            )
+          },
+        }
+      }
+      return col
+    })
+
+    const prefix = []
+    if (onReorder) {
+      prefix.push({
+        accessor: '__handle',
+        header: '',
+        className: 'kol-table-cell-text w-8',
+        render: (row) => {
+          const i = rows.indexOf(row)
+          return (
+            <button
+              type="button"
+              aria-label={reorderLabel(i + 1)}
+              className="cursor-grab touch-none bg-transparent border-0 p-0 text-meta hover:text-emphasis opacity-0 group-hover:opacity-100 focus-visible:opacity-100"
+              onPointerDown={(e) => startDrag(e, i)}
+            >
+              <Icon name="resize-grip" size={14} />
+            </button>
+          )
+        },
+      })
+    }
+    prefix.push({
+      accessor: '__select',
+      header: (
+        <ToggleCheckbox
+          checked={rows.length > 0 && selected.size === rows.length}
+          onChange={() =>
+            updateSelection(selected.size === rows.length ? new Set() : new Set(rows.map(rowId)))
+          }
+        />
+      ),
+      className: 'kol-table-cell-text w-8',
+      render: (row) => {
+        const id = rowId(row, rows.indexOf(row))
+        return (
+          <ToggleCheckbox
+            checked={selected.has(id)}
+            onChange={() => {
+              const next = new Set(selected)
+              next.has(id) ? next.delete(id) : next.add(id)
+              updateSelection(next)
+            }}
+          />
+        )
+      },
+    })
+    return [...prefix, ...resolved]
+  }, [columns, rows, selected, onReorder, drag]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const record = value ?? active
+  const hasToolbar = onAdd || onSortToggle || onFilterToggle || onQueryChange
+
+  return (
+    <div ref={wrapRef} className={`flex flex-col min-w-0 ${className}`}>
+      {hasToolbar && (
+        <div className="flex items-center gap-1 pb-3">
+          {onAdd && <Button variant="nav" size="md" iconOnly="plus" iconSize={14} onClick={onAdd} aria-label="Add" />}
+          {onSortToggle && <Button variant="nav" size="md" iconOnly="swap" iconSize={14} onClick={onSortToggle} aria-label="Sort" />}
+          {onFilterToggle && <Button variant="nav" size="md" iconOnly="filter" iconSize={14} onClick={onFilterToggle} aria-label="Filter" />}
+          {onQueryChange && (
+            <SearchInput
+              value={query ?? ''}
+              onChange={(e) => onQueryChange(e?.target ? e.target.value : e)}
+              placeholder={searchPlaceholder}
+              size="sm"
+              className="ml-2"
+            />
+          )}
+        </div>
+      )}
+
+      <Table
+        columns={builtColumns}
+        rows={rows}
+        width="column"
+        rowClassName={(row, i) =>
+          `group${drag && i === drag.from ? ' opacity-40' : ''}${
+            drag && i === drag.over && drag.over !== drag.from ? ' bg-fg-04' : ''
+          }`
+        }
+      />
+
+      {/* floating reorder label — the existing .kol-tooltip chrome, ridden
+        * imperatively (hover machinery doesn't fit a drag) */}
+      {drag &&
+        createPortal(
+          <div className="kol-tooltip fixed" style={{ left: drag.x + 12, top: drag.y + 12 }}>
+            {reorderLabel(drag.from + 1)}
+          </div>,
+          document.body,
+        )}
+
+      {/* detail panel — ShellDrawer owns the slide-over chrome AND the close ×;
+        * this header carries only the record actions (reference: … ▶ save-state
+        * Publish). aria-label defaults follow ShellDrawer's own precedent. */}
+      <ShellDrawer
+        open={!!active}
+        onClose={() => setActive(null)}
+        side="right"
+        width="min(37.5rem, 92vw)"
+        header={
+          <div className="flex items-center gap-2 min-w-0">
+            {onOverflow && (
+              <Button variant="nav" size="md" iconOnly="more" iconSize={14} onClick={() => onOverflow(record)} aria-label="More" />
+            )}
+            {onPreview && (
+              <Button variant="nav" size="md" iconOnly="play" iconSize={14} onClick={() => onPreview(record)} aria-label="Preview" />
+            )}
+            {saveState != null && <span className="kol-helper-10 text-meta ml-auto truncate">{saveState}</span>}
+            {onPublish && (
+              <Button variant="primary" size="sm" className={saveState == null ? 'ml-auto' : ''} onClick={() => onPublish(record)}>
+                {publishLabel}
+              </Button>
+            )}
+          </div>
+        }
+      >
+        {record && (
+          <div className="flex flex-col">
+            {fields.map((f) => (
+              <FieldRow
+                key={f.key}
+                label={f.label}
+                type={f.type}
+                options={f.options}
+                placeholder={f.placeholder}
+                hint={typeof f.hint === 'function' ? f.hint(record) : f.hint}
+                value={record[f.key]}
+                onChange={(next) => onChange?.(f.key, next)}
+                onPick={
+                  (f.type === 'media' || f.type === 'file') && mediaClient ? () => setPicker(f) : undefined
+                }
+                disabled={f.disabled}
+              />
+            ))}
+          </div>
+        )}
+      </ShellDrawer>
+
+      {/* media picker — the EXISTING MediaLibrary organism, modal variant;
+        * client injected, never imported (§3). accept comes from the field. */}
+      {picker && mediaClient && (
+        <MediaLibrary
+          variant="modal"
+          open
+          client={mediaClient}
+          accept={picker.accept ?? 'all'}
+          onClose={() => setPicker(null)}
+          onSelect={(asset) => {
+            onChange?.(picker.key, asset)
+            setPicker(null)
+          }}
+        />
+      )}
+    </div>
+  )
+}

package/src/organisms/Table.jsx

@@ -1,5 +1,6 @@
 import { useMemo, useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
+import { INDICATOR } from '../hooks/glyphLadders.js'
 
 /**
  * Table — data table.
@@ -32,7 +33,7 @@ const WIDTHS = {
   column: '',
 }
 
-const Table = ({ caption, columns, rows, variant = 'default', className = '', width = 'panel' }) => {
+const Table = ({ caption, columns, rows, variant = 'default', className = '', width = 'panel', rowClassName }) => {
   const [sort, setSort] = useState({ key: null, dir: null })
 
   const cycle = (key) =>
@@ -79,7 +80,7 @@ const Table = ({ caption, columns, rows, variant = 'default', className = '', wi
                   {column.header}
                   <Icon
                     name={sort.key === column.accessor && sort.dir === 'desc' ? 'chevron-down' : 'chevron-up'}
-                    size={12}
+                    size={INDICATOR.sm}
                     className={sort.key === column.accessor ? 'opacity-100' : 'opacity-0 group-hover:opacity-40'}
                   />
                 </button>
@@ -92,7 +93,7 @@ const Table = ({ caption, columns, rows, variant = 'default', className = '', wi
       </thead>
       <tbody>
         {sorted.map((row, rowIndex) => (
-          <tr key={row.id ?? row.token ?? rowIndex} className="kol-table-row">
+          <tr key={row.id ?? row.token ?? rowIndex} className={`kol-table-row${rowClassName ? ` ${rowClassName(row, rowIndex)}` : ''}`}>
             {columns.map((column) => (
               <td key={column.accessor} className={(typeof column.className === 'function' ? column.className(row) : column.className) ?? 'kol-table-cell-text'} style={column.style}>
                 {column.render ? column.render(row) : row[column.accessor] ?? '—'}