@multiplatform.one/backoffice 6.4.0 → 6.4.2

package/src/workspace/WorkspaceGrid.tsx

@@ -0,0 +1,82 @@
+/**
+ * 12-column workspace grid — desk parity for the editorjs block layout.
+ *
+ * Blocks carry a `col` span (3 = shortcut, 4 = card, 12 = full row).
+ * Consecutive blocks accumulate into rows of up to 12 columns and each row
+ * lays out with flex ratios, so no pixel math is needed. The container
+ * measures itself with `onLayout` (cross-platform — no media queries, no
+ * DOM) and collapses spans on narrow widths: everything full-width on
+ * phones, two-up on mid widths, desk's ~3–4 column layout when wide.
+ */
+import { XStack, YStack, type YStackProps } from "@multiplatform.one/components";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useState, type ReactNode } from "react";
+
+/** Container width below which every block is full-width. */
+const NARROW_MAX = 640;
+/** Container width below which small blocks go two-up. */
+const MEDIUM_MAX = 960;
+
+export interface WorkspaceGridItem {
+  key: string;
+  /** 12-column span requested by the block (defaults to 12). */
+  col?: number;
+  node: ReactNode;
+}
+
+function effectiveSpan(raw: number | undefined, width: number): number {
+  const span = Math.min(Math.max(Math.round(raw ?? 12), 1), 12);
+  if (width <= 0) return span; // not measured yet — desk-wide layout
+  if (width < NARROW_MAX) return 12;
+  if (width < MEDIUM_MAX) return span <= 6 ? 6 : 12;
+  return span;
+}
+
+export interface WorkspaceGridProps extends YStackProps {
+  items: WorkspaceGridItem[];
+}
+
+export function WorkspaceGrid({ items, ...stackProps }: WorkspaceGridProps) {
+  const { knobProps } = useResolvedKnobs();
+  const [width, setWidth] = useState(0);
+
+  // Chunk consecutive blocks into rows of up to 12 columns (desk behavior).
+  const rows: Array<Array<{ item: WorkspaceGridItem; span: number }>> = [];
+  let current: Array<{ item: WorkspaceGridItem; span: number }> = [];
+  let used = 0;
+  for (const item of items) {
+    const span = effectiveSpan(item.col, width);
+    if (used + span > 12 && current.length > 0) {
+      rows.push(current);
+      current = [];
+      used = 0;
+    }
+    current.push({ item, span });
+    used += span;
+  }
+  if (current.length > 0) rows.push(current);
+
+  return (
+    <YStack
+      {...knobProps.gap}
+      onLayout={(event) => setWidth(event.nativeEvent.layout.width)}
+      {...stackProps}
+    >
+      {rows.map((row, rowIndex) => {
+        const rowUsed = row.reduce((sum, cell) => sum + cell.span, 0);
+        return (
+          <XStack key={row[0]?.item.key ?? rowIndex} {...knobProps.gap} alignItems="stretch">
+            {row.map(({ item, span }) => (
+              <YStack key={item.key} flexGrow={span} flexShrink={1} flexBasis={0} minWidth={0}>
+                {item.node}
+              </YStack>
+            ))}
+            {/* Filler keeps a partial row's cells at their 12-col width
+                (a lone col-3 shortcut stays ~25%, like desk). */}
+            {rowUsed < 12 ? <YStack flexGrow={12 - rowUsed} flexBasis={0} /> : null}
+          </XStack>
+        );
+      })}
+    </YStack>
+  );
+}

package/src/workspace/WorkspaceLinkCard.tsx

