@cosmicdrift/kumiko-renderer 0.234.0 → 0.235.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer",
-  "version": "0.234.0",
+  "version": "0.235.1",
   "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>",
@@ -15,8 +15,8 @@
     }
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-framework": "0.234.0",
-    "@cosmicdrift/kumiko-headless": "0.234.0",
+    "@cosmicdrift/kumiko-framework": "0.235.1",
+    "@cosmicdrift/kumiko-headless": "0.235.1",
     "react": "^19.2.6",
     "temporal-polyfill": "^0.3.2",
     "zod": "^4.4.3"
@@ -24,8 +24,10 @@
   "devDependencies": {
     "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
     "jsdom": "^29.1.1",
-    "@cosmicdrift/kumiko-locale-de": "0.234.0"
+    "react-dom": "^19.2.6",
+    "@cosmicdrift/kumiko-locale-de": "0.235.1"
   },
   "repository": {
     "type": "git",

package/src/__tests__/i18n.test.tsx

@@ -2,12 +2,14 @@ import { describe, expect, test } from "bun:test";
 import type { LocaleResolver } from "@cosmicdrift/kumiko-headless";
 import { act, render, renderHook } from "@testing-library/react";
 import type { ReactNode } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
 import {
   createStaticLocaleResolver,
   LocaleProvider,
   type TranslationsByLocale,
   translationsByLocaleFromKeys,
   useLocale,
+  useOptionalTranslation,
   useTranslation,
 } from "../i18n";
 
@@ -171,3 +173,40 @@ describe("useLocale", () => {
     expect(result.current.locale()).toBe("de");
   });
 });
+describe("useTranslation — SSR", () => {
+  // kumiko-framework#2595: getServerSnapshot hardcoded "en", so any
+  // server render came out English regardless of the resolver's actual
+  // locale — untestable via renderToStaticMarkup until getServerSnapshot
+  // read the resolver instead of a constant.
+  test(`renderToStaticMarkup with a non-English resolver renders the resolver's locale, not "en"`, () => {
+    const resolver = createStaticLocaleResolver({ locale: "de" });
+    const bundles: TranslationsByLocale[] = [{ de: { greet: "Hallo" }, en: { greet: "Hello" } }];
+    function Probe(): ReactNode {
+      const t = useTranslation();
+      return <span>{t("greet")}</span>;
+    }
+    const html = renderToStaticMarkup(
+      <LocaleProvider resolver={resolver} fallbackBundles={bundles}>
+        <Probe />
+      </LocaleProvider>,
+    );
+    expect(html).toContain("Hallo");
+    expect(html).not.toContain("Hello");
+  });
+
+  test(`renderToStaticMarkup via useOptionalTranslation resolves the resolver's locale, not "en"`, () => {
+    const resolver = createStaticLocaleResolver({ locale: "de" });
+    const bundles: TranslationsByLocale[] = [{ de: { greet: "Hallo" }, en: { greet: "Hello" } }];
+    function Probe(): ReactNode {
+      const t = useOptionalTranslation();
+      return <span>{t?.("greet")}</span>;
+    }
+    const html = renderToStaticMarkup(
+      <LocaleProvider resolver={resolver} fallbackBundles={bundles}>
+        <Probe />
+      </LocaleProvider>,
+    );
+    expect(html).toContain("Hallo");
+    expect(html).not.toContain("Hello");
+  });
+});

package/src/app/kumiko-screen.tsx

@@ -61,6 +61,7 @@ import { synthesizeProjectionEntity, synthesizeProjectionScreen } from "./projec
 import { lastSegment, toKebab } from "./qn";
 import { featureNameFromQualifiedScreenId, qualifyScreenId } from "./qualify-screen-id";
 import { screenAccessAllows } from "./screen-access";
