@dbcdk/react-components 0.0.182 → 0.0.183

package/dist/components/line-viewer/LineViewer.module.css

@@ -0,0 +1,112 @@
+.viewer {
+  --line-pane-bg: var(--color-bg-inverse);
+  --line-pane-border: color-mix(in oklab, var(--color-fg-inverse) 12%, transparent);
+  --line-pane-text: var(--color-fg-inverse);
+
+  --line-tag: color-mix(in oklab, var(--color-fg-inverse) 66%, var(--color-syntax-accent) 34%);
+  --line-indicator: color-mix(in oklab, var(--color-fg-inverse) 46%, transparent);
+  --line-subfield-code: color-mix(in oklab, var(--color-fg-inverse) 30%, var(--color-syntax-number) 70%);
+  --line-value: color-mix(in oklab, var(--color-fg-inverse) 20%, var(--color-syntax-string) 80%);
+  --line-terminator: color-mix(in oklab, var(--color-fg-inverse) 30%, var(--color-syntax-boolean) 70%);
+  --line-punctuation: color-mix(in oklab, var(--color-fg-inverse) 60%, transparent);
+  --line-continuation: color-mix(in oklab, var(--color-fg-inverse) 46%, transparent);
+
+  position: relative;
+  background: var(--line-pane-bg);
+  border: var(--border-width-thin) solid var(--line-pane-border);
+  border-radius: var(--border-radius-default);
+  box-shadow: var(--shadow-md);
+  font-family: var(--font-family-mono);
+}
+
+.viewer[data-appearance='light'] {
+  --line-pane-bg: var(--color-bg-surface);
+  --line-pane-border: var(--color-border-subtle);
+  --line-pane-text: var(--color-fg-default);
+
+  --line-tag: var(--color-link);
+  --line-indicator: var(--color-fg-subtle);
+  --line-subfield-code: var(--color-status-warning-fg);
+  --line-value: var(--color-status-success-fg);
+  --line-terminator: var(--color-accent-fg);
+  --line-punctuation: var(--color-fg-subtle);
+  --line-continuation: var(--color-fg-muted);
+
+  box-shadow: var(--shadow-xs);
+}
+
+.viewer.borderless {
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.toolbar {
+  position: absolute;
+  top: var(--spacing-xs);
+  right: var(--spacing-xs);
+  z-index: 1;
+}
+
+.codePane {
+  margin: 0;
+  padding: var(--spacing-sm);
+  overflow: auto;
+  color: var(--line-pane-text);
+  font-family: inherit;
+  line-height: 1.35;
+}
+
+.wrap {
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+}
+
+.noWrap {
+  white-space: pre;
+}
+
+.xs,
+.sm {
+  font-size: var(--font-size-xs);
+}
+
+.md {
+  font-size: var(--font-size-sm);
+}
+
+.lg {
+  font-size: var(--font-size-base);
+}
+
+.tag {
+  color: var(--line-tag);
+  font-weight: var(--font-weight-medium);
+}
+
+.indicator {
+  color: var(--line-indicator);
+}
+
+.subfieldMarker {
+  color: var(--line-punctuation);
+}
+
+.subfieldCode {
+  color: var(--line-subfield-code);
+  font-weight: var(--font-weight-medium);
+}
+
+.value {
+  color: var(--line-value);
+}
+
+.terminator {
+  color: var(--line-terminator);
+  font-weight: var(--font-weight-medium);
+}
+
+.text {
+  color: var(--line-continuation);
+  font-style: italic;
+}

package/dist/components/line-viewer/tokenizeLineFormat.cjs

@@ -0,0 +1,52 @@
+'use strict';
+
+const FIELD_LINE_PATTERN = /^(\S+)(\s+)(\S+)(\s+)(\*[\s\S]*)$/;
+const SUBFIELD_PATTERN = /\*(\S)([^*]*)/g;
+function tokenizeFieldLine(line) {
+  const match = FIELD_LINE_PATTERN.exec(line);
+  if (!match) return [{ type: "text", value: line }];
+  const [, tag, gap1, indicator, gap2, rest] = match;
+  const tokens = [
+    { type: "tag", value: tag },
+    { type: "whitespace", value: gap1 },
+    { type: "indicator", value: indicator },
+    { type: "whitespace", value: gap2 }
+  ];
+  SUBFIELD_PATTERN.lastIndex = 0;
+  let match2;
+  let lastIndex = 0;
+  while (match2 = SUBFIELD_PATTERN.exec(rest)) {
+    tokens.push({ type: "subfieldMarker", value: "*" });
+    tokens.push({ type: "subfieldCode", value: match2[1] });
+    tokens.push({ type: "value", value: match2[2] });
+    lastIndex = SUBFIELD_PATTERN.lastIndex;
+  }
+  if (lastIndex < rest.length) {
+    tokens.push({ type: "text", value: rest.slice(lastIndex) });
+  }
+  return tokens;
+}
+function tokenizeLineFormat(source) {
+  const tokens = [];
+  const chunks = source.split(/(\n)/);
+  for (const chunk of chunks) {
+    if (chunk === "") continue;
+    if (chunk === "\n") {
+      tokens.push({ type: "whitespace", value: "\n" });
+      continue;
+    }
+    if (chunk.trim() === "$") {
+      const dollarIndex = chunk.indexOf("$");
+      const leading = chunk.slice(0, dollarIndex);
+      const trailing = chunk.slice(dollarIndex + 1);
+      if (leading) tokens.push({ type: "text", value: leading });
+      tokens.push({ type: "terminator", value: "$" });
+      if (trailing) tokens.push({ type: "text", value: trailing });
+      continue;
+    }
+    tokens.push(...tokenizeFieldLine(chunk));
+  }
+  return tokens;
+}
+
+exports.tokenizeLineFormat = tokenizeLineFormat;

package/dist/components/line-viewer/tokenizeLineFormat.d.ts

@@ -0,0 +1,14 @@
+export type LineTokenType = 'tag' | 'indicator' | 'subfieldMarker' | 'subfieldCode' | 'value' | 'terminator' | 'text' | 'whitespace';
+export interface LineToken {
+    type: LineTokenType;
+    value: string;
+}
+/**
+ * Tokenizes a MARC-style "line format" record (field tag, indicators,
+ * `*code value` subfields, terminated by a lone `$`) for syntax
+ * highlighting without imposing a strict grammar. Preserves the source
+ * exactly - concatenating every token's `value` reproduces the input - so a
+ * wrapped continuation line or malformed field still displays as plain
+ * text instead of breaking the tokenizer.
+ */
+export declare function tokenizeLineFormat(source: string): LineToken[];

package/dist/components/line-viewer/tokenizeLineFormat.js

@@ -0,0 +1,50 @@
+const FIELD_LINE_PATTERN = /^(\S+)(\s+)(\S+)(\s+)(\*[\s\S]*)$/;
+const SUBFIELD_PATTERN = /\*(\S)([^*]*)/g;
+function tokenizeFieldLine(line) {
+  const match = FIELD_LINE_PATTERN.exec(line);
+  if (!match) return [{ type: "text", value: line }];
+  const [, tag, gap1, indicator, gap2, rest] = match;
+  const tokens = [
+    { type: "tag", value: tag },
+    { type: "whitespace", value: gap1 },
+    { type: "indicator", value: indicator },
+    { type: "whitespace", value: gap2 }
+  ];
+  SUBFIELD_PATTERN.lastIndex = 0;
+  let match2;
+  let lastIndex = 0;
+  while (match2 = SUBFIELD_PATTERN.exec(rest)) {
+    tokens.push({ type: "subfieldMarker", value: "*" });
+    tokens.push({ type: "subfieldCode", value: match2[1] });
+    tokens.push({ type: "value", value: match2[2] });
+    lastIndex = SUBFIELD_PATTERN.lastIndex;
+  }
+  if (lastIndex < rest.length) {
+    tokens.push({ type: "text", value: rest.slice(lastIndex) });
+  }
+  return tokens;
+}
+function tokenizeLineFormat(source) {
+  const tokens = [];
+  const chunks = source.split(/(\n)/);
+  for (const chunk of chunks) {
+    if (chunk === "") continue;
+    if (chunk === "\n") {
+      tokens.push({ type: "whitespace", value: "\n" });
+      continue;
+    }
+    if (chunk.trim() === "$") {
+      const dollarIndex = chunk.indexOf("$");
+      const leading = chunk.slice(0, dollarIndex);
+      const trailing = chunk.slice(dollarIndex + 1);
+      if (leading) tokens.push({ type: "text", value: leading });
+      tokens.push({ type: "terminator", value: "$" });
+      if (trailing) tokens.push({ type: "text", value: trailing });
+      continue;
+    }
+    tokens.push(...tokenizeFieldLine(chunk));
+  }
+  return tokens;
+}
+
+export { tokenizeLineFormat };

package/dist/components/tree-view/TreeNodeRow.cjs

@@ -0,0 +1,99 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var styles = require('./TreeView.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function TreeNodeRow({
+  node,
+  depth,
+  isExpanded,
+  toggle,
+  resolvedChildren,
+  loadingIds,
+  errorIds,
+  requestLoad,
+  loadChildren,
+  selectedId,
+  onSelectNode,
+  renderLabel
+}) {
+  var _a;
+  const children = (_a = node.children) != null ? _a : resolvedChildren[node.id];
+  const isResolved = children !== void 0;
+  const expandable = isResolved ? children.length > 0 : Boolean(loadChildren) && node.hasChildren !== false;
+  const expanded = isExpanded(node.id);
+  const loading = loadingIds.has(node.id);
+  const error = errorIds[node.id];
+  const selected = selectedId !== void 0 && selectedId === node.id;
+  react.useEffect(() => {
+    if (expanded && children === void 0 && !loading && !error && loadChildren) {
+      requestLoad(node);
+    }
+  }, [expanded, children, loading, error]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "treeitem",
+      "aria-expanded": expandable ? expanded : void 0,
+      "aria-selected": selected,
+      style: { ["--tree-depth"]: depth },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.row, "data-selected": selected || void 0, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: styles__default.default.toggle,
+              onClick: () => expandable && toggle(node.id),
+              disabled: !expandable,
+              "aria-hidden": !expandable,
+              tabIndex: expandable ? 0 : -1,
+              children: loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `spin ${styles__default.default.spinner}`, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LoaderCircle, { "aria-hidden": "true" }) }) : expandable ? (
+                // A resolved node's chevron means "this has children"; an
+                // unresolved lazy node's dimmer chevron means "might have
+                // children, click to check" - we genuinely don't know yet,
+                // and shouldn't visually assert otherwise.
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: isResolved ? void 0 : styles__default.default.toggleUnresolved, children: expanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { "aria-hidden": "true" }) })
+              ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.leafSpacer, "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: styles__default.default.labelButton, onClick: () => onSelectNode == null ? void 0 : onSelectNode(node), children: [
+            node.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, "aria-hidden": "true", children: node.icon }) : null,
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: renderLabel ? renderLabel(node) : node.label })
+          ] })
+        ] }),
+        error ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.errorRow, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: error }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: styles__default.default.retryButton, onClick: () => requestLoad(node), children: "Pr\xF8v igen" })
+        ] }) : null,
+        expanded && children && children.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { role: "group", className: styles__default.default.children, children: children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
+          TreeNodeRow,
+          {
+            node: child,
+            depth: depth + 1,
+            isExpanded,
+            toggle,
+            resolvedChildren,
+            loadingIds,
+            errorIds,
+            requestLoad,
+            loadChildren,
+            selectedId,
+            onSelectNode,
+            renderLabel
+          },
+          child.id
+        )) }) : null
+      ]
+    }
+  );
+}
+
+exports.TreeNodeRow = TreeNodeRow;

