@keyfunc/keybricks-ds 2.4.0 → 2.4.4

package/DEPLOY.md

@@ -55,7 +55,7 @@ deploys the documentation site. Watch it under *Build → Pipelines*.
 **5. Cut the first release.**
 
 ```bash
-git tag v2.4.0 && git push --tags
+git tag v2.4.4 && git push --tags
 ```
 
 That tag runs `generated:check` → `version:check` → `npm publish`. Confirm under *Deploy →
@@ -112,7 +112,7 @@ import tokens from '@keyfunc/keybricks-ds/tokens.json'                 // cross-
 ```
 
 Deep imports are the better default in Vue and in any app that cares about tree-shaking —
-a barrel of 129 exports asks the bundler to prove each one is unused.
+a barrel of 130 exports asks the bundler to prove each one is unused.
 
 ## 3. Publishing (maintainers)
 
@@ -130,6 +130,28 @@ git push && git push --tags
 `.gitlab-ci.yml` then runs: `generated:check` → `version:check` (tag must equal
 `package.json` version) → `npm publish` → `pages`.
 
+**Two sources of change.** The design-system project (where releases are packed) and this
+repo can both move: app developers push components straight to `main` (2.4.0 → 2.4.2 carried
+`RelativeTimePicker` that way). So a release is always two steps, never one:
+
+```bash
+# step 1 — look before you overwrite: what does GitLab have that the package was not built from?
+git fetch origin && git log --oneline --stat HEAD..origin/main
+# anything listed → bring those files into the design-system project first (onto the system
+# rules, into the docs site, tests and changelog), bump the version past origin/main's
+# package.json, and pack again.
+
+# step 2 — release from a clean checkout of origin/main, so the package is the whole tree
+git fetch origin && git reset --hard origin/main
+# copy the unpacked package over the working tree, then:
+npm run build && npm run check && git add -A && git commit -m "<version>: …" && git push && git tag v<version> && git push --tags
+```
+
+A rejected push (`fetch first`) means step 1 was skipped. Do not resolve it with `git pull`: a
+half-merged package.json is worse than starting step 1 over. Teammate commits are welcome, but a
+component only counts as part of the system once it has an example page, a test and a changelog
+line — that is what step 1 is for.
+
 **Changelog.** Every release gets an entry at the top of `changelog.js` (version, ISO date, and
 items tagged `new` / `improved` / `fixed` / `breaking` / `removed`, each in English, Chinese and
 Japanese). The documentation site renders it as the *Changelog* section under Overview. While a
@@ -162,7 +184,7 @@ GitLab injects `CI_JOB_TOKEN` — use that instead and no secret is stored anywh
 **Install — straight from git** (no registry, no publish; works today)
 
 ```json
