@bimetal/tree-svelte-components 0.35.0 → 0.37.0

package/dist/Tree.svelte

@@ -2,8 +2,8 @@
   import { onDestroy, untrack, type Snippet } from 'svelte';
   import { createTreeControllerBinding } from '@bimetal/svelte';
   import type { TreeStore } from '@bimetal/tree-data';
-  import type { TreeConfigInput, TreeController, TreeControllerSnapshot, TreeRowView } from '@bimetal/tree-headless';
-  import { treeRowIndent, treeCssVars } from '@bimetal/tree-headless';
+  import type { TreeConfigInput, TreeController, TreeControllerSnapshot, TreeRowView , TreeControllerOptions, TreeScrollAnchor } from '@bimetal/tree-headless';
+  import { treeRowIndent, treeCssVars, reportUnroutedTreeError } from '@bimetal/tree-headless';
   import TreeDialog from './TreeDialog.svelte';
   import { isEditableTarget } from '@bimetal/a11y-dom';
 
@@ -29,6 +29,7 @@
     onError = undefined,
     onSelectionChange = undefined,
     onCheckedChange = undefined,
+    loadChildren = undefined,
     renderNode = undefined,
   }: {
     /**
@@ -45,7 +46,11 @@
     config?: TreeConfigInput;
     /** Apply the dark token set (`data-theme="dark"`). */
     darkMode?: boolean;
-    /** Text/layout direction, applied as `dir` on the root (`ltr`/`rtl`). */
+    /** Text/layout direction, applied as `dir` on the root (`ltr`/`rtl`).
+     *  Seit mcp-93 steuert sie zusaetzlich die TASTATUR: unter `rtl` sind die
+     *  horizontalen Pfeiltasten getauscht, wie das ARIA-Tree-Pattern es verlangt.
+     *  Sie speist `config.direction`; ein ausdruecklich gesetztes `config.direction`
+     *  hat Vorrang. */
     dir?: 'ltr' | 'rtl';
     /** Optional toolbar heading. Omitted → no heading is rendered. */
     title?: string;
@@ -63,19 +68,77 @@
     /** OBSERVE hook (standalone only): the SECOND independent axis — the checkbox
      *  axis, not a dedup of selection. Fires when the checked set changes. */
     onCheckedChange?: (checkedIds: readonly string[]) => void;
+    loadChildren?: TreeControllerOptions['loadChildren'];
     /** Replace ONLY a row's content cell (icon/label/badge). */
     renderNode?: Snippet<[TreeRowView]>;
   } = $props();
 
   // Dual-API: bound path uses the given controller (binding = null → never
   // created/destroyed/setConfig here); standalone creates one ONCE under `untrack`.
-  const binding = untrack(() => (controller ? null : createTreeControllerBinding({ store: store!, treeId: treeId!, config, onError: (err) => onError?.(err), onSelectionChange, onCheckedChange })));
+  // bimetal-181: der GETTER ist die Aussage — er liest die `$props()`-Bindungen bei
+  // jedem Callback-Aufruf erneut, statt den Stand des `untrack`-Aufbaus festzunageln.
+  // mcp-93: `dir` ist die SICHTBARE Schreibrichtung — unter RTL verlangt das
+  // ARIA-Tree-Pattern getauschte horizontale Pfeiltasten, und die Tastatur-Semantik
+  // sitzt im Controller. Deshalb speist `dir` `config.direction`; ein ausdruecklich
+  // gesetztes `config.direction` hat Vorrang. Gibt bei fehlendem `dir` die
+  // Original-Referenz zurueck — ein neues Objekt je Aufruf waere ein unnoetiger
+  // `setConfig`-Anlauf. Begruendung im Detail: tree-react.
+  const mitRichtung = (c: TreeConfigInput | undefined, d: 'ltr' | 'rtl' | undefined): TreeConfigInput | undefined =>
+    d && c?.direction === undefined ? { ...c, direction: d } : c;
+
+  const binding = untrack(() => (controller ? null : createTreeControllerBinding(() => ({ store: store!, treeId: treeId!, config: mitRichtung(config, dir), onError: (err) => (onError ?? reportUnroutedTreeError)(err), onSelectionChange, onCheckedChange, loadChildren }))));
   const ctrl = controller ?? binding!.ctrl;