@@ -0,0 +1,134 @@
+/**
+ * Workspace link card — desk parity for the `card` content block: a titled
+ * card listing the Link rows that follow the matching "Card Break" row in
+ * the `links` child table. DocType links navigate to the doctype list;
+ * Report/Page links go through the slug router best-effort (see
+ * `resolveLinkTarget`).
+ *
+ * Rendering gates: link rows targeting doctypes outside the provider's
+ * `doctypes` scope are hidden, and DocType/Report rows (list-surface
+ * navigations) are hidden entirely when the `views` capability is off.
+ */
+import { Card, SizableText, XStack, YStack } from "@multiplatform.one/components";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useTranslation } from "react-i18next";
+import {
+  useBackofficeCapabilities,
+  useBackofficeNavigator,
+  useBackofficePaths,
+  useIsDoctypeAllowed,
+} from "../config/BackofficeProvider";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+import { createBackofficePaths, type BackofficePaths } from "../navigation/paths";
+import type { WorkspaceLinkGroup, WorkspaceLinkRow } from "./types";
+
+const defaultPaths = createBackofficePaths();
+
+/**
+ * Resolve a Workspace Link row to a router path (basePath-aware when the
+ * provider's `paths` are passed; defaults to the canonical "/backoffice").
+ * - DocType → paths.list(link_to)
+ * - Report → paths.list(link_to) fallback (no query-report route yet — the
+ *   slug router decides; documented gap)
+ * - Page → `{base}/<link_to>` (page names are already slugs)
+ * - anything else → disabled
+ */
+export function resolveLinkTarget(
+  row: WorkspaceLinkRow,
+  paths: BackofficePaths = defaultPaths,
+): {
+  path?: string;
+  disabled?: boolean;
+} {
+  const target = row.link_to ?? "";
+  if (!target) return { disabled: true };
+  const prefix = paths.base === "/" ? "" : paths.base;
+  switch (row.link_type) {
+    case "DocType":
+      return { path: paths.list(target) };
+    case "Report":
+      return { path: paths.list(target) };
+    case "Page":
+      return { path: `${prefix}/${target}` };
+    default:
+      return { disabled: true };
+  }
+}
+
+function LinkRow({ row }: { row: WorkspaceLinkRow }) {
+  const navigator = useBackofficeNavigator();
+  const paths = useBackofficePaths();
+  const target = resolveLinkTarget(row, paths);
+  return (
+    <XStack
+      onPress={target.disabled ? undefined : () => target.path && navigator.navigate(target.path)}
+      disabled={target.disabled}
+      opacity={target.disabled ? 0.5 : 1}
+      cursor={target.disabled ? "default" : "pointer"}
+      paddingVertical="$1.5"
+      alignItems="center"
+      role="link"
+      aria-label={row.label}
+      hoverStyle={target.disabled ? undefined : { backgroundColor: "$color3" }}
+      borderRadius="$2"
+    >
+      <SizableText
+        size="$3"
+        color={target.disabled ? "$color10" : "$color12"}
+        numberOfLines={1}
+        flexShrink={1}
+        hoverStyle={target.disabled ? undefined : { color: "$color12" }}
+      >
+        {row.label}
+      </SizableText>
+    </XStack>
+  );
+}
+
+export interface WorkspaceLinkCardProps {
+  group: WorkspaceLinkGroup;
+}
+
+export function WorkspaceLinkCard({ group }: WorkspaceLinkCardProps) {
+  const { knobProps } = useResolvedKnobs();
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { views } = useBackofficeCapabilities();
+  const isDoctypeAllowed = useIsDoctypeAllowed();
+
+  // Visibility gates: doctype scope + the views capability (DocType/Report
+  // rows navigate to list surfaces). Defaults (scope open, views on) keep
+  // every authored row, desk parity.
+  const visibleLinks = group.links.filter((row) => {
+    if (row.link_type === "DocType" || row.link_type === "Report") {
+      if (!views.enabled) return false;
+      if (row.link_type === "DocType" && row.link_to && !isDoctypeAllowed(row.link_to)) {
+        return false;
+      }
+    }
+    return true;
+  });
+
+  return (
+    <Card flexGrow={1} height="100%">
+      <YStack {...knobProps.panelPadding} {...knobProps.gap} flex={1}>
+        {/* Catalog list-group caption (Sidebar section-label treatment):
+            small-caps muted label, no underline rule — a full-width rule
+            under uneven columns read as table chrome (Axiom 16). */}
+        <SizableText size="$2" fontWeight="600" textTransform="uppercase" color="$color11">
+          {group.label}
+        </SizableText>
+        {visibleLinks.length === 0 ? (
+          <SizableText size="$2" color="$color10">
+            {t("workspaceCardEmpty", "No links in this section")}
+          </SizableText>
+        ) : (
+          <YStack>
+            {visibleLinks.map((row) => (
+              <LinkRow key={row.name} row={row} />
+            ))}
+          </YStack>
+        )}
+      </YStack>
+    </Card>
+  );
+}

