@gogitcms/design-system 0.15.0-next.3

package/src/__tests__/ContentBrowser.mixedcollab.test.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { ThemeProvider } from "../ThemeProvider";
+import { ContentBrowser, type CmsEntry, type CmsNavSection, type CollabApi, type CollabRegister, type CollabText, type OpenTab } from "../components/ContentBrowser";
+
+jest.mock("../ThemeProvider", () => {
+  const actual = jest.requireActual("../ThemeProvider");
+  return { ...actual, useResponsive: () => ({ width: 1300, height: 900, isDesktop: true, isMobile: false }) };
+});
+
+const wrap = (ui: React.ReactElement) => <ThemeProvider>{ui}</ThemeProvider>;
+
+function fakeCollab(seed: Record<string, unknown> = {}) {
+  const values = new Map<string, unknown>(Object.entries(seed));
+  const listeners = new Map<string, Set<() => void>>();
+  const noPeers: never[] = [];
+  const notify = (p: string) => listeners.get(p)?.forEach((l) => l());
+  const listen = (p: string, cb: () => void) => {
+    let s = listeners.get(p);
+    if (!s) listeners.set(p, (s = new Set()));
+    s.add(cb);
+    return () => void s!.delete(cb);
+  };
+  const textCache = new Map<string, CollabText>();
+  const text = (p: string): CollabText => {
+    let b = textCache.get(p);
+    if (!b) textCache.set(p, (b = { get: () => String(values.get(p) ?? ""), set: (n) => { values.set(p, n); notify(p); }, peers: () => noPeers, subscribe: (cb) => listen(p, cb) }));
+    return b;
+  };
+  const regCache = new Map<string, CollabRegister>();
+  const register = (p: string): CollabRegister => {
+    let b = regCache.get(p);
+    if (!b) regCache.set(p, (b = { get: () => values.get(p), set: (n) => { values.set(p, n); notify(p); }, subscribe: (cb) => listen(p, cb) }));
+    return b;
+  };
+  const api: CollabApi = {
+    text, register, setFocus: () => {}, peersAt: () => noPeers, peersUnder: () => noPeers,
+    participants: () => noPeers, awarenessVersion: () => 0, subscribeAwareness: () => () => {},
+    ydoc: {}, awareness: {},
+  };
+  return api;
+}
+
+const sections: CmsNavSection[] = [{ title: "Content", items: [{ key: "posts", label: "Posts", icon: "newspaper" }] }];
+const base = {
+  workspace: { name: "acme/site", initials: "AC", branch: "main", changed: 0 },
+  sections, activeNavKey: "posts", onSelectNav: () => {},
+  entries: [{ id: "a", path: "posts/a.md", title: "Alpha", body: "", fields: [] } as CmsEntry],
+  userInitials: "ED",
+} as const;
+
+const blocksField = {
+  name: "blocks", label: "Blocks", type: "array", component: "mixedList",
+  value: [{ _variant: "hero", heading: "Welcome" }],
+  variants: [{ name: "hero", label: "Hero", fields: [{ name: "heading", label: "Heading", type: "string", value: "" }] }],
+};
+
+test("mixed list renders its existing values under collab", () => {
+  const collab = fakeCollab();
+  const entry: CmsEntry = { id: "a", path: "posts/a.md", title: "Alpha", body: "", collab, fields: [blocksField as any] };
+  render(wrap(<ContentBrowser {...base} openTabs={[{ id: "a", collection: "posts", entry } as OpenTab]} activeTabId="a" onSaveEntry={jest.fn()} />));
+  expect(screen.getByDisplayValue("Welcome")).toBeInTheDocument();
+});

