@cosmicdrift/kumiko-renderer-web 0.56.1 → 0.57.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.56.1",
+  "version": "0.57.0",
   "description": "Web-platform bindings for @cosmicdrift/kumiko-renderer. HTML default-primitives, browser history-based navigation, EventSource-backed live events, and a one-call createKumikoApp that mounts the whole stack via react-dom.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",

package/src/__tests__/config-cascade.test.tsx

@@ -80,7 +80,11 @@ describe("ConfigCascadeView — i18n (Bug 7)", () => {
 describe("ConfigCascadeView — Scope-Filter (Bug 8)", () => {
   test("screenScope=tenant: Operator-Ebenen sind unsichtbar, EIN neutraler Standard-Fallback bleibt", async () => {
     const user = userEvent.setup();
-    const view = render(<ConfigCascadeView cascade={tenantCascade()} screenScope="tenant" />);
+    // tenant-Override → aufklappbar; das Panel muss die Operator-Ebenen
+    // trotzdem verbergen (Scope-Filter), nur Tenant + Standard zeigen.
+    const view = render(
+      <ConfigCascadeView cascade={tenantCascade({ tenantValue: "acme" })} screenScope="tenant" />,
+    );
     await user.click(screen.getByRole("button"));
 
     // Sichtbar: Tenant-Zeile + genau eine neutrale "Standard"-Zeile (Bug-Bash 3
@@ -96,20 +100,17 @@ describe("ConfigCascadeView — Scope-Filter (Bug 8)", () => {
     expect(view.container.textContent).toContain("fallback");
   });
 
-  test("screenScope=tenant mit aktivem System-Wert: Standard-Zeile zeigt den effektiven Wert, nicht die Quelle", async () => {
-    const user = userEvent.setup();
+  test("screenScope=tenant mit aktivem System-Wert: Standard-Zeile zeigt den effektiven Wert neutral, nicht aufklappbar", async () => {
     const view = render(
       <ConfigCascadeView cascade={tenantCascade({ systemActive: true })} screenScope="tenant" />,
     );
-    // Collapsed-Header leakt die Operator-Quelle nicht …
+    // Effektiver Wert sichtbar, Operator-Quelle neutral als "Standard"
+    // maskiert. Nur eine Wert-Ebene (der geerbte System-Wert) → kein
+    // Aufklappen, das Panel wäre nur eine Wiederholung.
     expect(view.container.textContent).toContain("Default");
     expect(view.container.textContent).toContain("system-smtp");
     expect(view.container.textContent).not.toContain("System");
-
-    // … und expanded genauso: effektiver Wert sichtbar, Quelle neutral.
-    await user.click(screen.getAllByRole("button")[0] as HTMLElement);
-    expect(view.container.textContent).toContain("system-smtp");
-    expect(view.container.textContent).not.toContain("System");
+    expect(view.queryByRole("button")).toBeNull();
   });
 
   test("screenScope=system: Operator sieht weiterhin die volle Cascade", async () => {
@@ -141,8 +142,7 @@ describe("ConfigCascadeView — Scope-Filter (Bug 8)", () => {
     expect(resets).toEqual([{ key: "branding.title", scope: "tenant" }]);
   });
 
-  test("ohne eigene Überschreibung: kein Reset-Button", async () => {
-    const user = userEvent.setup();
+  test("reines Default-Feld (kein Override, ein Wert): nicht aufklappbar, kein Button/Panel/Reset", async () => {
     const view = render(
       <ConfigCascadeView
         cascade={tenantCascade()}
@@ -151,7 +151,10 @@ describe("ConfigCascadeView — Scope-Filter (Bug 8)", () => {
         onReset={() => undefined}
       />,
     );
-    await user.click(screen.getByRole("button"));
+    // Nichts aufzuklappen → statische Zeile statt Aufklapp-Button.
+    expect(view.queryByRole("button")).toBeNull();
+    expect(view.container.textContent).toContain("Default");
+    expect(view.container.textContent).toContain("fallback");
     expect(view.queryByText("Reset override (Tenant)")).toBeNull();
   });
 });

package/src/__tests__/config-edit.test.tsx

@@ -227,4 +227,74 @@ describe("KumikoScreen / configEdit", () => {
     expect(label?.querySelector('[data-testid="config-source-badge"]')).toBeNull();
     expect(label?.querySelector('[data-testid="config-cascade"]')).toBeNull();
   });
+
+  // Regression #430: nach "Speichern" zeigte die Cascade-Disclosure den
+  // alten Wert bis zum Page-Reload — customSubmit rebased nur den Form-State
+  // (controller.rebase), refetchte aber values/cascade NICHT (onReset tat es).
+  // Guard: nach erfolgreichem Save MUSS jede der beiden Queries erneut laufen.
+  test("save refetcht values + cascade — Disclosure nach Speichern aktuell, nicht erst nach Reload", async () => {
+    const queryCalls: Record<string, number> = {};
+    const dispatcher: Dispatcher = createMockDispatcher({
+      query: (async (qn: string) => {
+        queryCalls[qn] = (queryCalls[qn] ?? 0) + 1;
+        if (qn === "config:query:cascade") {
+          return {
+            isSuccess: true,
+            data: {
+              "demo:config:site-name": {
+                value: "Acme",
+                source: "tenant-row",
+                levels: [
+                  {
+                    source: "tenant-row",
+                    label: "tenant-row",
+                    value: "Acme",
+                    isActive: true,
+                    hasValue: true,
+                  },
+                  {
+                    source: "default",
+                    label: "default",
+                    value: "fallback",
+                    isActive: false,
+                    hasValue: true,
+                  },
+                ],
+              },
+            },
+          };
+        }
+        return {
+          isSuccess: true,
+          data: {
+            "demo:config:site-name": { value: "Acme", scope: "tenant", source: "tenant-row" },
+          },
+        };
+      }) as unknown as Dispatcher["query"],
+      batch: (async () => ({ isSuccess: true, results: [] })) as unknown as Dispatcher["batch"],
+    });
+
+    const user = userEvent.setup();
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen schema={schema} qn="demo:screen:settings" />
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("render-edit-form"));
+    const cascadeBefore = queryCalls["config:query:cascade"] ?? 0;
+    const valuesBefore = queryCalls["config:query:values"] ?? 0;
+
+    const siteInput = screen.getByTestId("field-siteName").querySelector("input");
+    if (!siteInput) throw new Error("expected siteName input");
+    await user.clear(siteInput);
+    await user.type(siteInput, "Globex");
+    await user.click(screen.getByTestId("render-edit-submit"));
+
+    // Ohne den refetch im customSubmit bleiben beide Counts flat (rot).
+    await waitFor(() => {
+      expect(queryCalls["config:query:cascade"] ?? 0).toBeGreaterThan(cascadeBefore);
+    });
+    expect(queryCalls["config:query:values"] ?? 0).toBeGreaterThan(valuesBefore);
+  });
 });

package/src/components/config-cascade.tsx

@@ -118,6 +118,14 @@ type ConfigCascadeViewProps = {
   readonly screenScope: ConfigScope;
   readonly onReset?: (key: string, scope: ConfigScope) => void;
   readonly qualifiedKey?: string;
+  // Component-Split (#429): "trigger" rendert nur die collapsed-Zeile
+  // (▶ + Quelle + Wert) für die Label-Row, "panel" nur die aufgeklappte
+  // Cascade + Reset für unter den Input. Im Split-Modus hält der Screen den
+  // expanded-State (beide Slots teilen ihn). Ohne `slot` rendert die
+  // Komponente beides mit eigenem State (Backward-Compat).
+  readonly slot?: "trigger" | "panel";
+  readonly expanded?: boolean;
+  readonly onToggle?: () => void;
 };
 
 export function ConfigCascadeView({
@@ -125,64 +133,97 @@ export function ConfigCascadeView({
   screenScope,
   onReset,
   qualifiedKey,
+  slot,
+  expanded: expandedProp,
+  onToggle,
 }: ConfigCascadeViewProps): ReactNode {
   const t = useTranslation();
-  const [expanded, setExpanded] = useState(false);
+  const [localExpanded, setLocalExpanded] = useState(false);
 
   // Safety net: callers should already filter malformed cascades, but
   // a missing levels-array (e.g. from a partial mock) shouldn't crash
   // the screen.
   if (!Array.isArray(cascade?.levels)) return null;
 
+  const expanded = slot === undefined ? localExpanded : (expandedProp ?? false);
+  const toggle = slot === undefined ? () => setLocalExpanded((v) => !v) : onToggle;
+
   const screenScopeSource = scopeToSource(screenScope);
   const displayLevels = toDisplayLevels(cascade.levels, screenScopeSource);
   const activeDisplay = displayLevels.find((d) => d.level.isActive);
   const hasOverride = activeDisplay?.level.source === screenScopeSource;
+  // Aufklappbar nur wenn das Panel echten Mehrwert bringt: ein eigener
+  // Override (→ Reset) oder mehr als eine Ebene MIT Wert. Leere Ebenen
+  // (z.B. die ungesetzte tenant-row eines reinen Default-Felds) zählen
+  // nicht — sonst wäre ein Feld, das nur seinen Standard zeigt, fälschlich
+  // aufklappbar und das Panel nur eine Wiederholung des Triggers.
+  const valuedLevels = displayLevels.filter((d) => d.level.hasValue);
+  const expandable = hasOverride || valuedLevels.length > 1;
+
+  const triggerInner = activeDisplay ? (
+    <>
+      <SourceBadge
+        source={activeDisplay.badgeSource}
+        {...(activeDisplay.badgeLabelKey !== undefined && {
+          labelKey: activeDisplay.badgeLabelKey,
+        })}
+      />
+      <span className="text-gray-400">
+        {formatValue(activeDisplay.level.value, activeDisplay.level.hasValue)}
+      </span>
+    </>
+  ) : (
+    <span className="text-gray-400">{t("kumiko.config.cascade.noValue")}</span>
+  );
+
+  const trigger = expandable ? (
+    <button
+      type="button"
+      onClick={toggle}
+      className="flex items-center gap-1 text-gray-500 hover:text-gray-700 cursor-pointer"
+    >
+      <span className="text-[10px]">{expanded ? "▼" : "▶"}</span>
+      {triggerInner}
+    </button>
+  ) : (
+    <div className="flex items-center gap-1 text-gray-500">{triggerInner}</div>
+  );
 
+  const panel =
+    expanded && expandable ? (
+      <div className="mt-1 flex flex-col gap-0.5 pl-3 border-l-2 border-gray-100">
+        {displayLevels.map((display) => (
+          <CascadeLevelRow key={display.level.source} display={display} />
+        ))}
+
+        {hasOverride && onReset && qualifiedKey ? (
+          <button
+            type="button"
+            onClick={() => onReset(qualifiedKey, screenScope)}
+            className="mt-1 self-start text-[10px] text-orange-500 hover:text-orange-700 cursor-pointer underline"
+          >
+            {t("kumiko.config.cascade.resetTo", {
+              scope: t(SOURCE_I18N_KEY[screenScopeSource]),
+            })}
+          </button>
+        ) : null}
+      </div>
+    ) : null;
+
+  if (slot === "trigger") {
+    return (
+      <div className="text-xs font-normal" data-testid="config-cascade">
+        {trigger}
+      </div>
+    );
+  }
+  if (slot === "panel") return panel;
+
+  // Backward-Compat (ungeteilt): Trigger + Panel zusammen unter dem Input.
   return (
     <div className="mt-1 text-xs" data-testid="config-cascade">
-      <button
-        type="button"
-        onClick={() => setExpanded(!expanded)}
-        className="flex items-center gap-1 text-gray-500 hover:text-gray-700 cursor-pointer"
-      >
-        <span className="text-[10px]">{expanded ? "▼" : "▶"}</span>
-        {activeDisplay ? (
-          <>
-            <SourceBadge
-              source={activeDisplay.badgeSource}
-              {...(activeDisplay.badgeLabelKey !== undefined && {
-                labelKey: activeDisplay.badgeLabelKey,
-              })}
-            />
-            <span className="text-gray-400">
-              {formatValue(activeDisplay.level.value, activeDisplay.level.hasValue)}
-            </span>
-          </>
-        ) : (
-          <span className="text-gray-400">{t("kumiko.config.cascade.noValue")}</span>
-        )}
-      </button>
-
-      {expanded ? (
-        <div className="mt-1 flex flex-col gap-0.5 pl-3 border-l-2 border-gray-100">
-          {displayLevels.map((display) => (
-            <CascadeLevelRow key={display.level.source} display={display} />
-          ))}
-
-          {hasOverride && onReset && qualifiedKey ? (
-            <button
-              type="button"
-              onClick={() => onReset(qualifiedKey, screenScope)}
-              className="mt-1 self-start text-[10px] text-orange-500 hover:text-orange-700 cursor-pointer underline"
-            >
-              {t("kumiko.config.cascade.resetTo", {
-                scope: t(SOURCE_I18N_KEY[screenScopeSource]),
-              })}
-            </button>
-          ) : null}
-        </div>
-      ) : null}
+      {trigger}
+      {panel}
     </div>
   );
 }

package/src/primitives/index.tsx

@@ -149,24 +149,31 @@ function DefaultField({
   const hasError = issues !== undefined && issues.length > 0;
   return (
     <div data-testid={testId} className="flex flex-col gap-1.5">
-      <LabelPrimitive.Root
-        htmlFor={id}
-        className={cn(
-          // peer-disabled-Sentinel: shadcn-Pattern — wenn das assoziierte
-          // Input disabled ist (peer + disabled-Klasse), wird das Label
-          // mitgrayout. Funktioniert weil Radix-Label das nativ-htmlFor-
-          // verlinkte Element als Peer betrachtet.
-          "text-sm font-medium leading-none",
-          "peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-          hasError ? "text-destructive" : "text-foreground",
-        )}
-      >
-        {label}
-        {labelAppendix !== undefined && <>{labelAppendix}</>}
-        {required === true && <span className="ml-0.5 text-destructive">*</span>}
-      </LabelPrimitive.Root>
+      <div className="flex items-center justify-between gap-2">
+        <LabelPrimitive.Root
+          htmlFor={id}
+          className={cn(
+            // peer-disabled-Sentinel: shadcn-Pattern — wenn das assoziierte
+            // Input disabled ist (peer + disabled-Klasse), wird das Label
+            // mitgrayout. Funktioniert weil Radix-Label das nativ-htmlFor-
+            // verlinkte Element als Peer betrachtet.
+            "text-sm font-medium leading-none",
+            "peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+            hasError ? "text-destructive" : "text-foreground",
+          )}
+        >
+          {label}
+          {required === true && <span className="ml-0.5 text-destructive">*</span>}
+        </LabelPrimitive.Root>
+        {/* appendix neben dem <label>, nicht darin — interaktiver Inhalt
+            (Disclosure-Button) gehört nicht in ein label-Element. */}
+        {labelAppendix !== undefined && labelAppendix}
+      </div>
+      {/* fieldAppendix (Cascade-Detail-Panel) über dem Input — das
+          aufgeklappte Detail gehört direkt unter seinen Trigger in der
+          Label-Row, nicht durch den Input davon getrennt. */}
+      {fieldAppendix !== undefined && fieldAppendix}
       {children}
-      {fieldAppendix !== undefined && <div className="mt-1">{fieldAppendix}</div>}
       {hasError && (
         <div
           role="alert"