+  // bimetal-225: der Mount wird gemeldet, sonst raeumt das Binding sich per Microtask
+  // selbst ab (der Controller entsteht im untrack-Aufbau und haelt ab da ein Store-Abo,
+  // und bei einer nie gemounteten Instanz laeuft KEIN Aufraeum-Haken). Ein $effect
+  // laeuft im Mount-Flush, also vor dem Microtask — gemessen.
+  binding?.erwarteMount();  // bimetal-225: Selbstabraeumung armieren (Opt-in)
+  $effect(() => { binding?.markMounted(); });
   // Snapshot store — sourced from `ctrl` so it works for both API halves (both are
   // a `SnapshotSource`); the bound path never touches the owned controller's lifecycle.
   const snapshotStore = { subscribe: (run: (s: TreeControllerSnapshot) => void) => { run(ctrl.getSnapshot()); return ctrl.subscribe(() => run(ctrl.getSnapshot())); } };
 
   let listEl: HTMLDivElement | null = $state(null);
+
+  // Scroll-Anker (bimetal-138): EINMAL je Anker-Objekt den absoluten
+  // Ziel-scrollTop setzen — `$effect` laeuft nach dem DOM-Update.
+  let angewandterAnker: TreeScrollAnchor | null = null;
+  $effect(() => {
+    const a = $snapshotStore.virtual?.anchor ?? null;
+    const el = listEl;
+    if (!a || !el || angewandterAnker === a) return;
+    angewandterAnker = a;
+    if (el.scrollTop !== a.scrollTop) el.scrollTop = a.scrollTop;
+  });
+
+  // Virtualization: REPORT the viewport; the controller owns the window math
+  // (mcp-60, list parity).
+  $effect(() => {
+    const el = listEl;
+    if (!el) return;
+    const report = () => ctrl.setViewport(el.scrollTop, el.clientHeight);
+    report();
+    el.addEventListener('scroll', report, { passive: true });
+    // M1 (mcp-60 review): a windowed-out FOCUSED row drops DOM focus to
+    // <body> mid-interaction; relatedTarget-null focusout is ambiguous at
+    // dispatch time — a microtask later the unmounted row is disconnected.
+    // Fall back onto the container (tabindex -1, the keydown host).
+    let focusInside = false;
+    const onFocusIn = () => { focusInside = true; };
+    const onFocusOut = (e: FocusEvent) => {
+      if (e.relatedTarget instanceof Node) { focusInside = el.contains(e.relatedTarget); return; }
+      const target = e.target as HTMLElement;
+      queueMicrotask(() => {
+        if (target.isConnected) { focusInside = false; return; }
+        if (focusInside && document.activeElement === document.body) el.focus({ preventScroll: true });
+      });
+    };
+    el.addEventListener('focusin', onFocusIn);
+    el.addEventListener('focusout', onFocusOut);
+    const ro = new ResizeObserver(report);
+    ro.observe(el);
+    return () => { el.removeEventListener('scroll', report); el.removeEventListener('focusin', onFocusIn); el.removeEventListener('focusout', onFocusOut); ro.disconnect(); };
+  });
   let suppressClick = false;
 
   const onKey = (e: KeyboardEvent) =>