package/src/__tests__/ContentBrowser.mixedvalues.test.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { ThemeProvider } from "../ThemeProvider";
+import { ContentBrowser, type CmsEntry, type CmsNavSection, type EntryField } from "../components/ContentBrowser";
+
+jest.mock("../ThemeProvider", () => {
+  const actual = jest.requireActual("../ThemeProvider");
+  return { ...actual, useResponsive: () => ({ width: 1300, height: 900, isDesktop: true, isMobile: false }) };
+});
+
+const wrap = (ui: React.ReactElement) => <ThemeProvider>{ui}</ThemeProvider>;
+const sections: CmsNavSection[] = [{ title: "Content", items: [{ key: "posts", label: "Posts", icon: "newspaper" }] }];
+
+const fields: EntryField[] = [
+  {
+    name: "blocks", label: "Blocks", type: "array", component: "mixedList",
+    value: [
+      { _variant: "hero", heading: "Welcome" },
+      { _variant: "metrics", items: [{ label: "Deploys", value: "14" }] },
+    ],
+    variants: [
+      { name: "hero", label: "Hero", fields: [{ name: "heading", label: "Heading", type: "string", value: "" }] },
+      { name: "metrics", label: "Metrics", fields: [{ name: "items", label: "Items", type: "array", component: "list", of: "object", value: [], fields: [{ name: "label", label: "Label", type: "string", value: "" }, { name: "value", label: "Value", type: "string", value: "" }] }] },
+    ],
+  },
+];
+
+const entry: CmsEntry = { id: "a", path: "posts/a.md", title: "Alpha", body: "", fields };
+const base = {
+  workspace: { name: "acme/site", initials: "AC", branch: "main", changed: 0 },
+  sections, activeNavKey: "posts", onSelectNav: () => {}, entries: [entry], userInitials: "ED",
+} as const;
+
+test("existing mixed-list values render", () => {
+  render(wrap(<ContentBrowser {...base} onSaveEntry={jest.fn()} />));
+  screen.debug(screen.getByTestId("column-scroll"), 100000);
+  expect(screen.getByDisplayValue("Welcome")).toBeInTheDocument();
+});

package/src/__tests__/ContentBrowser.pagination.test.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { ThemeProvider } from "../ThemeProvider";
+import { ContentBrowser, type CmsEntry, type CmsNavSection } from "../components/ContentBrowser";
+
+// react-native-web reports a 0-width viewport under jsdom, which would select the
+// mobile layout. Force the desktop breakpoint so these tests exercise the desktop
+// entry list (its FlatList, count header, and pagination footer).
+jest.mock("../ThemeProvider", () => {
+  const actual = jest.requireActual("../ThemeProvider");
+  return { ...actual, useResponsive: () => ({ width: 1300, height: 900, isDesktop: true, isMobile: false }) };
+});
+
+const wrap = (ui: React.ReactElement) => <ThemeProvider>{ui}</ThemeProvider>;
+
+const sections: CmsNavSection[] = [
+  { title: "Content", items: [{ key: "posts", label: "Posts", icon: "newspaper" }] },
+];
+
+// A single loaded page of a larger collection (3 of 100).
+const entries: CmsEntry[] = [
+  { id: "a", path: "posts/a.md", title: "Alpha", body: "" },
+  { id: "b", path: "posts/b.md", title: "Bravo", body: "" },
+  { id: "c", path: "posts/c.md", title: "Charlie", body: "" },
+];
+
+const base = {
+  workspace: { name: "acme/site", initials: "AC", branch: "main", changed: 0 },
+  sections,
+  activeNavKey: "posts",
+  onSelectNav: () => {},
+  entries,
+  userInitials: "ED",
+  entriesEmpty: "Choose a collection",
+  onSelectEntry: () => {},
+} as const;
+
+test("the entry list renders as a FlatList showing the loaded page's rows", () => {
+  render(wrap(<ContentBrowser {...base} totalEntries={100} hasMoreEntries onLoadMoreEntries={() => {}} />));
+  expect(screen.getByTestId("entries-list")).toBeInTheDocument();
+  expect(screen.getByText("Alpha")).toBeInTheDocument();
+  expect(screen.getByText("Bravo")).toBeInTheDocument();
+  expect(screen.getByText("Charlie")).toBeInTheDocument();
+});
+
+test("the count header reflects the collection total, not the loaded page size", () => {
+  render(wrap(<ContentBrowser {...base} totalEntries={100} hasMoreEntries onLoadMoreEntries={() => {}} />));
+  // 100 total documents even though only one page (3 rows) is loaded.
+  expect(screen.getByText(/100 entries/)).toBeInTheDocument();
+});
+
+test("a footer spinner shows only while a page is loading", () => {
+  const { rerender } = render(
+    wrap(<ContentBrowser {...base} totalEntries={100} hasMoreEntries loadingMoreEntries={false} onLoadMoreEntries={() => {}} />),
+  );
+  expect(screen.queryByTestId("entries-loading-more")).not.toBeInTheDocument();
+
+  rerender(
+    wrap(<ContentBrowser {...base} totalEntries={100} hasMoreEntries loadingMoreEntries onLoadMoreEntries={() => {}} />),
+  );
+  expect(screen.getByTestId("entries-loading-more")).toBeInTheDocument();
+});