package/src/workspace/WorkspaceLinkDirectory.tsx

@@ -0,0 +1,126 @@
+/**
+ * "Browse all" disclosure for the workspace link farm (MOD-11): the grouped
+ * link cards render inside one collapsible region with a local type-to-filter
+ * input, so 20–30 links stay fully reachable and searchable (capability
+ * parity with desk) without owning the top of the landing page. Expanded by
+ * default on desktop-width viewports, collapsed on phones and native.
+ */
+import { EmptyState, Accordion, YStack } from "@multiplatform.one/components";
+import { SearchInput, useViewportGtSm } from "@multiplatform.one/forms";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+import type { WorkspaceLinkGroup } from "./types";
+import { WorkspaceGrid, type WorkspaceGridItem } from "./WorkspaceGrid";
+import { WorkspaceLinkCard } from "./WorkspaceLinkCard";
+
+export interface WorkspaceLinkDirectoryItem {
+  /** Stable key from the authored card block. */
+  key: string;
+  /** Authored 12-column span (defaults to 4, desk's card width). */
+  col?: number;
+  group: WorkspaceLinkGroup;
+}
+
+export interface WorkspaceLinkDirectoryProps {
+  items: WorkspaceLinkDirectoryItem[];
+}
+
+const DIRECTORY_VALUE = "links";
+
+/**
+ * Case-insensitive filter over a link group: a match on the group label
+ * keeps the whole card; otherwise the card narrows to its matching links
+ * (and disappears when none match).
+ */
+export function filterLinkGroup(
+  group: WorkspaceLinkGroup,
+  query: string,
+): WorkspaceLinkGroup | undefined {
+  const needle = query.trim().toLowerCase();
+  if (!needle) return group;
+  if (group.label.toLowerCase().includes(needle)) return group;
+  const links = group.links.filter((row) => row.label.toLowerCase().includes(needle));
+  return links.length > 0 ? { ...group, links } : undefined;
+}
+
+export function WorkspaceLinkDirectory({ items }: WorkspaceLinkDirectoryProps) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { knobProps } = useResolvedKnobs();
+  const viewportGtSm = useViewportGtSm();
+  const [filter, setFilter] = useState("");
+  // Uncontrolled-once default: open on desktop-width viewports, collapsed on
+  // phones/native (SPA render — the viewport is known at first render).
+  // Later resizes don't override the user's toggle.
+  const [openValue, setOpenValue] = useState(() => (viewportGtSm ? DIRECTORY_VALUE : ""));
+
+  const totalLinks = useMemo(
+    () => items.reduce((sum, item) => sum + item.group.links.length, 0),
+    [items],
+  );
+
+  const filteredItems = useMemo<WorkspaceGridItem[]>(
+    () =>
+      items.flatMap((item) => {
+        const group = filterLinkGroup(item.group, filter);
+        if (!group) return [];
+        return [
+          {
+            key: item.key,
+            col: item.col ?? 4,
+            node: <WorkspaceLinkCard group={group} />,
+          },
+        ];
+      }),
+    [items, filter],
+  );
+
+  return (
+    <Accordion
+      type="single"
+      collapsible
+      variant="card"
+      value={openValue}
+      onValueChange={setOpenValue}
+    >
+      <Accordion.Item value={DIRECTORY_VALUE}>
+        <Accordion.Trigger
+          // Count-based plural via i18next suffix resolution ("1 link" /
+          // "N links"); defaultValue_* carries the en fallback per form.
+          description={t("workspaceBrowseAllCount", {
+            count: totalLinks,
+            defaultValue_one: "{{count}} link",
+            defaultValue_other: "{{count}} links",
+          })}
+        >
+          {t("workspaceBrowseAll", "Browse all")}
+        </Accordion.Trigger>
+        <Accordion.Content>
+          <YStack {...knobProps.gap}>
+            <SearchInput
+              value={filter}
+              onChange={setFilter}
+              debounceMs={0}
+              compact
+              placeholder={t("workspaceFilterLinks", "Filter links...")}
+              aria-label={t("workspaceFilterLinks", "Filter links...")}
+            />
+            {filteredItems.length === 0 ? (
+              <EmptyState
+                compact
+                title={t(
+                  "workspaceFilterNoMatch",
+                  'No links match "{{query}}"',
+                  { query: filter.trim() },
+                )}
+              />
+            ) : (
+              <WorkspaceGrid items={filteredItems} />
+            )}
+          </YStack>
+        </Accordion.Content>
+      </Accordion.Item>
+    </Accordion>
+  );
+}