+import { SecretsEditBody } from "./secrets-edit-body";
 import { dispatcherErrorText, WriteFailedError } from "./write-failed-error";
 
 function evalRowExtractor(
@@ -262,6 +263,8 @@ export function KumikoScreen({
       return <ActionFormBody schema={schema} screen={screen} translate={translate} />;
     case "configEdit":
       return <ConfigEditBody schema={schema} screen={screen} translate={translate} />;
+    case "secretsEdit":
+      return <SecretsEditBody screen={screen} translate={translate} />;
     case "custom":
       return <CustomScreenBody screenId={screen.id} featureName={schema.featureName} />;
   }
@@ -2223,15 +2226,14 @@ function ProjectionDetailBody({
   const idParam = screen.idParam ?? "id";
   const isTabsMode = screen.layout.mode === "tabs";
   const activeSection = useMemo(() => {
-    if (!isTabsMode) return undefined;
+    if (!isTabsMode || Tabs === undefined) return undefined;
     const tabParam = nav.searchParams["tab"];
     return (
       screen.layout.sections.find((section) => section.id === tabParam) ?? screen.layout.sections[0]
     );
-  }, [isTabsMode, screen.layout.sections, nav.searchParams]);
-  // Tabs is an optional Core-Primitive (additive rollout) — same "skip +
-  // warn once" precedent as Drawer above, instead of crashing when a web
-  // app hasn't upgraded its createKumikoApp wiring yet.
+  }, [isTabsMode, Tabs, screen.layout.sections, nav.searchParams]);
+  // Tabs is an optional Core-Primitive: without it the screen falls back to
+  // the stacked all-sections layout instead of silently truncating to section 1.
   useEffect(() => {
     if (isTabsMode && Tabs === undefined) {
       // biome-ignore lint/suspicious/noConsole: dev-warning for a setup error
@@ -2534,7 +2536,7 @@ function ProjectionDetailBody({
       customSubmit={async () => ({ isSuccess: true, validationBlocked: false, data: undefined })}
       {...(headerActions !== undefined && { actions: headerActions })}
       {...(translate !== undefined && { translate })}
-      {...(isTabsMode && { hideSectionTitles: true })}
+      {...(hasTabs && { hideSectionTitles: true })}
       {...((hasHeader || hasMetrics || hasTabs) && { headerRegion: headerContent })}
       valueDisplay={screen.valueDisplay ?? "text"}
     />

package/src/app/secrets-edit-body.tsx

@@ -0,0 +1,190 @@
+import type { SecretsEditScreenDefinition } from "@cosmicdrift/kumiko-framework/ui-types";
+import type { Translate } from "@cosmicdrift/kumiko-headless";
+import { type ReactNode, useCallback, useMemo, useState } from "react";
+import { useDispatcher } from "../context/dispatcher-context";
+import { useQuery } from "../hooks/use-query";
+import { useTranslation } from "../i18n";
+import { usePrimitives } from "../primitives";
+import { dispatcherErrorText } from "./write-failed-error";
+
+type SecretListRow = {
+  readonly key: string;
+  readonly redactedPreview: string | null;
+  readonly hint: string | null;
+};
+
+export type SecretsEditBodyProps = {
+  readonly screen: SecretsEditScreenDefinition;
+  readonly translate?: Translate;
+};
+
+// secrets:query:list never returns plaintext (only a redacted preview), so
+// unlike ConfigEditBody there is no server value to pre-fill a draft with —
+// every input starts at "" and stays that way unless the user types into it.
+export function SecretsEditBody({ screen, translate }: SecretsEditBodyProps): ReactNode {
+  const { Banner, Form, Section, Field, Input, Button, Text } = usePrimitives();
+  const t = useTranslation();
+  const effectiveTranslate = translate ?? t;
+  const dispatcher = useDispatcher();
+  const listQuery = useQuery<readonly SecretListRow[]>("secrets:query:list", {});
+
+  const [drafts, setDrafts] = useState<Readonly<Record<string, string>>>({});
+  const [submitting, setSubmitting] = useState(false);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+
+  const rowsByQualifiedKey = useMemo(() => {
+    const out = new Map<string, SecretListRow>();
+    for (const row of listQuery.data ?? []) out.set(row.key, row);
+    return out;
+  }, [listQuery.data]);
+
+  const setDraft = useCallback((fieldId: string, value: string) => {
+    setDrafts((prev) => ({ ...prev, [fieldId]: value }));
+  }, []);
+
+  const handleSubmit = useCallback(async (): Promise<void> => {
+    const commands = Object.entries(screen.secretKeys).flatMap(([fieldId, qualified]) => {
+      const value = drafts[fieldId]?.trim();
+      return value ? [{ type: "secrets:write:set", payload: { key: qualified, value } }] : [];
+    });
+    if (commands.length === 0) return;
+    setSubmitting(true);
+    setSubmitError(null);
+    const result = await dispatcher.batch(commands);
+    setSubmitting(false);
+    if (!result.isSuccess) {
+      setSubmitError(dispatcherErrorText(result.error, effectiveTranslate));
+      return;
+    }
+    setDrafts({});
+    await listQuery.refetch();
+  }, [dispatcher, drafts, screen.secretKeys, listQuery.refetch, effectiveTranslate]);
+
+  const handleDelete = useCallback(
+    async (qualified: string): Promise<void> => {
+      const result = await dispatcher.write("secrets:write:delete", { key: qualified });
+      if (!result.isSuccess) {
+        setSubmitError(dispatcherErrorText(result.error, effectiveTranslate));
+        return;
+      }
+      await listQuery.refetch();
+    },
+    [dispatcher, listQuery.refetch, effectiveTranslate],
+  );
+
+  if (listQuery.loading && listQuery.data === null) {
+    return (
+      <Banner padded variant="loading" testId="kumiko-screen-loading">
+        Loading…
+      </Banner>
+    );
+  }
+  if (listQuery.error) {
+    return (
+      <Banner padded variant="error" testId="kumiko-screen-error">
+        {dispatcherErrorText(listQuery.error, effectiveTranslate)}
+      </Banner>
+    );
+  }
+
+  return (
+    <Form
+      onSubmit={() => {
+        void handleSubmit();
+      }}
+      testId="secrets-edit-form"
+      actions={
+        <Button
+          type="submit"
+          variant="primary"
+          loading={submitting}
+          disabled={submitting}
+          testId="secrets-edit-submit"
+        >
+          {effectiveTranslate("kumiko.actions.save")}
+        </Button>
+      }
+    >
+      {submitError !== null && (
+        <Banner variant="error" testId="secrets-edit-error">
+          {submitError}
+        </Banner>
+      )}
+      {screen.sections.map((section, index) => (
+        <Section
+          key={section.title ?? `section-${index}`}
+          {...(section.title !== undefined && { title: effectiveTranslate(section.title) })}
+        >
+          {section.fields.map((fieldId) => {
+            const qualified = screen.secretKeys[fieldId];
+            if (qualified === undefined) return null;
+            const row = rowsByQualifiedKey.get(qualified);
+            const hintKey = screen.fieldHints?.[fieldId];
+            const isRequired = screen.requiredFields?.includes(fieldId) ?? false;
+            return (
+              <Field
+                key={fieldId}
+                id={fieldId}
+                label={effectiveTranslate(screen.fieldLabels[fieldId] ?? fieldId)}
+                required={isRequired}
+                testId={`field-${fieldId}`}
+                fieldAppendix={
+                  <>
+                    {hintKey !== undefined && (
+                      <Text variant="small">{effectiveTranslate(hintKey)}</Text>
+                    )}
+                    {row !== undefined ? (
+                      <>
+                        <Text variant="small" testId={`secret-preview-${fieldId}`}>
+                          {row.redactedPreview ?? effectiveTranslate("config.secrets.set")}
+                        </Text>
+                        <Button
+                          type="button"
+                          variant="danger-ghost"
+                          size="sm"
+                          onClick={() => handleDelete(qualified)}
+                          testId={`secret-delete-${fieldId}`}
+                        >
+                          {effectiveTranslate("config.secrets.delete")}
+                        </Button>
+                      </>
+                    ) : (
+                      <>
+                        <Text variant="small" testId={`secret-not-set-${fieldId}`}>
+                          {effectiveTranslate("config.secrets.notSet")}
+                        </Text>
+                        {isRequired && (
+                          <Text variant="small" testId={`required-marker-${fieldId}`}>
+                            {effectiveTranslate("config.secrets.required")}
+                          </Text>
+                        )}
+                      </>
+                    )}
+                  </>
+                }
+              >
+                <Text variant="small">
+                  {effectiveTranslate(
+                    row !== undefined
+                      ? "config.secrets.replacePlaceholder"
+                      : "config.secrets.placeholder",
+                  )}
+                </Text>
+                <Input
+                  kind="password"
+                  id={fieldId}
+                  name={fieldId}
+                  value={drafts[fieldId] ?? ""}
+                  onChange={(v) => setDraft(fieldId, v)}
+                  autoComplete="new-password"
+                  disabled={submitting}
+                  testId={`secret-input-${fieldId}`}
+                />
+              </Field>
+            );
+          })}
+        </Section>
+      ))}
+    </Form>
+  );
+}

package/src/i18n.tsx

@@ -120,7 +120,7 @@ export function useLocale(): LocaleResolver {
   useSyncExternalStore(
     ctx.resolver.subscribe,
     () => ctx.resolver.locale(),
-    () => "en",
+    () => ctx.resolver.locale(),
   );
   return ctx.resolver;
 }
@@ -147,7 +147,7 @@ export function useTranslation(): (
   const locale = useSyncExternalStore(
     ctx.resolver.subscribe,
     () => ctx.resolver.locale(),
-    () => "en",
+    () => ctx.resolver.locale(),
   );
 
   // `t` MUSS referenz-stabil sein solange sich Resolver/Bundles/Locale
@@ -200,7 +200,7 @@ export function useOptionalLocale(): string | undefined {
   useSyncExternalStore(
     (onStoreChange) => (ctx ? ctx.resolver.subscribe(onStoreChange) : () => {}),
     () => (ctx ? ctx.resolver.locale() : "en"),
-    () => "en",
+    () => (ctx ? ctx.resolver.locale() : "en"),
   );
   return ctx === undefined ? undefined : ctx.resolver.locale();
 }
@@ -213,7 +213,7 @@ export function useOptionalTranslation():
   const locale = useSyncExternalStore(
     (onStoreChange) => (ctx ? ctx.resolver.subscribe(onStoreChange) : () => {}),
     () => (ctx ? ctx.resolver.locale() : "en"),
-    () => "en",
+    () => (ctx ? ctx.resolver.locale() : "en"),
   );
   const t = useCallback(
     (key: string, params?: Readonly<Record<string, unknown>>): string => {