package/src/__tests__/ContentBrowser.previewtab.test.tsx

@@ -0,0 +1,212 @@
+import React from "react";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { Text } from "../components/Text";
+import { ThemeProvider } from "../ThemeProvider";
+import {
+  ContentBrowser,
+  type CmsEntry,
+  type CmsNavSection,
+  type OpenTab,
+} from "../components/ContentBrowser";
+
+// Force the desktop layout (jsdom reports width 0 → mobile otherwise).
+jest.mock("../ThemeProvider", () => {
+  const actual = jest.requireActual("../ThemeProvider");
+  return { ...actual, useResponsive: () => ({ width: 1300, height: 900, isDesktop: true, isMobile: false }) };
+});
+
+const wrap = (ui: React.ReactElement) => <ThemeProvider>{ui}</ThemeProvider>;
+
+const sections: CmsNavSection[] = [
+  { title: "Content", items: [{ key: "posts", label: "Posts", icon: "newspaper" }] },
+];
+const entry: CmsEntry = { id: "a", path: "posts/a.md", title: "Alpha", body: "", fields: [] };
+
+// A document with a real editable field + a body-sourced one, for the draft tests.
+const editable: CmsEntry = {
+  id: "a",
+  path: "posts/a.md",
+  title: "Alpha",
+  body: "hello",
+  fields: [
+    { name: "title", type: "string", label: "Title", value: "Alpha" },
+    { name: "content", type: "string", source: "body", value: "hello" },
+  ],
+};
+
+const base = {
+  workspace: { name: "acme/site", initials: "AC", branch: "main", changed: 0 },
+  sections,
+  activeNavKey: "posts",
+  onSelectNav: () => {},
+  entries: [entry],
+  userInitials: "ED",
+} as const;
+
+const docTab: OpenTab = { id: "a", collection: "posts", entry };
+
+describe("custom columns", () => {
+  it("renders a custom tab's content beside a document column", () => {
+    const tabs: OpenTab[] = [
+      docTab,
+      { id: "preview:a", collection: "posts", title: "Preview", content: <Text testID="the-preview">iframe</Text> },
+    ];
+    render(wrap(<ContentBrowser {...base} openTabs={tabs} activeTabId="a" />));
+
+    expect(screen.getByTestId("column-a")).toBeInTheDocument();
+    expect(screen.getByTestId("the-preview")).toBeInTheDocument();
+    expect(screen.getByText("Preview")).toBeInTheDocument();
+  });
+
+  it("gives a custom column the same close control as a document column", () => {
+    const onCloseTab = jest.fn();
+    const tabs: OpenTab[] = [
+      { id: "preview:a", collection: "posts", title: "Preview", content: <Text testID="the-preview">x</Text> },
+    ];
+    render(wrap(<ContentBrowser {...base} openTabs={tabs} activeTabId="preview:a" onCloseTab={onCloseTab} />));
+
+    screen.getByTestId("column-close").click();
+    expect(onCloseTab).toHaveBeenCalledWith("preview:a");
+  });
+
+  it("does not render the document editor for a custom column", () => {
+    const tabs: OpenTab[] = [
+      { id: "preview:a", collection: "posts", title: "Preview", content: <Text testID="the-preview">x</Text> },
+    ];
+    render(wrap(<ContentBrowser {...base} openTabs={tabs} activeTabId="preview:a" />));
+    // No breadcrumb path, which is the document header's tell.
+    expect(screen.queryByText("posts")).not.toBeInTheDocument();
+  });
+
+  it("leaves a plain document tab untouched when no custom tabs exist", () => {
+    render(wrap(<ContentBrowser {...base} openTabs={[docTab]} activeTabId="a" />));
+    expect(screen.getByTestId("column-a")).toBeInTheDocument();
+    expect(screen.queryByTestId("column-custom-body")).not.toBeInTheDocument();
+  });
+});
+
+describe("documentActions", () => {
+  it("renders host-supplied controls in an open document's header", () => {
+    render(
+      wrap(
+        <ContentBrowser
+          {...base}
+          openTabs={[docTab]}
+          activeTabId="a"
+          documentActions={(e) => <Text testID="action">Preview {e.title}</Text>}
+        />
+      )
+    );
+    expect(screen.getByTestId("action")).toHaveTextContent("Preview Alpha");
+  });
+
+  it("is called with the document, so buttons can vary per entry", () => {
+    const documentActions = jest.fn(() => null);
+    render(wrap(<ContentBrowser {...base} openTabs={[docTab]} activeTabId="a" documentActions={documentActions} />));
+    expect(documentActions).toHaveBeenCalledWith(expect.objectContaining({ id: "a", title: "Alpha" }));
+  });
+
+  it("renders nothing extra when omitted", () => {
+    render(wrap(<ContentBrowser {...base} openTabs={[docTab]} activeTabId="a" />));
+    expect(screen.queryByTestId("action")).not.toBeInTheDocument();
+  });
+
+  it("is not called for a custom column, which has no document", () => {
+    const documentActions = jest.fn(() => null);
+    render(
+      wrap(
+        <ContentBrowser
+          {...base}
+          openTabs={[{ id: "preview:a", collection: "posts", title: "Preview", content: <Text>x</Text> }]}
+          activeTabId="preview:a"
+          documentActions={documentActions}
+        />
+      )
+    );
+    expect(documentActions).not.toHaveBeenCalled();
+  });
+});
+
+describe("onEntryDraft", () => {
+  const draftTab: OpenTab = { id: "a", collection: "posts", entry: editable };
+
+  beforeEach(() => jest.useFakeTimers());
+  afterEach(() => jest.useRealTimers());
+
+  // The title control is the first text input in the column. Captured once and
+  // reused: re-querying by display value would stop matching the moment the
+  // first keystroke changed it.
+  const titleInput = () => screen.getAllByRole("textbox")[0];
+  const typeTitle = (input: HTMLElement, value: string) => {
+    act(() => void fireEvent.change(input, { target: { value } }));
+  };
+
+  it("emits the in-flight document, debounced", () => {
+    const onEntryDraft = jest.fn();
+    render(wrap(<ContentBrowser {...base} openTabs={[draftTab]} activeTabId="a" onEntryDraft={onEntryDraft} />));
+
+    typeTitle(titleInput(), "Alpha edited");
+    expect(onEntryDraft).not.toHaveBeenCalled(); // still inside the debounce
+    act(() => void jest.advanceTimersByTime(200));
+
+    expect(onEntryDraft).toHaveBeenCalledTimes(1);
+    expect(onEntryDraft.mock.calls[0][0]).toEqual({
+      id: "a",
+      fields: { title: "Alpha edited" },
+      // The body-sourced field is separated out, exactly as a save sends it —
+      // so a consumer never writes the article into the frontmatter.
+      body: "hello",
+    });
+  });
+
+  it("coalesces a burst of keystrokes into one draft", () => {
+    const onEntryDraft = jest.fn();
+    render(wrap(<ContentBrowser {...base} openTabs={[draftTab]} activeTabId="a" onEntryDraft={onEntryDraft} />));
+
+    const input = titleInput();
+    typeTitle(input, "A");
+    act(() => void jest.advanceTimersByTime(50));
+    typeTitle(input, "Al");
+    act(() => void jest.advanceTimersByTime(50));
+    typeTitle(input, "Alp");
+    act(() => void jest.advanceTimersByTime(200));
+
+    expect(onEntryDraft).toHaveBeenCalledTimes(1);
+    expect(onEntryDraft.mock.calls[0][0].fields).toEqual({ title: "Alp" });
+  });
+
+  it("emits for an invalid document too, so the preview keeps up mid-edit", () => {
+    const onEntryDraft = jest.fn();
+    const required: CmsEntry = {
+      ...editable,
+      fields: [{ name: "title", type: "string", label: "Title", value: "Alpha", required: true }],
+    };
+    render(
+      wrap(
+        <ContentBrowser
+          {...base}
+          openTabs={[{ id: "a", collection: "posts", entry: required }]}
+          activeTabId="a"
+          onSaveEntry={jest.fn()}
+          onEntryDraft={onEntryDraft}
+        />
+      )
+    );
+
+    typeTitle(titleInput(), ""); // now failing its required rule
+    act(() => void jest.advanceTimersByTime(200));
+    expect(onEntryDraft).toHaveBeenCalledTimes(1);
+    expect(onEntryDraft.mock.calls[0][0].fields).toEqual({ title: "" });
+  });
+
+  it("does not fire a pending draft after the column unmounts", () => {
+    const onEntryDraft = jest.fn();
+    const { unmount } = render(
+      wrap(<ContentBrowser {...base} openTabs={[draftTab]} activeTabId="a" onEntryDraft={onEntryDraft} />)
+    );
+    typeTitle(titleInput(), "Alpha edited");
+    unmount();
+    act(() => void jest.advanceTimersByTime(500));
+    expect(onEntryDraft).not.toHaveBeenCalled();
+  });
+});

