@cosmicdrift/kumiko-renderer-web 0.65.0 → 0.66.0

package/src/ui/skeleton.tsx

@@ -0,0 +1,14 @@
+// @ts-nocheck — vendored shadcn, regenerate via scripts/sync-shadcn.ts
+import { cn } from "../lib/cn"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-md bg-accent", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package/src/ui/table.tsx

@@ -0,0 +1,117 @@
+// @ts-nocheck — vendored shadcn, regenerate via scripts/sync-shadcn.ts
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../lib/cn"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

package/src/ui/textarea.tsx

@@ -0,0 +1,19 @@
+// @ts-nocheck — vendored shadcn, regenerate via scripts/sync-shadcn.ts
+import * as React from "react"
+
+import { cn } from "../lib/cn"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

package/src/ui/tooltip.tsx

@@ -0,0 +1,58 @@
+// @ts-nocheck — vendored shadcn, regenerate via scripts/sync-shadcn.ts
+"use client"
+
+import * as React from "react"
+import { Tooltip as TooltipPrimitive } from "radix-ui"
+
+import { cn } from "../lib/cn"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/ui/use-mobile.ts

@@ -0,0 +1,20 @@
+// @ts-nocheck — vendored shadcn, regenerate via scripts/sync-shadcn.ts
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

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