-"@keyfunc/keybricks-ds": "git+ssh://git@gitlab.epm2demo.cn/Felix/keybricks-ds.git#v2.4.0"
+"@keyfunc/keybricks-ds": "git+ssh://git@gitlab.epm2demo.cn/Felix/keybricks-ds.git#v2.4.4"
 ```
 
 Because the package has no build step, a git dependency needs no `prepare` script — npm
@@ -212,7 +234,7 @@ semantic layer. That is what makes dark mode cost nothing.
 ## Runtime checks
 
 `_tests/` holds browser pages that exercise the real components: `react-runtime.html` (the compiled
-bundle), `table-selection.html` (Table loaded from source: checkbox spacing at every width, code chips, two-line rows, sorting), `vue-runtime.html` (the `.vue` files, loaded with vue3-sfc-loader), `cards-interaction*.html`
+bundle), `table-selection.html` (Table loaded from source: checkbox spacing at every width, code chips, two-line rows, sorting), `smart-table-density.html` (SmartTable from source: default / compact rows, the Row height menu, controlled density), `relative-time-picker.html` (RelativeTimePicker from source: helpers, tiers, dialog, keyboard), `tree-reorder.html` (Tree from source: insert-between on leaves and folder edges, self/subtree rejection), `vue-runtime.html` (the `.vue` files, loaded with vue3-sfc-loader), `cards-interaction*.html`
 (clicks through the documentation demos) and `icon-rules.html` (the Keybricks glyphs against the drawing rules). Serve the repo root (`npx serve .`), open a page and read the
 console — every line starts with PASS or FAIL. Run them after changing a component in either framework.
 `measure-cards.html` is a tool, not a test: it measures each documentation page at its card width so the

package/DESIGN.md

@@ -319,6 +319,16 @@ Where each tier belongs:
 
 - **sm** — dense data grids (`SmartTable`, `Spreadsheet` and `DataPreview` set it themselves),
   controls inside pipeline nodes, a toolbar that must fit a 32px row.
+  `SmartTable` adds a **row density** on top of the tier: `default` rows are the tier's `--bar-h`
+  (36 / 40 / 48) with `--cell-px`; `compact` rows are the tier's `--control-h` (28 / 32 / 40 — the
+  same as a Spreadsheet cell) with the Spreadsheet's 8px cell padding — `--cell-px` is already 8 at
+  sm, so there only the height changes. Header and footer rows follow; the toolbar does not.
+  Both grids freeze their edges the same way: the header row is `position: sticky; top: 0` and the
+  row-number column `position: sticky; left: 0` inside the scroll area, the corner cell on both axes,
+  stacked corner > header > row numbers > body. Frozen cells keep the `--bg-inset` fill so body
+  cells never show through, and the frozen edge is a `--border-subtle` hairline — at every tier and density. Users switch it from the toolbar's *Row height* menu (a single-choice menu); `density`
+  controls it, `defaultDensity` seeds it. Pills (20), checkboxes (16) and avatars (20) all centre in
+  a 28px row. There is no taller option: long text truncates in every density.
 - **md** — everything else: app toolbars, filter bars, tables, long forms, settings pages.
 - **lg** — dialogs (`Modal` sets it), short forms, wizards, onboarding, a page with one task.
 
@@ -418,10 +428,18 @@ An indicator appears **only where a drop is legal**, and its shape names the ope
 
 - **Move into a container** — the whole target row fills `--soft-bg` with a 2px
   `--action-primary` outline. Never a half-height box: the target is the row, not an edge.
-- **Insert between** — a 2px `--action-primary` rule inset at the row's top or bottom edge.
-  Only where ordering is a real operation (`Tree` opts in with `reorder`).
-- **Nothing** — hovering an illegal target (a file, a disabled row, a node's own subtree)
-  shows no indicator at all. An indicator for a drop that would be rejected is a lie.
+- **Insert between** — an insert marker: a 2px `--action-primary` line with a 6px dot of the
+  same colour at its left end (the Finder / VS Code shape). It is its own element, not a shadow
+  on the row: it sits centred on the gap between rows, starts at the target row's content indent
+  (the chevron column, `8 + depth × 18`, which is also the guide-line elbow under `showLine`) and
+  ends at the row's right padding — so the line says which level the item lands on. The row keeps
+  its own hover or selected fill underneath. Only where ordering is a real operation (`Tree` opts
+  in with `reorder`). On a folder the
+  outer 20% of the row's height means before / after and the middle 60% means inside; a leaf
+  has no inside, so its whole height splits in half — top half before, bottom half after — and
+  draws the same rule. So under `reorder` files can be reordered among themselves.
+- **Nothing** — hovering an illegal target (a file without `reorder`, a disabled row, a node's
+  own subtree) shows no indicator at all. An indicator for a drop that would be rejected is a lie.
 - **Connecting two things** (pipeline ports) — the source handle stays lit, a dashed
   `--action-primary` bezier follows the cursor, and the reachable end point lights and swaps
   its glyph for a crosshair. Snapping is by distance, not by hover, so the wire lands even
@@ -455,7 +473,7 @@ The list that prevents the most rework. These are absolute.
 - **Do not show a drop indicator where the drop is impossible.** No half-row boxes on a
   container, no insert rules on a node that can't take children.
 - **Do not build a new primitive when one exists.** Check the component index in
-  `INTEGRATION.md` first — there are 120.
+  `INTEGRATION.md` first — there are 121.
 - **Do not use emoji as icons.** Use `<Icon name="..." />` (330 glyphs) or `<Unicon>` (1,206).
 - **Do not invent new component variants.** If `Button` lacks the variant you want, that is a
   design-system request, not a local override.

package/INTEGRATION.md

@@ -31,7 +31,7 @@ Not using a registry yet? A git dependency works with no publishing at all — t
 has no build step, so npm can use the checkout as-is:
 
 ```json