package/dist/components/tree-view/TreeNodeRow.d.ts

@@ -0,0 +1,18 @@
+import type { JSX, ReactNode } from 'react';
+import type { LoadTreeChildren, TreeNode } from './types';
+type TreeNodeRowProps<T> = {
+    node: TreeNode<T>;
+    depth: number;
+    isExpanded: (id: string) => boolean;
+    toggle: (id: string) => void;
+    resolvedChildren: Record<string, TreeNode<T>[]>;
+    loadingIds: Set<string>;
+    errorIds: Record<string, ReactNode>;
+    requestLoad: (node: TreeNode<T>) => void;
+    loadChildren?: LoadTreeChildren<T>;
+    selectedId?: string;
+    onSelectNode?: (node: TreeNode<T>) => void;
+    renderLabel?: (node: TreeNode<T>) => ReactNode;
+};
+export declare function TreeNodeRow<T>({ node, depth, isExpanded, toggle, resolvedChildren, loadingIds, errorIds, requestLoad, loadChildren, selectedId, onSelectNode, renderLabel, }: TreeNodeRowProps<T>): JSX.Element;
+export {};

package/dist/components/tree-view/TreeNodeRow.js

@@ -0,0 +1,93 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { LoaderCircle, ChevronDown, ChevronRight } from 'lucide-react';
+import { useEffect } from 'react';
+import styles from './TreeView.module.css';
+
+function TreeNodeRow({
+  node,
+  depth,
+  isExpanded,
+  toggle,
+  resolvedChildren,
+  loadingIds,
+  errorIds,
+  requestLoad,
+  loadChildren,
+  selectedId,
+  onSelectNode,
+  renderLabel
+}) {
+  var _a;
+  const children = (_a = node.children) != null ? _a : resolvedChildren[node.id];
+  const isResolved = children !== void 0;
+  const expandable = isResolved ? children.length > 0 : Boolean(loadChildren) && node.hasChildren !== false;
+  const expanded = isExpanded(node.id);
+  const loading = loadingIds.has(node.id);
+  const error = errorIds[node.id];
+  const selected = selectedId !== void 0 && selectedId === node.id;
+  useEffect(() => {
+    if (expanded && children === void 0 && !loading && !error && loadChildren) {
+      requestLoad(node);
+    }
+  }, [expanded, children, loading, error]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "treeitem",
+      "aria-expanded": expandable ? expanded : void 0,
+      "aria-selected": selected,
+      style: { ["--tree-depth"]: depth },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.row, "data-selected": selected || void 0, children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: styles.toggle,
+              onClick: () => expandable && toggle(node.id),
+              disabled: !expandable,
+              "aria-hidden": !expandable,
+              tabIndex: expandable ? 0 : -1,
+              children: loading ? /* @__PURE__ */ jsx("span", { className: `spin ${styles.spinner}`, children: /* @__PURE__ */ jsx(LoaderCircle, { "aria-hidden": "true" }) }) : expandable ? (
+                // A resolved node's chevron means "this has children"; an
+                // unresolved lazy node's dimmer chevron means "might have
+                // children, click to check" - we genuinely don't know yet,
+                // and shouldn't visually assert otherwise.
+                /* @__PURE__ */ jsx("span", { className: isResolved ? void 0 : styles.toggleUnresolved, children: expanded ? /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" }) })
+              ) : /* @__PURE__ */ jsx("span", { className: styles.leafSpacer, "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ jsxs("button", { type: "button", className: styles.labelButton, onClick: () => onSelectNode == null ? void 0 : onSelectNode(node), children: [
+            node.icon ? /* @__PURE__ */ jsx("span", { className: styles.icon, "aria-hidden": "true", children: node.icon }) : null,
+            /* @__PURE__ */ jsx("span", { className: styles.label, children: renderLabel ? renderLabel(node) : node.label })
+          ] })
+        ] }),
+        error ? /* @__PURE__ */ jsxs("div", { className: styles.errorRow, children: [
+          /* @__PURE__ */ jsx("span", { children: error }),
+          /* @__PURE__ */ jsx("button", { type: "button", className: styles.retryButton, onClick: () => requestLoad(node), children: "Pr\xF8v igen" })
+        ] }) : null,
+        expanded && children && children.length > 0 ? /* @__PURE__ */ jsx("div", { role: "group", className: styles.children, children: children.map((child) => /* @__PURE__ */ jsx(
+          TreeNodeRow,
+          {
+            node: child,
+            depth: depth + 1,
+            isExpanded,
+            toggle,
+            resolvedChildren,
+            loadingIds,
+            errorIds,
+            requestLoad,
+            loadChildren,
+            selectedId,
+            onSelectNode,
+            renderLabel
+          },
+          child.id
+        )) }) : null
+      ]
+    }
+  );
+}
+
+export { TreeNodeRow };

