@crossworks/share-ui 0.230.70 → 0.231.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crossworks/share-ui",
-  "version": "0.230.70",
+  "version": "0.231.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.231.0",
+    "@mantle/content-core": "npm:@crossworks/content-core@0.231.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

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Loader2, Table2 } from 'lucide-react';
 import { Button } from './ui/button';
 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> };
@@ -23,6 +24,7 @@ const PAGE = 200;
 export function TablePresenter({
   view,
   token,
+  chrome,
 }: {
   view: {
     title: string;
@@ -31,6 +33,7 @@ export function TablePresenter({
     legacyDoc: { columns: PublicColumn[]; rows: PublicRow[] } | null;
   };
   token: string;
+  chrome?: PresenterChrome;
 }) {
   const tabs = view.tabs ?? [];
   const [tabId, setTabId] = useState<string | null>(tabs[0]?.id ?? null);
@@ -100,14 +103,21 @@ export function TablePresenter({
     [columns],
   );
 
+  const embedded = isEmbedded(chrome);
+
   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">
+    // A table is the clearest case for the embedded shell: every extra pixel is
+    // another column a member can read without scrolling sideways, and the
+    // centred 6xl cap was throwing that width away.
+    <div className={embedded ? 'w-full px-6 py-6' : 'mx-auto max-w-6xl px-6 py-12'}>
+      <header className={embedded ? 'mb-3' : 'mb-6 text-center'}>
+        {!embedded && (
+          <h1 className="text-xl font-semibold tracking-tight">
+            {view.icon ? `${view.icon} ` : ''}
+            {view.title}
+          </h1>
+        )}
+        <p className={cn('text-xs text-muted-foreground', !embedded && 'mt-1')}>
           {totalRows} row{totalRows === 1 ? '' : 's'}
         </p>
       </header>

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

@@ -22,7 +22,16 @@ 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 =