@cosmicdrift/kumiko-renderer-web 0.193.0 → 0.194.0

package/src/app/__tests__/tiptap-editor.test.tsx

@@ -9,6 +9,18 @@ function Controlled({ initial }: { readonly initial: string }): ReactNode {
   return <TiptapEditor value={value} onChange={setValue} variables={["name"]} readOnly={false} />;
 }
 
+function ReadOnlyToggle({ initial }: { readonly initial: string }): ReactNode {
+  const [readOnly, setReadOnly] = useState(false);
+  return (
+    <div>
+      <button type="button" onClick={() => setReadOnly((r) => !r)}>
+        toggle readOnly
+      </button>
+      <TiptapEditor value={initial} onChange={() => {}} variables={[]} readOnly={readOnly} />
+    </div>
+  );
+}
+
 // Mirrors the real caller: TextBlockEditor mounts with value="" and only
 // gets the loaded content after its by-slug query resolves — value arrives
 // as a prop update, not at mount. A test that renders the final HTML
@@ -91,4 +103,42 @@ describe("TiptapEditor — jsdom smoke", () => {
     fireEvent.click(screen.getByText("{{name}}"));
     expect(await screen.findByText("{{name}}", { selector: "p" })).toBeTruthy();
   });
+
+  test("toggling readOnly flips the surface's contenteditable and disables the toolbar", async () => {
+    // @tiptap/react re-applies `editable` from options on every options
+    // refresh, overriding what `editable: !readOnly` set at creation — so
+    // this only stays correct across a readOnly prop change via the
+    // `editor.setEditable` effect. A test that only mounts with a fixed
+    // readOnly value can't catch that effect being removed.
+    render(<ReadOnlyToggle initial="<p>hello</p>" />);
+    const editable = await screen.findByText("hello");
+    expect(editable.closest('[contenteditable="true"]')).not.toBeNull();
+    expect((screen.getByRole("button", { name: "Bold" }) as HTMLButtonElement).disabled).toBe(
+      false,
+    );
+
+    fireEvent.click(screen.getByText("toggle readOnly"));
+
+    expect(editable.closest('[contenteditable="false"]')).not.toBeNull();
+    expect((screen.getByRole("button", { name: "Bold" }) as HTMLButtonElement).disabled).toBe(true);
+  });
+
+  // Documents the ponytail-noted ceiling on useEditor: markup StarterKit's
+  // schema doesn't model (tables, raw divs/spans, style attrs) is dropped on
+  // first parse, invisible until the first onChange fires. Not a bug to fix
+  // here — a fixture for whoever hits the ceiling next.
+  test("markup outside StarterKit's schema (a <table>) is dropped on the first onChange", async () => {
+    const values: string[] = [];
+    render(
+      <TiptapEditor
+        value="<table><tbody><tr><td>cell</td></tr></tbody></table><p>hello</p>"
+        onChange={(html) => values.push(html)}
+        variables={[]}
+        readOnly={false}
+      />,
+    );
+    const editable = (await screen.findByText("hello")).closest('[contenteditable="true"]');
+    fireEvent.click(screen.getByRole("button", { name: "Bold" }));
+    expect(editable?.innerHTML).not.toContain("<table");
+  });
 });

package/src/app/client-plugin.tsx

@@ -90,12 +90,12 @@ export type ClientFeatureDefinition = {
     collections: readonly QualifiedContentCollection[],
   ) => CollectionNavProviders;
 
-  /** Content-Editor-Components — Map `contentFormat` ("plain" | "rich" | "markdown") →
-   *  React-Component. `r.contentCollection()` declares which format an
+  /** Content editor components — map `contentFormat` ("plain" | "rich" | "markdown") →
+   *  React component. `r.contentCollection()` declares which format an
    *  editor edits; the collection's editor UI (template-resolver's
    *  TextBlockEditor et al.) looks the component up here and falls back to
    *  a plain textarea when no clientFeature registered one for that
-   *  format. Same Last-Wins-Semantik wie columnRenderers. Public component
+   *  format. Same last-wins semantics as columnRenderers. Public component
    *  contract: `{ value, onChange, variables, readOnly }`. */
   readonly contentEditors?: Readonly<Record<string, ContentEditorComponent>>;
 

package/src/app/create-app.tsx