package/src/workspace/WorkspaceNumberCard.tsx

@@ -0,0 +1,126 @@
+/**
+ * Workspace number card block — renders a Number Card doc by name.
+ *
+ * "Document Type" cards (the default) map cleanly onto the live aggregate
+ * widget: `function` (Count/Sum/Average/Minimum/Maximum) +
+ * `aggregate_function_based_on` + `filters_json` become a FrappeKPICard
+ * data source, so the value is realtime like desk. "Report" and "Custom"
+ * cards need server-side evaluation
+ * (`frappe.desk.doctype.number_card.number_card.get_result`) and are
+ * rendered as an informational card for now (documented gap).
+ */
+import { Card, SizableText, Skeleton, YStack } from "@multiplatform.one/components";
+import {
+  FrappeKPICard,
+  type FrappeAggregateOperation,
+  type FrappeKPIDataSource,
+} from "@multiplatform.one/frappe-ui";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+import { parseFrappeFilters } from "./parseContent";
+import type { WorkspaceNumberCardRow } from "./types";
+import { useFrappeDoc } from "./useWorkspaceDoc";
+
+export interface NumberCardDoc {
+  name: string;
+  doctype: string;
+  label?: string;
+  /** "Document Type" | "Report" | "Custom" */
+  type?: string;
+  document_type?: string;
+  /** "Count" | "Sum" | "Average" | "Minimum" | "Maximum" */
+  function?: string;
+  aggregate_function_based_on?: string;
+  filters_json?: string;
+  [key: string]: unknown;
+}
+
+const FUNCTION_MAP: Record<string, FrappeAggregateOperation> = {
+  Count: "count",
+  Sum: "sum",
+  Average: "avg",
+  Minimum: "min",
+  Maximum: "max",
+};
+
+export interface WorkspaceNumberCardProps {
+  row: WorkspaceNumberCardRow;
+}
+
+export function WorkspaceNumberCard({ row }: WorkspaceNumberCardProps) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { knobProps } = useResolvedKnobs();
+  const { doc, isLoading, error } = useFrappeDoc<NumberCardDoc>(
+    "Number Card",
+    row.number_card_name,
+  );
+
+  const title = row.label || doc?.label || row.number_card_name;
+
+  const dataSource = useMemo<FrappeKPIDataSource | undefined>(() => {
+    if (!doc?.document_type) return undefined;
+    if (doc.type && doc.type !== "Document Type") return undefined;
+    const aggregate = FUNCTION_MAP[doc.function ?? "Count"] ?? "count";
+    return {
+      doctype: doc.document_type,
+      aggregate,
+      field: aggregate === "count" ? undefined : doc.aggregate_function_based_on,
+      filters: parseFrappeFilters(doc.filters_json),
+    };
+  }, [doc]);
+
+  if (isLoading) {
+    return (
+      <Card flexGrow={1} aria-busy aria-label={t("loading", "Loading")}>
+        <YStack {...knobProps.panelPadding} {...knobProps.gap}>
+          <Skeleton width="60%" height={12} />
+          <Skeleton width="40%" height={28} />
+        </YStack>
+      </Card>
+    );
+  }
+
+  if (error || !doc) {
+    return (
+      <Card flexGrow={1}>
+        <YStack {...knobProps.panelPadding} {...knobProps.gap}>
+          <SizableText size="$3" fontWeight="600">
+            {title}
+          </SizableText>
+          <SizableText size="$2" color="$color10">
+            {t("workspaceNumberCardError", "Couldn't load number card")}
+          </SizableText>
+        </YStack>
+      </Card>
+    );
+  }
+
+  if (!dataSource) {
+    // Report / Custom cards need server-side evaluation — not wired yet.
+    return (
+      <Card flexGrow={1}>
+        <YStack {...knobProps.panelPadding} {...knobProps.gap}>
+          <SizableText size="$3" fontWeight="600">
+            {title}
+          </SizableText>
+          <SizableText size="$2" color="$color10">
+            {t(
+              "workspaceNumberCardUnsupported",
+              "This card type is only available in desk",
+            )}
+          </SizableText>
+        </YStack>
+      </Card>
+    );
+  }
+
+  return (
+    <FrappeKPICard
+      config={{ id: `workspace-number-card-${row.name}`, title, value: "—" }}
+      dataSource={dataSource}
+      flexGrow={1}
+    />
+  );
+}