-"@keyfunc/keybricks-ds": "git+ssh://git@gitlab.epm2demo.cn/Felix/keybricks-ds.git#v2.4.0"
+"@keyfunc/keybricks-ds": "git+ssh://git@gitlab.epm2demo.cn/Felix/keybricks-ds.git#v2.4.4"
 ```
 
 **Source-only package.** `.jsx` and `.vue` files are published as authored, so your
@@ -162,7 +162,7 @@ Text, weight and tracking follow the tier through `--control-text` / `--control-
 weight becomes 600 and all tracking is 0 — nothing to configure. `DESIGN.md` has the full token
 table and the rules behind it.
 
-## Component index (120 components)
+## Component index (121 components)
 Import path is `@keyfunc/keybricks-ds/components/<group>/<Name>.jsx` (React) or `.vue` (Vue 3).
 Every component has a sibling `.d.ts` with its full props contract, and each group has a
 `.prompt.md` with usage notes.
@@ -220,12 +220,13 @@ import Textarea from '@keyfunc/keybricks-ds/components/forms/Textarea.vue'
 | `Slider` | Range input with a filled track, drag value bubble and optional min/max labels. |
 | `DatePicker` | Text field plus a month-grid popover. Values are `YYYY-MM-DD` strings; `locale` localises the month title, weekday initials and field text. |
 | `Dropzone` | File drop target with hover, drag-over, uploaded and error states. |
+| `RelativeTimePicker` | "How long ago" filter for logs, monitoring and inboxes: a field-shaped trigger opening a small dialog with an amount input, a unit select (minute … month, optional "Any time" → `null`) and a live "From" preview. Pure helpers in `forms/relative-time.js` (`resolveRelativeTime`, `normalizeRelativeTime` …). `labels` localises every string. |
 
 ### `data/` — tables and structured values
 | Component | What it's for |
 | --- | --- |
 | `Table` | The standard table (renamed from `DataTable` in 1.0.6; the old name still works as a deprecated alias from the package entry until 3.0, but file imports must point at `data/Table.jsx` / `Table.vue`): sortable headers, per-column render functions, alignment, selection. It is a size region — rows are 32 / 40 / 44px and cells share the tier's text; `size="sm"` (or the 1.x `dense`) for preview grids. Put it in a rounded box with `bordered` (it draws its own frame), or `framed` when it sits flush inside a `Card pad={false}` — never wrap it in your own bordered div, the header rule doubles against the frame. `empty` (Vue: `#empty` slot) renders inside the table when there are no rows. `resizable` adds a short divider between header cells — hover darkens it, drag sets the width; pass `columnWidths` + `onColumnResize` to persist. |
-| `SmartTable` | Notion/Airtable-style table — typed field columns, inline editing, row hover actions. |
+| `SmartTable` | Notion/Airtable-style table — typed field columns, inline editing, row hover actions, default/compact row density, frozen header row and row-number column (like `Spreadsheet`). |
 | `Spreadsheet` | Excel-style grid: formula bar, frozen headers, range selection, `=SUM()` evaluation, sheet tabs. |
 | `FilterBar` | List-report filter bar with variant title, wrapping filter fields, and Adapt Filters / Go. |
 | `ListRow` | One row of a list view — icon, title, meta, trailing actions. |
@@ -244,7 +245,7 @@ import Textarea from '@keyfunc/keybricks-ds/components/forms/Textarea.vue'
 | `PageHeading` | Page title with optional subtitle and right-aligned actions. |
 | `PageToolbar` | Secondary bar under the heading: filters, view toggles, bulk actions. |
 | `Breadcrumb` | Path trail; collapses to an ellipsis dropdown past `maxItems`. |
-| `Tree` | Generic nested tree: cascading checkboxes with indeterminate parents (`checkStrictly` opts out), disabled nodes vs. locked checkboxes, `showLine` guides, async `loadData`, search highlight, drag to move into a folder, full keyboard nav. |
+| `Tree` | Generic nested tree: cascading checkboxes with indeterminate parents (`checkStrictly` opts out), disabled nodes vs. locked checkboxes, `showLine` guides, async `loadData`, search highlight, drag to move into a folder (`reorder` adds insert-between on folder edges and between leaves), full keyboard nav. |
 | `DocTree` | Document-oriented tree with file-type glyph hues. |
 | `ThemeToggle` | Light/dark/auto switch. `applyStoredTheme()` restores the choice on load. |
 
@@ -519,6 +520,23 @@ Pin a minor range and update deliberately:
 - **Tokens outside CSS.** `tokens.json` / `tokens.js` / `tokens.d.ts` gained the tier tokens
   (`--control-*`, `--bar-h`, `--group-gap`, …) — 352 light tokens in all (2.0.2 adds `--danger-soft-hover`).
 