package/dist/components/tree-view/TreeView.cjs

@@ -0,0 +1,93 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var TreeNodeRow = require('./TreeNodeRow');
+var styles = require('./TreeView.module.css');
+var useTreeExpansion = require('./useTreeExpansion');
+var utils = require('./utils');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function TreeView({
+  data,
+  loadChildren,
+  defaultExpandedIds,
+  expandedIds,
+  onExpandedIdsChange,
+  selectedId,
+  onSelectNode,
+  renderLabel,
+  emptyMessage = "Intet at vise.",
+  loadErrorMessage = () => "Der skete en fejl under indl\xE6sning.",
+  className,
+  ...rest
+}) {
+  const { isExpanded, toggle, expand } = useTreeExpansion.useTreeExpansion(
+    defaultExpandedIds,
+    expandedIds,
+    onExpandedIdsChange
+  );
+  const [resolvedChildren, setResolvedChildren] = react.useState({});
+  const [loadingIds, setLoadingIds] = react.useState(/* @__PURE__ */ new Set());
+  const [errorIds, setErrorIds] = react.useState({});
+  const requestLoad = react.useCallback(
+    (node) => {
+      if (!loadChildren || loadingIds.has(node.id)) return;
+      setLoadingIds((prev) => new Set(prev).add(node.id));
+      setErrorIds((prev) => {
+        if (!(node.id in prev)) return prev;
+        const next = { ...prev };
+        delete next[node.id];
+        return next;
+      });
+      loadChildren(node).then((children) => {
+        setResolvedChildren((prev) => ({ ...prev, [node.id]: children }));
+        expand(node.id);
+      }).catch((err) => {
+        setErrorIds((prev) => ({ ...prev, [node.id]: loadErrorMessage(err, node) }));
+      }).finally(() => {
+        setLoadingIds((prev) => {
+          const next = new Set(prev);
+          next.delete(node.id);
+          return next;
+        });
+      });
+    },
+    [loadChildren, loadingIds, expand, loadErrorMessage]
+  );
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: [styles__default.default.emptyState, className].filter(Boolean).join(" "), ...rest, children: emptyMessage });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "tree", className: [styles__default.default.tree, className].filter(Boolean).join(" "), ...rest, children: data.map((node) => /* @__PURE__ */ jsxRuntime.jsx(
+    TreeNodeRow.TreeNodeRow,
+    {
+      node,
+      depth: 0,
+      isExpanded,
+      toggle,
+      resolvedChildren,
+      loadingIds,
+      errorIds,
+      requestLoad,
+      loadChildren,
+      selectedId,
+      onSelectNode,
+      renderLabel
+    },
+    node.id
+  )) });
+}
+
+Object.defineProperty(exports, "collectExpandableIds", {
+  enumerable: true,
+  get: function () { return utils.collectExpandableIds; }
+});
+Object.defineProperty(exports, "findAncestorIds", {
+  enumerable: true,
+  get: function () { return utils.findAncestorIds; }
+});
+exports.TreeView = TreeView;