package/src/workspace/WorkspaceQuickList.tsx

@@ -0,0 +1,100 @@
+/**
+ * Workspace quick list block — a compact live list of a doctype with the
+ * row's `quick_list_filter` applied, plus a "View All" jump to the full
+ * list page. Rows navigate to the document form. Rows show the document
+ * name — desk shows the meta title field, which needs a DocType meta
+ * fetch (documented simplification).
+ */
+import { Card, Separator, SizableText, XStack, YStack } from "@multiplatform.one/components";
+import { FrappeList } from "@multiplatform.one/frappe-ui";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { useBackofficeNavigator, useBackofficePaths } from "../config/BackofficeProvider";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+import { parseFrappeFilters } from "./parseContent";
+import type { WorkspaceQuickListRow } from "./types";
+
+interface QuickListDoc {
+  name: string;
+  doctype: string;
+}
+
+// Generic JSX (`<FrappeList<QuickListDoc> …/>`) breaks one-dev's source
+// annotation transform; instantiate the type argument outside JSX instead.
+const QuickList = FrappeList<QuickListDoc>;
+
+/** Fixed viewport for the compact list (~4 rows + load-more headroom). */
+const QUICK_LIST_HEIGHT = 220;
+
+export interface WorkspaceQuickListProps {
+  row: WorkspaceQuickListRow;
+}
+
+export function WorkspaceQuickList({ row }: WorkspaceQuickListProps) {
+  const navigator = useBackofficeNavigator();
+  const paths = useBackofficePaths();
+  const { knobProps } = useResolvedKnobs();
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+
+  const filters = useMemo(() => parseFrappeFilters(row.quick_list_filter), [row.quick_list_filter]);
+
+  const title = row.label || row.document_type;
+
+  return (
+    <Card flexGrow={1}>
+      <YStack {...knobProps.panelPadding} {...knobProps.gap}>
+        <XStack justifyContent="space-between" alignItems="center" {...knobProps.gap}>
+          <SizableText size="$4" fontWeight="700" numberOfLines={1} flexShrink={1}>
+            {title}
+          </SizableText>
+          <SizableText
+            size="$2"
+            color="$color11"
+            cursor="pointer"
+            role="link"
+            hoverStyle={{ color: "$color12" }}
+            onPress={() => navigator.navigate(paths.list(row.document_type))}
+          >
+            {t("workspaceQuickListViewAll", "View All")}
+          </SizableText>
+        </XStack>
+        <Separator />
+        {/* Fixed-height box: FrappeList's internal flex-basis:0 stack
+            contributes no intrinsic height, so an unclamped Card collapses
+            and the rows paint past the frame (LC-10). The box gives the
+            flex chain a definite height to fill. */}
+        <YStack height={QUICK_LIST_HEIGHT} overflow="hidden">
+          <QuickList
+            doctype={row.document_type}
+            fields={["name"]}
+            filters={filters as Array<["name", string, unknown]> | undefined}
+            pageSize={4}
+            height={QUICK_LIST_HEIGHT}
+            estimateSize={44}
+            aria-label={title}
+            renderItem={(item) => (
+              <XStack
+                paddingVertical="$2"
+                paddingHorizontal="$2"
+                alignItems="center"
+                cursor="pointer"
+                borderRadius="$2"
+                hoverStyle={{ backgroundColor: "$color3" }}
+                onPress={() =>
+                  item.name && navigator.navigate(paths.form(row.document_type, item.name))
+                }
+                role="link"
+                aria-label={item.name}
+              >
+                <SizableText size="$3" numberOfLines={1} flexShrink={1}>
+                  {item.name}
+                </SizableText>
+              </XStack>
+            )}
+          />
+        </YStack>
+      </YStack>
+    </Card>
+  );
+}

