@cosmicdrift/kumiko-renderer-web 0.194.0 → 0.196.0

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/nav-tree.tsx

@@ -101,6 +101,7 @@ import {
   SidebarMenuSub,
   SidebarMenuSubButton,
   SidebarMenuSubItem,
+  useSidebar,
 } from "../ui/sidebar";
 import { useDispatchTarget } from "./target-resolver-stub";
 import { parseTargetFromSearchParams } from "./target-url";
@@ -224,7 +225,14 @@ export function NavTree({
   }, []);
 
   const t = useTranslation();
+  const { state: sidebarState } = useSidebar();
   const [filter, setFilter] = useState("");
+  // The search box is only CSS-hidden (`group-data-[collapsible=icon]:hidden`)
+  // when the sidebar collapses to icon rail, not unmounted — without this,
+  // a stale filter re-applies invisibly on the next expand (fw#1816).
+  useEffect(() => {
+    if (sidebarState === "collapsed") setFilter("");
+  }, [sidebarState]);
   const q = filter.trim().toLowerCase();
   const matches = useCallback(
     (raw: string): boolean => {

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

@@ -9,11 +9,16 @@ describe("resizeImageBeforeUpload", () => {
   });
 
   test("fehlt OffscreenCanvas, bleibt das Bild unverändert", async () => {
+    const originalOffscreenCanvas = globalThis.OffscreenCanvas;
     // @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);
+    try {
+      const file = new File(["hi"], "photo.jpg", { type: "image/jpeg" });
+      const result = await resizeImageBeforeUpload(file);
+      expect(result).toBe(file);
+    } finally {
+      globalThis.OffscreenCanvas = originalOffscreenCanvas;
+    }
   });
 
   test("lässt SVGs unverändert (Vektor würde beim Re-Encode zerstört)", async () => {
@@ -49,7 +54,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 +88,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 +123,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 +137,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/accept-attr.ts

@@ -0,0 +1,5 @@
+// "jpg" → ".jpg", "image/png" stays as-is. Empty list → no accept attribute.
+export function toAcceptAttr(accept?: readonly string[]): string | undefined {
+  if (accept === undefined || accept.length === 0) return undefined;
+  return accept.map((a) => (a.startsWith(".") || a.includes("/") ? a : `.${a}`)).join(",");
+}

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);
 
@@ -442,6 +443,18 @@ export function EmbeddedListInput({
     const isTabForward = event.key === "Tab" && !event.shiftKey;
     const isEnter = event.key === "Enter";
     if (!isTabForward && !isEnter) return;
+    // A select/reference last column renders its picker trigger as a
+    // <button> (or an open cmdk popover's own input) in the cell — Enter
+    // there is the browser's native button-activation, not "append a row".
+    // Returning before preventDefault() lets that activation proceed;
+    // Tab still falls through to the append-row behavior below.
+    if (
+      isEnter &&
+      event.target instanceof HTMLElement &&
+      event.target.closest('button, [role="combobox"], [cmdk-input]') !== null
+    ) {
+      return;
+    }
     if (maxItems !== undefined && rows.length >= maxItems) return;
     // Enter bubbles up from the cell control through this TableCell — an
     // ancestor of any <form> the caller wraps the whole field in.

package/src/primitives/file-upload.tsx

@@ -6,6 +6,7 @@
 import { CSRF_HEADER_NAME, readCsrfToken } from "@cosmicdrift/kumiko-dispatcher-live";
 import { ImageIcon, Loader2, Upload } from "lucide-react";
 import { type ChangeEvent, type ReactNode, useRef, useState } from "react";
+import { toAcceptAttr } from "../lib/accept-attr";
 import { resizeImageBeforeUpload } from "../lib/resize-image";
 import { Button as UiButton } from "../ui/button";
 
@@ -22,12 +23,6 @@ export type FileUploadInputProps = {
   readonly capture?: "environment" | "user";
 };
 
-// "jpg" → ".jpg", "image/png" bleibt. Leere Liste → kein accept-Attribut.
-function toAcceptAttr(accept?: readonly string[]): string | undefined {
-  if (accept === undefined || accept.length === 0) return undefined;
-  return accept.map((a) => (a.startsWith(".") || a.includes("/") ? a : `.${a}`)).join(",");
-}
-
 export function FileUploadInput({
   kind,
   id,

package/src/primitives/index.tsx

@@ -69,6 +69,7 @@ import {
   type ChangeEvent,
   type CSSProperties,
   createContext,
+  type MouseEvent,
   type ReactNode,
   useContext,
   useEffect,
@@ -732,6 +733,12 @@ 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]}