@multiplatform.one/backoffice 7.7.0 → 7.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/backoffice",
-  "version": "7.7.0",
+  "version": "7.7.1",
   "description": "Embeddable Frappe desk recreation (backoffice) for the multiplatform.one stack",
   "keywords": [
     "backoffice",
@@ -33,7 +33,8 @@
     "!types/.tsbuildinfo"
   ],
   "sideEffects": [
-    "**/*.css"
+    "**/*.css",
+    "src/**"
   ],
   "main": "src/index.ts",
   "module": "src/index.ts",
@@ -72,15 +73,15 @@
   "dependencies": {
     "@phosphor-icons/react": "^2.1.10",
     "tamagui": "2.7.6",
-    "@multiplatform.one/components": "7.7.0",
-    "@multiplatform.one/forms": "7.7.0",
-    "@multiplatform.one/frappe": "7.7.0",
-    "@multiplatform.one/frappe-ui": "7.7.0",
-    "@multiplatform.one/i18n": "7.7.0",
-    "@multiplatform.one/platform": "7.7.0",
-    "@multiplatform.one/store": "7.7.0",
-    "@multiplatform.one/table": "7.7.0",
-    "@multiplatform.one/theme": "7.7.0"
+    "@multiplatform.one/components": "7.7.1",
+    "@multiplatform.one/forms": "7.7.1",
+    "@multiplatform.one/frappe": "7.7.1",
+    "@multiplatform.one/frappe-ui": "7.7.1",
+    "@multiplatform.one/i18n": "7.7.1",
+    "@multiplatform.one/platform": "7.7.1",
+    "@multiplatform.one/store": "7.7.1",
+    "@multiplatform.one/table": "7.7.1",
+    "@multiplatform.one/theme": "7.7.1"
   },
   "devDependencies": {
     "@tamagui/build": "2.7.6",
@@ -94,8 +95,8 @@
     "react-dom": "19.2.5",
     "react-i18next": "^16.6.6",
     "vitest": "^4.1.5",
-    "@multiplatform.one/config": "7.7.0",
-    "@multiplatform.one/test-utils": "7.7.0"
+    "@multiplatform.one/config": "7.7.1",
+    "@multiplatform.one/test-utils": "7.7.1"
   },
   "peerDependencies": {
     "i18next": "^25.0.0",

package/src/chrome/CommandPalette.spec.tsx

@@ -6,6 +6,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { createMemoryNavigator } from "../navigation/navigator";
 import { BackofficeShell } from "../shell/BackofficeShell";
 import { BackofficeProvider, type BackofficeProviderProps } from "../config/BackofficeProvider";
+import { CommandPalette } from "./CommandPalette";
 import type { RecentItem } from "./awesomebar-data";
 
 // The shared desk recents store rides @multiplatform.one/store, which the
@@ -304,3 +305,56 @@ describe("CommandPalette capability + scoping", () => {
     expect(screen.queryByTestId("backoffice-palette-section-documents")).toBeNull();
   });
 });
