npm - @cosmicdrift/kumiko-renderer-web - Versions diffs - 0.2.3 → 0.4.0 - Mend

@cosmicdrift/kumiko-renderer-web 0.2.3 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/CHANGELOG.md +107 -0
package/package.json +38 -23
package/src/__tests__/visual-tree-integration.test.tsx +315 -0
package/src/__tests__/workspace-shell.test.tsx +142 -0
package/src/app/client-plugin.tsx +37 -0
package/src/app/create-app.tsx +49 -5
package/src/app/resolvers-context.tsx +29 -0
package/src/app/tree-providers-context.tsx +68 -0
package/src/layout/__tests__/visual-tree.test.tsx +300 -0
package/src/layout/avatar.tsx +1 -1
package/src/layout/editor-panel.tsx +104 -0
package/src/layout/target-resolver-stub.tsx +75 -0
package/src/layout/target-url.ts +86 -0
package/src/layout/tree-node-renderer.tsx +386 -0
package/src/layout/visual-tree.tsx +398 -0
package/src/layout/workspace-shell.tsx +31 -6

package/src/app/client-plugin.tsx CHANGED Viewed

@@ -9,6 +9,11 @@
 // ganz außen gestackt, dann alle Gates nach innen. So hat jeder Gate
 // Zugriff auf jeden Provider, egal welches Feature ihn gebracht hat.
+import type {
+  TargetRef,
+  TreeActionDef,
+  TreeChildrenSubscribe,
+} from "@cosmicdrift/kumiko-framework/engine";
 import type { ColumnRendererComponent, TranslationsByLocale } from "@cosmicdrift/kumiko-renderer";
 import type { ComponentType, ReactNode } from "react";
