@carlonicora/nextjs-jsonapi 4.0.7 → 4.1.0

package/src/features/how-to/components/containers/HowToCommand.tsx

@@ -189,7 +189,12 @@ export default function HowToCommand({ pathname, contextKeys, extraGroups, onSta
                 {relevantHowTos.length > 0 && (
                   <CommandGroup heading={t(`howto.command.relevant`)}>
                     {relevantHowTos.map((howTo: HowToInterface) => (
-                      <CommandItem key={howTo.id} onSelect={() => setSelectedHowTo(howTo)} className="cursor-pointer">
+                      <CommandItem
+                        key={howTo.id}
+                        value={howTo.id}
+                        onSelect={() => setSelectedHowTo(howTo)}
+                        className="cursor-pointer"
+                      >
                         <ArrowRight className="h-4 w-4 rtl:rotate-180" />
                         <span>{howTo.name}</span>
                       </CommandItem>
@@ -201,7 +206,12 @@ export default function HowToCommand({ pathname, contextKeys, extraGroups, onSta
                 {otherHowTos.length > 0 && (
                   <CommandGroup heading={searchTerm ? undefined : t(`howto.command.all`)}>
                     {otherHowTos.map((howTo: HowToInterface) => (
-                      <CommandItem key={howTo.id} onSelect={() => setSelectedHowTo(howTo)} className="cursor-pointer">
+                      <CommandItem
+                        key={howTo.id}
+                        value={howTo.id}
+                        onSelect={() => setSelectedHowTo(howTo)}
+                        className="cursor-pointer"
+                      >
                         <ArrowRight className="h-4 w-4 rtl:rotate-180" />
                         <span>{howTo.name}</span>
                       </CommandItem>

package/src/features/how-to/components/forms/HowToSelector.spec.tsx

@@ -0,0 +1,85 @@
+import { render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
+
+// Two guides with the SAME title: cmdk derives an item's value from its text when no
+// `value` is given, so without a unique value both rows highlight together.
+const guides = [
+  { id: "h1", name: "Come creare una pratica" },
+  { id: "h2", name: "Come creare una pratica" },
+  { id: "h3", name: "Gestire i contatti" },
+];
+
+const { searchSpy } = vi.hoisted(() => ({ searchSpy: vi.fn() }));
+
+vi.mock("../../../../hooks", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../../../hooks")>()),
+  // Stands in for the server-side search: `search(term)` narrows the list by title.
+  useDataListRetriever: () => {
+    const [data, setData] = useState<any[]>(guides);
+    const search = useCallback(async (term: string) => {
+      searchSpy(term);
+      setData(guides.filter((g) => g.name.toLowerCase().includes(term.toLowerCase())));
+    }, []);
+    return useMemo(() => ({ data, search }), [data, search]);
+  },
+  useDebounce: (fn: any) => fn,
+}));
+
+import { ModuleRegistry } from "../../../../core/registry/ModuleRegistry";
+import { HowTo } from "../../data/HowTo";
+import HowToSelector from "./HowToSelector";
+
+beforeAll(() => {
+  ModuleRegistry.register("HowTo" as any, { name: "howtos", model: HowTo } as any);
+});
+
+let formRef: any;
+function Host() {
+  const form = useForm<{ howTo?: { id: string } }>();
+  useEffect(() => {
+    formRef = form;
+  });
+  return <HowToSelector id="howTo" form={form} placeholder="pick" />;
+}
+
+async function openList() {
+  render(<Host />);
+  await userEvent.click(screen.getByText("pick"));
+  return screen.findByRole("listbox");
+}
+
+describe("HowToSelector", () => {
+  beforeEach(() => {
+    Element.prototype.scrollIntoView = vi.fn();
+    searchSpy.mockReset();
+  });
+
+  it("highlights only one of two same-titled guides and selects the one clicked", async () => {
+    const list = await openList();
+    await waitFor(() => expect(within(list).getAllByRole("option")).toHaveLength(3));
+
+    const highlighted = within(list)
+      .getAllByRole("option")
+      .filter((o) => o.getAttribute("aria-selected") === "true");
+    expect(highlighted).toHaveLength(1);
+
+    const sameTitled = within(list).getAllByRole("option", { name: "Come creare una pratica" });
+    expect(sameTitled).toHaveLength(2);
+    await userEvent.click(sameTitled[1]);
+    expect(formRef.getValues("howTo")).toEqual({ id: "h2", name: "Come creare una pratica" });
+  });
+
+  it("still filters the list when the user types", async () => {
+    const list = await openList();
+    await waitFor(() => expect(within(list).getAllByRole("option")).toHaveLength(3));
+
+    await userEvent.type(screen.getByRole("textbox"), "contatti");
+
+    await waitFor(() => expect(searchSpy).toHaveBeenCalledWith("contatti"));
+    await waitFor(() => expect(within(list).getAllByRole("option")).toHaveLength(1));
+    expect(within(list).getByRole("option", { name: "Gestire i contatti" })).toBeInTheDocument();
+  });
+});

package/src/features/how-to/components/forms/HowToSelector.tsx

@@ -148,6 +148,7 @@ export default function HowToSelector({
                       <CommandItem
                         className="cursor-pointer hover:bg-muted data-selected:hover:bg-muted bg-transparent data-selected:bg-transparent"
                         key={howTo.id}
+                        value={howTo.id}
                         onSelect={() => setHowTo(howTo)}
                       >
                         {howTo.name}

package/src/features/role/components/forms/UserRoleAdd.spec.tsx

@@ -0,0 +1,71 @@
+import { render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+// Every row's text is `t("role.roles", { role })`. A role id the translation does not
+// know renders the same fallback text, so two roles can share a row text — and cmdk,
+// without a `value`, derives the value from that text and highlights both rows.
+// (The test translator returns the key, so every row reads "role.roles".)
+const roles = [
+  { id: "role-a", name: "Role A" },
+  { id: "role-b", name: "Role B" },
+  { id: "role-c", name: "Role C" },
+];
+
+const { findAllRolesUserNotIn, addUserToRole } = vi.hoisted(() => ({
+  findAllRolesUserNotIn: vi.fn(),
+  addUserToRole: vi.fn(),
+}));
+
+vi.mock("../../data/role.service", () => ({ RoleService: { findAllRolesUserNotIn, addUserToRole } }));
+vi.mock("../../../../utils/toast", () => ({ showToast: vi.fn() }));
+vi.mock("../../../../hooks", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../../../hooks")>()),
+  useDebounce: (fn: any) => fn,
+}));
+
+import { UserRoleAdd } from "./UserRoleAdd";
+
+const user = { id: "user-1", name: "Mario Rossi" } as any;
+
+async function openList() {
+  render(<UserRoleAdd user={user} refresh={vi.fn(async () => {})} />);
+  await userEvent.click(screen.getByRole("button", { name: /common.association.label/ }));
+  return screen.findByRole("listbox");
+}
+
+describe("UserRoleAdd", () => {
+  beforeEach(() => {
+    Element.prototype.scrollIntoView = vi.fn();
+    findAllRolesUserNotIn.mockReset();
+    addUserToRole.mockReset();
+    findAllRolesUserNotIn.mockImplementation(async (params: { search: string }) =>
+      roles.filter((r) => r.id.includes(params.search)),
+    );
+    addUserToRole.mockResolvedValue(undefined);
+  });
+
+  it("highlights only one of two same-text roles and adds the one clicked", async () => {
+    const list = await openList();
+    await waitFor(() => expect(within(list).getAllByRole("option")).toHaveLength(3));
+
+    const highlighted = within(list)
+      .getAllByRole("option")
+      .filter((o) => o.getAttribute("aria-selected") === "true");
+    expect(highlighted).toHaveLength(1);
+
+    await userEvent.click(within(list).getAllByRole("option")[1]);
+    await waitFor(() => expect(addUserToRole).toHaveBeenCalled());
+    expect(addUserToRole.mock.calls.every(([p]) => p.roleId === "role-b" && p.userId === "user-1")).toBe(true);
+  });
+
+  it("still filters the list when the user types", async () => {
+    const list = await openList();
+    await waitFor(() => expect(within(list).getAllByRole("option")).toHaveLength(3));
+
+    await userEvent.type(screen.getByRole("combobox"), "role-c");
+
+    await waitFor(() => expect(findAllRolesUserNotIn).toHaveBeenCalledWith({ search: "role-c", userId: "user-1" }));
+    await waitFor(() => expect(within(list).getAllByRole("option")).toHaveLength(1));
+  });
+});

package/src/features/role/components/forms/UserRoleAdd.tsx

@@ -115,6 +115,7 @@ export function UserRoleAdd({ user, refresh }: UserRoleAddProps) {
               <CommandItem
                 className="cursor-pointer hover:bg-muted data-selected:hover:bg-muted bg-transparent data-selected:bg-transparent"
                 key={role.id}
+                value={role.id}
                 onSelect={() => addUserToRole(role)}
                 onClick={() => addUserToRole(role)}
               >

package/src/features/user/components/forms/UserSelector.spec.tsx

@@ -0,0 +1,85 @@
+import { render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
+
+// Two users with the SAME name: cmdk derives an item's value from its text when no
+// `value` is given, so without a unique value both rows highlight together.
+const users = [
+  { id: "u1", name: "Mario Rossi", avatar: "a1" },
+  { id: "u2", name: "Mario Rossi", avatar: "a2" },
+  { id: "u3", name: "Anna Bianchi", avatar: "a3" },
+];
+
+const { searchSpy } = vi.hoisted(() => ({ searchSpy: vi.fn() }));
+
+vi.mock("../../../../hooks", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../../../hooks")>()),
+  // Stands in for the server-side search: `search(term)` narrows the list by name.
+  useDataListRetriever: () => {
+    const [data, setData] = useState<any[]>(users);
+    const search = useCallback(async (term: string) => {
+      searchSpy(term);
+      setData(users.filter((u) => u.name.toLowerCase().includes(term.toLowerCase())));
+    }, []);
+    return useMemo(() => ({ data, search }), [data, search]);
+  },
+  useDebounce: (fn: any) => fn,
+}));
+vi.mock("../widgets", () => ({ UserAvatar: () => null }));
+
+import { ModuleRegistry } from "../../../../core/registry/ModuleRegistry";
+import { UserSelector } from "./UserSelector";
+
+beforeAll(() => {
+  ModuleRegistry.register("User" as any, { name: "users" } as any);
+});
+
+let formRef: any;
+function Host() {
+  const form = useForm<{ user?: { id: string } }>();
+  useEffect(() => {
+    formRef = form;
+  });
+  return <UserSelector id="user" form={form} placeholder="pick" />;
+}
+
+async function openList() {
+  render(<Host />);
+  await userEvent.click(screen.getByText("pick"));
+  return screen.findByRole("listbox");
+}
+
+describe("UserSelector", () => {
+  beforeEach(() => {
+    Element.prototype.scrollIntoView = vi.fn();
+    searchSpy.mockReset();
+  });
+
+  it("highlights only one of two same-named users and selects the one clicked", async () => {
+    const list = await openList();
+    await waitFor(() => expect(within(list).getAllByRole("option")).toHaveLength(3));
+
+    const highlighted = within(list)
+      .getAllByRole("option")
+      .filter((o) => o.getAttribute("aria-selected") === "true");
+    expect(highlighted).toHaveLength(1);
+
+    const sameNamed = within(list).getAllByRole("option", { name: "Mario Rossi" });
+    expect(sameNamed).toHaveLength(2);
+    await userEvent.click(sameNamed[1]);
+    expect(formRef.getValues("user")).toEqual({ id: "u2", name: "Mario Rossi", avatar: "a2" });
+  });
+
+  it("still filters the list when the user types", async () => {
+    const list = await openList();
+    await waitFor(() => expect(within(list).getAllByRole("option")).toHaveLength(3));
+
+    await userEvent.type(screen.getByRole("textbox"), "anna");
+
+    await waitFor(() => expect(searchSpy).toHaveBeenCalledWith("anna"));
+    await waitFor(() => expect(within(list).getAllByRole("option")).toHaveLength(1));
+    expect(within(list).getByRole("option", { name: "Anna Bianchi" })).toBeInTheDocument();
+  });
+});

package/src/features/user/components/forms/UserSelector.tsx

@@ -154,6 +154,7 @@ export function UserSelector({ id, form, label, placeholder, onChange, isRequire
                       <CommandItem
                         className="cursor-pointer hover:bg-muted data-selected:hover:bg-muted bg-transparent data-selected:bg-transparent"
                         key={user.id}
+                        value={user.id}
                         onSelect={() => setUser(user)}
                       >
                         <UserAvatar user={user} className={`me-2 h-4 w-4`} />

package/src/features/user/components/lists/UserListInAdd.spec.tsx

@@ -0,0 +1,84 @@
+import { render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useCallback, useMemo, useState } from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+// Two users whose row text is identical (same name, same e-mail — e.g. a re-invited
+// duplicate): cmdk derives an item's value from its text when no `value` is given, so
+// without a unique value both rows highlight together.
+const users = [
+  { id: "u1", name: "Mario Rossi", email: "mario@example.com" },
+  { id: "u2", name: "Mario Rossi", email: "mario@example.com" },
+  { id: "u3", name: "Anna Bianchi", email: "anna@example.com" },
+];
+
+const { searchSpy } = vi.hoisted(() => ({ searchSpy: vi.fn() }));
+
+vi.mock("../../../../hooks", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../../../hooks")>()),
+  useDebounce: (fn: any) => fn,
+}));
+vi.mock("../widgets", () => ({ UserAvatar: () => null }));
+
+import { CommonAssociationCommandDialog } from "../../../../components/forms/CommonAssociationForm";
+import { UserListInAdd } from "./UserListInAdd";
+
+// The list is always rendered inside CommonAssociationCommandDialog (see RoleUserAdd),
+// which owns the search input; `search(term)` stands in for the server-side search.
+function Host({ setSelectedUser }: { setSelectedUser: (user: any) => void }) {
+  const [list, setList] = useState<any[]>(users);
+  const search = useCallback(async (term: string) => {
+    searchSpy(term);
+    setList(users.filter((u) => u.name.toLowerCase().includes(term.toLowerCase())));
+  }, []);
+  const data = useMemo(() => ({ data: list, search }) as any, [list, search]);
+  return (
+    <CommonAssociationCommandDialog
+      show={true}
+      setShow={vi.fn()}
+      data={data}
+      source="users"
+      destination="roles"
+      destinationName="Admin"
+    >
+      <UserListInAdd data={data} existingUsers={[]} setSelectedUser={setSelectedUser} />
+    </CommonAssociationCommandDialog>
+  );
+}
+
+describe("UserListInAdd", () => {
+  beforeEach(() => {
+    Element.prototype.scrollIntoView = vi.fn();
+    searchSpy.mockReset();
+  });
+
+  it("highlights only one of two same-text users and selects the one clicked", async () => {
+    const setSelectedUser = vi.fn();
+    render(<Host setSelectedUser={setSelectedUser} />);
+    const list = await screen.findByRole("listbox");
+    await waitFor(() => expect(within(list).getAllByRole("option")).toHaveLength(3));
+
+    const highlighted = within(list)
+      .getAllByRole("option")
+      .filter((o) => o.getAttribute("aria-selected") === "true");
+    expect(highlighted).toHaveLength(1);
+
+    const sameText = within(list).getAllByRole("option", { name: /Mario Rossi/ });
+    expect(sameText).toHaveLength(2);
+    await userEvent.click(sameText[1]);
+    expect(setSelectedUser).toHaveBeenCalled();
+    expect(setSelectedUser.mock.calls.every(([u]) => u.id === "u2")).toBe(true);
+  });
+
+  it("still filters the list when the user types", async () => {
+    render(<Host setSelectedUser={vi.fn()} />);
+    const list = await screen.findByRole("listbox");
+    await waitFor(() => expect(within(list).getAllByRole("option")).toHaveLength(3));
+
+    await userEvent.type(screen.getByRole("combobox"), "anna");
+
+    await waitFor(() => expect(searchSpy).toHaveBeenCalledWith("anna"));
+    await waitFor(() => expect(within(list).getAllByRole("option")).toHaveLength(1));
+    expect(within(list).getByRole("option", { name: /Anna Bianchi/ })).toBeInTheDocument();
+  });
+});

package/src/features/user/components/lists/UserListInAdd.tsx

@@ -28,6 +28,7 @@ export function UserListInAdd({ data, existingUsers, setSelectedUser, setLevelOp
                 <CommandItem
                   className="cursor-pointer hover:bg-muted data-selected:hover:bg-muted bg-transparent data-selected:bg-transparent"
                   key={user.id}
+                  value={user.id}
                   onClick={(_e) => {
                     setSelectedUser(user);
                     setLevelOpen?.(true);

package/src/features/user/components/widgets/UserSearchPopover.spec.tsx

@@ -0,0 +1,68 @@
+import { render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+// Two users with the SAME name: cmdk derives an item's value from its text when no
+// `value` is given, so without a unique value both rows highlight together.
+const users = [
+  { id: "u1", name: "Mario Rossi" },
+  { id: "u2", name: "Mario Rossi" },
+  { id: "u3", name: "Anna Bianchi" },
+];
+
+const { findMany } = vi.hoisted(() => ({ findMany: vi.fn() }));
+
+// The real useUserSearch runs; only the API call underneath it is stubbed.
+vi.mock("../../data/user.service", () => ({ UserService: { findMany } }));
+vi.mock("./UserAvatar", () => ({ UserAvatar: () => null }));
+
+import { UserSearchPopover } from "./UserSearchPopover";
+
+async function openList(onSelect = vi.fn()) {
+  render(
+    <UserSearchPopover onSelect={onSelect}>
+      <span>open</span>
+    </UserSearchPopover>,
+  );
+  await userEvent.click(screen.getByText("open"));
+  return screen.findByRole("listbox");
+}
+
+describe("UserSearchPopover", () => {
+  beforeEach(() => {
+    Element.prototype.scrollIntoView = vi.fn();
+    findMany.mockReset();
+    findMany.mockImplementation(async (params: { search?: string }) =>
+      users.filter((u) => u.name.toLowerCase().includes((params.search ?? "").toLowerCase())),
+    );
+  });
+
+  it("highlights only one of two same-named users and selects the one clicked", async () => {
+    const onSelect = vi.fn();
+    const list = await openList(onSelect);
+    await waitFor(() => expect(within(list).getAllByRole("option")).toHaveLength(3));
+
+    const highlighted = within(list)
+      .getAllByRole("option")
+      .filter((o) => o.getAttribute("aria-selected") === "true");
+    expect(highlighted).toHaveLength(1);
+
+    const sameNamed = within(list).getAllByRole("option", { name: "Mario Rossi" });
+    expect(sameNamed).toHaveLength(2);
+    await userEvent.click(sameNamed[1]);
+    expect(onSelect).toHaveBeenCalledWith("u2");
+  });
+
+  it("still filters the list when the user types", async () => {
+    const list = await openList();
+    await waitFor(() => expect(within(list).getAllByRole("option")).toHaveLength(3));
+
+    await userEvent.type(screen.getByRole("textbox"), "anna");
+
+    await waitFor(() => expect(findMany).toHaveBeenCalledWith(expect.objectContaining({ search: "anna" })), {
+      timeout: 3000,
+    });
+    await waitFor(() => expect(within(list).getAllByRole("option")).toHaveLength(1), { timeout: 3000 });
+    expect(within(list).getByRole("option", { name: "Anna Bianchi" })).toBeInTheDocument();
+  });
+});

package/src/features/user/components/widgets/UserSearchPopover.tsx

@@ -71,6 +71,7 @@ export const UserSearchPopover = ({ children, onSelect, align = "start", classNa
               users.map((user) => (
                 <CommandItem
                   key={user.id}
+                  value={user.id}
                   className="cursor-pointer hover:bg-muted data-selected:hover:bg-muted bg-transparent data-selected:bg-transparent"
                   onSelect={() => handleSelectUser(user.id)}
                 >

package/src/next-config/__tests__/createNextConfig.test.ts

@@ -9,12 +9,12 @@ const FIXED_ENV = vi.hoisted(() => {
     NEXT_PUBLIC_API_URL: "https://api.test",
     NEXT_PUBLIC_ADDRESS: "https://app.test",
     IMAGE_SOURCES: "https://img.test",
+    NEXT_PUBLIC_CORPUS_URL: "https://corpus.test",
     APP_URL: "https://app.test",
   };
   for (const key of [
     "NEXT_PUBLIC_VAPID_PUBLIC_KEY",
     "NEXT_PUBLIC_GOOGLE_MAPS_API_KEY",
-    "NEXT_PUBLIC_CORPUS_URL",
     "NEXT_PUBLIC_GTM_ID",
     "E2E_BUILD",
   ])
@@ -139,7 +139,11 @@ describe("createNextConfig: behaviour", () => {
     expect(plain.allowedDevOrigins).toEqual(["example.test"]);
     expect(plain.images).toEqual({
       minimumCacheTTL: 60,
-      remotePatterns: [{ protocol: "https", hostname: "img.test" }],
+      remotePatterns: [
+        { protocol: "https", hostname: "img.test" },
+        { protocol: "https", hostname: "api.test" },
+        { protocol: "https", hostname: "corpus.test" },
+      ],
       dangerouslyAllowLocalIP: true,
     });
 
@@ -166,6 +170,16 @@ describe("createNextConfig: behaviour", () => {
     expect(production.distDir).toBeUndefined();
   });
 
+  it("lets the optimizer fetch from the api and corpus origins, skipping unset and duplicate ones", () => {
+    vi.stubEnv("NEXT_PUBLIC_CORPUS_URL", undefined);
+    vi.stubEnv("IMAGE_SOURCES", "https://img.test,https://api.test");
+    const config = createNextConfig(base) as { images: { remotePatterns: unknown[] } };
+    expect(config.images.remotePatterns).toEqual([
+      { protocol: "https", hostname: "img.test" },
+      { protocol: "https", hostname: "api.test" },
+    ]);
+  });
+
   it("reactCompiler option sets both reactCompiler and turbopackRustReactCompiler", () => {
     const on = createNextConfig({ ...base, reactCompiler: true });
     expect(on.reactCompiler).toBe(true);
@@ -197,7 +211,7 @@ describe("buildCsp", () => {
     expect(csp["script-src"]).toEqual(["'self'", "'unsafe-eval'", "'unsafe-inline'"]);
     expect(csp["style-src"]).toEqual(["'self'", "'unsafe-inline'"]);
     expect(csp["font-src"]).toEqual(["'self'"]);
-    expect(csp["frame-src"]).toEqual(["'self'"]);
+    expect(csp["frame-src"]).toEqual(["'self'", "https://api.test", "https://corpus.test"]);
     expect(csp["worker-src"]).toEqual(["'self'", "blob:"]);
     expect(buildCsp({}, env)).not.toMatch(/stripe|google|cloudflare|discord/);
   });
@@ -246,6 +260,8 @@ describe("buildCsp", () => {
     const csp = parseCsp(buildCsp({ services: ["stripe"], csp: { "frame-src": ["https://docs.google.com/"] } }, env));
     expect(csp["frame-src"]).toEqual([
       "'self'",
+      "https://api.test",
+      "https://corpus.test",
       "https://docs.google.com/",
       "https://hooks.stripe.com",
       "https://js.stripe.com",
@@ -260,6 +276,32 @@ describe("buildCsp", () => {
     expect(csp["img-src"]).toContain("https://img.test");
   });
 
+  it("allows images and frames from the api and corpus origins", () => {
+    const csp = parseCsp(buildCsp({}, env));
+    for (const directive of ["img-src", "frame-src"]) {
+      expect(csp[directive]).toEqual(expect.arrayContaining(["https://api.test", "https://corpus.test"]));
+    }
+  });
+
+  it("lists the api and corpus origins once, and nothing for an unset corpus", () => {
+    const value = buildCsp({}, {
+      NODE_ENV: "production",
+      NEXT_PUBLIC_API_URL: "https://api.test/",
+      IMAGE_SOURCES: "https://api.test",
+    } as unknown as NodeJS.ProcessEnv);
+    for (const directive of ["img-src", "frame-src"]) {
+      const sources = value
+        .split(";")
+        .map((part) => part.trim().split(/\s+/))
+        .find(([name]) => name === directive)!
+        .slice(1);
+      expect(sources.filter((source) => source === "https://api.test")).toHaveLength(1);
+      expect(sources.join(" ")).not.toContain("corpus");
+      expect(sources).not.toContain("");
+    }
+    expect(value).not.toMatch(/\s{2,}/);
+  });
+
   it("drops empty sources when env values are missing", () => {
     const value = buildCsp({ csp: { "img-src": [""] } }, { NODE_ENV: "development" } as unknown as NodeJS.ProcessEnv);
     expect(value).not.toMatch(/\s{2,}/);

package/src/next-config/csp.ts

@@ -52,12 +52,33 @@ function listImageSources(env: NodeJS.ProcessEnv): string[] {
   return env.IMAGE_SOURCES ? env.IMAGE_SOURCES.split(",").map((s) => s.trim()) : [];
 }
 
+/**
+ * Origins of the app's own servers, the API and the corpus, from
+ * `NEXT_PUBLIC_API_URL` and `NEXT_PUBLIC_CORPUS_URL`. They serve every stored
+ * object link, so images and frames must be allowed from them. Unset or invalid
+ * URLs are skipped; the result has no duplicates.
+ */
+export function listAppOrigins(env: NodeJS.ProcessEnv): string[] {
+  const origins: string[] = [];
+  for (const url of [env.NEXT_PUBLIC_API_URL, env.NEXT_PUBLIC_CORPUS_URL]) {
+    if (!url) continue;
+    try {
+      const { origin } = new URL(url.trim());
+      if (origin !== "null" && !origins.includes(origin)) origins.push(origin);
+    } catch {
+      // Not a URL: nothing to allow.
+    }
+  }
+  return origins;
+}
+
 // Build CSP directives
 // Note: 'unsafe-inline' and 'unsafe-eval' needed for Next.js dev mode and some runtime features
 // In production, consider using nonces for stricter CSP
 export function buildCsp(options: CspOptions, env: NodeJS.ProcessEnv): string {
   const apiUrl = env.NEXT_PUBLIC_API_URL || "";
   const imageSources = listImageSources(env);
+  const appOrigins = listAppOrigins(env);
   const services = options.services ?? [];
 
   // Each fetch directive: what Next itself needs, then the named services, then
@@ -67,8 +88,8 @@ export function buildCsp(options: CspOptions, env: NodeJS.ProcessEnv): string {
     "script-src": { base: ["'self'", "'unsafe-inline'", "'unsafe-eval'"], fromEnv: [] },
     // Styles: self and unsafe-inline for styled-components/emotion
     "style-src": { base: ["'self'", "'unsafe-inline'"], fromEnv: [] },
-    // Images: self, data URIs, blobs, and configured image sources
-    "img-src": { base: ["'self'", "data:", "blob:"], fromEnv: imageSources },
+    // Images: self, data URIs, blobs, configured image sources, and the api/corpus origins
+    "img-src": { base: ["'self'", "data:", "blob:"], fromEnv: [...imageSources, ...appOrigins] },
     // Fonts: self
     "font-src": { base: ["'self'"], fromEnv: [] },
     // Connect: self, API (http + ws for socket.io), and storage (for uploads)
@@ -82,8 +103,8 @@ export function buildCsp(options: CspOptions, env: NodeJS.ProcessEnv): string {
         ...imageSources,
       ],
     },
-    // Frames: self
-    "frame-src": { base: ["'self'"], fromEnv: [] },
+    // Frames: self, and the api/corpus origins (inline previews of stored objects)
+    "frame-src": { base: ["'self'"], fromEnv: appOrigins },
     // Worker sources: self and blob (for Web Workers with dynamic imports)
     "worker-src": { base: ["'self'", "blob:"], fromEnv: [] },
   };