@multiplatform.one/backoffice 6.6.0 → 7.0.0

package/src/views/ViewHeader.tsx

@@ -1,47 +1,34 @@
-// Shared header for the alternate doctype views: title, a view-switcher
-// menu covering every backoffice view (including back to list), and the
-// New button (desk list-header parity). Desk parity: views the doctype
-// cannot render are hidden from the switcher — tree needs meta.is_tree,
-// image needs an image field — and the current view is check-marked.
-import {
-  Button,
-  DropdownMenu,
-  H4,
-  Text,
-  XStack,
-  type DropdownMenuEntry,
-} from "@multiplatform.one/components";
+// Shared header for the alternate doctype views. Desk page-head parity
+// (frappe/public/js/frappe/list/list_view.js setup_page_head): doctype as
+// the page title, a single primary "New {doctype}" (desk "Add {doctype}"),
+// and ListViewSelect as one dropdown — never a segment per view. Catalog
+// PageHeader is the same primitive the list screen uses (LC-16).
+import { PageHeader, YStack } from "@multiplatform.one/components";
+import { Button } from "@multiplatform.one/forms";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { CaretDownIcon, PlusIcon } from "@phosphor-icons/react";
-import { useState } from "react";
+import { ArrowSquareOutIcon, PlusIcon } from "@phosphor-icons/react";
 import { useTranslation } from "react-i18next";
 import {
   useBackofficeCapabilities,
+  useBackofficeConfig,
   useBackofficeNavigator,
   useBackofficePaths,
 } from "../config/BackofficeProvider";
+import { openInNewTab } from "../form/platformHooks";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
-import { BACKOFFICE_VIEWS, type BackofficeView } from "../navigation/paths";
-import { detectImageField, useViewMeta } from "./viewMeta";
+import type { BackofficeView } from "../navigation/paths";
+import { deskViewUrl } from "../shared/deskLinks";
+import { deriveAvailableViews } from "./viewAvailability";
+import { useViewMeta } from "./viewMeta";
+import { ViewSwitcherMenu } from "./ViewSwitcherMenu";
 
