@crossworks/share-ui 0.230.43

package/src/task-presenter.tsx

@@ -0,0 +1,60 @@
+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';
+
+/** Public task render — a clean status card. */
+export function TaskPresenter({
+  view,
+}: {
+  view: { title: string; body: string; status: string; priority: string; dueAt: string | null };
+}) {
+  const done = view.status === 'done';
+  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
+              className={
+                'text-2xl font-bold tracking-tight ' +
+                (done ? 'text-muted-foreground line-through' : '')
+              }
+            >
+              {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 capitalize text-muted-foreground">
+                {view.status}
+              </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>
+          </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>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/ui/button.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../lib/utils';
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        link: 'text-primary-ink underline-offset-4 hover:underline',
+        // Semantic approve/deny aliases — used by sender curation buttons.
+        // Theme-aware: approve uses the primary action colour, deny the
+        // destructive colour, so they recolour with the active theme instead
+        // of forcing green/red.
+        approve: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        deny: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: { variant: 'default', size: 'default' },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp ref={ref} className={cn(buttonVariants({ variant, size, className }))} {...props} />
+    );
+  },
+);
+Button.displayName = 'Button';
+
+export { buttonVariants };

package/src/ui/input.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { cn } from '../lib/utils';
+
+export const Input = React.forwardRef<
+  HTMLInputElement,
+  React.InputHTMLAttributes<HTMLInputElement>
+>(({ className, type, ...props }, ref) => (
+  <input
+    type={type}
+    ref={ref}
+    className={cn(
+      'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+      className,
+    )}
+    {...props}
+  />
+));
+Input.displayName = 'Input';

package/src/ui/label.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cn } from '../lib/utils';
+
+export const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(
+      'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+      className,
+    )}
+    {...props}
+  />
+));
+Label.displayName = 'Label';

package/src/view-payload.ts

@@ -0,0 +1,82 @@
+/**
+ * The JSON payload of GET /s/<token>/view — the share content door for the
+ * /team inline reader (no iframe). One shape per share kind, mirroring the
+ * server's ShareView except where the server must pre-compute:
+ *
+ *  - `page` ships pre-rendered SANITIZED html + toc (renderPageDoc runs
+ *    server-side only, so escaping stays on the server and katex/lowlight
+ *    stay out of the client bundle);
+ *  - `folder` ships the listing for the requested `?p=` sub-path (the
+ *    listing is a DB read, re-validated against the shared root per request).
+ *
+ * Everything else is the presenter's own props, verbatim. Consumed by the
+ * client ShareReader and produced by server/web/app/s/[token]/view.
+ */
+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';
+
+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 }>;
+};
+
+export type ShareViewPayload =
+  | {
+      kind: 'page';
+      title: string;
+      icon: string | null;
+      width: 'narrow' | 'wide';
+      /** Sanitized HTML from renderPageDoc — safe to inject as-is. */
+      html: string;
+      toc: TocEntry[];
+    }
+  | { kind: 'note'; title: string; content: string }
+  | {
+      kind: 'task';
+      title: string;
+      body: string;
+      status: string;
+      priority: string;
+      dueAt: string | null;
+    }
+  | {
+      kind: 'event';
+      title: string;
+      body: string;
+      startsAt: string | null;
+      endsAt: string | null;
+      location: string | null;
+    }
+  | { kind: 'file'; fileId: string; filename: string; mimeType: string; size: number }
+  | { kind: 'app'; appId: string; title: string }
+  | {
+      kind: 'table';
+      tableId: string;
+      title: string;
+      icon: string | null;
+      tabs: Array<{
+        id: string;
+        name: string;
+        rowCount: number;
+        columns: Array<{ id: string; name: string; type: string }>;
+      }> | null;
+      legacyDoc: { columns: Column[]; rows: Row[] } | null;
+    }
+  | {
+      kind: 'formula';
+      title: string;
+      spec: FormulaSpec;
+      signature: TargetSignature[];
+      coverageGaps: CoverageGap[];
+      dimensionIssues: DimensionIssue[];
+    }
+  | { kind: 'folder'; title: string; path: string; listing: ShareFolderListing }
+  // Only WHETHER a committed snapshot exists. The bytes are fetched as an
+  // image from /s/<token>/draw, so they never ride in this payload and never
+  // become markup on the page.
+  | { kind: 'draw'; title: string; hasSvg: boolean };