@keyfunc/keybricks-ds 2.4.2 → 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.2 && git push --tags
+git tag v2.4.4 && git push --tags
 ```
 
 That tag runs `generated:check` → `version:check` → `npm publish`. Confirm under *Deploy →
@@ -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.2"
+"@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), `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), `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

@@ -322,7 +322,11 @@ Where each tier belongs:
   `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. Users switch it from the toolbar's *Row height* menu (a single-choice menu); `density`
+  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.
@@ -424,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

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.2"
+"@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
@@ -226,7 +226,7 @@ import Textarea from '@keyfunc/keybricks-ds/components/forms/Textarea.vue'
 | 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. |
@@ -245,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. |
 
@@ -520,6 +520,15 @@ 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.

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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x900" name="Smart Table (Database Grid)" subtitle="Default and compact row density · 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,21 +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" style={{marginBottom:20}}>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.slice(0,4)} title="Launch tracker — compact" defaultDensity="compact"/>
-  <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. <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). 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/>);