@cosmicdrift/kumiko-renderer-web 0.65.0 → 0.66.0

package/src/layout/__tests__/visual-tree.test.tsx

@@ -1,303 +0,0 @@
-import { afterEach, beforeEach, describe, expect, test } from "bun:test";
-import type { TreeChildrenSubscribe, TreeNode } from "@cosmicdrift/kumiko-framework/engine";
-import { NavProvider } from "@cosmicdrift/kumiko-renderer";
-import { act, fireEvent, render, screen } from "@testing-library/react";
-import type { ReactNode } from "react";
-import { useBrowserNavApi } from "../../app/nav";
-import { TreeProvidersProvider } from "../../app/tree-providers-context";
-import { setDispatchListener } from "../target-resolver-stub";
-import { VisualTree } from "../visual-tree";
-
-// Mock-Provider-Helper. emit wird einmal initial gerufen mit den
-// gegebenen Nodes; cleanup ist no-op. Subscriptions können später
-// auch dynamisch sein (siehe `makeMutableProvider`).
-function makeStaticProvider(nodes: readonly TreeNode[]): TreeChildrenSubscribe {
-  return () => (emit) => {
-    emit(nodes);
-    return () => {};
-  };
-}
-
-// Mutable-Provider — Test kann via `emitFn` einen weiteren Emit
-// auslösen um Subscribe-Update zu beweisen. Returnt ein Tupel
-// [provider, controls].
-function makeMutableProvider(initial: readonly TreeNode[]): {
-  readonly provider: TreeChildrenSubscribe;
-  emit(nodes: readonly TreeNode[]): void;
-} {
-  let listener: ((nodes: readonly TreeNode[]) => void) | undefined;
-  const provider: TreeChildrenSubscribe = () => (emit) => {
-    listener = emit;
-    emit(initial);
-    return () => {
-      listener = undefined;
-    };
-  };
-  return {
-    provider,
-    emit(nodes) {
-      if (listener !== undefined) listener(nodes);
-    },
-  };
-}
-
-async function renderTree(
-  providers: ReadonlyMap<string, TreeChildrenSubscribe>,
-): Promise<ReturnType<typeof render>> {
-  function Wrapper({ children }: { readonly children: ReactNode }): ReactNode {
-    // V.1.4b: TreeNodeRenderer + ActionButton nutzen useDispatchTarget,
-    // das useNav greift — Tests brauchen NavProvider. Browser-nav reset
-    // erfolgt im beforeEach (window.history.replaceState).
-    const nav = useBrowserNavApi();
-    return (
-      <NavProvider value={nav}>
-        <TreeProvidersProvider value={providers}>{children}</TreeProvidersProvider>
-      </NavProvider>
-    );
-  }
-  const result = render(<VisualTree workspaceId="test-ws" />, { wrapper: Wrapper });
-  // Asynchrone React-Effects (useEffect mit setTimeout/Promise) in
-  // act() abfangen. Ohne das feuern State-Updates außerhalb von act
-  // und produzieren "not wrapped in act"-Warnungen.
-  await act(async () => {});
-  return result;
-}
-
-// vitest+Bun-Runtime liefert nur ein partielles localStorage (kein
-// `clear`/`removeItem`). Wir installieren pro Test einen frischen
-// Map-basierten Mock, damit Standard-API-Methoden funktionieren und
-// Test-Isolation sauber ist. Production-Code nutzt nur die Standard-
-// Schnittstelle, daher transparent.
-beforeEach(() => {
-  // V.1.4b: URL-State leakt sonst zwischen Tests (useBrowserNavApi
-  // liest window.location). Plus localStorage-Mock unten.
-  window.history.replaceState(null, "", "/");
-  const store = new Map<string, string>();
-  Object.defineProperty(window, "localStorage", {
-    configurable: true,
-    value: {
-      getItem: (key: string): string | null => store.get(key) ?? null,
-      setItem: (key: string, value: string): void => {
-        store.set(key, value);
-      },
-      removeItem: (key: string): void => {
-        store.delete(key);
-      },
-      clear: (): void => store.clear(),
-      get length(): number {
-        return store.size;
-      },
-      key: (i: number): string | null => Array.from(store.keys())[i] ?? null,
-    },
-  });
-});
-
-describe("VisualTree — Empty-State", () => {
-  test("ohne registrierte Provider rendert sichtbaren Empty-Hint", async () => {
-    await renderTree(new Map());
-    expect(screen.getByLabelText("Visual Tree (no providers)")).toBeTruthy();
-    expect(screen.getByText(/Keine Tree-Provider aktiv/)).toBeTruthy();
-  });
-
-  test("Provider-Map vorhanden + emittet leere TreeNode[]: kein Empty-State, kein NavTree-Fallback", async () => {
-    const providers = new Map([["text-content", makeStaticProvider([])]]);
-    await renderTree(providers);
-    // Nicht im Empty-State (es gibt einen registrierten Provider, der
-    // hat nur kein Knoten emittet). Stattdessen rendert die ProviderBranch
-    // mit dem featureName als Label im aria-tree.
-    expect(screen.queryByLabelText("Visual Tree (no providers)")).toBeNull();
-    expect(screen.getByLabelText("Visual Tree")).toBeTruthy();
-  });
-});
-
-describe("VisualTree — Provider-Iteration", () => {
-  test("Single-Provider mit static-children rendert Top-Level-Knoten", async () => {
-    const providers = new Map([
-      ["text-content", makeStaticProvider([{ label: "Marketing" }, { label: "Legal" }])],
-    ]);
-    await renderTree(providers);
-    expect(screen.getByText("Marketing")).toBeTruthy();
-    expect(screen.getByText("Legal")).toBeTruthy();
-  });
-
-  test("Multi-Provider alphabetisch sortiert nach featureName", async () => {
-    // legal-pages kommt alphabetisch vor text-content
-    const providers = new Map<string, TreeChildrenSubscribe>([
-      ["text-content", makeStaticProvider([{ label: "Marketing" }])],
-      ["legal-pages", makeStaticProvider([{ label: "Imprint" }])],
-    ]);
-    await renderTree(providers);
-    const branches = document.querySelectorAll("[data-kumiko-tree-branch]");
-    expect(branches[0]?.getAttribute("data-kumiko-tree-branch")).toBe("legal-pages");
-    expect(branches[1]?.getAttribute("data-kumiko-tree-branch")).toBe("text-content");
-  });
-
-  test("Provider der nicht emittet bleibt im loading-State sichtbar", async () => {
-    // Provider ruft emit nie auf (z.B. async-fetch noch im Flug)
-    const noopProvider: TreeChildrenSubscribe = () => () => () => {};
-    const providers = new Map([["slow-feature", noopProvider]]);
-    await renderTree(providers);
-    expect(screen.getByText("slow-feature: lädt …")).toBeTruthy();
-  });
-
-  test("Subscribe-Update: zweiter Emit re-rendert die Liste", async () => {
-    const { provider, emit } = makeMutableProvider([{ label: "Hero" }]);
-    const providers = new Map([["text-content", provider]]);
-    await renderTree(providers);
-
-    expect(screen.getByText("Hero")).toBeTruthy();
-
-    // Provider emittet aktualisierte Liste — Tree muss re-rendern.
-    // act() wrapped den state-Update damit React synchronisiert flushed.
-    act(() => {
-      emit([{ label: "Hero" }, { label: "Pricing" }]);
-    });
-    expect(screen.getByText("Pricing")).toBeTruthy();
-    expect(screen.getByText("Hero")).toBeTruthy();
-  });
-
-  test("Provider-Unsubscribe wird beim Unmount gecallt", async () => {
-    let unsubscribed = false;
-    const provider: TreeChildrenSubscribe = () => (emit) => {
-      emit([{ label: "Foo" }]);
-      return () => {
-        unsubscribed = true;
-      };
-    };
-    const providers = new Map([["test", provider]]);
-    const result = await renderTree(providers);
-
-    expect(unsubscribed).toBe(false);
-    result.unmount();
-    expect(unsubscribed).toBe(true);
-  });
-});
-
-describe("VisualTree — Click-Dispatch", () => {
-  let cleanup: (() => void) | undefined;
-  afterEach(() => {
-    cleanup?.();
-    cleanup = undefined;
-  });
-
-  test("Click auf Knoten mit target ruft dispatchTarget mit dem TargetRef", async () => {
-    const dispatched: unknown[] = [];
-    cleanup = setDispatchListener((target) => {
-      dispatched.push(target);
-    });
-
-    const providers = new Map([
-      [
-        "text-content",
-        makeStaticProvider([
-          {
-            label: "Hero",
-            target: { featureId: "text-content", action: "edit", args: { slug: "hero" } },
-          },
-        ]),
-      ],
-    ]);
-    await renderTree(providers);
-
-    fireEvent.click(screen.getByText("Hero"));
-
-    expect(dispatched).toEqual([
-      { featureId: "text-content", action: "edit", args: { slug: "hero" } },
-    ]);
-  });
-
-  test('Skeleton-Affordance: state="empty" + createAction rendert + Button und dispatcht createAction.target', async () => {
-    // D3-Validation aus visual-tree.md V.1.1-Decisions: Provider-explizit
-    // createAction-Field auf TreeNode mit state="empty" → Tree-Component
-    // zeigt automatisch ein "+"-Icon und dispatcht createAction.target
-    // beim Klick (NICHT node.target — das wäre die Row-onClick-Action).
-    const dispatched: unknown[] = [];
-    cleanup = setDispatchListener((target) => {
-      dispatched.push(target);
-    });
-
-    const providers = new Map([
-      [
-        "sections",
-        makeStaticProvider([
-          {
-            label: "Sections",
-            state: "empty",
-            createAction: {
-              icon: "plus",
-              label: "Add section",
-              target: { featureId: "sections", action: "create" },
-            },
-          },
-        ]),
-      ],
-    ]);
-    await renderTree(providers);
-
-    // + Button greifbar via aria-label aus createAction.label
-    const addButton = screen.getByLabelText("Add section");
-    fireEvent.click(addButton);
-
-    expect(dispatched).toEqual([{ featureId: "sections", action: "create" }]);
-  });
-
-  test("Click auf Container-Knoten (mit children) toggled expand statt Dispatch", async () => {
-    const dispatched: unknown[] = [];
-    cleanup = setDispatchListener((target) => {
-      dispatched.push(target);
-    });
-
-    const providers = new Map([
-      [
-        "text-content",
-        makeStaticProvider([
-          {
-            label: "Marketing",
-            children: [{ label: "Hero" }],
-          },
-        ]),
-      ],
-    ]);
-    await renderTree(providers);
-
-    // Initial collapsed: Hero nicht sichtbar
-    expect(screen.queryByText("Hero")).toBeNull();
-    fireEvent.click(screen.getByText("Marketing"));
-    // Nach Click expanded: Hero sichtbar, kein Dispatch passiert
-    expect(screen.getByText("Hero")).toBeTruthy();
-    expect(dispatched).toEqual([]);
-  });
-});
-
-describe("VisualTree — localStorage-Persistenz", () => {
-  test("Toggle persistiert expanded-Set ins localStorage pro Workspace", async () => {
-    const providers = new Map([
-      ["text-content", makeStaticProvider([{ label: "Marketing", children: [{ label: "Hero" }] }])],
-    ]);
-    await renderTree(providers);
-
-    fireEvent.click(screen.getByText("Marketing"));
-
-    const stored = window.localStorage.getItem("kumiko:visual-tree:expanded:test-ws");
-    expect(stored).not.toBeNull();
-    const parsed = JSON.parse(stored ?? "[]") as string[];
-    expect(parsed.length).toBe(1);
-    expect(parsed[0]).toContain("Marketing");
-  });
-
-  test("Re-mount restored expanded-Set aus localStorage", async () => {
-    // Setup: persistierter expanded-Set für test-ws-Workspace
-    window.localStorage.setItem(
-      "kumiko:visual-tree:expanded:test-ws",
-      JSON.stringify(["text-content/0-Marketing"]),
-    );
-
-    const providers = new Map([
-      ["text-content", makeStaticProvider([{ label: "Marketing", children: [{ label: "Hero" }] }])],
-    ]);
-    await renderTree(providers);
-
-    // Marketing ist expandiert → Hero sichtbar ohne Click
-    expect(screen.getByText("Hero")).toBeTruthy();
-  });
-});

