@cosmicdrift/kumiko-renderer-web 0.220.1 → 0.221.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.220.1",
+  "version": "0.221.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.221.0",
+    "@cosmicdrift/kumiko-headless": "0.221.0",
+    "@cosmicdrift/kumiko-renderer": "0.221.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.221.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__/primitives.test.tsx

@@ -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();
@@ -1044,6 +1064,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/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");
+  });
+});

package/src/primitives/__tests__/data-table-logic.test.ts

@@ -209,6 +209,19 @@ describe("defaultCellRender", () => {
     expect(new Intl.NumberFormat("de-DE").format(245.5)).toBe("245,5");
   });
 
+  test("number/decimal → explicit locale param wins over the runtime default (fw#2437)", () => {
+    expect(defaultCellRender(245.5, "number", undefined, "de-DE")).toBe(
+      new Intl.NumberFormat("de-DE").format(245.5),
+    );
+    expect(defaultCellRender(245.5, "decimal", undefined, "en-US")).toBe(
+      new Intl.NumberFormat("en-US").format(245.5),
+    );
+    // Same value, two locales → two different strings, not just "locale is accepted".
+    expect(defaultCellRender(245.5, "number", undefined, "de-DE")).not.toBe(
+      defaultCellRender(245.5, "number", undefined, "en-US"),
+    );
+  });
+
   test("money → { amount, currency } formatiert, kein [object Object]", () => {
     const result = defaultCellRender({ amount: 450, currency: "EUR" }, "money");
     expect(result).not.toBe("[object Object]");
@@ -254,4 +267,18 @@ describe("defaultCellRender", () => {
     expect(() => defaultCellRender({ amount: 1, currency: "" }, "money")).not.toThrow();
     expect(defaultCellRender({ amount: 1, currency: "" }, "money")).toBe("[object Object]");
   });
+
+  test("money → explicit locale param wins over guessLocale's navigator fallback (fw#2437)", () => {
+    const value = { amount: 1234.5, currency: "EUR" };
+    const de = defaultCellRender(value, "money", undefined, "de-DE");
+    const en = defaultCellRender(value, "money", undefined, "en-US");
+    // Same amount, two locales → two different strings, not just "locale is accepted".
+    expect(de).not.toBe(en);
+    expect(de).toBe(
+      new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(1234.5),
+    );
+    expect(en).toBe(
+      new Intl.NumberFormat("en-US", { style: "currency", currency: "EUR" }).format(1234.5),
+    );
+  });
 });

package/src/primitives/__tests__/embedded-list-input.test.tsx

