npm - @crossworks/share-ui - Versions diffs - 0.230.43 - Mend

@crossworks/share-ui 0.230.43

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (44) hide show

package/LICENSE.md +135 -0
package/package.json +68 -0
package/src/app-bridge-protocol.ts +115 -0
package/src/app-presenter.tsx +25 -0
package/src/app-sandbox.tsx +552 -0
package/src/appearance.ts +192 -0
package/src/avatar.test.ts +229 -0
package/src/avatar.ts +731 -0
package/src/backgrounds.test.ts +119 -0
package/src/backgrounds.ts +118 -0
package/src/draw-presenter.tsx +39 -0
package/src/event-presenter.tsx +62 -0
package/src/file-presenter.tsx +76 -0
package/src/formula-calculator.tsx +209 -0
package/src/formula-presenter.test.ts +128 -0
package/src/formula-presenter.tsx +301 -0
package/src/help-topics.ts +104 -0
package/src/lib/ink-audit.test.ts +314 -0
package/src/lib/theme-css-blocks.ts +26 -0
package/src/lib/theme-generator.test.ts +179 -0
package/src/lib/theme-registry.gen.ts +352 -0
package/src/lib/themes.test.ts +308 -0
package/src/lib/themes.ts +75 -0
package/src/lib/utils.ts +6 -0
package/src/nav-items.ts +225 -0
package/src/note-presenter.tsx +14 -0
package/src/page-outline.tsx +127 -0
package/src/table-presenter.tsx +226 -0
package/src/task-presenter.tsx +60 -0
package/src/ui/button.tsx +50 -0
package/src/ui/input.tsx +18 -0
package/src/ui/label.tsx +20 -0
package/src/view-payload.ts +82 -0
package/styles/app.css +1098 -0
package/styles/themes.css +6198 -0
package/themes/generate.d.mts +11 -0
package/themes/generate.mjs +618 -0
package/themes/model.d.mts +24 -0
package/themes/model.mjs +213 -0
package/themes/preview.html +145 -0
package/themes/seeds.d.mts +16 -0
package/themes/seeds.mjs +3694 -0
package/tsconfig.json +15 -0
package/tsconfig.tsbuildinfo +1 -0

package/src/lib/themes.ts ADDED Viewed