+
+// ---------------------------------------------------------------------------
+// Standalone mount (MPO-189) — the shape CommandPalette.stories.tsx uses:
+// the palette controlled directly, with no shell and no trigger, so the
+// section model is reachable without the navbar.
+// ---------------------------------------------------------------------------
+
+function renderStandalone(open = true) {
+  const navigation = createMemoryNavigator("/backoffice");
+  const onOpenChange = vi.fn();
+  return {
+    navigation,
+    onOpenChange,
+    ...renderWithProviders(
+      <BackofficeProvider
+        frappe={{ baseURL: MOCK_HOST, fixtures: makeFixtures() }}
+        navigation={navigation}
+      >
+        <CommandPalette open={open} onOpenChange={onOpenChange} />
+      </BackofficeProvider>,
+    ),
+  };
+}
+
+describe("CommandPalette standalone (story shape)", () => {
+  it("mounts open with no shell and no trigger, showing recents", async () => {
+    renderStandalone();
+    const palette = await screen.findByTestId("backoffice-command-palette");
+    expect(palette).toBeTruthy();
+    expect(await screen.findByTestId("backoffice-palette-section-recents")).toBeTruthy();
+    // No navbar in this shape — the palette owns no trigger of its own.
+    expect(screen.queryByTestId("backoffice-awesomebar")).toBeNull();
+  });
+
+  it("open={false} paints nothing", () => {
+    renderStandalone(false);
+    expect(screen.queryByTestId("backoffice-command-palette")).toBeNull();
+  });
+
+  it("a pick navigates through the provider navigator and asks the host to close", async () => {
+    const { navigation, onOpenChange } = renderStandalone();
+    const palette = await screen.findByTestId("backoffice-command-palette");
+    const input = palette.querySelector("input");
+    if (!input) throw new Error("palette input not found");
+
+    fireEvent.change(input, { target: { value: "note" } });
+    await waitFor(() => findOption("New Note"));
+    fireEvent.keyDown(input, { key: "Enter" });
+
+    expect(navigation.getLocation().path).toBe("/backoffice/note/new");
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+});

package/src/chrome/CommandPalette.stories.tsx

@@ -0,0 +1,207 @@
+// OWNER: backoffice screens workstream (MPO-189).
+// CommandPalette stories (MOD-01). The Awesomebar story only shows the
+// TRIGGER; these mount the palette itself, open, so the section model
+// (recents → actions → navigation → documents) and the roving highlight are
+// visible without a keystroke.
+//
+// Fixtures do the work: the DocType + Workspace catalog is read straight
+// from the fixture provider (awesomebar-data's fixture branch), recents come
+// from the shared desk store seeded below, and only the document section
+// needs the desk full-text RPC — answered by a fetch mock scoped to this
+// story's mock host.
+import { Button } from "@multiplatform.one/forms";
+import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
+import { storage } from "@multiplatform.one/store";
+import { Text, YStack } from "@multiplatform.one/components";
+import { useState, type ReactNode } from "react";
+import { BackofficeProvider } from "../config/BackofficeProvider";
+import { createMemoryNavigator } from "../navigation/navigator";
+import { CommandPalette } from "./CommandPalette";
+
+const meta = {
+  title: "Screens/Backoffice/CommandPalette",
+  component: CommandPalette,
+  tags: ["!test"],
+  parameters: {
+    status: { type: "stable" },
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Linear / Spotlight / Frappe awesomebar in one surface: an empty query lists recent documents; typing adds contextual actions for the best doctype match (New / List / Report / Kanban), workspace and doctype navigation, and document hits from the desk full-text index. Keyboard-first — the search input is the single tab stop, arrows move one roving highlight across sections, Enter opens, Escape closes and returns focus. Two containers, one model: a centered modal overlay on wide web, a full-height sheet below the medium breakpoint.",
+      },
+    },
+  },
+};
+export default meta;
+
+const MOCK_HOST = "https://backoffice-command-palette.mock.test";
+
+const doctypes = [
+  "ToDo",
+  "ToDo Template",
+  "Note",
+  "User",
+  "Role",
+  "Sales Order",
+  "Sales Invoice",
+  "Item",
+];
+
+const workspaces = [
+  {
+    name: "todos",
+    doctype: "Workspace",
+    title: "Todos",
+    icon: "tool",
+    parent_page: "",
+    public: 1,
+    for_user: "",
+    sequence_id: 1,
+    module: "Automation",
+    is_hidden: 0,
+  },
+  {
+    name: "selling",
+    doctype: "Workspace",
+    title: "Selling",
+    icon: "sell",
+    parent_page: "",
+    public: 1,
+    for_user: "",
+    sequence_id: 2,
+    module: "Selling",
+    is_hidden: 0,
+  },
+];
+
+const makeFixtures = () =>
+  new InMemoryFixtureProvider({
+    DocType: doctypes.map((name) => ({ name, doctype: "DocType" })),
+    Workspace: workspaces,
+    "Notification Log": [],
+  });
+
+/**
+ * Recents ride the SHARED desk store — the same key frappe-ui's DeskSidebar
+ * writes — so an empty query has something to show. Seeded once, web only.
+ */
+(() => {
+  if (typeof window === "undefined") return;
+  const w = window as unknown as Record<string, unknown>;
+  if (w.__commandPaletteRecentsSeeded) return;
+  w.__commandPaletteRecentsSeeded = true;
+  void storage.setItem(
+    "frappe-desk-recent",
+    JSON.stringify([
+      { label: "SO-0042 · Sales Order", path: "/backoffice/sales-order/SO-0042" },
+      { label: "TD-0007 · ToDo", path: "/backoffice/todo/TD-0007" },
+      { label: "Selling", path: "/backoffice/selling" },
+    ]),
+  );
+})();
+
+/**
+ * Document hits need frappe.utils.global_search.search; everything else on
+ * the mock host answers empty (and the session probe answers null, so the
+ * inert host never mints a truthy user).
+ */
+(() => {
+  if (typeof window === "undefined") return;
+  const w = window as unknown as Record<string, unknown>;
+  if (w.__commandPaletteMockFetch) return;
+  w.__commandPaletteMockFetch = true;
+  const realFetch = window.fetch.bind(window);
+  const json = (body: unknown) =>
+    new Response(JSON.stringify(body), {
+      status: 200,
+      headers: { "Content-Type": "application/json" },
+    });
+  window.fetch = async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+    const urlStr =
+      typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
+    if (!urlStr.startsWith(MOCK_HOST)) return realFetch(input as RequestInfo, init);
+    const { pathname } = new URL(urlStr);
+    if (pathname.endsWith("frappe.utils.global_search.search")) {
+      return json({
+        message: [
+          {
+            doctype: "ToDo",
+            name: "TD-0007",
+            content: "Description: pay the rent ||| Status: Open",
+          },
+          {
+            doctype: "Sales Order",
+            name: "SO-0042",
+            content: "Customer: ACME Corp ||| Status: To Deliver",
+          },
+        ],
+      });
+    }
+    if (pathname.endsWith("frappe.auth.get_logged_user")) return json({ message: null });
+    return json({ data: [], message: [] });
+  };
+})();
+
+function Host({ children }: { children: ReactNode }) {
+  return (
+    <BackofficeProvider
+      frappe={{ baseURL: MOCK_HOST, fixtures: makeFixtures() }}
+      navigation={createMemoryNavigator("/backoffice")}
+    >
+      <YStack flex={1} height={620} padding="$4" gap="$3" backgroundColor="$color2">
+        {children}
+      </YStack>
+    </BackofficeProvider>
+  );
+}
+
+/**
+ * Open on an empty query: the Recents section from the shared desk store.
+ * Type to fill Actions / Navigation / Documents; Escape closes.
+ */
+export const Overlay = () => {
+  const [open, setOpen] = useState(true);
+  return (
+    <Host>
+      <Text>Page behind the palette.</Text>
+      <Button onPress={() => setOpen(true)}>Open palette</Button>
+      <CommandPalette open={open} onOpenChange={setOpen} />
+    </Host>
+  );
+};
+Overlay.storyName = "Main";
+
+/**
+ * Closed: the palette owns no trigger of its own (the navbar awesomebar and
+ * the Mod+K shortcut open it), so the closed state is the host page with
+ * nothing painted over it.
+ */
+export const Closed = () => {
+  const [open, setOpen] = useState(false);
+  return (
+    <Host>
+      <Text>Nothing is painted over the page while the palette is closed.</Text>
+      <Button onPress={() => setOpen(true)}>Open palette</Button>
+      <CommandPalette open={open} onOpenChange={setOpen} />
+    </Host>
+  );
+};
+
+/**
+ * The compact container. The palette picks its container from the VIEWPORT,
+ * not a prop (useLayoutSizeClass): below the medium breakpoint — and on
+ * native always — the same section model renders as a full-height
+ * SheetModal instead of the centered overlay. Narrow the preview pane (or
+ * pick a phone viewport) to see this arm switch containers; it is the same
+ * story otherwise, which is the point.
+ */
+export const CompactSheet = () => {
+  const [open, setOpen] = useState(true);
+  return (
+    <Host>
+      <Text>Narrow the preview below the medium breakpoint to get the sheet container.</Text>
+      <CommandPalette open={open} onOpenChange={setOpen} />
+    </Host>
+  );
+};