package/src/workspace/WorkspaceRecents.tsx

@@ -0,0 +1,100 @@
+/**
+ * "Continue where you left off" strip (MOD-11) — a wrapping band of chips
+ * for the most recent backoffice visits, read from the shared desk recents
+ * store (chrome/awesomebar-data's readRecentItems over the same
+ * "frappe-desk-recent" key frappe-ui's addToRecent writes — one list across
+ * navbar recents, sidebar recents, and this strip; no new store).
+ *
+ * Renders nothing while the store is unread or empty — the strip is
+ * discovery chrome, not data the page promised (no skeleton, D-10).
+ * Refreshes on mount and on window focus (web); paths outside the
+ * provider's basePath (e.g. the frappe-ui `/desk` demo shell writes there
+ * too) are filtered out so every chip stays navigable in this app.
+ */
+import { ClockCounterClockwiseIcon } from "@phosphor-icons/react";
+import { Card, PageSection, SizableText, XStack, useTheme } from "@multiplatform.one/components";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { readRecentItems, type RecentItem } from "../chrome/awesomebar-data";
+import { useBackofficeNavigator, useBackofficePaths } from "../config/BackofficeProvider";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+
+/** Last N visits shown (MOD-11: "last 5 items from the shared recents store"). */
+const MAX_RECENTS = 5;
+
+export function WorkspaceRecents() {
+  const navigator = useBackofficeNavigator();
+  const paths = useBackofficePaths();
+  const { knobProps } = useResolvedKnobs();
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const theme = useTheme();
+  // Phosphor icons take a resolved color string, not a tamagui token —
+  // read the theme value so native/GTK get a real color (not a CSS var).
+  const iconColor = typeof theme.color11?.val === "string" ? theme.color11.val : undefined;
+  const [recents, setRecents] = useState<RecentItem[]>([]);
+
+  const mountedRef = useRef(true);
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+
+  const base = paths.base;
+  const refresh = useCallback(() => {
+    void readRecentItems().then((stored) => {
+      if (!mountedRef.current) return;
+      setRecents(stored.filter((item) => item.path.startsWith(base)).slice(0, MAX_RECENTS));
+    });
+  }, [base]);
+
+  // Fresh on mount and whenever the window regains focus (another surface
+  // may have pushed a visit since) — same staleness contract as the
+  // awesomebar's refresh-on-open.
+  useEffect(() => {
+    refresh();
+    if (typeof window === "undefined" || typeof window.addEventListener !== "function") {
+      return undefined;
+    }
+    const onFocus = () => refresh();
+    window.addEventListener("focus", onFocus);
+    return () => window.removeEventListener("focus", onFocus);
+  }, [refresh]);
+
+  if (recents.length === 0) return null;
+
+  return (
+    // Section heading on the shared sectionHeading scale (LC-17); no
+    // divider rule over a chip band (Axiom 16 chrome-earns-role).
+    <PageSection
+      title={t("workspaceRecents", "Continue where you left off")}
+      divider={false}
+    >
+      <XStack flexWrap="wrap" {...knobProps.gap}>
+        {recents.map((item) => (
+          <Card
+            key={item.path}
+            // Chip-scale surface: eject the Card's default panelPadding —
+            // the inner row owns the compact inset (LC-18 eject-last).
+            padding={0}
+            onPress={() => navigator.navigate(item.path)}
+            cursor="pointer"
+            hoverStyle={{ borderColor: "$accentBackground" }}
+            pressStyle={{ scale: 0.98 }}
+            role="link"
+            aria-label={item.label}
+          >
+            <XStack paddingHorizontal="$3" minHeight={44} alignItems="center" {...knobProps.gap}>
+              <ClockCounterClockwiseIcon size={14} color={iconColor} aria-hidden />
+              <SizableText size="$3" numberOfLines={1} flexShrink={1}>
+                {item.label}
+              </SizableText>
+            </XStack>
+          </Card>
+        ))}
+      </XStack>
+    </PageSection>
+  );
+}