package/src/__tests__/ContentBrowser.reorder.test.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { ThemeProvider } from "../ThemeProvider";
+import { ContentBrowser, type CmsEntry, type CmsNavSection } from "../components/ContentBrowser";
+
+// Force the desktop layout (jsdom reports width 0 → mobile otherwise).
+jest.mock("../ThemeProvider", () => {
+  const actual = jest.requireActual("../ThemeProvider");
+  return { ...actual, useResponsive: () => ({ width: 1300, height: 900, isDesktop: true, isMobile: false }) };
+});
+
+const wrap = (ui: React.ReactElement) => <ThemeProvider>{ui}</ThemeProvider>;
+
+const sections: CmsNavSection[] = [
+  { title: "Content", items: [{ key: "posts", label: "Posts", icon: "newspaper" }] },
+];
+const entries: CmsEntry[] = [
+  { id: "a", path: "posts/a.md", title: "Alpha", body: "" },
+  { id: "b", path: "posts/b.md", title: "Beta", body: "" },
+];
+
+const base = {
+  workspace: { name: "acme/site", initials: "AC", branch: "main", changed: 0 },
+  sections,
+  activeNavKey: "posts",
+  onSelectNav: () => {},
+  entries,
+  userInitials: "ED",
+} as const;
+
+test("both pane resize seams render on desktop", () => {
+  render(wrap(<ContentBrowser {...base} />));
+  expect(screen.getByTestId("resize-nav")).toBeInTheDocument();
+  expect(screen.getByTestId("resize-list")).toBeInTheDocument();
+});
+
+test("column reorder grips appear only once a second column is open", () => {
+  render(wrap(<ContentBrowser {...base} />));
+  // The first entry auto-selects into a single column — nothing to reorder yet.
+  expect(screen.queryByTestId("col-grip-a")).not.toBeInTheDocument();
+  // Shift-click opens the second entry in a NEW column (the reorder chord).
+  fireEvent.click(screen.getByText("Beta"), { shiftKey: true });
+  expect(screen.getByTestId("col-grip-a")).toBeInTheDocument();
+  expect(screen.getByTestId("col-grip-b")).toBeInTheDocument();
+});

