@crossworks/share-ui 0.230.70 → 0.232.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crossworks/share-ui",
-  "version": "0.230.70",
+  "version": "0.232.0",
   "description": "The server-rendered share surface — the /s/<token> presenters, view-payload contract, mini-app sandbox, and the few primitives they need. Lives in MANTLE (the server renders these), published for jackdaw to consume; may depend only on @mantle/{client-types,content-core} (the jackdaw-repo-split boundary).",
   "exports": {
     "./app-presenter": "./src/app-presenter.tsx",
@@ -19,6 +19,7 @@
     "./ui/button": "./src/ui/button.tsx",
     "./ui/input": "./src/ui/input.tsx",
     "./ui/label": "./src/ui/label.tsx",
+    "./lib/presenter-chrome": "./src/lib/presenter-chrome.ts",
     "./lib/utils": "./src/lib/utils.ts",
     "./page-outline": "./src/page-outline.tsx",
     "./nav-items": "./src/nav-items.ts",
@@ -31,8 +32,8 @@
     "./styles/app.css": "./styles/app.css"
   },
   "dependencies": {
-    "@mantle/client-types": "npm:@crossworks/client-types@0.230.70",
-    "@mantle/content-core": "npm:@crossworks/content-core@0.230.70",
+    "@mantle/client-types": "npm:@crossworks/client-types@0.232.0",
+    "@mantle/content-core": "npm:@crossworks/content-core@0.232.0",
     "@radix-ui/react-label": "^2.1.12",
     "@radix-ui/react-slot": "^1.3.0",
     "class-variance-authority": "^0.7.1",

package/src/draw-presenter.tsx

@@ -1,3 +1,5 @@
+import { isEmbedded, type PresenterChrome } from './lib/presenter-chrome';
+
 /**
  * Public draw render — the committed SVG snapshot, static, no JS.
  *
@@ -14,14 +16,19 @@
 export function DrawPresenter({
   view,
   src,
+  chrome,
 }: {
   view: { title: string; hasSvg: boolean };
   /** URL of the snapshot image (`/s/<token>/draw`). */
   src: string;
+  chrome?: PresenterChrome;
 }) {
+  const embedded = isEmbedded(chrome);
   return (
-    <article className="mx-auto max-w-5xl px-6 py-12 md:py-16">
-      <h1 className="mb-8 text-3xl font-bold tracking-tight text-balance">{view.title}</h1>
+    <article className={embedded ? 'w-full px-6 py-6' : 'mx-auto max-w-5xl px-6 py-12 md:py-16'}>
+      {!embedded && (
+        <h1 className="mb-8 text-3xl font-bold tracking-tight text-balance">{view.title}</h1>
+      )}
       {view.hasSvg ? (
         <div className="overflow-hidden rounded-lg border border-border bg-white p-3">
           {/* eslint-disable-next-line @next/next/no-img-element -- a drawing

package/src/event-presenter.tsx

@@ -3,6 +3,8 @@ import remarkGfm from 'remark-gfm';
 import { CalendarDays, Clock, Download, MapPin } from 'lucide-react';
 import { formatDateTime } from '@mantle/client-types/lib/format-datetime';
 import { buildIcsHref } from '@mantle/client-types/lib/event-time';
+import { isEmbedded, type PresenterChrome } from './lib/presenter-chrome';
+import { cn } from './lib/utils';
 
 type EventView = {
   title: string;
@@ -12,18 +14,29 @@ type EventView = {
   location: string | null;
 };
 
-/** Public event render — a clean card with time, location, and an .ics link. */
-export function EventPresenter({ view }: { view: EventView }) {
+/**
+ * Public event render — time, location, and an .ics link.
+ *
+ * On the standalone page this is a centred card: the card border is what tells
+ * a reader where the event begins and ends on an otherwise empty page. Embedded
+ * in a pane that already has a header rule and a border of its own, that same
+ * card is the "floating box in the middle" — so embedded drops the frame and
+ * the title, and lays the detail out on the pane. See `PresenterChrome`.
+ */
+export function EventPresenter({ view, chrome }: { view: EventView; chrome?: PresenterChrome }) {
   const ics = buildIcsHref(view);
+  const embedded = isEmbedded(chrome);
   return (
-    <div className="mx-auto max-w-2xl px-6 py-12 md:py-16">
-      <div className="rounded-xl border border-border bg-card p-6">
-        <div className="flex items-start gap-3">
-          <CalendarDays className="mt-1 size-6 shrink-0 text-primary-ink" aria-hidden />
-          <h1 className="text-2xl font-bold tracking-tight text-balance">{view.title}</h1>
-        </div>
+    <div className={embedded ? 'w-full px-6 py-6' : 'mx-auto max-w-2xl px-6 py-12 md:py-16'}>
+      <div className={cn(!embedded && 'rounded-xl border border-border bg-card p-6')}>
+        {!embedded && (
+          <div className="flex items-start gap-3">
+            <CalendarDays className="mt-1 size-6 shrink-0 text-primary-ink" aria-hidden />
+            <h1 className="text-2xl font-bold tracking-tight text-balance">{view.title}</h1>
+          </div>
+        )}
 
-        <dl className="mt-5 space-y-2 text-sm">
+        <dl className={cn('space-y-2 text-sm', !embedded && 'mt-5')}>
           {view.startsAt && (
             <div className="flex items-center gap-2 text-muted-foreground">
               <Clock className="size-4 shrink-0" aria-hidden />

package/src/file-presenter.tsx

@@ -1,17 +1,26 @@
 import { Download, FileText } from 'lucide-react';
 import { formatBytes } from '@mantle/client-types/lib/format-bytes';
+import { isEmbedded, type PresenterChrome } from './lib/presenter-chrome';
 
 /**
  * Public file render with a media-appropriate viewer: images, PDFs, video, and
  * audio play inline (served from the scoped asset route); everything else gets
- * a clean download card. Centered.
+ * a download card.
+ *
+ * Embedded spans the pane. This is the presenter Jason was describing — a
+ * non-previewable file drew a `max-w-md` card, which is a phone-width box
+ * marooned in the middle of a 2000px pane. Every branch here gets better with
+ * width: a PDF, an image and a video all want the space, and the download row
+ * wants to look like a row rather than an island. See `PresenterChrome`.
  */
 export function FilePresenter({
   view,
   assetUrl,
+  chrome,
 }: {
   view: { fileId: string; filename: string; mimeType: string; size: number };
   assetUrl: (fileId: string) => string;
+  chrome?: PresenterChrome;
 }) {
   const src = assetUrl(view.fileId);
   const mime = view.mimeType || '';
@@ -19,12 +28,20 @@ export function FilePresenter({
   const isPdf = mime === 'application/pdf';
   const isVideo = mime.startsWith('video/');
   const isAudio = mime.startsWith('audio/');
+  const embedded = isEmbedded(chrome);
 
   return (
-    <div className="mx-auto max-w-5xl px-6 py-12">
-      <header className="mb-6 text-center">
-        <h1 className="text-xl font-semibold tracking-tight">{view.filename}</h1>
-        <p className="mt-1 text-xs text-muted-foreground">
+    <div className={embedded ? 'w-full px-6 py-6' : 'mx-auto max-w-5xl px-6 py-12'}>
+      {/* Embedded keeps the type/size line — the pane header carries only the
+          filename, so this is the one place a member learns what they are
+          looking at — but drops the hero title above it. */}
+      <header className={embedded ? 'mb-4' : 'mb-6 text-center'}>
+        {!embedded && <h1 className="text-xl font-semibold tracking-tight">{view.filename}</h1>}
+        <p
+          className={
+            embedded ? 'text-xs text-muted-foreground' : 'mt-1 text-xs text-muted-foreground'
+          }
+        >
           {mime || 'file'} · {formatBytes(view.size)}
         </p>
       </header>
@@ -43,7 +60,11 @@ export function FilePresenter({
         <iframe
           src={src}
           title={view.filename}
-          className="h-[82vh] w-full rounded-lg border border-border"
+          className={
+            embedded
+              ? 'h-[calc(100dvh-14rem)] min-h-96 w-full rounded-lg border border-border'
+              : 'h-[82vh] w-full rounded-lg border border-border'
+          }
         />
       ) : isVideo ? (
         <video
@@ -52,11 +73,23 @@ export function FilePresenter({
           className="mx-auto max-h-[80vh] w-full rounded-lg border border-border bg-black"
         />
       ) : isAudio ? (
-        <div className="mx-auto max-w-xl rounded-lg border border-border bg-card p-4">
+        <div
+          className={
+            embedded
+              ? 'rounded-lg border border-border bg-card p-4'
+              : 'mx-auto max-w-xl rounded-lg border border-border bg-card p-4'
+          }
+        >
           <audio src={src} controls className="w-full" />
         </div>
       ) : (
-        <div className="mx-auto flex max-w-md items-center gap-3 rounded-xl border border-border bg-card p-4">
+        <div
+          className={
+            embedded
+              ? 'flex items-center gap-3 rounded-xl border border-border bg-card p-4'
+              : 'mx-auto flex max-w-md items-center gap-3 rounded-xl border border-border bg-card p-4'
+          }
+        >
           <FileText className="size-8 shrink-0 text-muted-foreground" aria-hidden />
           <div className="min-w-0 flex-1">
             <p className="truncate text-sm font-medium">{view.filename}</p>

package/src/lib/presenter-chrome.ts

@@ -0,0 +1,37 @@
+/**
+ * Which shell a presenter is drawing inside.
+ *
+ * Every presenter here was written for ONE surface: the anonymous public `/s`
+ * page, where the presenter *is* the page. A centred column with a hero title
+ * and generous top padding is exactly right there — nothing else is on screen.
+ *
+ * `/team` then reused the same components inside a master-detail pane, and both
+ * of those choices became wrong at once. The pane already draws the title in
+ * its own header, so the hero title was the second of three on screen; and the
+ * centred cap meant dragging the divider only grew the empty margins while the
+ * content stayed a fixed narrow column. Members read that as "the drag is
+ * broken". The handle was fine — the content was ignoring it.
+ *
+ * So a presenter now says which shell it is in:
+ *
+ * - `'share'` (the default) — the standalone page. Unchanged, and it stays the
+ *   default deliberately: the public page must not change because an embedder
+ *   forgot a prop.
+ * - `'embedded'` — inside a shell that already owns the title and the padding.
+ *   Drop the hero title, tighten the vertical rhythm, and let the content take
+ *   the width it is given.
+ *
+ * ⚠ `'embedded'` is NOT a synonym for full-bleed. It means *the shell owns the
+ * chrome*; what to do with the width is still the content's call. A table, a
+ * file listing and a media viewer all get better as they get wider, so they
+ * span the pane. Prose does not — a 2000px line is unreadable no matter whose
+ * pane it is in — so a note keeps its measure and simply stops being centred
+ * under a title it no longer draws. Anything that reads as "a floating box in
+ * the middle of a big screen" is the bug; a comfortable reading measure is not.
+ */
+export type PresenterChrome = 'share' | 'embedded';
+
+/** Reads better at the call sites than comparing the string in each presenter. */
+export function isEmbedded(chrome?: PresenterChrome): boolean {
+  return chrome === 'embedded';
+}

package/src/note-presenter.tsx

@@ -1,11 +1,27 @@
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
+import { isEmbedded, type PresenterChrome } from './lib/presenter-chrome';
 
-/** Public note render — markdown (GFM) in a centered prose column. */
-export function NotePresenter({ view }: { view: { title: string; content: string } }) {
+/**
+ * Public note render — markdown (GFM) in a prose column.
+ *
+ * Embedded keeps the measure. A note is prose, and prose wants a line length
+ * whoever is reading it; what it drops is the hero title the shell already
+ * draws, and the standalone page's tall top padding. See `PresenterChrome`.
+ */
+export function NotePresenter({
+  view,
+  chrome,
+}: {
+  view: { title: string; content: string };
+  chrome?: PresenterChrome;
+}) {
+  const embedded = isEmbedded(chrome);
   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>
+    <article className={embedded ? 'max-w-3xl px-6 py-6' : 'mx-auto max-w-3xl px-6 py-12 md:py-16'}>
+      {!embedded && (
+        <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>

package/src/table-presenter.tsx

@@ -1,36 +1,120 @@
 'use client';
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Loader2, Table2 } from 'lucide-react';
-import { Button } from './ui/button';
+import {
+  ArrowUpRight,
+  Calendar,
+  CalendarClock,
+  DollarSign,
+  Hash,
+  Link as LinkIcon,
+  List,
+  Loader2,
+  Percent,
+  SquareCheck,
+  Tags,
+  Type,
+  Variable,
+  type LucideIcon,
+} from 'lucide-react';
+import { AGGREGATE_KINDS, type AggregateKind } from '@mantle/content-core/table-model';
 import { cn } from './lib/utils';
+import { isEmbedded, type PresenterChrome } from './lib/presenter-chrome';
 
 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[] };
+type PublicTab = {
+  id: string;
+  name: string;
+  rowCount: number;
+  columns: PublicColumn[];
+  aggregates?: Record<string, AggregateKind>;
+  aggregateValues?: Record<string, number | null>;
+};
 
 const PAGE = 200;
 
+/** Header glyphs, the owner grid's map (table-grid.tsx) — the two surfaces
+ *  should not disagree about what a currency column looks like. */
+const TYPE_ICON: Record<string, LucideIcon> = {
+  text: Type,
+  number: Hash,
+  currency: DollarSign,
+  percent: Percent,
+  date: Calendar,
+  datetime: CalendarClock,
+  checkbox: SquareCheck,
+  select: List,
+  multiselect: Tags,
+  url: LinkIcon,
+  formula: Variable,
+  reference: ArrowUpRight,
+};
+
+const AGG_LABEL: Record<AggregateKind, string> = {
+  none: 'None',
+  sum: 'Sum',
+  avg: 'Average',
+  count: 'Count',
+  min: 'Min',
+  max: 'Max',
+  empty: 'Empty',
+  filled: 'Filled',
+};
+
+const NUMERIC_TYPES = new Set(['number', 'currency', 'percent', 'formula']);
+
+/** Aggregate values are plain numbers by the time they reach here. An average
+ *  keeps two decimals; everything else renders as a grouped integer-ish number,
+ *  which is what a total of a currency or a count wants. */
+function formatAggregate(value: number, kind: AggregateKind): string {
+  if (kind === 'avg') return value.toLocaleString(undefined, { maximumFractionDigits: 2 });
+  return value.toLocaleString(undefined, { maximumFractionDigits: 4 });
+}
+
 /**
- * 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.
+ * Read-only grid for a shared table.
+ *
+ * File-backed workbooks page their PUBLISHED rows through GET /s/[token]/rows;
+ * 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.
+ *
+ * ── Totals, and the one thing worth being careful about ────────────────────
+ *
+ * A footer total must never be computed from the rows this component happens to
+ * be holding. It pages 200 at a time, so a client-side sum over a partial
+ * window is not a smaller number — it is a WRONG one that looks exactly as
+ * authoritative as a right one. So for a file-backed tab every total comes from
+ * the server: the owner's presets ride in the share view already computed, and
+ * a total the READER picks is fetched from /s/[token]/aggregate, which runs it
+ * in SQL over every row.
+ *
+ * A legacy table is the exception, and only because it genuinely arrives whole:
+ * there, `computeAggregate` over the doc in hand is the complete answer.
+ *
+ * A reader's own choice is view-local and never persisted. Nothing here writes;
+ * reloading restores whatever the owner set.
  */
 export function TablePresenter({
   view,
   token,
+  chrome,
 }: {
   view: {
     title: string;
     icon: string | null;
     tabs: PublicTab[] | null;
-    legacyDoc: { columns: PublicColumn[]; rows: PublicRow[] } | null;
+    legacyDoc: {
+      columns: PublicColumn[];
+      rows: PublicRow[];
+      aggregates?: Record<string, AggregateKind>;
+    } | null;
   };
   token: string;
+  chrome?: PresenterChrome;
 }) {
   const tabs = view.tabs ?? [];
   const [tabId, setTabId] = useState<string | null>(tabs[0]?.id ?? null);
@@ -46,6 +130,12 @@ export function TablePresenter({
   // Tab-switch race guard: a stale page for the previous tab must not land.
   const reqSeq = useRef(0);
 
+  /** The reader's own picks, per column — view-local, never sent anywhere that
+   *  writes. Keyed per tab so switching tabs does not carry a choice across to
+   *  a column that merely shares an id position. */
+  const [readerAggs, setReaderAggs] = useState<Record<string, AggregateKind>>({});
+  const [readerVals, setReaderVals] = useState<Record<string, number | null>>({});
+
   const fetchPage = useCallback(
     async (offset: number, forTab: string) => {
       const seq = ++reqSeq.current;
@@ -74,6 +164,8 @@ export function TablePresenter({
     if (tab) {
       setRows([]);
       setTotal(tab.rowCount);
+      setReaderAggs({});
+      setReaderVals({});
       void fetchPage(0, tab.id);
     }
     // Deliberately narrower than exhaustive-deps: refetch when the SELECTED TAB
@@ -95,110 +187,302 @@ export function TablePresenter({
   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)),
+    () => new Set(columns.filter((c) => NUMERIC_TYPES.has(c.type)).map((c) => c.id)),
     [columns],
   );
 
-  return (
-    <div className="mx-auto max-w-6xl px-6 py-12">
-      <header className="mb-6 text-center">
+  /** The owner's presets for whatever is on screen. */
+  const ownerAggs = view.legacyDoc ? (view.legacyDoc.aggregates ?? {}) : (tab?.aggregates ?? {});
+
+  const kindFor = (colId: string): AggregateKind => readerAggs[colId] ?? ownerAggs[colId] ?? 'none';
+
+  /**
+   * The total to draw under a column, or null for "nothing to show".
+   *
+   * Three sources, and which one applies is entirely about whether the rows in
+   * hand are the whole story:
+   *  - legacy → compute locally; the doc IS complete.
+   *  - a reader's pick on a file-backed tab → the value fetched for it.
+   *  - otherwise → the owner's preset, computed server-side in the share view.
+   */
+  const valueFor = (colId: string): number | null => {
+    const kind = kindFor(colId);
+    if (kind === 'none') return null;
+    if (view.legacyDoc) return legacyAggregate(view.legacyDoc.rows, colId, kind);
+    if (colId in readerAggs) return readerVals[colId] ?? null;
+    return tab?.aggregateValues?.[colId] ?? null;
+  };
+
+  const pickAggregate = async (colId: string, kind: AggregateKind) => {
+    setReaderAggs((prev) => ({ ...prev, [colId]: kind }));
+    if (kind === 'none' || view.legacyDoc || !tab) return;
+    setReaderVals((prev) => ({ ...prev, [colId]: null }));
+    try {
+      const qs = new URLSearchParams({ tab: tab.id, col: colId, kind });
+      const r = await fetch(`/s/${token}/aggregate?${qs.toString()}`, { cache: 'no-store' });
+      if (!r.ok) return;
+      const d = (await r.json()) as { value: number | null };
+      setReaderVals((prev) => ({ ...prev, [colId]: d.value }));
+    } catch {
+      // A failed total stays blank. There is no honest fallback — the rows in
+      // hand are a window, and a number from them would be wrong.
+    }
+  };
+
+  const embedded = isEmbedded(chrome);
+  const anyTotal = columns.some((c) => kindFor(c.id) !== 'none');
+
+  const header = (
+    <header className={embedded ? 'mb-3 shrink-0' : 'mb-6 shrink-0 text-center'}>
+      {!embedded && (
         <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>
       )}
+      <p className={cn('text-xs text-muted-foreground', !embedded && 'mt-1')}>
+        {view.legacyDoc || !hasMore
+          ? `${totalRows} row${totalRows === 1 ? '' : 's'}`
+          : `${shownRows.length} of ${totalRows} rows`}
+      </p>
+    </header>
+  );
 
-      <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}
+  const tabStrip = tabs.length > 1 && (
+    <div className="mb-3 flex shrink-0 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>
+  );
+
+  const grid = (
+    <table className="w-full border-collapse text-sm">
+      {/* Sticky against the scroll box below, not the page: a grid whose
+          headers leave the screen at row 40 is a grid of unlabelled numbers. */}
+      <thead className="sticky top-0 z-10">
+        <tr className="border-b border-border bg-muted">
+          {columns.map((c) => {
+            const Icon = TYPE_ICON[c.type] ?? Type;
+            return (
+              <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',
+                )}
+              >
+                <span
                   className={cn(
-                    'whitespace-nowrap px-3 py-2 text-left font-medium text-muted-foreground',
-                    numericCols.has(c.id) && 'text-right',
+                    'inline-flex items-center gap-1.5',
+                    numericCols.has(c.id) && 'flex-row-reverse',
                   )}
                 >
+                  <Icon className="size-3.5 shrink-0 opacity-70" aria-hidden />
                   {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}
+                </span>
+              </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>
+      {/* Always rendered, even with nothing set: the row IS the affordance.
+          A member who wants a total needs somewhere to ask for one, and a
+          footer that appears only once the owner has already chosen leaves
+          them no door. `bg-background` because a transparent sticky row shows
+          the scrolling cells through itself. */}
+      <tfoot className="sticky bottom-0 z-10">
+        <tr className={cn('border-t-2 border-border bg-muted', !anyTotal && 'text-xs')}>
+          {columns.map((c) => {
+            const kind = kindFor(c.id);
+            const value = valueFor(c.id);
+            return (
+              <td
+                key={c.id}
+                className={cn(
+                  'border-l border-border/60 px-1.5 py-1 text-xs first:border-l-0',
+                  numericCols.has(c.id) && 'text-right',
+                )}
+              >
+                <label className="flex items-center justify-end gap-1.5">
+                  <span className="sr-only">Total for {c.name}</span>
+                  {kind !== 'none' && (
+                    <span className="min-w-0 truncate font-medium tabular-nums">
+                      {value === null ? (
+                        // null is a real answer — "this column cannot be
+                        // totalled that way". A 0 here would be a lie.
+                        <span className="text-muted-foreground/50">—</span>
+                      ) : (
+                        formatAggregate(value, kind)
+                      )}
+                    </span>
+                  )}
+                  <select
+                    value={kind}
+                    onChange={(e) => void pickAggregate(c.id, e.target.value as AggregateKind)}
                     className={cn(
-                      'max-w-96 truncate px-3 py-1.5',
-                      numericCols.has(c.id) && 'text-right tabular-nums',
+                      'cursor-pointer rounded-sm border-0 bg-transparent py-0 text-xs outline-none',
+                      kind === 'none'
+                        ? 'text-muted-foreground/60 hover:text-foreground'
+                        : 'text-muted-foreground',
                     )}
                   >
-                    <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>
+                    {AGGREGATE_KINDS.map((k) => (
+                      <option key={k} value={k}>
+                        {k === 'none' ? 'Σ' : AGG_LABEL[k]}
+                      </option>
+                    ))}
+                  </select>
+                </label>
+              </td>
+            );
+          })}
+        </tr>
+      </tfoot>
+    </table>
+  );
 
-      <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>
-        )}
+  const foot = (
+    <>
+      {loading && (
+        <div className="flex shrink-0 items-center justify-center gap-1.5 py-2 text-xs text-muted-foreground">
+          <Loader2 className="size-3 animate-spin" aria-hidden /> Loading…
+        </div>
+      )}
+      {/* Auto-fetch rather than a "Load more" button: scrolling toward the end
+          is already the gesture that means "show me the rest". */}
+      {!loading && hasMore && tab && (
+        <MoreSentinel onReveal={() => void fetchPage(shownRows.length, tab.id)} />
+      )}
+    </>
+  );
+
+  // Embedded, the grid OWNS the height it was given: the header and tab strip
+  // are fixed, and the table scrolls inside a bounded box so its sticky header
+  // and footer have something to stick to. On the standalone /s page there is
+  // no height to own — the page scrolls, the table simply grows, and sticky
+  // has nothing to do.
+  if (embedded) {
+    return (
+      <div className="flex h-full min-h-0 w-full flex-col px-6 py-6">
+        {header}
+        {tabStrip}
+        <div className="min-h-0 flex-1 overflow-auto rounded-lg border border-border scrollbar-thin">
+          {grid}
+          {foot}
+        </div>
       </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-6xl px-6 py-12">
+      {header}
+      {tabStrip}
+      <div className="overflow-x-auto rounded-lg border border-border">{grid}</div>
+      {foot}
     </div>
   );
 }
 
+/**
+ * The legacy path's total. Safe ONLY here: a legacy table's rows arrive whole
+ * in the share view, so this is the complete set, not a window. Mirrors
+ * computeAggregate's numeric semantics — non-numeric cells are ignored by the
+ * numeric kinds rather than counted as zero.
+ */
+function legacyAggregate(rows: PublicRow[], colId: string, kind: AggregateKind): number | null {
+  const isEmptyCell = (v: CellValue) =>
+    v === null || v === undefined || v === '' || (Array.isArray(v) && v.length === 0);
+  if (kind === 'count') return rows.length;
+  if (kind === 'filled') return rows.filter((r) => !isEmptyCell(r.cells[colId] ?? null)).length;
+  if (kind === 'empty') return rows.filter((r) => isEmptyCell(r.cells[colId] ?? null)).length;
+  const nums = rows
+    .map((r) => {
+      const v = r.cells[colId];
+      if (typeof v === 'number') return v;
+      if (typeof v === 'string' && v.trim() !== '' && Number.isFinite(Number(v))) return Number(v);
+      if (typeof v === 'boolean') return v ? 1 : 0;
+      return null;
+    })
+    .filter((n): n is number => n !== null);
+  if (nums.length === 0) return null;
+  switch (kind) {
+    case 'sum':
+      return nums.reduce((a, b) => a + b, 0);
+    case 'avg':
+      return nums.reduce((a, b) => a + b, 0) / nums.length;
+    case 'min':
+      return Math.min(...nums);
+    case 'max':
+      return Math.max(...nums);
+    default:
+      return null;
+  }
+}
+
+/** Fetches the next page when it scrolls into view. */
+function MoreSentinel({ onReveal }: { onReveal: () => void }) {
+  const ref = useRef<HTMLDivElement>(null);
+  // The callback changes identity every render, so the observer reads it from a
+  // ref — re-creating the observer each render would disconnect it mid-scroll
+  // and the grid would stop growing until the reader scrolled again.
+  const reveal = useRef(onReveal);
+  reveal.current = onReveal;
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const io = new IntersectionObserver(
+      (entries) => entries[0]?.isIntersecting && reveal.current(),
+      { rootMargin: '400px' },
+    );
+    io.observe(el);
+    return () => io.disconnect();
+  }, []);
+
+  return <div ref={ref} className="h-8 shrink-0" aria-hidden />;
+}
+
 function Cell({ value, type }: { value: CellValue; type: string }) {
   if (value === null || value === undefined || value === '') {
     return <span className="text-muted-foreground/50">—</span>;

package/src/task-presenter.tsx

@@ -2,6 +2,8 @@ import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { Check, Circle } from 'lucide-react';
 import { formatDateTime } from '@mantle/client-types/lib/format-datetime';
+import { isEmbedded, type PresenterChrome } from './lib/presenter-chrome';
+import { cn } from './lib/utils';
 
 /** Human label per lifecycle status (raw value falls through for forward
  *  compatibility — never render a snake_case token to a reader). */
@@ -12,9 +14,19 @@ const STATUS_LABEL: Record<string, string> = {
   done: 'Done',
 };
 
-/** Public task render — a clean status card. */
+/**
+ * Public task render — a status card standalone, laid out on the pane when
+ * embedded.
+ *
+ * The status/priority/due chips survive both shells: they are the task's
+ * metadata, not decoration, and the pane header carries only the title. What
+ * embedded drops is the card frame, the hero title, and the done-tick beside it
+ * (the "Done" chip already says the same thing without a 24px glyph claiming
+ * the leftmost column). See `PresenterChrome`.
+ */
 export function TaskPresenter({
   view,
+  chrome,
 }: {
   view: {
     title: string;
@@ -24,48 +36,58 @@ export function TaskPresenter({
     dueAt: string | null;
     todos?: { text: string; done: boolean }[];
   };
+  chrome?: PresenterChrome;
 }) {
   const done = view.status === 'done';
   const todos = view.todos ?? [];
+  const embedded = isEmbedded(chrome);
+  const chips = (
+    <div className={cn('flex flex-wrap items-center gap-2 text-xs', !embedded && 'mt-3')}>
+      <span className="rounded-full border border-border px-2 py-0.5 text-muted-foreground">
+        {STATUS_LABEL[view.status] ?? view.status.replace(/_/g, ' ')}
+      </span>
+      <span className="rounded-full border border-border px-2 py-0.5 capitalize text-muted-foreground">
+        {view.priority} priority
+      </span>
+      {view.dueAt && (
+        <span className="rounded-full border border-border px-2 py-0.5 text-muted-foreground">
+          Due {formatDateTime(view.dueAt)}
+        </span>
+      )}
+    </div>
+  );
+
   return (
-    <div className="mx-auto max-w-2xl px-6 py-12 md:py-16">
-      <div className="rounded-xl border border-border bg-card p-6">
-        <div className="flex items-start gap-3">
-          <span
-            className={
-              'mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full border ' +
-              (done
-                ? 'border-primary bg-primary text-primary-foreground'
-                : 'border-border text-transparent')
-            }
-            aria-hidden
-          >
-            {done ? <Check className="size-4" /> : <Circle className="size-3" />}
-          </span>
-          <div className="min-w-0 flex-1">
-            <h1
+    <div className={embedded ? 'w-full px-6 py-6' : 'mx-auto max-w-2xl px-6 py-12 md:py-16'}>
+      <div className={cn(!embedded && 'rounded-xl border border-border bg-card p-6')}>
+        {embedded ? (
+          chips
+        ) : (
+          <div className="flex items-start gap-3">
+            <span
               className={
-                'text-2xl font-bold tracking-tight ' +
-                (done ? 'text-muted-foreground line-through' : '')
+                'mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full border ' +
+                (done
+                  ? 'border-primary bg-primary text-primary-foreground'
+                  : 'border-border text-transparent')
               }
+              aria-hidden
             >
-              {view.title}
-            </h1>
-            <div className="mt-3 flex flex-wrap items-center gap-2 text-xs">
-              <span className="rounded-full border border-border px-2 py-0.5 text-muted-foreground">
-                {STATUS_LABEL[view.status] ?? view.status.replace(/_/g, ' ')}
-              </span>
-              <span className="rounded-full border border-border px-2 py-0.5 capitalize text-muted-foreground">
-                {view.priority} priority
-              </span>
-              {view.dueAt && (
-                <span className="rounded-full border border-border px-2 py-0.5 text-muted-foreground">
-                  Due {formatDateTime(view.dueAt)}
-                </span>
-              )}
+              {done ? <Check className="size-4" /> : <Circle className="size-3" />}
+            </span>
+            <div className="min-w-0 flex-1">
+              <h1
+                className={
+                  'text-2xl font-bold tracking-tight ' +
+                  (done ? 'text-muted-foreground line-through' : '')
+                }
+              >
+                {view.title}
+              </h1>
+              {chips}
             </div>
           </div>
-        </div>
+        )}
         {view.body && (
           <div className="prose prose-sm dark:prose-invert mt-5 max-w-none border-t border-border pt-5">
             <ReactMarkdown remarkPlugins={[remarkGfm]}>{view.body}</ReactMarkdown>

package/src/view-payload.ts

@@ -16,13 +16,22 @@ import type { TocEntry } from '@mantle/content-core/page-toc';
 import type { CoverageGap, FormulaSpec } from '@mantle/content-core/formula-spec';
 import type { TargetSignature } from '@mantle/content-core/formula-signature';
 import type { DimensionIssue } from '@mantle/content-core/formula-dimensions';
-import type { Column, Row } from '@mantle/content-core/table-model';
+import type { AggregateKind, Column, Row } from '@mantle/content-core/table-model';
 
 export type ShareFolderListing = {
   /** ltree path currently being listed (the shared root or a descendant). */
   currentPath: string;
   folders: Array<{ id: string; path: string; slug: string; fileCount: number }>;
-  files: Array<{ id: string; filename: string; mimeType: string; sizeBytes: number }>;
+  files: Array<{
+    id: string;
+    filename: string;
+    mimeType: string;
+    sizeBytes: number;
+    /** ISO instant of the last write, so an embedded listing can carry a
+     *  Modified column. Optional because a client pinned to an older server
+     *  still gets a payload without it. */
+    updatedAt?: string;
+  }>;
 };
 
 export type ShareViewPayload =
@@ -66,8 +75,29 @@ export type ShareViewPayload =
         name: string;
         rowCount: number;
         columns: Array<{ id: string; name: string; type: string }>;
+        /**
+         * The owner's footer totals for this tab: colId → kind, and the VALUE
+         * computed server-side over the whole tab.
+         *
+         * The value has to come from the server and this is the whole reason
+         * the field exists. A reader holds one 200-row window at a time, so a
+         * sum taken over what it happens to have loaded is not a smaller
+         * number — it is a WRONG one, and wrong quietly, which is worse than
+         * absent. `aggregateWindow` runs it in SQL over every row.
+         *
+         * Optional: an older server sends neither, and the footer simply does
+         * not render.
+         */
+        aggregates?: Record<string, AggregateKind>;
+        aggregateValues?: Record<string, number | null>;
       }> | null;
-      legacyDoc: { columns: Column[]; rows: Row[] } | null;
+      legacyDoc: {
+        columns: Column[];
+        rows: Row[];
+        /** Legacy tables arrive WHOLE, so the reader can compute these itself
+         *  with `computeAggregate` and no endpoint is involved. Settings only. */
+        aggregates?: Record<string, AggregateKind>;
+      } | null;
     }
   | {
       kind: 'formula';