package/src/desk/Desk.spec.tsx

@@ -285,3 +285,47 @@ describe("two Desks on one page (DK-7)", () => {
     expect(screen.getByTestId("scope-b").textContent).toBe('[["company","=","B"]]');
   });
 });
+
+// ---------------------------------------------------------------------------
+// Story-shape arms (MPO-189) — the narrowings Desk.stories.tsx demonstrates,
+// pinned here so a chrome default can never drift silently.
+// ---------------------------------------------------------------------------
+
+describe("<Desk /> chrome narrowings", () => {
+  it('chrome="bare" keeps the banner and forces the sidebar capability off', () => {
+    renderWithProviders(
+      <Desk frappe={frappe()} doctype="ToDo" chrome="bare" surfaces={{ list: SurfaceProbe }} />,
+    );
+    // Banner present…
+    expect(screen.getByTestId("backoffice-shell")).toBeTruthy();
+    expect(screen.getByTestId("backoffice-awesomebar")).toBeTruthy();
+    // …rail gone: bare merges `sidebar: false` into capabilities, so nothing
+    // downstream can put it back.
+    expect(screen.queryByTestId("backoffice-sidebar-rail")).toBeNull();
+    expect(screen.queryByTestId("backoffice-sidebar-toggle")).toBeNull();
+  });
+
+  it("`embedded` is sugar for chrome='content' (no banner, no rail)", () => {
+    renderWithProviders(
+      <Desk frappe={frappe()} workspace="Tools" embedded surfaces={{ workspace: SurfaceProbe }} />,
+    );
+    expect(screen.queryByTestId("backoffice-shell")).toBeNull();
+    expect(screen.getByTestId("probe-workspace").textContent).toContain('"Tools"');
+  });
+
+  it("a view pin enters on that view rather than the list", () => {
+    renderWithProviders(
+      <Desk frappe={frappe()} doctype="ToDo" view="kanban" surfaces={{ view: SurfaceProbe }} />,
+    );
+    const probe = screen.getByTestId("probe-view");
+    expect(probe.textContent).toContain('"kanban"');
+    expect(probe.textContent).toContain('"ToDo"');
+  });
+
+  it('name="new" enters create mode', () => {
+    renderWithProviders(
+      <Desk frappe={frappe()} doctype="ToDo" name="new" surfaces={{ new: SurfaceProbe }} />,
+    );
+    expect(screen.getByTestId("probe-new").textContent).toContain('"ToDo"');
+  });
+});

