@cosmicdrift/kumiko-renderer-web 0.220.1 → 0.222.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.220.1",
+  "version": "0.222.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>",
@@ -16,9 +16,9 @@
     "./styles.css": "./src/styles.css"
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-dispatcher-live": "0.220.1",
-    "@cosmicdrift/kumiko-headless": "0.220.1",
-    "@cosmicdrift/kumiko-renderer": "0.220.1",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.222.0",
+    "@cosmicdrift/kumiko-headless": "0.222.0",
+    "@cosmicdrift/kumiko-renderer": "0.222.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -64,7 +64,7 @@
     "@types/react-dom": "^19.2.3",
     "jsdom": "^29.1.1",
     "tailwindcss": "^4.3.0",
-    "@cosmicdrift/kumiko-locale-de": "0.220.1"
+    "@cosmicdrift/kumiko-locale-de": "0.222.0"
   },
   "repository": {
     "type": "git",

package/src/__tests__/form-action-bar.test.tsx

@@ -26,7 +26,7 @@ describe("DefaultForm Action-Footer", () => {
     expect(actions.className).toContain("border-t");
     // Footer sits in the form shell (buttons align with the field edge).
     expect(actions.closest(".max-w-full")).toBeTruthy();
-    // Titel ist ein eigenes Heading oben, NICHT mehr in der Action-Bar.
+    // Title is its own heading above — not inside the action bar.
     expect(actions.textContent).not.toContain("Titel");
     expect(screen.getByTestId("f-title").textContent).toBe("Titel");
   });

package/src/__tests__/kumiko-screen.test.tsx

@@ -1570,7 +1570,7 @@ describe("KumikoScreen", () => {
     expect(writeCalls[0]?.payload).toEqual({ title: "New Task", priority: 1 });
   });
 
-  test("actionForm mit redirect: nach success → nav.navigate({screenId: redirect, entityId})", async () => {
+  test("actionForm mit redirect auf entityList: nach success → navigate ohne entityId (#2419)", async () => {
     const navigateCalls: NavTarget[] = [];
     const dispatcher = makeDispatcher({
       write: (async () => ({
@@ -1613,9 +1613,9 @@ describe("KumikoScreen", () => {
     fireEvent.change(titleInput, { target: { value: "go" } });
     fireEvent.click(screen.getByTestId("render-edit-submit"));
     await waitFor(() => expect(navigateCalls.length).toBe(1));
-    // #2416: the handler returns a created id (`{ id: "x" }`) — it must land
-    // on the navigate as entityId, same as entityEdit-create.
-    expect(navigateCalls[0]).toEqual({ screenId: "task-list", entityId: "x" });
+    // #2419: entityList targets ignore entityId — do not attach a handler id.
+    expect(navigateCalls[0]).toEqual({ screenId: "task-list" });
+    expect(Object.hasOwn(navigateCalls[0] ?? {}, "entityId")).toBe(false);
   });
 
   test("actionForm mit Cross-Feature-QN als redirect: navigiert per Short-Id (#1946)", async () => {
@@ -1661,7 +1661,62 @@ describe("KumikoScreen", () => {
     fireEvent.change(titleInput, { target: { value: "go" } });
     fireEvent.click(screen.getByTestId("render-edit-submit"));
     await waitFor(() => expect(navigateCalls.length).toBe(1));
-    expect(navigateCalls[0]).toEqual({ screenId: "statement-upload-list", entityId: "x" });
+    // Cross-feature QN is not in this feature's schema.screens — keep prior
+    // behavior without entityId (#2419).
+    expect(navigateCalls[0]).toEqual({ screenId: "statement-upload-list" });
+    expect(Object.hasOwn(navigateCalls[0] ?? {}, "entityId")).toBe(false);
+  });
+
+  test("actionForm mit redirect auf entityEdit: hängt entityId an (#2419)", async () => {
+    const navigateCalls: NavTarget[] = [];
+    const dispatcher = makeDispatcher({
+      write: (async () => ({
+        isSuccess: true,
+        data: { id: "x" },
+      })) as unknown as Dispatcher["write"],
+    });
+    const memoryNav = {
+      route: { screenId: "quick-add" },
+      navigate: (target: NavTarget) => {
+        if ("screenId" in target) navigateCalls.push(target);
+      },
+      replace: () => undefined,
+      hrefFor: (t: NavTarget) => ("screenId" in t ? `/${t.screenId}` : ""),
+      searchParams: {},
+      setSearchParams: () => undefined,
+    };
+    const editScreen: EntityEditScreenDefinition = {
+      id: "task-edit",
+      type: "entityEdit",
+      entity: "task",
+      layout: { sections: [{ title: "x", fields: ["title"] }] },
+    };
+    const actionScreen: ActionFormScreenDefinition = {
+      id: "quick-add",
+      type: "actionForm",
+      handler: "tasks:write:task:quick-add",
+      fields: { title: { type: "text", required: true } },
+      layout: { sections: [{ title: "x", fields: ["title"] }] },
+      redirect: "task-edit",
+    };
+
+    const { NavProvider } = await import("@cosmicdrift/kumiko-renderer");
+    render(
+      <NavProvider value={memoryNav}>
+        <DispatcherProvider dispatcher={dispatcher}>
+          <KumikoScreen
+            schema={{ ...schema, screens: [actionScreen, editScreen, listScreen] }}
+            qn="tasks:screen:quick-add"
+          />
+        </DispatcherProvider>
+      </NavProvider>,
+    );
+
+    const titleInput = screen.getByTestId("field-title").querySelector("input") as HTMLInputElement;
+    fireEvent.change(titleInput, { target: { value: "go" } });
+    fireEvent.click(screen.getByTestId("render-edit-submit"));
+    await waitFor(() => expect(navigateCalls.length).toBe(1));
+    expect(navigateCalls[0]).toEqual({ screenId: "task-edit", entityId: "x" });
   });
 
   // #2416: entityEdit-create passes the newly created record's id through to

package/src/__tests__/nav-tree.test.tsx

@@ -360,22 +360,11 @@ describe("NavTree", () => {
           order: 20,
           icon: "shield-check",
         },
+        { id: "cap-list", label: "Caps", screen: "cap-list", order: 60, icon: "gauge" },
       ],
     } as FeatureSchema;
     const { container } = render(<NavTree schema={schema} />);
-    expectNavIcons(container, ["send", "shield-check"]);
-    expect(warnSpy).not.toHaveBeenCalled();
-  });
-
-  test("gauge (cap-list nav) resolves to an icon without missing-icon path", () => {
-    const schema = {
-      featureName: "cap-counter",
-      entities: {},
-      screens: [{ id: "cap-list", type: "entityList", entity: "x", columns: [] }],
-      navs: [{ id: "cap-list", label: "Caps", screen: "cap-list", order: 60, icon: "gauge" }],
-    } as FeatureSchema;
-    const { container } = render(<NavTree schema={schema} />);
-    expectNavIcons(container, ["gauge"]);
+    expectNavIcons(container, ["send", "shield-check", "gauge"]);
     expect(warnSpy).not.toHaveBeenCalled();
   });
 
@@ -383,7 +372,10 @@ describe("NavTree", () => {
     const schema = {
       featureName: "showcase",
       entities: {},
-      screens: [{ id: "x", type: "entityList", entity: "x", columns: [] }],
+      screens: [
+        { id: "x", type: "entityList", entity: "x", columns: [] },
+        { id: "cap-list", type: "entityList", entity: "x", columns: [] },
+      ],
       navs: [
         {
           id: "x",

package/src/__tests__/primitives.test.tsx

@@ -13,7 +13,7 @@ import userEvent from "@testing-library/user-event";
 import type { ReactNode } from "react";
 import { defaultPrimitives, END_LABEL_MIN_ROWS } from "../primitives";
 import { PageSection, Stack } from "../primitives/layout";
-import { fireEvent, render, screen } from "./test-utils";
+import { fireEvent, render, screen, waitFor } from "./test-utils";
 
 const { Button, Banner, Field, Input, DataTable, Form, Text, Heading, Dialog, Card } =
   defaultPrimitives;
@@ -193,7 +193,16 @@ describe("Input kind mapping", () => {
 
   test('kind="text" icon="not-a-real-key": unknown key → no icon, no padding', () => {
     render(
-      <Input id="i" name="i" kind="text" value="" icon="not-a-real-key" onChange={() => {}} />,
+      <Input
+        id="i"
+        name="i"
+        kind="text"
+        value=""
+        icon={
+          "not-a-real-key" as unknown as import("@cosmicdrift/kumiko-framework/ui-types").FieldIconKey
+        }
+        onChange={() => {}}
+      />,
     );
     const input = screen.getByRole("textbox");
     expect(input.className).not.toContain("pl-8");
@@ -201,7 +210,18 @@ describe("Input kind mapping", () => {
   });
 
   test('kind="text" icon="constructor": prototype-chain key → no icon, no padding', () => {
-    render(<Input id="i" name="i" kind="text" value="" icon="constructor" onChange={() => {}} />);
+    render(
+      <Input
+        id="i"
+        name="i"
+        kind="text"
+        value=""
+        icon={
+          "constructor" as unknown as import("@cosmicdrift/kumiko-framework/ui-types").FieldIconKey
+        }
+        onChange={() => {}}
+      />,
+    );
     const input = screen.getByRole("textbox");
     expect(input.className).not.toContain("pl-8");
     expect(document.querySelector("svg[aria-hidden='true']")).toBeNull();
@@ -838,6 +858,34 @@ describe("DataTable", () => {
       expect(screen.queryByTestId("row-r1-action-delete-dialog")).not.toBeNull();
     });
 
+    // Regression (solon e2e/cost-category.spec.ts, fw): unconditional
+    // preventDefault() in onSelect blocked Radix' auto-close, so the
+    // dropdown stayed in the DOM after the confirm flow (role="menu" +
+    // body.style.pointerEvents="none" overlay lock never released), even
+    // though the write itself had already succeeded.
+    test("Kebab: nach Confirm+onTrigger ist das Dropdown-Menu geschlossen (kein Overlay-Lock)", async () => {
+      const user = userEvent.setup();
+      const onTrigger = mock();
+      render(
+        <DataTable
+          columns={cols}
+          rows={rows}
+          testId="dt"
+          rowActions={[
+            { id: "a", label: "Archive", onTrigger: mock() },
+            { id: "b", label: "Duplicate", onTrigger: mock() },
+            { id: "delete", label: "Delete", style: "danger", onTrigger },
+          ]}
+        />,
+      );
+      await user.click(screen.getByTestId("row-r1-actions-menu"));
+      await user.click(screen.getByTestId("row-r1-action-delete"));
+      await user.click(screen.getByTestId("row-r1-action-delete-dialog-confirm"));
+      await waitFor(() => expect(onTrigger).toHaveBeenCalledWith(rows[0]));
+      await waitFor(() => expect(screen.queryByRole("menu")).toBeNull());
+      expect(document.body.style.pointerEvents).not.toBe("none");
+    });
+
     test("confirmLabel separat vom label: Dialog-Button zeigt confirmLabel", async () => {
       const user = userEvent.setup();
       render(
@@ -1044,6 +1092,38 @@ describe("DataTable", () => {
       expect((screen.getByTestId("edit-name") as HTMLInputElement).value).toBe("Alice");
     });
 
+    test("plain cell still fires onRowClick when onCellChange is set (stopPropagation only on editable)", () => {
+      const onRowClick = mock();
+      const onCellChange = mock();
+      const cols = [
+        {
+          field: "name",
+          label: "Name",
+          type: "string",
+          sortable: false,
+        },
+        {
+          field: "edit",
+          label: "Edit",
+          type: "string",
+          sortable: false,
+          renderer: { react: { __component: "EditableSwatch" } },
+        },
+      ] as const;
+      render(
+        <ColumnRenderersProvider value={{ EditableSwatch }}>
+          <DataTable
+            columns={cols}
+            rows={[{ id: "r1", values: { name: "Alice", edit: "x" } }]}
+            onRowClick={onRowClick}
+            onCellChange={onCellChange}
+          />
+        </ColumnRenderersProvider>,
+      );
+      fireEvent.click(screen.getByTestId("cell-r1-name"));
+      expect(onRowClick).toHaveBeenCalled();
+    });
+
     test("format-spec renderer ignores onCellChange — no crash, plain formatted text", () => {
       const onCellChange = mock();
       const cols = [

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

@@ -16,6 +16,7 @@ import {
 } from "@cosmicdrift/kumiko-renderer";
 import { type ReactNode, useCallback, useState } from "react";
 import { z } from "zod";
+import { PATCH_DRAFT_SAVE_DEBOUNCE_MS } from "../../../renderer/src/components/render-edit";
 import {
   act,
   createFakeDraftStorage,
@@ -1307,14 +1308,11 @@ describe("RenderEdit wizard mode", () => {
     expect(screen.queryByTestId("field-title-errors")).toBeNull();
   });
 
-  // fw#1901: handleWizardNext used to validate every field in the section,
-  // including ones currently hidden by their own condition. A required
-  // field that only applies conditionally (e.g. a VAT id shown only for
-  // companies) must not permanently block "Next" while it's hidden. Note:
-  // form-controller.ts's runValidate() already excludes hidden-field
-  // issues from every validate() call via its own `hiddenFields` set
-  // (form-controller.ts:200), independent of scope; this test protects
-  // that existing guard, not the fieldNames narrowing added here.
+  // Regression for form-controller.ts's `hiddenFields` guard: a required
+  // field currently hidden by its own condition (e.g. vatId when not a
+  // company) must not block wizard "Next". This is independent of any
+  // handleWizardNext fieldNames narrowing — those paths are covered by
+  // the fully-hidden-section test below.
   test("Weiter is not blocked by a required field that's currently hidden by its own condition", async () => {
     const companyEntity = {
       fields: {
@@ -1590,10 +1588,6 @@ describe("RenderEdit wizard mode", () => {
 });
 
 describe("RenderEdit wizard draft", () => {
-  // Mirrors render-edit.tsx's own PATCH_DRAFT_SAVE_DEBOUNCE_MS (not
-  // exported) — tests below wait out a full window to catch stragglers.
-  const PATCH_DRAFT_SAVE_DEBOUNCE_MS = 500;
-
   function makeDraftWizardScreen(draft: boolean): EntityEditScreenDefinition {
     return {
       id: "orders:screen:order-wizard-draft",
@@ -2109,7 +2103,7 @@ describe("RenderEdit wizard draft", () => {
     // second burst) would slip past an assertion taken right after the
     // first save. Wait out a full extra debounce window to prove there is
     // no straggler.
-    await new Promise((resolve) => setTimeout(resolve, PATCH_DRAFT_SAVE_DEBOUNCE_MS + 200));
+    await new Promise((resolve) => setTimeout(resolve, PATCH_DRAFT_SAVE_DEBOUNCE_MS + 1000));
     expect(savesSoFar()).toBe(before + 1);
   });
 
@@ -2191,7 +2185,7 @@ describe("RenderEdit wizard draft", () => {
     // Wait past the debounce window the patch() call armed. If discard
     // hadn't cleared the timer, a straggling save would land here and
     // resurrect the just-discarded draft.
-    await new Promise((resolve) => setTimeout(resolve, PATCH_DRAFT_SAVE_DEBOUNCE_MS + 200));
+    await new Promise((resolve) => setTimeout(resolve, PATCH_DRAFT_SAVE_DEBOUNCE_MS + 1000));
 
     expect(calls.filter((c) => c === "form-draft:write:save").length).toBe(savesAtSubmit);
     expect(store.current).toBeNull();

package/src/__tests__/render-list-unit-locale.test.tsx

@@ -0,0 +1,125 @@
+// fw#2437: DataTableCell must thread the app locale (LocaleProvider) into
+// `format: "unit"` / Intl.NumberFormat cells instead of falling back to the
+// runtime's default locale — list vs. detail view could otherwise disagree
+// ("72.5 m²" vs "72,5 m²") for the same value.
+//
+// DoD-Test: rendering the SAME `{ format: "unit", unit: "m2" }` column under
+// two locales must produce two DIFFERENT cell labels — not just prove the
+// unit-format key exists.
+
+import { describe, expect, test } from "bun:test";
+import type {
+  EntityDefinition,
+  EntityListScreenDefinition,
+} from "@cosmicdrift/kumiko-framework/ui-types";
+import {
+  createStaticLocaleResolver,
+  type LiveEventSubscriber,
+  LiveEventsProvider,
+  LocaleProvider,
+  type NavApi,
+  NavProvider,
+  PrimitivesProvider,
+  RenderList,
+  TokensProvider,
+} from "@cosmicdrift/kumiko-renderer";
+import { cleanup, render } from "@testing-library/react";
+import type { ReactElement, ReactNode } from "react";
+import { defaultPrimitives } from "../primitives";
+import { defaultTokens } from "../tokens";
+
+const stubNav: NavApi = {
+  route: undefined,
+  navigate: () => {},
+  replace: () => {},
+  hrefFor: () => "",
+  searchParams: {},
+  setSearchParams: () => {},
+};
+const stubLiveEvents: LiveEventSubscriber = () => () => {};
+const stubTokens = {
+  tokens: defaultTokens,
+  mode: "dark" as const,
+  setMode: () => {},
+  toggleMode: () => {},
+};
+
+// Same all-text synthesized entity shape as projection-list-shim.ts /
+// related-list-section.tsx — a projectionList/relatedList column has no real
+// EntityDefinition, only a number-typed pseudo-field per column.
+const areaColumnEntity = {
+  fields: { area: { type: "number" } },
+} as unknown as EntityDefinition;
+
+const unitScreen: EntityListScreenDefinition = {
+  id: "",
+  type: "entityList",
+  entity: "__projection__",
+  columns: [{ field: "area", renderer: { format: "unit", unit: "m2" } }],
+};
+
+const numberScreen: EntityListScreenDefinition = {
+  id: "",
+  type: "entityList",
+  entity: "__projection__",
+  columns: [{ field: "area" }],
+};
+
+function renderAreaListUnderLocale(
+  locale: string,
+  areaValue: number,
+  screen: EntityListScreenDefinition,
+): string | null {
+  cleanup();
+  function Wrapper({ children }: { readonly children: ReactNode }): ReactElement {
+    return (
+      <TokensProvider value={stubTokens}>
+        <LocaleProvider resolver={createStaticLocaleResolver({ locale })}>
+          <PrimitivesProvider value={defaultPrimitives}>
+            <NavProvider value={stubNav}>
+              <LiveEventsProvider value={stubLiveEvents}>{children}</LiveEventsProvider>
+            </NavProvider>
+          </PrimitivesProvider>
+        </LocaleProvider>
+      </TokensProvider>
+    );
+  }
+  const result = render(
+    <RenderList
+      screen={screen}
+      entity={areaColumnEntity}
+      rows={[{ id: "r1", area: areaValue }]}
+      featureName="listing"
+    />,
+    { wrapper: Wrapper },
+  );
+  return result.getByTestId("cell-r1-area").textContent;
+}
+
+describe("RenderList — format:unit-FormatSpec threads the app locale (fw#2437)", () => {
+  test("dieselbe m2-Spalte unter zwei Locales rendert zwei verschiedene Beschriftungen", () => {
+    expect(renderAreaListUnderLocale("de-DE", 72.5, unitScreen)).toBe("72,5 m²");
+    expect(renderAreaListUnderLocale("en-US", 72.5, unitScreen)).toBe("72.5 m²");
+  });
+
+  test("ein renderer.locale gewinnt weiterhin vor dem App-Locale", () => {
+    const screen: EntityListScreenDefinition = {
+      id: "",
+      type: "entityList",
+      entity: "__projection__",
+      columns: [{ field: "area", renderer: { format: "unit", unit: "m2", locale: "en-US" } }],
+    };
+    expect(renderAreaListUnderLocale("de-DE", 72.5, screen)).toBe("72.5 m²");
+  });
+});
+
+describe("RenderList — default number-column threads the app locale (fw#2437)", () => {
+  test("kein expliziter renderer: number-Zelle folgt dem App-Locale, nicht der Runtime-Locale", () => {
+    expect(renderAreaListUnderLocale("de-DE", 1234.5, numberScreen)).toBe(
+      new Intl.NumberFormat("de-DE").format(1234.5),
+    );
+    expect(renderAreaListUnderLocale("en-US", 1234.5, numberScreen)).toBe(
+      new Intl.NumberFormat("en-US").format(1234.5),
+    );
+  });
+});

package/src/app/__tests__/document-lang-sync.test.tsx

@@ -0,0 +1,43 @@
+import { describe, expect, test } from "bun:test";
+import type { LocaleResolver } from "@cosmicdrift/kumiko-headless";
+import { render, waitFor } from "@testing-library/react";
+import { DocumentLangSync } from "../document-lang-sync";
+
+function resolverWithLocale(initial: string): {
+  readonly resolver: LocaleResolver;
+  setLocale(next: string): void;
+} {
+  let locale = initial;
+  const listeners = new Set<() => void>();
+  return {
+    resolver: {
+      translate: (key: string) => key,
+      locale: () => locale,
+      timeZone: () => "UTC",
+      subscribe: (listener: () => void) => {
+        listeners.add(listener);
+        return () => listeners.delete(listener);
+      },
+    },
+    setLocale(next: string) {
+      locale = next;
+      for (const listener of listeners) listener();
+    },
+  };
+}
+
+describe("DocumentLangSync", () => {
+  test("sets document.documentElement.lang from the resolver and updates on locale change", async () => {
+    const { resolver, setLocale } = resolverWithLocale("de-DE");
+    render(<DocumentLangSync resolver={resolver} />);
+
+    await waitFor(() => {
+      expect(document.documentElement.lang).toBe("de-DE");
+    });
+
+    setLocale("en-US");
+    await waitFor(() => {
+      expect(document.documentElement.lang).toBe("en-US");
+    });
+  });
+});

package/src/app/client-plugin.tsx

@@ -17,6 +17,7 @@ import type {
   QualifiedContentCollection,
   TranslationsByLocale,
 } from "@cosmicdrift/kumiko-renderer";
+import type { ContentEditorFormat } from "@cosmicdrift/kumiko-types/nav";
 import type { ComponentType, ReactNode } from "react";
 
 /** What a `navProvidersFromCollections` factory returns: the providers plus
@@ -97,7 +98,7 @@ export type ClientFeatureDefinition = {
    *  a plain textarea when no clientFeature registered one for that
    *  format. Same last-wins semantics as columnRenderers. Public component
    *  contract: `{ value, onChange, variables, readOnly }`. */
-  readonly contentEditors?: Readonly<Record<string, ContentEditorComponent>>;
+  readonly contentEditors?: Partial<Record<ContentEditorFormat, ContentEditorComponent>>;
 
   /** Editor-Resolver-Komponenten pro featureId:action-Key. Wenn ein
    *  TreeNode mit target angeklickt wird, schlägt der EditorPanel das

package/src/app/document-lang-sync.tsx

@@ -1,9 +1,8 @@
-// Keeps document.documentElement.lang in sync with the active locale.
-// Screen readers and the browser's built-in translate offer both read it,
-// and @cosmicdrift/kumiko-dispatcher-live reads it back to tag outgoing
-// requests with X-Locale (see dispatcher-live/src/locale.ts). This is the
-// only way the dispatcher — a separate, server-dep-free package with no
-// access to the resolver — learns the active language.
+// Keeps document.documentElement.lang (+ dataset.kumikoLocale) in sync with
+// the active locale. Screen readers and the browser's built-in translate
+// offer read lang; dispatcher-live reads dataset.kumikoLocale for X-Locale
+// (see dispatcher-live/src/locale.ts) so a static <html lang> cannot spoof
+// the active UI language.
 //
 // Lives here, not in @cosmicdrift/kumiko-renderer: that package is DOM-free
 // by design (Renderer-Boundaries Guard enforces it — web/native both
@@ -14,11 +13,18 @@
 import type { LocaleResolver } from "@cosmicdrift/kumiko-headless";
 import { useEffect } from "react";
 
+function syncDocumentLocale(locale: string): void {
+  document.documentElement.lang = locale;
+  // Dedicated marker for dispatcher-live — static <html lang> must not
+  // look like an active UI locale (kumiko-framework#2334).
+  document.documentElement.dataset["kumikoLocale"] = locale;
+}
+
 export function DocumentLangSync({ resolver }: { readonly resolver: LocaleResolver }): null {
   useEffect(() => {
-    document.documentElement.lang = resolver.locale();
+    syncDocumentLocale(resolver.locale());
     return resolver.subscribe(() => {
-      document.documentElement.lang = resolver.locale();
+      syncDocumentLocale(resolver.locale());
     });
   }, [resolver]);
   return null;

package/src/app/plain-content-editor.tsx

@@ -53,7 +53,7 @@ export function PlainContentEditor({
   };
 
   return (
-    <div>
+    <div className="rounded-md border border-input bg-transparent">
       <TextareaContentEditor
         id={id}
         value={value}
@@ -61,7 +61,11 @@ export function PlainContentEditor({
         variables={variables}
         readOnly={readOnly}
       />
-      <VariableChips variables={variables} onInsert={insertAtCaret} disabled={readOnly} />
+      {variables.length > 0 && (
+        <div className="flex flex-wrap gap-1 border-t border-input p-1">
+          <VariableChips variables={variables} onInsert={insertAtCaret} disabled={readOnly} />
+        </div>
+      )}
     </div>
   );
 }

package/src/lib/__tests__/download.test.ts

@@ -6,9 +6,7 @@ function stubDispatcher(result: QueryResult<{ url?: string }>): Dispatcher {
   return { query: async () => result } as unknown as Dispatcher;
 }
 
-// Sole postWithDownload suite (unit + DOM). The former
-// src/__tests__/download.test.tsx duplicate was removed — this helper
-// already covers both bunfig (node) and bunfig.dom.toml (happy-dom):
+// Covers both bunfig (node) and bunfig.dom.toml (happy-dom):
 // - node env: install a minimal fake window for the duration of the test,
 //   then remove it again so later suites are unaffected.
 // - dom env: patch only location.assign on the real window — swapping the
@@ -56,6 +54,7 @@ describe("postWithDownload", () => {
   });
 
   test("passes the dispatcher error through when not successful", async () => {
+    tracked = trackAssignedUrl();
     const dispatcherError: DispatcherError = {
       code: "boom",
       httpStatus: 500,
@@ -65,6 +64,7 @@ describe("postWithDownload", () => {
     const dispatcher = stubDispatcher({ isSuccess: false, error: dispatcherError });
     const err = await postWithDownload(dispatcher, "files.signedUrl", {});
     expect(err).toEqual(dispatcherError);
+    expect(tracked.url()).toBeUndefined();
   });
 
   test("returns download_url_missing error when url is absent", async () => {

package/src/lib/__tests__/download.test.tsx

@@ -0,0 +1,30 @@
+// happy-dom coverage for postWithDownload's window.location.assign path.
+// bunfig.toml (unit `test`) ignores *.test.tsx; bunfig.dom.toml picks this up.
+
+import { afterEach, describe, expect, spyOn, test } from "bun:test";
+import type { Dispatcher, QueryResult } from "@cosmicdrift/kumiko-headless";
+import { postWithDownload } from "../download";
+
+function stubDispatcher(result: QueryResult<{ url?: string }>): Dispatcher {
+  return { query: async () => result } as unknown as Dispatcher;
+}
+
+describe("postWithDownload (happy-dom)", () => {
+  let assignSpy: ReturnType<typeof spyOn> | undefined;
+
+  afterEach(() => {
+    assignSpy?.mockRestore();
+    assignSpy = undefined;
+  });
+
+  test("assigns the url on the real window", async () => {
+    assignSpy = spyOn(window.location, "assign").mockImplementation(() => {});
+    const err = await postWithDownload(
+      stubDispatcher({ isSuccess: true, data: { url: "https://cdn.example.com/f.pdf" } }),
+      "files.signedUrl",
+      {},
+    );
+    expect(err).toBeNull();
+    expect(assignSpy).toHaveBeenCalledWith("https://cdn.example.com/f.pdf");
+  });
+});