package/src/__tests__/ContentBrowser.search.test.tsx

@@ -0,0 +1,135 @@
+import React from "react";
+import { render, screen, fireEvent, act, waitFor } from "@testing-library/react";
+import { ThemeProvider } from "../ThemeProvider";
+import { ContentBrowser, type CmsEntry, type CmsNavSection, type FacetField } from "../components/ContentBrowser";
+
+// Force the desktop layout (jsdom reports width 0 → mobile otherwise).
+jest.mock("../ThemeProvider", () => {
+  const actual = jest.requireActual("../ThemeProvider");
+  return { ...actual, useResponsive: () => ({ width: 1300, height: 900, isDesktop: true, isMobile: false }) };
+});
+
+const wrap = (ui: React.ReactElement) => <ThemeProvider>{ui}</ThemeProvider>;
+
+const sections: CmsNavSection[] = [
+  { title: "Content", items: [{ key: "posts", label: "Posts", icon: "newspaper" }] },
+];
+const entries: CmsEntry[] = [{ id: "a", path: "posts/a.md", title: "Alpha", body: "" }];
+const facetFields: FacetField[] = [
+  // component "select" → enum chips; a plain enum (component "input") stays text.
+  { name: "status", label: "Status", type: "string", component: "select", enumValues: ["draft", "published"] },
+  { name: "title", label: "Title", type: "string", component: "input" },
+  { name: "publishedAt", label: "Published At", type: "string", component: "date" },
+];
+
+const base = {
+  workspace: { name: "acme/site", initials: "AC", branch: "main", changed: 0 },
+  sections,
+  activeNavKey: "posts",
+  onSelectNav: () => {},
+  entries,
+  userInitials: "ED",
+  entriesEmpty: "Choose a collection",
+  onSelectEntry: () => {},
+  searchable: true,
+  facetFields,
+} as const;
+
+test("the magnifier opens a title-search input; the X clears it and restores the header", () => {
+  const onClearSearch = jest.fn();
+  render(wrap(<ContentBrowser {...base} onSearchChange={() => {}} onClearSearch={onClearSearch} />));
+
+  // Normal header: no input yet.
+  expect(screen.queryByTestId("search-input")).not.toBeInTheDocument();
+  fireEvent.click(screen.getByTestId("search-open"));
+  expect(screen.getByTestId("search-input")).toBeInTheDocument();
+
+  fireEvent.click(screen.getByTestId("search-close"));
+  expect(onClearSearch).toHaveBeenCalledTimes(1);
+  expect(screen.queryByTestId("search-input")).not.toBeInTheDocument();
+  // Header restored: the search icon is back.
+  expect(screen.getByTestId("search-open")).toBeInTheDocument();
+});
+
+test("typing debounces a title query to the host", () => {
+  jest.useFakeTimers();
+  try {
+    const onSearchChange = jest.fn();
+    render(wrap(<ContentBrowser {...base} onSearchChange={onSearchChange} onClearSearch={() => {}} />));
+    fireEvent.click(screen.getByTestId("search-open"));
+    act(() => { jest.advanceTimersByTime(300); }); // flush the initial "" push
+    onSearchChange.mockClear();
+
+    fireEvent.change(screen.getByTestId("search-input"), { target: { value: "alph" } });
+    // Not sent immediately (debounced)…
+    expect(onSearchChange).not.toHaveBeenCalled();
+    act(() => { jest.advanceTimersByTime(250); });
+    expect(onSearchChange).toHaveBeenCalledWith("alph");
+  } finally {
+    jest.useRealTimers();
+  }
+});
+
+test("the filter icon opens the faceted panel; applying reports the filters and keeps search open", () => {
+  const onApplyFilters = jest.fn();
+  render(wrap(<ContentBrowser {...base} onSearchChange={() => {}} onClearSearch={() => {}} onApplyFilters={onApplyFilters} />));
+
+  fireEvent.click(screen.getByTestId("filter-open"));
+  // The advanced panel replaces the entry list, showing the enum facet's values.
+  expect(screen.getByTestId("advanced-search")).toBeInTheDocument();
+  expect(screen.getByText("published")).toBeInTheDocument();
+
+  // Choose an enum value, then apply.
+  fireEvent.click(screen.getByText("published"));
+  fireEvent.click(screen.getByTestId("facet-apply"));
+
+  expect(onApplyFilters).toHaveBeenCalledTimes(1);
+  expect(onApplyFilters).toHaveBeenCalledWith([{ field: "status", op: "in", values: ["published"] }]);
+  // Panel closes back to the list, but the search input stays open.
+  expect(screen.queryByTestId("advanced-search")).not.toBeInTheDocument();
+  expect(screen.getByTestId("search-input")).toBeInTheDocument();
+});
+
+test("each facet renders the control its display component dictates", () => {
+  render(wrap(<ContentBrowser {...base} onSearchChange={() => {}} onClearSearch={() => {}} onApplyFilters={() => {}} />));
+  fireEvent.click(screen.getByTestId("filter-open"));
+
+  // component "select" → enum chips.
+  expect(screen.getByText("draft")).toBeInTheDocument();
+  expect(screen.getByText("published")).toBeInTheDocument();
+  // component "input" (plain string) → a free-text field, not chips.
+  expect(screen.getByTestId("facet-title")).toBeInTheDocument();
+  // component "date" → a From/To range.
+  expect(screen.getByTestId("facet-publishedAt-from")).toBeInTheDocument();
+  expect(screen.getByTestId("facet-publishedAt-to")).toBeInTheDocument();
+});
+
+test("a date facet applies a gte/lte range from its From/To inputs", () => {
+  const onApplyFilters = jest.fn();
+  render(wrap(<ContentBrowser {...base} onSearchChange={() => {}} onClearSearch={() => {}} onApplyFilters={onApplyFilters} />));
+  fireEvent.click(screen.getByTestId("filter-open"));
+
+  // The two DateControls render as native date inputs on web.
+  const inputs = screen.getAllByTestId("date-control");
+  fireEvent.change(inputs[0], { target: { value: "2026-01-01" } }); // From
+  fireEvent.change(inputs[1], { target: { value: "2026-12-31" } }); // To
+  fireEvent.click(screen.getByTestId("facet-apply"));
+
+  expect(onApplyFilters).toHaveBeenCalledWith([
+    { field: "publishedAt", op: "gte", value: "2026-01-01" },
+    { field: "publishedAt", op: "lte", value: "2026-12-31" },
+  ]);
+});
+
+test("the panel shows an optimistic match count from onCountMatches", async () => {
+  const onCountMatches = jest.fn(async () => 7);
+  render(wrap(<ContentBrowser {...base} onSearchChange={() => {}} onClearSearch={() => {}} onCountMatches={onCountMatches} />));
+
+  fireEvent.click(screen.getByTestId("filter-open"));
+  fireEvent.click(screen.getByText("draft"));
+
+  await waitFor(() => expect(onCountMatches).toHaveBeenCalled());
+  // The most recent call reflects the chosen draft filter.
+  expect(onCountMatches).toHaveBeenLastCalledWith({ query: "", filters: [{ field: "status", op: "in", values: ["draft"] }] });
+  await waitFor(() => expect(screen.getByTestId("facet-apply")).toHaveTextContent("Show 7 results"));
+});