@@ -1,314 +0,0 @@
-//
-// V.1.1-D Integration-Test — End-to-End-Beweis für die Schleife
-// `clientFeatures.treeProvider → useTreeProviders → VisualTree →
-// TreeNodeRenderer → Click → dispatchTarget`.
-//
-// Im Gegensatz zum visual-tree.test.tsx (isolierte VisualTree-Component
-// mit Mock-Providers) mountet dieser Test den vollen WorkspaceShell mit
-// zwei Workspaces (nav + tree) und zwei Tree-Provider-clientFeatures.
-// Bewert wird:
-//   1. Provider-Iteration: beide Top-Level-Knoten landen im DOM
-//      (alphabetisch nach featureName)
-//   2. Subscribe-Update: zweiter Emit eines Providers re-rendert die
-//      Sidebar ohne Workspace-Switch
-//   3. Stub-Dispatch: Click auf Knoten mit target ruft dispatch mit
-//      richtigem TargetRef
-//   4. Workspace-Switch: nav-Workspace zeigt NavTree, tree-Workspace
-//      zeigt VisualTree mit beiden Provider-Beiträgen
-//
-// **Memory `[Kein Fake-Dispatcher]`-Note**: V.1.1 hat keine HTTP-Calls
-// (Tree-Provider sind reine Client-Functions ohne Args). Echtes
-// setupTestStack kommt mit V.1.2 wenn text-content's Slug-Liste durch
-// die Server-Pipeline geht.
-
-import { afterEach, beforeEach, describe, expect, test } from "bun:test";
-import type { TreeChildrenSubscribe, TreeNode } from "@cosmicdrift/kumiko-framework/engine";
-import type { FeatureSchema, WorkspaceSchema } from "@cosmicdrift/kumiko-renderer";
-import {
-  createStaticLocaleResolver,
-  LocaleProvider,
-  NavProvider,
-  PrimitivesProvider,
-} 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 "../layout/target-resolver-stub";
-import { WorkspaceShell } from "../layout/workspace-shell";
-import { defaultPrimitives } from "../primitives";
-
-// localStorage-Mock (vitest+Bun-Runtime liefert nur partielles
-// localStorage). Pro Test frische Map damit Tests sauber isoliert sind.
-beforeEach(() => {
-  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,
-    },
-  });
-  window.history.replaceState(null, "", "/");
-});
-
-function ws(
-  id: string,
-  options: {
-    label: string;
-    isDefault?: boolean;
-    navigation?: "nav" | "tree";
-    navMembers?: readonly string[];
-  },
-): WorkspaceSchema {
-  return {
-    definition: {
-      id,
-      label: options.label,
-      access: { openToAll: true },
-      ...(options.isDefault === true && { default: true }),
-      ...(options.navigation !== undefined && { navigation: options.navigation }),
-    },
-    navMembers: options.navMembers ?? [],
-  };
-}
-
-function makeStaticProvider(nodes: readonly TreeNode[]): TreeChildrenSubscribe {
-  return () => (emit) => {
-    emit(nodes);
-    return () => {};
-  };
-}
-
-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 renderShellWithTreeProviders(
-  schema: FeatureSchema,
-  treeProviders: ReadonlyMap<string, TreeChildrenSubscribe>,
-): ReturnType<typeof render> {
-  function Wrapper({ children }: { readonly children: ReactNode }): ReactNode {
-    const nav = useBrowserNavApi({ hasWorkspaces: true });
-    return (
-      <LocaleProvider resolver={createStaticLocaleResolver()}>
-        <PrimitivesProvider value={defaultPrimitives}>
-          <NavProvider value={nav}>
-            <TreeProvidersProvider value={treeProviders}>{children}</TreeProvidersProvider>
-          </NavProvider>
-        </PrimitivesProvider>
-      </LocaleProvider>
-    );
-  }
-  return render(
-    <WorkspaceShell brand={<div>Brand</div>} schema={schema} user={{ id: "u1", roles: [] }}>
-      <div>content</div>
-    </WorkspaceShell>,
-    { wrapper: Wrapper },
-  );
-}
-
-describe("V.1.1-D Integration — Provider-Iteration + Subscribe + Dispatch", () => {
-  let cleanup: (() => void) | undefined;
-  afterEach(() => {
-    cleanup?.();
-    cleanup = undefined;
-  });
-
-  test("Provider-Iteration: beide Features landen im DOM, alphabetisch sortiert", () => {
-    const schema = {
-      featureName: "demo",
-      entities: {},
-      screens: [],
-      navs: [],
-      workspaces: [
-        ws("visual", {
-          label: "Visual",
-          isDefault: true,
-          navigation: "tree",
-        }),
-      ],
-    } as const;
-
-    const treeProviders = new Map<string, TreeChildrenSubscribe>([
-      ["text-content", makeStaticProvider([{ label: "Marketing" }])],
-      ["legal-pages", makeStaticProvider([{ label: "Imprint" }])],
-    ]);
-
-    renderShellWithTreeProviders(schema, treeProviders);
-
-    expect(screen.getByText("Marketing")).toBeTruthy();
-    expect(screen.getByText("Imprint")).toBeTruthy();
-
-    // Reihenfolge: legal-pages (l < t) kommt vor text-content
-    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("Subscribe-Update ohne Workspace-Switch: zweiter Emit re-rendert", () => {
-    const { provider, emit } = makeMutableProvider([{ label: "Hero" }]);
-
-    const schema = {
-      featureName: "demo",
-      entities: {},
-      screens: [],
-      navs: [],
-      workspaces: [ws("visual", { label: "Visual", isDefault: true, navigation: "tree" })],
-    } as const;
-
-    const treeProviders = new Map([["text-content", provider]]);
-
-    renderShellWithTreeProviders(schema, treeProviders);
-    expect(screen.getByText("Hero")).toBeTruthy();
-
-    act(() => {
-      emit([{ label: "Hero" }, { label: "Pricing" }, { label: "Footer" }]);
-    });
-
-    expect(screen.getByText("Pricing")).toBeTruthy();
-    expect(screen.getByText("Footer")).toBeTruthy();
-  });
-
-  test("Stub-Dispatch: Click → setDispatchListener-Spy bekommt richtige TargetRef", () => {
-    const dispatched: unknown[] = [];
-    cleanup = setDispatchListener((target) => {
-      dispatched.push(target);
-    });
-
-    const schema = {
-      featureName: "demo",
-      entities: {},
-      screens: [],
-      navs: [],
-      workspaces: [ws("visual", { label: "Visual", isDefault: true, navigation: "tree" })],
-    } as const;
-
-    const treeProviders = new Map<string, TreeChildrenSubscribe>([
-      [
-        "text-content",
-        makeStaticProvider([
-          {
-            label: "Imprint",
-            target: {
-              featureId: "text-content",
-              action: "edit",
-              args: { slug: "imprint" },
-            },
-          },
-        ]),
-      ],
-    ]);
-
-    renderShellWithTreeProviders(schema, treeProviders);
-    fireEvent.click(screen.getByText("Imprint"));
-
-    expect(dispatched).toEqual([
-      {
-        featureId: "text-content",
-        action: "edit",
-        args: { slug: "imprint" },
-      },
-    ]);
-  });
-
-  test("Workspace-Switch: nav-Workspace zeigt NavTree, tree-Workspace zeigt VisualTree-Provider", () => {
-    const schema = {
-      featureName: "demo",
-      entities: {},
-      screens: [],
-      navs: [{ id: "list", label: "Builder-List" }],
-      workspaces: [
-        ws("admin", {
-          label: "Admin",
-          isDefault: true,
-          navigation: "nav",
-          navMembers: ["demo:nav:list"],
-        }),
-        ws("visual", {
-          label: "Visual",
-          navigation: "tree",
-        }),
-      ],
-    } as const;
-
-    const treeProviders = new Map<string, TreeChildrenSubscribe>([
-      ["text-content", makeStaticProvider([{ label: "Marketing" }])],
-    ]);
-
-    renderShellWithTreeProviders(schema, treeProviders);
-
-    // Initial: admin-Workspace → NavTree mit "Builder-List"
-    expect(screen.getByText("Builder-List")).toBeTruthy();
-    expect(screen.queryByText("Marketing")).toBeNull();
-
-    // Switch zu visual → VisualTree mit Provider-Beitrag
-    fireEvent.click(screen.getByTestId("workspace-tab-visual"));
-    expect(screen.getByText("Marketing")).toBeTruthy();
-    expect(screen.queryByText("Builder-List")).toBeNull();
-
-    // Zurück zu admin → NavTree wieder
-    fireEvent.click(screen.getByTestId("workspace-tab-admin"));
-    expect(screen.getByText("Builder-List")).toBeTruthy();
-    expect(screen.queryByText("Marketing")).toBeNull();
-  });
-
-  test("localStorage-Persistenz: Toggle persistiert pro Workspace, Re-Mount restored", () => {
-    const schema = {
-      featureName: "demo",
-      entities: {},
-      screens: [],
-      navs: [],
-      workspaces: [ws("visual", { label: "Visual", isDefault: true, navigation: "tree" })],
-    } as const;
-
-    const treeProviders = new Map<string, TreeChildrenSubscribe>([
-      ["text-content", makeStaticProvider([{ label: "Marketing", children: [{ label: "Hero" }] }])],
-    ]);
-
-    const result = renderShellWithTreeProviders(schema, treeProviders);
-
-    // Initial collapsed: Hero nicht sichtbar
-    expect(screen.queryByText("Hero")).toBeNull();
-
-    // Toggle: Marketing ausklappen
-    fireEvent.click(screen.getByText("Marketing"));
-    expect(screen.getByText("Hero")).toBeTruthy();
-
-    // localStorage hat den Persisted-State
-    const stored = window.localStorage.getItem("kumiko:visual-tree:expanded:visual");
-    expect(stored).not.toBeNull();
-    expect(JSON.parse(stored ?? "[]")).toContain("text-content/0-Marketing");
-
-    // Re-Mount mit gleichem Workspace → expanded restored
-    result.unmount();
-    renderShellWithTreeProviders(schema, treeProviders);
-    expect(screen.getByText("Hero")).toBeTruthy();
-  });
-});

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

@@ -1,68 +0,0 @@
-// 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);
-}