@lovett/ui 0.0.10 → 0.1.0

package/src/index.ts

@@ -71,6 +71,79 @@ export {
 // @dnd-kit/core + sortable + utilities (CLAUDE.md §1 amendment in same phase).
 export { SortableList, SortableItem, DragHandle } from './sortable'
 
+// Multi-container drag — ADR-146 slice A. <SortableList> is single-container;
+// a kanban needs a card to LEAVE its column, which is a droppable per column
+// plus a DragOverlay. Keeps the KeyboardSensor, so cross-column movement is
+// reachable without a pointer.
+export {
+  MultiSortableList,
+  SortableDropZone,
+  type MultiSortableListProps,
+  type MultiSortableMove,
+  type SortableContainers,
+} from './sortable'
+
+// The board kit — ADR-146 D2/D7/D13, spec'd in
+// `docs/design-briefs/tasks-board-design-language.md` and its
+// interface-standards addendum.
+//
+// ONE board primitive, TWO consumers: the Tasks lens and the Community
+// roadmap. It is generic over its card BODY (`renderCard`), never over its
+// data — a Community card carries votes where a Tasks card carries a ledger.
+// Community's fixture-backed `components/ui/community/board.tsx` is deleted in
+// the same change.
+//
+// `hueClass()` arms the derived tint ladder (`.hue` + `.hue-<key>` in
+// styles.css), which mixes a --folder-* hue INTO --surface-card with
+// color-mix so every rung is opaque in both themes by construction. `red` is
+// excluded: --folder-red is byte-identical to --accent in light mode.
+export {
+  BOARD_HUE_KEYS,
+  hueClass,
+  hueForKey,
+  type BoardHueKey,
+} from './hue'
+export {
+  Board,
+  BoardColumn,
+  type BoardProps,
+  type BoardColumnProps,
+  type BoardColumnSpec,
+  type BoardCardContext,
+  type BoardItemLeadContext,
+} from './board'
+export {
+  TaskCard,
+  type TaskCardProps,
+  type TaskCardAvatar,
+  type TaskCardCount,
+  type TaskCardDate,
+  type TaskCardDragProps,
+  type TaskCardMedia,
+} from './task-card'
+export {
+  ProgressLedger,
+  ledgerProgress,
+  type ProgressLedgerProps,
+  type LedgerCell,
+  type LedgerProgress,
+  type LedgerSegment,
+} from './progress-ledger'
+// The status vocabulary (header-primitives §2). `StatusRing` renders a REAL
+// percent — the one `ledgerProgress()` computes, so a ring and the ledger it
+// sits beside cannot disagree; `StatusGlyph` covers the discrete states, in
+// lucide rather than the source's six hand-written inline SVGs.
+export {
+  BOARD_STATUS_KEYS,
+  STATUS_GLYPHS,
+  STATUS_LABELS,
+  StatusGlyph,
+  StatusRing,
+  type BoardStatusKey,
+  type StatusGlyphProps,
+  type StatusRingProps,
+} from './status'
+
 // EmptyState — promoted post-phase-15 (ADR-019). 4-consumer trigger:
 // Products / Personas / Competitors / Assets lenses all forked their own
 // full-area empty-state pattern. Canonical shape derived from the Phase
@@ -172,6 +245,112 @@ export {
   type EditingCell,
 } from './data-grid'
 
+// Anchored-positioning kit + dismiss-layer stack — promoted per ADR-0030
+// Decision G (meta-ads-audit-dashboard task manager: its pickers, sheets
+// and palette need one positioning routine and one Escape order). The
+// workspace app is the other consumer: DropdownMenu (137 call sites),
+// Modal (51 files) and Popover are rebuilt on these in the same change.
+// `useAnchoredPosition` measures / flips / clamps against an element ref
+// OR a virtual rect (ContextMenu's right-click point); `useOutsideClick`
+// is layer-aware; `useLayer` / `useEscapeKey` are the topmost-wins stack
+// extracted from Modal's `openPanels`. Select / Combobox / Tooltip /
+// ContextMenu build on them next; FilterDropdown / FolderTreePicker /
+// TagChipInput still carry local copies of the positioning block
+// (follow-up).
+export {
+  useAnchoredPosition,
+  computeAnchoredPosition,
+  useOutsideClick,
+  type AnchorSide,
+  type AnchorAlign,
+  type AnchorRect,
+  type AnchorSize,
+  type AnchorPlacement,
+  type AnchoredPosition,
+  type AnchoredPositionOptions,
+  type UseAnchoredPositionOptions,
+  type UseAnchoredPositionResult,
+  type OutsideClickTarget,
+  type UseOutsideClickOptions,
+} from './lib/anchor'
+export {
+  useLayer,
+  useEscapeKey,
+  type LayerKind,
+  type LayerHandle,
+  type UseLayerOptions,
+  type UseEscapeKeyOptions,
+} from './lib/layer-stack'
+
+// Popover — anchored, non-modal surface: portal to body, `.ds-enter-pop`
+// once positioned, focus into the content on open and back to the trigger
+// on close, Escape closes the topmost layer only, outside-click closes.
+// Compound: Popover + Popover.Trigger (`asChild` to wrap a <Button> or a
+// cell) + Popover.Content (`role="dialog"` or `"none"`). Promoted per
+// ADR-0030 Decision G; the workspace app's three hand-rolled popovers
+// (sidebar user menu, group-settings colour / icon pickers, calculator
+// AssumptionsPopover) are the migration targets. DropdownMenu shares its
+// surface chrome (`POPOVER_SURFACE_STYLE`) and stack, but stays a sibling
+// because a menu does not move focus into itself on open.
+export {
+  Popover,
+  POPOVER_SURFACE_STYLE,
+  type PopoverProps,
+  type PopoverTriggerProps,
+  type PopoverContentProps,
+} from './popover'
+
+// Select — single-value picker: an `.input-shell` trigger (sm / md, sits
+// flush beside <Input>) that opens a real listbox (APG select-only
+// combobox: role=combobox trigger, aria-activedescendant, role=listbox /
+// option, arrow / Home / End / Enter / Space / type-ahead, disabled
+// options, optional icon + description). Promoted per ADR-0030 Decision G
+// — the meta-ads-audit-dashboard task manager's status / priority / role
+// pickers; its Users page hand-rolled a native <select> with a comment
+// saying the package ships none. The workspace app is the second consumer
+// (26 native <select>s, products/product-form.tsx says the same). Built on
+// useAnchoredPosition + the layer stack; shares the popover surface chrome.
+// `ListboxOption` / `LISTBOX_CLASS` are the row + popup chrome Combobox
+// reuses, exported for the same reason POPOVER_SURFACE_STYLE is.
+export {
+  Select,
+  ListboxOption,
+  LISTBOX_CLASS,
+  type SelectProps,
+  type SelectOption,
+  type SelectSize,
+  type ListboxOptionProps,
+} from './select'
+
+// Combobox — text input + filtered listbox (APG editable combobox with list
+// autocomplete), single or multi-select with chips, optional grouped options
+// with headings, a per-option live `count` slot and a `renderOption` slot.
+// Async-friendly: `shouldFilter={false}` + `loading` + `onInputValueChange`;
+// it never fetches. Promoted per ADR-0030 Decision G — the task manager's
+// row / card / context-menu / palette pickers are "popover + search + live
+// counts". Second consumer is the workspace app
+// (sem-spec/location-autocomplete.tsx hand-rolls the role; TagChipInput
+// carries the chip model this generalises).
+export {
+  Combobox,
+  type ComboboxProps,
+  type ComboboxSingleProps,
+  type ComboboxMultipleProps,
+  type ComboboxOption,
+  type ComboboxGroup,
+  type ComboboxOptionState,
+  type ComboboxSize,
+} from './combobox'
+
+// Tooltip — hover (300 ms) / focus (immediate) triggered role=tooltip with
+// aria-describedby wiring, Escape-dismissable through the layer stack, never
+// focusable, pointer-events none, token-only inline surface like Kbd.
+// Promoted per ADR-0030 Decision G (task manager: truncated cells, icon-only
+// row actions, timestamps). Second consumer is the workspace app, which
+// hand-rolls two today (tools/_shared/calc/info-tip.tsx,
+// components/ui/sidebar/rail-tooltip.tsx).
+export { Tooltip, type TooltipProps, type TooltipTriggerProps } from './tooltip'
+
 // DropdownButton — Button-styled trigger + rich popover menu. Composed
 // over <DropdownMenu> primitives. First consumer: Keywords dashboard's
 // "New Keyword Plan" CTA (Set/Group picker). Reusable across other
@@ -273,6 +452,25 @@ export {
   type ShellStatTone,
 } from './shell'
 
+// Avatar / AvatarGroup — a person. Promoted in ADR-147 D14, collapsing four
+// forks (task-card's AvatarStack, community/primitives, its byte-identical
+// admin clone, and the inline one in folders/folder-row) that disagreed on
+// hash, initials cap, geometry and colour. `initials()` and
+// `avatarTintForKey()` are the one derivation each, exported so a caller that
+// needs the monogram or the hue outside an avatar does not re-derive it.
+export {
+  Avatar,
+  AvatarGroup,
+  AVATAR_TINTS,
+  asAvatarTint,
+  avatarTintForKey,
+  initials,
+  type AvatarProps,
+  type AvatarGroupProps,
+  type AvatarSize,
+  type AvatarTint,
+} from './avatar'
+
 // FolderCard — drive-style folder tile (colour-keyed swatch + name +
 // count + hover checkbox / menu slot). Promoted in ADR-035 (Assets
 // lens redesign); a card surface, so it owns the internal surface
@@ -420,3 +618,207 @@ export type {
   PreviewConfiguration,
 } from './meta-previews/types'
 export { PLACEMENT_CONFIGS } from './meta-previews/types'
+
+// Board filter model — pure TypeScript, no React. See src/filter-core/index.ts.
+export * from './filter-core'
+
+// FilterMenu + FilterChips — the UI layer over filter-core (header-primitives
+// §5). Two-step field-then-values picker with faceted counts, and the active
+// filters as removable, editable chips. The host owns FiltersState and is
+// expected to keep it in the URL, which is what makes a filtered view a
+// shareable link.
+export {
+  FilterMenu,
+  FilterChipBar,
+  type FilterMenuProps,
+  type FilterChipBarProps,
+  type FilterOptionIconRenderer,
+  type FilterFieldIconRenderer,
+} from './filter-menu'
+
+// The Display popover and its row primitives (header-primitives §4) — the
+// boundary the source never drew. Every control here is real or absent;
+// PopoverFooterActions renders no primary unless one is supplied.
+export {
+  DisplayPopover,
+  OptionRow,
+  SelectRow,
+  ToggleRow,
+  ChipToggleGroup,
+  SectionHeading,
+  PopoverFooterActions,
+  type DisplayPopoverProps,
+  type DisplayPopoverSectionProps,
+  type OptionRowProps,
+  type SelectRowProps,
+  type ToggleRowProps,
+  type ChipToggleGroupProps,
+  type ChipToggleItem,
+  type SectionHeadingProps,
+  type PopoverFooterActionsProps,
+  type PopoverFooterAction,
+} from './display-popover'
+
+// createDisplayStore — one factory for per-scope display settings, passed
+// down by CONTEXT rather than read from a module singleton (the trap
+// header-primitives §4 names: their cards subscribe to a global store, so two
+// boards with different settings cannot coexist).
+export {
+  createDisplayStore,
+  type DisplayStore,
+  type DisplayController,
+  type DisplaySettings,
+  type DisplayValue,
+  type DisplayAllowed,
+  type DisplayMigrations,
+  type DisplayProviderProps,
+} from './display-store'
+// ── ADR-146 — the analytics primitive set ─────────────────────────────
+//
+// Promoted as ONE block (ADR-146 D5). The trigger was not a missing chart:
+// it was ~26 forked stat tiles, 3 independent delta chips, and 7 hand-written
+// SVG charts sitting in `design-system/spec/shell-charts.tsx` that no product
+// lens could reach — while `--series-1..8` sat in `theme-v2.css` with zero
+// consumers. Each primitive below carries a MEASURED consumer count in its
+// own docstring — measured 2026-09-06, gallery demos excluded. Only
+// `StatCard` clears the ADR-008 D3 two-consumer gate today; the rest are
+// shipped ahead of their consumers, which is a deliberate, recorded debt, not
+// a met gate. The per-primitive ledger and the named surface that should
+// become each one's second consumer live in
+// `docs/follow-ups/_pending/adr-146-consumer-gate.md`. The ~26 forked tiles
+// are NOT rewritten here (ADR-146 D13).
+//
+// Three rules that govern every export in this block:
+//   D7  a chart is MONOCHROME until it earns a palette — the accent's scarcity
+//       is the point, and bar length already encodes what bar colour would.
+//   D8  series colour is a frozen literal lookup, never a constructed
+//       `--series-${i}`. A name that misses is invalid CSS the browser
+//       silently discards, with every gate green.
+//   D10 identity is never colour alone, and text wears text tokens, never a
+//       series colour. The empty / loading / error states and the table view
+//       come from `ChartFrame`, so — measured 2026-09-06, not asserted — only
+//       `LineChart`, `AreaChart` and `BarChart` carry them. `DonutChart`,
+//       `RankedBars`, `Sparkline` and `GaugeRing` do NOT compose the frame (a
+//       donut has no axes; ranked bars are their own rows), so they have no
+//       table view. Their data does reach assistive tech another way — the
+//       donut's legend is a label+value+percentage list and RankedBars is a
+//       labelled `<ul>` — but D10.5 says "every chart", and four of seven is
+//       not every. Tracked as a deviation in the ADR-146 completion report.
+//
+// Stat layer — DeltaChip replaces the 3 forks (admin/stat-tile.tsx:10,
+// shell-preview.tsx:254, community/primitives.tsx:117); StatCard is the KPI
+// tile WITH a delta slot, the slot whose absence caused the forks; StatStrip
+// is one card divided by hairlines, which is a different object from a grid
+// of StatCards and is why budget-flighting's GlobalHeader forked.
+export { DeltaChip, type DeltaChipProps, type DeltaDirection, type DeltaFormat } from './delta-chip'
+export { StatCard, type StatCardProps, type StatCardSize, type StatCardFooterLink } from './stat-card'
+export { StatStrip, type StatStripProps, type StatStripCell } from './stat-strip'
+
+// Chart chrome — the frame every chart draws inside, the legend that is the
+// only place a series hue may sit beside text, and the readout that positions
+// by transform so it can never reflow the plot.
+export {
+  ChartFrame,
+  type ChartFrameProps,
+  type ChartFrameState,
+  type ChartFrameView,
+  type ChartTableData,
+  type ChartTableRow,
+} from './chart-frame'
+export { ChartLegend, type ChartLegendProps, type ChartLegendItem } from './chart-legend'
+export { ChartTooltip, tooltipPosition, type ChartTooltipProps, type ChartTooltipRow } from './chart-tooltip'
+
+// The series palette (ADR-146 D2/D8). Re-exported through `chart-legend.tsx`
+// so this block stays one import surface and no consumer reaches into `lib/`.
+// `lib/series.ts` remains the canonical definition. Callers pass a SLOT
+// INDEX — never a colour, and never a token name.
+export {
+  SERIES,
+  SERIES_SCATTER,
+  SERIES_SLOT_COUNT,
+  SCATTER_SLOT_COUNT,
+  OTHER_SLOT_COLOR,
+  seriesColor,
+  scatterColor,
+  paletteColor,
+  slotColor,
+  isSeriesSlot,
+  isScatterSlot,
+  type SeriesSlot,
+  type ScatterSlot,
+  type SeriesPalette,
+  type ChartSlot,
+} from './chart-legend'
+
+// Chart layer. Every one takes its data as `{ label, value }[]` and its series
+// identity as a slot index; none of them accepts a colour.
+export {
+  LineChart,
+  AreaChart,
+  type LineChartProps,
+  type LineChartSeries,
+  type AreaChartProps,
+} from './line-chart'
+export {
+  BarChart,
+  type BarChartProps,
+  type BarChartDatum,
+  type BarChartSeries,
+  type BarChartOrientation,
+  type BarChartMode,
+  type BarChartEmphasis,
+} from './bar-chart'
+export {
+  DonutChart,
+  foldDonutData,
+  withMinimumArc,
+  DONUT_OTHER_KEY,
+  type DonutChartProps,
+  type DonutChartDatum,
+  type DonutSlice,
+  type DonutFold,
+  type DonutGapSurface,
+} from './donut-chart'
+export { RankedBars, type RankedBarsProps, type RankedBarsItem, type RankedBarsSort } from './ranked-bars'
+export { Sparkline, type SparklineProps, type SparklineVariant } from './sparkline'
+export { GaugeRing, type GaugeRingProps, type GaugeBand, type GaugeTone } from './gauge-ring'
+
+// Chart math (ADR-146 D6) — the scale / tick / path / arc arithmetic that was
+// inlined in seven places, now one tested module. `niceTicks` is the piece
+// with no ancestor in the repo: gridlines were the literal list
+// [0.25, 0.5, 0.75] and axis labels were hardcoded strings. Pure functions;
+// they produce numbers and path data and never name a colour or a token.
+export {
+  linearScale,
+  bandScale,
+  niceTicks,
+  linePath,
+  areaPath,
+  arcGeometry,
+  arcSegments,
+  ringDash,
+  clampPct,
+  normalizeToMax,
+  stackTotals,
+  stackFractions,
+  monthDomain,
+  type NumericInput,
+  type Point,
+  type Extent,
+  type ScaleFn,
+  type BandScale,
+  type ArcGeometry,
+  type ArcSegment,
+  type RingDash,
+} from './lib/chart'
+
+// ── Item detail (tasks-item-detail-full.md) ─────────────────────────────────
+// The three-mode detail frame, its slotted header and ellipsis menu, the
+// Notion-style field rows, and the activity pane. Composed by a lens; owns no
+// fetch, no entity and no board.
+export * from './detail'
+
+// ── Thread (ADR-147) ────────────────────────────────────────────────────────
+// A headless comment/social core plus one styled skin, bound to an arbitrary
+// entity rather than to a chat room. Owns no fetch client and no base URL.
+export * from './thread'

package/src/kbd.tsx

@@ -20,17 +20,40 @@ export interface KbdProps {
   children: ReactNode
   /** Optional size — defaults to 'md'. */
   size?: 'sm' | 'md'
+  /**
+   * Which surface this sits on. `neutral` is a normal page/card surface;
+   * `on-accent` is inside a filled accent control (a primary button's shortcut
+   * hint).
+   *
+   * This exists because the neutral palette is illegible on an accent fill and
+   * fails quietly rather than loudly. `--text-tertiary` ink and a `--border`
+   * hairline are tuned for a light-neutral ground; dropped onto `--accent` they
+   * read as grey-on-red mush, which is exactly what shipped in the thread
+   * composer before this prop existed — and it forked this primitive inline to
+   * do it, so the bug was invisible here.
+   */
+  tone?: 'neutral' | 'on-accent'
 }
 
-export function Kbd({ children, size = 'md' }: KbdProps) {
+export function Kbd({ children, size = 'md', tone = 'neutral' }: KbdProps) {
+  const onAccent = tone === 'on-accent'
   const style: CSSProperties = {
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
     gap: '0.125rem',
-    background: 'rgb(var(--surface-overlay-soft))',
-    border: '1px solid rgb(var(--border))',
-    color: 'rgb(var(--text-tertiary))',
+    // On an accent fill the INK stays at full strength and the container does
+    // the quieting. Fading the text instead is the tempting move and it is
+    // wrong: white at 85% over --accent measures 4.33:1, under AA, while full
+    // white is 5.64:1. The translucent fill also lightens the local ground, so
+    // it raises the text's contrast rather than lowering it.
+    background: onAccent
+      ? 'rgb(var(--accent-foreground) / 0.16)'
+      : 'rgb(var(--surface-overlay-soft))',
+    border: `1px solid ${
+      onAccent ? 'rgb(var(--accent-foreground) / 0.4)' : 'rgb(var(--border))'
+    }`,
+    color: onAccent ? 'rgb(var(--accent-foreground))' : 'rgb(var(--text-tertiary))',
     fontFamily: 'var(--font-mono)',
     fontSize: size === 'sm' ? '10.5px' : '11.5px',
     padding: size === 'sm' ? '1px 6px' : '2px 8px',