@kolkrabbi/kol-component 0.2.0 → 0.4.0

package/src/molecules/ColorInputRow.jsx

@@ -0,0 +1,179 @@
+import { useState } from 'react'
+import { Icon } from '@kolkrabbi/kol-loader'
+import ColorSwatch from './ColorSwatch'
+import Input from '../atoms/Input'
+import LabeledControl from '../atoms/LabeledControl'
+import { usePopover, PopoverPanel } from '../atoms/Popover'
+
+const HEX6 = /^[0-9A-F]{6}$/
+
+/** '#f0a' / 'F0A' / '#ff00aa' → 'FF00AA'; anything unparseable → null. */
+function normalizeDigits(raw) {
+  if (typeof raw !== 'string') return null
+  let d = raw.replace(/^#/, '').trim().toUpperCase()
+  if (/^[0-9A-F]{3}$/.test(d)) d = d.replace(/./g, (c) => c + c)
+  return HEX6.test(d) ? d : null
+}
+
+/**
+ * ColorInputRow — swatch chip + `#` hex input row. The single merged form of
+ * the brand editor's ColorField (layer color assignment: palette-ref popover
+ * behind the swatch) and SwatchRow (palette-slot editing: trailing extras) —
+ * one core, optional trailing affordances instead of two overlapping
+ * molecules.
+ *
+ * The input keeps a local draft while typing and commits on blur/Enter:
+ * digits are filtered to hex as typed, shorthand `F0A` expands to `FF00AA`,
+ * and only a valid 6-digit hex fires `onChange('#RRGGBB')` — invalid drafts
+ * revert to the current value. Picking a palette-ref swatch fires the ref's
+ * (pre-resolved) hex and closes the popover.
+ *
+ * Composition only — no color math, no store coupling. Palette entries come
+ * in pre-resolved via `paletteRefs`; the app-side `resolveColor`/PALETTE_REFS
+ * and `tokenNameFor` seams stay in the consumer. SwatchRow's `edited` prop
+ * was dead in the source render and is dropped ([dead-prop] handled);
+ * `transparentTone` is an explicit prop, not inferred from the label string.
+ *
+ * @param {string|null} value           current color, '#RRGGBB' (3-digit accepted, normalized); null → transparent "None" swatch
+ * @param {Function}    onChange        (hex: string) => void — normalized '#RRGGBB' on commit or palette pick
+ * @param {string}      label           optional label; when set the row wraps in LabeledControl
+ * @param {Array}       paletteRefs     [{ id, label, value }] pre-resolved entries → swatch becomes a popover trigger with a ref grid (omit for a plain preview chip)
+ * @param {Function}    onRemove        () => void — renders a trailing remove (×) button
+ * @param {ReactNode}   trailing        extra trailing affordances (lock toggle, token name, …)
+ * @param {number}      swatchSize      chip size in px (default 24)
+ * @param {string}      transparentTone TransparentX stroke tone for the null-value swatch: 'warning' (default) | 'error' | 'info' | 'success'
+ * @param {string}      inputVariant    Input chrome: 'filled' (default) | 'ghost' | 'outline'
+ * @param {boolean}     disabled        dims the row, blocks pointer, aria-disabled
+ */
+export default function ColorInputRow({
+  value,
+  onChange,
+  label,
+  paletteRefs,
+  onRemove,
+  trailing,
+  swatchSize = 24,
+  transparentTone = 'warning',
+  inputVariant = 'filled',
+  disabled = false,
+  className = '',
+}) {
+  const digits = normalizeDigits(value)
+  const hasRefs = Array.isArray(paletteRefs) && paletteRefs.length > 0
+
+  /* Local typing draft, re-synced whenever the controlled value changes
+   * (render-time reset — no effect, no flicker). */
+  const [draft, setDraft] = useState(digits ?? '')
+  const [prevValue, setPrevValue] = useState(value)
+  if (value !== prevValue) {
+    setPrevValue(value)
+    setDraft(normalizeDigits(value) ?? '')
+  }
+
+  const [open, setOpen] = useState(false)
+  const popover = usePopover({ open, onOpenChange: setOpen, placement: 'bottom-start', offset: 4 })
+
+  const commit = () => {
+    const next = normalizeDigits(draft)
+    if (next == null) {
+      setDraft(digits ?? '') // invalid or empty → revert, never emit
+      return
+    }
+    setDraft(next)
+    if (next !== digits) onChange?.('#' + next)
+  }
+
+  const pick = (ref) => {
+    onChange?.('#' + (normalizeDigits(ref.value) ?? ''))
+    setOpen(false)
+  }
+
+  /* Swatch subtitle for the trigger's aria-label: the matching ref's label
+   * when the value is a palette color, else the hex, else 'None'. */
+  const refLabel = hasRefs
+    ? paletteRefs.find((r) => normalizeDigits(r.value) === digits)?.label
+    : undefined
+  const subtitle = digits == null ? 'None' : (refLabel ?? '#' + digits)
+
+  const swatch = (
+    <ColorSwatch
+      hex={digits ? '#' + digits : null}
+      size={hasRefs ? 'stretch' : swatchSize}
+      showTransparent={digits == null}
+      transparentTone={transparentTone}
+      hoverable={false}
+    />
+  )
+
+  const row = (
+    <div
+      className={`flex items-center gap-2 ${disabled ? 'opacity-30 pointer-events-none' : ''} ${className}`}
+      aria-disabled={disabled || undefined}
+    >
+      {hasRefs ? (
+        <button
+          type="button"
+          ref={popover.refs.setReference}
+          {...popover.getReferenceProps()}
+          aria-label={`${label ?? 'Color'}: ${subtitle}`}
+          className="inline-flex items-center shrink-0"
+          style={{ width: swatchSize, height: swatchSize }}
+        >
+          {swatch}
+        </button>
+      ) : (
+        swatch
+      )}
+      <Input
+        variant={inputVariant}
+        size="sm"
+        prefix="#"
+        chars={6}
+        maxLength={6}
+        uppercase
+        value={draft}
+        onChange={(e) => setDraft(e.target.value.replace(/[^0-9a-fA-F]/g, '').toUpperCase().slice(0, 6))}
+        onBlur={commit}
+        onKeyDown={(e) => { if (e.key === 'Enter') commit() }}
+        disabled={disabled}
+        aria-label={label ? `${label} hex` : 'Hex color'}
+      />
+      {trailing}
+      {onRemove && (
+        <button
+          type="button"
+          onClick={onRemove}
+          aria-label="Remove"
+          title="Remove"
+          className="inline-flex items-center justify-center w-6 h-6 shrink-0 rounded text-meta hover:text-emphasis hover:bg-fg-08 transition-colors"
+        >
+          <Icon name="x" size={12} />
+        </button>
+      )}
+      {hasRefs && (
+        <PopoverPanel
+          popover={popover}
+          panel={false}
+          focus={false}
+          className="bg-surface-secondary border border-fg-08 rounded p-2 shadow-lg"
+          style={{ minWidth: 200 }}
+        >
+          <div className="grid grid-cols-6 gap-1">
+            {paletteRefs.map((ref) => (
+              <ColorSwatch
+                key={ref.id}
+                hex={'#' + (normalizeDigits(ref.value) ?? '')}
+                size="fill"
+                selected={normalizeDigits(ref.value) === digits && digits != null}
+                title={ref.label}
+                onClick={() => pick(ref)}
+              />
+            ))}
+          </div>
+        </PopoverPanel>
+      )}
+    </div>
+  )
+
+  return label ? <LabeledControl label={label}>{row}</LabeledControl> : row
+}

package/src/molecules/ColorRamp.jsx

@@ -0,0 +1,114 @@
+import { useEffect, useState } from 'react'
+import ColorSwatch from './ColorSwatch.jsx'
+import { resolveCssVar, isLight } from '../hooks/cssVar.js'
+
+/**
+ * ColorRamp — one specimen row of color chips for a token-doc page. A label
+ * (+ optional note) above a run of ColorSwatch chips, each captioned with its
+ * name and resolved value. Merges the former Ramp (static hex) + ColorRamp
+ * (live CSS var) widgets into one component with two mutually-exclusive inputs:
+ *
+ *   live  — `vars` (custom-property names) or the `ramp` + `stops` sugar. Each
+ *           chip resolves `--{token}` on mount via resolveCssVar and prints the
+ *           declared value; the swatch fill reads the same var() live, so the
+ *           theme file stays the single source of truth.
+ *   static — `colors` (literal color strings). No resolution; the literal is
+ *            both the fill and the printed value. This is the old Ramp mode.
+ *
+ * Precedence: colors > vars > ramp/stops. The local Chip/Swatch dups the two
+ * source files carried are gone — every chip is a DS ColorSwatch. The anchor
+ * marker is a dot whose fill flips black/white through isLight so it reads on
+ * any stop.
+ *
+ * Presentational — resolves once on mount; no theme subscription.
+ *
+ * @param {string}   label   row heading (defaults to `ramp`); omit in vars/colors mode to hide
+ * @param {string}   ramp    ramp key sugar → each chip resolves `--{ramp}-{stop}`
+ * @param {number[]} stops   stop list for the `ramp` sugar (default 100–500)
+ * @param {Array<string|[string,string]>} vars    live custom-property names (bare, or [name, token])
+ * @param {Array<string|[string,string]>} colors  static literal colors (bare, or [name, color])
+ * @param {string|number} anchor  chip that gets the anchor dot + ★ — matches a stop, name, or index
+ * @param {string}   note    right-aligned italic caption
+ */
+
+/** Flatten any of the three inputs into a uniform chip list. */
+function buildChips({ ramp, stops, vars, colors }) {
+  if (colors) {
+    return colors.map((c, i) => {
+      const [name, literal] = Array.isArray(c) ? c : [c, c]
+      return { key: `c-${i}-${literal}`, name, literal }
+    })
+  }
+  if (vars) {
+    return vars.map((v, i) => {
+      const [name, raw] = Array.isArray(v) ? v : [v.replace(/^--/, ''), v]
+      const token = raw.startsWith('--') ? raw : `--${raw}`
+      return { key: `v-${i}-${token}`, name, token }
+    })
+  }
+  return stops.map((s) => ({
+    key: `r-${ramp}-${s}`,
+    name: `${ramp}-${s}`,
+    token: `--${ramp}-${s}`,
+    stop: s,
+  }))
+}
+
+export default function ColorRamp({
+  label,
+  ramp,
+  stops = [100, 200, 300, 400, 500],
+  vars,
+  colors,
+  anchor,
+  note,
+}) {
+  const chips = buildChips({ ramp, stops, vars, colors })
+  const [values, setValues] = useState({})
+
+  useEffect(() => {
+    const next = {}
+    for (const c of chips) {
+      if (c.token) next[c.key] = resolveCssVar(c.token)
+    }
+    setValues(next)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ramp, JSON.stringify(stops), JSON.stringify(vars), JSON.stringify(colors)])
+
+  const rampLabel = label ?? ramp
+  const cols = Math.min(chips.length, 10)
+
+  return (
+    <div className="flex flex-col gap-3 py-5 border-b border-fg-08 last:border-b-0">
+      {(rampLabel || note) && (
+        <div className="flex items-baseline justify-between gap-6 flex-wrap">
+          {rampLabel && <span className="kol-helper-12 tracking-widest text-emphasis">{rampLabel}</span>}
+          {note && <span className="kol-mono-12 text-meta italic max-w-[60ch] text-right">{note}</span>}
+        </div>
+      )}
+      <div className="grid gap-2" style={{ gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` }}>
+        {chips.map((c, i) => {
+          const value = c.literal ?? values[c.key] ?? ''
+          const fill = c.literal ?? `var(${c.token})`
+          const isAnchor = anchor != null && (anchor === c.stop || anchor === c.name || anchor === i)
+          return (
+            <div key={c.key} className="flex flex-col gap-1.5">
+              <div className="relative">
+                <ColorSwatch hex={fill} size="fill" radius="sm" title={`${c.name} ${value}`} />
+                {isAnchor && value && (
+                  <span className="absolute inset-0 flex items-center justify-center" aria-hidden="true">
+                    <span className="w-2.5 h-2.5 rounded-full" style={{ background: isLight(value) ? '#000' : '#fff' }} />
+                  </span>
+                )}
+              </div>
+              <div className="flex flex-col items-start gap-0.5 leading-tight">
+                <span className="kol-helper-10 text-emphasis">{c.name}{isAnchor && ' ★'}</span>
+                <span className="kol-helper-10 text-meta">{value}</span>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/src/molecules/FramedMediaBand.jsx

@@ -0,0 +1,56 @@
+import Image from './Image'
+
+/**
+ * FramedMediaBand — full-width media breather band: a centered, aspect-locked
+ * frame (bordered surface-secondary panel, rounded) holding one object-cover
+ * image. Extracted from the foundry TypefacePage, where it sat inlined 5x
+ * verbatim between content sections. The double radius (`rounded` panel,
+ * `rounded-[4px]` image) is intentional — the image nests inside the border.
+ *
+ * Presentational — the caller passes finished `src`/`srcSet` strings; any
+ * CDN size-ladder generation stays at the call site. `media` swaps an
+ * arbitrary node into the frame in place of the Image (video, canvas); it
+ * should self-size with `w-full h-full`.
+ *
+ * @param {string}    src         image src (a finished URL, no ladder logic here)
+ * @param {string}    srcSet      responsive srcSet, precomputed by the caller
+ * @param {string}    sizes       img sizes attr
+ * @param {string}    alt         alt text, authored at the call site
+ * @param {ReactNode} media       replaces the Image inside the frame
+ * @param {ReactNode} caption     optional caption line under the frame
+ * @param {string}    aspectRatio frame aspect ratio, CSS value (e.g. '2/1')
+ * @param {string}    maxWidth    frame max-width class
+ * @param {string}    className   section-level extras (e.g. 'mt-12')
+ */
+export default function FramedMediaBand({
+  src,
+  srcSet,
+  sizes = '(max-width: 1400px) 100vw, 1400px',
+  alt = '',
+  media,
+  caption,
+  aspectRatio = '2/1',
+  maxWidth = 'max-w-[1400px]',
+  className = '',
+}) {
+  return (
+    <section className={`w-full overflow-hidden py-16 ${className}`.trim()}>
+      <div className={`${maxWidth} mx-auto`}>
+        <div style={{ aspectRatio }}>
+          <div className="w-full h-full bg-surface-secondary rounded border border-fg-08">
+            {media ?? (
+              <Image
+                src={src}
+                srcSet={srcSet}
+                sizes={sizes}
+                alt={alt}
+                className="w-full h-full object-cover rounded-[4px]"
+              />
+            )}
+          </div>
+        </div>
+        {caption && <p className="kol-mono-12 text-fg-48 mt-3">{caption}</p>}
+      </div>
+    </section>
+  )
+}

package/src/molecules/ImageBlock.jsx

@@ -0,0 +1,34 @@
+import Figure from '../atoms/Figure.jsx'
+import Image from './Image.jsx'
+
+/**
+ * ImageBlock — a captioned prose image: the DS Figure shell (optional label,
+ * aspect-locked bordered frame, optional figcaption) wrapping a cover-fit DS
+ * Image. The long-form counterpart to VideoBlock — both compose the same
+ * Figure atom, so the frame chrome lives in one place.
+ *
+ * De-Sanitized: takes a resolved `src` string (no CMS `value` object, no
+ * SanityImage URL builder). Missing `src` degrades to Image's own
+ * AssetPlaceholder rather than rendering an empty frame.
+ *
+ * Label and caption render exactly as authored — no casing transforms.
+ *
+ * @param {string} src      resolved image URL
+ * @param {string} alt      alt text
+ * @param {string} label    small mono label above the frame
+ * @param {string} caption  figcaption below the frame
+ * @param {string} aspect   CSS aspect-ratio for the frame (default '5/3')
+ * @param {string} className extra classes on the <figure>
+ */
+export default function ImageBlock({ src, alt = '', label, caption, aspect = '5/3', className = '' }) {
+  return (
+    <Figure label={label} caption={caption} aspect={aspect} className={className}>
+      <Image
+        src={src}
+        alt={alt}
+        className="object-cover"
+        style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+      />
+    </Figure>
+  )
+}

package/src/molecules/MenuPopover.jsx

@@ -10,34 +10,11 @@ import { MenuItem as MenuTrigger } from './MenuItem.jsx'
  * fixed positioning, MenuItem on floating-ui (portal, auto-flip, focus
  * management). One implementation now: MenuItem. This alias keeps existing
  * call-sites working; migrate imports to MenuItem. Removal in the next major.
+ *
+ * Compose the rows with the exported `MenuDropdownItem` / `MenuDropdownDivider`
+ * / `MenuDropdownNest` from MenuItem.jsx — this file no longer ships its own
+ * duplicate row/divider components (they were dead: never barrel-exported).
  */
 export function MenuPopover(props) {
   return <MenuTrigger {...props} />
 }
-
-/**
- * MenuItem — action row inside a MenuPopover. Renders as a button so it
- * picks up disabled state, focus, and keyboard activation. The popover
- * closes automatically when an item is clicked (via the wrapper's
- * delegate click — the data-menu-item attr marks rows for that match).
- */
-export function MenuItem({ onClick, disabled, shortcut, iconLeft, children }) {
-  return (
-    <button
-      type="button"
-      data-menu-item
-      onClick={onClick}
-      disabled={disabled}
-      role="menuitem"
-      className="w-full kol-helper-12 px-3 h-8 inline-flex items-center gap-2 text-meta hover:text-emphasis hover:bg-fg-08 disabled:opacity-40 disabled:cursor-not-allowed text-left"
-    >
-      {iconLeft && <span className="shrink-0 w-4 inline-flex items-center justify-center text-meta">{iconLeft}</span>}
-      <span className="flex-1">{children}</span>
-      {shortcut && <span className="kol-helper-10 text-subtle shrink-0">{shortcut}</span>}
-    </button>
-  )
-}
-
-export function MenuDivider() {
-  return <div className="border-t border-fg-08 my-1" />
-}

package/src/molecules/SelectionOverlay.jsx

@@ -0,0 +1,108 @@
+/* taxonomy-ok: presentational transform-chrome overlay. It nests no KOL
+ * component (pure inline-styled squares + label), so by the letter of the
+ * molecule test it reads as an atom — but the lobby spec places it as a
+ * molecule: a reusable compound bounding-box/handles primitive that pairs with
+ * the Canvas scale layer, not a base atom. Kept here per that spec. */
+
+/**
+ * SelectionOverlay — pure transform chrome for a selected box.
+ *
+ * Renders a dashed outline, 8 named resize handles, and a `W × H` dimension
+ * label, all positioned in the **same 1080-virtual coordinate space** the
+ * target lives in (pairs with Canvas's scale layer — place it as a sibling of
+ * the box inside the same scale layer). Each handle carries a
+ * `data-handle="NW|N|NE|E|SE|S|SW|W"` attribute so a parent's pointer router
+ * can start the right resize mode. No interaction logic of its own — the drag
+ * math lives in the consumer, which reads `e.target.dataset.handle`.
+ *
+ * Ported from the brand editor with the `layer` model reduced to a flat `box`
+ * (per lobby spec): renders nothing when there's no positional box.
+ *
+ * @param {{x:number,y:number,w:number,h:number}} box  virtual-coord position + size; null/x==null → renders nothing
+ * @param {boolean}  showHandles  render the 8 resize handles (default true)
+ * @param {boolean}  showLabel    render the `W × H` dimension label (default true)
+ * @param {number}   handleSize   handle square size in virtual px (default 10)
+ * @param {string}   accentColor  outline + handle + label color (default var(--kol-accent-primary))
+ * @param {Function} labelFormatter (box) => string — dimension readout (default `${round(w)} × ${round(h)}`)
+ */
+const HANDLE_DIRS = [
+  { dir: 'NW', cursor: 'nwse-resize', x: 0,    y: 0    },
+  { dir: 'N',  cursor: 'ns-resize',   x: 0.5,  y: 0    },
+  { dir: 'NE', cursor: 'nesw-resize', x: 1,    y: 0    },
+  { dir: 'E',  cursor: 'ew-resize',   x: 1,    y: 0.5  },
+  { dir: 'SE', cursor: 'nwse-resize', x: 1,    y: 1    },
+  { dir: 'S',  cursor: 'ns-resize',   x: 0.5,  y: 1    },
+  { dir: 'SW', cursor: 'nesw-resize', x: 0,    y: 1    },
+  { dir: 'W',  cursor: 'ew-resize',   x: 0,    y: 0.5  },
+]
+
+export default function SelectionOverlay({
+  box,
+  showHandles = true,
+  showLabel = true,
+  handleSize = 10,
+  accentColor = 'var(--kol-accent-primary)',
+  labelFormatter = (b) => `${Math.round(b.w)} × ${Math.round(b.h)}`,
+}) {
+  if (!box || box.x == null) return null  /* no positional box → no chrome */
+
+  const { x, y, w, h } = box
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        left: x, top: y,
+        width: w, height: h,
+        pointerEvents: 'none',
+        zIndex: 100,
+      }}
+    >
+      <div
+        style={{
+          position: 'absolute', inset: 0,
+          outline: `1px dashed ${accentColor}`,
+          outlineOffset: 0,
+        }}
+      />
+      {showHandles && HANDLE_DIRS.map(({ dir, cursor, x: hx, y: hy }) => (
+        <div
+          key={dir}
+          data-handle={dir}
+          style={{
+            position: 'absolute',
+            left:   `calc(${hx * 100}% - ${handleSize / 2}px)`,
+            top:    `calc(${hy * 100}% - ${handleSize / 2}px)`,
+            width:  handleSize,
+            height: handleSize,
+            background: 'white',
+            border: `1px solid ${accentColor}`,
+            cursor,
+            pointerEvents: 'auto',
+          }}
+        />
+      ))}
+      {showLabel && (
+        <span
+          style={{
+            position: 'absolute',
+            left: 0,
+            top: '100%',
+            marginTop: 6,
+            fontFamily: 'var(--kol-font-family-mono)',
+            fontSize: 10,
+            letterSpacing: '0.04em',
+            color: accentColor,
+            background: 'rgba(0,0,0,0.6)',
+            padding: '2px 6px',
+            borderRadius: 2,
+            whiteSpace: 'nowrap',
+            pointerEvents: 'none',
+          }}
+        >
+          {labelFormatter(box)}
+        </span>
+      )}
+    </div>
+  )
+}

package/src/molecules/ShapeDropdown.jsx

@@ -0,0 +1,92 @@
+import { useState } from 'react'
+import { Icon } from '@kolkrabbi/kol-loader'
+import Button from '../atoms/Button.jsx'
+import { PopoverPanel, usePopover } from '../atoms/Popover.jsx'
+import { MenuDropdownItem } from './MenuItem.jsx'
+
+/**
+ * ShapeDropdown — split icon-button + variant-menu molecule (the tool-palette
+ * idiom: Select · Text · [Shape ▾] · Pattern). The main button reflects the
+ * current variant and fires `onAction` with its id; the chevron half opens a
+ * menu of all variants — picking one fires `onChange` and closes.
+ *
+ * Composed from Button (both trigger halves), usePopover/PopoverPanel (menu
+ * positioning, dismiss, portal) and MenuDropdownItem (rows — same rows as the
+ * Dropdown molecule, ✓ marks the active variant).
+ *
+ * For single-value list selection with a text trigger use `Dropdown`; this is
+ * for tool bars where the trigger is itself an action.
+ *
+ * @param {Object} props
+ * @param {{id: string, label: string, icon?: string}[]} props.options - Variants: menu rows + trigger glyph. `icon` optional — the trigger falls back to the label.
+ * @param {string} props.value - Active variant id (controlled)
+ * @param {Function} props.onChange - Fires with the picked variant id (menu selection)
+ * @param {Function} props.onAction - Fires with the current variant id (main-button click)
+ * @param {string} props.className - Additional classes on the wrapper
+ */
+const ShapeDropdown = ({ options = [], value, onChange, onAction, className = '' }) => {
+  const [open, setOpen] = useState(false)
+  const popover = usePopover({
+    open,
+    onOpenChange: setOpen,
+    placement: 'bottom-start',
+    offset: 4,
+    role: 'menu',
+  })
+
+  const current = options.find((option) => option.id === value) || options[0]
+
+  const handleSelect = (option) => {
+    onChange?.(option.id)
+    setOpen(false)
+  }
+
+  return (
+    <div className={`inline-flex items-center ${className}`.trim()}>
+      {current?.icon ? (
+        <Button
+          variant="ghost"
+          size="sm"
+          quiet
+          iconOnly={current.icon}
+          aria-label={current.label}
+          title={current.label}
+          onClick={() => onAction?.(current.id)}
+        />
+      ) : (
+        <Button variant="ghost" size="sm" quiet onClick={() => onAction?.(current?.id)}>
+          {current?.label}
+        </Button>
+      )}
+      {/* Button doesn't forward refs — anchor the popover on a span wrapper,
+       * same pattern as Tooltip in atoms/Popover.jsx. Clicks on the inner
+       * button bubble to the span, where useClick toggles the menu. */}
+      <span
+        ref={popover.refs.setReference}
+        {...popover.getReferenceProps()}
+        className="inline-flex"
+      >
+        <Button variant="ghost" size="sm" quiet iconOnly="chevron-down" iconSize={10} aria-label="Variants" />
+      </span>
+      <PopoverPanel
+        popover={popover}
+        panel={false}
+        focus={false}
+        className="bg-surface-secondary border border-fg-08 rounded shadow-lg"
+      >
+        {options.map((option) => (
+          <MenuDropdownItem
+            key={option.id}
+            onClick={() => handleSelect(option)}
+            iconLeft={option.icon ? <Icon name={option.icon} size={14} /> : undefined}
+            shortcut={option.id === current?.id ? <Icon name="check" size={11} /> : undefined}
+          >
+            {option.label}
+          </MenuDropdownItem>
+        ))}
+      </PopoverPanel>
+    </div>
+  )
+}
+
+export default ShapeDropdown