package/src/layout/tree-node-renderer.tsx

@@ -1,386 +0,0 @@
-// TreeNodeRenderer — recursive Pro-Knoten-Component für den Visual-Tree.
-//
-// **Pflichten** (visual-tree.md V.1.1-C):
-//   1. Render `[icon] [label] [actions]` row mit State-abhängigen Klassen
-//   2. Click-Dispatch: onClick mit gesetztem `node.target` → dispatchTarget
-//   3. Hover-Actions rechts (CSS-only, hover-visible)
-//   4. Children rekursiv: static-Array direkt, TreeChildrenSubscribe lazy
-//      mit subscribe/unsubscribe an expand/collapse
-//   5. Skeleton-Affordance: state="empty" + createAction → automatic
-//      "+"-Icon, dispatcht createAction.target
-//
-// **Expand-State** lebt nicht hier sondern im VisualTree (Top-Level)
-// damit localStorage-Persistenz pro Workspace eine Stelle hat. Renderer
-// kriegt `expanded: Set<path>` + `onToggle(path)` als Props.
-//
-// **Path** = Workspace-eindeutiger String (parent-path + child-index oder
-// node.label-segment). Stable über Re-Renders, eindeutig pro Knoten.
-//
-// Siehe visual-tree.md V.1.1-C + A4 (TreeNode-Type-Definition).
-
-import type {
-  TargetRef,
-  TreeAction,
-  TreeChildrenSubscribe,
-  TreeNode,
-  TreeNodeState,
-} from "@cosmicdrift/kumiko-framework/engine";
-import { useNav } from "@cosmicdrift/kumiko-renderer";
-import { ChevronDown, ChevronRight, File, Folder, Plus } from "lucide-react";
-import { type ReactNode, useEffect, useMemo, useRef, useState } from "react";
-import { cn } from "../lib/cn";
-import { useDispatchTarget } from "./target-resolver-stub";
-import { parseTargetFromSearchParams } from "./target-url";
-
-// Icon-Registry (V.1.2-Stub): Provider liefern symbolische String-Keys
-// (`node.icon = "folder"`), Renderer mappt auf das lucide-Component.
-// Unknown Keys → kein Render (sauber leerer Slot, kein plain-string-
-// Overlap im 14px-Container). V.1.3+ erweitert Registry um App-
-// erweiterbare Custom-Icons; aktuelles Set deckt Tree-Folder/File-Bedarf
-// vom V.1.2-Consumer (text-content groupBlocksBySlugPrefix → "folder")
-// und legal-pages-Slugs (no icon set).
-const NODE_ICONS: Readonly<Record<string, typeof Folder>> = {
-  folder: Folder,
-  file: File,
-};
-
-// State → Tailwind-Klassen-Mapping. „filled" ist no-op (default-text).
-// Restliche Werte signalisieren visuell: stub = leise, empty = stark
-// gedimmt + italic, loading = pulse-animation, error = destruktiv-Farbe.
-const STATE_CLASSES: Readonly<Record<TreeNodeState, string>> = {
-  filled: "",
-  stub: "opacity-55",
-  empty: "opacity-50 italic",
-  loading: "animate-pulse",
-  error: "text-destructive",
-};
-
-// TypeGuard für TreeChildrenSubscribe-Form. Nach `Array.isArray()`-check
-// kann TS den Function-Branch nicht automatisch narrowen, daher dieser
-// explizite Guard statt `as`-Cast (siehe Memory `[Type Assertions]` und
-// build-target.ts:isArgsObject als Vorbild).
-function isSubscribeFn(c: readonly TreeNode[] | TreeChildrenSubscribe): c is TreeChildrenSubscribe {
-  return typeof c === "function";
-}
-
-// V.1.5c Target-Vergleich: TreeNode ist „active" wenn sein target dem
-// aktiven Target aus der URL entspricht. Vergleich ist deep-shallow:
-// featureId + action exakt, args als flat-Record mit shallow-equal
-// (args sind heute nur primitives). null/undefined-tolerant.
-function targetsEqual(a: TargetRef, b: TargetRef | undefined): boolean {
-  if (b === undefined) return false;
-  if (a.featureId !== b.featureId) return false;
-  if (a.action !== b.action) return false;
-  const aKeys = a.args ? Object.keys(a.args) : [];
-  const bKeys = b.args ? Object.keys(b.args) : [];
-  if (aKeys.length !== bKeys.length) return false;
-  for (const k of aKeys) {
-    if (a.args?.[k] !== b.args?.[k]) return false;
-  }
-  return true;
-}
-
-export type TreeNodeRendererProps = {
-  readonly node: TreeNode;
-  readonly path: string;
-  readonly expanded: ReadonlySet<string>;
-  readonly onToggle: (path: string) => void;
-  readonly depth?: number;
-  /** V.1.6c Roving-tabindex: nur das focused-Treeitem hat tabIndex=0,
-   *  alle anderen tabIndex=-1. Wenn undefined → kein item focused
-   *  (transient bei mount, VisualTree useEffect setzt's). */
-  readonly focusedPath?: string;
-};
-
-export function TreeNodeRenderer({
-  node,
-  path,
-  expanded,
-  onToggle,
-  depth = 0,
-  focusedPath,
-}: TreeNodeRendererProps): ReactNode {
-  const isExpanded = expanded.has(path);
-  const hasChildren = node.children !== undefined;
-
-  // Dynamic-Children-Subscribe: nur wenn ausgeklappt UND Function-Form.
-  // null = noch nicht emitted (zeige loading), Array = letzter Emit.
-  //
-  // **Identity-Assumption** (TODO V.1.2 verifizieren mit echtem Provider):
-  // node.children muss als Function-Reference stabil über Re-Renders sein,
-  // sonst trigger der useEffect ständig unsubscribe+resubscribe ("re-
-  // subscribe-Storm"). Recommended-Pattern für Provider-Authors: Function
-  // als top-level-const oder useMemo'd, NICHT inline-Closure pro Emit.
-  // Bei first violation in V.1.2 entweder useMemo hier oder path-Cache
-  // im VisualTree-Top-Level — Entscheidung wenn realer Trigger sichtbar.
-  const [dynamicChildren, setDynamicChildren] = useState<readonly TreeNode[] | null>(null);
-  useEffect(() => {
-    if (!isExpanded) return;
-    if (node.children === undefined) return;
-    if (!isSubscribeFn(node.children)) return; // static-Array-Pfad in ChildrenView
-    const subscribe = node.children();
-    const unsubscribe = subscribe(setDynamicChildren);
-    return unsubscribe;
-  }, [isExpanded, node.children]);
-
-  const stateClass = STATE_CLASSES[node.state ?? "filled"];
-  const indentStyle = { paddingLeft: `${depth * 12 + 8}px` };
-  const dispatch = useDispatchTarget();
-  const nav = useNav();
-
-  // V.1.5c Active-Node-Highlight: TreeItem ist „selected" wenn sein
-  // target dem aktiven Target aus der URL entspricht. Vergleich via
-  // featureId+action+args (deep-shallow, args ist flat-Record). Plus
-  // scrollIntoView wenn active-Knoten nicht im Viewport ist (F5 mit
-  // tief im Tree liegendem Target → User sieht ihn nicht ohne Scroll).
-  const activeTarget = useMemo(
-    () => parseTargetFromSearchParams(nav.searchParams),
-    [nav.searchParams],
-  );
-  const isActive = node.target !== undefined && targetsEqual(node.target, activeTarget);
-  const rowRef = useRef<HTMLDivElement | null>(null);
-  useEffect(() => {
-    if (isActive && rowRef.current) {
-      rowRef.current.scrollIntoView({ block: "nearest", inline: "nearest" });
-    }
-  }, [isActive]);
-
-  const handleRowClick = (): void => {
-    if (hasChildren) {
-      onToggle(path);
-      return;
-    }
-    if (node.target !== undefined) {
-      dispatch(node.target);
-    }
-  };
-
-  // VS-Code-style indent-guides: ein 1px vertikaler border per
-  // ancestor-depth. Outer wrapper ist relative + die Lines sind absolute
-  // mit position pro depth-step (12px); top=0 bottom=0 streckt sie über
-  // Row + alle children (rekursiv wrapper wrappt children mit drin).
-  const indentGuides =
-    depth > 0
-      ? Array.from({ length: depth }, (_, i) => (
-          <div
-            // biome-ignore lint/suspicious/noArrayIndexKey: stable index = depth-level
-            key={i}
-            aria-hidden
-            className="absolute top-0 bottom-0 w-px bg-border/60 pointer-events-none"
-            style={{ left: `${i * 12 + 13}px` }}
-          />
-        ))
-      : null;
-
-  return (
-    <div data-kumiko-tree-node={path} className="relative">
-      {indentGuides}
-      {/* Outer Row als <div role="treeitem">: V.1.5a ARIA-tree-Pattern.
-          role + tabIndex=0 + aria-expanded gibt Screenreader Tree-
-          Semantik. Arrow-Key-Navigation läuft auf dem aside-Container
-          via querySelectorAll('[role=treeitem]') — siehe visual-tree.tsx.
-          div+role statt native button weil nested <button> in
-          HoverActions invalid HTML wäre. */}
-      <div
-        ref={rowRef}
-        className={cn(
-          // VS-Code-ähnlich: compact spacing, full-row click-area,
-          // hover subtle, active filled. Active sticky über hover via
-          // class-order. focus-ring nur bei Keyboard (focus-visible).
-          "group flex w-full items-center gap-1.5 py-0.5 pr-2 cursor-pointer rounded-sm relative",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
-          // Explicit VS-Code-Blau für active (statt theme-`bg-accent`,
-          // weil publicstatus's accent near-white ist → kaum sichtbar).
-          // border-l-2 als VS-Code-Marker-Bar links.
-          isActive
-            ? "bg-blue-100 dark:bg-blue-900/40 border-l-2 border-l-blue-500"
-            : cn("hover:bg-muted/60", stateClass),
-        )}
-        style={indentStyle}
-        onClick={handleRowClick}
-        onKeyDown={(e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            handleRowClick();
-          }
-        }}
-        role="treeitem"
-        // V.1.6c Roving-tabindex: nur das focused-treeitem hat
-        // tabIndex=0, alle anderen tabIndex=-1. focusedPath=undefined
-        // ist transient (VisualTree useEffect setzt's post-mount auf
-        // erstes treeitem); während dieser Phase haben alle tabIndex=-1
-        // und Tab-Reach geht nicht durch — minimal-Window, akzeptabel.
-        tabIndex={focusedPath === path ? 0 : -1}
-        aria-expanded={hasChildren ? isExpanded : undefined}
-        aria-selected={isActive ? true : undefined}
-        data-kumiko-tree-path={path}
-        data-kumiko-tree-has-children={hasChildren ? "true" : "false"}
-        data-kumiko-tree-active={isActive ? "true" : undefined}
-      >
-        <ChevronGlyph hasChildren={hasChildren} expanded={isExpanded} />
-        {node.icon !== undefined &&
-          (() => {
-            const IconComponent = NODE_ICONS[node.icon];
-            if (IconComponent === undefined) return null;
-            // VS-Code-typische Icon-Color: folder yellow/amber, file
-            // muted. Plus fill für folder gibt geschlossenem-Folder-Look.
-            const iconColor = node.icon === "folder" ? "text-amber-500" : "text-muted-foreground";
-            return <IconComponent aria-hidden className={cn("size-3.5 shrink-0", iconColor)} />;
-          })()}
-        <span className="flex-1 truncate text-sm">{node.label}</span>
-        <HoverActions
-          actions={node.actions}
-          createAction={node.state === "empty" ? node.createAction : undefined}
-        />
-      </div>
-      {isExpanded && (
-        <ChildrenView
-          node={node}
-          path={path}
-          expanded={expanded}
-          onToggle={onToggle}
-          depth={depth}
-          dynamicChildren={dynamicChildren}
-          focusedPath={focusedPath}
-        />
-      )}
-    </div>
-  );
-}
-
-function ChevronGlyph({
-  hasChildren,
-  expanded,
-}: {
-  readonly hasChildren: boolean;
-  readonly expanded: boolean;
-}): ReactNode {
-  if (!hasChildren) return <span aria-hidden className="size-3.5" />;
-  return expanded ? (
-    <ChevronDown aria-hidden className="size-3.5 shrink-0" />
-  ) : (
-    <ChevronRight aria-hidden className="size-3.5 shrink-0" />
-  );
-}
-
-function HoverActions({
-  actions,
-  createAction,
-}: {
-  readonly actions?: readonly TreeAction[];
-  readonly createAction?: TreeAction;
-}): ReactNode {
-  const has = (actions !== undefined && actions.length > 0) || createAction !== undefined;
-  if (!has) return null;
-  return (
-    <span className="invisible group-hover:visible flex items-center gap-1 shrink-0">
-      {createAction !== undefined && (
-        <ActionButton action={createAction} icon={<Plus className="size-3.5" />} />
-      )}
-      {actions?.map((a) => (
-        <ActionButton key={a.label} action={a} icon={<span aria-hidden>{a.icon}</span>} />
-      ))}
-    </span>
-  );
-}
-
-function ActionButton({
-  action,
-  icon,
-}: {
-  readonly action: TreeAction;
-  readonly icon: ReactNode;
-}): ReactNode {
-  const dispatch = useDispatchTarget();
-  return (
-    <button
-      type="button"
-      aria-label={action.label}
-      className="p-0.5 hover:bg-accent rounded"
-      onClick={(e) => {
-        // Stop the event so the parent-row's onClick (which would
-        // toggle / dispatch the row's own target) doesn't fire.
-        e.stopPropagation();
-        dispatch(action.target);
-      }}
-    >
-      {icon}
-    </button>
-  );
-}
-
-function ChildrenView({
-  node,
-  path,
-  expanded,
-  onToggle,
-  depth,
-  dynamicChildren,
-  focusedPath,
-}: {
-  readonly node: TreeNode;
-  readonly path: string;
-  readonly expanded: ReadonlySet<string>;
-  readonly onToggle: (path: string) => void;
-  readonly depth: number;
-  readonly dynamicChildren: readonly TreeNode[] | null;
-  readonly focusedPath: string | undefined;
-}): ReactNode {
-  // Array.isArray narrow't TS automatisch auf readonly TreeNode[] — kein
-  // as-Cast nötig (Memory `[Type Assertions]`).
-  if (Array.isArray(node.children)) {
-    const children = node.children;
-    return (
-      <>
-        {children.map((child, idx) => {
-          // Path: idx als stabiler Disambiguator falls Provider doppelte
-          // Labels liefert (Provider-Bug, aber React-Keys müssen unique
-          // sein sonst silent state-corruption). Provider-Liefer-Order
-          // ist stabil — idx ist hier kein „array-shift"-Risk wie bei
-          // user-rearrangeable Lists.
-          const childPath = `${path}/${idx}-${child.label}`;
-          return (
-            <TreeNodeRenderer
-              key={childPath}
-              node={child}
-              path={childPath}
-              expanded={expanded}
-              onToggle={onToggle}
-              depth={depth + 1}
-              focusedPath={focusedPath}
-            />
-          );
-        })}
-      </>
-    );
-  }
-  // Dynamic-children-Pfad: noch nicht emitted → Lade-Zeile, dann Liste.
-  if (dynamicChildren === null) {
-    return (
-      <div
-        className="text-xs text-muted-foreground italic py-1"
-        style={{ paddingLeft: `${(depth + 1) * 12 + 8}px` }}
-      >
-        Lädt …
-      </div>
-    );
-  }
-  return (
-    <>
-      {dynamicChildren.map((child, idx) => {
-        // Selbe idx-Disambiguator-Logik wie ChildrenView static-Branch.
-        const childPath = `${path}/${idx}-${child.label}`;
-        return (
-          <TreeNodeRenderer
-            key={childPath}
-            node={child}
-            path={childPath}
-            expanded={expanded}
-            onToggle={onToggle}
-            depth={depth + 1}
-          />
-        );
-      })}
-    </>
-  );
-}