@@ -45,6 +50,38 @@ export type ClientFeatureDefinition = {
    *  echte JSX-Renderer leben im Client-Bundle. Last-Wins bei Key-
    *  Kollision über mehrere Features. */
   readonly columnRenderers?: Readonly<Record<string, ColumnRendererComponent>>;
+  /** Tree-Provider für `r.workspace({ navigation: "tree" })`-Workspaces
+   *  (Visual-Tree). Wird beim Mount des Tree-Workspaces mit ctx aufgerufen,
+   *  emittiert TreeNode[] die in der Sidebar gerendert werden. Closure-
+   *  Distribution gleicher Mechanismus wie `columnRenderers` — Server-
+   *  Registry kennt nur „dass es das gibt", echte Function lebt
+   *  client-side. Spiegelt das server-side `r.tree(provider)` aus dem
+   *  Feature; bundled-features liefern beide Seiten konsistent.
+   *  Siehe visual-tree.md V.1.1-Distribution. */
+  readonly treeProvider?: TreeChildrenSubscribe;
+  /** Tree-Actions-Schema — die Action-Map die `buildTarget` compile-time
+   *  validiert. Erased-Runtime-Surface; typed Handle wandert separat
+   *  via Server-Feature setup-export (FeatureDefinition.exports.handle).
+   *  Identisch zur server-side `r.treeActions(...)`-Map; bundled-
+   *  features liefern beide Seiten konsistent. */
+  readonly treeActions?: Readonly<Record<string, TreeActionDef>>;
+  /** V.1.5b SSE-Tree-Refresh: Liste der Entity-Namen die der Provider
+   *  abdeckt. Bei Live-Events für eine dieser Entities (created/updated/
+   *  deleted/restored) wird der Provider neu aufgerufen → Tree refresht.
+   *  Optional + leer/undefined → kein SSE-Refresh (static Provider, z.B.
+   *  legal-pages). Beispiel text-content: `["text-block"]`. */
+  readonly treeEntities?: readonly string[];
+  /** Editor-Resolver-Komponenten pro featureId:action-Key. Wenn ein
+   *  TreeNode mit target angeklickt wird, schlägt der EditorPanel das
+   *  Component hier nach und rendert es. Komponenten erhalten target
+   *  (mit args) und eine onClose-Callback. Ohne registrierten Resolver
+   *  zeigt der EditorPanel einen Info-Fallback.
+   *  Siehe visual-tree.md V.1.2. */
+  readonly resolvers?: Readonly<
+    Record<string, ComponentType<{ readonly target: TargetRef; readonly onClose: () => void }>>
+  >;
 };
 /** Wickelt einen ReactNode durch eine Liste von Providern/Gates von

package/src/app/create-app.tsx CHANGED Viewed

@@ -1,4 +1,5 @@
 import { createLiveDispatcher } from "@cosmicdrift/kumiko-dispatcher-live";
+import type { TreeChildrenSubscribe } from "@cosmicdrift/kumiko-framework/engine";
 import type {
   Dispatcher,
   ListRowViewModel,
@@ -35,6 +36,8 @@ import { useBrowserTokensApi } from "../tokens";
 import { createBrowserLocaleResolver } from "./browser-locale";
 import { type ClientFeatureDefinition, stackWrappers } from "./client-plugin";
 import { useBrowserNavApi } from "./nav";
+import { type ResolverComponent, ResolversProvider } from "./resolvers-context";
+import { TreeProvidersProvider } from "./tree-providers-context";
 // Web-Bootstrap. Mounted den ganzen Kumiko-Render-Stack im Browser:
 // Tokens (class-based light/dark via <html>), Primitives (HTML),
@@ -192,7 +195,44 @@ export function createKumikoApp(options: CreateKumikoAppOptions = {}): void {
     }
   }
-  const resolver = options.locale ?? createBrowserLocaleResolver();
+  // Tree-Provider-Map aggregieren — keyed by clientFeature.name (matches
+  // server-side FeatureDefinition.name). Mehrere clientFeatures mit
+  // gleichem name + treeProvider sind ein Author-Bug (würde stillschweigend
+  // den Provider eines Features durch den eines anderen überschreiben);
+  // wir warnen einmal pro Kollision. Visual-Tree.md V.1.1-Distribution.
+  const treeProviders = new Map<string, TreeChildrenSubscribe>();
+  const treeEntities = new Map<string, readonly string[]>();
+  for (const f of clientFeatures) {
+    if (f.treeProvider === undefined) continue;
+    if (treeProviders.has(f.name)) {
+      // biome-ignore lint/suspicious/noConsole: dev-warning für Schema-Konflikte
+      console.warn(
+        `[kumiko] treeProvider for "${f.name}" defined by multiple clientFeatures — last definition wins.`,
+      );
+    }
+    treeProviders.set(f.name, f.treeProvider);
+    if (f.treeEntities !== undefined && f.treeEntities.length > 0) {
+      treeEntities.set(f.name, f.treeEntities);
+    }
+  }
+  // Editor-Resolver aggregieren — keyed by "featureId:action". Gleiche
+  // Last-Wins-Semantik wie columnRenderers. Warnung bei Kollision.
+  const resolvers = new Map<string, ResolverComponent>();
+  for (const f of clientFeatures) {
+    if (f.resolvers === undefined) continue;
+    for (const [key, component] of Object.entries(f.resolvers)) {
+      if (resolvers.has(key)) {
+        // biome-ignore lint/suspicious/noConsole: client-bundle has no logger; collision is a dev-time warning that must surface in the browser DevTools.
+        console.warn(
+          `[kumiko] resolver "${key}" defined by multiple clientFeatures — last definition (from "${f.name}") wins.`,
+        );
+      }
+      resolvers.set(key, component);
+    }
+  }
+  const localeResolver = options.locale ?? createBrowserLocaleResolver();
   const navAdapter = options.navAdapter ?? useBrowserNavApi;
   const hasWorkspaces = (app.workspaces?.length ?? 0) > 0;
@@ -210,15 +250,19 @@ export function createKumikoApp(options: CreateKumikoAppOptions = {}): void {
   const tree = (
     <TokensBoot>
-      <LocaleProvider resolver={resolver} fallbackBundles={fallbackBundles}>
+      <LocaleProvider resolver={localeResolver} fallbackBundles={fallbackBundles}>
         <PrimitivesProvider value={primitives}>
           <DispatcherProvider dispatcher={dispatcher}>
             <LiveEventsProvider value={liveEvents}>
               <CustomScreensProvider value={customScreens}>
                 <ColumnRenderersProvider value={columnRenderers}>
-                  <ToastProvider>
-                    {stackWrappers(providers, stackWrappers(gates, screenNode))}
-                  </ToastProvider>
+                  <TreeProvidersProvider value={treeProviders} entities={treeEntities}>
+                    <ResolversProvider resolvers={resolvers}>
+                      <ToastProvider>
+                        {stackWrappers(providers, stackWrappers(gates, screenNode))}
+                      </ToastProvider>
+                    </ResolversProvider>
+                  </TreeProvidersProvider>
                 </ColumnRenderersProvider>
               </CustomScreensProvider>
             </LiveEventsProvider>

package/src/app/resolvers-context.tsx ADDED Viewed

@@ -0,0 +1,29 @@
+// ResolversContext — stellt Editor-Resolver-Komponenten für das
+// EditorPanel bereit. Aggregiert in createKumikoApp aus allen
+// clientFeatures.resolvers, analog zu treeProviders-context.
+// Siehe visual-tree.md V.1.2.
+import type { TargetRef } from "@cosmicdrift/kumiko-framework/engine";
+import type { ComponentType, ReactNode } from "react";
+import { createContext, useContext } from "react";
+export type ResolverComponent = ComponentType<{
+  readonly target: TargetRef;
+  readonly onClose: () => void;
+}>;
+const ResolversContext = createContext<ReadonlyMap<string, ResolverComponent> | null>(null);
+export type ResolversProviderProps = {
+  readonly resolvers: ReadonlyMap<string, ResolverComponent>;
+  readonly children: ReactNode;
+};
+export function ResolversProvider({ resolvers, children }: ResolversProviderProps): ReactNode {
+  return <ResolversContext.Provider value={resolvers}>{children}</ResolversContext.Provider>;
+}
+export function useResolvers(): ReadonlyMap<string, ResolverComponent> {
+  const ctx = useContext(ResolversContext);
+  return ctx ?? new Map();
+}

package/src/app/tree-providers-context.tsx ADDED Viewed

@@ -0,0 +1,68 @@
+// TreeProvidersContext — React-Context für die client-side TreeProvider-
+// Map. Wird von createKumikoApp aus den `clientFeatures[].treeProvider`-
+// Feldern aggregiert und steht damit allen Layout-Komponenten zur
+// Verfügung (insbesondere VisualTree im WorkspaceShell).
+//
+// **Warum Context, nicht Prop**: WorkspaceShell ist bereits multi-Prop
+// (brand, schema, user, sidebarFooter, ...). Provider-Map wäre der
+// nächste Required-when-tree-mode-Prop und würde das Interface aufweichen
+// (welche Props sind Pflicht wann?). Context-Pattern ist konsistent zu
+// existing kumiko-renderer-Mechanik (NavProvider, LocaleProvider,
+// PrimitivesProvider, LiveEventsProvider) — alle für „cross-component
+// state aus app-level".
+//
+// **Default-Wert** ist eine leere Map. Apps ohne Tree-Workspace mounten
+// die App ohne `clientFeatures` mit `treeProvider`, und VisualTree
+// rendert eine empty-state-Sicht. Memory `[Sicherheit > Convenience]`:
+// kein silent-fallback, sondern explicit empty.
+//
+// Siehe visual-tree.md V.1.1-Distribution-Mechanismus.
+import type { TreeChildrenSubscribe } from "@cosmicdrift/kumiko-framework/engine";
+import { createContext, type ReactNode, useContext } from "react";
+const EMPTY_PROVIDERS: ReadonlyMap<string, TreeChildrenSubscribe> = new Map();
+const EMPTY_ENTITIES: ReadonlyMap<string, readonly string[]> = new Map();
+const TreeProvidersContext =
+  createContext<ReadonlyMap<string, TreeChildrenSubscribe>>(EMPTY_PROVIDERS);
+// V.1.5b separater Context für SSE-Entity-Lists pro Provider. Parallel-
+// Context statt Entry-Tuple weil bestehende TreeProvidersProvider-Konsumenten
+// (tests, integration) sonst alle Migrations-Effort hätten.
+const TreeEntitiesContext = createContext<ReadonlyMap<string, readonly string[]>>(EMPTY_ENTITIES);
+export type TreeProvidersProviderProps = {
+  readonly value: ReadonlyMap<string, TreeChildrenSubscribe>;
+  /** Optional: pro Provider die Entity-Liste für SSE-Live-Refresh.
+   *  Default: leere Map → kein Provider refresht via SSE. */
+  readonly entities?: ReadonlyMap<string, readonly string[]>;
+  readonly children: ReactNode;
+};
+export function TreeProvidersProvider({
+  value,
+  entities,
+  children,
+}: TreeProvidersProviderProps): ReactNode {
+  return (
+    <TreeProvidersContext.Provider value={value}>
+      <TreeEntitiesContext.Provider value={entities ?? EMPTY_ENTITIES}>
+        {children}
+      </TreeEntitiesContext.Provider>
+    </TreeProvidersContext.Provider>
+  );
+}
+/** Hook für TreeProvider-Map-Konsumenten (VisualTree im WorkspaceShell).
+ *  Returnt eine empty Map wenn die App keine clientFeatures mit
+ *  treeProvider registriert hat — sicheres Default-Verhalten ohne
+ *  Crash. */
+export function useTreeProviders(): ReadonlyMap<string, TreeChildrenSubscribe> {
+  return useContext(TreeProvidersContext);
+}
+/** V.1.5b SSE-Entity-Map pro Provider. Empty Map default. */
+export function useTreeEntities(): ReadonlyMap<string, readonly string[]> {
+  return useContext(TreeEntitiesContext);
+}

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