-export function useViewLabels(): Record<BackofficeView, string> {
-  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
-  return {
-    list: t("views.list", "List"),
-    report: t("views.report", "Report"),
-    kanban: t("views.kanban", "Kanban"),
-    calendar: t("views.calendar", "Calendar"),
-    tree: t("views.tree", "Tree"),
-    image: t("views.image", "Image"),
-    dashboard: t("views.dashboard", "Dashboard"),
-  };
-}
+export { useViewLabels } from "./ViewSwitcherMenu";
 
 /**
- * Views this doctype can actually render (desk parity): tree only for tree
- * doctypes, image only when an image field exists (meta.image_field or an
- * Attach Image field). The provider's `capabilities.views.allow` gates the
- * offer list too. Conditional views stay hidden until meta confirms them;
+ * Views this doctype can actually render, derived from meta by
+ * `deriveAvailableViews` (viewAvailability.ts documents each view's desk
+ * precondition). The provider's `capabilities.views.allow` gates the offer
+ * list too. Conditional views stay hidden until meta confirms them;
  * `current` is always included so the switcher stays honest about where you
  * are (e.g. a deep link to /view/tree on a flat doctype, which renders its
  * own unsupported state).
@@ -49,13 +36,7 @@ export function useViewLabels(): Record<BackofficeView, string> {
 export function useAvailableViews(doctype: string, current?: BackofficeView): BackofficeView[] {
   const { meta } = useViewMeta(doctype);
   const { views } = useBackofficeCapabilities();
-  return BACKOFFICE_VIEWS.filter((candidate) => {
-    if (candidate === current) return true;
-    if (!views.enabled || !views.allow.includes(candidate)) return false;
-    if (candidate === "tree") return !!meta?.is_tree;
-    if (candidate === "image") return !!meta && !!detectImageField(meta);
-    return true;
-  });
+  return deriveAvailableViews(meta, { current, allow: views.enabled ? views.allow : [] });
 }
 
 export interface ViewHeaderProps {
@@ -68,69 +49,52 @@ export function ViewHeader({ doctype, view }: ViewHeaderProps) {
   const navigator = useBackofficeNavigator();
   const paths = useBackofficePaths();
   const { newDoc } = useBackofficeCapabilities();
+  const { frappe } = useBackofficeConfig();
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
   const { knobProps } = useResolvedKnobs();
-  const labels = useViewLabels();
   const availableViews = useAvailableViews(doctype, view);
-  // Controlled so a selection closes the menu (checkbox items keep the
-  // menu open by default — wrong for navigation).
-  const [switcherOpen, setSwitcherOpen] = useState(false);
-
-  // Every entry is a checkbox item (single-select radio semantics): the
-  // shared 18px check gutter keeps labels aligned and the current view
-  // carries the check mark.
-  const switcherItems: DropdownMenuEntry[] = availableViews.map((candidate) => ({
-    key: candidate,
-    label: labels[candidate],
-    checked: candidate === view,
-    onCheckedChange: () => {
-      setSwitcherOpen(false);
-      if (candidate !== view) navigator.navigate(paths.view(doctype, candidate));
-    },
-  }));
+  // Desk counterpart of this exact view (fixture mode has no desk).
+  const deskHref =
+    frappe?.baseURL && !frappe.fixtures ? deskViewUrl(frappe.baseURL, doctype, view) : undefined;
 
   return (
-    <XStack
-      {...knobProps.panelPadding}
-      {...knobProps.gap}
-      alignItems="center"
-      justifyContent="space-between"
-      borderBottomWidth={1}
-      borderBottomColor="$borderColor"
-      flexWrap="wrap"
-    >
-      <XStack {...knobProps.gap} alignItems="center" flexShrink={1}>
-        <H4 numberOfLines={1}>{doctype}</H4>
-        <Text color="$color10" fontSize="$3">
-          {labels[view]}
-        </Text>
-      </XStack>
-      <XStack {...knobProps.gap} alignItems="center">
-        <DropdownMenu
-          items={switcherItems}
-          open={switcherOpen}
-          onOpenChange={setSwitcherOpen}
-          placement="bottom-end"
-        >
-          <Button
-            size="$3"
-            iconAfter={CaretDownIcon}
-            aria-label={t("views.switchView", "Switch view")}
-          >
-            {labels[view]}
-          </Button>
-        </DropdownMenu>
-        {newDoc.enabled && (
-          <Button
-            size="$3"
-            theme="accent"
-            icon={PlusIcon}
-            onPress={() => navigator.navigate(paths.newDoc(doctype))}
-          >
-            {t("views.new", "New")}
-          </Button>
-        )}
-      </XStack>
-    </XStack>
+    <YStack {...knobProps.panelPadding} paddingBottom={0}>
+      <PageHeader
+        title={doctype}
+        actions={
+          <>
+            {deskHref ? (
+              <Button
+                size="$3"
+                circular
+                chromeless
+                icon={ArrowSquareOutIcon}
+                onPress={() => openInNewTab(deskHref)}
+                aria-label={t("views.openInDesk", "Open in Desk")}
+              />
+            ) : null}
+            <ViewSwitcherMenu
+              views={availableViews}
+              current={view}
+              onViewChange={(next) => navigator.navigate(paths.view(doctype, next))}
+            />
+            {newDoc.enabled ? (
+              <Button
+                size="$2"
+                accent
+                icon={PlusIcon}
+                onPress={() => navigator.navigate(paths.newDoc(doctype))}
+                aria-label={t("views.new", {
+                  defaultValue: "New {{doctype}}",
+                  doctype,
+                })}
+              >
+                {t("views.new", { defaultValue: "New {{doctype}}", doctype })}
+              </Button>
+            ) : null}
+          </>
+        }
+      />
+    </YStack>
   );
 }

package/src/views/ViewSwitcherMenu.spec.tsx

@@ -0,0 +1,44 @@
+import { fireEvent, waitFor } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it, vi } from "vitest";
+import { ViewSwitcherMenu } from "./ViewSwitcherMenu";
+
+describe("ViewSwitcherMenu", () => {
+  it("renders nothing when there is nothing to switch to", () => {
+    const { queryByTestId } = renderWithProviders(
+      <ViewSwitcherMenu views={["list"]} current="list" onViewChange={vi.fn()} />,
+    );
+    expect(queryByTestId("list-view-switcher")).toBeNull();
+  });
+
+  it("renders a single dropdown trigger, not a segment per view", () => {
+    const { getByTestId, queryByText } = renderWithProviders(
+      <ViewSwitcherMenu
+        views={["list", "report", "kanban", "dashboard"]}
+        current="list"
+        onViewChange={vi.fn()}
+      />,
+    );
+    expect(getByTestId("list-view-switcher")).toBeTruthy();
+    // Segments would paint every label in the toolbar. The menu keeps them
+    // inside the dropdown — only the current view is visible at rest.
+    expect(queryByText("Report")).toBeNull();
+    expect(queryByText("Kanban")).toBeNull();
+    expect(queryByText("Dashboard")).toBeNull();
+  });
+
+  it("opens a menu of the other views instead of painting them as buttons", async () => {
+    const { getByTestId, getByRole } = renderWithProviders(
+      <ViewSwitcherMenu
+        views={["list", "report", "kanban", "dashboard"]}
+        current="list"
+        onViewChange={vi.fn()}
+      />,
+    );
+    fireEvent.click(getByTestId("list-view-switcher"));
+    const menu = await waitFor(() => getByRole("menu"));
+    expect(menu).toBeTruthy();
+    expect(document.querySelectorAll('[role="menuitemcheckbox"]').length).toBe(4);
+    expect(document.querySelectorAll('[data-testid="list-view-switcher"]').length).toBe(1);
+  });
+});

package/src/views/ViewSwitcherMenu.tsx

@@ -0,0 +1,92 @@
+// Compact view-switcher menu for list + alternate-view headers.
+//
+// Desk's ListViewSelect (frappe/public/js/frappe/list/list_view_select.js)
+// is a dropdown with a lucide icon per view — never a fused ToggleGroup of
+// every offered view. The catalog ViewSwitcher is fine for 2–3 options
+// (calendar month/week/day, Pokemon image/list); seven doctype views as
+// segments dominated the toolbar. This is the desk shape: one trigger
+// showing the current view, the rest inside the menu, current check-marked.
+import { DropdownMenu, type DropdownMenuEntry } from "@multiplatform.one/components";
+import { Button } from "@multiplatform.one/forms";
+import {
+  CalendarBlankIcon,
+  CaretDownIcon,
+  ChartBarIcon,
+  ImageIcon,
+  KanbanIcon,
+  ListBulletsIcon,
+  SquaresFourIcon,
+  TreeStructureIcon,
+  type Icon,
+} from "@phosphor-icons/react";
+import { useTranslation } from "react-i18next";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+import type { BackofficeView } from "../navigation/paths";
+
+/** Phosphor stand-ins for desk's ListViewSelect icon_map. */
+const VIEW_ICONS: Record<BackofficeView, Icon> = {
+  list: ListBulletsIcon,
+  report: ChartBarIcon,
+  kanban: KanbanIcon,
+  calendar: CalendarBlankIcon,
+  tree: TreeStructureIcon,
+  image: ImageIcon,
+  dashboard: SquaresFourIcon,
+};
+
+export function useViewLabels(): Record<BackofficeView, string> {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  return {
+    list: t("views.list", "List"),
+    report: t("views.report", "Report"),
+    kanban: t("views.kanban", "Kanban"),
+    calendar: t("views.calendar", "Calendar"),
+    tree: t("views.tree", "Tree"),
+    image: t("views.image", "Image"),
+    dashboard: t("views.dashboard", "Dashboard"),
+  };
+}
+
+export interface ViewSwitcherMenuProps {
+  views: readonly BackofficeView[];
+  current: BackofficeView;
+  onViewChange: (view: BackofficeView) => void;
+}
+
+/**
+ * Single-select dropdown of the views this doctype can actually render.
+ * Hidden when there is nothing to switch to. The current view is always
+ * check-marked; picking another fires `onViewChange`.
+ */
+export function ViewSwitcherMenu({ views, current, onViewChange }: ViewSwitcherMenuProps) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const labels = useViewLabels();
+  if (views.length <= 1) return null;
+
+  const items: DropdownMenuEntry[] = views.map((candidate) => {
+    const ViewIcon = VIEW_ICONS[candidate];
+    return {
+      key: candidate,
+      label: labels[candidate],
+      icon: <ViewIcon size={16} />,
+      checked: candidate === current,
+      onSelect: () => {
+        if (candidate !== current) onViewChange(candidate);
+      },
+    };
+  });
+
+  return (
+    <DropdownMenu items={items} closeOnSelect placement="bottom-end">
+      <Button
+        size="$3"
+        icon={VIEW_ICONS[current]}
+        iconAfter={CaretDownIcon}
+        aria-label={t("views.switchView", "Switch view")}
+        testID="list-view-switcher"
+      >
+        {labels[current]}
+      </Button>
+    </DropdownMenu>
+  );
+}

