@cosmicdrift/kumiko-renderer 0.56.1 → 0.57.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer",
-  "version": "0.56.1",
+  "version": "0.57.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>",

package/src/app/kumiko-screen.tsx

@@ -1124,11 +1124,28 @@ function ConfigEditBody({
       if (!result.isSuccess) {
         return { validationBlocked: false, isSuccess: false, error: result.error };
       }
+      // Cascade-Disclosure + Maskenwerte nach dem Write nachziehen, sonst
+      // bleibt die Anzeige stale bis Reload — gleiche refetch-Calls wie onReset.
+      await valuesQuery.refetch?.();
+      await cascadeQuery.refetch?.();
       return { validationBlocked: false, isSuccess: true, data: undefined };
     },
-    [dispatcher, screen.configKeys, screen.scope],
+    [dispatcher, screen.configKeys, screen.scope, valuesQuery.refetch, cascadeQuery.refetch],
   );
 
+  // Cascade-Disclosure (#429): Trigger sitzt in der Label-Row, das Panel
+  // unter dem Input — zwei getrennte Render-Slots teilen sich den
+  // expanded-State, der daher hier (pro Feld) statt in der Komponente lebt.
+  const [expandedFields, setExpandedFields] = useState<ReadonlySet<string>>(new Set());
+  const toggleExpanded = useCallback((fieldName: string) => {
+    setExpandedFields((prev) => {
+      const next = new Set(prev);
+      if (next.has(fieldName)) next.delete(fieldName);
+      else next.add(fieldName);
+      return next;
+    });
+  }, []);
+
   if (valuesQuery.loading && valuesQuery.data === null) {
     return (
       <Banner padded variant="loading" testId="kumiko-screen-loading">
@@ -1159,13 +1176,30 @@ function ConfigEditBody({
       customSubmit={customSubmit}
       {...(screen.submitLabel !== undefined && { submitLabel: screen.submitLabel })}
       {...(translate !== undefined && { translate })}
-      fieldAppendix={(fieldName: string) => {
+      labelAppendix={(fieldName: string) => {
         const cascade = cascades[fieldName];
         if (cascade === undefined) return undefined;
         return (
           <ConfigCascadeView
+            slot="trigger"
+            cascade={cascade}
+            screenScope={screen.scope}
+            expanded={expandedFields.has(fieldName)}
+            onToggle={() => toggleExpanded(fieldName)}
+          />
+        );
+      }}
+      fieldAppendix={(fieldName: string) => {
+        const cascade = cascades[fieldName];
+        // Panel nur rendern wenn aufgeklappt — sonst kein leerer Abstand
+        // unter dem Input.
+        if (cascade === undefined || !expandedFields.has(fieldName)) return undefined;
+        return (
+          <ConfigCascadeView
+            slot="panel"
             cascade={cascade}
             screenScope={screen.scope}
+            expanded
             qualifiedKey={screen.configKeys[fieldName]}
             onReset={async (key, scope) => {
               await dispatcher.write("config:write:reset", { key, scope });

package/src/primitives.tsx

@@ -521,14 +521,19 @@ export type ConfigSourceBadgeProps = {
   readonly screenScope?: ConfigScope;
 };
 
-/** Collapsible cascade-view that lives under a config-edit input.
- *  Shows the active level inline; click expands the full cascade and
- *  exposes a Reset-button if the active level matches `screenScope`. */
+/** Collapsible cascade-view for a config-edit field. Split into two slots
+ *  (#429): "trigger" is the collapsed ▶ + source + value line for the label
+ *  row; "panel" is the expanded cascade + reset shown below the input. In
+ *  split mode the screen owns the `expanded` state (both slots share it);
+ *  without `slot` the component renders both with its own state. */
 export type ConfigCascadeViewProps = {
   readonly cascade: ConfigCascade;
   readonly screenScope: ConfigScope;
   readonly onReset?: (key: string, scope: ConfigScope) => void;
   readonly qualifiedKey?: string;
+  readonly slot?: "trigger" | "panel";
+  readonly expanded?: boolean;
+  readonly onToggle?: () => void;
 };
 
 // ---- Core-Registry (Kumiko-eigene Primitives) ----