@@ -0,0 +1,300 @@
+// @vitest-environment jsdom
+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 { afterEach, beforeEach, describe, expect, test } from "vitest";
+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);
+    },
+  };
+}
+function renderTree(
+  providers: ReadonlyMap<string, TreeChildrenSubscribe>,
+): 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>
+    );
+  }
+  return render(<VisualTree workspaceId="test-ws" />, { wrapper: Wrapper });
+}
+// 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", () => {
+    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", () => {
+    const providers = new Map([["text-content", makeStaticProvider([])]]);
+    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", () => {
+    const providers = new Map([
+      ["text-content", makeStaticProvider([{ label: "Marketing" }, { label: "Legal" }])],
+    ]);
+    renderTree(providers);
+    expect(screen.getByText("Marketing")).toBeTruthy();
+    expect(screen.getByText("Legal")).toBeTruthy();
+  });
+  test("Multi-Provider alphabetisch sortiert nach featureName", () => {
+    // legal-pages kommt alphabetisch vor text-content
+    const providers = new Map<string, TreeChildrenSubscribe>([
+      ["text-content", makeStaticProvider([{ label: "Marketing" }])],
+      ["legal-pages", makeStaticProvider([{ label: "Imprint" }])],
+    ]);
+    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", () => {
+    // Provider ruft emit nie auf (z.B. async-fetch noch im Flug)
+    const noopProvider: TreeChildrenSubscribe = () => () => () => {};
+    const providers = new Map([["slow-feature", noopProvider]]);
+    renderTree(providers);
+    expect(screen.getByText("slow-feature: lädt …")).toBeTruthy();
+  });
+  test("Subscribe-Update: zweiter Emit re-rendert die Liste", () => {
+    const { provider, emit } = makeMutableProvider([{ label: "Hero" }]);
+    const providers = new Map([["text-content", provider]]);
+    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", () => {
+    let unsubscribed = false;
+    const provider: TreeChildrenSubscribe = () => (emit) => {
+      emit([{ label: "Foo" }]);
+      return () => {
+        unsubscribed = true;
+      };
+    };
+    const providers = new Map([["test", provider]]);
+    const result = 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", () => {
+    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" } },
+          },
+        ]),
+      ],
+    ]);
+    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', () => {
+    // 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" },
+            },
+          },
+        ]),
+      ],
+    ]);
+    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", () => {
+    const dispatched: unknown[] = [];
+    cleanup = setDispatchListener((target) => {
+      dispatched.push(target);
+    });
+    const providers = new Map([
+      [
+        "text-content",
+        makeStaticProvider([
+          {
+            label: "Marketing",
+            children: [{ label: "Hero" }],
+          },
+        ]),
+      ],
+    ]);
+    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", () => {
+    const providers = new Map([
+      ["text-content", makeStaticProvider([{ label: "Marketing", children: [{ label: "Hero" }] }])],
+    ]);
+    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", () => {
+    // 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" }] }])],
+    ]);
+    renderTree(providers);
+    // Marketing ist expandiert → Hero sichtbar ohne Click
+    expect(screen.getByText("Hero")).toBeTruthy();
+  });
+});