@@ -138,10 +201,12 @@
 {#if $snapshotStore}
   {@const snap = $snapshotStore}
   {@const domFocus = snap.navAnchor}
-  <div class="bm-tree" data-theme={darkMode ? 'dark' : undefined} dir={dir} style={cssVars(snap)}>
+  <div class={'bm-tree' + (snap.virtual ? ' bm-tree--virtual' : '')} data-theme={darkMode ? 'dark' : undefined} dir={dir} style={cssVars(snap)}>
     <div class="bm-tree__toolbar">
       {#if title}<h1 class="bm-tree__title">{title}</h1>{/if}
       {#if tag}<span class="bm-tree__tag">{tag}</span>{/if}
+      <!-- mcp-64: Mutations-Affordanzen fallen im View-Only-Modus (kein toter Knopf). -->
+      {#if !snap.config.readOnly}
       <button class="bm-tree__btn bm-tree__btn--primary" type="button" disabled={snap.focusId === null} onclick={() => ctrl.voidAddChild(snap.focusId)}>+ {snap.config.locale.addChild}</button>
       <button class="bm-tree__btn" type="button" disabled={snap.focusId === null} onclick={() => snap.focusId && ctrl.voidAddSibling(snap.focusId)}>+ {snap.config.locale.addSibling}</button>
       <button class="bm-tree__btn" type="button" disabled={snap.focusId === null} onclick={(e) => snap.focusId && ctrl.openEdit(snap.focusId, rect(e))}>{snap.config.locale.rename}</button>
@@ -151,15 +216,17 @@
         <button class="bm-tree__btn bm-tree__btn--undo" type="button" aria-label={snap.config.locale.undo} title={snap.config.locale.undo} disabled={!snap.canUndo} onclick={() => ctrl.voidUndo()}>↶</button>
         <button class="bm-tree__btn bm-tree__btn--redo" type="button" aria-label={snap.config.locale.redo} title={snap.config.locale.redo} disabled={!snap.canRedo} onclick={() => ctrl.voidRedo()}>↷</button>
       {/if}
+      {/if}
       <button class="bm-tree__btn" type="button" onclick={() => ctrl.expandAll()}>{snap.config.locale.expandAll}</button>
       <button class="bm-tree__btn" type="button" onclick={() => ctrl.collapseAll()}>{snap.config.locale.collapseAll}</button>
-      <input class="bm-tree__search" type="search" placeholder={snap.config.locale.search} value={snap.filterQuery}
+      <input class="bm-tree__search" type="search" placeholder={(snap.config.locale.searchPlaceholder ?? snap.config.locale.search)} value={snap.filterQuery}
         oninput={(e) => ctrl.setFilter((e.target as HTMLInputElement).value)} />
     </div>
 
     <!-- svelte-ignore a11y_interactive_supports_focus -->
-    <div class="bm-tree__list" role="tree" aria-label={ariaLabel ?? title ?? snap.config.locale.label} bind:this={listEl} onkeydown={onKey}>
-      {#each snap.rows as r (r.node.id)}
+    <div class="bm-tree__list" tabindex="-1" role="tree" aria-label={ariaLabel ?? title ?? snap.config.locale.label} bind:this={listEl} onkeydown={onKey}>
+      {#if snap.virtual && snap.virtual.offsetTop > 0}<div class="bm-tree__spacer" aria-hidden="true" style="height: {snap.virtual.offsetTop}px"></div>{/if}
+      {#each (snap.virtual ? snap.virtual.rows : snap.rows) as r (r.node.id)}
         <!-- svelte-ignore a11y_click_events_have_key_events -->
         <div class={rowClass(snap, r)}
           data-node-id={r.node.id}
@@ -168,13 +235,14 @@
           aria-posinset={r.posinset}
           aria-setsize={r.setsize}
           aria-selected={r.selected}
+          aria-busy={r.loading || undefined}
           aria-expanded={r.hasChildren ? r.expanded : undefined}
           aria-disabled={r.meta.disabled || undefined}
           tabindex={r.node.id === domFocus ? 0 : -1}
-          style="padding-left:{treeRowIndent(r.depth, snap) + 8}px"
+          style="padding-inline-start:{treeRowIndent(r.depth, snap) + 8}px"
           onpointerdown={(e) => onRowPointerDown(e, r.node.id)}
           onclick={(e) => onRowClick(e, r.node.id)}>
-          <span class={'bm-tree__chevron' + (r.hasChildren ? (r.expanded ? ' bm-tree__chevron--expanded' : '') : ' bm-tree__chevron--leaf')}>▶</span>
+          <span class={'bm-tree__chevron' + (r.hasChildren ? (r.expanded ? ' bm-tree__chevron--expanded' : '') : ' bm-tree__chevron--leaf') + (r.loading ? ' bm-tree__chevron--loading' : '')}>▶</span>
           {#if snap.config.checkboxes}
             <span class={checkboxClass(r.checkState)} role="checkbox" aria-checked={r.checkState === 'indeterminate' ? 'mixed' : r.checkState === 'checked'} aria-label={snap.config.locale.check}></span>
           {/if}
@@ -185,6 +253,7 @@
           {/if}
         </div>
       {/each}
+      {#if snap.virtual && snap.virtual.offsetBottom > 0}<div class="bm-tree__spacer" aria-hidden="true" style="height: {snap.virtual.offsetBottom}px"></div>{/if}
     </div>
 
     {#if snap.dialog}
@@ -195,7 +264,7 @@
     {/if}
 
     {#if snap.lastAction}
-      <div class="bm-tree__toast" role="status">
+      <div class="bm-tree__toast{snap.lastAction.kind === 'error' ? ' bm-tree__toast--error' : ''}" role={snap.lastAction.kind === 'error' ? 'alert' : 'status'}>
         <span class="bm-tree__toast-msg">{snap.lastAction.description}</span>
         <button class="bm-tree__toast-dismiss" type="button" onclick={() => ctrl.dismissUndo()}>×</button>
       </div>

package/dist/Tree.svelte.d.ts

@@ -1,6 +1,6 @@
 import { type Snippet } from 'svelte';
 import type { TreeStore } from '@bimetal/tree-data';
-import type { TreeConfigInput, TreeController, TreeRowView } from '@bimetal/tree-headless';
+import type { TreeConfigInput, TreeController, TreeRowView, TreeControllerOptions } from '@bimetal/tree-headless';
 type $$ComponentProps = {
     /**
      * BOUND (composition contract, F1): an already-owned controller. The component
@@ -16,7 +16,11 @@ type $$ComponentProps = {
     config?: TreeConfigInput;
     /** Apply the dark token set (`data-theme="dark"`). */
     darkMode?: boolean;
-    /** Text/layout direction, applied as `dir` on the root (`ltr`/`rtl`). */
+    /** Text/layout direction, applied as `dir` on the root (`ltr`/`rtl`).
+     *  Seit mcp-93 steuert sie zusaetzlich die TASTATUR: unter `rtl` sind die
+     *  horizontalen Pfeiltasten getauscht, wie das ARIA-Tree-Pattern es verlangt.
+     *  Sie speist `config.direction`; ein ausdruecklich gesetztes `config.direction`
+     *  hat Vorrang. */
     dir?: 'ltr' | 'rtl';
     /** Optional toolbar heading. Omitted → no heading is rendered. */
     title?: string;
@@ -34,6 +38,7 @@ type $$ComponentProps = {
     /** OBSERVE hook (standalone only): the SECOND independent axis — the checkbox
      *  axis, not a dedup of selection. Fires when the checked set changes. */
     onCheckedChange?: (checkedIds: readonly string[]) => void;
+    loadChildren?: TreeControllerOptions['loadChildren'];
     /** Replace ONLY a row's content cell (icon/label/badge). */
     renderNode?: Snippet<[TreeRowView]>;
 };

package/dist/Tree.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tree.svelte.d.ts","sourceRoot":"","sources":["../src/Tree.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAsB,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAE1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAA0B,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAOlH,KAAK,gBAAgB,GAAI;IACtB;;;;OAIG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,8EAA8E;IAC9E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uEAAuE;IACvE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yEAAyE;IACzE,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACpB,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gGAAgG;IAChG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;mFAC+E;IAC/E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iFAAiF;IACjF,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,oGAAoG;IACpG,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,SAAS,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7D;8EAC0E;IAC1E,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,SAAS,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1D,4DAA4D;IAC5D,UAAU,CAAC,EAAE,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC;CACrC,CAAC;AA8JJ,QAAA,MAAM,IAAI,sDAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Tree.svelte.d.ts","sourceRoot":"","sources":["../src/Tree.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAsB,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAE1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAA0B,WAAW,EAAG,qBAAqB,EAAoB,MAAM,wBAAwB,CAAC;AAO5J,KAAK,gBAAgB,GAAI;IACtB;;;;OAIG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,8EAA8E;IAC9E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uEAAuE;IACvE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;uBAImB;IACnB,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACpB,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gGAAgG;IAChG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;mFAC+E;IAC/E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iFAAiF;IACjF,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,oGAAoG;IACpG,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,SAAS,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7D;8EAC0E;IAC1E,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,SAAS,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1D,YAAY,CAAC,EAAE,qBAAqB,CAAC,cAAc,CAAC,CAAC;IACrD,4DAA4D;IAC5D,UAAU,CAAC,EAAE,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC;CACrC,CAAC;AA6NJ,QAAA,MAAM,IAAI,sDAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/styles/index.css.d.ts

@@ -0,0 +1,3 @@
+// Generated by scripts/generate-css-stubs.mjs — DO NOT EDIT.
+// Type-stub for side-effect CSS import (TS moduleResolution: nodenext/bundler).
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bimetal/tree-svelte-components",
-  "version": "0.35.0",
+  "version": "0.37.0",
   "description": "Default Svelte 5 tree / treeview — multi-select, expand/collapse, tri-state checkboxes, drag-reorder, rename, undo, theming. A thin binding over the canonical tree controller.",
   "type": "module",
   "svelte": "./dist/index.js",
@@ -12,7 +12,10 @@
       "svelte": "./dist/index.js",
       "import": "./dist/index.js"
     },
-    "./styles": "./dist/styles/index.css"
+    "./styles": {
+      "types": "./dist/styles/index.css.d.ts",
+      "default": "./dist/styles/index.css"
+    }
   },
   "files": [
     "dist",
@@ -20,31 +23,33 @@
     "LICENSE"
   ],
   "scripts": {
-    "build": "svelte-package -i src -o dist && node scripts/copy-css.mjs",
+    "build": "svelte-package -i src -o dist && node scripts/copy-css.mjs && node ../../../scripts/generate-css-stubs.mjs",
     "dev": "svelte-package -i src -o dist --watch",
-    "typecheck": "svelte-check --tsconfig ./tsconfig.json",
+    "typecheck": "svelte-check --tsconfig ./tsconfig.test.json",
     "test": "vitest run",
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@bimetal/svelte": "^0.35.0",
-    "@bimetal/tree-data": "^0.35.0",
-    "@bimetal/tree-headless": "^0.35.0",
-    "@bimetal/tree-themes": "^0.35.0",
-    "@bimetal/a11y-dom": "^0.35.0"
+    "@bimetal/svelte": "^0.37.0",
+    "@bimetal/tree-data": "^0.37.0",
+    "@bimetal/tree-headless": "^0.37.0",
+    "@bimetal/tree-themes": "^0.37.0",
+    "@bimetal/a11y-dom": "^0.37.0"
   },
   "peerDependencies": {
     "svelte": "^5.46.4"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.0",
-    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "@testing-library/svelte": "^5.2.7",
     "happy-dom": "^18.0.1",
     "svelte": "^5.46.4",
     "svelte-check": "^4.0.0",
     "typescript": "~5.9.3",
-    "vitest": "^3.2.4"
+    "@types/node": "^25.8.0",
+    "vitest": "^5.0.0",
+    "vite": "^8.0.1"
   },
   "sideEffects": [
     "**/*.css"