+### 2.4.4
+
+- **`.npmrc`** (added on `main` in `817e86d`) now reads the npmjs.org token from the `NPM_TOKEN` environment variable (`${NPM_TOKEN?}` — empty when unset, so builds never fail) instead of storing it in the repository. Set `NPM_TOKEN` locally if you need it; the GitLab release uses `CI_JOB_TOKEN` and does not.
+- **`Tree` reorder between leaves** — with `reorder`, a leaf row is now an insert target over its whole height (top half → `before`, bottom half → `after`) and shows the same insert marker as a folder edge; folders keep the 20 / 60 / 20 before / inside / after split. `onDrop({ dragKey, dropKey, position, treeData })` is unchanged; drops onto the dragged node or into its own subtree are still ignored, and `inside` on a leaf is rejected. The before / after indicator is now an insert marker — a separate 2px `--action-primary` line with a 6px dot at its left end, centred on the gap between rows, from the target row's indent (`8 + depth × 18`) to its right padding — instead of an inset shadow on the row; the row keeps its hover / selected fill, and only `inside` fills with `--soft-bg` + outline. Rows are now `position: relative`. React and Vue.
+
+### 2.4.3
+
+- **`SmartTable` frozen edges** — the field header row is `position: sticky; top: 0` and the 40px row-number column `position: sticky; left: 0` inside the scroll area (`height` sets it), the corner cell on both axes; stacked corner > header > row numbers > body, `--bg-inset` fill kept on sticky cells, `--border-subtle` hairline on the frozen edge. Works at every tier and both densities. No API change; give the grid a `height` to get vertical scrolling.
+
+### 2.4.2
+
+- **New `RelativeTimePicker`** (forms) — the relative-time filter from the product, contributed by the app team and brought onto the system rules: inline token styling (the separate `relative-time.css` is gone), `Field` labels in the dialog, `data-field` hover, `.5` disabled opacity like every other field. Unit labels may be `{ one, other }` and follow `Intl.PluralRules` of `locale` ("1 hour ago" / "2 hours ago"; a CJK label stays one string); the amount field is a plain numeric text field (`inputmode="numeric"`, no native spinners). Props unchanged: `value` / `onChange(value, date)` (Vue `v-model` + `@change`), `allowUnlimited`, `labels`, `locale`, `referenceDate`, `formatDate`, `formatValue`, `size`. Helpers in `forms/relative-time.js`. Also brought in from the 2.4.1 merge: the app team's original files (`relative-time.js`, types, prompt) are kept; only the styling moved inline.
+
+### 2.4.1
+
+- **`SmartTable` row density.** `density: "default" | "compact"` (+ `defaultDensity`, `onDensityChange`; Vue `v-model:density` / `@density-change`). Default rows stay the tier's `--bar-h`; compact rows are the tier's `--control-h` (28 at sm, the Spreadsheet's cell height) with 8px cell padding, header and footer included. The toolbar gains a *Row height* single-choice menu. `rowHeight` still works and overrides density.
+
 ### 2.4.0
 
 - **App Chrome matches the product.** `Sidebar`: 56px brand head without a rule, `--text-md` brand, a 2px-gap list, `trailing: true` items with a chevron (they open a side panel), Collapse / Expand item (chevron-left / panel-left), pinned footer and an optional `version` line. New `tone` prop — `"recessed"` (grey rail, active item a white tile with a hairline ring; **the new default**), `"flush"` (the old white look), `"contrast"` (dark-scoped rail), `"custom"` + `color` (`SIDEBAR_COLORS` or any hex). `KEYBRICKS_NAV` is the product's nav (Home … Task Execution); new `KEYBRICKS_NAV_FOOTER` (Management, Knowledge Base) is the default footer (was Help / Settings / Dark Mode) and `KEYBRICKS_MGMT` holds the Management panel groups. To keep the old look pass `tone="flush"` and your own `footerItems`.

package/_adherence.oxlintrc.json

@@ -405,6 +405,10 @@
         "selector": "JSXOpeningElement[name.name='Radio'] > JSXAttribute[name.name='size'] > Literal[value!=/^(?:sm|md|lg)$/]",
         "message": "<Radio> size must be one of 'sm' | 'md' | 'lg'."
       },
