@stcn52/pro 0.0.0-stage → 0.2.1

package/docs/measurements.md

@@ -0,0 +1,152 @@
+# Measurements
+
+Every geometry and colour in `src/styles` traces back to the live PingCode Ship
+surface. Nothing here is a guess: where a value could not be measured, the code
+says so instead of inventing one.
+
+## Method
+
+1. The rendered product was inspected in a 1400 × 804 CSS px viewport at DPR 2
+   (device frames are 2800 × 1608).
+2. Colours were sampled from the pixels of the PNG captures and cross-checked
+   against PingCode's own stylesheets (`styles-GMDWPZOL.css`,
+   `styles-CFCMAFLG.css`) as extracted from the running app.
+3. Computed styles were read from the live DOM for spacing, type and control
+   metrics (`getComputedStyle` probes on the real elements).
+4. Icon geometry was taken verbatim from the app's inline `<thy-icon>` SVGs and
+   committed as `src/icons/icons.ts` (146 glyphs). `scripts/gen-icons.mjs`
+   regenerates that module from a sprite extract.
+
+Reference captures (not committed): ten page shots plus dialog, filter-popover
+and account-menu shots, kept alongside the extraction artefacts.
+
+## Chrome
+
+| Element                  | Measured                                          | Token                   |
+| ------------------------ | ------------------------------------------------- | ----------------------- |
+| Icon rail width          | 60 css px                                         | `--rail-width`          |
+| Rail background          | `#4A525B`                                         | `--surface-rail`        |
+| Rail active band         | `#3B414B`, full width                             | `--surface-rail-active` |
+| Rail item pitch          | 60 css px                                         | `--rail-item`           |
+| Secondary sidebar        | 260 css px incl. 1px border                       | `--sidebar-width`       |
+| Sidebar background       | `#FBFBFB` (white → `#FBFBFB` gradient at the top) | `--surface-panel`       |
+| Sidebar divider          | `#EEEEEE`                                         | `--border-divider`      |
+| Top header height        | 51–52 css px                                      | `--header-height`       |
+| Content header / toolbar | 47–48 css px                                      | `--toolbar-height`      |
+| Footer bar               | 48 css px                                         | `--footer-height`       |
+| Header shadow            | `0 4px 8px rgba(0,0,0,.03)`                       | `--shadow-header`       |
+
+## Grid
+
+| Element            | Measured                        | Where                                  |
+| ------------------ | ------------------------------- | -------------------------------------- |
+| Table header row   | 50 css px                       | `primitives.css` `.pro-table thead th` |
+| Table body row     | 52 css px pitch (104 device px) | `.pro-table tbody td`                  |
+| Row separator      | `#EEEEEE` 1px                   | `--border`                             |
+| Row hover          | `#F7F7F7`                       | `--surface-table-row-hover`            |
+| Checkbox column    | 44 css px                       | `.pro-table__pick`                     |
+| Row-number column  | 56 css px                       | `.pro-table__index`                    |
+| Row actions column | 72 css px                       | `.pro-table__actions-col`              |
+| Header background  | `#FAFAFA`                       | `--surface-table-head`                 |
+
+Row checkboxes are a hover affordance, not a permanent grid element: they are
+hidden until the row is hovered, focused or selected, exactly as in the product.
+
+## Type
+
+| Role                        | Size / line-height     |
+| --------------------------- | ---------------------- |
+| Base                        | 14 px / 1.5715 (22 px) |
+| Small (metadata)            | 13 px                  |
+| Extra small (counts, hints) | 12 px                  |
+| Page title                  | 20 px / 1.35           |
+| Nav tab                     | 15 px                  |
+
+The shipped type scale is PingCode's (`--text-*`), with CJK-safe line heights for
+headings as required by the Klun front-end rules.
+
+## Colour
+
+The raw scale (`--gray-10 … --gray-900`, `--brand-*`, `--green-500`,
+`--cyan-500`, `--amber-500`, `--red-500`) is PingCode's own, taken from
+`.portal{…}` and `:root[theme=dark]`. Purpose-named tokens (`--surface-*`,
+`--fg-*`, `--border-*`, `--accent`, `--status-*`) are layered on top so
+components never reference a raw colour.
+
+Search fields — measured off the live DOM, then **deliberately adjusted** (the
+product's top-bar box is 16px on a 32px field, i.e. a full stadium; that read as
+too round here, so 8px was chosen for a rounded-rectangle look):
+
+| Field                                                              | Live measurement                                                          | This restoration              | Border                                                                                                                 |
+| ------------------------------------------------------------------ | ------------------------------------------------------------------------- | ----------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| Top bar (`Search (⌘+K)`, `.thy-input-group.navbar-actions-search`) | 16px radius · 32px · 200px                                                | **8px** radius · 32px · 200px | 1px `#EEEEEE`, white                                                                                                   |
+| Page / list toolbar (`Search (⌘+G)`)                               | 4.8px radius (`.input-search-control`) / 4px (`.thy-input-search`) · 34px | **4.8px** · 34px              | the live field is borderless until focus; here the border is **always visible** (`--border`) and turns accent on focus |
+
+Tokens: `--radius-search-header: 8px` (live: 16px), `--radius-search-field: 4.8px`.
+Both deviations are the agreed outcome of a review of the running UI.
+
+Status pill colours were sampled from the live list rows:
+
+| Status             | Colour    |
+| ------------------ | --------- |
+| Pending            | `#56ABFB` |
+| Planned / To do    | `#CACACA` |
+| In progress        | `#FDC45C` |
+| Completed          | `#73D897` |
+| Blocked / Rejected | `#FF7575` |
+| Review             | `#9D8CFF` |
+
+## Contrast
+
+Measured in the built app (computed colours sampled from the live DOM, ratios
+calculated from relative luminance):
+
+| Pair                                         | Light   | Dark    | Verdict |
+| -------------------------------------------- | ------- | ------- | ------- |
+| Body text on the app surface                 | 12.63:1 | 7.77:1  | pass    |
+| Secondary text (`--fg-muted`)                | 5.74:1  | 6.00:1  | pass    |
+| Tertiary text (`--fg-subtle`, counts, hints) | 4.54:1  | 5.13:1  | pass    |
+| Page / list titles                           | 16.48:1 | 11.19:1 | pass    |
+| Text links (`--fg-link`)                     | 4.79:1  | 5.94:1  | pass    |
+
+PingCode's own tertiary grey (`#999999` on white, 2.85:1) fails AA, so
+`--fg-subtle` is deepened to `#767676`; dark-mode secondary/tertiary greys were
+raised to `#A2ADBB` / `#93A0B0` for the same reason. These are the only places
+where a measured colour was deliberately not reproduced.
+
+**Two inherited contrast gaps are kept, on purpose.** The product paints white
+labels on its accent blue and accent-blue labels on the active nav row:
+
+| Pair                                                             | Ratio   |
+| ---------------------------------------------------------------- | ------- |
+| `#FFFFFF` on `--accent` `#6698FF` (primary button, status pills) | 2.80:1  |
+| `--accent` `#6698FF` on the active nav tint                      | ≈ 2.9:1 |
+
+A 1:1 restoration inherits them; changing the accent would visibly desynchronise
+every screenshot from the reference. A host that needs AA instead can switch the
+text-bearing accent in one line — `--accent: #3D6FD0` (4.79:1 with white) — and
+`--fg-link` already defaults to that AA-safe blue for text.
+
+## Known gaps
+
+- The Report and Customer tabs were captured after their data had loaded; the
+  Baseline, Review, Document and Roadmap tabs were captured while the grid was
+  still a loading skeleton, so their **column sets** come from the live DOM
+  (`thead th`) rather than from pixels.
+- No footer/pagination bar is visible in the six "second batch" captures
+  because the lists were clipped by the viewport bottom; the pagination
+  geometry comes from the Ideas and Tickets captures.
+- The dark theme was reconstructed from PingCode's `:root[theme=dark]` token
+  block — a dark-theme screenshot of the running app was not obtainable, so
+  dark-mode contrast was verified by measuring the resulting token pairs
+  instead.
+
+## Deliberate departures
+
+Two rows of the captured column menu could not be matched glyph for glyph,
+because the sprite is the product's own and has no such icons: **Insert left** and
+**Insert right** carry `plus` (the label says which side), and **Freeze** /
+**Unfreeze** carry `pushpin` / `pushpin-slash`. Sorting lives in a real submenu
+(`Menu items`), which is how the capture draws it — the row carries a `caret-right`
+rather than the capture's `caret-down`, because that submenu opens beside the row
+and the caret has to promise the direction it actually goes.