package/dist/components/tree-view/TreeView.d.ts

@@ -0,0 +1,20 @@
+import type { JSX } from 'react';
+import type { TreeViewProps } from './types';
+export type { LoadTreeChildren, TreeNode, TreeViewProps } from './types';
+export { collectExpandableIds, findAncestorIds } from './utils';
+/**
+ * A single component for both shapes of tree data:
+ * - Eager: every node's full subtree is already in `data` via `children`.
+ *   No `loadChildren` needed - toggling a node only ever flips its
+ *   expanded/collapsed state.
+ * - Lazy: `data` only has to contain what you already know; pass
+ *   `loadChildren` and a node whose `children` is undefined gets fetched
+ *   the first time it's expanded (see TreeNode's docs on `hasChildren` for
+ *   how a not-yet-fetched node still shows a toggle).
+ *
+ * Expand/collapse state follows the same model as the Sidebar: a single
+ * `Set<string>` of expanded ids is the source of truth (see
+ * useTreeExpansion), and it can be left uncontrolled or owned by the
+ * caller via `expandedIds`/`onExpandedIdsChange`.
+ */
+export declare function TreeView<T = unknown>({ data, loadChildren, defaultExpandedIds, expandedIds, onExpandedIdsChange, selectedId, onSelectNode, renderLabel, emptyMessage, loadErrorMessage, className, ...rest }: TreeViewProps<T>): JSX.Element;