+      {
+        "selector": "JSXOpeningElement[name.name='RelativeTimeValue'] > JSXAttribute > JSXIdentifier[name!=/^(?:amount|unit|key|ref|className|style|children)$/]",
+        "message": "<RelativeTimeValue> doesn't accept that prop. Declared props: amount, unit."
+      },
       {
         "selector": "JSXOpeningElement[name.name='Ribbon3DSeries'] > JSXAttribute > JSXIdentifier[name!=/^(?:name|values|color|key|ref|className|style|children)$/]",
         "message": "<Ribbon3DSeries> doesn't accept that prop. Declared props: name, values, color."
@@ -785,6 +789,9 @@
       "Radio": {
         "replaces": []
       },
+      "RelativeTimeValue": {
+        "replaces": []
+      },
       "Ribbon3DSeries": {
         "replaces": []
       },

package/components/_cards/relative-time-picker.card.html

@@ -0,0 +1,45 @@
+<!-- @dsCard group="Components" viewport="700x720" name="Relative Time Picker" subtitle="Filter by how long ago · md / sm / lg · unlimited · disabled · localised labels" -->
+<!DOCTYPE html>
+<html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+<script src="../../_ds_bundle.js"></script>
+<script src="../_shared/card-kit.js"></script>
+<script src="../_shared/view-source.js"></script>
+<style>body{margin:0;background:var(--bg-surface)}</style></head>
+<body><div id="root"></div>
+<script type="text/babel">
+const { RelativeTimePicker, Field, Button, SearchInput } = window.KeybricksDesignSystem_71231a;
+const ZH = { title: "相对时间", amount: "数量", unit: "单位", preview: "起始时间", unlimited: "不限时间", Minute: "分钟前", Hour: "小时前", Day: "天前", Week: "周前", Month: "个月前" };
+function Sheet() {
+  const [a, setA] = React.useState({ amount: 1, unit: "Hour" });
+  const [b, setB] = React.useState({ amount: 7, unit: "Day" });
+  const [c, setC] = React.useState({ amount: 0, unit: "None" });
+  const [z, setZ] = React.useState({ amount: 30, unit: "Minute" });
+  const [last, setLast] = React.useState(null);
+  const on = (set) => (v, d) => { set(v); setLast(d ? d.toLocaleString() : "null (any time)"); };
+  return <div className="kb-sheet">
+    <KBSec title="Trigger — md · sm · lg" note="A field-shaped trigger at the tier height; click it to open the dialog (amount + unit, live “From” preview). Omit size to inherit the region's tier.">
+      <KBRow k="md"><div style={{ width: 220 }}><RelativeTimePicker value={a} onChange={on(setA)} /></div></KBRow>
+      <KBRow k="sm"><div data-size="sm" style={{ width: 200 }}><RelativeTimePicker value={b} onChange={on(setB)} /></div></KBRow>
+      <KBRow k="lg"><div data-size="lg" style={{ width: 240 }}><RelativeTimePicker value={a} onChange={on(setA)} /></div></KBRow>
+    </KBSec>
+    <KBSec title="States" note="Unlimited reads “Any time” and resolves to null. allowUnlimited={false} removes that option; 0 still means unlimited for legacy filters.">
+      <KBRow k="unlimited"><div style={{ width: 220 }}><RelativeTimePicker value={c} onChange={on(setC)} /></div></KBRow>
+      <KBRow k="no unlimited"><div style={{ width: 220 }}><RelativeTimePicker value={b} onChange={on(setB)} allowUnlimited={false} /></div></KBRow>
+      <KBRow k="disabled"><div style={{ width: 220 }}><RelativeTimePicker value={a} disabled /></div></KBRow>
+    </KBSec>
+    <KBSec title="In a filter bar · localised" note="labels overrides every string; the dialog copies the region's tier, language and theme. onChange(value, date) only fires on edits, never on mount.">
+      <KBRow k="zh-CN" style={{ display: "block" }}><div lang="zh-CN" style={{ display: "flex", alignItems: "flex-end", gap: "var(--group-gap)" }}>
+        <Field label="时间范围" style={{ width: 200 }}><RelativeTimePicker value={z} onChange={on(setZ)} labels={ZH} locale="zh-CN" /></Field>
+        <Field label="关键字" style={{ width: 200 }}><SearchInput placeholder="搜索日志" /></Field>
+        <Button variant="outline">查询</Button>
+      </div></KBRow>
+      <div className="note">Last change resolved to: <code>{last || "—"}</code></div>
+    </KBSec>
+  </div>;
+}
+ReactDOM.createRoot(document.getElementById("root")).render(<Sheet />);
+if (window.KBViewSource) setTimeout(function () { KBViewSource.mount("#root", [{ "name": "RelativeTimePicker.jsx", "path": "../forms/RelativeTimePicker.jsx" }, { "name": "relative-time.js", "path": "../forms/relative-time.js", "vue": "../forms/relative-time.js", "vueName": "relative-time.js" }]); }, 0);
+</script></body></html>

package/components/_cards/smart-table.card.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x500" name="Smart Table (Database Grid)" subtitle="Notion/Airtable-style grid — typed fields · hue pills · aggregates · + New" -->
+<!-- @dsCard group="Components" viewport="700x1040" name="Smart Table (Database Grid)" subtitle="Frozen header and row numbers · default and compact density · typed fields · hue pills · aggregates · + New" -->
 <!DOCTYPE html>
 <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
 <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
@@ -19,18 +19,31 @@ const fields=[
   {key:"done",label:"Done",type:"checkbox",width:58,aggregate:"count"},
   {key:"effort",label:"Effort",type:"number",width:68,aggregate:"sum"},
   {key:"progress",label:"Progress",type:"progress",width:118,aggregate:"avg"},
+  {key:"entity",label:"Entity",type:"select",width:96,options:{"HK":"blue","SG":"teal","CN":"purple","JP":"pink"}},
+  {key:"notes",label:"Notes",type:"longText",width:220},
 ];
-const rows=[
-  {task:"Migrate journal import",status:"Live",tags:["Data","Q3"],owner:"Felix Zhang",due:"Aug 18",done:true,effort:8,progress:100},
-  {task:"FX rounding rule review",status:"In progress",tags:["Finance","Urgent"],owner:"Maria Gomez",due:"Aug 20",done:false,effort:5,progress:60},
-  {task:"Vendor master dedupe",status:"In progress",tags:["Data"],owner:"Ken Watanabe",due:"Aug 22",done:false,effort:3,progress:45},
-  {task:"Consolidation dry run",status:"Blocked",tags:["Finance"],owner:"Priya Nair",due:"Aug 25",done:false,effort:13,progress:20},
-  {task:"Archive 2025 workpapers",status:"Backlog",tags:["Q3"],owner:"Felix Zhang",due:"Sep 02",done:false,effort:2,progress:0},
-  {task:"Reconciliation alerts",status:"Live",tags:["Data","Urgent"],owner:"Maria Gomez",due:"Aug 15",done:true,effort:5,progress:100},
+const owners=["Felix Zhang","Maria Gomez","Ken Watanabe","Priya Nair"], statuses=["Live","In progress","Blocked","Backlog"], ents=["HK","SG","CN","JP"];
+const base=[
+  {task:"Migrate journal import",tags:["Data","Q3"],notes:"Cut over after the August close"},
+  {task:"FX rounding rule review",tags:["Finance","Urgent"],notes:"Treasury sign-off pending"},
+  {task:"Vendor master dedupe",tags:["Data"],notes:"Fuzzy match on tax ID first"},
+  {task:"Consolidation dry run",tags:["Finance"],notes:"Blocked on the IC matching rules"},
+  {task:"Archive 2025 workpapers",tags:["Q3"],notes:"Retention policy: 7 years"},
+  {task:"Reconciliation alerts",tags:["Data","Urgent"],notes:"Slack channel wired up"},
+  {task:"Lease schedule rebuild",tags:["Finance"],notes:"IFRS 16 remeasurement"},
+  {task:"Budget template refresh",tags:["Q3"],notes:"Drivers moved to the Assumptions sheet"},
+  {task:"Audit evidence export",tags:["Finance","Data"],notes:"PBC list v3"},
+  {task:"Cash forecast automation",tags:["Data"],notes:"13-week rolling"},
+  {task:"Intercompany netting",tags:["Finance"],notes:"Monthly cycle, day 3"},
+  {task:"Chart of accounts cleanup",tags:["Data","Q3"],notes:"Retire 41 unused accounts"},
 ];
+const rows=base.map((b,i)=>({...b,status:statuses[i%4],owner:owners[i%4],due:"Aug "+(12+i),done:i%3===0,effort:[8,5,3,13,2,5][i%6],progress:[100,60,45,20,0,100][i%6],entity:ents[i%4]}));
 function Sheet(){return <div>
-  <SmartTable fields={fields} rows={rows} title="Launch tracker"/>
-  <div className="hint">Typed fields with per-type header icons; select/multi-select render theme-aware hue pills; hover a row number for the expand affordance; double-click text/number/date cells to edit; “+ New” appends a row; the footer aggregates per column (COUNT / SUM / AVG). Scrolls horizontally like Airtable when fields overflow.</div>
+  <SmartTable fields={fields} rows={rows} title="Launch tracker" height={300}/>
+  <div className="hint" style={{marginBottom:20}}>Frozen edges, like a Spreadsheet: scroll down and the field header stays; scroll right and the row-number column stays; the corner cell holds on both axes. Sticky cells keep the <code>--bg-inset</code> fill and a <code>--border-subtle</code> hairline on the frozen edge. Default density — rows are the tier's bar height (36px at sm). The toolbar's <b>Row height</b> menu switches between Default and Compact.</div>
+  <SmartTable fields={fields} rows={rows} title="Launch tracker — compact" defaultDensity="compact" height={240}/>
+  <div className="hint" style={{marginBottom:20}}>Compact density — rows are the tier's control height (28px at sm, the same as a Spreadsheet cell) with the Spreadsheet's 8px cell padding (the same as sm's <code>--cell-px</code>, so here only the height changes); header and footer follow, and so do the frozen edges. <code>density="compact"</code> controls it, <code>defaultDensity</code> just seeds it.</div>
+  <div className="hint">Typed fields with per-type header icons; select/multi-select render theme-aware hue pills; hover a row number for the expand affordance; double-click text/number/date cells to edit; “+ New” appends a row; the footer aggregates per column (COUNT / SUM / AVG). Without <code>height</code> the grid grows with its rows and only the row-number column freezes.</div>
 </div>;}
 ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
 if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"SmartTable.jsx","path":"../data/SmartTable.jsx"}]); }, 0);