package/docs/qa/README.md

@@ -0,0 +1,50 @@
+# Common component acceptance — 2026-10-08
+
+The additions in this change were checked in the user's actual Chrome browser
+against the local Storybook, using the source stylesheet and published component
+contracts. This is a Chrome acceptance record, not a claim of Safari/Firefox or
+screen-reader certification.
+
+## Layout and themes
+
+[Recorded results](./browser-checks.json) contain 56 checks: 14 stories × light/dark
+× desktop (1280 px) / mobile (390 px). Every story rendered its expected semantic
+control and none caused horizontal page overflow. The matrix covers RadioGroup
+(and Radio), Tabs, Collapse, Badge, Slider, Steps, Alert, CheckboxGroup,
+PasswordInput, Rate, Cascader, Transfer, DateRangePicker and MultiSelect.
+DatePicker's open calendar was checked separately in both themes and at mobile
+width. Transfer and range fields stack on narrow screens; horizontal Steps also
+becomes vertical.
+
+## Browser interactions
+
+- DatePicker opened with focus on the selected day. ArrowRight followed by Enter
+  changed 2026-10-08 to 2026-10-09 and returned focus to its trigger. Escape also
+  returned focus. The mobile range calendar marked dates after its end as unavailable.
+- MultiSelect Tab/Space selected Completed; its trigger count changed from 2 to 3.
+  Blocked was disabled. Escape closed the dialog and restored trigger focus.
+- Slider's ArrowRight changed its controlled value from 40 to 41.
+- Rate selected 2 stars, Right selected 3, and Clear reset to zero.
+- PasswordInput's Enter toggle changed password/text visibility and pressed state,
+  then restored password mode. Only the supplied artificial story value was used.
+- Tabs ArrowRight activated Activity and its associated panel.
+- Collapse Enter opened Details. Steps Enter activated Profile.
+- Alert Enter dismissed the message.
+- Transfer selected Alice and activated Move to Selected with Enter; its selected
+  list contained Alice and Bob while Charlie remained disabled.
+- Cascader searched Osaka and selected its full path with Enter.
+
+## Automated validation
+
+`pnpm verify` checks types, module boundaries, docs/test/story coverage, lint,
+formatting, all tests, ESM/CJS/declaration builds, package contracts, package lint
+and installed-tarball imports. `pnpm build:storybook` checks the static site build.
+Regression tests cover locked and unknown selections, controlled state, leaf
+paths, leap days, rapid cross-month keyboard navigation, native custom validity,
+years 0001/9999, year-zero rejection, date-range ordering and the local release guard.
+
+## Representative screenshots
+
+![Transfer at mobile width, light theme](./transfer-mobile-light.jpg)
+
+![Date range at mobile width, dark theme](./date-range-mobile-dark.jpg)