@@ -0,0 +1,75 @@
+/**
+ * Color-theme registry. The theme LIST is generated — `themes/seeds.mjs` is
+ * the authored source, `pnpm themes:build` regenerates both the CSS and
+ * `theme-registry.gen.ts`, and the drift test keeps them in lockstep. This
+ * module owns the TYPE, the default, and the random-theme behaviour toggles.
+ *
+ * Swatches ([primary, accent, background], per mode) drive the picker preview
+ * only. Both modes ship because the picker sits inside the app it is theming:
+ * showing light-mode dots to someone browsing in dark mode advertises colours
+ * they would not get.
+ */
+export type ThemeSwatches = readonly [string, string, string];
+export type ColorTheme = {
+  id: string;
+  label: string;
+  swatches: { light: ThemeSwatches; dark: ThemeSwatches };
+};
+import { GENERATED_COLOR_THEMES } from './theme-registry.gen';
+export const COLOR_THEMES: ColorTheme[] = GENERATED_COLOR_THEMES;
+export const DEFAULT_COLOR_THEME = 'clean-slate';
+/** The human label for a theme id — one spelling of a theme's name across the
+ *  whole product. Falls back to the id so an unknown/retired id still reads. */
+export function themeLabel(id: string): string {
+  return COLOR_THEMES.find((t) => t.id === id)?.label ?? id;
+}
+// (No storage key for the theme itself: the choice lives on the anchor
+// owner's profile row and is server-rendered into <html data-color-theme> —
+// see @mantle/web-ui/appearance. The RANDOM_* keys below are genuinely
+// visitor-local behavior toggles, so localStorage remains right for them.)
+/** Whether "random theme" mode (reshuffle on a timer) is on. */
+export const RANDOM_THEME_STORAGE_KEY = 'mantle-random-theme';
+/** Epoch-ms of the last random reshuffle, so the timer survives reloads. */
+export const RANDOM_THEME_AT_STORAGE_KEY = 'mantle-random-theme-at';
+/** Chosen reshuffle cadence, in ms (one of RANDOM_THEME_INTERVALS). */
+export const RANDOM_THEME_INTERVAL_STORAGE_KEY = 'mantle-random-theme-interval';
+const HOUR_MS = 60 * 60 * 1000;
+/** Selectable reshuffle cadences for random-theme mode (the dice menu). */
+export const RANDOM_THEME_INTERVALS: ReadonlyArray<{ ms: number; label: string }> = [
+  { ms: HOUR_MS, label: 'Every hour' },
+  { ms: 6 * HOUR_MS, label: 'Every 6 hours' },
+  { ms: 12 * HOUR_MS, label: 'Every 12 hours' },
+  { ms: 24 * HOUR_MS, label: 'Every day' },
+  { ms: 7 * 24 * HOUR_MS, label: 'Every week' },
+];
+/** Default cadence (12 hours) — used when nothing valid is stored. */
+export const RANDOM_THEME_INTERVAL_MS = 12 * HOUR_MS;
+/** Coerce a stored interval string to a known cadence, else the default. */
+export function coerceRandomInterval(raw: string | null): number {
+  const n = raw ? Number(raw) : NaN;
+  return Number.isFinite(n) && RANDOM_THEME_INTERVALS.some((i) => i.ms === n)
+    ? n
+    : RANDOM_THEME_INTERVAL_MS;
+}
+/**
+ * Pick a random color-theme id, avoiding `exclude` (the current one) so a
+ * reshuffle always visibly changes something. Falls back to the full list if
+ * excluding leaves nothing.
+ */
+export function pickRandomColorTheme(exclude?: string): string {
+  const pool = COLOR_THEMES.filter((t) => t.id !== exclude);
+  const list = pool.length > 0 ? pool : COLOR_THEMES;
+  const picked = list[Math.floor(Math.random() * list.length)] ?? list[0]!;
+  return picked.id;
+}

package/src/lib/utils.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/nav-items.ts ADDED Viewed