package/src/desk/Desk.stories.tsx

@@ -0,0 +1,299 @@
+// OWNER: backoffice screens workstream (MPO-189).
+// <Desk /> stories: the whole desk as one component. One required prop, and
+// that prop is nothing — `<Desk />` renders the full desk, and every other
+// arm here is a NARROWING of that: a pin, a chrome mode, a fence, a surface
+// override.
+//
+// Everything rides fixtures. Doctype meta comes from the fixture provider's
+// "DocType" collection, rows and Workspace docs from the same
+// InMemoryFixtureProvider, and a fetch mock scoped to this story's mock host
+// keeps the navbar's session probe and the desk's catalog reads off the
+// network. Navigation is internal: with no `navigation` prop Desk seeds its
+// own MemoryNavigator from the pins, so the host URL never moves.
+import { Text, YStack } from "@multiplatform.one/components";
+import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
+import type { ReactNode } from "react";
+import { Desk } from "./Desk";
+import type { DeskSurfaceProps } from "./DeskSurface";
+
+const meta = {
+  title: "Screens/Backoffice/Desk",
+  component: Desk,
+  tags: ["!test"],
+  parameters: {
+    status: { type: "stable" },
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "The embeddable desk: navbar and workspace rail, the resolved surface underneath, and one memory navigator when the host supplies no router. Pins (doctype / name / view / workspace / report / path) set the entry surface and, for a doctype pin, the reachability fence; `chrome` picks full banner + rail, banner only, or no chrome at all; `surfaces` replaces a whole screen per kind or per doctype; `scope` filters are ANDed into every doctype-homed query and cannot be cleared from the filter chrome.",
+      },
+    },
+  },
+};
+export default meta;
+
+const MOCK_HOST = "https://backoffice-desk.mock.test";
+
+// ---------------------------------------------------------------------------
+// Fixtures
+// ---------------------------------------------------------------------------
+
+const TASK_DOCTYPE = "QaDeskWorkItem";
+const FIRST_TASK = "QDW-0001";
+
+const taskMeta = {
+  name: TASK_DOCTYPE,
+  doctype: "DocType",
+  module: "QA",
+  title_field: "subject",
+  fields: [
+    { fieldname: "subject", fieldtype: "Data", label: "Subject", in_list_view: 1, reqd: 1 },
+    {
+      fieldname: "status",
+      fieldtype: "Select",
+      label: "Status",
+      options: "Open\nWorking\nDone",
+      in_list_view: 1,
+    },
+    {
+      fieldname: "priority",
+      fieldtype: "Select",
+      label: "Priority",
+      options: "High\nMedium\nLow",
+      in_list_view: 1,
+    },
+    { fieldname: "company", fieldtype: "Data", label: "Company", in_list_view: 1 },
+    { fieldname: "owner_name", fieldtype: "Data", label: "Owner", in_list_view: 1 },
+  ],
+  permissions: [{ role: "All", read: 1, write: 1, create: 1 }],
+};
+
+const statuses = ["Open", "Working", "Done"];
+const priorities = ["High", "Medium", "Low"];
+const companies = ["Acme", "Globex"];
+const owners = ["ana", "bo", "cyrus", "dee"];
+
+const taskDocs = Array.from({ length: 14 }, (_, i) => ({
+  name: `QDW-${String(i + 1).padStart(4, "0")}`,
+  doctype: TASK_DOCTYPE,
+  subject: `Work item ${i + 1}: ${["triage inbox", "ship release", "write docs", "fix flaky test"][i % 4]}`,
+  status: statuses[i % statuses.length],
+  priority: priorities[i % priorities.length],
+  company: companies[i % companies.length],
+  owner_name: owners[i % owners.length],
+}));
+
+const workspaceDocs = [
+  {
+    name: "Tools",
+    doctype: "Workspace",
+    label: "Tools",
+    title: "Tools",
+    icon: "tool",
+    module: "Automation",
+    parent_page: "",
+    public: 1,
+    for_user: "",
+    sequence_id: 1,
+    is_hidden: 0,
+    content: JSON.stringify([
+      {
+        id: "h1",
+        type: "header",
+        data: { text: '<span class="h4"><b>Your Shortcuts</b></span>', col: 12 },
+      },
+      { id: "s1", type: "shortcut", data: { shortcut_name: "Work Items", col: 3 } },
+      {
+        id: "p1",
+        type: "paragraph",
+        data: { text: "This whole desk is served from fixtures.<br>", col: 12 },
+      },
+    ]),
+    shortcuts: [{ name: "sc1", type: "DocType", link_to: TASK_DOCTYPE, label: "Work Items" }],
+    links: [],
+    charts: [],
+    number_cards: [],
+    quick_lists: [],
+  },
+  {
+    name: "Users",
+    doctype: "Workspace",
+    label: "Users",
+    title: "Users",
+    icon: "users",
+    module: "Core",
+    parent_page: "",
+    public: 1,
+    for_user: "",
+    sequence_id: 2,
+    is_hidden: 0,
+    content: JSON.stringify([]),
+    shortcuts: [],
+    links: [],
+    charts: [],
+    number_cards: [],
+    quick_lists: [],
+  },
+];
+
+const makeFixtures = () =>
+  new InMemoryFixtureProvider({
+    DocType: [taskMeta],
+    Workspace: workspaceDocs,
+    "Notification Log": [],
+    [TASK_DOCTYPE]: taskDocs,
+  });
+
+const frappe = () => ({ baseURL: MOCK_HOST, fixtures: makeFixtures() });
+
+/**
+ * Quiet fetch mock for the mock host (navbar session probe, catalog reads),
+ * so no arm ever hits the network. The session probe must answer null: the
+ * generic `message: []` reads as a truthy user docname and crashes the
+ * avatar's initials (BackofficeShell.stories precedent). Web only.
+ */
+(() => {
+  if (typeof window === "undefined") return;
+  const w = window as unknown as Record<string, unknown>;
+  if (w.__deskStoriesMockFetch) return;
+  w.__deskStoriesMockFetch = true;
+  const realFetch = window.fetch.bind(window);
+  window.fetch = async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+    const urlStr =
+      typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
+    if (!urlStr.startsWith(MOCK_HOST)) return realFetch(input as RequestInfo, init);
+    const body =
+      new URL(urlStr).pathname === "/api/method/frappe.auth.get_logged_user"
+        ? { message: null }
+        : { data: [], message: [] };
+    return new Response(JSON.stringify(body), {
+      status: 200,
+      headers: { "Content-Type": "application/json" },
+    });
+  };
+})();
+
+function Frame({ children }: { children: ReactNode }) {
+  return (
+    <YStack height={680} minHeight={0}>
+      {children}
+    </YStack>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Arms
+// ---------------------------------------------------------------------------
+
+/**
+ * No required props: full chrome (navbar + workspace rail) and the home
+ * surface, which lands on the default workspace.
+ */
+export const FullDesk = () => (
+  <Frame>
+    <Desk frappe={frappe()} />
+  </Frame>
+);
+FullDesk.storyName = "Main";
+
+/**
+ * A doctype pin. It sets the entry surface (the list) AND the reachability
+ * fence, and it flips the chrome default to "content" — the embedded shape a
+ * host drops into its own page.
+ */
+export const PinnedList = () => (
+  <Frame>
+    <Desk frappe={frappe()} doctype={TASK_DOCTYPE} />
+  </Frame>
+);
+
+/** doctype + name: the document form, still fenced to that one doctype. */
+export const PinnedForm = () => (
+  <Frame>
+    <Desk frappe={frappe()} doctype={TASK_DOCTYPE} name={FIRST_TASK} />
+  </Frame>
+);
+
+/** doctype + name="new": create mode. */
+export const PinnedNewDocument = () => (
+  <Frame>
+    <Desk frappe={frappe()} doctype={TASK_DOCTYPE} name="new" />
+  </Frame>
+);
+
+/** doctype + view: an alternate view as the entry surface. */
+export const PinnedKanban = () => (
+  <Frame>
+    <Desk frappe={frappe()} doctype={TASK_DOCTYPE} view="kanban" />
+  </Frame>
+);
+
+/** A workspace pin: one page, no rail. */
+export const PinnedWorkspace = () => (
+  <Frame>
+    <Desk frappe={frappe()} workspace="Tools" />
+  </Frame>
+);
+
+/**
+ * chrome="bare": the banner without the workspace rail. The sidebar
+ * capability is forced off with it, so nothing can put the rail back.
+ */
+export const BareChrome = () => (
+  <Frame>
+    <Desk frappe={frappe()} doctype={TASK_DOCTYPE} chrome="bare" />
+  </Frame>
+);
+
+/** chrome="full" over a pin: the pin picks the surface, the host picks the chrome. */
+export const PinnedWithFullChrome = () => (
+  <Frame>
+    <Desk frappe={frappe()} doctype={TASK_DOCTYPE} chrome="full" />
+  </Frame>
+);
+
+/** `embedded` is sugar for chrome="content": the surface and nothing else. */
+export const Embedded = () => (
+  <Frame>
+    <Desk frappe={frappe()} workspace="Tools" embedded />
+  </Frame>
+);
+
+/**
+ * `scope` is the tenant seam: ANDed into every doctype-homed query, invisible
+ * to the filter chrome and not removable by the user. Here the desk can only
+ * ever see Acme rows, on the list and on every alternate view.
+ */
+export const ScopedToOneTenant = () => (
+  <Frame>
+    <Desk frappe={frappe()} doctype={TASK_DOCTYPE} scope={[["company", "=", "Acme"]]} />
+  </Frame>
+);
+
+function HostSurface({ target }: DeskSurfaceProps) {
+  return (
+    <YStack
+      flex={1}
+      padding="$4"
+      gap="$2"
+      borderWidth={1}
+      borderColor="$borderColor"
+      borderRadius="$3"
+      backgroundColor="$color2"
+    >
+      <Text>{`host-rendered surface for kind "${target.kind}"`}</Text>
+      <Text>{JSON.stringify(target)}</Text>
+    </YStack>
+  );
+}
+
+/**
+ * `surfaces` replaces a whole screen. Overrides are per-Desk by
+ * construction, so two desks on one page never see each other's.
+ */
+export const HostSurfaceOverride = () => (
+  <Frame>
+    <Desk frappe={frappe()} doctype={TASK_DOCTYPE} surfaces={{ list: HostSurface }} />
+  </Frame>
+);