@stcn52/pro 0.0.0-stage → 0.2.0

package/docs/qa/table-details.md

@@ -0,0 +1,26 @@
+# Table details acceptance — 2026-10-08
+
+Reference: [Ant Design Table](https://ant.design/components/table/). Existing
+Klun styles and host-managed APIs are preserved; this change adds optional
+local data processing without an Ant Design runtime dependency.
+
+Automated checks cover filtering/sorting before paging, remote pages, disabled
+selection, controlled and uncontrolled detail rows, native cell spans,
+auxiliary column counts, collapsed groups, hidden columns, embedded controls,
+empty/error feedback, summaries and pinned expansion offsets.
+
+Real Chrome checks:
+
+- Desktop light: sorting changes the displayed rows, detail expansion follows
+  row keys, status filtering reduces total and requests page 1; Escape restores
+  focus to the filter trigger.
+- Mobile dark at 390px: the document fits the viewport, table contents scroll
+  horizontally inside their container (963px content / 295px viewport), and
+  pagination wraps without overlapping.
+- Merged cells: ArrowRight skips the omitted cell, focuses `0-2`, and exactly one
+  rendered data cell remains in the tab sequence.
+
+![Mobile dark table](./table-mobile-dark.jpg)
+
+This is Chrome verification, not cross-browser or screen-reader certification.
+Virtualization and drag-and-drop engines are not introduced by this change.

package/docs/qa/tree-browser-checks.json

@@ -0,0 +1,226 @@
+[
+  {
+    "story": "checkable",
+    "theme": "light",
+    "width": 1280,
+    "documentFits": true,
+    "renderedItems": 9
+  },
+  {
+    "story": "strict-checking",
+    "theme": "light",
+    "width": 1280,
+    "documentFits": true,
+    "renderedItems": 9
+  },
+  {
+    "story": "controlled",
+    "theme": "light",
+    "width": 1280,
+    "documentFits": true,
+    "renderedItems": 5
+  },
+  {
+    "story": "searchable",
+    "theme": "light",
+    "width": 1280,
+    "documentFits": true,
+    "renderedItems": 7
+  },
+  {
+    "story": "directory",
+    "theme": "light",
+    "width": 1280,
+    "documentFits": true,
+    "renderedItems": 9
+  },
+  {
+    "story": "lazy-loading",
+    "theme": "light",
+    "width": 1280,
+    "documentFits": true,
+    "renderedItems": 1
+  },
+  {
+    "story": "virtual-scroll",
+    "theme": "light",
+    "width": 1280,
+    "documentFits": true,
+    "renderedItems": 14
+  },
+  {
+    "story": "drag-and-drop",
+    "theme": "light",
+    "width": 1280,
+    "documentFits": true,
+    "renderedItems": 9
+  },
+  {
+    "story": "checkable",
+    "theme": "dark",
+    "width": 1280,
+    "documentFits": true,
+    "renderedItems": 9
+  },
+  {
+    "story": "strict-checking",
+    "theme": "dark",
+    "width": 1280,
+    "documentFits": true,
+    "renderedItems": 9
+  },
+  {
+    "story": "controlled",
+    "theme": "dark",
+    "width": 1280,
+    "documentFits": true,
+    "renderedItems": 5
+  },
+  {
+    "story": "searchable",
+    "theme": "dark",
+    "width": 1280,
+    "documentFits": true,
+    "renderedItems": 7
+  },
+  {
+    "story": "directory",
+    "theme": "dark",
+    "width": 1280,
+    "documentFits": true,
+    "renderedItems": 9
+  },
+  {
+    "story": "lazy-loading",
+    "theme": "dark",
+    "width": 1280,
+    "documentFits": true,
+    "renderedItems": 1
+  },
+  {
+    "story": "virtual-scroll",
+    "theme": "dark",
+    "width": 1280,
+    "documentFits": true,
+    "renderedItems": 14
+  },
+  {
+    "story": "drag-and-drop",
+    "theme": "dark",
+    "width": 1280,
+    "documentFits": true,
+    "renderedItems": 9
+  },
+  {
+    "story": "checkable",
+    "theme": "light",
+    "width": 390,
+    "documentFits": true,
+    "renderedItems": 9
+  },
+  {
+    "story": "strict-checking",
+    "theme": "light",
+    "width": 390,
+    "documentFits": true,
+    "renderedItems": 9
+  },
+  {
+    "story": "controlled",
+    "theme": "light",
+    "width": 390,
+    "documentFits": true,
+    "renderedItems": 5
+  },
+  {
+    "story": "searchable",
+    "theme": "light",
+    "width": 390,
+    "documentFits": true,
+    "renderedItems": 7
+  },
+  {
+    "story": "directory",
+    "theme": "light",
+    "width": 390,
+    "documentFits": true,
+    "renderedItems": 9
+  },
+  {
+    "story": "lazy-loading",
+    "theme": "light",
+    "width": 390,
+    "documentFits": true,
+    "renderedItems": 1
+  },
+  {
+    "story": "virtual-scroll",
+    "theme": "light",
+    "width": 390,
+    "documentFits": true,
+    "renderedItems": 14
+  },
+  {
+    "story": "drag-and-drop",
+    "theme": "light",
+    "width": 390,
+    "documentFits": true,
+    "renderedItems": 9
+  },
+  {
+    "story": "checkable",
+    "theme": "dark",
+    "width": 390,
+    "documentFits": true,
+    "renderedItems": 9
+  },
+  {
+    "story": "strict-checking",
+    "theme": "dark",
+    "width": 390,
+    "documentFits": true,
+    "renderedItems": 9
+  },
+  {
+    "story": "controlled",
+    "theme": "dark",
+    "width": 390,
+    "documentFits": true,
+    "renderedItems": 5
+  },
+  {
+    "story": "searchable",
+    "theme": "dark",
+    "width": 390,
+    "documentFits": true,
+    "renderedItems": 7
+  },
+  {
+    "story": "directory",
+    "theme": "dark",
+    "width": 390,
+    "documentFits": true,
+    "renderedItems": 9
+  },
+  {
+    "story": "lazy-loading",
+    "theme": "dark",
+    "width": 390,
+    "documentFits": true,
+    "renderedItems": 1
+  },
+  {
+    "story": "virtual-scroll",
+    "theme": "dark",
+    "width": 390,
+    "documentFits": true,
+    "renderedItems": 14
+  },
+  {
+    "story": "drag-and-drop",
+    "theme": "dark",
+    "width": 390,
+    "documentFits": true,
+    "renderedItems": 9
+  }
+]

package/docs/qa/tree-details.md

@@ -0,0 +1,25 @@
+# Tree details acceptance — 2026-10-08
+
+Reference: [Ant Design Tree](https://ant.design/components/tree/). Existing Klun
+Tree APIs and styles remain supported. DirectoryTree and hierarchy features
+use native React, CSS and HTML5 drag events without new runtime dependencies.
+
+Automated regression checks cover controlled expansion and selection, checkbox
+conduction and strict mode, disabled boundaries, directory ranges, keyboard
+navigation, embedded controls, async retry and source replacement, concurrent
+key validation, nested loading, 10,000-node virtualization, deep hierarchies,
+ref scrolling and drag/drop validation/cancellation.
+
+Chrome verification covered eight stories in light/dark themes at desktop and
+390px widths (32 combinations), with no document overflow. Interaction checks
+covered mixed checkbox state, Meta directory multiselection, nested async
+failure/retry, scrolling to node 9000, End navigation and keyboard reordering.
+The matrix is recorded in [tree-browser-checks.json](./tree-browser-checks.json).
+
+HTML5 pointer-drop behavior is covered by DOM event tests. Native automated
+mouse dragging did not produce a drop, so real pointer dragging remains a
+manual browser acceptance item. Cross-browser and screen-reader certification
+were not performed. Virtual rows use fixed heights; motion is a boolean CSS
+option rather than Ant Design’s rc-motion configuration.
+
+![Directory tree, mobile dark](./tree-directory-mobile-dark.jpg)

package/docs/tokens.md

@@ -0,0 +1,255 @@
+# Design tokens
+
+<!-- Generated by `pnpm gen:docs` from src/styles/tokens.css. Do not edit by hand. -->
+
+Everything the components draw with. The raw scale is transcribed from
+PingCode's own theme stylesheet; everything above it is named by purpose
+(`--surface-*`, `--fg-*`, `--border-*`, `--accent`), which is the layer a
+component is allowed to use.
+
+Theme is selected with `data-theme="light" | "dark" | "auto"` on any ancestor.
+
+## 1. raw scale (PingCode)
+
+| Token         | Value     |
+| ------------- | --------- |
+| `--gray-10`   | `#fff`    |
+| `--gray-70`   | `#f7f7f7` |
+| `--gray-80`   | `#fafafa` |
+| `--gray-100`  | `#f5f5f5` |
+| `--gray-200`  | `#eee`    |
+| `--gray-300`  | `#ddd`    |
+| `--gray-400`  | `#cacaca` |
+| `--gray-500`  | `#aaa`    |
+| `--gray-600`  | `#999`    |
+| `--gray-700`  | `#666`    |
+| `--gray-800`  | `#333`    |
+| `--gray-900`  | `#1f1f1f` |
+| `--brand-50`  | `#f2f6ff` |
+| `--brand-100` | `#e6edff` |
+| `--brand-200` | `#c9dbff` |
+| `--brand-300` | `#9dbcff` |
+| `--brand-400` | `#80a8ff` |
+| `--brand-500` | `#6698ff` |
+| `--brand-600` | `#4c7fe6` |
+| `--brand-700` | `#3563bf` |
+| `--green-500` | `#73d897` |
+| `--cyan-500`  | `#5dcfff` |
+| `--amber-500` | `#ffcd5d` |
+| `--star`      | `#ff9f73` |
+| `--red-500`   | `#ff7575` |
+
+## 2. status palette used by Ship tags (sampled from the live product)
+
+| Token                  | Value     |
+| ---------------------- | --------- |
+| `--status-pending`     | `#56abfb` |
+| `--status-completed`   | `#73d897` |
+| `--status-in-progress` | `#fdc45c` |
+| `--status-blocked`     | `#ff7575` |
+| `--status-todo`        | `#cacaca` |
+| `--status-review`      | `#9d8cff` |
+
+## 3. semantic: brand
+
+| Token                 | Value                       |
+| --------------------- | --------------------------- |
+| `--accent`            | `var(--brand-500)`          |
+| `--accent-hover`      | `var(--brand-400)`          |
+| `--accent-active`     | `var(--brand-600)`          |
+| `--accent-soft`       | `rgba(102, 152, 255, 0.1)`  |
+| `--accent-soft-hover` | `rgba(102, 152, 255, 0.16)` |
+| `--accent-contrast`   | `#fff`                      |
+
+## 4. semantic: surfaces
+
+| Token                          | Value                 |
+| ------------------------------ | --------------------- |
+| `--surface-app`                | `#fff`                |
+| `--surface-default`            | `#fff`                |
+| `--surface-panel`              | `#fbfbfb`             |
+| `--surface-float`              | `#fff`                |
+| `--surface-sunken`             | `var(--gray-80)`      |
+| `--surface-header`             | `#fff`                |
+| `--surface-rail`               | `#4a525b`             |
+| `--surface-rail-hover`         | `#56616d`             |
+| `--surface-rail-active`        | `#39414c`             |
+| `--surface-hover`              | `var(--gray-100)`     |
+| `--surface-active`             | `var(--gray-200)`     |
+| `--surface-selected`           | `var(--accent-soft)`  |
+| `--surface-scrim`              | `rgba(0, 0, 0, 0.55)` |
+| `--surface-table-head`         | `var(--gray-80)`      |
+| `--surface-table-row-hover`    | `var(--gray-70)`      |
+| `--surface-table-row-selected` | `var(--gray-80)`      |
+
+## 5. semantic: foreground
+
+| Token                | Value             |
+| -------------------- | ----------------- |
+| `--fg`               | `#333`            |
+| `--fg-strong`        | `#1f1f1f`         |
+| `--fg-muted`         | `#666666`         |
+| `--fg-th`            | `#aaaaaa`         |
+| `--fg-subtle`        | `#767676`         |
+| `--fg-label`         | `#999999`         |
+| `--fg-disabled`      | `var(--gray-400)` |
+| `--fg-on-rail`       | `#ddd`            |
+| `--fg-on-rail-muted` | `#9aa4af`         |
+| `--fg-on-accent`     | `#fff`            |
+| `--fg-link`          | `#3d6fd0`         |
+
+## 6. semantic: borders
+
+| Token                  | Value             |
+| ---------------------- | ----------------- |
+| `--border`             | `var(--gray-200)` |
+| `--border-strong`      | `var(--gray-300)` |
+| `--border-input`       | `var(--gray-300)` |
+| `--border-input-hover` | `var(--gray-400)` |
+| `--border-divider`     | `var(--gray-200)` |
+
+## 7. elevation
+
+| Token                        | Value                              |
+| ---------------------------- | ---------------------------------- |
+| `--shadow-header`            | `0 4px 8px 0 rgba(0, 0, 0, 0.03)`  |
+| `--shadow-popover`           | `0 2px 12px 0 rgba(0, 0, 0, 0.12)` |
+| `--shadow-dialog`            | `0 8px 32px 0 rgba(0, 0, 0, 0.18)` |
+| `--shadow-float-btn`         | `0 0 10px rgba(0, 0, 0, 0.1)`      |
+| `--shadow-float-btn-hover`   | `0 0 10px rgba(0, 0, 0, 0.25)`     |
+| `--shadow-table-fixed-left`  | `6px 0 6px 0 rgba(0, 0, 0, 0.05)`  |
+| `--shadow-table-fixed-right` | `-6px 0 6px 0 rgba(0, 0, 0, 0.05)` |
+| `--shadow-switch-knob`       | `0 1px 3px rgba(0, 0, 0, 0.2)`     |
+
+## 8. typography
+
+| Token               | Value                                                                   |
+| ------------------- | ----------------------------------------------------------------------- |
+| `--font-mono`       | `SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace` |
+| `--text-xs`         | `12px`                                                                  |
+| `--text-sm`         | `13px`                                                                  |
+| `--text-base`       | `14px`                                                                  |
+| `--text-md`         | `15px`                                                                  |
+| `--text-lg`         | `16px`                                                                  |
+| `--text-xl`         | `20px`                                                                  |
+| `--text-2xl`        | `24px`                                                                  |
+| `--leading-tight`   | `1.3`                                                                   |
+| `--leading-base`    | `1.5715`                                                                |
+| `--leading-relaxed` | `1.72`                                                                  |
+| `--weight-regular`  | `400`                                                                   |
+| `--weight-medium`   | `500`                                                                   |
+| `--weight-bold`     | `600`                                                                   |
+
+## 9. spacing / sizing
+
+| Token                    | Value   |
+| ------------------------ | ------- |
+| `--space-1`              | `4px`   |
+| `--space-2`              | `8px`   |
+| `--space-3`              | `12px`  |
+| `--space-4`              | `16px`  |
+| `--space-5`              | `20px`  |
+| `--space-6`              | `24px`  |
+| `--space-8`              | `32px`  |
+| `--space-10`             | `40px`  |
+| `--space-12`             | `48px`  |
+| `--table-head-height`    | `44px`  |
+| `--radius-sm`            | `2px`   |
+| `--radius`               | `4px`   |
+| `--radius-md`            | `6px`   |
+| `--radius-lg`            | `8px`   |
+| `--radius-search-header` | `8px`   |
+| `--radius-search-field`  | `4.8px` |
+| `--radius-pill`          | `999px` |
+
+## 10. Ship chrome geometry — measured from the live product
+
+| Token                 | Value                          |
+| --------------------- | ------------------------------ |
+| `--rail-width`        | `60px`                         |
+| `--rail-item`         | `60px`                         |
+| `--header-height`     | `52px`                         |
+| `--toolbar-height`    | `48px`                         |
+| `--footer-height`     | `48px`                         |
+| `--sidebar-width`     | `300px`                        |
+| `--sidebar-width-old` | `260px`                        |
+| `--sidebar-min-width` | `220px`                        |
+| `--sidebar-max-width` | `420px`                        |
+| `--control-height-sm` | `24px`                         |
+| `--control-height`    | `32px`                         |
+| `--control-height-lg` | `36px`                         |
+| `--z-popover`         | `1000`                         |
+| `--z-dialog`          | `1100`                         |
+| `--z-toast`           | `1200`                         |
+| `--z-tooltip`         | `1300`                         |
+| `--duration-fast`     | `120ms`                        |
+| `--duration`          | `180ms`                        |
+| `--ease`              | `cubic-bezier(0.4, 0, 0.2, 1)` |
+
+## 11. Dark theme (dark overrides)
+
+| Token                          | Value                              |
+| ------------------------------ | ---------------------------------- |
+| `--fg-th`                      | `#8b96a3`                          |
+| `--gray-10`                    | `#2a2e34`                          |
+| `--gray-70`                    | `#32363d`                          |
+| `--gray-80`                    | `#30353c`                          |
+| `--gray-100`                   | `#393e46`                          |
+| `--gray-200`                   | `#3c414a`                          |
+| `--gray-300`                   | `#464c57`                          |
+| `--gray-400`                   | `#5b6370`                          |
+| `--gray-500`                   | `#666e7d`                          |
+| `--gray-600`                   | `#6f7a8a`                          |
+| `--gray-700`                   | `#87909e`                          |
+| `--gray-800`                   | `#bcc4d1`                          |
+| `--gray-900`                   | `#d9dee6`                          |
+| `--brand-50`                   | `#323844`                          |
+| `--brand-100`                  | `#38414f`                          |
+| `--brand-200`                  | `#435066`                          |
+| `--brand-300`                  | `#4f6080`                          |
+| `--brand-400`                  | `#5c7bb8`                          |
+| `--brand-500`                  | `#6698ff`                          |
+| `--brand-600`                  | `#82aaff`                          |
+| `--brand-700`                  | `#a3c0ff`                          |
+| `--surface-app`                | `#2a2e34`                          |
+| `--surface-default`            | `#2a2e34`                          |
+| `--surface-panel`              | `#30353c`                          |
+| `--surface-float`              | `#393e46`                          |
+| `--surface-sunken`             | `#32363d`                          |
+| `--surface-header`             | `#30353c`                          |
+| `--surface-rail`               | `#23272c`                          |
+| `--surface-rail-hover`         | `#32373e`                          |
+| `--surface-rail-active`        | `#2c3138`                          |
+| `--surface-hover`              | `#3c414a`                          |
+| `--surface-active`             | `#464c57`                          |
+| `--surface-selected`           | `rgba(102, 152, 255, 0.16)`        |
+| `--surface-scrim`              | `rgba(0, 0, 0, 0.65)`              |
+| `--surface-table-head`         | `#32363d`                          |
+| `--surface-table-row-hover`    | `#343941`                          |
+| `--surface-table-row-selected` | `#32363d`                          |
+| `--fg`                         | `#bcc4d1`                          |
+| `--fg-strong`                  | `#e4e9f0`                          |
+| `--fg-muted`                   | `#a2adbb`                          |
+| `--fg-subtle`                  | `#93a0b0`                          |
+| `--fg-disabled`                | `#5b6370`                          |
+| `--fg-on-rail`                 | `#bcc4d1`                          |
+| `--fg-on-rail-muted`           | `#6f7a8a`                          |
+| `--fg-link`                    | `#82aaff`                          |
+| `--border`                     | `#3c414a`                          |
+| `--border-strong`              | `#464c57`                          |
+| `--border-input`               | `#464c57`                          |
+| `--border-input-hover`         | `#5b6370`                          |
+| `--border-divider`             | `#3c414a`                          |
+| `--shadow-header`              | `0 2px 6px 0 rgba(0, 0, 0, 0.2)`   |
+| `--shadow-popover`             | `0 2px 12px 0 rgba(0, 0, 0, 0.45)` |
+| `--shadow-dialog`              | `0 8px 32px 0 rgba(0, 0, 0, 0.55)` |
+| `--shadow-float-btn`           | `0 0 10px rgba(0, 0, 0, 0.25)`     |
+| `--shadow-float-btn-hover`     | `0 0 10px rgba(0, 0, 0, 0.45)`     |
+| `--shadow-table-fixed-left`    | `6px 0 6px 0 rgba(0, 0, 0, 0.1)`   |
+| `--shadow-table-fixed-right`   | `-6px 0 6px 0 rgba(0, 0, 0, 0.1)`  |
+| `--shadow-switch-knob`         | `0 1px 3px rgba(0, 0, 0, 0.5)`     |
+| `--status-todo`                | `#5b6370`                          |
+
+---
+
+186 declarations across 11 groups.

package/package.json

@@ -1,6 +1,95 @@
 {
   "name": "@stcn52/pro",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.0",
+  "description": "Klun Pro — PingCode/Ship visual restoration component library: design tokens, primitives and Ship business components with light/dark themes.",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "docs",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE",
+    "CONVENTIONS.md",
+    "RELEASING.md",
+    "THIRD_PARTY_NOTICES.md"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./styles.css": "./dist/styles.css",
+    "./tokens.css": "./dist/tokens.css",
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.5",
+    "@eslint/js": "^10.0.1",
+    "@rc-component/qrcode": "2.0.0",
+    "@storybook/addon-a11y": "10.6.1",
+    "@storybook/addon-docs": "10.6.1",
+    "@storybook/addon-themes": "10.6.1",
+    "@storybook/react-vite": "10.6.1",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.7",
+    "@types/node": "^26.6.4",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "@vitejs/plugin-react": "^6.1.2",
+    "@vitest/coverage-v8": "^5.0.3",
+    "eslint": "^10.12.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "jsdom": "^30.1.2",
+    "jsqr": "1.4.0",
+    "prettier": "^3.9.9",
+    "publint": "^0.3.25",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "storybook": "10.6.1",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.71.1",
+    "vitest": "^5.0.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "scripts": {
+    "build": "tsup && node scripts/build-styles.mjs",
+    "dev": "tsup --watch",
+    "storybook": "storybook dev -p 6006",
+    "build:storybook": "storybook build -o dist-storybook",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "gen:docs": "node scripts/gen-docs.mjs",
+    "release": "node scripts/release.mjs",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "verify": "node scripts/verify.mjs",
+    "gen:icons": "node scripts/gen-icons.mjs",
+    "build:styles": "node scripts/build-styles.mjs"
+  }
 }