package/docs/qa/browser-checks.json

@@ -0,0 +1,394 @@
+[
+  {
+    "id": "components-forms-radio--group",
+    "mode": "desktop light",
+    "overflow": false,
+    "theme": "light",
+    "width": 1280
+  },
+  {
+    "id": "components-navigation-tabs--default",
+    "mode": "desktop light",
+    "overflow": false,
+    "theme": "light",
+    "width": 1280
+  },
+  {
+    "id": "components-data-collapse--default",
+    "mode": "desktop light",
+    "overflow": false,
+    "theme": "light",
+    "width": 1280
+  },
+  {
+    "id": "components-data-badge--overflow",
+    "mode": "desktop light",
+    "overflow": false,
+    "theme": "light",
+    "width": 1280
+  },
+  {
+    "id": "components-forms-slider--controlled",
+    "mode": "desktop light",
+    "overflow": false,
+    "theme": "light",
+    "width": 1280
+  },
+  {
+    "id": "components-navigation-steps--interactive",
+    "mode": "desktop light",
+    "overflow": false,
+    "theme": "light",
+    "width": 1280
+  },
+  {
+    "id": "components-states-alert--closable",
+    "mode": "desktop light",
+    "overflow": false,
+    "theme": "light",
+    "width": 1280
+  },
+  {
+    "id": "components-forms-checkboxgroup--default",
+    "mode": "desktop light",
+    "overflow": false,
+    "theme": "light",
+    "width": 1280
+  },
+  {
+    "id": "components-forms-passwordinput--default",
+    "mode": "desktop light",
+    "overflow": false,
+    "theme": "light",
+    "width": 1280
+  },
+  {
+    "id": "components-forms-rate--default",
+    "mode": "desktop light",
+    "overflow": false,
+    "theme": "light",
+    "width": 1280
+  },
+  {
+    "id": "components-forms-cascader--default",
+    "mode": "desktop light",
+    "overflow": false,
+    "theme": "light",
+    "width": 1280
+  },
+  {
+    "id": "components-forms-transfer--default",
+    "mode": "desktop light",
+    "overflow": false,
+    "theme": "light",
+    "width": 1280
+  },
+  {
+    "id": "components-forms-datepicker--range",
+    "mode": "desktop light",
+    "overflow": false,
+    "theme": "light",
+    "width": 1280
+  },
+  {
+    "id": "components-forms-select--multi",
+    "mode": "desktop light",
+    "overflow": false,
+    "theme": "light",
+    "width": 1280
+  },
+  {
+    "id": "components-forms-radio--group",
+    "mode": "mobile dark",
+    "overflow": false,
+    "theme": "dark",
+    "width": 390
+  },
+  {
+    "id": "components-navigation-tabs--default",
+    "mode": "mobile dark",
+    "overflow": false,
+    "theme": "dark",
+    "width": 390
+  },
+  {
+    "id": "components-data-collapse--default",
+    "mode": "mobile dark",
+    "overflow": false,
+    "theme": "dark",
+    "width": 390
+  },
+  {
+    "id": "components-data-badge--overflow",
+    "mode": "mobile dark",
+    "overflow": false,
+    "theme": "dark",
+    "width": 390
+  },
+  {
+    "id": "components-forms-slider--controlled",
+    "mode": "mobile dark",
+    "overflow": false,
+    "theme": "dark",
+    "width": 390
+  },
+  {
+    "id": "components-navigation-steps--interactive",
+    "mode": "mobile dark",
+    "overflow": false,
+    "theme": "dark",
+    "width": 390
+  },
+  {
+    "id": "components-states-alert--closable",
+    "mode": "mobile dark",
+    "overflow": false,
+    "theme": "dark",
+    "width": 390
+  },
+  {
+    "id": "components-forms-checkboxgroup--default",
+    "mode": "mobile dark",
+    "overflow": false,
+    "theme": "dark",
+    "width": 390
+  },
+  {
+    "id": "components-forms-passwordinput--default",
+    "mode": "mobile dark",
+    "overflow": false,
+    "theme": "dark",
+    "width": 390
+  },
+  {
+    "id": "components-forms-rate--default",
+    "mode": "mobile dark",
+    "overflow": false,
+    "theme": "dark",
+    "width": 390
+  },
+  {
+    "id": "components-forms-cascader--default",
+    "mode": "mobile dark",
+    "overflow": false,
+    "theme": "dark",
+    "width": 390
+  },
+  {
+    "id": "components-forms-transfer--default",
+    "mode": "mobile dark",
+    "overflow": false,
+    "theme": "dark",
+    "width": 390
+  },
+  {
+    "id": "components-forms-datepicker--range",
+    "mode": "mobile dark",
+    "overflow": false,
+    "theme": "dark",
+    "width": 390
+  },
+  {
+    "id": "components-forms-select--multi",
+    "mode": "mobile dark",
+    "overflow": false,
+    "theme": "dark",
+    "width": 390
+  },
+  {
+    "id": "components-forms-radio--group",
+    "mode": "mobile light",
+    "overflow": false,
+    "theme": "light",
+    "width": 390
+  },
+  {
+    "id": "components-navigation-tabs--default",
+    "mode": "mobile light",
+    "overflow": false,
+    "theme": "light",
+    "width": 390
+  },
+  {
+    "id": "components-data-collapse--default",
+    "mode": "mobile light",
+    "overflow": false,
+    "theme": "light",
+    "width": 390
+  },
+  {
+    "id": "components-data-badge--overflow",
+    "mode": "mobile light",
+    "overflow": false,
+    "theme": "light",
+    "width": 390
+  },
+  {
+    "id": "components-forms-slider--controlled",
+    "mode": "mobile light",
+    "overflow": false,
+    "theme": "light",
+    "width": 390
+  },
+  {
+    "id": "components-navigation-steps--interactive",
+    "mode": "mobile light",
+    "overflow": false,
+    "theme": "light",
+    "width": 390
+  },
+  {
+    "id": "components-states-alert--closable",
+    "mode": "mobile light",
+    "overflow": false,
+    "theme": "light",
+    "width": 390
+  },
+  {
+    "id": "components-forms-checkboxgroup--default",
+    "mode": "mobile light",
+    "overflow": false,
+    "theme": "light",
+    "width": 390
+  },
+  {
+    "id": "components-forms-passwordinput--default",
+    "mode": "mobile light",
+    "overflow": false,
+    "theme": "light",
+    "width": 390
+  },
+  {
+    "id": "components-forms-rate--default",
+    "mode": "mobile light",
+    "overflow": false,
+    "theme": "light",
+    "width": 390
+  },
+  {
+    "id": "components-forms-cascader--default",
+    "mode": "mobile light",
+    "overflow": false,
+    "theme": "light",
+    "width": 390
+  },
+  {
+    "id": "components-forms-transfer--default",
+    "mode": "mobile light",
+    "overflow": false,
+    "theme": "light",
+    "width": 390
+  },
+  {
+    "id": "components-forms-datepicker--range",
+    "mode": "mobile light",
+    "overflow": false,
+    "theme": "light",
+    "width": 390
+  },
+  {
+    "id": "components-forms-select--multi",
+    "mode": "mobile light",
+    "overflow": false,
+    "theme": "light",
+    "width": 390
+  },
+  {
+    "id": "components-forms-radio--group",
+    "mode": "desktop dark",
+    "overflow": false,
+    "theme": "dark",
+    "width": 1280
+  },
+  {
+    "id": "components-navigation-tabs--default",
+    "mode": "desktop dark",
+    "overflow": false,
+    "theme": "dark",
+    "width": 1280
+  },
+  {
+    "id": "components-data-collapse--default",
+    "mode": "desktop dark",
+    "overflow": false,
+    "theme": "dark",
+    "width": 1280
+  },
+  {
+    "id": "components-data-badge--overflow",
+    "mode": "desktop dark",
+    "overflow": false,
+    "theme": "dark",
+    "width": 1280
+  },
+  {
+    "id": "components-forms-slider--controlled",
+    "mode": "desktop dark",
+    "overflow": false,
+    "theme": "dark",
+    "width": 1280
+  },
+  {
+    "id": "components-navigation-steps--interactive",
+    "mode": "desktop dark",
+    "overflow": false,
+    "theme": "dark",
+    "width": 1280
+  },
+  {
+    "id": "components-states-alert--closable",
+    "mode": "desktop dark",
+    "overflow": false,
+    "theme": "dark",
+    "width": 1280
+  },
+  {
+    "id": "components-forms-checkboxgroup--default",
+    "mode": "desktop dark",
+    "overflow": false,
+    "theme": "dark",
+    "width": 1280
+  },
+  {
+    "id": "components-forms-passwordinput--default",
+    "mode": "desktop dark",
+    "overflow": false,
+    "theme": "dark",
+    "width": 1280
+  },
+  {
+    "id": "components-forms-rate--default",
+    "mode": "desktop dark",
+    "overflow": false,
+    "theme": "dark",
+    "width": 1280
+  },
+  {
+    "id": "components-forms-cascader--default",
+    "mode": "desktop dark",
+    "overflow": false,
+    "theme": "dark",
+    "width": 1280
+  },
+  {
+    "id": "components-forms-transfer--default",
+    "mode": "desktop dark",
+    "overflow": false,
+    "theme": "dark",
+    "width": 1280
+  },
+  {
+    "id": "components-forms-datepicker--range",
+    "mode": "desktop dark",
+    "overflow": false,
+    "theme": "dark",
+    "width": 1280
+  },
+  {
+    "id": "components-forms-select--multi",
+    "mode": "desktop dark",
+    "overflow": false,
+    "theme": "dark",
+    "width": 1280
+  }
+]