@stcn52/pro 0.0.0-stage → 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,615 @@
+# Changelog
+
+All notable changes to `@stcn52/pro` are documented in this file.
+
+The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and
+the project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+- Clear all 13 lint warnings: publish controlled props before layout effects, reset closed overlays without effect cascades, isolate ref-backed event handlers and render composer tools as components; enforce hook checks and a zero-warning verification gate.
+
+- Ship editors: validate owned drag sessions, quarter/year boundaries and wizard drafts; wait for real workbench imports/deletes/edits and preserve new selection, parse quoted multiline CSV safely, guard queued callbacks after unmount, and contain mobile canvas cards.
+
+- Ship entities: await real entity/picker/share submissions, retain failed drafts and isolate reopened sessions; deduplicate relation counts without dropping off-page IDs, respect provider disabled, validate scheduled recipients, and copy only host-supplied links after confirmed success.
+
+- Ship detail: asynchronous comment submission with draft-preserving retry, cyclic thread safety, provider-aware relationship controls, attachment reader/timer cleanup and latest callbacks, explicit preview download stand-ins and CSV formula protection.
+
+- Ship chrome: provider-aware rail/header/tools, per-rail disabled overrides, safe empty filters and operator resets, localized business controls, F2/IME title editing, finite badges, controlled inline editing focus and responsive reading surfaces.
+
+- App feedback: inherit nested placement/caps, isolate closed message handles from reused keys, and settle all close subscribers while preserving reentrant notices and timers when host callbacks fail.
+
+- Popup actions: drop blocked uncontrolled menus/confirmations, preserve controlled ownership and protect modified/IME open keys; localize confirmation labels/errors, retain zero content and normalize nonfinite drawer dimensions.
+
+- Layout: localized sider/splitter controls and explicit sider disabled overrides; finite numeric dimensions/gaps/flex, responsive collapse deduplication, pointer capture completion and stale-drag/IME protection.
+
+- Display: locale and explicit-null breadcrumb separators, fractional-only statistics; Typography protects IME commits and external focus, cancels stale async copy attempts before clipboard writes and localizes controls.
+
+- Upload/Image: localize controls, preserve falsy rejection errors and latest async transfer configuration, avoid duplicate stale removals; drop blocked uncontrolled previews, normalize rotations and retain zero placeholders.
+
+- General inputs: finite/IME-safe numeric stepping, duplicate suggestion/tree/time change suppression, inherited-disabled tree search overrides; localize numeric/tree controls and clock validity, discard blocked uncontrolled popups.
+
+- Overlays: Escape dismisses one leaf layer, modal Tab includes related portals, nested popovers rise above their anchors; tooltips merge descriptions and fit/re-measure viewport edges, toasts pause for keyboard focus and normalize invalid durations.
+
+- Badge/Alert: numeric-string caps and zero rules, finite overflow/offset handling, localized status/close labels and reentrant-safe afterClose tracking.
+
+- Tabs/Collapse/Steps: recover owned focus after dynamic removal, hiding or disabling; preserve external focus during tab removal, localize editable labels and protect modified/IME navigation keys.
+
+- Input/Buttons: IME-safe Enter and clear behavior, localized clear/password controls, existing-id Field labels and merged accessible feedback; zero-content actions and split-menu disabled overrides.
+
+- Radio/Checkbox/Switch: native group container refs/attributes, zero-valued checkbox labels, duplicate radio selection suppression, wrapped radio groups and IME-safe switch keys.
+
+- Slider/Rate: disabled and canceled completion guards, finite extreme ranges and valid marks; selected-star clearing, zero-count ratings, locale labels and hover resets.
+
+- AiPanel: Promise submission locks, failed-draft retry, stale-session protection, locale/disabled and IME handling; share Dialog modal stacking and follow streamed text in the actual body scroll container.
+
+- Inline editors: disabled/readOnly and field configuration forwarding, accessible synchronous validation, IME protection, safe clear/unassigned identifiers and dynamic option focus; PeoplePicker accepts host loading/error/retry.
+
+- SelectionBar: respect disabled commands and global overrides; lock pending operations, retain failed selections and await all round-robin writes before reporting success.
+
+- Charts: localized empty data, finite/extreme numeric geometry, proportion-safe donut totals, data descriptions and responsive legends; protect interactive scatter points.
+- Icon: safe prototype-like-name fallback, accessible unknown glyphs, native span refs/attributes and bounded numeric sizes.
+- States/Progress: visible default Skeleton geometry, bounded placeholder/step counts, locale and native refs; honor null progress formatting and wrap narrow feedback content.
+- Nav/Sidebar: isolate overflow keyboard/disabled state, preserve host routes and native refs, track label sizing; localize sidebar controls and end resizing on lost pointer capture.
+- Segment: single keyboard entry, dynamic focus recovery, duplicate selection suppression, native refs/custom content/block layout; Chip consumes provider disabled.
+- Tag/Divider: native attributes/ref, custom tag icons and close-event isolation; locale/disabled overrides, dotted rules and wrapping RTL captions.
+- Card: native section attributes/ref, compact/inner variants, Grid/Meta composition, localized loading and narrow-content wrapping.
+- Avatar: numeric sizing, square shape, measured children scaling, Unicode initials, srcSet fallback, native refs and accessible stack overflow.
+- Pagination: suppress current/empty paging notifications, bound numeric precision, discard disabled size-menu state and protect IME quick entry; verify controlled/default state and total changes.
+
+- Menu/ContextMenu: single Tab entry, dynamic focus recovery, disabled branches and RTL nested Escape/backward handling; bounded long menus preserve internal scroll, and submenus flip into available viewport space.
+
+- ConfigProvider: nested light/dark themes and merged CSS tokens now reach body portals; undefined token overrides inherit. Pagination and selector/date labels consume locale, table controls consume disabled, and RTL spacing, popup alignment and fixed-column offsets mirror correctly.
+
+- DatePicker/DateRangePicker: local time confirmation, week/month/quarter/year modes, multiple dates, lazy presets, strict format parsing, controlled popups and shared date/time bounds. ISO string values and native refs remain unchanged.
+
+- DataTable: hierarchical rows, nested headers, additive sort arrays, radio selection, fixed-height virtual windows and aggregate change events. Summary now receives processed roots before pagination; merged/detail/group bodies retain full rendering.
+
+- Complete Cascader multiple/intermediate paths, shared Tree check conduction, field mapping,
+  controlled popups/search, rich labels and source-safe lazy loading with retry.
+
+- Complete Tree/DirectoryTree cached range selection, expansion-independent directory picks,
+  leaf icons, RTL/IME behavior and native drag geometry. `onDrop.dropPosition` now uses
+  the target sibling index; `relativeDropPosition` exposes the previous -1/0/1 meaning.
+
+- Complete Transfer independent controlled checks, directional move payloads, page-safe selections,
+  rich/custom lists, search hooks and native refs with guarded custom callbacks.
+
+- Complete Select/MultiSelect grouped virtual choices, labeled-value caching, controlled opening,
+  clear controls, custom option/label/tag rendering and async states while preserving string callbacks.
+
+- Add Carousel, target-aware modal Tour, real SVG/canvas QRCode, native Watermark and responsive SVG BorderBeam; reuse Dialog focus/stack behavior for Tour.
+
+- Add Mentions with caret-safe insertion, IME and keyboard suggestions; add ColorPicker with solid/gradient HEX/RGB/HSB editing, alpha, presets and controlled opening.
+
+- Add Form conditional/render items, selective updates, preserve policies and filtered focus/scroll options
+  while protecting StrictMode and dynamic list remounts.
+
+- Add App-bound message/notification APIs and static host restoration; add keyed Toast updates,
+  destroy-all, close callbacks, timer cleanup and persistent-hover handling.
+
+- Add real-file Upload with async preflight/manual mode, multipart XHR or cancellable custom requests,
+  progress/error lists, accept/count limits and drag/drop.
+
+- Add native Image loading/fallback and controlled previews with zoom, rotation and explicit groups.
+
+- Add four-edge Drawer sharing Dialog modal behavior, bounded dimensions and independent
+  keyboard, mask and close-button controls.
+
+- Add Dropdown and Popconfirm with native button refs, existing Menu/Popover behavior,
+  controlled visibility and async confirmation retry/cancellation.
+
+- Fix nested Dialog scroll locks, top-layer keyboard handling, focus restoration and hidden/disabled focus filtering.
+
+- Add compound Layout, responsive Row/Col/Grid, Flex/Space/Compact and accessible Splitter
+  with controlled sizing, bounds, keyboard/pointer adjustment and collapse restoration.
+
+- Add Breadcrumb, responsive Descriptions, string-preserving Statistic and compound Typography
+  with async copying, editing, expansion and native link/heading semantics.
+
+- Add InputNumber, AutoComplete, TreeSelect and TimePicker with Form/config integration,
+  numeric drafts, IME-safe suggestions, reused Tree loading/checks and native clock validation.
+
+- Extend Badge status/rich counts/RTL offsets and Alert banner/title/variants/custom close lifecycle.
+
+- Add Input affixes, clear/count/status/variants with native reset and Form integration;
+  extend button shapes/ghost/danger, loading actions, RTL switch text/keyboard and group option attributes.
+- Expand Tabs editing/lifecycle/placement, Collapse keyboard/extra actions and Steps item states.
+
+- P1 navigation: controlled Menu selection/expansion and inline/horizontal modes,
+  independent-menu state isolation, RTL/disabled Nav and ContextMenu, controlled
+  Sidebar sizing and collapsed focus isolation. Share rich-label search text.
+
+- P1: expand Pagination, Segment, Avatar, Tag, Card and Divider contracts;
+  preserve controlled DataTable pagination and add display/interaction regressions.
+
+- Add absolute FormItem dependency paths with user-triggered transitive
+  revalidation, cyclic dependency protection and stale async-result regression coverage.
+
+- Add opt-in fixed-height Select/MultiSelect virtual scrolling, complete-list
+  keyboard navigation, tags/token separators and distinct-value maxCount.
+- Preserve virtual option focus during scrolling and prevent delayed Popover
+  autofocus from overriding user navigation; defer tokenization during IME input.
+
+- Add nested Form name paths, subtree validation/reset, copied values and
+  FormList dynamic/nested arrays with stable keys; expose Form.Item/Form.List
+  aliases and guard unsafe paths, cycles and excessive depth/indexes.
+
+- Add ConfigProvider locale/direction/disabled defaults and a flat-field Form
+  foundation with async validation, resets, watched values and submission.
+- Existing core controls consume disabled defaults; portals retain language
+  and direction, and Select/SplitButton close interactive layers when disabled.
+
+- Complete Tree hierarchy capabilities: controlled state, cascade/strict checks, multi-selection, two-level lazy loading and retry, search, connector lines/custom rendering, virtual scrolling, ref scrolling and drag lifecycle/drop rules.
+- Add DirectoryTree with folder/file icons, click/double-click expansion and Ctrl/Meta/Shift selection; retain legacy Tree route and reorder APIs.
+
+- Complete DataTable details: local/remote pagination, local sorting and column filters, disabled row selection, expandable details, hidden/wrapping/merged cells, summary/title/footer and scroll configuration.
+- Fix grouped and merged-cell cursor navigation, auxiliary column alignment, embedded control clicks, loading/error feedback and fixed expansion-column geometry.
+
+### Added
+
+- Select/MultiSelect shared search: rich-label text, custom filtering/sorting,
+  controlled queries, remote search callbacks, and enabled-option keyboard navigation.
+
+- `Cascader`, `Transfer`, `DatePicker`, and `DateRangePicker`: searchable hierarchy,
+  dual-list selection, themed calendar and mutually constrained date ranges.
+
+- `CheckboxGroup`, `PasswordInput`, and `Rate`, reusing the existing controls
+  with controlled/uncontrolled state, native keyboard interaction and no new dependencies.
+
+- `Slider`, `Steps`, and `Alert`: native range input, accessible controlled step
+  navigation, and dismissible inline feedback. Includes stories, tests and docs.
+
+- `Radio` / `RadioGroup`, `Tabs`, `Collapse`, and `Badge`, informed by Ant Design
+  component contracts and implemented with existing tokens and no new dependencies.
+  Includes native radio navigation, accessible tab panels, controlled/uncontrolled
+  selections, accordion mode, badge overflow, Storybook examples and tests.
+
+### Fixed
+
+- MultiSelect disabled choices, nested labels, dialog/checkbox semantics, large
+  and invalid states, and clearing that preserves locked and unknown selections.
+- Select popup declaration now matches its dialog container.
+
+### Changed
+
+- Local release script now validates only with `--dry-run`; tagging, publication
+  and deployment require the platform workflow.
+
+### Fixed
+
+- **A cell's commands no longer slice the value they sit on.** The boxes a
+  `Column.actions` cell reveals on hover had no backdrop of their own, so the
+  value under them ended mid-glyph — in the `Cell Commands` story the ID cell read
+  `S` and then two boxes. The overlay now fades into the cell's **own** tint
+  (`--pro-cell-overlay`: the row's wash at rest, the accent tint while the pointer
+  is on the cell), exactly the way the row's commands already faded into the row,
+  so a narrow column loses its value gradually instead of cutting it. The story
+  itself was demoing the feature in a 90px ID column while its two boxes measured
+  52px; it now uses a 160px cell, where the value and both boxes read together
+  (the product's own ID column is 120px and carries one box).
+- **The `Cell Commands` story named an icon the sprite does not have.** `copy`
+  is not in `ICONS`, and an unknown name draws an empty box — which is what the
+  screenshot showed. It uses `hashtag`, the glyph the demo's own "Copy ID"
+  affordance uses.
+
+### Fixed
+
+- **A widget inside a cell keeps its own keys.** The grid's key listener sits on
+  the `<tr>`, so everything pressed inside a cell bubbled to it and the row acted
+  on it: a space in a rename field selected the row instead of typing a space, an
+  `Enter` on a `Column.actions` box opened the record (and the row's
+  `preventDefault` stopped the box from running at all), and an arrow key inside
+  an in-cell editor moved the cursor and pulled the focus out from under it,
+  committing the half-typed value. The row now answers only for the grid
+  (`src/components/table/keyboard.ts`): a key is the widget's when something
+  already handled it or when the focus is inside an `input`, `textarea`, `select`,
+  `button`, `a[href]`, `[contenteditable]` or one of the combobox / listbox /
+  textbox / slider / switch roles — a list of roles, not of this library's
+  classes, so a host's own editor inside a cell is treated the same way.
+- **Focus follows the cursor in a grouped grid too.** `groupBy` renders one
+  `<tbody>` per group and the focus query only looked inside a single one, so ↑ ↓
+  moved the outlined cell while the keyboard stayed behind. The query now runs
+  over the whole scroll container, whichever body the cell is in.
+- **The grid stops jumping while it loads.** The skeleton rows carried no pinned
+  geometry, so a grid with a frozen column drew its header frozen and its loading
+  rows unfrozen, then snapped sideways when the data landed. The skeletons wear
+  the same offsets as the rows they stand in for.
+- **The frozen edge shadow is drawn once.** With `selectable` + `showIndex` + a
+  frozen column, the body drew the shadow on the index cell _and_ on the last
+  frozen data column while the header drew it once; the body now agrees with the
+  header (the shadow belongs to the outermost pinned cell of the run).
+- **A group header spans the header tools column.** `headerTools` adds a column
+  to the header row, and the group row's `colSpan` did not count it, so the group
+  band stopped one column short (visible wherever a list groups _and_ shows the
+  column-settings gear).
+- **A row keeps its announced position when it has a context menu.** The
+  `aria-rowindex` was added to the wrapper instead of the row, so every row of a
+  right-clickable grid — i.e. every `ListWorkbench` row — announced no position
+  at all. It is now set on the `<tr>` itself, which is also the menu's trigger.
+- **`RichTextToolbar` is back in the published surface.** It is re-exported by
+  `src/ship/EntityDialog.tsx` rather than declared in it, and
+  `scripts/public-surface.mjs` only read declarations, so the name was missing
+  from `docs/api.md`, from the test-coverage check and from the story-coverage
+  check while being a real runtime export. The script now follows
+  `export * from` and `export { … } from` (the public surface keeps its 268 other
+  names unchanged).
+
+### Changed
+
+- **`DataTable` is split by concern.** The 912-line `src/components/Table.tsx`
+  became `src/components/table/`: the props contract (`types`), the pinned-column
+  arithmetic and the skeleton geometry (`geometry`), the keyboard (`keyboard`),
+  the grouping (`grouping`), and the pieces the grid is assembled from —
+  `DataTable`, `TableHead`, `TableRow`, `SkeletonRows`, `BulkBar`, `ColumnMenu`,
+  `CellCommands`. `src/components/Table.tsx` stays as the barrel so every import
+  path (`../components/Table`, the stories, the tests, `src/index.ts`) is
+  unchanged, and `DataTableProps` stays next to `DataTable` because generated docs
+  resolve a component's props type in the component's own file.
+
+### Changed
+
+- **The pointer works in two levels**, the product's own: the row it is in takes the
+  light wash (`--surface-table-row-hover`, with the pick cell's gutter following it)
+  and the cell under it takes a step deeper — the accent tint, which over that wash
+  lands on the reference's measured `#ebf0fb`. A hovered row still reads as a row and
+  the cell it points at reads as the target, instead of one lone cell lighting up in
+  a grid of unchanged rows.
+- **A selected grid row is neutral, not blue.** Sampled off the reference: the
+  selected row is `#fafafa` while the accent stays on its checkbox (`#57abfb`), so
+  a selected row still reads as a row and the control carries the state. The grid
+  uses a new `--surface-table-row-selected` (the head's tone in both themes); the
+  accent-tinted `--surface-selected` is unchanged for everything else.
+- The pick column wears the header's tone (`--surface-table-head`, `#fafafa`) like
+  a spreadsheet's row-header gutter, instead of the rows' white. A row carrying a
+  state of its own — hover, selection — still wins, so the gutter is never the odd
+  one out in its own row.
+- **The grid is drawn as a grid.** The cells had a bottom border only, so the
+  columns were separated by whitespace and nothing but the frozen edge; every
+  column now carries the same hairline on its right (the filler and the structural
+  pick / action / tool cells included in the exclusion, since they are not
+  columns), which is what makes it read as a table.
+- **The grid is a spreadsheet, not a list of rows.** Hovering lights up the cell
+  under the pointer (a light wash and a hairline) instead of washing the whole row,
+  and the keyboard cursor is a **cell**: ← → walk the columns, ↑ ↓ the rows,
+  Home/End jump to the ends of the row, Enter opens the record, Space toggles its
+  selection, and focus rides with the cursor on a roving tabindex — one tab stop
+  for the whole grid, which is the cursor cell. The arrow arithmetic moved out of
+  `useListCursor` (still exported) because a row index is no longer the thing being
+  moved.
+
+### Added
+
+- **`Column.actions` — commands that live inside a cell.** Each column can carry
+  `[{ id, icon, label, onSelect(row) }]`: the boxes overlay the cell's right edge,
+  appear while the pointer is on **that cell** (or it holds focus), and each brings
+  its own tooltip and callback — the product's "Click to copy" on the identifier,
+  next to the value. The component owns the box, the reveal and the tooltip; the
+  host supplies the icon, the name and the write, which is all an integration needs.
+- The **assignee cell's** person-add affordance: the host can name it
+  (`assignLabel(row)`) and take it over (`onAssign(row)`), or leave both out and let
+  the cell open its own people picker.
+
+- `Toast` grew the things a host kept re-implementing: six **placements**
+  (`ToastProvider placement`, default unchanged at `top-center`), a **`warning`**
+  tone (the product's amber), an optional **title** with the message as its
+  description, one inline **action** (Undo / View / Retry) that does not dismiss
+  the toast itself, a **`filled`** variant on the tone's own colour, a
+  **`closeable`** switch, an **icon** override, and `max` to cap the stack.
+  `push` now returns the toast's id so a host can dismiss it early, and its third
+  argument takes an options object as well as the bare duration it took before.
+
+### Added
+
+- **The selection bar is `DataTable`'s.** The product covers the grid's header row
+  with it while rows are selected, and the stylesheet was written for exactly that
+  (`.pro-selection-bar` is absolutely positioned, 50px, full width) — but only
+  `ListWorkbench` rendered one, above the table, so a `DataTable` on its own had no
+  bar at all. The table now renders it **in place of the header row**: the covered
+  header stands down (`inert`, and the select-all lives on the bar instead of
+  existing twice), the bar's box centres in the pick column and its count starts
+  where the first data column does, so nothing is off by a few pixels. `SelectionBar`
+  moved from the ship layer to `src/components/SelectionBar.tsx` (same public
+  export), and `buildBulkCommands` there turns the host's data into the bar the
+  table and the board both use.
+- The grid keeps the column widths it was given: `table-layout: fixed` spreads the
+  leftover space over every column, so a 44px pick column came out 66px and nothing
+  could line up with it. A trailing auto-width filler column takes the slack.
+- **The bulk bar is the component's.** `ListWorkbench` takes `bulk` — the data and
+  the write for Update status, Move in baseline, Schedule, Distribute workitems and
+  Edit properties — and builds the whole bar itself, in the product's order, above
+  whatever `bulkActions` adds and its own More (export / delete) and Cancel. The
+  round-robin spread, the confirmation message and the bulk edit dialog are the
+  library's; a page supplies choices and a write and nothing else. That is the
+  point of the exercise: a page should not re-implement a command the product
+  always shows.
+- A lone command in `bulkActions` keeps its own label, icon and `onSelect`
+  instead of being folded into a submenu named after its id — which is what a bar
+  needs to mix grouped commands (Update status ›) with single ones (Distribute
+  workitems).
+- **Frozen columns are part of the list view.** `ListView.frozen` names the
+  columns pinned to the left edge; `ListWorkbench` pins them (`fixed: 'left'`),
+  answers the column menu's Freeze / Unfreeze into that view state, and forwards
+  Move / Insert / Remove to the host, which owns `columns`. The demo's lists
+  freeze `id`, so the grid opens the way the product's does: the checkbox column
+  and the ID scroll together, the rest goes under them, and the frozen run carries
+  the edge shadow. The header ⋯ now works in the real list, not only in the
+  DataTable story.
+- **`Menu` grows submenus.** An item may carry `items`: it renders a caret and
+  `aria-haspopup="menu"` / `aria-expanded`, opens those entries beside its own row
+  and keeps the parent open until something in the child is chosen (`ArrowRight`
+  opens it, `ArrowLeft` closes it and restores the focus). `divider: true` renders
+  the hairline `ContextMenuItem` already supported, so `Menu` and the context menu
+  finally agree on what an item is. `SelectionBar`'s hand-rolled submenu can move
+  onto this.
+- **`DataTable`'s column menu** (`onColumnCommand`), the product's header ⋯:
+  Sort by (a real submenu — Ascending / Descending / Clear sort, the active
+  direction checked), Move left / Move right (disabled at the ends), Insert left /
+  Insert right, Freeze or Unfreeze (the pin reflects `column.fixed`) and Remove
+  this column. The library reports a `ColumnCommand` and reorders nothing itself —
+  the host owns `columns`. The story's harness applies every command, so the demo
+  moves, inserts, freezes and removes columns for real.
+- `DataTable` gained the two things its grid was missing next to its stylesheet:
+  - **A row cursor** (`cursor`): one tab stop for the body, ↑ ↓ walking an
+    `is-cursor` row, Home / End jumping, Enter opening it, Space toggling its
+    selection, and a pointer click parking the cursor where it landed. It uses the
+    library's own `useListCursor`, which clamps the cursor when a filter shrinks
+    the list under it. `ListWorkbench` turns it on, so the product's list screen is
+    one tab stop instead of fifty.
+  - **The cursor row shows its checkbox.** The pick cell is "the row number at
+    rest, the checkbox on hover / selected / while a selection is active" — the
+    keyboard cursor is the pointer's hover, and it was missing from that list, so
+    the cursor row kept printing its number over an invisible checkbox. The number
+    now steps aside only when there _is_ a checkbox to take its place
+    (`:has(.pro-checkbox)`), so a host with no selection writer keeps its numbers.
+  - **Density** `'default' | 'compact'`: 36px rows and header with `--text-sm`
+    cells, and a reserved actions column instead of the floating overlay (that is
+    what `.pro-table__cell--actions`, until now dead, right-aligns).
+
+### Fixed
+
+- **The row's commands sit at the row's end again.** The overlay resolved its
+  containing block against the actions cell — zero-width and `position: sticky`
+  whenever a column was frozen — so with a frozen column the pencil and the ⋯
+  landed at the **scrollport's** edge (mid-grid) instead of the row's. The cell
+  keeps the frozen edge's shadow and gives up the pinning, so the overlay's
+  containing block is the row itself: measured in the story, `offsetParent` is the
+  `TR` and the box sits 16px from the row's right edge.
+
+- The pick cell's checkbox belongs to the **pick cell**. It used to appear as soon
+  as the pointer was anywhere in the row, so pointing at a title, a status or an
+  empty column offered a selection box the operator never asked for — the opposite
+  of the cell the interaction now belongs to. Only the pick cell reveals it; a
+  selected row, the cursor row and the bulk-selection mode keep theirs on screen,
+  because there the box is a state rather than an offer.
+
+- The selection bar is exactly as tall as the header row it stands in for. It was
+  pinned at 50px while the grid's header measured 44px, so it hung 6px past the row
+  — visible as the `Cancel` button's box sticking out below the table's top edge.
+  Both now read one token (`--table-head-height`), so they cannot drift apart
+  again: measured in the story, the bar and the header row are the same 44px box
+  (40→84) with the first data row starting exactly at its bottom edge.
+
+- A frozen column cannot look like a column of its own any more. The pinned cells
+  painted their own `--surface-default` and stayed in line with their row only
+  because the row states out-specified them (`tr:hover td` is 0,2,3 against
+  `td.is-fixed` at 0,2,1); any other row background — a host's own row class, a
+  state the stylesheet does not know — was covered by that opaque cell instead, and
+  a band that stops matching its row is what reads as an outlined column. The row
+  carries the background now and the pinned cells take `background: inherit`, so
+  the band is the row's colour by construction and still opaque for the columns
+  sliding under it.
+- The pick column is centred. Its checkbox and its row number are two states of
+  one 44px slot, but the checkbox was laid out in the flow with `opacity: 0`, so
+  it took 16px + a gap and pushed the number off the axis — the header's
+  select-all sat 14px left of where the number was, and neither matched the
+  column. The checkbox is now absolutely centred and the cell aligns its content,
+  with the selector naming the element (`.pro-table td.pro-table__pick`) because
+  `.pro-table td` outranks a bare class. Measured on the built demo: every row's
+  number and box, and the header's box, are within 0px of the cell's centre.
+- The pick cell no longer depends on `:has()` to hide its row number: the cell
+  says `is-selectable` when it really holds a checkbox. A browser without `:has()`
+  drops that whole rule, which left the checkbox drawn _next to_ the number.
+- `DataTable` now does what its stylesheet already promised:
+  - **Only pin what is frozen.** The checkbox and actions columns were pinned
+    whenever the grid had a selection or row commands, so an unfrozen grid carried
+    a right-edge shadow with nothing to shadow and an opaque background on the
+    pick cell. They are pinned now only when a data column is (`column.fixed`).
+  - **Fixed columns work.** `.is-fixed-left` / `.is-fixed-right` and the two
+    `--shadow-table-fixed-*` tokens were dead CSS — nothing set the classes. A
+    column takes `fixed: 'left' | 'right'`, the component measures the offsets
+    from the preceding pinned widths, and the outer column of each run gets the
+    edge shadow. The checkbox and actions columns are pinned like the product's.
+  - **Group headers fold.** They drew a caret and did nothing; they are buttons
+    with `aria-expanded` now, uncontrolled (open) or controlled through
+    `expandedGroups` / `onExpandedGroupsChange`.
+  - **No dead controls.** The pick column keeps its row number, but its checkbox
+    (and the select-all box) only render when `onSelectedKeysChange` can write the
+    selection — the five host call sites that passed `selectable` without a
+    handler were showing checkboxes that did nothing. A `sortable` column whose
+    table has no `onSortChange` is disabled with a title instead of silently
+    ignoring clicks.
+  - `aria-rowcount` counts the header row as ARIA requires, and flat rows carry
+    `aria-rowindex`.
+  - Removed the unused `.pro-table__cell--compact` rule.
+
+### Fixed
+
+- The focus ring is drawn once. `base.css`'s `.pro-root :focus-visible` (0,2,0)
+  out-specified the inline cell editors' own `outline: none` (0,1,0), so an open
+  cell showed the global 2px ring _and_ the cell's accent hairline — two
+  concentric boxes around the title. `.pro-cell-editor :focus-visible` now wins on
+  order, and `CONVENTIONS.md` records the specificity trap.
+- The global focus rule no longer sets `border-radius`, which used to overrule a
+  component's own radius the moment it took focus (a focused button rendered 2px
+  instead of 4px). The ring follows the element's radius natively.
+
+### Changed
+
+- `Tag` (and with it `StatusTag` and `CountTag`) is cut with the button's corner:
+  `border-radius: var(--radius)` instead of an 18px pill, and `LevelTag`'s badge
+  follows. A tag and a button are the same kind of object on the page, so they now
+  share the radius token. `Tag`'s `square` prop is gone — the button shape is the
+  default — and `pill` is the opt-in for the fully-rounded shape.
+
+### Added
+
+- Storybook (`pnpm storybook`, `pnpm build:storybook`): the react-vite framework,
+  the docs, a11y and themes addons, a preview that loads the published
+  stylesheet, renders inside `.pro-root` and switches `data-theme` from the
+  toolbar. The args tables come from `react-docgen-typescript` reading the same
+  props declarations `docs/api.md` documents.
+- `scripts/check-story-coverage.mjs`, wired into `pnpm verify`: every runtime
+  export has to be named by a `.stories.tsx`. The budget went 101 → 0, so all 113
+  exports are covered today (48 story files).
+
+## [0.2.0] — 2026-10-07
+
+The release that makes `@stcn52/pro` a library you can consume rather than a
+source tree you have to share: a repository, a test suite, a gate, generated
+reference documentation and a package whose contents are checked.
+
+### Added
+
+- **Repository** — a standalone git repository with `LICENSE` (MIT),
+  `.gitignore`, this changelog and `CONVENTIONS.md` (the authoring spec), plus
+  `engines`, `packageManager` and `files` in `package.json`.
+- **Tests** — vitest + Testing Library + jsdom: 263 tests over 17 files covering
+  every one of the 113 exported components and hooks (rendering, controlled
+  values, the keyboard path, `Esc` and focus). `scripts/check-test-coverage.mjs`
+  enforces the claim: it reads the runtime exports out of `src/` and fails when
+  any of them is named by no test.
+- **Static quality** — ESLint 10 flat config with the React hooks rules (16
+  known warnings, pinned with `--max-warnings`), and Prettier across the
+  repository.
+- **`pnpm verify`** — one gate: package contract, typecheck, boundaries, test
+  coverage, docs, lint, format, tests, build, pack, `publint --strict`,
+  `are-the-types-wrong` and a pack smoke test that unpacks the tarball into a
+  throwaway consumer and imports the built ESM, the built CJS and the stylesheet
+  from there. Everything runs offline.
+- **Boundary checks** — `scripts/check-boundaries.mjs` fails on any host symbol
+  in `src/` (repository name, router, storage, route literals, the demo store,
+  `app-*` class names) and on any host stylesheet rule whose subject is a
+  `pro-*` class. Every class the library renders must be `pro-*` (or an `is-*`
+  state hook).
+- **Generated documentation** — `pnpm gen:docs` writes `docs/api.md` (every runtime
+  export with the props table of its props type, read from the TypeScript AST)
+  and `docs/tokens.md` (the token declarations, grouped as `tokens.css` groups
+  them, dark overrides apart). `scripts/check-docs.mjs` fails on a stale
+  generated file and on an export the README or `docs/components.md` does not
+  name.
+- **`ListHeader`'s title is a real `<h2>`** (with `font: inherit`, so the
+  measured 15px/400 type is unchanged): it is the only title a tab page renders.
+
+### Changed
+
+- `Field`'s generated id is handed to the control only (a component, or a
+  labellable native element) — injecting it into a `<span>` wrapper used to point
+  the label at something a label cannot name. `EntityDialog` names its field ids
+  explicitly.
+- `Sidebar` follows a shell-level collapse: `SidebarCollapseProvider` wraps a
+  page tree once and every sidebar inside collapses with it, instead of a host
+  stylesheet hiding `.pro-sidebar`.
+- `EntityDialog` no longer renders the host's `app-counter` / `app-input-wrap`
+  classes; the counter is the library's own `pro-input-counter` /
+  `pro-input-wrap`. `RichTextToolbar` and the rest of `EntityDialog`'s host
+  classes became `pro-richtext*` / `pro-dialog__*`, and the `@mention` highlight
+  became `.pro-mention` in the stylesheet.
+- The narrow-screen rules that hid the sidebar (1024px) and the rail (640px)
+  live in the library now, not in the demo's stylesheet.
+- `QuickStart` takes `done` / `total` for the checklist counter; `Tag` takes
+  `tone="accent"` and `size="sm"` for the quarter chip.
+- The `New project` wizard's classes moved from the host's `proj-*` prefix into
+  the library's `pro-wizard__*` namespace.
+
+### Fixed
+
+- `Menu`'s typeahead swallowed keystrokes typed into a searchable menu's search
+  field: it preventDefaulted any printable character that matched an item, so `d`
+  could not be entered in a list containing "Duplicate".
+- `Input`'s `size?: 'md' | 'lg'` was intersected with the DOM's numeric `size`
+  attribute, which collapsed the prop to `undefined` for a typed caller.
+- `TypeBadge` threw on a kind it does not know; it renders a neutral badge now.
+- `Icon` returned nothing for an unknown name while the docs promised a warning
+  and an empty box; it warns and keeps the box.
+- `Dialog` derived its title id from `Math.random()` during render (now
+  `useId()`); `Tree` carried two dead assignments; `ContextMenu`'s `useCallback`
+  missed the coordinates it reads; `PeoplePicker`'s effect missed `setCursor`;
+  `Toast` kept a stale `eslint-disable`.
+- `exports["."]` pointed the `require` condition at the ESM type declarations;
+  `import` and `require` carry their own `types` (`index.d.ts` / `index.d.cts`).
+
+### Notes
+
+- Still 0.x: the demo is the only consumer, and 1.0.0 is for the point where the
+  API is frozen for a second one.
+- `docs/measurements.md` keeps recording where each measurement came from.
+
+## [0.1.0] — 2026-10-07
+
+The first cut: the Ship workbench restored as a library, then the demo's
+components pulled out of the demo.
+
+### Added
+
+- **Foundations** — `cx`, the `Intl`-backed formatters (`formatNumber`,
+  `formatListTime`, `formatDateTime`, `formatCompact`, `pluralize`),
+  `useControllableState`, `statusColor`, `avatarColor`, `initials`, `nextRuleId`.
+- **Tokens and styles** — `tokens.css` (raw scale + purpose-named semantic
+  tokens, light and dark), `base.css`, `primitives.css`, `ship.css`, published
+  together as `styles.css` and separately as `tokens.css`.
+- **Icons** — `Icon`, `ICONS`, `IconName`: 146 glyphs taken verbatim from the
+  product's sprite.
+- **Primitives** — `Button`, `SplitButton`, `ActionButton`, `Input`, `Textarea`,
+  `SearchInput`, `Field`, `Checkbox`, `Switch`, `Select`, `MultiSelect`,
+  `Popover`, `Menu`, `ContextMenu`, `Tooltip`, `Dialog`, `Toast` /
+  `ToastProvider` / `useToast`, `DataTable`, `Pagination`, `Tag` / `StatusTag` /
+  `LevelTag` / `CountTag`, `Avatar` / `AvatarStack`, `Progress`, `Metric`,
+  `BarChart`, `Donut`, `Sparkline`, `ScatterPlot`, `Crumbs`, `KeyValue`, `Card`,
+  `Nav`, `Tree` / `TreeGroup`, `Sidebar`, `Segment`, `Chip`, `Divider`,
+  `EmptyState`, `ErrorState`, `Skeleton`, `TableSkeleton`, `LoadingBlock`,
+  `InlineSpinner`, `Banner`.
+- **Ship surface** — `AppRail`, `AppHeader`, `ProductHeader`, `HeaderActions`,
+  `BrandMark`, `ListHeader`, `ListToolbar`, `FilterPanel`, `FilterChip`,
+  `BoardView`, `RoadmapView`, `DocSplit`, `TitleCell`, `TypeBadge`, `ProductCell`,
+  `StarButton`, `QuickStart`, `TableBanner`, `SelectionBar`, `VoteCount`,
+  `DetailSheet` / `DetailSection` / `DetailField` / `Feed` / `FeedFilter` /
+  `CommentComposer`.
+- **Composites extracted from the demo** — `ListWorkbench`, `CommentThread`,
+  `AttachmentUpload`, `LinkPicker`, `FilePreview`, `TransitionsTimeline`,
+  `EntityDialog`, `EntityPicker`, `ShareDialog`, `ReportCanvas`, `RoadmapEditor`,
+  `ProjectWizard`, `DetailBlock`, `DetailTool`, `EditableText`, `AccountMenu`,
+  `ShortcutsDialog`, `QuickStartDialog`.
+- **Theming** — `data-theme="light" | "dark" | "auto"` on any ancestor;
+  components only read CSS variables.
+
+### Changed
+
+- `EntityDialog` no longer renders the host's `app-counter` / `app-input-wrap`
+  classes; the counter is the library's own `pro-input-counter` /
+  `pro-input-wrap`.
+- `QuickStart` takes `done` / `total` for the checklist counter; `Tag` takes
+  `tone="accent"` and `size="sm"` for the quarter chip.
+- The `New project` wizard's classes moved from the host's `proj-*` prefix into
+  the library's `pro-wizard__*` namespace.
+
+- Add general Empty, Spin and Result feedback entries; extend Skeleton with
+  compound placeholders and content switching, cancellable loading delay,
+  localized descriptions, inert busy content and reduced-motion handling.
+
+- Extend Slider with native double range handles, marks, vertical layout, step
+  normalization, tooltips and completed interaction events; extend Rate with
+  half-star ratings, configurable count, hover feedback and custom characters.
+
+- Extend Progress with circle/dashboard, segmented steps, percent/status,
+  success overlays, formatted information and logical dashboard gaps in RTL.
+
+- Extend Tabs with placements, RTL keys, editable cards, dynamic selection and
+  close-focus recovery; add Collapse header keys/extra actions/lifecycle variants
+  and Steps item statuses, offsets, localized text and provider-disabled support.
+
+- Add standalone Calendar and Timeline with ISO date selection, month/year views, keyboard/RTL navigation, controlled data, custom cells, pending items and logical layouts.
+
+- Add List/List.Item.Meta, grouped Listy with fixed-height virtualization and scroll refs, and measured responsive Masonry.
+
+- Add Affix, Anchor, FloatButton/Group and shared BackTop with custom scroll containers, logical placement, progress and reduced-motion support.