@@ -0,0 +1,225 @@
+import {
+  Activity,
+  AppWindow,
+  ArrowUpCircle,
+  BookOpen,
+  BookText,
+  Bot,
+  Boxes,
+  CalendarDays,
+  CheckSquare,
+  Container,
+  DatabaseBackup,
+  ClipboardCheck,
+  DoorOpen,
+  Contact,
+  Cpu,
+  Combine,
+  FileText,
+  FolderTree,
+  GitCompare,
+  GitMerge,
+  Cloud,
+  Hammer,
+  Layers,
+  HeartPulse,
+  Inbox,
+  LayoutDashboard,
+  ListTree,
+  Key,
+  Plug,
+  Lock,
+  Network,
+  NotebookPen,
+  Palette,
+  PenTool,
+  Radio,
+  ScrollText,
+  MessagesSquare,
+  ServerCog,
+  Settings,
+  Sparkles,
+  Table2,
+  Sigma,
+  TerminalSquare,
+  User,
+  UserCheck,
+  Users,
+  UsersRound,
+  Waypoints,
+  Workflow,
+  type LucideIcon,
+} from 'lucide-react';
+/**
+ * Single source of truth for the primary navigation. Consumed by the sidebar
+ * (grouped, with a live pending-approvals badge injected at render) and the
+ * footer quick-menu (flat, ranked by usage). Keeping one list here stops the two
+ * surfaces from drifting apart.
+ */
+export type NavItem = {
+  name: string;
+  href: string;
+  icon: LucideIcon;
+  /** Exact-match only (used for "/" so it doesn't match every route). */
+  exact?: boolean;
+};
+export type NavGroup = {
+  label: string;
+  items: NavItem[];
+  /**
+   * Collapsible groups fold to a usage-ranked *head* — the few destinations
+   * this owner actually returns to — with the rest one disclosure away.
+   *
+   * Which groups get this is a statement about how they're used, not how big
+   * they are. Workspace and Review are the daily surfaces and stay whole even
+   * though Workspace is the larger of the two; Settings and System are a short
+   * head and a long tail, so folding them costs nothing and buys back most of
+   * the sidebar's height.
+   *
+   * Folded, never removed: the sidebar is how someone learns what this product
+   * can do, so every destination stays reachable from it without knowing its
+   * name.
+   */
+  collapsible?: boolean;
+  /** Items shown when collapsed. Ignored unless `collapsible`. */
+  headSize?: number;
+  /**
+   * Cold-start head, by href, in order — what a brain with no usage history
+   * shows. It doubles as the tie-break for equal counts, so a fresh install
+   * renders exactly this list and then drifts toward real behaviour without a
+   * second code path.
+   */
+  defaultHead?: string[];
+};
+export const NAV_GROUPS: NavGroup[] = [
+  {
+    label: 'Workspace',
+    items: [
+      { name: 'Dashboard', href: '/', icon: LayoutDashboard, exact: true },
+      { name: 'Journal', href: '/journal', icon: NotebookPen },
+      { name: 'Email', href: '/inbox', icon: Inbox },
+      { name: 'Files', href: '/files', icon: FolderTree },
+      { name: 'Notes', href: '/notes', icon: FileText },
+      { name: 'Pages', href: '/pages', icon: BookText },
+      { name: 'Draw', href: '/draw', icon: PenTool },
+      { name: 'Tables', href: '/tables', icon: Table2 },
+      { name: 'Formulas', href: '/formulas', icon: Sigma },
+      { name: 'Apps', href: '/apps', icon: AppWindow },
+      { name: 'Tasks', href: '/tasks', icon: CheckSquare },
+      { name: 'Events', href: '/events', icon: CalendarDays },
+      { name: 'Contacts', href: '/contacts', icon: Contact },
+      { name: 'Secrets', href: '/secrets', icon: Lock },
+      { name: 'Docs', href: '/docs', icon: BookOpen },
+    ],
+  },
+  {
+    label: 'Review',
+    items: [
+      { name: 'Models', href: '/models', icon: Boxes },
+      { name: 'Discover', href: '/settings/discover', icon: UserCheck },
+      { name: 'Team', href: '/team-admin', icon: MessagesSquare },
+      { name: 'Pending', href: '/pending', icon: ClipboardCheck },
+      // Was its own 'External' group for this one item — a header earning a row
+      // for a single link. It belongs here on the merits anyway: like Team and
+      // Discover it's owner-space pointed at people who are not the owner, and
+      // it points at the in-shell /team-portal rather than /team (outside the
+      // shell, member credential, no way back).
+      { name: 'Team Portal', href: '/team-portal', icon: DoorOpen },
+    ],
+  },
+  {
+    label: 'Settings',
+    // Twenty-four screens, and the owner returns to a handful. Folded to a head
+    // of five; the cold-start list is the setup path a new brain walks.
+    collapsible: true,
+    headSize: 5,
+    defaultHead: [
+      '/settings/accounts',
+      '/settings/profile',
+      '/settings/appearance',
+      '/settings/agents',
+      '/settings/keys',
+    ],
+    items: [
+      { name: 'Appearance', href: '/settings/appearance', icon: Palette },
+      { name: 'Accounts', href: '/settings/accounts', icon: Settings },
+      { name: 'Microsoft', href: '/settings/microsoft', icon: Cloud },
+      { name: 'Calendars', href: '/settings/calendar', icon: CalendarDays },
+      { name: 'Profile', href: '/settings/profile', icon: User },
+      { name: 'API keys', href: '/settings/keys', icon: Key },
+      { name: 'MCP', href: '/settings/mcp', icon: Plug },
+      { name: 'Agents', href: '/settings/agents', icon: Bot },
+      { name: 'AI workers', href: '/settings/ai-workers', icon: Cpu },
+      { name: 'Worker groups', href: '/settings/worker-groups', icon: UsersRound },
+      { name: 'Embedding', href: '/settings/embedding', icon: Combine },
+      { name: 'Local network', href: '/settings/network', icon: Radio },
+      { name: 'Tools', href: '/settings/tools', icon: Hammer },
+      { name: 'Tool groups', href: '/settings/tool-groups', icon: Layers },
+      { name: 'Skills', href: '/settings/skills', icon: Sparkles },
+      { name: 'Config', href: '/settings/config', icon: GitCompare },
+      { name: 'Heartbeats', href: '/settings/heartbeats', icon: HeartPulse },
+      { name: 'Entities', href: '/settings/entities', icon: GitMerge },
+      { name: 'Peers', href: '/settings/peers', icon: Network },
+      { name: 'PDF passwords', href: '/settings/pdf-passwords', icon: Lock },
+      { name: 'Backups', href: '/settings/backups', icon: DatabaseBackup },
+      { name: 'Updates', href: '/settings/updates', icon: ArrowUpCircle },
+      // Security was folded into Logins: its password change duplicated the
+      // per-login reset, and its device list now reads per login on that screen.
+      { name: 'Logins', href: '/settings/users', icon: Users },
+      { name: 'Audit log', href: '/settings/audit', icon: ScrollText },
+    ],
+  },
+  {
+    label: 'System',
+    // Diagnostics and machinery: reached deliberately, never browsed.
+    collapsible: true,
+    headSize: 3,
+    defaultHead: ['/studio', '/traces', '/debug'],
+    items: [
+      { name: 'Studio', href: '/studio', icon: Waypoints },
+      { name: 'API Console', href: '/dev-tools', icon: TerminalSquare },
+      { name: 'Runners', href: '/runners', icon: ServerCog },
+      // Durable runs surface (docs/runs.md). Nav is a static list with no
+      // per-item conditional-visibility mechanism (only the pending badge is
+      // dynamic), so this ships always-visible — the System-group siblings
+      // (Studio/Runners/Traces/Debug) do the same. It sits next to Debug where
+      // the run view used to live as a tab.
+      { name: 'Runs', href: '/runs', icon: ListTree },
+      // CLI sandboxes (opt-in per box via the `sandboxes` compose profile).
+      // Ships always-visible like its gated sibling Runs — the nav is a static
+      // list with no per-item conditional-visibility mechanism; the page itself
+      // explains how to enable the feature when sandboxd is absent.
+      { name: 'Sandboxes', href: '/sandboxes', icon: Container },
+      { name: 'Traces', href: '/traces', icon: Workflow },
+      { name: 'Debug', href: '/debug', icon: Activity },
+    ],
+  },
+];
+/** Flat list of every nav item, in sidebar order. */
+export const ALL_NAV_ITEMS: NavItem[] = NAV_GROUPS.flatMap((g) => g.items);
+/** Does `pathname` fall under `item`? Exact items match only their own href. */
+export function navItemMatches(item: NavItem, pathname: string): boolean {
+  return item.exact
+    ? pathname === item.href
+    : pathname === item.href || pathname.startsWith(item.href + '/');
+}
+/**
+ * The canonical nav item for a pathname (most specific href wins, so
+ * /settings/agents beats a hypothetical /settings). Used to attribute a visit to
+ * exactly one menu for usage ranking.
+ */
+export function matchNavItem(pathname: string): NavItem | undefined {
+  let best: NavItem | undefined;
+  for (const item of ALL_NAV_ITEMS) {
+    if (navItemMatches(item, pathname) && (!best || item.href.length > best.href.length)) {
+      best = item;
+    }
+  }
+  return best;
+}

