@lovett/ui 0.0.11 → 0.2.0

package/src/index.ts

@@ -71,6 +71,85 @@ 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,
+  // The default `collisionDetection`, exported so a consumer overriding the
+  // prop can COMPOSE with it rather than replace it. Without this, the only way
+  // to add one rule is to reimplement pointer-first resolution — which is how a
+  // component ends up with two collision strategies that disagree.
+  pointerFirstCollision,
+  PREVIEW_SETTLE_MS,
+  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
@@ -379,6 +458,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
@@ -526,3 +624,208 @@ 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,
+  type DisplayStoreOptions,
+} 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',