package/dist/components/tree-view/TreeView.js

@@ -0,0 +1,79 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
+import { TreeNodeRow } from './TreeNodeRow';
+import styles from './TreeView.module.css';
+import { useTreeExpansion } from './useTreeExpansion';
+export { collectExpandableIds, findAncestorIds } from './utils';
+
+function TreeView({
+  data,
+  loadChildren,
+  defaultExpandedIds,
+  expandedIds,
+  onExpandedIdsChange,
+  selectedId,
+  onSelectNode,
+  renderLabel,
+  emptyMessage = "Intet at vise.",
+  loadErrorMessage = () => "Der skete en fejl under indl\xE6sning.",
+  className,
+  ...rest
+}) {
+  const { isExpanded, toggle, expand } = useTreeExpansion(
+    defaultExpandedIds,
+    expandedIds,
+    onExpandedIdsChange
+  );
+  const [resolvedChildren, setResolvedChildren] = useState({});
+  const [loadingIds, setLoadingIds] = useState(/* @__PURE__ */ new Set());
+  const [errorIds, setErrorIds] = useState({});
+  const requestLoad = useCallback(
+    (node) => {
+      if (!loadChildren || loadingIds.has(node.id)) return;
+      setLoadingIds((prev) => new Set(prev).add(node.id));
+      setErrorIds((prev) => {
+        if (!(node.id in prev)) return prev;
+        const next = { ...prev };
+        delete next[node.id];
+        return next;
+      });
+      loadChildren(node).then((children) => {
+        setResolvedChildren((prev) => ({ ...prev, [node.id]: children }));
+        expand(node.id);
+      }).catch((err) => {
+        setErrorIds((prev) => ({ ...prev, [node.id]: loadErrorMessage(err, node) }));
+      }).finally(() => {
+        setLoadingIds((prev) => {
+          const next = new Set(prev);
+          next.delete(node.id);
+          return next;
+        });
+      });
+    },
+    [loadChildren, loadingIds, expand, loadErrorMessage]
+  );
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: [styles.emptyState, className].filter(Boolean).join(" "), ...rest, children: emptyMessage });
+  }
+  return /* @__PURE__ */ jsx("div", { role: "tree", className: [styles.tree, className].filter(Boolean).join(" "), ...rest, children: data.map((node) => /* @__PURE__ */ jsx(
+    TreeNodeRow,
+    {
+      node,
+      depth: 0,
+      isExpanded,
+      toggle,
+      resolvedChildren,
+      loadingIds,
+      errorIds,
+      requestLoad,
+      loadChildren,
+      selectedId,
+      onSelectNode,
+      renderLabel
+    },
+    node.id
+  )) });
+}
+
+export { TreeView };