package/src/note-presenter.tsx ADDED Viewed

@@ -0,0 +1,14 @@
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+/** Public note render — markdown (GFM) in a centered prose column. */
+export function NotePresenter({ view }: { view: { title: string; content: string } }) {
+  return (
+    <article className="mx-auto max-w-3xl px-6 py-12 md:py-16">
+      <h1 className="mb-8 text-3xl font-bold tracking-tight text-balance">{view.title}</h1>
+      <div className="prose dark:prose-invert max-w-none prose-accent prose-document">
+        <ReactMarkdown remarkPlugins={[remarkGfm]}>{view.content}</ReactMarkdown>
+      </div>
+    </article>
+  );
+}

package/src/page-outline.tsx ADDED Viewed

@@ -0,0 +1,127 @@
+'use client';
+import { useEffect, useState } from 'react';
+import { ChevronLeft, FileText, ListTree } from 'lucide-react';
+import { cn } from './lib/utils';
+import type { TocEntry } from '@mantle/content-core/page-toc';
+const COLLAPSE_KEY = 'mantle:page-outline-collapsed';
+/**
+ * Floating outline / table-of-contents for a page: headings (h1–h3, indented by
+ * level) and sub-page cards (indented under their section). Used on all three
+ * surfaces — editor, in-app read-only view, and the public share page.
+ *
+ * Collapsible: a header toggle hides the list down to a small handle; the
+ * choice persists in localStorage so it sticks across pages + reloads.
+ *
+ * Jumping: pass `onJump` to scroll via the editor API (the editor surface);
+ * omit it and the outline scrolls the DOM element whose `id` matches the block
+ * id (the rendered/public surfaces, where headings carry `id={blockId}`). The
+ * parent owns the floating placement (a sticky left rail); this is just the
+ * list.
+ */
+export function PageOutline({
+  entries,
+  onJump,
+  className,
+}: {
+  entries: TocEntry[];
+  onJump?: (id: string) => void;
+  className?: string;
+}) {
+  const [collapsed, setCollapsed] = useState(false);
+  // Restore the collapse preference on mount (avoids an SSR/first-paint flip).
+  useEffect(() => {
+    try {
+      setCollapsed(localStorage.getItem(COLLAPSE_KEY) === '1');
+    } catch {
+      // ignore unavailable storage
+    }
+  }, []);
+  const toggle = () =>
+    setCollapsed((c) => {
+      const next = !c;
+      try {
+        localStorage.setItem(COLLAPSE_KEY, next ? '1' : '0');
+      } catch {
+        // ignore
+      }
+      return next;
+    });
+  if (entries.length === 0) return null;
+  if (collapsed) {
+    return (
+      <button
+        type="button"
+        onClick={toggle}
+        aria-label="Show outline"
+        title="Show outline"
+        className={cn(
+          'inline-flex size-8 items-center justify-center rounded-md border border-border bg-card text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground',
+          className,
+        )}
+      >
+        <ListTree className="size-4" aria-hidden />
+      </button>
+    );
+  }
+  const jump = (id: string) => {
+    if (onJump) {
+      onJump(id);
+      return;
+    }
+    if (typeof document !== 'undefined') {
+      document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  };
+  return (
+    <nav className={cn('text-sm', className)} aria-label="Page outline">
+      <div className="mb-2 flex items-center justify-between gap-2 px-2">
+        <span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
+          On this page
+        </span>
+        <button
+          type="button"
+          onClick={toggle}
+          aria-label="Hide outline"
+          title="Hide outline"
+          className="flex size-5 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+        >
+          <ChevronLeft className="size-4" aria-hidden />
+        </button>
+      </div>
+      <ul className="space-y-0.5">
+        {entries.map((e) => (
+          <li key={e.id}>
+            <button
+              type="button"
+              onClick={() => jump(e.id)}
+              style={{ paddingLeft: 8 + e.depth * 12 }}
+              title={e.label}
+              className={cn(
+                'flex w-full items-center gap-1.5 rounded-sm py-1 pr-2 text-left leading-snug transition-colors hover:bg-accent hover:text-accent-foreground',
+                e.kind === 'page'
+                  ? 'text-muted-foreground'
+                  : e.level === 1
+                    ? 'font-medium text-foreground'
+                    : 'text-muted-foreground',
+              )}
+            >
+              {e.kind === 'page' && (
+                <FileText className="size-3.5 shrink-0 opacity-70" aria-hidden />
+              )}
+              <span className="truncate">{e.label}</span>
+            </button>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}

package/src/table-presenter.tsx ADDED Viewed

@@ -0,0 +1,226 @@
+'use client';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Loader2, Table2 } from 'lucide-react';
+import { Button } from './ui/button';
+import { cn } from './lib/utils';
+type CellValue = string | number | boolean | string[] | null;
+type PublicRow = { id: string; cells: Record<string, CellValue> };
+type PublicColumn = { id: string; name: string; type: string };
+type PublicTab = { id: string; name: string; rowCount: number; columns: PublicColumn[] };
+const PAGE = 200;
+/**
+ * Public read-only grid for a shared table. File-backed workbooks page their
+ * PUBLISHED rows through GET /s/[token]/rows (offset windows, "Load more");
+ * legacy JSONB tables arrive whole in the share view and render inline.
+ * Raw fetch on purpose: apiFetch is the app shell's authenticated wrapper.
+ * No edit affordances of any kind — the server surface is read-only anyway;
+ * this component simply has nothing to strip.
+ */
+export function TablePresenter({
+  view,
+  token,
+}: {
+  view: {
+    title: string;
+    icon: string | null;
+    tabs: PublicTab[] | null;
+    legacyDoc: { columns: PublicColumn[]; rows: PublicRow[] } | null;
+  };
+  token: string;
+}) {
+  const tabs = view.tabs ?? [];
+  const [tabId, setTabId] = useState<string | null>(tabs[0]?.id ?? null);
+  const tab = tabs.find((t) => t.id === tabId) ?? tabs[0] ?? null;
+  const [rows, setRows] = useState<PublicRow[]>([]);
+  // Seeded from the tab's registry count so the header is accurate before the
+  // first row page lands (and after a failed fetch); the server total from
+  // each successful page overrides it.
+  const [total, setTotal] = useState(tabs[0]?.rowCount ?? 0);
+  const [loading, setLoading] = useState(!!tab);
+  const [failed, setFailed] = useState(false);
+  // Tab-switch race guard: a stale page for the previous tab must not land.
+  const reqSeq = useRef(0);
+  const fetchPage = useCallback(
+    async (offset: number, forTab: string) => {
+      const seq = ++reqSeq.current;
+      setLoading(true);
+      setFailed(false);
+      try {
+        const r = await fetch(
+          `/s/${token}/rows?tab=${encodeURIComponent(forTab)}&offset=${offset}&limit=${PAGE}`,
+          { cache: 'no-store' },
+        );
+        if (!r.ok) throw new Error(String(r.status));
+        const d = (await r.json()) as { rows: PublicRow[]; total: number; offset: number };
+        if (seq !== reqSeq.current) return;
+        setRows((prev) => (offset === 0 ? d.rows : [...prev, ...d.rows]));
+        setTotal(d.total);
+      } catch {
+        if (seq === reqSeq.current) setFailed(true);
+      } finally {
+        if (seq === reqSeq.current) setLoading(false);
+      }
+    },
+    [token],
+  );
+  useEffect(() => {
+    if (tab) {
+      setRows([]);
+      setTotal(tab.rowCount);
+      void fetchPage(0, tab.id);
+    }
+    // Deliberately narrower than exhaustive-deps: refetch when the SELECTED TAB
+    // changes, not when the tab object or `fetchPage` is re-created. `fetchPage`
+    // is useCallback([token]) and a share page's token never changes, and `tab`
+    // comes from a static view — so the wider deps would only ever cause a
+    // redundant refetch that resets the reader's scroll.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tab?.id]);
+  // Memoized so the `?? []` fallback doesn't mint a fresh array each render and
+  // re-run the numericCols useMemo below (react-hooks/exhaustive-deps).
+  const columns = useMemo(
+    () => (view.legacyDoc ? view.legacyDoc.columns : (tab?.columns ?? [])),
+    [view.legacyDoc, tab?.columns],
+  );
+  const shownRows = view.legacyDoc ? view.legacyDoc.rows : rows;
+  const totalRows = view.legacyDoc ? view.legacyDoc.rows.length : total;
+  const hasMore = !view.legacyDoc && shownRows.length < totalRows;
+  const numericCols = useMemo(
+    () =>
+      new Set(columns.filter((c) => c.type === 'number' || c.type === 'currency').map((c) => c.id)),
+    [columns],
+  );
+  return (
+    <div className="mx-auto max-w-6xl px-6 py-12">
+      <header className="mb-6 text-center">
+        <h1 className="text-xl font-semibold tracking-tight">
+          {view.icon ? `${view.icon} ` : ''}
+          {view.title}
+        </h1>
+        <p className="mt-1 text-xs text-muted-foreground">
+          {totalRows} row{totalRows === 1 ? '' : 's'}
+        </p>
+      </header>
+      {tabs.length > 1 && (
+        <div className="mb-3 flex flex-wrap gap-1">
+          {tabs.map((t) => (
+            <button
+              key={t.id}
+              type="button"
+              onClick={() => setTabId(t.id)}
+              className={cn(
+                'rounded-md px-3 py-1.5 text-sm transition-colors',
+                t.id === (tab?.id ?? null)
+                  ? 'bg-primary text-primary-foreground'
+                  : 'text-muted-foreground hover:bg-muted hover:text-foreground',
+              )}
+            >
+              {t.name}
+            </button>
+          ))}
+        </div>
+      )}
+      <div className="overflow-x-auto rounded-lg border border-border">
+        <table className="w-full border-collapse text-sm">
+          <thead>
+            <tr className="border-b border-border bg-muted/50">
+              {columns.map((c) => (
+                <th
+                  key={c.id}
+                  className={cn(
+                    'whitespace-nowrap px-3 py-2 text-left font-medium text-muted-foreground',
+                    numericCols.has(c.id) && 'text-right',
+                  )}
+                >
+                  {c.name}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {shownRows.map((r) => (
+              <tr key={r.id} className="border-b border-border/60 last:border-0 hover:bg-muted/30">
+                {columns.map((c) => (
+                  <td
+                    key={c.id}
+                    className={cn(
+                      'max-w-96 truncate px-3 py-1.5',
+                      numericCols.has(c.id) && 'text-right tabular-nums',
+                    )}
+                  >
+                    <Cell value={r.cells[c.id] ?? null} type={c.type} />
+                  </td>
+                ))}
+              </tr>
+            ))}
+            {shownRows.length === 0 && !loading && (
+              <tr>
+                <td
+                  colSpan={Math.max(columns.length, 1)}
+                  className="px-3 py-8 text-center text-muted-foreground"
+                >
+                  {failed ? 'Could not load rows.' : 'No rows.'}
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+      <div className="mt-3 flex items-center justify-center gap-3">
+        {loading && (
+          <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
+            <Loader2 className="size-3 animate-spin" aria-hidden /> Loading…
+          </span>
+        )}
+        {!loading && hasMore && tab && (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => void fetchPage(shownRows.length, tab.id)}
+          >
+            <Table2 /> Load more ({shownRows.length} of {totalRows})
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
+function Cell({ value, type }: { value: CellValue; type: string }) {
+  if (value === null || value === undefined || value === '') {
+    return <span className="text-muted-foreground/50">—</span>;
+  }
+  if (type === 'checkbox' || typeof value === 'boolean') {
+    return <span>{value ? '✓' : '—'}</span>;
+  }
+  if (Array.isArray(value)) return <>{value.join(', ')}</>;
+  if (type === 'url' && typeof value === 'string') {
+    const href = /^https?:\/\//i.test(value) ? value : null;
+    return href ? (
+      <a
+        href={href}
+        target="_blank"
+        rel="noreferrer"
+        className="text-primary-ink underline underline-offset-2"
+      >
+        {value}
+      </a>
+    ) : (
+      <>{value}</>
+    );
+  }
+  return <>{String(value)}</>;
+}