package/components/_cards/tree.card.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x2110" name="Tree" subtitle="Cascading checkboxes · disabled nodes · lines · async load · search · drag · keyboard" -->
+<!-- @dsCard group="Components" viewport="700x2820" name="Tree" subtitle="Cascading checkboxes · disabled nodes · lines · async load · search · drag · reorder · keyboard" -->
 <!DOCTYPE html>
 <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
 <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
@@ -94,6 +94,52 @@ function Draggable(){
   </div>;
 }
 
+const REORDER=[
+  {key:"recon",title:"Reconciliation",isLeaf:false,children:[
+    {key:"bank",title:"Bank statements.xlsx",hue:"green"},
+    {key:"ic",title:"Intercompany balances.xlsx",hue:"green"},
+    {key:"ar",title:"AR aging.csv",hue:"blue"},
+    {key:"ap",title:"AP aging.csv",hue:"blue"}]},
+  {key:"adj",title:"Adjustments.docx",hue:"purple"},
+  {key:"memo",title:"Close memo.docx",hue:"purple"},
+];
+function Reorderable(){
+  const [last,setLast]=React.useState(null);
+  return <div>
+    <span className="lbl">Reorder — leaf rows are insert targets too</span>
+    <Tree items={REORDER} draggable reorder defaultExpanded={["recon"]} onDrop={(i)=>setLast(i.dragKey+" → "+i.position+" "+i.dropKey)}/>
+    <div className="hint">{last ? <>Moved <code>{last}</code></> : <>With <code>reorder</code>, drag <em>Bank statements</em> below <em>AR aging</em>: a file’s top half means before, its bottom half after. The insert marker — a 2px line with a dot — sits on the gap between rows and starts at the target’s indent. Folders keep their 20% / 60% / 20% split (before / inside / after).</>}</div>
+  </div>;
+}
+
+/* Frozen drop states for reference: each tree gets a synthetic dragstart + dragover after mount, so the real component draws its own indicator. */
+const DS_ITEMS=[{key:"recon",title:"Reconciliation",isLeaf:false,children:[{key:"bank",title:"Bank statements.xlsx",hue:"green"},{key:"ic",title:"Intercompany.xlsx",hue:"green"},{key:"ar",title:"AR aging.csv",hue:"blue"}]},{key:"memo",title:"Close memo.docx",hue:"purple"}];
+function FrozenDrop({from,to,ratio,label,note}){
+  const ref=React.useRef(null);
+  React.useEffect(()=>{
+    const row=(t)=>[...ref.current.querySelectorAll("[role=treeitem]")].find(r=>r.textContent.trim().startsWith(t));
+    const fire=(el,type,y)=>{const r=el.getBoundingClientRect();const e=new Event(type,{bubbles:true,cancelable:true});Object.defineProperty(e,"dataTransfer",{value:{effectAllowed:"move",dropEffect:"move",setData(){},getData(){return "";}}});Object.defineProperty(e,"clientY",{value:r.top+r.height*y});el.dispatchEvent(e);};
+    const t1=setTimeout(()=>{fire(row(from),"dragstart",.5);},80);
+    const t2=setTimeout(()=>{fire(row(to),"dragover",ratio);},200);
+    return ()=>{clearTimeout(t1);clearTimeout(t2);};
+  },[]);
+  return <div ref={ref}>
+    <span className="lbl">{label}</span>
+    <Tree items={DS_ITEMS} draggable reorder defaultExpanded={["recon"]} defaultSelected={["ic"]}/>
+    <div className="hint">{note}</div>
+  </div>;
+}
+function DropStates(){
+  return <div style={{gridColumn:"1/-1"}}>
+    <span className="lbl" style={{color:"var(--text-heading)",fontWeight:"var(--weight-medium)"}}>Drop states — dragging <em>Close memo</em> (frozen for reference)</span>
+    <div style={{display:"grid",gridTemplateColumns:"repeat(3,minmax(0,1fr))",gap:20}}>
+      <FrozenDrop from="Close memo" to="Intercompany" ratio={.25} label="Before — top half of a file" note="2px line with a 6px dot, between Bank statements above and this row, starting at the file's indent. The selected row keeps its fill."/>
+      <FrozenDrop from="Close memo" to="Intercompany" ratio={.75} label="After — bottom half of a file" note="The same marker on the gap below. Its left end at the child indent says the item lands inside Reconciliation."/>
+      <FrozenDrop from="Close memo" to="Reconciliation" ratio={.5} label="Inside — middle 60% of a folder" note="Only “inside” fills the row: --soft-bg with a 2px outline. A folder’s outer 20% draws the before / after marker at the folder’s own indent."/>
+    </div>
+  </div>;
+}
+
 function AsyncLoad(){
   const [log,setLog]=React.useState(0);
   const load=(node)=>new Promise(res=>setTimeout(()=>{
@@ -136,13 +182,13 @@ function Sheet(){return <div className="g">
   <Basic/><Checkable/>
   <Strict/><DisabledCase/>
   <Lines/><Multi/>
-  <Draggable/><AsyncLoad/>
+  <Draggable/><Reorderable/><DropStates/><AsyncLoad/>
   <Searchable/><WithActions/>
   <div className="note">
     <strong>Keyboard.</strong> The tree is a single tab stop. <code>↑ ↓</code> move between visible rows, <code>→</code> opens a branch (or steps into it), <code>←</code> closes it (or jumps to the parent), <code>Enter</code> selects, <code>Space</code> toggles the checkbox. Focus draws the global 2px <code>--focus-ring</code>, never a new colour.
     <br/><br/><strong>Checkbox semantics.</strong> A parent is checked only when every <em>enabled</em> descendant is checked, and indeterminate when some are — so <code>disabled</code> and <code>disableCheckbox</code> rows never block a parent from completing. Use <code>checkStrictly</code> when a branch is a real selectable value rather than a roll-up of its children.
     <br/><br/><strong>Selection vs. expansion.</strong> With <code>selectable={"{false}"}</code> a row click only expands — the right default for a checkbox picker. Otherwise a click both selects and expands, matching the file-tree pattern used in the product sidebar.
-    <br/><br/><strong>Dragging moves a node into a folder.</strong> Files are not drop targets — hovering one shows nothing rather than an indicator for a move that can’t happen — and neither is a folder inside the dragged node’s own subtree. Pass <code>reorder</code> when order matters: a folder’s outer 20% then becomes a thin insert rule above or below it.
+    <br/><br/><strong>Dragging moves a node into a folder.</strong> Files are not drop targets — hovering one shows nothing rather than an indicator for a move that can’t happen — and neither is a folder inside the dragged node’s own subtree. Pass <code>reorder</code> when order matters: a folder’s outer 20% and either half of a file then draw an insert marker — a 2px line with a 6px dot on the gap between rows, starting at the target’s indent so the landing level is visible.
   </div>
 </div>;}
 ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);