package/src/views/connection.ts

@@ -8,6 +8,10 @@ import { useMemo } from "react";
 export interface ViewConnection {
   baseURL: string;
   socketPort?: number;
+  /** Same-origin socket override (see FrappeConfig.socketBaseURL). */
+  socketBaseURL?: string;
+  /** Frappe site name — the realtime Socket.IO namespace. */
+  siteName?: string;
   auth?: {
     useToken?: boolean;
     token?: string | (() => string | Promise<string>);
@@ -21,11 +25,13 @@ export function useViewConnection(): ViewConnection | undefined {
   const config = useFrappeConfig();
   const baseURL = config?.baseURL;
   const socketPort = config?.socketPort;
+  const socketBaseURL = config?.socketBaseURL;
+  const siteName = config?.siteName;
   const auth = config?.auth;
   const syncOptions = config?.syncOptions;
   const fixtures = config?.fixtures;
   return useMemo(() => {
     if (!baseURL) return undefined;
-    return { baseURL, socketPort, auth, syncOptions, fixtures };
-  }, [baseURL, socketPort, auth, syncOptions, fixtures]);
+    return { baseURL, socketPort, socketBaseURL, siteName, auth, syncOptions, fixtures };
+  }, [baseURL, socketPort, socketBaseURL, siteName, auth, syncOptions, fixtures]);
 }