@@ -498,6 +498,27 @@ describe("EmbeddedListInput — paste", () => {
 });
 
 describe("EmbeddedListInput — Enter-to-add-row (#1839)", () => {
+  test("Enter on a select trigger in the last cell does not append a row", () => {
+    const columns: readonly EmbeddedListColumn[] = [
+      {
+        field: "status",
+        label: "Status",
+        type: "select",
+        required: false,
+        derived: false,
+        options: ["open"],
+      },
+    ];
+    const rows = [{ status: "open" }];
+    const onAddRow = mock(() => {});
+    renderWithLocale(<EmbeddedListInput {...baseProps({ columns, rows, onAddRow })} />);
+    const desktop = within(screen.getByTestId("lines-desktop"));
+    const trigger = desktop.getByTestId("lines-cell-0-status").querySelector("button");
+    if (trigger === null) throw new Error("expected a select trigger button");
+    fireEvent.keyDown(trigger, { key: "Enter", code: "Enter" });
+    expect(onAddRow).not.toHaveBeenCalled();
+  });
+
   test("Enter on the last editable cell of the last row fires onAddRow and prevents default, same as Tab", () => {
     const rows = [{ description: "A", quantity: 1, amount: 100 }];
     const onAddRow = mock(() => {});

package/src/primitives/index.tsx

@@ -8,6 +8,7 @@
 // basierte Stile. Radix-UI-Unterbau für interaktive Elemente (Modal,
 // Dropdown etc. kommen später).
 
+import type { FieldIconKey } from "@cosmicdrift/kumiko-framework/ui-types";
 import type { ListRowViewModel } from "@cosmicdrift/kumiko-headless";
 import { applyFormatSpec, isSafeHref } from "@cosmicdrift/kumiko-headless";
 import type {
@@ -36,6 +37,8 @@ import {
   type StepBarProps,
   type TextProps,
   useColumnRenderer,
+  useOptionalLocale,
+  useOptionalTranslation,
   useTranslation,
   type WizardStepGroupProps,
   WriteFailedError,
@@ -311,7 +314,7 @@ function DefaultField({
 // (nav-tree.tsx) — a separate, smaller registry instead of a shared
 // import, because field icons cover a different use case (email, phone,
 // location, …) than nav icons (dashboard, tables, …).
-const FIELD_ICONS: Readonly<Record<string, typeof Mail>> = {
+const FIELD_ICONS = {
   mail: Mail,
   lock: Lock,
   hash: Hash,
@@ -325,10 +328,12 @@ const FIELD_ICONS: Readonly<Record<string, typeof Mail>> = {
   globe: Globe,
   key: KeyRound,
   "map-pin": MapPin,
-};
+} as const satisfies Readonly<Record<FieldIconKey, typeof Mail>>;
 
-function fieldIconFor(icon: string | undefined): (typeof FIELD_ICONS)[string] | undefined {
-  return icon !== undefined && Object.hasOwn(FIELD_ICONS, icon) ? FIELD_ICONS[icon] : undefined;
+function fieldIconFor(icon: string | undefined): (typeof FIELD_ICONS)[FieldIconKey] | undefined {
+  return icon !== undefined && Object.hasOwn(FIELD_ICONS, icon)
+    ? FIELD_ICONS[icon as FieldIconKey]
+    : undefined;
 }
 
 // Wraps a text/number input with a left-positioned prefix icon when
@@ -668,6 +673,10 @@ function DefaultDataTable({
   getRowTestId,
   getCellTestId,
 }: DataTableProps): ReactNode {
+  // One locale/translate subscription per table — not per cell (fw#2345).
+  // Optional hooks: a bare DataTable outside LocaleProvider must not crash.
+  const tableTranslate = useOptionalTranslation();
+  const tableLocale = useOptionalLocale();
   // Toolbar-Wrapper: gemeinsamer Container für Toolbar+Tabelle damit
   // beide visuell zusammengehören. Toolbar ist NICHT sticky — Lists
   // scrollen typischerweise mit dem Page-Container, nicht intern.
@@ -734,12 +743,6 @@ function DefaultDataTable({
                     // if the sum of the columns gets too wide.
                     className={cn("max-w-xs truncate", col.highlighted === true && "bg-accent/40")}
                     title={cellTitle(row.values[col.field])}
-                    // A click into the editable cell's widget must not also
-                    // trigger the row's onClick (typically "Open Detail") —
-                    // same reasoning as the actions cell below.
-                    {...(onCellChange !== undefined && {
-                      onClick: (e: MouseEvent) => e.stopPropagation(),
-                    })}
                   >
                     <DataTableCell
                       value={row.values[col.field]}
@@ -747,6 +750,8 @@ function DefaultDataTable({
                       field={col.field}
                       type={col.type}
                       renderer={col.renderer}
+                      translate={tableTranslate}
+                      locale={tableLocale}
                       {...(col.optionLabels !== undefined && { optionLabels: col.optionLabels })}
                       {...(onCellChange !== undefined && {
                         onChange: (value: unknown) => onCellChange(row.id, col.field, value),
@@ -1442,25 +1447,18 @@ export function defaultCellRender(
   value: unknown,
   type: string,
   optionLabels?: Readonly<Record<string, string>>,
+  locale?: string,
 ): string {
   if (value === null || value === undefined || value === "") return "";
   if (type === "boolean") return value === true ? "✓" : "";
-  if (type === "timestamp" || type === "date") return applyFormatSpec({ format: type }, value);
+  if (type === "timestamp" || type === "date") {
+    return applyFormatSpec({ format: type, locale }, value);
+  }
   if (type === "number" || type === "decimal" || type === "bigInt") {
-    // No `locale` param here for the same reason as the money branch below:
-    // DataTableCell has no app-locale context to thread through yet.
-    // Intl.NumberFormat(undefined) resolves the runtime's default locale.
-    return applyFormatSpec({ format: type }, value);
+    return applyFormatSpec({ format: type, locale }, value);
   }
   if (type === "money") {
     if (!isMoneyValue(value)) return String(value);
-    // No `locale` param here: DataTableCell has no app-locale context to
-    // thread through (unlike the form path — see MoneyInput/RenderField in
-    // packages/renderer, which pins the LocaleProvider locale). formatMoney
-    // falls back to guessLocale() (navigator.language), so the same amount
-    // can render differently in a table vs. a form on the same screen.
-    // Mid-term: pass the app locale down here too, analogous to render-field.
-    //
     // formatMoney expects minor units scaled by currencyDecimals(currency).
     // rehydrateMoney's `amountMinor` is scaled by a flat MINOR_UNIT_SCALE=100
     // instead, which disagrees with currencyDecimals for non-2-decimal
@@ -1468,7 +1466,7 @@ export function defaultCellRender(
     // low). Deriving minor units from `amount` keeps this consistent with
     // render-field.tsx's moneyMinorValue.
     const minor = Math.round(value.amount * 10 ** currencyDecimals(value.currency));
-    return formatMoney(minor, value.currency);
+    return formatMoney(minor, value.currency, locale);
   }
   if (type === "select") {
     const raw = String(value);
@@ -1508,6 +1506,8 @@ type DataTableCellProps = {
   readonly renderer?: unknown;
   readonly optionLabels?: Readonly<Record<string, string>>;
   readonly onChange?: (value: unknown) => void;
+  readonly translate?: (key: string, params?: Readonly<Record<string, unknown>>) => string;
+  readonly locale?: string;
 };
 
 // Cell-Renderer als Component (statt reiner Funktion) damit der
@@ -1527,12 +1527,17 @@ function DataTableCell({
   renderer,
   optionLabels,
   onChange,
+  translate,
+  locale,
 }: DataTableCellProps): ReactNode {
   const componentRef = isComponentRendererRef(renderer);
   const ResolvedComponent = useColumnRenderer(componentRef?.name);
-  const t = useTranslation();
   if (typeof renderer === "object" && renderer !== null && "format" in renderer) {
-    return applyFormatSpec(renderer as { format: string } & Record<string, unknown>, value, t);
+    return applyFormatSpec(
+      { locale, ...(renderer as { format: string } & Record<string, unknown>) },
+      value,
+      translate,
+    );
   }
   if (typeof renderer === "function") {
     const fn = renderer as (v: unknown, r?: Readonly<Record<string, unknown>>) => string;
@@ -1540,7 +1545,7 @@ function DataTableCell({
   }
   if (componentRef !== undefined) {
     if (ResolvedComponent !== undefined) {
-      return (
+      const node = (
         <ResolvedComponent
           value={value}
           row={row}
@@ -1548,6 +1553,21 @@ function DataTableCell({
           {...(onChange !== undefined && { onChange })}
         />
       );
+      // stopPropagation only on the editable branch — plain cells must still
+      // fire row onClick when onCellChange is set for sibling editable cells.
+      if (onChange !== undefined) {
+        return (
+          // biome-ignore lint/a11y/noStaticElementInteractions: stopPropagation only — not a control
+          <span
+            className="contents"
+            onClick={(e: MouseEvent) => e.stopPropagation()}
+            onKeyDown={(e) => e.stopPropagation()}
+          >
+            {node}
+          </span>
+        );
+      }
+      return node;
     }
     // Renderer im Schema referenziert, aber client-side kein Map-Eintrag —
     // typischer Fall: clientFeatures.columnRenderers vergessen oder
@@ -1562,11 +1582,11 @@ function DataTableCell({
     // dashboard-01-Muster: outline-Badge + muted statt gefülltem secondary.
     return (
       <Badge variant="outline" className="px-1.5 text-muted-foreground">
-        {defaultCellRender(value, type, optionLabels)}
+        {defaultCellRender(value, type, optionLabels, locale)}
       </Badge>
     );
   }
-  return defaultCellRender(value, type, optionLabels);
+  return defaultCellRender(value, type, optionLabels, locale);
 }
 
 // ---- Form + Section + Grid + Text ----

package/src/ui/sheet.tsx

@@ -47,8 +47,6 @@ function SheetOverlay({
 
 function SheetContent({
   className,
-  overlayClassName,
-  overlayStyle,
   children,
   side = "right",
   showCloseButton = true,
@@ -56,12 +54,10 @@ function SheetContent({
 }: React.ComponentProps<typeof SheetPrimitive.Content> & {
   side?: "top" | "right" | "bottom" | "left"
   showCloseButton?: boolean
-  overlayClassName?: string
-  overlayStyle?: React.CSSProperties
 }) {
   return (
     <SheetPortal>
-      <SheetOverlay className={overlayClassName} style={overlayStyle} />
+      <SheetOverlay />
       <SheetPrimitive.Content
         data-slot="sheet-content"
         className={cn(
@@ -104,16 +100,7 @@ function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sheet-footer"
-      // Matches the card footer convention (primitives/index.tsx cardFooter
-      // + cardFooterBorder) for padding/border/button-row shape, but keeps
-      // the panel's own `bg-background` instead of the card footer's
-      // `bg-muted/30` — the sheet panel isn't a card, so its footer reads
-      // as the same surface as the body above it. The border-t alone marks
-      // the footer boundary.
-      className={cn(
-        "mt-auto flex items-center justify-end gap-2 border-t bg-background px-[var(--card-padding)] py-4",
-        className,
-      )}
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
       {...props}
     />
   )

package/src/widgets/__tests__/feed-list.test.tsx

@@ -18,6 +18,9 @@ describe("FeedList", () => {
   test("renders trailing content only when defined", () => {
     render(<FeedList rows={rows} testId="feed" />);
     expect(screen.getByText("3 min")).toBeTruthy();
+    const items = screen.getAllByRole("listitem");
+    expect(items[0]?.textContent).toContain("3 min");
+    expect(items[1]?.textContent).not.toContain("min");
   });
 
   test("renders the empty state when there are no rows", () => {

package/src/widgets/__tests__/widgets.test.tsx

@@ -318,6 +318,33 @@ describe("StatusBarChart", () => {
     expect(container.querySelectorAll("rect").length).toBe(5);
     expect(screen.getByText("heute")).toBeTruthy();
   });
+
+  test("dense: fixed-size flat bars ohne Tick/Gradient, aria-Label + Tooltips bleiben", () => {
+    const { container } = render(
+      <StatusBarChart
+        dense
+        ariaLabel="Zahlungsmonate"
+        entries={[
+          { key: "m1", level: 1, tone: "ok", label: "Januar: bezahlt" },
+          { key: "m2", level: 0.5, tone: "bad", label: "Februar: offen" },
+        ]}
+      />,
+    );
+    const svg = container.querySelector("svg");
+    expect(screen.getByRole("img", { name: "Zahlungsmonate" })).toBeTruthy();
+    expect(svg?.getAttribute("class")).not.toContain("w-full");
+    expect(svg?.getAttribute("width")).not.toBeNull();
+    expect(container.querySelectorAll("linearGradient").length).toBe(0);
+    // 1 bar (non-last entry) + 1 bar + 1 last-highlight stripe (no tick) = 3 rects
+    expect(container.querySelectorAll("rect").length).toBe(3);
+    expect(container.querySelectorAll("title").length).toBe(3); // aria title + 2 entry tooltips
+  });
+
+  test("dense: leere Entries reservieren keine 36px-Höhe", () => {
+    const { container } = render(<StatusBarChart dense ariaLabel="Leer" entries={[]} />);
+    const placeholder = container.querySelector("div[aria-hidden]");
+    expect(placeholder?.className).toBe("h-3");
+  });
 });
 
 describe("TimeseriesChart", () => {

package/src/widgets/charts.tsx

@@ -23,15 +23,17 @@ export type StatusBarEntry = {
   readonly label?: string;
 };
 
-/** Status-Balkenleiste (z.B. 90-Tage-Uptime): variable-height Bars mit
- *  Gradient-Fade + Tick-Line am Bar-Top; der letzte Eintrag bekommt einen
- *  „jetzt"-Accent-Stripe. */
+/** Status bar strip (e.g. 90-day uptime): variable-height bars with
+ *  gradient fade + tick line on top; the last entry gets a "now"
+ *  accent stripe. `dense` swaps this for a flat-fill, fixed-size
+ *  variant sized to fit a table cell instead of stretching to `w-full`. */
 export function StatusBarChart({
   entries,
   ariaLabel,
   startLabel,
   endLabel,
   highlightLast = true,
+  dense = false,
   testId,
 }: {
   readonly entries: readonly StatusBarEntry[];
@@ -40,28 +42,34 @@ export function StatusBarChart({
   readonly startLabel?: string;
   readonly endLabel?: string;
   readonly highlightLast?: boolean;
+  /** Compact variant for table cells: fixed intrinsic size (no `w-full` stretch), flat fills instead of gradients, no tick marks. */
+  readonly dense?: boolean;
   readonly testId?: string;
 }): ReactNode {
   const gradPrefix = useId();
-  if (entries.length === 0) return <div className="h-9" aria-hidden />;
+  if (entries.length === 0) return <div className={dense ? "h-3" : "h-9"} aria-hidden />;
 
-  const chartHeight = 36;
-  const tickHeight = 1;
+  const chartHeight = dense ? 12 : 36;
+  const tickHeight = dense ? 0 : 1;
+  const barWidth = dense ? 3 : 1;
   const barGap = 1;
   const lastIdx = entries.length - 1;
+  const totalWidth = entries.length * (barWidth + barGap);
 
   return (
     <div data-testid={testId}>
       <svg
-        viewBox={`0 0 ${entries.length * (1 + barGap)} ${chartHeight}`}
-        preserveAspectRatio="none"
-        className="block h-9 w-full"
+        viewBox={`0 0 ${totalWidth} ${chartHeight}`}
+        preserveAspectRatio={dense ? undefined : "none"}
+        width={dense ? totalWidth : undefined}
+        height={dense ? chartHeight : undefined}
+        className={dense ? "block" : "block h-9 w-full"}
         role="img"
         aria-label={ariaLabel}
       >
         <title>{ariaLabel}</title>
         {entries.map((entry, idx) => {
-          const x = idx * (1 + barGap);
+          const x = idx * (barWidth + barGap);
           const level = Math.max(0, Math.min(1, entry.level));
           const barHeight = (chartHeight - tickHeight) * level;
           const barY = chartHeight - barHeight;
@@ -70,33 +78,44 @@ export function StatusBarChart({
           const gradId = `${gradPrefix}-${idx}`;
           return (
             <g key={entry.key}>
-              <defs>
-                <linearGradient id={gradId} x1="0" x2="0" y1="0" y2="1">
-                  <stop offset="0%" stopColor={color} stopOpacity={isLast ? 0.85 : 0.5} />
-                  <stop offset="100%" stopColor={color} stopOpacity={0.05} />
-                </linearGradient>
-              </defs>
+              {!dense && (
+                <defs>
+                  <linearGradient id={gradId} x1="0" x2="0" y1="0" y2="1">
+                    <stop offset="0%" stopColor={color} stopOpacity={isLast ? 0.85 : 0.5} />
+                    <stop offset="100%" stopColor={color} stopOpacity={0.05} />
+                  </linearGradient>
+                </defs>
+              )}
               {isLast && (
                 <rect
-                  x={x - 0.5}
+                  x={x - barGap / 2}
                   y={0}
-                  width={2}
+                  width={barWidth + barGap}
                   height={chartHeight}
                   fill="var(--color-foreground)"
                   fillOpacity={0.06}
                 />
               )}
-              <rect x={x} y={barY} width={1} height={barHeight} fill={`url(#${gradId})`}>
-                {entry.label !== undefined && <title>{entry.label}</title>}
-              </rect>
               <rect
                 x={x}
-                y={barY - tickHeight}
-                width={1}
-                height={tickHeight}
-                fill="var(--color-foreground)"
-                fillOpacity={isLast ? 1.0 : 0.7}
-              />
+                y={barY}
+                width={barWidth}
+                height={barHeight}
+                fill={dense ? color : `url(#${gradId})`}
+                fillOpacity={dense ? (isLast ? 1 : 0.75) : undefined}
+              >
+                {entry.label !== undefined && <title>{entry.label}</title>}
+              </rect>
+              {!dense && (
+                <rect
+                  x={x}
+                  y={barY - tickHeight}
+                  width={barWidth}
+                  height={tickHeight}
+                  fill="var(--color-foreground)"
+                  fillOpacity={isLast ? 1.0 : 0.7}
+                />
+              )}
             </g>
           );
         })}

package/src/widgets/drawer.tsx

@@ -4,14 +4,16 @@ import { type ReactNode, useRef, useState } from "react";
 import { clamp } from "../lib/clamp";
 import { cn } from "../lib/cn";
 import { useIsNarrowViewport } from "../primitives/use-narrow-viewport";
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-} from "../ui/sheet";
+import { Sheet, SheetDescription, SheetFooter, SheetHeader, SheetTitle } from "../ui/sheet";
+import { DrawerSheetContent } from "./sheet-parts";
+
+// Mirrors primitives/index.tsx's cardFooter + cardFooterBorder (row layout,
+// end-justified actions, top border, panel surface instead of the card
+// footer's bg-muted/30) — those two consts aren't exported, so the
+// equivalent classes are inlined here rather than growing the vendored
+// SheetFooter's own default className with panel-specific styling.
+const DRAWER_FOOTER_CLASS =
+  "flex-row items-center justify-end border-t bg-background px-[var(--card-padding)] py-4";
 
 export type DrawerProps = {
   readonly open: boolean;
@@ -161,7 +163,7 @@ export function Drawer({
 
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent
+      <DrawerSheetContent
         side={side}
         data-testid={testId}
         overlayStyle={overlayStyle}
@@ -193,7 +195,9 @@ export function Drawer({
           </SheetHeader>
         )}
         <div className="flex-1 overflow-y-auto px-4">{children}</div>
-        {footer !== undefined && <SheetFooter>{footer}</SheetFooter>}
+        {footer !== undefined && (
+          <SheetFooter className={DRAWER_FOOTER_CLASS}>{footer}</SheetFooter>
+        )}
         {canResize && !narrow && (
           // biome-ignore lint/a11y/useSemanticElements: <hr> can't carry pointer/keyboard drag interaction or a live width value — a draggable separator needs a div with the ARIA role.
           <div
@@ -214,7 +218,7 @@ export function Drawer({
             )}
           />
         )}
-      </SheetContent>
+      </DrawerSheetContent>
     </Sheet>
   );
 }

package/src/widgets/sheet-parts.tsx

@@ -0,0 +1,62 @@
+import { XIcon } from "lucide-react";
+import { Dialog as SheetPrimitive } from "radix-ui";
+import type { ComponentProps, CSSProperties, ReactNode } from "react";
+import { cn } from "../lib/cn";
+
+// Drawer needs a per-instance overlay dim/blur (its `backdrop` prop), but
+// ../ui/sheet.tsx is vendored shadcn (regenerated via scripts/sync-shadcn.ts,
+// never hand-edited — #1965) and its SheetContent hard-codes a plain
+// `<SheetOverlay />` with no way to reach the overlay's inline style. Rather
+// than growing the vendored primitive an ad-hoc prop that a resync would
+// silently drop, this composes the same Portal + Overlay + Content tree
+// directly from the underlying radix-ui Dialog primitive (mirrors
+// SheetContent's className logic 1:1 so Drawer's other side-variant
+// behavior — slide animation, borders — stays identical).
+export type DrawerSheetContentProps = ComponentProps<typeof SheetPrimitive.Content> & {
+  readonly side?: "top" | "right" | "bottom" | "left";
+  readonly showCloseButton?: boolean;
+  readonly overlayStyle?: CSSProperties;
+};
+
+export function DrawerSheetContent({
+  className,
+  overlayStyle,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: DrawerSheetContentProps): ReactNode {
+  return (
+    <SheetPrimitive.Portal data-slot="sheet-portal">
+      <SheetPrimitive.Overlay
+        data-slot="sheet-overlay"
+        style={overlayStyle}
+        className="fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0"
+      />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          "fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
+          side === "right" &&
+            "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+          side === "left" &&
+            "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+          side === "top" &&
+            "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+          side === "bottom" &&
+            "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary">
+            <XIcon className="size-4" />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Content>
+    </SheetPrimitive.Portal>
+  );
+}

package/src/widgets/upload-zone.tsx

@@ -92,9 +92,10 @@ export function UploadZone({
 
   async function uploadOne(file: File): Promise<void> {
     const rowId = String(nextRowId.current++);
-    setRows((prev) => [...prev, { id: rowId, fileName: file.name, status: "uploading" }]);
+    const uploadFile = await resizeImageBeforeUpload(file);
+    setRows((prev) => [...prev, { id: rowId, fileName: uploadFile.name, status: "uploading" }]);
     try {
-      await onUpload(await resizeImageBeforeUpload(file));
+      await onUpload(uploadFile);
       setRows((prev) => prev.map((row) => (row.id === rowId ? { ...row, status: "done" } : row)));
     } catch (cause) {
       const message = cause instanceof Error ? cause.message : t("kumiko.widget.upload.error");
@@ -107,6 +108,8 @@ export function UploadZone({
   async function uploadFiles(files: FileList | null): Promise<void> {
     if (files === null || files.length === 0) return;
     const picked = multiple ? Array.from(files) : files[0] !== undefined ? [files[0]] : [];
+    // Reset before awaits so re-picking the same file during a slow upload still fires change.
+    if (inputRef.current) inputRef.current.value = "";
     const [accepted, rejected] = partitionByAccept(picked, accept);
     for (const file of rejected) {
       setRows((prev) => [
@@ -120,9 +123,6 @@ export function UploadZone({
       ]);
     }
     await Promise.all(accepted.map((file) => uploadOne(file)));
-    // Reset so re-picking the SAME file still fires change — the browser
-    // suppresses the event otherwise.
-    if (inputRef.current) inputRef.current.value = "";
   }
 
   function handleDrop(e: DragEvent<HTMLLabelElement>): void {