@crossworks/share-ui 0.232.16 → 0.232.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crossworks/share-ui",
-  "version": "0.232.16",
+  "version": "0.232.18",
   "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",
@@ -32,8 +32,8 @@
     "./styles/app.css": "./styles/app.css"
   },
   "dependencies": {
-    "@mantle/client-types": "npm:@crossworks/client-types@0.232.16",
-    "@mantle/content-core": "npm:@crossworks/content-core@0.232.16",
+    "@mantle/client-types": "npm:@crossworks/client-types@0.232.18",
+    "@mantle/content-core": "npm:@crossworks/content-core@0.232.18",
     "@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,4 +1,5 @@
 import { isEmbedded, type PresenterChrome } from './lib/presenter-chrome';
+import { cn } from './lib/utils';
 
 /**
  * Public draw render — the committed SVG snapshot, static, no JS.
@@ -9,28 +10,39 @@ import { isEmbedded, type PresenterChrome } from './lib/presenter-chrome';
  * page, and external references don't load. acceptSceneSvg still validates at
  * commit, but this surface no longer depends on it being exhaustive.
  *
- * The white mat is deliberate — the snapshot is exported light-mode with its
- * own background, so it reads as a framed artwork on either page theme rather
- * than adapting (and mangling) its colours.
+ * Theme: the snapshot is exported light-mode with its own background. On the
+ * STANDALONE page the white mat stays on either theme — a framed artwork on a
+ * page that leaves the brain. EMBEDDED (the /team reader is a themed app
+ * surface), dark mode applies Excalidraw's own theme filter
+ * (invert + hue-rotate, the exact transform the editor uses) over the whole
+ * mat, so strokes and canvas read dark natively — UNLESS the scene contains a
+ * raster image (`hasImage`), which one flat filter would render as a negative;
+ * those keep the light mat, same veto the owner previews apply.
  */
 export function DrawPresenter({
   view,
   src,
   chrome,
 }: {
-  view: { title: string; hasSvg: boolean };
+  view: { title: string; hasSvg: boolean; hasImage?: boolean };
   /** URL of the snapshot image (`/s/<token>/draw`). */
   src: string;
   chrome?: PresenterChrome;
 }) {
   const embedded = isEmbedded(chrome);
+  const invertible = embedded && view.hasImage !== true;
   return (
     <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">
+        <div
+          className={cn(
+            'overflow-hidden rounded-lg border border-border bg-white p-3',
+            invertible && 'dark:[filter:invert(93%)_hue-rotate(180deg)]',
+          )}
+        >
           {/* eslint-disable-next-line @next/next/no-img-element -- a drawing
               snapshot is not a next/image candidate: it's an owner-generated
               SVG of unknown dimensions served from our own share route. */}

package/src/event-presenter.tsx

@@ -1,6 +1,9 @@
+'use client';
+
+import { useEffect, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { CalendarDays, Clock, Download, MapPin } from 'lucide-react';
+import { CalendarCheck, CalendarDays, Clock, Download, MapPin, Repeat, Tag } 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';
@@ -12,20 +15,96 @@ type EventView = {
   startsAt: string | null;
   endsAt: string | null;
   location: string | null;
+  /** Optional — an older brain omits these and the rows simply don't render. */
+  recur?: string | null;
+  recurUntil?: string | null;
+  tags?: string[];
 };
 
+/** Live clock, ticking only after mount. On the static /s render (no
+ *  hydration for the event kind) this stays null and the hero shows the
+ *  date-anchored snapshot instead — same SSR-safe fallback the owner pane
+ *  uses. */
+function useNow(): number | null {
+  const [now, setNow] = useState<number | null>(null);
+  useEffect(() => {
+    setNow(Date.now());
+    const t = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(t);
+  }, []);
+  return now;
+}
+
+function remainingLabel(ms: number): string {
+  const s = Math.max(0, Math.floor(ms / 1000));
+  const days = Math.floor(s / 86_400);
+  if (days >= 2) return `${days} days`;
+  const hours = Math.floor(s / 3600);
+  if (hours >= 1) return `${hours} h ${Math.floor((s % 3600) / 60)} min`;
+  const min = Math.floor(s / 60);
+  return `${min}:${String(s % 60).padStart(2, '0')} min`;
+}
+
 /**
- * Public event render — time, location, and an .ics link.
+ * The countdown hero — the owner pane's signature, ported for members: a
+ * coming event leads with HOW SOON, a running one says so live, a past one
+ * closes the loop. Left-aligned like every other row (the member asked "when
+ * is this", not for a poster). Degrades to plain dates with no JS.
+ */
+function CountdownHero({ startsAt, endsAt }: { startsAt: string; endsAt: string | null }) {
+  const now = useNow();
+  const start = Date.parse(startsAt);
+  const end = endsAt ? Date.parse(endsAt) : start + 60 * 60 * 1000;
+  if (now === null) {
+    return <p className="text-sm font-medium text-primary-ink">{formatDateTime(startsAt)}</p>;
+  }
+  if (now < start) {
+    return (
+      <div>
+        <p className="text-3xl font-bold tabular-nums tracking-tight">
+          {remainingLabel(start - now)}
+        </p>
+        <p className="mt-0.5 text-xs text-muted-foreground">until it starts</p>
+      </div>
+    );
+  }
+  if (now <= end) {
+    return (
+      <div className="flex items-center gap-2">
+        <span className="relative flex size-2.5">
+          <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-success opacity-75" />
+          <span className="relative inline-flex size-2.5 rounded-full bg-success" />
+        </span>
+        <div>
+          <p className="text-lg font-semibold">Happening now</p>
+          {endsAt && <p className="text-xs text-muted-foreground">ends {formatDateTime(endsAt)}</p>}
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div className="flex items-center gap-2 text-muted-foreground">
+      <CalendarCheck className="size-5 shrink-0" aria-hidden />
+      <p className="text-sm">Ended {formatDateTime(endsAt ?? startsAt)}</p>
+    </div>
+  );
+}
+
+/**
+ * Public event render — countdown, time, location, recurrence, tags, and an
+ * .ics link: the owner pane's details, member-safe (reminders stay private).
  *
- * 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`.
+ * On the standalone page this is a card in a measured column: 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. Everything is
+ * left-aligned in both modes. See `PresenterChrome`.
  */
 export function EventPresenter({ view, chrome }: { view: EventView; chrome?: PresenterChrome }) {
   const ics = buildIcsHref(view);
   const embedded = isEmbedded(chrome);
+  const recur = view.recur && view.recur !== 'none' ? view.recur : null;
   return (
     <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')}>
@@ -36,7 +115,13 @@ export function EventPresenter({ view, chrome }: { view: EventView; chrome?: Pre
           </div>
         )}
 
-        <dl className={cn('space-y-2 text-sm', !embedded && 'mt-5')}>
+        {view.startsAt && (
+          <div className={cn(!embedded && 'mt-5')}>
+            <CountdownHero startsAt={view.startsAt} endsAt={view.endsAt} />
+          </div>
+        )}
+
+        <dl className={cn('space-y-2 text-sm', view.startsAt ? 'mt-4' : !embedded && 'mt-5')}>
           {view.startsAt && (
             <div className="flex items-center gap-2 text-muted-foreground">
               <Clock className="size-4 shrink-0" aria-hidden />
@@ -52,6 +137,30 @@ export function EventPresenter({ view, chrome }: { view: EventView; chrome?: Pre
               <span>{view.location}</span>
             </div>
           )}
+          {recur && (
+            <div className="flex items-center gap-2 text-muted-foreground">
+              <Repeat className="size-4 shrink-0" aria-hidden />
+              <span className="capitalize">
+                {recur}
+                {view.recurUntil ? ` · until ${formatDateTime(view.recurUntil)}` : ''}
+              </span>
+            </div>
+          )}
+          {(view.tags?.length ?? 0) > 0 && (
+            <div className="flex items-center gap-2 text-muted-foreground">
+              <Tag className="size-4 shrink-0" aria-hidden />
+              <span className="flex flex-wrap gap-1">
+                {view.tags!.map((t) => (
+                  <span
+                    key={t}
+                    className="rounded-full border border-border bg-muted px-2 py-0.5 text-xs text-muted-foreground"
+                  >
+                    {t}
+                  </span>
+                ))}
+              </span>
+            </div>
+          )}
         </dl>
 
         {view.body && (

package/src/table-presenter.tsx

@@ -233,7 +233,10 @@ export function TablePresenter({
   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: a thin meta strip flush with the pane — the grid below is
+    // full-bleed (owner-grid parity), so the padding lives here, not on a
+    // wrapper.
+    <header className={embedded ? 'shrink-0 px-3 pb-2 pt-2' : 'mb-6 shrink-0 text-center'}>
       {!embedded && (
         <h1 className="text-xl font-semibold tracking-tight">
           {view.icon ? `${view.icon} ` : ''}
@@ -249,7 +252,7 @@ export function TablePresenter({
   );
 
   const tabStrip = tabs.length > 1 && (
-    <div className="mb-3 flex shrink-0 flex-wrap gap-1">
+    <div className={cn('flex shrink-0 flex-wrap gap-1', embedded ? 'px-3 pb-2' : 'mb-3')}>
       {tabs.map((t) => (
         <button
           key={t.id}
@@ -403,10 +406,14 @@ export function TablePresenter({
   // has nothing to do.
   if (embedded) {
     return (
-      <div className="flex h-full min-h-0 w-full flex-col px-6 py-6">
+      // Full-bleed (owner-grid parity): no wrapper padding, no border box —
+      // the pane's edges are the grid's edges and the cells draw the rules.
+      // The scroller keeps the bounded height so the sticky header/footer
+      // still have something to stick to.
+      <div className="flex h-full min-h-0 w-full flex-col">
         {header}
         {tabStrip}
-        <div className="min-h-0 flex-1 overflow-auto rounded-lg border border-border scrollbar-thin">
+        <div className="min-h-0 flex-1 overflow-auto border-t border-border scrollbar-thin">
           {grid}
           {foot}
         </div>

package/src/task-presenter.tsx

@@ -44,7 +44,10 @@ export function TaskPresenter({
   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, ' ')}
+        {/* Guarded like `todos` above: a payload from an older brain may omit
+            status, and an unguarded deref here took down the whole /team
+            workspace (no boundary caught it). */}
+        {STATUS_LABEL[view.status ?? 'open'] ?? (view.status ?? 'open').replace(/_/g, ' ')}
       </span>
       <span className="rounded-full border border-border px-2 py-0.5 capitalize text-muted-foreground">
         {view.priority} priority

package/src/view-payload.ts

@@ -62,6 +62,11 @@ export type ShareViewPayload =
       startsAt: string | null;
       endsAt: string | null;
       location: string | null;
+      /** Recurrence rule name ('daily'|'weekly'|…) + optional end — optional:
+       *  an older brain omits them and the presenter simply shows nothing. */
+      recur?: string | null;
+      recurUntil?: string | null;
+      tags?: string[];
     }
   | { kind: 'file'; fileId: string; filename: string; mimeType: string; size: number }
   | { kind: 'app'; appId: string; title: string }