@bimetal/tree-svelte-components 0.32.0

package/LICENSE

@@ -0,0 +1,129 @@
+# PolyForm Noncommercial License 1.0.0
+
+<https://polyformproject.org/licenses/noncommercial/1.0.0>
+
+## Acceptance
+
+In order to get any license under these terms, you must agree
+to them as both strict obligations and conditions to all
+your licenses.
+
+## Copyright License
+
+The licensor grants you a copyright license for the
+software to do everything you might do with the software
+that would otherwise infringe the licensor's copyright
+in it for any permitted purpose.  However, you may
+only distribute the software according to [Distribution
+License](#distribution-license) and make changes or new works
+based on the software according to [Changes and New Works
+License](#changes-and-new-works-license).
+
+## Distribution License
+
+The licensor grants you an additional copyright license
+to distribute copies of the software.  Your license
+to distribute covers distributing the software with
+changes and new works permitted by [Changes and New Works
+License](#changes-and-new-works-license).
+
+## Notices
+
+You must ensure that anyone who gets a copy of any part of
+the software from you also gets a copy of these terms or the
+URL for them above, as well as copies of any plain-text lines
+beginning with `Required Notice:` that the licensor provided
+with the software.  For example:
+
+> Required Notice: Copyright Andreas Biederbeck (https://bimetal.dev)
+
+## Changes and New Works License
+
+The licensor grants you an additional copyright license to
+make changes and new works based on the software for any
+permitted purpose.
+
+## Patent License
+
+The licensor grants you a patent license for the software that
+covers patent claims the licensor can license, or becomes able
+to license, that you would infringe by using the software.
+
+## Noncommercial Purposes
+
+Any noncommercial purpose is a permitted purpose.
+
+## Personal Uses
+
+Personal use for research, experiment, and testing for
+the benefit of public knowledge, personal study, private
+entertainment, hobby projects, amateur pursuits, or religious
+observance, without any anticipated commercial application,
+is use for a permitted purpose.
+
+## Noncommercial Organizations
+
+Use by any charitable organization, educational institution,
+public research organization, public safety or health
+organization, environmental protection organization,
+or government institution is use for a permitted purpose
+regardless of the source of funding or obligations resulting
+from the funding.
+
+## Fair Use
+
+You may have "fair use" rights for the software under the
+law. These terms do not limit them.
+
+## No Other Rights
+
+These terms do not allow you to sublicense or transfer any of
+your licenses to anyone else, or prevent the licensor from
+granting licenses to anyone else.  These terms do not imply
+any other licenses.
+
+## Patent Defense
+
+If you make any written claim that the software infringes or
+contributes to infringement of any patent, your patent license
+for the software granted under these terms ends immediately. If
+your company makes such a claim, your patent license ends
+immediately for work on behalf of your company.
+
+## Violations
+
+The first time you are notified in writing that you have
+violated any of these terms, or any agreement made under them,
+you have 32 calendar days to come into compliance.  If you come
+into compliance, your licenses revive and continue as if you had
+never violated.
+
+## No Liability
+
+***As far as the law allows, the software comes as is, without
+any warranty or condition, and the licensor will not be liable
+to you for any damages arising out of these terms or the use
+or nature of the software, under any kind of legal claim.***
+
+## Definitions
+
+The **licensor** is the individual or entity offering these
+terms, and the **software** is the software the licensor makes
+available under these terms.
+
+**You** refers to the individual or entity agreeing to these
+terms.
+
+**Your company** is any legal entity, sole proprietorship,
+or other kind of organization that you work for, plus all
+organizations that have control over, are under the control of,
+or are under common control with that organization.  **Control**
+means ownership of substantially all the assets of an entity,
+or the power to direct its management and policies by vote,
+contract, or otherwise.  Control can be direct or indirect.
+
+**Your licenses** are all the licenses granted to you for the
+software under these terms.
+
+**Use** means anything you do with the software requiring one
+of your licenses.

package/README.md

@@ -0,0 +1,18 @@
+# @bimetal/tree-svelte-components
+
+The default Svelte 5 **tree / treeview** — a thin binding over the canonical
+`@bimetal/tree-headless` controller. Multi-select, expand/collapse, tri-state
+checkboxes, drag-reorder, keyboard nav/move, rename, undo. Renders the canonical
+`.bm-tree*` DOM with ARIA tree roles; styles ship from `@bimetal/tree-themes`.
+
+```
+import { Tree } from '@bimetal/tree-svelte-components';
+
+<Tree {store} treeId="docs" config={{ checkboxes: true }} title="Docs" />
+```
+
+Every interaction decision lives in the controller — this binding only forwards DOM
+events and applies `tabindex` from the controller-derived `navAnchor`. A `renderNode`
+slot customizes ONLY the node content cell (icon/label/badge); the chevron, checkbox,
+row structure and ARIA stay component-owned. A consumer who needs full control can
+skip the component and drive `@bimetal/tree-headless` directly.

package/dist/Tree.svelte

@@ -0,0 +1,180 @@
+<script lang="ts">
+  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 TreeDialog from './TreeDialog.svelte';
+  import { isEditableTarget } from '@bimetal/a11y-dom';
+
+  let {
+    controller,
+    store,
+    treeId,
+    config = undefined,
+    darkMode = false,
+    dir = undefined,
+    title = undefined,
+    tag = undefined,
+    ariaLabel = undefined,
+    onError = undefined,
+    onSelectionChange = undefined,
+    onCheckedChange = undefined,
+    renderNode = undefined,
+  }: {
+    /**
+     * BOUND (composition contract, F1): an already-owned controller. The component
+     * renders its snapshot and forwards intents — it NEVER creates, destroys, or
+     * setConfig it (binding stays null). Pass this OR the standalone props.
+     */
+    controller?: TreeController;
+    store?: TreeStore;
+    treeId?: string;
+    config?: TreeConfigInput;
+    darkMode?: boolean;
+    dir?: 'ltr' | 'rtl';
+    title?: string;
+    tag?: string;
+    ariaLabel?: string;
+    onError?: (err: unknown) => void;
+    /** OBSERVE hook (standalone only): fires when the selection changes (ordered selected node ids). */
+    onSelectionChange?: (selectedIds: readonly string[]) => void;
+    /** 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;
+    /** 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 })));
+  const ctrl = controller ?? binding!.ctrl;
+  // 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);
+  let suppressClick = false;
+
+  const onKey = (e: KeyboardEvent) =>
+    ctrl.handleKeydown({ key: e.key, ctrlKey: e.ctrlKey, metaKey: e.metaKey, shiftKey: e.shiftKey, isEditable: isEditableTarget(e.target), preventDefault: () => e.preventDefault() });
+  const onMove = (e: PointerEvent) => {
+    if (e.buttons === 0) return;
+    const rowEl = (document.elementFromPoint(e.clientX, e.clientY) as HTMLElement | null)?.closest('.bm-tree__row') as HTMLElement | null;
+    const id = rowEl?.dataset.nodeId;
+    let over: { nodeId: string; rect: { top: number; height: number } } | undefined;
+    // Instance-scoped: only accept a hit-test row belonging to THIS tree.
+    if (rowEl && id && listEl?.contains(rowEl)) { const r = rowEl.getBoundingClientRect(); over = { nodeId: id, rect: { top: r.top, height: r.height } }; }
+    ctrl.pointerMove({ x: e.clientX, y: e.clientY }, e.pointerId, over);
+  };
+  const onUp = (e: PointerEvent) => { if (ctrl.pointerUp(e.pointerId)) suppressClick = true; };
+  const onCancel = (e: PointerEvent) => { ctrl.pointerCancel(e.pointerId); };
+  // Global pointer listeners live in an $effect (browser-only, with cleanup) — never
+  // at instance-init, so import-time/SSR rendering doesn't touch `window`.
+  $effect(() => {
+    window.addEventListener('pointermove', onMove);
+    window.addEventListener('pointerup', onUp);
+    window.addEventListener('pointercancel', onCancel);
+    return () => {
+      window.removeEventListener('pointermove', onMove);
+      window.removeEventListener('pointerup', onUp);
+      window.removeEventListener('pointercancel', onCancel);
+    };
+  });
+  onDestroy(() => binding?.destroy());
+
+  // Roving focus: keep DOM focus on the focused row when focus is in the tree (scoped to this list).
+  $effect(() => {
+    const id = $snapshotStore.focusId;
+    if (!id || !listEl || !listEl.contains(document.activeElement)) return;
+    Array.from(listEl.querySelectorAll<HTMLElement>('.bm-tree__row')).find(r => r.dataset.nodeId === id)?.focus();
+  });
+
+  type Row = TreeControllerSnapshot['rows'][number];
+  const cssVars = (s: TreeControllerSnapshot) => Object.entries(treeCssVars(s)).map(([k, v]) => `${k}:${v}`).join(';');
+  function rowClass(s: TreeControllerSnapshot, r: Row): string {
+    let c = 'bm-tree__row';
+    if (r.selected) c += ' bm-tree__row--selected';
+    if (r.focused) c += ' bm-tree__row--focused';
+    if (r.matched) c += ' bm-tree__row--matched';
+    if (r.meta.disabled) c += ' bm-tree__row--disabled';
+    if (s.drag?.nodeId === r.node.id) c += ' bm-tree__row--dragging';
+    if (s.drag?.over?.targetId === r.node.id) c += ` bm-tree__row--drop-${s.drag.over.zone}`;
+    return c;
+  }
+  function onRowPointerDown(e: PointerEvent, id: string) { suppressClick = false; ctrl.pointerDownOnNode(id, { x: e.clientX, y: e.clientY }, e.pointerId); }
+  function onRowClick(e: MouseEvent, id: string) {
+    if (suppressClick) { suppressClick = false; return; }
+    if ((e.target as HTMLElement).closest('.bm-tree__checkbox')) { ctrl.toggleCheck(id); return; }
+    if ((e.target as HTMLElement).closest('.bm-tree__chevron')) ctrl.toggleExpand(id);
+    else ctrl.selectNode(id, { additive: e.ctrlKey || e.metaKey, range: e.shiftKey });
+  }
+  const checkboxClass = (state: string) => 'bm-tree__checkbox' + (state === 'checked' ? ' bm-tree__checkbox--checked' : state === 'indeterminate' ? ' bm-tree__checkbox--indeterminate' : '');
+  const rect = (e: MouseEvent) => (e.currentTarget as HTMLElement).getBoundingClientRect();
+</script>
+
+{#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__toolbar">
+      {#if title}<h1 class="bm-tree__title">{title}</h1>{/if}
+      {#if tag}<span class="bm-tree__tag">{tag}</span>{/if}
+      <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>
+      <button class="bm-tree__btn" type="button" disabled={snap.focusId === null} onclick={() => ctrl.voidDeleteSelection()}>{snap.config.locale.delete}</button>
+      <button class="bm-tree__btn" type="button" disabled={snap.focusId === null} onclick={() => snap.focusId && ctrl.voidDuplicate(snap.focusId)}>{snap.config.locale.duplicate}</button>
+      <button class="bm-tree__btn" type="button" onclick={() => ctrl.voidUndo()}>↶ {snap.config.locale.undo}</button>
+      <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}
+        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)}
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <div class={rowClass(snap, r)}
+          data-node-id={r.node.id}
+          role="treeitem"
+          aria-level={r.depth + 1}
+          aria-posinset={r.posinset}
+          aria-setsize={r.setsize}
+          aria-selected={r.selected}
+          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"
+          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>
+          {#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}
+          {#if renderNode}{@render renderNode(r)}{:else}
+            {#if r.meta.icon}<span class="bm-tree__icon">{r.meta.icon}</span>{/if}
+            <span class="bm-tree__label">{r.node.title}</span>
+            {#if r.meta.badge}<span class="bm-tree__badge">{r.meta.badge}</span>{/if}
+          {/if}
+        </div>
+      {/each}
+    </div>
+
+    {#if snap.dialog}
+      {#key snap.dialog.node.id}
+        <TreeDialog dialog={snap.dialog} locale={snap.config.locale} rootFallback={() => listEl}
+          onsave={(d) => ctrl.voidSaveNode(d)} onclose={() => ctrl.closeDialog()} />
+      {/key}
+    {/if}
+
+    {#if snap.lastAction}
+      <div class="bm-tree__toast" role="status">
+        <span class="bm-tree__toast-msg">{snap.lastAction.description}</span>
+        <button class="bm-tree__toast-dismiss" type="button" onclick={() => ctrl.dismissUndo()}>×</button>
+      </div>
+    {/if}
+  </div>
+{/if}

package/dist/Tree.svelte.d.ts

@@ -0,0 +1,31 @@
+import { type Snippet } from 'svelte';
+import type { TreeStore } from '@bimetal/tree-data';
+import type { TreeConfigInput, TreeController, TreeRowView } from '@bimetal/tree-headless';
+type $$ComponentProps = {
+    /**
+     * BOUND (composition contract, F1): an already-owned controller. The component
+     * renders its snapshot and forwards intents — it NEVER creates, destroys, or
+     * setConfig it (binding stays null). Pass this OR the standalone props.
+     */
+    controller?: TreeController;
+    store?: TreeStore;
+    treeId?: string;
+    config?: TreeConfigInput;
+    darkMode?: boolean;
+    dir?: 'ltr' | 'rtl';
+    title?: string;
+    tag?: string;
+    ariaLabel?: string;
+    onError?: (err: unknown) => void;
+    /** OBSERVE hook (standalone only): fires when the selection changes (ordered selected node ids). */
+    onSelectionChange?: (selectedIds: readonly string[]) => void;
+    /** 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;
+    /** Replace ONLY a row's content cell (icon/label/badge). */
+    renderNode?: Snippet<[TreeRowView]>;
+};
+declare const Tree: import("svelte").Component<$$ComponentProps, {}, "">;
+type Tree = ReturnType<typeof Tree>;
+export default Tree;
+//# sourceMappingURL=Tree.svelte.d.ts.map

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

@@ -0,0 +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,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,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;AAkJJ,QAAA,MAAM,IAAI,sDAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/TreeDialog.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import { focusTrap } from '@bimetal/svelte';
+  import type { TreeDialogState, TreeLocale, NodeDraft } from '@bimetal/tree-headless';
+
+  let { dialog, locale, rootFallback, onsave, onclose }: {
+    dialog: TreeDialogState;
+    locale: TreeLocale;
+    /** INSTANCE-SCOPED restore target (the parent's own `.bm-tree__list`). */
+    rootFallback: () => HTMLElement | null;
+    onsave: (d: NodeDraft) => void;
+    onclose: () => void;
+  } = $props();
+
+  let title = $state(untrack(() => dialog.node.title));
+
+  function save() {
+    onsave({ title });
+  }
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<div class="bm-tree__backdrop" role="presentation" onclick={onclose}>
+  <!-- Modal focus lifecycle via the shared (F3-hardened) `focusTrap` action. The dialog is a
+       sibling of `.bm-tree__list`; the parent passes an instance-scoped restore target. The trap
+       manages focus programmatically, so the dialog is intentionally not a static tab stop. -->
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <!-- svelte-ignore a11y_interactive_supports_focus -->
+  <div class="bm-tree__dialog" role="dialog" aria-modal="true" aria-label={locale.rename} onclick={(e) => e.stopPropagation()}
+    use:focusTrap={{ onEscape: onclose, rootFallback }}>
+    <h2 class="bm-tree__dialog-heading">{locale.rename}</h2>
+    <input class="bm-tree__dialog-title" placeholder={locale.titlePlaceholder} bind:value={title}
+      onkeydown={(e) => { if (e.key === 'Enter') { e.preventDefault(); save(); } }} />
+    <div class="bm-tree__dialog-actions">
+      <span class="bm-tree__dialog-spacer"></span>
+      <button type="button" class="bm-tree__dialog-cancel" onclick={onclose}>{locale.cancel}</button>
+      <button type="button" class="bm-tree__dialog-save" onclick={save}>{locale.save}</button>
+    </div>
+  </div>
+</div>

package/dist/TreeDialog.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { TreeDialogState, TreeLocale, NodeDraft } from '@bimetal/tree-headless';
+type $$ComponentProps = {
+    dialog: TreeDialogState;
+    locale: TreeLocale;
+    /** INSTANCE-SCOPED restore target (the parent's own `.bm-tree__list`). */
+    rootFallback: () => HTMLElement | null;
+    onsave: (d: NodeDraft) => void;
+    onclose: () => void;
+};
+declare const TreeDialog: import("svelte").Component<$$ComponentProps, {}, "">;
+type TreeDialog = ReturnType<typeof TreeDialog>;
+export default TreeDialog;
+//# sourceMappingURL=TreeDialog.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TreeDialog.svelte.d.ts","sourceRoot":"","sources":["../src/TreeDialog.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEpF,KAAK,gBAAgB,GAAI;IACtB,MAAM,EAAE,eAAe,CAAC;IACxB,MAAM,EAAE,UAAU,CAAC;IACnB,0EAA0E;IAC1E,YAAY,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACvC,MAAM,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;IAC/B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAkCJ,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @module @bimetal/tree-svelte-components
+ *
+ * The default Svelte 5 tree / treeview — instance #6 of the shipped component family
+ * (graduated from Option-1 to Option-2 in F4). A thin binding over the canonical
+ * `@bimetal/tree-headless` controller: multi-select, expand/collapse, tri-state
+ * checkboxes, drag-reorder, keyboard nav/move, rename, undo. Renders the canonical
+ * `.bm-tree*` DOM; styles ship from `@bimetal/tree-themes`.
+ */
+export { default as Tree } from './Tree.svelte';
+export * from '@bimetal/svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAGhD,cAAc,iBAAiB,CAAC"}

package/dist/index.js

@@ -0,0 +1,12 @@
+/**
+ * @module @bimetal/tree-svelte-components
+ *
+ * The default Svelte 5 tree / treeview — instance #6 of the shipped component family
+ * (graduated from Option-1 to Option-2 in F4). A thin binding over the canonical
+ * `@bimetal/tree-headless` controller: multi-select, expand/collapse, tri-state
+ * checkboxes, drag-reorder, keyboard nav/move, rename, undo. Renders the canonical
+ * `.bm-tree*` DOM; styles ship from `@bimetal/tree-themes`.
+ */
+export { default as Tree } from './Tree.svelte';
+// Re-export the generic Svelte bindings for convenience.
+export * from '@bimetal/svelte';

package/dist/styles/index.css

@@ -0,0 +1 @@
+@import '@bimetal/tree-themes';

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@bimetal/tree-svelte-components",
+  "version": "0.32.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",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js"
+    },
+    "./styles": "./dist/styles/index.css"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "svelte-package -i src -o dist && node scripts/copy-css.mjs",
+    "dev": "svelte-package -i src -o dist --watch",
+    "typecheck": "svelte-check --tsconfig ./tsconfig.json",
+    "test": "vitest run",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@bimetal/svelte": "^0.32.0",
+    "@bimetal/tree-data": "^0.32.0",
+    "@bimetal/tree-headless": "^0.32.0",
+    "@bimetal/tree-themes": "^0.32.0",
+    "@bimetal/a11y-dom": "^0.32.0"
+  },
+  "peerDependencies": {
+    "svelte": "^5.46.4"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.5.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@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"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "license": "PolyForm-Noncommercial-1.0.0",
+  "author": "Andreas Biederbeck",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bimetal/bimetal.git",
+    "directory": "packages/tree/tree-svelte-components"
+  },
+  "keywords": [
+    "tree",
+    "treeview",
+    "svelte",
+    "components",
+    "multi-select",
+    "drag-reorder"
+  ]
+}