@@ -9,7 +9,6 @@ import type {
 import {
   AppFeaturesProvider,
   type AppSchema,
-  type ColumnRendererComponent,
   ColumnRenderersProvider,
   type ContentEditorComponent,
   ContentEditorsProvider,
@@ -18,7 +17,6 @@ import {
   DispatcherProvider,
   type DraftStorage,
   DraftStorageProvider,
-  type ExtensionSectionComponent,
   ExtensionSectionsProvider,
   type FeatureSchema,
   KumikoScreen,
@@ -99,7 +97,7 @@ export function buildNavProviderMaps(
     for (const [navId, provider] of Object.entries(f.navProviders ?? {})) {
       const qn = qualifyNavProviderKey(f.name, navId);
       if (navProviders.has(qn) && !derivedQns.delete(qn)) {
-        // biome-ignore lint/suspicious/noConsole: dev-warning für Schema-Konflikte
+        // biome-ignore lint/suspicious/noConsole: dev warning for schema conflicts
         console.warn(
           `[kumiko] navProvider for "${qn}" defined by multiple clientFeatures — last wins.`,
         );
@@ -228,26 +226,39 @@ export function firstOpenScreenQn(features: readonly FeatureSchema[]): string |
   return undefined;
 }
 
-// Merges the content-editor map — same last-wins semantics as
-// columnRenderers. No entry for a contentFormat → useContentEditor falls
-// back to the textarea on its own, no warning needed.
-export function mergeContentEditors(
+// Last-wins merge for a clientFeature-contributed map (contentEditors,
+// columnRenderers, extensionSectionComponents, ...): later features in
+// `clientFeatures` override earlier ones on key collision, logging once
+// per collision so an accidental override isn't silent.
+function mergeByKey<T>(
   clientFeatures: readonly ClientFeatureDefinition[],
-): Record<string, ContentEditorComponent> {
-  const contentEditors: Record<string, ContentEditorComponent> = {};
+  pick: (f: ClientFeatureDefinition) => Record<string, T> | undefined,
+  label: string,
+): Record<string, T> {
+  const merged: Record<string, T> = {};
   for (const f of clientFeatures) {
-    if (f.contentEditors === undefined) continue;
-    for (const [key, value] of Object.entries(f.contentEditors)) {
-      if (contentEditors[key] !== undefined) {
-        // biome-ignore lint/suspicious/noConsole: dev-warning für Schema-Konflikte
+    const entries = pick(f);
+    if (entries === undefined) continue;
+    for (const [key, value] of Object.entries(entries)) {
+      if (merged[key] !== undefined) {
+        // biome-ignore lint/suspicious/noConsole: dev warning for schema conflicts
         console.warn(
-          `[kumiko] contentEditor "${key}" defined by multiple clientFeatures — last definition (from "${f.name}") wins.`,
+          `[kumiko] ${label} "${key}" defined by multiple clientFeatures — last definition (from "${f.name}") wins.`,
         );
       }
-      contentEditors[key] = value;
+      merged[key] = value;
     }
   }
-  return contentEditors;
+  return merged;
+}
+
+// Merges the content-editor map — same last-wins semantics as
+// columnRenderers. No entry for a contentFormat → useContentEditor falls
+// back to the textarea on its own, no warning needed.
+export function mergeContentEditors(
+  clientFeatures: readonly ClientFeatureDefinition[],
+): Record<string, ContentEditorComponent> {
+  return mergeByKey(clientFeatures, (f) => f.contentEditors, "contentEditor");
 }
 
 export function createKumikoApp(options: CreateKumikoAppOptions = {}): { readonly root: Root } {
@@ -321,39 +332,19 @@ export function createKumikoApp(options: CreateKumikoAppOptions = {}): { readonl
   for (const f of clientFeatures) {
     if (f.components !== undefined) Object.assign(customScreens, f.components);
   }
-  // Column-Renderer-Map mergen — gleiche Last-Wins-Semantik wie bei
-  // customScreens. Doppelte Keys über Features sind selten gewollt;
-  // wir warnen einmalig pro Kollision damit das nicht stillschweigend
-  // den Renderer einer Library überschreibt.
-  const columnRenderers: Record<string, ColumnRendererComponent> = {};
-  for (const f of clientFeatures) {
-    if (f.columnRenderers === undefined) continue;
-    for (const [key, value] of Object.entries(f.columnRenderers)) {
-      if (columnRenderers[key] !== undefined) {
-        // biome-ignore lint/suspicious/noConsole: dev-warning für Schema-Konflikte
-        console.warn(
-          `[kumiko] columnRenderer "${key}" defined by multiple clientFeatures — last definition (from "${f.name}") wins.`,
-        );
-      }
-      columnRenderers[key] = value;
-    }
-  }
-  // Extension-Section-Components — same Last-Wins + Warn-Semantik wie
-  // columnRenderers. Mountet sich am ExtensionSectionsProvider; RenderEdit
-  // löst die Component aus dem `__component`-Marker der section.
-  const extensionSectionComponents: Record<string, ExtensionSectionComponent> = {};
-  for (const f of clientFeatures) {
-    if (f.extensionSectionComponents === undefined) continue;
-    for (const [key, value] of Object.entries(f.extensionSectionComponents)) {
-      if (extensionSectionComponents[key] !== undefined) {
-        // biome-ignore lint/suspicious/noConsole: dev-warning für Schema-Konflikte
-        console.warn(
-          `[kumiko] extensionSectionComponent "${key}" defined by multiple clientFeatures — last definition (from "${f.name}") wins.`,
-        );
-      }
-      extensionSectionComponents[key] = value;
-    }
-  }
+  // Column-renderer map, same last-wins semantics as customScreens —
+  // duplicate keys across features are rarely intentional, so a
+  // collision logs once instead of silently overriding a library's
+  // renderer.
+  const columnRenderers = mergeByKey(clientFeatures, (f) => f.columnRenderers, "columnRenderer");
+  // Extension-section components — same last-wins + warn semantics as
+  // columnRenderers. Mounted on ExtensionSectionsProvider; RenderEdit
+  // resolves the component from the section's `__component` marker.
+  const extensionSectionComponents = mergeByKey(
+    clientFeatures,
+    (f) => f.extensionSectionComponents,
+    "extensionSectionComponent",
+  );
 
   const contentEditors = mergeContentEditors(clientFeatures);
 

package/src/app/tiptap-editor.tsx

@@ -68,6 +68,12 @@ export default function TiptapEditor({
   readOnly,
 }: ContentEditorProps): ReactNode {
   const t = useTranslation();
+  // ponytail: rich = StarterKit's schema (bold/italic/lists/headings/links).
+  // Anything the schema doesn't model — <table>, <div>/<span>, style attrs,
+  // <img>, classes — is dropped on first parse (setContent below, and the
+  // initial `content: value` here). Upgrade if that ceiling is hit: add the
+  // matching tiptap extensions, or a raw-HTML mode for markup StarterKit
+  // can't represent.
   const editor = useEditor({
     extensions: [StarterKit],
     content: value,
@@ -79,6 +85,10 @@ export default function TiptapEditor({
     // Same id the textarea fallback uses — the Field wrapping the editor
     // (TextBlockEditor) associates its label via this id; the editor
     // contract has no `id` prop of its own, see content-editors.tsx.
+    // ponytail: fixed id, not a prop — two simultaneously mounted rich
+    // editors (or a rich + a plain editor on one screen) collide on this
+    // DOM id, same ceiling plain-content-editor.tsx documents. Upgrade:
+    // thread `id` through ContentEditorProps as an optional override.
     editorProps: { attributes: { id: CONTENT_EDITOR_ELEMENT_ID } },
     onUpdate: ({ editor: e }) => onChange(e.getHTML()),
   });

package/src/layout/__tests__/workspace-switcher.test.tsx

@@ -55,6 +55,46 @@ describe("WorkspaceSwitcher — Render", () => {
     expect(screen.getByTestId("workspace-tab-b").getAttribute("aria-checked")).toBe("true");
   });
 
+  test("entries carry role=menuitemradio (exclusive choice), not menuitemcheckbox", async () => {
+    const user = userEvent.setup();
+    renderWithSidebar(
+      <WorkspaceSwitcher
+        workspaces={[ws("a", "Alpha"), ws("b", "Beta")]}
+        activeId="a"
+        onSelect={() => {}}
+      />,
+    );
+    await user.click(screen.getByTestId("workspace-switcher-trigger"));
+    expect(screen.getByTestId("workspace-tab-a").getAttribute("role")).toBe("menuitemradio");
+    expect(screen.getByTestId("workspace-tab-b").getAttribute("role")).toBe("menuitemradio");
+  });
+
+  test("trigger has an accessible name beyond the active workspace label", () => {
+    renderWithSidebar(
+      <WorkspaceSwitcher
+        workspaces={[ws("a", "Alpha"), ws("b", "Beta")]}
+        activeId="a"
+        onSelect={() => {}}
+      />,
+    );
+    expect(
+      screen.getByTestId("workspace-switcher-trigger").getAttribute("aria-label"),
+    ).toBeTruthy();
+  });
+
+  test("activeId zeigt auf keinen sichtbaren Workspace → Trigger zeigt Fallback-Label statt leerem span (fw#1816)", () => {
+    renderWithSidebar(
+      <WorkspaceSwitcher
+        workspaces={[ws("a", "Alpha"), ws("b", "Beta")]}
+        activeId="stale-id-not-in-list"
+        onSelect={() => {}}
+        testId="sw"
+      />,
+    );
+    expect(screen.getByTestId("sw").textContent).not.toBe("");
+    expect(screen.getByText("Select workspace")).toBeTruthy();
+  });
+
   test("Click auf einen Eintrag ruft onSelect mit der Workspace-id", async () => {
     const user = userEvent.setup();
     const onSelect = mock((_id: string) => {});

package/src/layout/sidebar-panel.tsx

@@ -22,6 +22,7 @@ import {
   useState,
 } from "react";
 import { createPortal } from "react-dom";
+import { clamp } from "../lib/clamp";
 import { cn } from "../lib/cn";
 
 type SlotElement = HTMLElement | null;
@@ -57,10 +58,6 @@ const DEFAULT_WIDTH = 340;
 const DEFAULT_MIN = 260;
 const DEFAULT_MAX = 640;
 
-function clamp(value: number, min: number, max: number): number {
-  return Math.min(Math.max(value, min), max);
-}
-
 function readStoredWidth(key: string | undefined): number | null {
   if (key === undefined || typeof window === "undefined") return null;
   const raw = window.localStorage.getItem(key);

package/src/layout/workspace-switcher.tsx

@@ -20,8 +20,9 @@ import { ChevronsUpDown } from "lucide-react";
 import type { ReactNode } from "react";
 import {
   DropdownMenu,
-  DropdownMenuCheckboxItem,
   DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
   DropdownMenuTrigger,
 } from "../primitives/dropdown-menu";
 import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar";
@@ -57,22 +58,28 @@ export function WorkspaceSwitcher({
       <SidebarMenuItem>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <SidebarMenuButton data-testid="workspace-switcher-trigger">
-              <span className="truncate">{active !== undefined ? labelOf(active) : ""}</span>
+            <SidebarMenuButton
+              data-testid="workspace-switcher-trigger"
+              aria-label={t("kumiko.workspace.switch")}
+            >
+              <span className="truncate">
+                {active !== undefined ? labelOf(active) : t("kumiko.workspace.select")}
+              </span>
               <ChevronsUpDown className="ml-auto" />
             </SidebarMenuButton>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="start" className="min-w-[10rem]">
-            {workspaces.map((ws) => (
-              <DropdownMenuCheckboxItem
-                key={ws.definition.id}
-                checked={ws.definition.id === activeId}
-                data-testid={`workspace-tab-${ws.definition.id}`}
-                onSelect={() => onSelect(ws.definition.id)}
-              >
-                <span className="truncate">{labelOf(ws)}</span>
-              </DropdownMenuCheckboxItem>
-            ))}
+            <DropdownMenuRadioGroup value={activeId} onValueChange={onSelect}>
+              {workspaces.map((ws) => (
+                <DropdownMenuRadioItem
+                  key={ws.definition.id}
+                  value={ws.definition.id}
+                  data-testid={`workspace-tab-${ws.definition.id}`}
+                >
+                  <span className="truncate">{labelOf(ws)}</span>
+                </DropdownMenuRadioItem>
+              ))}
+            </DropdownMenuRadioGroup>
           </DropdownMenuContent>
         </DropdownMenu>
       </SidebarMenuItem>

package/src/lib/__tests__/resize-image.test.ts

@@ -0,0 +1,152 @@
+import { describe, expect, mock, test } from "bun:test";
+import { resizeImageBeforeUpload } from "../resize-image";
+
+describe("resizeImageBeforeUpload", () => {
+  test("lässt Nicht-Bilder unverändert", async () => {
+    const file = new File(["hi"], "report.pdf", { type: "application/pdf" });
+    const result = await resizeImageBeforeUpload(file);
+    expect(result).toBe(file);
+  });
+
+  test("fehlt OffscreenCanvas, bleibt das Bild unverändert", async () => {
+    // @ts-expect-error simulate a browser without OffscreenCanvas support
+    globalThis.OffscreenCanvas = undefined;
+    const file = new File(["hi"], "photo.jpg", { type: "image/jpeg" });
+    const result = await resizeImageBeforeUpload(file);
+    expect(result).toBe(file);
+  });
+
+  test("lässt SVGs unverändert (Vektor würde beim Re-Encode zerstört)", async () => {
+    const file = new File(["<svg/>"], "logo.svg", { type: "image/svg+xml" });
+    const result = await resizeImageBeforeUpload(file);
+    expect(result).toBe(file);
+  });
+
+  test("lässt GIFs unverändert (Animation würde auf ein Frame kollabieren)", async () => {
+    const file = new File(["gif"], "anim.gif", { type: "image/gif" });
+    const result = await resizeImageBeforeUpload(file);
+    expect(result).toBe(file);
+  });
+
+  test("skaliert auf maxEdge herunter und behält das Seitenverhältnis", async () => {
+    const bitmap = { close: mock(() => {}), height: 2000, width: 4000 };
+    let capturedWidth = 0;
+    let capturedHeight = 0;
+    class FakeOffscreenCanvas {
+      constructor(w: number, h: number) {
+        capturedWidth = w;
+        capturedHeight = h;
+      }
+      getContext() {
+        return { drawImage: mock(() => {}) };
+      }
+      convertToBlob() {
+        return Promise.resolve(new Blob(["x"], { type: "image/jpeg" }));
+      }
+    }
+    // @ts-expect-error test stub for a browser-only API missing in jsdom
+    globalThis.OffscreenCanvas = FakeOffscreenCanvas;
+    globalThis.createImageBitmap = mock(async () => bitmap);
+
+    try {
+      const file = new File(["x"], "photo.jpg", { type: "image/jpeg" });
+      const result = await resizeImageBeforeUpload(file, 2560);
+      expect(capturedWidth).toBe(2560);
+      expect(capturedHeight).toBe(1280);
+      expect(result.name).toBe("photo.jpg");
+      expect(result.type).toBe("image/jpeg");
+    } finally {
+      // @ts-expect-error restore missing-API baseline
+      globalThis.OffscreenCanvas = undefined;
+      // @ts-expect-error restore missing-API baseline
+      globalThis.createImageBitmap = undefined;
+    }
+  });
+
+  test("konvertiert nicht-erhaltbare Formate zu jpeg und passt die Extension an", async () => {
+    class FakeOffscreenCanvas {
+      getContext() {
+        return { drawImage: mock(() => {}) };
+      }
+      convertToBlob(opts: { type: string }) {
+        return Promise.resolve(new Blob(["x"], { type: opts.type }));
+      }
+    }
+    // @ts-expect-error test stub for a browser-only API missing in jsdom
+    globalThis.OffscreenCanvas = FakeOffscreenCanvas;
+    globalThis.createImageBitmap = mock(async () => ({
+      close: mock(() => {}),
+      height: 100,
+      width: 100,
+    }));
+
+    try {
+      const file = new File(["x"], "photo.heic", { type: "image/heic" });
+      const result = await resizeImageBeforeUpload(file);
+      expect(result.name).toBe("photo.jpg");
+      expect(result.type).toBe("image/jpeg");
+    } finally {
+      // @ts-expect-error restore missing-API baseline
+      globalThis.OffscreenCanvas = undefined;
+      // @ts-expect-error restore missing-API baseline
+      globalThis.createImageBitmap = undefined;
+    }
+  });
+
+  test("benennt nach dem tatsächlich erzeugten Blob-Typ, nicht dem angeforderten", async () => {
+    // A browser without webp encoding support silently falls back to png
+    // (spec behavior of convertToBlob) — naming must follow the blob, or a
+    // ".webp" file ends up holding png bytes with a matching-looking mimeType.
+    class FakeOffscreenCanvas {
+      getContext() {
+        return { drawImage: mock(() => {}) };
+      }
+      convertToBlob() {
+        return Promise.resolve(new Blob(["x"], { type: "image/png" }));
+      }
+    }
+    // @ts-expect-error test stub for a browser-only API missing in jsdom
+    globalThis.OffscreenCanvas = FakeOffscreenCanvas;
+    globalThis.createImageBitmap = mock(async () => ({
+      close: mock(() => {}),
+      height: 100,
+      width: 100,
+    }));
+
+    try {
+      const file = new File(["x"], "photo.webp", { type: "image/webp" });
+      const result = await resizeImageBeforeUpload(file);
+      expect(result.name).toBe("photo.png");
+      expect(result.type).toBe("image/png");
+    } finally {
+      // @ts-expect-error restore missing-API baseline
+      globalThis.OffscreenCanvas = undefined;
+      // @ts-expect-error restore missing-API baseline
+      globalThis.createImageBitmap = undefined;
+    }
+  });
+
+  test("fällt bei Decode-Fehlern auf die Originaldatei zurück", async () => {
+    class FakeOffscreenCanvas {
+      getContext() {
+        return { drawImage: mock(() => {}) };
+      }
+    }
+    // @ts-expect-error test stub for a browser-only API missing in jsdom
+    globalThis.OffscreenCanvas = FakeOffscreenCanvas;
+    globalThis.createImageBitmap = mock(async () => {
+      throw new Error("unsupported format");
+    });
+
+    try {
+      const file = new File(["x"], "photo.heic", { type: "image/heic" });
+      const result = await resizeImageBeforeUpload(file);
+      expect(result).toBe(file);
+    } finally {
+      // @ts-expect-error restore missing-API baseline
+      globalThis.OffscreenCanvas = undefined;
+      // @ts-expect-error restore missing-API baseline
+      globalThis.createImageBitmap = undefined;
+    }
+  });
+});

package/src/lib/clamp.ts

@@ -0,0 +1,3 @@
+export function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}

package/src/lib/resize-image.ts

@@ -0,0 +1,61 @@
+const DEFAULT_MAX_EDGE = 2560;
+
+// Raster formats a canvas can losslessly re-encode as themselves; anything
+// else (heic, bmp, tiff, ...) falls back to jpeg. svg/gif are excluded
+// upstream (vector/animation would be destroyed by a canvas re-encode).
+const PRESERVED_TYPES = new Set(["image/png", "image/webp"]);
+const OUTPUT_EXTENSIONS: Record<string, string> = {
+  "image/jpeg": "jpg",
+  "image/png": "png",
+  "image/webp": "webp",
+};
+
+function pickOutputType(inputType: string): string {
+  return PRESERVED_TYPES.has(inputType) ? inputType : "image/jpeg";
+}
+
+// The server validates the upload's extension against its mimeType
+// (mime_mismatch), so a re-encode that changes type must rename the file too.
+function withMatchingExtension(fileName: string, outputType: string): string {
+  const ext = OUTPUT_EXTENSIONS[outputType] ?? "jpg";
+  const dot = fileName.lastIndexOf(".");
+  const base = dot > 0 ? fileName.slice(0, dot) : fileName;
+  return `${base}.${ext}`;
+}
+
+// Downscales images before upload to a reasonable edge length (bandwidth)
+// and drops EXIF/GPS as a side effect (canvas re-encode carries no
+// metadata). Missing OffscreenCanvas/createImageBitmap (older browser), or a
+// decode failure, leaves the file unchanged — no hard error before upload.
+export async function resizeImageBeforeUpload(
+  file: File,
+  maxEdge = DEFAULT_MAX_EDGE,
+): Promise<File> {
+  if (!file.type.startsWith("image/")) return file;
+  if (file.type === "image/svg+xml" || file.type === "image/gif") return file;
+  if (typeof OffscreenCanvas === "undefined" || typeof createImageBitmap !== "function") {
+    return file;
+  }
+  try {
+    const bitmap = await createImageBitmap(file, { imageOrientation: "from-image" });
+    const scale = Math.min(1, maxEdge / Math.max(bitmap.width, bitmap.height));
+    const width = Math.round(bitmap.width * scale);
+    const height = Math.round(bitmap.height * scale);
+    const canvas = new OffscreenCanvas(width, height);
+    const ctx = canvas.getContext("2d");
+    if (ctx === null) return file;
+    ctx.drawImage(bitmap, 0, 0, width, height);
+    bitmap.close();
+    const blob = await canvas.convertToBlob({ type: pickOutputType(file.type), quality: 0.85 });
+    // Name off the blob's actual type, not the requested one — a browser
+    // without webp encoding support silently falls back to png, and naming
+    // by the request would then store a lie (extension/mimeType both "webp"
+    // over png bytes).
+    const actualType = blob.type || file.type;
+    const fileName =
+      actualType === file.type ? file.name : withMatchingExtension(file.name, actualType);
+    return new File([blob], fileName, { type: actualType });
+  } catch {
+    return file;
+  }
+}

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

@@ -183,13 +183,25 @@ describe("defaultCellRender", () => {
     expect(result).not.toMatch(/[.,]\d\d$/);
   });
 
-  test("money → rehydrated { amount major, amountMinor } uses amountMinor (not major×100 wrong)", () => {
-    // rehydrateMoney (fw#1830): amount is major units, amountMinor is cents.
-    // formatMoney expects cents — using amount would show 100× too small.
+  test("money → rehydrated { amount major, amountMinor } derives minor units from amount + currencyDecimals", () => {
+    // rehydrateMoney (fw#1830): amount is major units, amountMinor is a flat
+    // ×100 scale that disagrees with currencyDecimals for non-2-decimal
+    // currencies — defaultCellRender ignores amountMinor and derives minor
+    // units from `amount` instead (see index.tsx).
     const result = defaultCellRender({ amount: 119, currency: "EUR", amountMinor: 11900 }, "money");
     expect(result.replace(/[^0-9]/g, "")).toBe("11900");
   });
 
+  test("money → zero-decimal currency (JPY) ignores amountMinor's mismatched flat scale", () => {
+    const result = defaultCellRender({ amount: 500, currency: "JPY", amountMinor: 50000 }, "money");
+    expect(result.replace(/[^0-9]/g, "")).toBe("500");
+  });
+
+  test("money → three-decimal currency (BHD) ignores amountMinor's mismatched flat scale", () => {
+    const result = defaultCellRender({ amount: 1.5, currency: "BHD", amountMinor: 150 }, "money");
+    expect(result.replace(/[^0-9]/g, "")).toBe("1500");
+  });
+
   test("money → unerwarteter Value-Shape fällt auf String zurück", () => {
     expect(defaultCellRender(45000, "money")).toBe("45000");
   });

package/src/primitives/__tests__/date-field.test.tsx

@@ -0,0 +1,37 @@
+// DateField rendering tests — happy-dom + @testing-library/react. Pins
+// that the input's `placeholder` actually comes from `t()` + resolvedLocale
+// (date-parse.test.ts only covers the pure formatDatePlaceholder logic; a
+// wrong/renamed i18n key or a missing LocaleProvider fallback would stay
+// green there).
+
+import { describe, expect, test } from "bun:test";
+import {
+  createStaticLocaleResolver,
+  kumikoDefaultTranslations,
+  LocaleProvider,
+} from "@cosmicdrift/kumiko-renderer";
+import { render, screen } from "@testing-library/react";
+import { DateField } from "../date-field";
+
+function renderWithLocale(locale: string) {
+  return render(
+    <LocaleProvider
+      resolver={createStaticLocaleResolver({ locale })}
+      fallbackBundles={[kumikoDefaultTranslations]}
+    >
+      <DateField id="date" name="date" value="" onChange={() => {}} locale={locale} />
+    </LocaleProvider>,
+  );
+}
+
+describe("DateField placeholder", () => {
+  test("de-DE → placeholder built from t() keys, not a hardcoded pattern", () => {
+    renderWithLocale("de-DE");
+    expect(screen.getByRole("textbox").getAttribute("placeholder")).toBe("TT.MM.JJJJ");
+  });
+
+  test("en-US → placeholder built from t() keys, not a hardcoded pattern", () => {
+    renderWithLocale("en-US");
+    expect(screen.getByRole("textbox").getAttribute("placeholder")).toBe("MM/DD/YYYY");
+  });
+});