@cosmicdrift/kumiko-renderer-web 0.194.0 → 0.195.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.194.0",
+  "version": "0.195.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.194.0",
-    "@cosmicdrift/kumiko-headless": "0.194.0",
-    "@cosmicdrift/kumiko-renderer": "0.194.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.195.0",
+    "@cosmicdrift/kumiko-headless": "0.195.0",
+    "@cosmicdrift/kumiko-renderer": "0.195.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",

package/src/__tests__/create-app.test.tsx

@@ -327,7 +327,15 @@ describe("createKumikoApp", () => {
     }
     function EditorProbe(): ReactNode {
       const Editor = useContentEditor("rich");
-      return <Editor value="hello" onChange={() => {}} variables={[]} readOnly={false} />;
+      return (
+        <Editor
+          id="ca-rich-editor-probe"
+          value="hello"
+          onChange={() => {}}
+          variables={[]}
+          readOnly={false}
+        />
+      );
     }
     const probeSchema: FeatureSchema = {
       featureName: "tasks",

package/src/__tests__/entity-edit-redirect.test.tsx

@@ -74,6 +74,38 @@ describe("entityEdit redirect (#1942)", () => {
     await waitFor(() => expect(navigated).toEqual([{ screenId: "product-detail" }]));
   });
 
+  test("create: successful save with redirect set carries the newly created entityId along (#1945)", async () => {
+    const navigated: NavTarget[] = [];
+    const dispatcher = createMockDispatcher({
+      write: (async () => ({
+        isSuccess: true,
+        data: { id: "new-99" },
+      })) as unknown as Dispatcher["write"],
+    });
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <NavProvider
+          value={{
+            route: { screenId: "shop:screen:product-edit" },
+            navigate: (target) => navigated.push(target),
+            replace: () => {},
+            hrefFor: () => "",
+            searchParams: {},
+            setSearchParams: () => {},
+          }}
+        >
+          <KumikoScreen schema={buildSchema("product-detail")} qn="shop:screen:product-edit" />
+        </NavProvider>
+      </DispatcherProvider>,
+    );
+
+    fillNameAndSubmit();
+
+    await waitFor(() =>
+      expect(navigated).toEqual([{ screenId: "product-detail", entityId: "new-99" }]),
+    );
+  });
+
   test("create: no redirect set falls back to the entity's list screen", async () => {
     const navigated: NavTarget[] = [];
     render(

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

@@ -1517,6 +1517,59 @@ describe("RenderEdit wizard draft", () => {
     expect(titleInputAgain.value).toBe("Acme");
   });
 
+  // fw#1929: bare crypto.randomUUID() breaks in non-secure contexts and
+  // React Native/Hermes without a polyfill. With it deleted, minting a
+  // draftId must still work through the mintDraftId() fallback instead of
+  // throwing.
+  test("draft id still mints when crypto.randomUUID is unavailable (fw#1929)", async () => {
+    const cryptoRef = (globalThis as { crypto?: { randomUUID?: () => string } }).crypto;
+    const original = cryptoRef?.randomUUID;
+    // `randomUUID` lives on crypto's prototype (non-configurable) — `delete`
+    // is a silent no-op there, so shadow it with an own `undefined` instead.
+    if (cryptoRef) cryptoRef.randomUUID = undefined;
+
+    try {
+      const draftKeys: string[] = [];
+      const dispatcher = createMockDispatcher({
+        query: (async () => ({ isSuccess: true, data: {} })) as Dispatcher["query"],
+        write: (async (type: string, payload: unknown) => {
+          if (type === "form-draft:write:save") {
+            draftKeys.push((payload as { draftKey: string }).draftKey);
+          }
+          return { isSuccess: true, data: { id: "1" } };
+        }) as Dispatcher["write"],
+      });
+
+      render(
+        <DispatcherProvider dispatcher={dispatcher}>
+          <DraftStorageProvider value={createFakeDraftStorage()}>
+            <RenderEdit<TestValues>
+              screen={makeDraftWizardScreen(true)}
+              entity={orderEntity}
+              featureName="orders"
+              initial={{ title: "", count: 0 }}
+              writeCommand="order:create"
+            />
+          </DraftStorageProvider>
+        </DispatcherProvider>,
+      );
+
+      fireEvent.change(
+        screen.getByTestId("field-title").querySelector("input") as HTMLInputElement,
+        { target: { value: "Acme" } },
+      );
+      await act(async () => {
+        fireEvent.submit(screen.getByTestId("render-edit-form"));
+        await Promise.resolve();
+      });
+
+      expect(draftKeys.length).toBeGreaterThan(0);
+      expect(draftKeys[0]).toContain(":new:draft-");
+    } finally {
+      if (cryptoRef && original) cryptoRef.randomUUID = original;
+    }
+  });
+
   test("a successful submit discards the draft", async () => {
     const { dispatcher, store, calls } = makeDraftDispatcher();
 

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

@@ -1,4 +1,5 @@
 import { describe, expect, test } from "bun:test";
+import { CONTENT_EDITOR_ELEMENT_ID } from "@cosmicdrift/kumiko-renderer";
 import { type ReactNode, useState } from "react";
 import { fireEvent, render, screen } from "../../__tests__/test-utils";
 import { PlainContentEditor } from "../plain-content-editor";
@@ -6,21 +7,41 @@ import { PlainContentEditor } from "../plain-content-editor";
 function Controlled({ initial }: { readonly initial: string }): ReactNode {
   const [value, setValue] = useState(initial);
   return (
-    <PlainContentEditor value={value} onChange={setValue} variables={["name"]} readOnly={false} />
+    <PlainContentEditor
+      id={CONTENT_EDITOR_ELEMENT_ID}
+      value={value}
+      onChange={setValue}
+      variables={["name"]}
+      readOnly={false}
+    />
   );
 }
 
 describe("PlainContentEditor", () => {
   test("renders the textarea plus one chip per variable", () => {
     render(
-      <PlainContentEditor value="" onChange={() => {}} variables={["name"]} readOnly={false} />,
+      <PlainContentEditor
+        id={CONTENT_EDITOR_ELEMENT_ID}
+        value=""
+        onChange={() => {}}
+        variables={["name"]}
+        readOnly={false}
+      />,
     );
     expect(screen.getByRole("textbox")).toBeTruthy();
     expect(screen.getByText("{{name}}")).toBeTruthy();
   });
 
   test("no variables → no chips", () => {
-    render(<PlainContentEditor value="" onChange={() => {}} variables={[]} readOnly={false} />);
+    render(
+      <PlainContentEditor
+        id={CONTENT_EDITOR_ELEMENT_ID}
+        value=""
+        onChange={() => {}}
+        variables={[]}
+        readOnly={false}
+      />,
+    );
     expect(screen.queryAllByRole("button")).toHaveLength(0);
   });
 

package/src/app/__tests__/rich-content-editor.test.tsx

@@ -7,6 +7,7 @@ describe("RichContentEditor", () => {
   test("falls back to the plain textarea while the tiptap chunk loads, then swaps in the editor", async () => {
     render(
       <RichContentEditor
+        id={CONTENT_EDITOR_ELEMENT_ID}
         value="<p>hello</p>"
         onChange={() => {}}
         variables={[]}

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

@@ -6,7 +6,15 @@ import TiptapEditor from "../tiptap-editor";
 
 function Controlled({ initial }: { readonly initial: string }): ReactNode {
   const [value, setValue] = useState(initial);
-  return <TiptapEditor value={value} onChange={setValue} variables={["name"]} readOnly={false} />;
+  return (
+    <TiptapEditor
+      id={CONTENT_EDITOR_ELEMENT_ID}
+      value={value}
+      onChange={setValue}
+      variables={["name"]}
+      readOnly={false}
+    />
+  );
 }
 
 function ReadOnlyToggle({ initial }: { readonly initial: string }): ReactNode {
@@ -16,7 +24,13 @@ function ReadOnlyToggle({ initial }: { readonly initial: string }): ReactNode {
       <button type="button" onClick={() => setReadOnly((r) => !r)}>
         toggle readOnly
       </button>
-      <TiptapEditor value={initial} onChange={() => {}} variables={[]} readOnly={readOnly} />
+      <TiptapEditor
+        id={CONTENT_EDITOR_ELEMENT_ID}
+        value={initial}
+        onChange={() => {}}
+        variables={[]}
+        readOnly={readOnly}
+      />
     </div>
   );
 }
@@ -32,7 +46,13 @@ function LateValue({ loaded }: { readonly loaded: string }): ReactNode {
       <button type="button" onClick={() => setValue(loaded)}>
         load
       </button>
-      <TiptapEditor value={value} onChange={setValue} variables={[]} readOnly={false} />
+      <TiptapEditor
+        id={CONTENT_EDITOR_ELEMENT_ID}
+        value={value}
+        onChange={setValue}
+        variables={[]}
+        readOnly={false}
+      />
     </div>
   );
 }
@@ -40,22 +60,40 @@ function LateValue({ loaded }: { readonly loaded: string }): ReactNode {
 describe("TiptapEditor — jsdom smoke", () => {
   test("mounts a contenteditable surface for the given HTML", async () => {
     render(
-      <TiptapEditor value="<p>hello</p>" onChange={() => {}} variables={[]} readOnly={false} />,
+      <TiptapEditor
+        id={CONTENT_EDITOR_ELEMENT_ID}
+        value="<p>hello</p>"
+        onChange={() => {}}
+        variables={[]}
+        readOnly={false}
+      />,
     );
     const editable = await screen.findByText("hello");
     expect(editable.closest('[contenteditable="true"]')).not.toBeNull();
   });
 
-  test("the contenteditable surface carries CONTENT_EDITOR_ELEMENT_ID so the wrapping Field's label stays associated", async () => {
+  test("the editor's id prop lands on the contenteditable surface so the wrapping Field's label stays associated", async () => {
     render(
-      <TiptapEditor value="<p>hello</p>" onChange={() => {}} variables={[]} readOnly={false} />,
+      <TiptapEditor
+        id={CONTENT_EDITOR_ELEMENT_ID}
+        value="<p>hello</p>"
+        onChange={() => {}}
+        variables={[]}
+        readOnly={false}
+      />,
     );
     expect(document.getElementById(CONTENT_EDITOR_ELEMENT_ID)).not.toBeNull();
   });
 
   test("no variables → no chip bar", async () => {
     render(
-      <TiptapEditor value="<p>hello</p>" onChange={() => {}} variables={[]} readOnly={false} />,
+      <TiptapEditor
+        id={CONTENT_EDITOR_ELEMENT_ID}
+        value="<p>hello</p>"
+        onChange={() => {}}
+        variables={[]}
+        readOnly={false}
+      />,
     );
     await screen.findByText("hello");
     expect(screen.queryAllByRole("button", { name: "Bold" })).toHaveLength(1);
@@ -64,7 +102,13 @@ describe("TiptapEditor — jsdom smoke", () => {
 
   test("every toolbar action resolves by its accessible name", async () => {
     render(
-      <TiptapEditor value="<p>hello</p>" onChange={() => {}} variables={[]} readOnly={false} />,
+      <TiptapEditor
+        id={CONTENT_EDITOR_ELEMENT_ID}
+        value="<p>hello</p>"
+        onChange={() => {}}
+        variables={[]}
+        readOnly={false}
+      />,
     );
     await screen.findByText("hello");
     for (const name of [
@@ -131,6 +175,7 @@ describe("TiptapEditor — jsdom smoke", () => {
     const values: string[] = [];
     render(
       <TiptapEditor
+        id={CONTENT_EDITOR_ELEMENT_ID}
         value="<table><tbody><tr><td>cell</td></tr></tbody></table><p>hello</p>"
         onChange={(html) => values.push(html)}
         variables={[]}

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

@@ -5,14 +5,13 @@
 // variable-chip bar underneath. A chip click inserts `{{name}}` at the caret
 // instead of appending to the end.
 //
-// ponytail: looks the textarea up by CONTENT_EDITOR_ELEMENT_ID rather than a
-// ref threaded through the primitives Input contract — that contract is
-// cross-platform (RN has no DOM node), this file is `@runtime client`-only
-// and CONTENT_EDITOR_ELEMENT_ID exists exactly as this DOM hook. Upgrade to a
-// forwarded ref if a screen ever needs two plain editors mounted at once.
+// ponytail: looks the textarea up via document.getElementById(id) rather
+// than a ref threaded through the primitives Input contract — that contract
+// is cross-platform (RN has no DOM node), this file is `@runtime client`-
+// only. `id` is per-instance (caller passes a stable unique id via
+// ContentEditorProps.id), so two plain editors mounted at once don't collide.
 
 import {
-  CONTENT_EDITOR_ELEMENT_ID,
   type ContentEditorProps,
   TextareaContentEditor,
   VariableChips,
@@ -21,6 +20,7 @@ import type { ReactNode } from "react";
 import { useEffect, useState } from "react";
 
 export function PlainContentEditor({
+  id,
   value,
   onChange,
   variables,
@@ -31,7 +31,7 @@ export function PlainContentEditor({
   // biome-ignore lint/correctness/useExhaustiveDependencies: keyed on value only — must fire once per committed insert, not on every caret write
   useEffect(() => {
     if (caret === null) return;
-    const el = document.getElementById(CONTENT_EDITOR_ELEMENT_ID);
+    const el = document.getElementById(id);
     if (el instanceof HTMLTextAreaElement) {
       el.focus();
       el.setSelectionRange(caret, caret);
@@ -40,7 +40,7 @@ export function PlainContentEditor({
   }, [value]);
 
   const insertAtCaret = (name: string): void => {
-    const el = document.getElementById(CONTENT_EDITOR_ELEMENT_ID);
+    const el = document.getElementById(id);
     const placeholder = `{{${name}}}`;
     if (!(el instanceof HTMLTextAreaElement)) {
       onChange(value + placeholder);
@@ -55,6 +55,7 @@ export function PlainContentEditor({
   return (
     <div>
       <TextareaContentEditor
+        id={id}
         value={value}
         onChange={onChange}
         variables={variables}

package/src/app/tiptap-editor.tsx

@@ -7,14 +7,13 @@
 // link button, so no URL-prompt UI to build or test.
 
 import {
-  CONTENT_EDITOR_ELEMENT_ID,
   type ContentEditorProps,
   TextareaContentEditor,
   usePrimitives,
   useTranslation,
   VariableChips,
 } from "@cosmicdrift/kumiko-renderer";
-import { EditorContent, useEditor } from "@tiptap/react";
+import { EditorContent, useEditor, useEditorState } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import {
   Bold as BoldIcon,
@@ -62,6 +61,7 @@ function Toolbar({
 }
 
 export default function TiptapEditor({
+  id,
   value,
   onChange,
   variables,
@@ -82,17 +82,34 @@ export default function TiptapEditor({
     // this component before committing it; immediate render would create
     // an editor instance during that throwaway pass.
     immediatelyRender: false,
-    // 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 } },
+    // Caller-supplied id — the Field wrapping the editor (TextBlockEditor)
+    // associates its label via this id, see ContentEditorProps.id in
+    // content-editors.tsx.
+    editorProps: { attributes: { id } },
     onUpdate: ({ editor: e }) => onChange(e.getHTML()),
   });
 
+  // `useEditor` alone leaves `editor.isActive(...)` reads in the render body
+  // frozen on the last prop-driven render — @tiptap/react v3 defaults
+  // `shouldRerenderOnTransaction` to false, so a selection-only change (e.g.
+  // moving the cursor into bold text without typing) never triggers a
+  // re-render on its own. `useEditorState` subscribes to transactions itself
+  // and only re-renders when the selected slice of state actually changes.
+  const activeState = useEditorState({
+    editor,
+    selector: ({ editor: e }) =>
+      e === null
+        ? null
+        : {
+            bold: e.isActive("bold"),
+            italic: e.isActive("italic"),
+            heading1: e.isActive("heading", { level: 1 }),
+            heading2: e.isActive("heading", { level: 2 }),
+            bulletList: e.isActive("bulletList"),
+            orderedList: e.isActive("orderedList"),
+          },
+  });
+
   // TextBlockEditor loads the entry's content asynchronously (by-slug query
   // resolves after mount), so `value` arrives after useEditor already read
   // its initial (empty) content once. Sync it in — guarded against
@@ -110,6 +127,7 @@ export default function TiptapEditor({
   if (!editor)
     return (
       <TextareaContentEditor
+        id={id}
         value={value}
         onChange={onChange}
         variables={variables}
@@ -121,37 +139,37 @@ export default function TiptapEditor({
     {
       label: t("kumiko.contentEditor.bold"),
       icon: BoldIcon,
-      isActive: editor.isActive("bold"),
+      isActive: activeState?.bold ?? false,
       onClick: () => editor.chain().focus().toggleBold().run(),
     },
     {
       label: t("kumiko.contentEditor.italic"),
       icon: ItalicIcon,
-      isActive: editor.isActive("italic"),
+      isActive: activeState?.italic ?? false,
       onClick: () => editor.chain().focus().toggleItalic().run(),
     },
     {
       label: t("kumiko.contentEditor.heading1"),
       icon: Heading1,
-      isActive: editor.isActive("heading", { level: 1 }),
+      isActive: activeState?.heading1 ?? false,
       onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
     },
     {
       label: t("kumiko.contentEditor.heading2"),
       icon: Heading2,
-      isActive: editor.isActive("heading", { level: 2 }),
+      isActive: activeState?.heading2 ?? false,
       onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
     },
     {
       label: t("kumiko.contentEditor.bulletList"),
       icon: List,
-      isActive: editor.isActive("bulletList"),
+      isActive: activeState?.bulletList ?? false,
       onClick: () => editor.chain().focus().toggleBulletList().run(),
     },
     {
       label: t("kumiko.contentEditor.orderedList"),
       icon: ListOrdered,
-      isActive: editor.isActive("orderedList"),
+      isActive: activeState?.orderedList ?? false,
       onClick: () => editor.chain().focus().toggleOrderedList().run(),
     },
   ];

package/src/index.ts

@@ -153,6 +153,7 @@ export {
   DropdownMenuTrigger,
 } from "./primitives/dropdown-menu";
 export { PageSection, Stack } from "./primitives/layout";
+export { formatMoney } from "./primitives/money-input";
 export type { ToastOptions, ToastProviderProps, ToastVariant } from "./primitives/toast";
 export { ToastProvider, useToast } from "./primitives/toast";
 export type { CreateEventSourceLiveEventsOptions } from "./sse/live-events";

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

@@ -6,14 +6,14 @@
 // callback. Radix opens on pointerdown → userEvent instead of
 // fireEvent.click, same as language-switcher.test.tsx.
 
-import { describe, expect, mock, test } from "bun:test";
+import { describe, expect, mock, spyOn, test } from "bun:test";
 import {
   createStaticLocaleResolver,
   LocaleProvider,
   type WorkspaceSchema,
 } from "@cosmicdrift/kumiko-renderer";
 import userEvent from "@testing-library/user-event";
-import { renderWithSidebar, screen } from "../../__tests__/test-utils";
+import { render, renderWithSidebar, screen } from "../../__tests__/test-utils";
 import { WorkspaceSwitcher } from "../workspace-switcher";
 
 function ws(id: string, label = id): WorkspaceSchema {
@@ -95,6 +95,26 @@ describe("WorkspaceSwitcher — Render", () => {
     expect(screen.getByText("Select workspace")).toBeTruthy();
   });
 
+  test("rendering outside a SidebarProvider throws — the JSDoc requirement is a real crash, not just documentation (fw#1816)", () => {
+    // SidebarMenuButton calls useSidebar() internally; without a
+    // SidebarProvider ancestor that throws synchronously during render.
+    // Silence the expected console.error noise React logs alongside it.
+    const consoleError = spyOn(console, "error").mockImplementation(() => {});
+    try {
+      expect(() =>
+        render(
+          <WorkspaceSwitcher
+            workspaces={[ws("a", "Alpha"), ws("b", "Beta")]}
+            activeId="a"
+            onSelect={() => {}}
+          />,
+        ),
+      ).toThrow(/useSidebar must be used within a SidebarProvider/);
+    } finally {
+      consoleError.mockRestore();
+    }
+  });
+
   test("Click auf einen Eintrag ruft onSelect mit der Workspace-id", async () => {
     const user = userEvent.setup();
     const onSelect = mock((_id: string) => {});

package/src/layout/workspace-switcher.tsx

@@ -34,6 +34,12 @@ export type WorkspaceSwitcherProps = {
   readonly testId?: string;
 };
 
+/**
+ * Requires an ancestor `SidebarProvider` (see `../ui/sidebar`) — this
+ * component renders `SidebarMenuButton`, which calls `useSidebar()`
+ * internally and throws ("useSidebar must be used within a
+ * SidebarProvider.") when rendered outside one.
+ */
 export function WorkspaceSwitcher({
   workspaces,
   activeId,

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

@@ -49,7 +49,9 @@ describe("resizeImageBeforeUpload", () => {
     globalThis.createImageBitmap = mock(async () => bitmap);
 
     try {
-      const file = new File(["x"], "photo.jpg", { type: "image/jpeg" });
+      // Content sized well above the 1-byte re-encoded blob so the resize
+      // wins the size-guard and the assertions below observe its output.
+      const file = new File(["x".repeat(2000)], "photo.jpg", { type: "image/jpeg" });
       const result = await resizeImageBeforeUpload(file, 2560);
       expect(capturedWidth).toBe(2560);
       expect(capturedHeight).toBe(1280);
@@ -81,7 +83,9 @@ describe("resizeImageBeforeUpload", () => {
     }));
 
     try {
-      const file = new File(["x"], "photo.heic", { type: "image/heic" });
+      // Content sized well above the 1-byte re-encoded blob so the resize
+      // wins the size-guard and the assertions below observe its output.
+      const file = new File(["x".repeat(2000)], "photo.heic", { type: "image/heic" });
       const result = await resizeImageBeforeUpload(file);
       expect(result.name).toBe("photo.jpg");
       expect(result.type).toBe("image/jpeg");
@@ -114,7 +118,9 @@ describe("resizeImageBeforeUpload", () => {
     }));
 
     try {
-      const file = new File(["x"], "photo.webp", { type: "image/webp" });
+      // Content sized well above the 1-byte re-encoded blob so the resize
+      // wins the size-guard and the assertions below observe its output.
+      const file = new File(["x".repeat(2000)], "photo.webp", { type: "image/webp" });
       const result = await resizeImageBeforeUpload(file);
       expect(result.name).toBe("photo.png");
       expect(result.type).toBe("image/png");
@@ -126,6 +132,39 @@ describe("resizeImageBeforeUpload", () => {
     }
   });
 
+  test("belässt ein bereits optimiertes Bild unverändert, wenn der Re-Encode es vergrößern würde", async () => {
+    // A small in-spec PNG (e.g. palette-optimized) round-tripped through a
+    // canvas can come back as a bigger full-RGBA blob — the size guard must
+    // then keep serving the original bytes instead of the larger re-encode.
+    class FakeOffscreenCanvas {
+      getContext() {
+        return { drawImage: mock(() => {}) };
+      }
+      convertToBlob() {
+        return Promise.resolve(new Blob(["x".repeat(2000)], { 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.png", { type: "image/png" });
+      const result = await resizeImageBeforeUpload(file);
+      expect(result).toBe(file);
+      expect(result.size).toBeLessThanOrEqual(file.size);
+    } 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() {

package/src/lib/resize-image.ts

@@ -54,7 +54,12 @@ export async function resizeImageBeforeUpload(
     const actualType = blob.type || file.type;
     const fileName =
       actualType === file.type ? file.name : withMatchingExtension(file.name, actualType);
-    return new File([blob], fileName, { type: actualType });
+    const resized = new File([blob], fileName, { type: actualType });
+    // Only takes the re-encode if it actually shrank the file — a
+    // palette-optimized PNG or a small in-spec photo can come back larger
+    // after a full RGBA canvas round-trip. EXIF/GPS stripping is then
+    // best-effort: an original that's kept as-is keeps its metadata too.
+    return resized.size < file.size ? resized : file;
   } catch {
     return file;
   }

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

@@ -2,7 +2,7 @@
 // test interacts with the rendered DOM (click/type/paste) and asserts on
 // the outcome; none merely check that the component mounts.
 
-import { describe, expect, mock, test } from "bun:test";
+import { describe, expect, mock, spyOn, test } from "bun:test";
 import type { FieldIssue } from "@cosmicdrift/kumiko-headless";
 import type { EmbeddedListColumn, EmbeddedListInputProps } from "@cosmicdrift/kumiko-renderer";
 import {
@@ -11,7 +11,7 @@ import {
   LocaleProvider,
 } from "@cosmicdrift/kumiko-renderer";
 import { fireEvent, render, screen, within } from "@testing-library/react";
-import { type ReactElement, useState } from "react";
+import { act, type ReactElement, useState } from "react";
 import { EmbeddedListInput } from "../embedded-list-input";
 
 function setViewportWidth(width: number): void {
@@ -135,6 +135,47 @@ describe("EmbeddedListInput — desktop/mobile are mutually exclusive mounts (#1
       setViewportWidth(originalWidth);
     }
   });
+
+  test("mobile viewport at mount never creates the desktop table — no mount-then-discard flicker (fw#1868)", () => {
+    // The old useIsMobile hook only set its value in a useEffect, so the
+    // very first render always mounted the desktop table (isMobile=false)
+    // before an effect swapped in the mobile cards — even on a phone. Since
+    // effects flush synchronously inside render()'s act(), a plain post-
+    // render DOM assertion can't tell the two implementations apart (both
+    // end up correct); spying on document.createElement across the whole
+    // render call is the only way to prove a <table> was never built at all.
+    const originalWidth = window.innerWidth;
+    window.innerWidth = 500;
+    const createElementSpy = spyOn(document, "createElement");
+    try {
+      renderWithLocale(<EmbeddedListInput {...baseProps({ rows })} />);
+      expect(screen.getByTestId("lines-mobile")).toBeTruthy();
+      expect(screen.queryByTestId("lines-desktop")).toBeNull();
+      expect(createElementSpy.mock.calls.some(([tag]) => tag === "table")).toBe(false);
+    } finally {
+      window.innerWidth = originalWidth;
+      createElementSpy.mockRestore();
+    }
+  });
+
+  test("resizing past the breakpoint after mount swaps the table for the card layout", async () => {
+    const originalWidth = window.innerWidth;
+    try {
+      renderWithLocale(<EmbeddedListInput {...baseProps({ rows })} />);
+      expect(screen.getByTestId("lines-desktop")).toBeTruthy();
+
+      await act(async () => {
+        window.innerWidth = 500;
+        window.dispatchEvent(new Event("resize"));
+      });
+
+      expect(screen.queryByTestId("lines-desktop")).toBeNull();
+      expect(screen.getByTestId("lines-mobile")).toBeTruthy();
+      expect(document.querySelectorAll('[data-cell-id="lines-0-amount"]').length).toBe(1);
+    } finally {
+      window.innerWidth = originalWidth;
+    }
+  });
 });
 
 describe("EmbeddedListInput — row mutation callbacks", () => {

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

@@ -5,12 +5,13 @@
 // paste).
 //
 // Only one of the two layouts (table for md+, cards below md) is mounted
-// at a time, picked via useIsMobile — mounting both and toggling with
-// `hidden`/`md:hidden` left two live inputs per cell sharing one DOM id
-// (#1854). useIsMobile reports `false` for the first render regardless of
-// viewport, so the `hidden md:block` / `md:hidden` classes stay on the
-// wrapper divs too: on a phone that first (wrong) render is desktop but
-// CSS-hidden, not a visible flash of the wrong layout.
+// at a time, picked via useIsNarrowViewport — mounting both and toggling
+// with `hidden`/`md:hidden` left two live inputs per cell sharing one DOM
+// id (#1854). The `hidden md:block` / `md:hidden` classes stay on the
+// wrapper divs as a defensive fallback (e.g. SSR/no-JS, where
+// getServerSnapshot forces the desktop layout) even though
+// useIsNarrowViewport — unlike the vendored useIsMobile it replaced —
+// already reports the correct value on the very first client render.
 //
 // ponytail: crossing the mobile/desktop breakpoint unmounts the active
 // layout and mounts the other, so an in-progress cell draft (uncommitted
@@ -41,11 +42,11 @@ import { Button as UiButton } from "../ui/button";
 import { Checkbox } from "../ui/checkbox";
 import { Input as UiInput } from "../ui/input";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table";
-import { useIsMobile } from "../ui/use-mobile";
 import { ComboboxInput } from "./combobox";
 import { DateInput } from "./date-input";
 import { formatMoney, MoneyInput } from "./money-input";
 import { TimestampInput } from "./timestamp-input";
+import { useIsNarrowViewport } from "./use-narrow-viewport";
 
 // `input[type=hidden]` excluded — ComboboxInput renders one as a plain
 // name-carrier before its focusable trigger button.
@@ -383,7 +384,7 @@ export function EmbeddedListInput({
   // component always hardcoded.
   const effectiveCurrency = currency ?? "EUR";
   const resolvedLocale = useLocale().locale();
-  const isMobile = useIsMobile();
+  const isMobile = useIsNarrowViewport();
   const containerRef = useRef<HTMLDivElement>(null);
   const [pendingFocusCellId, setPendingFocusCellId] = useState<string | undefined>(undefined);
 

package/src/primitives/use-narrow-viewport.ts

@@ -0,0 +1,28 @@
+import { useSyncExternalStore } from "react";
+
+// Matches ui/use-mobile.ts's MOBILE_BREAKPOINT. Kept as a separate constant
+// because that file is vendored shadcn (regenerated via scripts/sync-shadcn.ts)
+// and cannot be imported from without risking a future overwrite.
+const MOBILE_BREAKPOINT = 768;
+
+function subscribe(callback: () => void): () => void {
+  const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+  mql.addEventListener("change", callback);
+  return () => mql.removeEventListener("change", callback);
+}
+
+function getSnapshot(): boolean {
+  return window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`).matches;
+}
+
+function getServerSnapshot(): boolean {
+  return false;
+}
+
+// Unlike the vendored `useIsMobile` (ui/use-mobile.ts), which only sets its
+// result in a `useEffect` and therefore always reports `false` on the first
+// render regardless of actual viewport, this reads the real value up front
+// via `useSyncExternalStore` — no wrong-then-corrected first render.
+export function useIsNarrowViewport(): boolean {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}

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

@@ -299,6 +299,28 @@ describe("Drawer", () => {
       expect(handle.getAttribute("aria-valuenow")).toBe("484");
     });
 
+    test("PointerDown on the handle locks text selection, PointerUp restores it (fw#1965)", () => {
+      render(
+        <Drawer
+          open={true}
+          onOpenChange={() => {}}
+          side="right"
+          testId="drawer"
+          resize={{ defaultWidthPx: 400, minWidthPx: 300, maxWidthPx: 500 }}
+        >
+          <div>Body</div>
+        </Drawer>,
+      );
+      const handle = screen.getByRole("separator");
+      expect(document.body.style.userSelect).toBe("");
+
+      fireEvent.pointerDown(handle, { pointerId: 1, clientX: 100 });
+      expect(document.body.style.userSelect).toBe("none");
+
+      fireEvent.pointerUp(handle, { pointerId: 1, clientX: 100 });
+      expect(document.body.style.userSelect).toBe("");
+    });
+
     test("side='top' with resize set: no resize handle, no maximize button (vertical drawers can't resize)", () => {
       render(
         <Drawer

package/src/widgets/__tests__/upload-zone.test.tsx

@@ -110,6 +110,30 @@ describe("UploadZone", () => {
     expect(screen.queryByText("upload_failed")).toBeNull();
   });
 
+  test("uploads multiple files with distinct, stable row keys even without crypto.randomUUID (insecure-context LAN preview)", async () => {
+    // `crypto.randomUUID` only exists in a secure context — an HTTP-over-LAN
+    // preview leaves it undefined, so calling it throws TypeError. Row ids
+    // must not depend on it.
+    const originalRandomUUID = crypto.randomUUID;
+    (crypto as unknown as { randomUUID?: () => string }).randomUUID = undefined;
+    try {
+      const onUpload = mock(async () => {});
+      render(<UploadZone title="Datei hochladen" onUpload={onUpload} testId="zone" />);
+      const a = new File(["a"], "a.pdf");
+      const b = new File(["b"], "b.pdf");
+      pick(screen.getByTestId("zone-input"), [a, b]);
+
+      await waitFor(() => expect(onUpload).toHaveBeenCalledTimes(2));
+      expect(screen.getByText("a.pdf")).toBeTruthy();
+      expect(screen.getByText("b.pdf")).toBeTruthy();
+      // Two distinct rows in the DOM (not collapsed onto one shared/undefined
+      // React key) proves the ids stayed unique without crypto.randomUUID.
+      expect(screen.getAllByTestId("zone-row")).toHaveLength(2);
+    } finally {
+      crypto.randomUUID = originalRandomUUID;
+    }
+  });
+
   test("disabled unterdrückt den Drop", () => {
     const onUpload = mock(async () => {});
     render(<UploadZone title="Datei hochladen" onUpload={onUpload} disabled testId="zone" />);
@@ -164,7 +188,9 @@ describe("UploadZone", () => {
     try {
       const onUpload = mock(async (_uploaded: File) => {});
       render(<UploadZone title="Datei hochladen" onUpload={onUpload} testId="zone" />);
-      const file = new File(["x"], "photo.jpg", { type: "image/jpeg" });
+      // Content sized well above the fake resize's 13 bytes — resizeImageBeforeUpload
+      // (framework#1979) only takes the re-encode when it's actually smaller.
+      const file = new File(["x".repeat(2000)], "photo.jpg", { type: "image/jpeg" });
       pick(screen.getByTestId("zone-input"), [file]);
 
       await waitFor(() => expect(onUpload).toHaveBeenCalledTimes(1));

package/src/widgets/drawer.tsx

@@ -54,13 +54,13 @@ function defaultWidthFromViewport(): number {
 function floatingSideClass(side: "left" | "right" | "top" | "bottom"): string {
   switch (side) {
     case "left":
-      return "inset-y-8 left-8 h-auto w-[max(520px,25vw)] max-w-[85vw] sm:max-w-[max(520px,25vw)] rounded-[2rem] border shadow-2xl";
+      return "inset-y-8 left-8 h-auto w-[max(520px,25vw)] max-w-[85vw] sm:max-w-[max(520px,25vw)] rounded-[2rem] border shadow-2xl overflow-hidden";
     case "top":
-      return "inset-x-8 top-8 h-auto max-h-[80vh] rounded-[2rem] border shadow-2xl";
+      return "inset-x-8 top-8 h-auto max-h-[80vh] rounded-[2rem] border shadow-2xl overflow-hidden";
     case "bottom":
-      return "inset-x-8 bottom-8 h-auto max-h-[80vh] rounded-[2rem] border shadow-2xl";
+      return "inset-x-8 bottom-8 h-auto max-h-[80vh] rounded-[2rem] border shadow-2xl overflow-hidden";
     default:
-      return "inset-y-8 right-8 h-auto w-[max(520px,25vw)] max-w-[85vw] sm:max-w-[max(520px,25vw)] rounded-[2rem] border shadow-2xl";
+      return "inset-y-8 right-8 h-auto w-[max(520px,25vw)] max-w-[85vw] sm:max-w-[max(520px,25vw)] rounded-[2rem] border shadow-2xl overflow-hidden";
   }
 }
 
@@ -101,9 +101,14 @@ export function Drawer({
   const effectiveWidthPx = maximized ? effectiveMaxWidthPx() : width;
 
   const onHandlePointerDown = (event: React.PointerEvent<HTMLDivElement>): void => {
+    event.preventDefault();
     event.currentTarget.setPointerCapture(event.pointerId);
     dragRef.current = { startX: event.clientX, startWidth: effectiveWidthPx };
     setMaximized(false);
+    // Handle already carries `cursor-col-resize`, so only the text-selection
+    // lock is needed here — without it, a fast drag over the drawer content
+    // selects the text underneath instead of just resizing.
+    document.body.style.setProperty("user-select", "none");
   };
   const onHandlePointerMove = (event: React.PointerEvent<HTMLDivElement>): void => {
     if (dragRef.current === null) return;
@@ -114,6 +119,7 @@ export function Drawer({
   const onHandlePointerUp = (event: React.PointerEvent<HTMLDivElement>): void => {
     event.currentTarget.releasePointerCapture(event.pointerId);
     dragRef.current = null;
+    document.body.style.removeProperty("user-select");
   };
   const onHandleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {
     const step = event.shiftKey ? 40 : 16;

package/src/widgets/upload-zone.tsx

@@ -90,9 +90,13 @@ export function UploadZone({
   const inputRef = useRef<HTMLInputElement>(null);
   const [rows, setRows] = useState<readonly UploadRow[]>([]);
   const [dragOver, setDragOver] = useState(false);
+  // `crypto.randomUUID` only exists in a secure context — a plain-HTTP LAN
+  // preview leaves it undefined. These ids are React keys/row ids, not
+  // globally unique identifiers, so a per-instance counter is enough.
+  const nextRowId = useRef(0);
 
   async function uploadOne(file: File): Promise<void> {
-    const rowId = crypto.randomUUID();
+    const rowId = String(nextRowId.current++);
     setRows((prev) => [...prev, { id: rowId, fileName: file.name, status: "uploading" }]);
     try {
       await onUpload(await resizeImageBeforeUpload(file));
@@ -113,7 +117,7 @@ export function UploadZone({
       setRows((prev) => [
         ...prev,
         {
-          id: crypto.randomUUID(),
+          id: String(nextRowId.current++),
           fileName: file.name,
           status: "error",
           error: t("kumiko.widget.upload.rejected-type"),