@cosmicdrift/kumiko-renderer 0.2.3 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,110 @@
 # @cosmicdrift/kumiko-renderer
 
+## 0.4.0
+
+### Minor Changes
+
+- 825e7d2: Visual-Tree V.1.4 → V.1.6 — Feature-complete Editor + Folder-Hierarchy + Roving-tabindex.
+
+  **V.1.4** — explicit `folder?: string` Schema-Field auf text-block-entity. Slug bleibt
+  kebab-only validiert, Folder explizit gesetzt. Tree gruppiert via `groupBlocksByFolder`
+  (ersetzt `groupBlocksBySlugPrefix`). `Subscribe<T>` Signature um optional `emitError`
+  erweitert für explicit async-error-Pfade. ProviderBranch zeigt Error-Banner mit
+  Retry-Button. Drift-Test pinnt seedTextBlock-vs-set.write Slug-Validation.
+
+  **V.1.4b** — URL-State-Routing für Editor-Target via `nav.searchParams`. F5 + Back-Button
+  stellen den Editor-State wieder her. Format: `?t=text-content:edit&a_slug=...&a_lang=...`.
+  Plus `useDispatchTarget` hook ersetzt globalen `dispatchTarget` als empfohlenen Production-
+  Pfad (legacy bleibt für Test-Hooks).
+
+  **V.1.5** — Arrow-Key-Navigation (`<aside role="tree">`, ARIA-tree-Pattern) + SSE-driven
+  Tree-Refresh. `ClientFeatureDefinition.treeEntities?: string[]` listet Entity-Namen pro
+  Provider; live-events triggern provider-re-mount → Stale-Tree-state="stub"→"filled"
+  flippt nach save automatisch.
+
+  **V.1.5c+d** — Active-Node-Highlight (explicit blue + 2px border-l + scrollIntoView),
+  VS-Code-Polish (compact spacing, focus-visible, folder-icon-color text-amber, indent-
+  guides per ancestor-depth), Folder-Wrapper für legal-pages ("📁 Legal" + slug-first
+  Verschachtelung) und text-content ("📁 Content").
+
+  **V.1.6** — Multi-level Folder-Splitting (`folder="page/marketing"` → nested folders,
+  walk-or-create-pattern, folder/leaf-collision-tolerant). Roving-tabindex (nur focused-
+  treeitem hat tabIndex=0, Tab cyclt aus dem Tree raus).
+
+  35/35 kumiko check PASS, 13/13 group-blocks + 22/22 text-content integration tests grün.
+  Browser + Keyboard lokal validated.
+
+  **Breaking**: `TreeContext` Type entfernt (V.1.2 SR2-Rip — war nie genutzt). Provider sind
+  session-bound: `TreeChildrenSubscribe = () => Subscribe<T>` statt `(ctx) => Subscribe<T>`.
+
+  **V.1.7-Followups**: useEffect-deps in VisualTree-focus-init (Performance), Cancellation-
+  Token in TreeProvider's fetch (emit-after-unmount-warning), inline-rename, drag-drop,
+  file-icons per slug-extension, parent-jump bei ArrowLeft auf collapsed-item.
+
+### Patch Changes
+
+- Updated dependencies [825e7d2]
+  - @cosmicdrift/kumiko-framework@0.4.0
+  - @cosmicdrift/kumiko-headless@0.4.0
+
+## 0.3.0
+
+### Minor Changes
+
+- 0.3.0 bringt zwei neue Subsysteme (Step-Engine Tier-3 + Visual-Tree) plus
+  eine AST-Codemod-Pipeline als Vorarbeit für den L2-AI-Layer.
+
+  ### Breaking Changes
+
+  - `skipTransitionGuard` → `unsafeSkipTransitionGuard` (Rename in
+    feature-ast + engine). Der `unsafe`-Prefix macht die Tragweite des
+    Casts sichtbar und ist konsistent zur `unsafeProjectionUpsert`- und
+    `r.rawTable`-Konvention. Migration: 1:1-Ersetzung, keine Verhaltens-Änderung.
+
+  ### Features
+
+  - **Step-Engine M.4 — Tier-3 Workflow-Engine.** Neue Step-Vocabulary
+    `wait`, `waitForEvent`, `retry` ermöglicht persistierte Long-Running-Flows
+    über Job-Boundaries hinweg. Q7 Snapshot-at-Start hängt jedem Step-Run
+    einen SHA-256-Fingerprint des Aggregat-Zustands an, sodass Replays
+    deterministisch gegen den ursprünglichen Eingangszustand laufen.
+  - **Visual-Tree V.1.x — Tree-API + Editor-Panel.** Neue `VisualTree`-
+    Component plus TreeProvider-Pattern; erste TreeProviders für
+    `text-content` und `legal-pages` (CMS-light + Impressum/Privacy).
+    Fundament für den späteren No-Code-Designer (~3000 LOC, 98 Tests).
+  - **Codemod-Pipeline.** AST-basierte Patcher-Module für strukturelle
+    Feature-Edits — wird vom kommenden L2-AI-Layer als Tool-Surface
+    verwendet, ist aber eigenständig nutzbar für ts-morph-style Migrationen.
+  - **user-data-rights Sample-Recipe.** DSGVO Art. 15/17/18/20 vollständig
+    als Sample-Recipe (`samples/recipes/`) inklusive README — zeigt die
+    Export- und Forget-Pipeline gegen den `compliance-profiles`-Default
+    (`eu-dsgvo`).
+
+  ### Fixes
+
+  - `tier-engine`: auto-default-tier-Hook benutzt jetzt `ctx.db.raw` für
+    Event-Store-Operationen (#37, vorher: stiller Bug, 22 Tage live).
+  - `engine`: unsafe-projection-upsert nutzt `as never` statt `as any` —
+    schmaler Cast-Surface, weniger Compiler-Knebel.
+  - `visual-tree`: runtime-isolation marker für client-konsumierte Files,
+    damit der Multi-Entry-Build den richtigen Bundle-Split bekommt.
+  - `feature-ast`: vollständiger `unsafeSkipTransitionGuard`-Rename (war
+    in zwei Modulen noch der alte Name).
+  - `framework`: Error-Reasons + `noConsole`-Lint + No-Date-API-Guard
+    wieder push-ready.
+
+  ### Library-Updates
+
+  hono 4.12, jose 6.2, stripe 22.1, meilisearch 0.58, marked 18,
+  bun-types 1.3.13, lucide-react 1.14, bullmq 5.76, ioredis 5.10,
+  i18next 26.0, react + radix-ui-primitives auf aktuelle Minors.
+
+### Patch Changes
+
+- Updated dependencies
+  - @cosmicdrift/kumiko-framework@0.3.0
+  - @cosmicdrift/kumiko-headless@0.3.0
+
 ## 0.2.3
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer",
-  "version": "0.2.3",
+  "version": "0.4.0",
   "description": "Platform-agnostic React renderer for Kumiko screens. Contains the shared logic — primitives-contract, hooks, KumikoScreen, navigation & SSE abstractions — that any platform-specific renderer (web, native) composes. No DOM, no EventSource, no react-dom.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -9,17 +9,20 @@
     "runtime": "client"
   },
   "exports": {
-    ".": "./src/index.ts"
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-framework": "0.2.3",
-    "@cosmicdrift/kumiko-headless": "0.2.3",
-    "react": "^19.2.0"
+    "@cosmicdrift/kumiko-framework": "0.4.0",
+    "@cosmicdrift/kumiko-headless": "0.4.0",
+    "react": "^19.2.6"
   },
   "devDependencies": {
-    "@testing-library/react": "^16.3.0",
-    "@types/react": "^19.2.0",
-    "jsdom": "^29.1.0"
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.2.14",
+    "jsdom": "^29.1.1"
   },
   "repository": {
     "type": "git",

package/src/__tests__/i18n.test.tsx

@@ -17,16 +17,16 @@ function makeStatefulResolver(initial: string): LocaleResolver {
   let current = initial;
   const listeners = new Set<() => void>();
   return {
-    translate: (key) => key,
+    translate: (key: string) => key,
     locale: () => current,
     timeZone: () => "UTC",
-    subscribe: (l) => {
+    subscribe: (l: () => void) => {
       listeners.add(l);
       return () => {
         listeners.delete(l);
       };
     },
-    setLocale: (next) => {
+    setLocale: (next: string) => {
       current = next;
       for (const l of listeners) l();
     },
@@ -45,7 +45,7 @@ describe("useTranslation — lookup order", () => {
   test("App-Resolver wins when it returns a non-key value", () => {
     const resolver: LocaleResolver = {
       ...createStaticLocaleResolver({ locale: "de" }),
-      translate: (key) => (key === "hello" ? "Resolved by app" : key),
+      translate: (key: string) => (key === "hello" ? "Resolved by app" : key),
     };
     const { result } = renderHook(() => useTranslation(), { wrapper: wrap(resolver) });
     expect(result.current("hello")).toBe("Resolved by app");

package/src/app/kumiko-screen.tsx

@@ -4,7 +4,10 @@ import type {
   EntityDefinition,
   EntityEditScreenDefinition,
   EntityListScreenDefinition,
+  RowAction,
+  RowActionWriteHandler,
   ScreenDefinition,
+  ToolbarAction,
 } from "@cosmicdrift/kumiko-framework/ui-types";
 import type {
   Command,
@@ -16,12 +19,12 @@ import type {
 } from "@cosmicdrift/kumiko-headless";
 import { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { RenderEdit } from "../components/render-edit";
-import { RenderList } from "../components/render-list";
+import { RenderList, type ToolbarActionButton } from "../components/render-list";
 import { useDispatcher, useOptionalDispatcher } from "../context/dispatcher-context";
 import { useListUrlState } from "../hooks/use-list-url-state";
 import { useQuery } from "../hooks/use-query";
 import { useTranslation } from "../i18n";
-import { usePrimitives } from "../primitives";
+import { type DataTableRowAction, usePrimitives } from "../primitives";
 import { synthesizeActionFormEntity, synthesizeActionFormScreen } from "./action-form-shim";
 import { synthesizeConfigEditEntity, synthesizeConfigEditScreen } from "./config-edit-shim";
 import { useCustomScreenComponent } from "./custom-screens";
@@ -82,7 +85,10 @@ export function KumikoScreen({
 }: KumikoScreenProps): ReactNode {
   const { Banner, Text } = usePrimitives();
   const screen = useMemo(
-    () => schema.screens.find((s) => qualifyScreenId(schema.featureName, s.id) === qn),
+    () =>
+      schema.screens.find(
+        (s: ScreenDefinition) => qualifyScreenId(schema.featureName, s.id) === qn,
+      ),
     [schema.featureName, schema.screens, qn],
   );
 
@@ -162,7 +168,9 @@ function entityWriteCommand(
 function useNavigateToListAfter(schema: FeatureSchema, entityName: string): () => void {
   const nav = useNav();
   return useCallback(() => {
-    const list = schema.screens.find((s) => s.type === "entityList" && s.entity === entityName);
+    const list = schema.screens.find(
+      (s: ScreenDefinition) => s.type === "entityList" && s.entity === entityName,
+    );
     if (!list) return;
     // schema.screens.id ist QN-form (registry-stamped); nav.navigate
     // erwartet Short-Form. Sonst landet die URL doppelt-qualifiziert.
@@ -184,7 +192,9 @@ function useNavigateToCreateFor(
 ): (() => void) | undefined {
   const nav = useNav();
   const editScreenId = useMemo(() => {
-    const edit = schema.screens.find((s) => s.type === "entityEdit" && s.entity === entityName);
+    const edit = schema.screens.find(
+      (s: ScreenDefinition) => s.type === "entityEdit" && s.entity === entityName,
+    );
     return edit !== undefined ? lastSegment(edit.id) : undefined;
   }, [schema.screens, entityName]);
   const navigate = useCallback(() => {
@@ -643,7 +653,7 @@ function EntityListBody({
   const rowActions = useMemo(() => {
     if (screen.rowActions === undefined) return undefined;
     return screen.rowActions
-      .map((action) => {
+      .map((action: RowAction): DataTableRowAction | null => {
         // navigate-Variante braucht keinen Dispatcher; nav ist
         // immer da (Provider von createKumikoApp).
         if (action.kind === "navigate") {
@@ -671,31 +681,32 @@ function EntityListBody({
             }),
           };
         }
-        // writeHandler-Variante (default kind, Backwards-Compat).
-        // Braucht Dispatcher — null returnen → filter unten dropt es,
-        // damit das useEffect-Warning oben einmal feuert + die Action
-        // einfach nicht rendert (statt Crash).
         if (dispatcher === undefined) return null;
+        if (action.kind !== "writeHandler" && action.kind !== undefined) return null;
+        const writeAction = action as RowActionWriteHandler;
         return {
-          id: action.id,
-          label: effectiveTranslate(action.label),
-          ...(action.style !== undefined && { style: action.style }),
-          ...(action.confirm !== undefined && { confirm: effectiveTranslate(action.confirm) }),
-          ...(action.confirmLabel !== undefined && {
-            confirmLabel: effectiveTranslate(action.confirmLabel),
-          }),
+          id: writeAction.id,
+          label: effectiveTranslate(writeAction.label),
+          style: writeAction.style,
+          confirm:
+            writeAction.confirm !== undefined ? effectiveTranslate(writeAction.confirm) : undefined,
+          confirmLabel:
+            writeAction.confirmLabel !== undefined
+              ? effectiveTranslate(writeAction.confirmLabel)
+              : undefined,
           onTrigger: async (row: ListRowViewModel) => {
-            const buildPayload = action.payload;
+            const buildPayload = writeAction.payload;
             const payload =
               buildPayload !== undefined ? buildPayload(row.values) : { id: row.values["id"] };
-            await dispatcher.write(action.handler, payload);
+            await dispatcher.write(writeAction.handler, payload);
           },
-          ...(action.visible !== undefined && {
-            isVisible: (row: ListRowViewModel) => action.visible?.(row.values, undefined) ?? true,
-          }),
+          isVisible:
+            writeAction.visible !== undefined
+              ? (row: ListRowViewModel) => writeAction.visible?.(row.values, undefined) ?? true
+              : undefined,
         };
       })
-      .filter((a): a is NonNullable<typeof a> => a !== null);
+      .filter((a: DataTableRowAction | null): a is DataTableRowAction => a !== null);
   }, [screen.rowActions, effectiveTranslate, dispatcher, nav]);
 
   // ToolbarActions: Schema → Resolved-Form (analog rowActions).
@@ -705,45 +716,34 @@ function EntityListBody({
   const toolbarActions = useMemo(() => {
     if (screen.toolbarActions === undefined) return undefined;
     return screen.toolbarActions
-      .map(
-        (
-          action,
-        ): {
-          id: string;
-          label: string;
-          style?: "primary" | "secondary" | "danger";
-          confirm?: string;
-          confirmLabel?: string;
-          onTrigger: () => Promise<void> | void;
-        } | null => {
-          if (action.kind === "navigate") {
-            return {
-              id: action.id,
-              label: effectiveTranslate(action.label),
-              ...(action.style !== undefined && { style: action.style }),
-              onTrigger: () => nav.navigate({ screenId: action.screen }),
-            };
-          }
-          // writeHandler — braucht Dispatcher. Wenn keiner mounted ist,
-          // skippen wir die Action statt zu crashen (gleiche Logik wie
-          // bei rowActions; einmaliger Warn-Log dort reicht).
-          if (dispatcher === undefined) return null;
+      .map((action: ToolbarAction): ToolbarActionButton | null => {
+        if (action.kind === "navigate") {
           return {
             id: action.id,
             label: effectiveTranslate(action.label),
             ...(action.style !== undefined && { style: action.style }),
-            ...(action.confirm !== undefined && { confirm: effectiveTranslate(action.confirm) }),
-            ...(action.confirmLabel !== undefined && {
-              confirmLabel: effectiveTranslate(action.confirmLabel),
-            }),
-            onTrigger: async () => {
-              const payload = action.payload?.() ?? {};
-              await dispatcher.write(action.handler, payload);
-            },
+            onTrigger: () => nav.navigate({ screenId: action.screen }),
           };
-        },
-      )
-      .filter((a): a is NonNullable<typeof a> => a !== null);
+        }
+        // writeHandler — braucht Dispatcher. Wenn keiner mounted ist,
+        // skippen wir die Action statt zu crashen (gleiche Logik wie
+        // bei rowActions; einmaliger Warn-Log dort reicht).
+        if (dispatcher === undefined) return null;
+        return {
+          id: action.id,
+          label: effectiveTranslate(action.label),
+          ...(action.style !== undefined && { style: action.style }),
+          ...(action.confirm !== undefined && { confirm: effectiveTranslate(action.confirm) }),
+          ...(action.confirmLabel !== undefined && {
+            confirmLabel: effectiveTranslate(action.confirmLabel),
+          }),
+          onTrigger: async () => {
+            const payload = action.payload?.() ?? {};
+            await dispatcher.write(action.handler, payload);
+          },
+        };
+      })
+      .filter((a: ToolbarActionButton | null): a is ToolbarActionButton => a !== null);
   }, [screen.toolbarActions, effectiveTranslate, nav, dispatcher]);
 
   if (rowsQuery.loading && rowsQuery.data === null) {

package/src/components/render-edit.tsx

@@ -6,6 +6,7 @@ import { normalizeEditField } from "@cosmicdrift/kumiko-framework/ui-types";
 import type {
   DispatcherError,
   EditFieldViewModel,
+  EditSectionViewModel,
   FieldConditions,
   FieldIssue,
   FormSnapshot,
@@ -252,10 +253,10 @@ export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
       actions={formActions}
       testId="render-edit-form"
     >
-      {vm.sections.map((section) => (
+      {vm.sections.map((section: EditSectionViewModel) => (
         <Section key={section.title} title={section.title} testId={`section-${section.title}`}>
           <Grid columns={section.columns}>
-            {section.fields.map((field) => (
+            {section.fields.map((field: EditFieldViewModel) => (
               <GridCellForField
                 key={field.field}
                 field={field}

package/src/components/render-field.tsx

@@ -249,7 +249,7 @@ function renderInput({
       const labels = field.optionLabels;
       const selectOptions =
         labels !== undefined
-          ? rawOptions.map((value) => ({ value, label: labels[value] ?? value }))
+          ? rawOptions.map((value: string) => ({ value, label: labels[value] ?? value }))
           : rawOptions;
       return (
         <Input

package/src/components/render-list.tsx

@@ -3,7 +3,11 @@ import type {
   EntityDefinition,
   EntityListScreenDefinition,
 } from "@cosmicdrift/kumiko-framework/ui-types";
-import type { ListRowViewModel, Translate } from "@cosmicdrift/kumiko-headless";
+import type {
+  ListColumnViewModel,
+  ListRowViewModel,
+  Translate,
+} from "@cosmicdrift/kumiko-headless";
 import { computeListViewModel } from "@cosmicdrift/kumiko-headless";
 import { type ReactNode, useCallback, useEffect, useMemo, useState } from "react";
 import type { ListSort } from "../hooks/use-list-url-state";
@@ -160,8 +164,8 @@ export function RenderList(props: RenderListProps): ReactNode {
   const referenceColumns = useMemo(
     () =>
       vm.columns
-        .filter((c) => c.type === "reference" && c.refEntity !== undefined)
-        .map((c) => ({
+        .filter((c: ListColumnViewModel) => c.type === "reference" && c.refEntity !== undefined)
+        .map((c: ListColumnViewModel) => ({
           field: c.field,
           refEntity: c.refEntity ?? "",
           // Tier 2.7e Cross-Feature: refFeature kommt aus parseRefTarget
@@ -183,7 +187,7 @@ export function RenderList(props: RenderListProps): ReactNode {
   }, []);
   const enrichedColumns = useMemo(() => {
     if (referenceColumns.length === 0) return vm.columns;
-    return vm.columns.map((col) => {
+    return vm.columns.map((col: ListColumnViewModel) => {
       if (col.type !== "reference") return col;
       // Author-deklarierter Renderer übersteuert immer — Default greift
       // nur wenn keiner gesetzt ist.
@@ -284,16 +288,18 @@ export function RenderList(props: RenderListProps): ReactNode {
   // ListSort = DataTableSort (use-list-url-state aliased) — kein Cast nötig.
   return (
     <>
-      {referenceColumns.map((rc) => (
-        <ReferenceLookupBridge
-          key={rc.field}
-          field={rc.field}
-          refEntity={rc.refEntity}
-          labelField={rc.labelField}
-          featureName={rc.refFeature}
-          onMap={handleLookupMap}
-        />
-      ))}
+      {referenceColumns.map(
+        (rc: { field: string; refEntity: string; refFeature: string; labelField: string }) => (
+          <ReferenceLookupBridge
+            key={rc.field}
+            field={rc.field}
+            refEntity={rc.refEntity}
+            labelField={rc.labelField}
+            featureName={rc.refFeature}
+            onMap={handleLookupMap}
+          />
+        ),
+      )}
       <DataTable
         columns={enrichedVm.columns}
         rows={enrichedVm.rows}

package/src/i18n.tsx

@@ -148,7 +148,7 @@ export function createStaticLocaleResolver(
   const locale = options.locale ?? "en";
   const timeZone = options.timeZone ?? "UTC";
   return {
-    translate: (key) => key,
+    translate: (key: string) => key,
     locale: () => locale,
     timeZone: () => timeZone,
     // No-op subscribe: unsere Locale ist statisch, es gibt nie ein