package/src/views/dashboard-data.tsx

@@ -23,7 +23,7 @@ import {
   type AuthConfig,
   type FixtureProvider,
 } from "@multiplatform.one/frappe";
-import { formatAbsoluteDate } from "@multiplatform.one/theme";
+import { formatAbsoluteDate, formatCalendarDate } from "@multiplatform.one/theme";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { createBackofficePaths, type BackofficePaths } from "../navigation/paths";
 import type { FrappeFilters } from "../shared/types";
@@ -88,8 +88,7 @@ export function filteredListHref(
 // ---------------------------------------------------------------------------
 
 export function isoDate(date: Date): string {
-  const pad = (n: number) => String(n).padStart(2, "0");
-  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+  return formatCalendarDate(date);
 }
 
 /** Frappe date-string (YYYY-MM-DD) for `days` days before now. */

package/src/views/kanban-board-controls.tsx

@@ -39,8 +39,9 @@ export interface KanbanBoardPickerProps {
 
 /**
  * Desk "Select Kanban" switcher: a labeled DropdownMenu listing the saved
- * boards (current one check-marked) plus a "New board…" entry. Controlled
- * open state so a selection closes the menu (ViewHeader switcher pattern).
+ * boards (current one check-marked) plus a "New board…" entry. Selecting a
+ * board navigates AND closes via the menu-level closeOnSelect (LC-21
+ * COMMIT; ViewHeader switcher pattern).
  */
 export function KanbanBoardPicker({
   names,
@@ -50,14 +51,12 @@ export function KanbanBoardPicker({
 }: KanbanBoardPickerProps) {
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
   const { knobProps } = useResolvedKnobs();
-  const [open, setOpen] = useState(false);
 
   const items: DropdownMenuEntry[] = names.map((name) => ({
     key: name,
     label: name,
     checked: name === active,
-    onCheckedChange: () => {
-      setOpen(false);
+    onSelect: () => {
       if (name !== active) onSelect(name);
     },
   }));
@@ -67,10 +66,7 @@ export function KanbanBoardPicker({
       key: "__new-board__",
       label: t("views.kanbanBoardNew", "New board…"),
       icon: <PlusIcon size={14} />,
-      onSelect: () => {
-        setOpen(false);
-        onCreateNew();
-      },
+      onSelect: onCreateNew,
     });
   }
 
@@ -79,7 +75,7 @@ export function KanbanBoardPicker({
       <Text color="$color10" fontSize="$2">
         {t("views.kanbanBoard", "Board")}
       </Text>
-      <DropdownMenu items={items} open={open} onOpenChange={setOpen} placement="bottom-start">
+      <DropdownMenu items={items} closeOnSelect placement="bottom-start">
         <Button
           size="$3"
           iconAfter={CaretDownIcon}
@@ -193,7 +189,9 @@ export function CreateBoardDialog({
           <Text color="$color10" fontSize="$2">
             {t("views.kanbanBoardCreateField", "Group by")}
           </Text>
-          <DropdownMenu items={fieldItems} placement="bottom-start">
+          {/* LC-21 COMMIT: single-select radio-style picker — the pick
+              completes the contract, so the menu closes on select. */}
+          <DropdownMenu items={fieldItems} closeOnSelect placement="bottom-start">
             <Button
               size="$3"
               iconAfter={CaretDownIcon}

package/src/views/viewAvailability.spec.ts

@@ -0,0 +1,199 @@
+// Fixture meta in → expected view list out. The fixture shapes mirror real
+// bench doctypes whose desk switcher was observed live (frappe 15.8.1,
+// p-results/audit-view-switcher-meta.md): ToDo, Test Tree Node, Note, User,
+// Pokemon, Activity Log.
+import { describe, expect, it } from "vitest";
+import type { DoctypeMeta } from "../shared/useDoctypeMeta";
+import { deriveAvailableViews, isViewSupported } from "./viewAvailability";
+
+function makeMeta(overrides: Partial<DoctypeMeta> = {}): DoctypeMeta {
+  return { name: "QaDoc", fields: [], ...overrides };
+}
+
+/** ToDo shape: Select fields + `__calendar_js` — kanban + calendar, no tree/image. */
+const todoLike = makeMeta({
+  name: "ToDo",
+  __calendar_js: "frappe.views.calendar['ToDo'] = {};",
+  fields: [
+    { fieldname: "description", fieldtype: "Small Text" },
+    { fieldname: "status", fieldtype: "Select", options: "Open\nClosed\nCancelled" },
+    { fieldname: "priority", fieldtype: "Select", options: "High\nMedium\nLow" },
+    { fieldname: "date", fieldtype: "Date" },
+  ],
+});
+
+/** Test Tree Node shape: is_tree and nothing else. */
+const treeNodeLike = makeMeta({
+  name: "Test Tree Node",
+  is_tree: 1,
+  fields: [{ fieldname: "tree_node_name", fieldtype: "Data" }],
+});
+
+/** Note shape: a date field only — neither calendar (no `__calendar_js`)
+ * nor kanban (no Select field). */
+const noteLike = makeMeta({
+  name: "Note",
+  fields: [
+    { fieldname: "title", fieldtype: "Data" },
+    { fieldname: "expire_notification_on", fieldtype: "Date" },
+  ],
+});
+
+/** User shape: image_field + date + Select fields. No calendar asset. */
+const userLike = makeMeta({
+  name: "User",
+  image_field: "user_image",
+  fields: [
+    { fieldname: "user_image", fieldtype: "Attach Image" },
+    { fieldname: "birth_date", fieldtype: "Date" },
+    { fieldname: "desk_theme", fieldtype: "Select", options: "Light\nDark" },
+  ],
+});
+
+/** Pokemon shape: image_field only — no date, no Select. */
+const pokemonLike = makeMeta({
+  name: "Pokemon",
+  image_field: "sprite_front",
+  fields: [
+    { fieldname: "pokemon_name", fieldtype: "Data" },
+    { fieldname: "sprite_front", fieldtype: "Attach Image" },
+  ],
+});
+
+/** Activity Log: a Datetime + a Select, but no calendar config, not a
+ * tree, no image_field. The date field used to leak Calendar into the
+ * switcher (superset-of-desk bug). */
+const activityLogLike = makeMeta({
+  name: "Activity Log",
+  fields: [
+    { fieldname: "subject", fieldtype: "Data" },
+    { fieldname: "user", fieldtype: "Link", options: "User" },
+    { fieldname: "operation", fieldtype: "Select", options: "Login\nLogout\nImpersonate" },
+    { fieldname: "communication_date", fieldtype: "Datetime" },
+  ],
+});
+
+describe("deriveAvailableViews", () => {
+  it("offers kanban + calendar for a ToDo-shaped doctype, never tree/image", () => {
+    expect(deriveAvailableViews(todoLike)).toEqual([
+      "list",
+      "report",
+      "kanban",
+      "calendar",
+      "dashboard",
+    ]);
+  });
+
+  it("offers tree for an is_tree doctype", () => {
+    expect(deriveAvailableViews(treeNodeLike)).toEqual(["list", "report", "tree", "dashboard"]);
+  });
+
+  it("offers tree when the meta ships __tree_js (desk treeview_settings source)", () => {
+    const meta = makeMeta({ __tree_js: "frappe.treeview_settings['QaDoc'] = {};" });
+    expect(deriveAvailableViews(meta)).toContain("tree");
+  });
+
+  it("hides calendar and kanban for a Note-shaped doctype (date field is not a calendar config)", () => {
+    expect(deriveAvailableViews(noteLike)).toEqual(["list", "report", "dashboard"]);
+  });
+
+  it("offers image for doctypes with meta.image_field", () => {
+    expect(deriveAvailableViews(userLike)).toEqual([
+      "list",
+      "report",
+      "kanban",
+      "image",
+      "dashboard",
+    ]);
+    expect(deriveAvailableViews(pokemonLike)).toEqual(["list", "report", "image", "dashboard"]);
+  });
+
+  it("does not offer image off a stray Attach Image field without meta.image_field", () => {
+    const meta = makeMeta({
+      fields: [{ fieldname: "photo", fieldtype: "Attach Image" }],
+    });
+    expect(deriveAvailableViews(meta)).not.toContain("image");
+  });
+
+  it("hides calendar/tree/image for Activity Log (date + Select, no calendar config)", () => {
+    expect(deriveAvailableViews(activityLogLike)).toEqual([
+      "list",
+      "report",
+      "kanban",
+      "dashboard",
+    ]);
+  });
+
+  it("ignores hidden fields when detecting kanban / image support", () => {
+    const meta = makeMeta({
+      fields: [
+        { fieldname: "status", fieldtype: "Select", options: "A\nB", hidden: 1 },
+        { fieldname: "date", fieldtype: "Date", hidden: 1 },
+        { fieldname: "photo", fieldtype: "Attach Image", hidden: 1 },
+      ],
+    });
+    expect(deriveAvailableViews(meta)).toEqual(["list", "report", "dashboard"]);
+  });
+
+  it("treats a Select field without options as no kanban axis", () => {
+    const meta = makeMeta({
+      fields: [{ fieldname: "status", fieldtype: "Select", options: "" }],
+    });
+    expect(deriveAvailableViews(meta)).not.toContain("kanban");
+  });
+
+  it("offers only the unconditional views while meta is loading", () => {
+    expect(deriveAvailableViews(undefined)).toEqual(["list", "report", "dashboard"]);
+  });
+
+  it("always keeps the current view, even when unsupported (honest deep link)", () => {
+    expect(deriveAvailableViews(noteLike, { current: "tree" })).toEqual([
+      "list",
+      "report",
+      "tree",
+      "dashboard",
+    ]);
+    expect(deriveAvailableViews(undefined, { current: "kanban" })).toContain("kanban");
+  });
+
+  it("intersects with the host allowlist (current view still wins)", () => {
+    expect(deriveAvailableViews(todoLike, { allow: ["list", "kanban"] })).toEqual([
+      "list",
+      "kanban",
+    ]);
+    expect(deriveAvailableViews(todoLike, { allow: [], current: "report" })).toEqual(["report"]);
+  });
+});
+
+describe("isViewSupported", () => {
+  it("list / report / dashboard are unconditional", () => {
+    const bare = makeMeta();
+    expect(isViewSupported("list", bare)).toBe(true);
+    expect(isViewSupported("report", bare)).toBe(true);
+    expect(isViewSupported("dashboard", bare)).toBe(true);
+  });
+
+  it("kanban is supported-but-unconfigured with a Select field and no board (stays visible)", () => {
+    // Board existence is a config doc, not meta: it must never gate
+    // availability — KanbanView offers the create-board dialog instead of
+    // an empty board.
+    expect(isViewSupported("kanban", todoLike)).toBe(true);
+    expect(isViewSupported("kanban", noteLike)).toBe(false);
+  });
+
+  it("tree needs is_tree or __tree_js", () => {
+    expect(isViewSupported("tree", treeNodeLike)).toBe(true);
+    expect(isViewSupported("tree", todoLike)).toBe(false);
+  });
+
+  it("calendar needs __calendar_js, not merely a Date field", () => {
+    expect(isViewSupported("calendar", todoLike)).toBe(true);
+    expect(isViewSupported("calendar", noteLike)).toBe(false);
+    expect(isViewSupported("calendar", activityLogLike)).toBe(false);
+  });
+
+  it("image needs meta.image_field", () => {
+    expect(isViewSupported("image", userLike)).toBe(true);
+    expect(isViewSupported("image", activityLogLike)).toBe(false);
+  });
+});