package/src/layout/avatar.tsx CHANGED Viewed

@@ -43,7 +43,7 @@ const SIZE_CLASSES: Record<AvatarSize, string> = {
   sm: "size-5 text-[10px]",
   md: "size-6 text-[11px]",
   lg: "size-8 text-xs",
-};
+} satisfies Record<AvatarSize, string>;
 function hashCode(str: string): number {
   // djb2-Variante — schnell, deterministic, gut genug verteilt für

package/src/layout/editor-panel.tsx ADDED Viewed

@@ -0,0 +1,104 @@
+// EditorPanel — V.1.2: Main-area editor für Target-Dispatch im
+// Visual-Tree-Workspace. VS-Code-Style-Layout: Tree links, Editor füllt
+// den Main-Bereich; kein floating-Right-Panel. Resolver liefert die
+// Editor-Component für `${featureId}:${action}`, Fallback-Info zeigt
+// die Args wenn nichts registriert ist, Empty-State wenn nichts gewählt.
+//
+// **V.1.4b URL-State**: target wird in `nav.searchParams` persistiert
+// (Format: `?t=text-content:edit&a_slug=imprint&a_lang=de`). F5 +
+// Back-Button stellen den Editor-State wieder her. Single source of
+// truth = URL; useState fällt weg. Close clears params via setSearchParams.
+// Subscribe-Stream bleibt für Test-Hooks (setDispatchListener), wird
+// in Prod nicht mehr für EditorPanel benutzt.
+// Siehe visual-tree.md V.1.2 + V.1.1-B + V.1.4b.
+import type { TargetRef } from "@cosmicdrift/kumiko-framework/engine";
+import { useNav } from "@cosmicdrift/kumiko-renderer";
+import { X } from "lucide-react";
+import type { ComponentType, ReactNode } from "react";
+import { useCallback, useMemo } from "react";
+import { clearTargetSearchParams, parseTargetFromSearchParams } from "./target-url";
+export type ResolverComponent = ComponentType<{
+  readonly target: TargetRef;
+  readonly onClose: () => void;
+}>;
+export type EditorPanelProps = {
+  readonly resolvers: ReadonlyMap<string, ResolverComponent>;
+};
+function EditorPanelInner({
+  target,
+  resolvers,
+  onClose,
+}: {
+  readonly target: TargetRef;
+  readonly resolvers: ReadonlyMap<string, ResolverComponent>;
+  readonly onClose: () => void;
+}): ReactNode {
+  const resolverKey = `${target.featureId}:${target.action}`;
+  const Resolver = resolvers.get(resolverKey);
+  if (Resolver !== undefined) {
+    return <Resolver target={target} onClose={onClose} />;
+  }
+  return (
+    <div className="flex flex-col gap-4 p-4">
+      <div className="flex items-center justify-between">
+        <h2 className="text-lg font-semibold">Editor</h2>
+        <button
+          type="button"
+          aria-label="close editor"
+          className="p-1 hover:bg-accent rounded"
+          onClick={onClose}
+        >
+          <X className="size-4" />
+        </button>
+      </div>
+      <div className="text-sm text-muted-foreground space-y-2">
+        <p>
+          Kein Editor f&uuml;r{" "}
+          <code>
+            {target.featureId}:{target.action}
+          </code>{" "}
+          registriert.
+        </p>
+        <pre className="bg-muted p-2 rounded text-xs overflow-auto">
+          {JSON.stringify(target.args, null, 2)}
+        </pre>
+      </div>
+    </div>
+  );
+}
+export function EditorPanel({ resolvers }: EditorPanelProps): ReactNode {
+  const nav = useNav();
+  // target derived from URL → F5/Back stellen state wieder her.
+  // useMemo stabilisiert reference solange searchParams shallow-gleich
+  // sind (nav-Impl liefert plain-record für genau diesen check).
+  const target = useMemo(() => parseTargetFromSearchParams(nav.searchParams), [nav.searchParams]);
+  const handleClose = useCallback(() => {
+    nav.setSearchParams(clearTargetSearchParams(nav.searchParams));
+  }, [nav]);
+  return (
+    <div data-kumiko-layout="editor-main" className="flex-1 overflow-y-auto">
+      {target === undefined ? (
+        <EditorEmptyState />
+      ) : (
+        <EditorPanelInner target={target} resolvers={resolvers} onClose={handleClose} />
+      )}
+    </div>
+  );
+}
+function EditorEmptyState(): ReactNode {
+  return (
+    <div className="flex h-full items-center justify-center p-8 text-sm text-muted-foreground">
+      <p>W&auml;hle einen Knoten links zum Bearbeiten.</p>
+    </div>
+  );
+}