@stll/workspace-ui 0.12.7 → 0.13.1

package/README.md

@@ -38,6 +38,145 @@ are intentionally available through explicit subpaths; use those subpaths to
 declare a module's
 boundary.
 
+## Feature previews
+
+`@stll/workspace-ui/feature-previews` exports small, static product scenes for
+marketing pages, menus and slides. They are composed from the components the
+app renders (kanban card shell, comment cards, tracked-change marks, court
+badges, matter icons, task status glyphs, money formatting), so they follow
+the product as it changes.
+
+| Component             | Shows                                              | `labels`                                                      | `data`                    |
+| --------------------- | -------------------------------------------------- | ------------------------------------------------------------- | ------------------------- |
+| `MattersPreview`      | A matter's task board                              | `open`, `inProgress`, `done`                                  | `MattersPreviewData`      |
+| `DocumentsPreview`    | A Word document with a tracked change and comments | `comments`                                                    | `DocumentsPreviewData`    |
+| `ResearchPreview`     | Case-law search results with matched passages      | `caseLaw`                                                     | `ResearchPreviewData`     |
+| `BillingPreview`      | An invoice's time entries and total                | `date`, `description`, `billedTime`, `rate`, `fee`, `summary` | `BillingPreviewData`      |
+| `ContactsPreview`     | A company contact filled from a business registry  | `businessRegistry`, `matters`                                 | `ContactsPreviewData`     |
+| `TimeTrackingPreview` | A running timer above the day's entries            | `time`, `summary`                                             | `TimeTrackingPreviewData` |
+
+Every scene takes the same props:
+
+- `labels`: the interface strings it draws, typed per scene
+  (`MattersPreviewLabels`, …). The package carries no catalogs.
+- `locale`: the formatting locale for dates, times, durations and money
+  (`en-GB`, `cs-CZ`).
+- `data` (optional): what the scene depicts, typed per scene
+  (`MattersPreviewData`, …). Without it the scene shows the package's one
+  fictional English set; supply your own for another jurisdiction, language
+  or audience.
+- `className` (optional): classes for the outer surface.
+
+A scene fills the box it is given (`size-full`) and clips what does not fit;
+size it with the parent. It reads well from about 540 to 900 px wide at a
+16:10 to 16:9 aspect; keep custom content about as long as the default so it
+fits as well. Scenes are decorative: the surface is `aria-hidden` and takes
+no pointer input, so name what it illustrates beside it.
+
+```tsx
+import { MattersPreview } from "@stll/workspace-ui/feature-previews";
+
+<div className="aspect-[16/10] w-[720px]">
+  <MattersPreview
+    labels={{ open: "Open", inProgress: "In progress", done: "Done" }}
+    locale="en-GB"
+  />
+</div>;
+```
+
+### Custom content
+
+`data` is plain data: the scene formats it with `locale` and computes what it
+can (column counts, invoice amounts and totals, the day's total time). Dates
+are `YYYY-MM-DD`, times `HH:MM`, durations whole minutes; text is drawn as
+given. Two shapes are shared:
+
+- `PreviewPerson`: `{ name }`, drawn as initials.
+- `PreviewMatter`: `{ id, color, name }`; `color` is a matter colour token
+  (`--option-blue`, `--option-violet`, …).
+
+Per scene:
+
+- `MattersPreviewData`: `{ matter, team, tasks }`. Each `MattersPreviewTask`
+  has `name`, `status` (`MattersPreviewTaskStatus`: `open`, `in_progress`,
+  `done`), `due`, `assignee` and `attachment` (a file name or `null`).
+- `DocumentsPreviewData`: `fileName`, `reviewers`, `title`, `heading`,
+  `trackedChange` (`before`, `deleted`, `inserted`, `after`), `commented`
+  (`before`, `marked`, `after`), `nextHeading`, `clauses` and `comments`.
+  Each `DocumentsPreviewComment` has `author`, `time`, `anchor` (the quoted
+  passage) and `body`.
+- `ResearchPreviewData`: `{ query, decisions }`. Each
+  `ResearchPreviewDecision` has `court` (`name`, `abbreviation`, and `tier`:
+  `constitutional`, `supreme`, `regional` or `other`), `date`, `fileNumber`
+  and the matched passage as `before`, `hit`, `after`.
+- `BillingPreviewData`: `invoiceNumber`, `client`, `matter`, `currency` (ISO
+  4217), `hourlyRate` (minor units, minted with `cents` from `@stll/money`)
+  and `entries`. Each `BillingPreviewEntry` has `date`, `description` and
+  `billedMinutes`.
+- `ContactsPreviewData`: `company` (`name`, `legalForm`, `status`,
+  `registry`, `details` as `{ label, value }` pairs, `incorporatedOn` as
+  `{ label, date }`) and `linkedMatters`. Registry field titles are the
+  registry's own, as the app shows them, so they travel with the data rather
+  than `labels`.
+- `TimeTrackingPreviewData`: `day`, `running` (`description`, `matter`,
+  `elapsedMinutes`) and `entries`. Each `TimeTrackingPreviewEntry` has
+  `start`, `end`, `minutes`, `description` and `matter`.
+
+Declare content with `satisfies`, so a missing or misspelt field fails
+typecheck:
+
+```tsx
+import { cents } from "@stll/money";
+import { BillingPreview } from "@stll/workspace-ui/feature-previews";
+import type { BillingPreviewData } from "@stll/workspace-ui/feature-previews";
+
+const invoice = {
+  invoiceNumber: "INV-0042",
+  client: "Northwind Shipping Ltd",
+  matter: {
+    id: "northwind",
+    color: "--option-blue",
+    name: "Northwind charter dispute",
+  },
+  currency: "GBP",
+  hourlyRate: cents(30_000),
+  entries: [
+    {
+      date: "2026-10-05",
+      description: "Review of the charterparty",
+      billedMinutes: 120,
+    },
+    {
+      date: "2026-10-07",
+      description: "Draft letter to owners",
+      billedMinutes: 90,
+    },
+  ],
+} as const satisfies BillingPreviewData;
+
+<BillingPreview
+  data={invoice}
+  labels={{
+    date: "Date",
+    description: "Description",
+    billedTime: "Hours",
+    rate: "Rate",
+    fee: "Amount",
+    summary: "Total",
+  }}
+  locale="en-GB"
+/>;
+```
+
+Styling: the scenes use Tailwind utilities against the `@stll/ui` theme
+tokens, so the host's Tailwind entry needs the theme and both packages'
+shipped sources (the CSS block under Development below). Light and dark follow
+the theme: put `dark` on the root element (`<html class="dark">`); the theme's
+derived tokens resolve there, so a `dark` class lower in the tree leaves them
+on their light values. The theme's
+`--font-sans` names DM Sans; load it (for example from Google Fonts) or the
+system sans serif stands in. The document page uses Tailwind's `font-serif`.
+
 ## Development
 
 ```sh

package/dist/feature-previews/billing-preview.d.ts

@@ -0,0 +1,38 @@
+import { PreviewMatter } from "./mock-data.js";
+import { FeaturePreviewProps } from "./surface.js";
+import { CentsAmount } from "@stll/money";
+//#region src/feature-previews/billing-preview.d.ts
+export type BillingPreviewLabels = {
+  /** Column headings of the invoice's time entries: date, description,
+   *  billed time ("Hours"), rate and fee ("Amount"). */
+  date: string;
+  description: string;
+  billedTime: string;
+  rate: string;
+  fee: string;
+  /** Label of the invoice's total row. */
+  summary: string;
+};
+export type BillingPreviewEntry = {
+  /** `YYYY-MM-DD`; unique within the invoice. */
+  date: string;
+  description: string;
+  billedMinutes: number;
+};
+/** The invoice's content. Every entry bills at `hourlyRate` (minor units,
+ *  minted with `cents` from `@stll/money`) in `currency` (ISO 4217); the
+ *  amounts and total are computed. */
+export type BillingPreviewData = {
+  invoiceNumber: string;
+  client: string;
+  matter: PreviewMatter;
+  currency: string;
+  hourlyRate: CentsAmount;
+  /** In the order the invoice lists them, usually by date. */
+  entries: readonly BillingPreviewEntry[];
+};
+/** An invoice draft: the matter's time entries in date order with hours,
+ *  rate and amount, and the total. Amounts come from the same money helpers
+ *  the app bills with. */
+export declare const BillingPreview: ({ labels, locale, data, className }: FeaturePreviewProps<BillingPreviewLabels, BillingPreviewData>) => import("react").JSX.Element;
+//#endregion

package/dist/feature-previews/billing-preview.js

@@ -0,0 +1,160 @@
+import { formatPreviewDate, formatPreviewHours } from "./format.js";
+import { PREVIEW_MATTERS } from "./mock-data.js";
+import { FeaturePreviewSurface } from "./surface.js";
+import { cents, formatMoneyCents, timeEntryAmount } from "@stll/money";
+import { BanknoteIcon } from "@stll/ui/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MatterIcon } from "@stll/ui/matter-icon";
+//#region src/feature-previews/billing-preview.tsx
+/** An invoice draft: the matter's time entries in date order with hours,
+*  rate and amount, and the total. Amounts come from the same money helpers
+*  the app bills with. */
+const BillingPreview = ({ labels, locale, data = DEFAULT_DATA, className }) => {
+	const money = (amountCents) => formatMoneyCents({
+		amountCents,
+		currency: data.currency,
+		locale
+	});
+	const rows = data.entries.map((entry) => ({
+		...entry,
+		amount: timeEntryAmount({
+			billedMinutes: entry.billedMinutes,
+			rateAtEntry: data.hourlyRate,
+			noCharge: false
+		})
+	}));
+	const totalMinutes = rows.reduce((sum, row) => sum + row.billedMinutes, 0);
+	const totalCents = rows.reduce((sum, row) => sum + row.amount, 0);
+	return /* @__PURE__ */ jsx(FeaturePreviewSurface, {
+		className,
+		icon: /* @__PURE__ */ jsx(BanknoteIcon, { className: "text-muted-foreground size-4 shrink-0" }),
+		meta: /* @__PURE__ */ jsx("span", {
+			className: "tabular-nums",
+			children: data.invoiceNumber
+		}),
+		title: data.client,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex h-full min-h-0 flex-col p-3",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "text-muted-foreground mb-2 flex min-w-0 items-center gap-1.5",
+				children: [/* @__PURE__ */ jsx(MatterIcon, {
+					className: "size-3.5 shrink-0",
+					matter: data.matter
+				}), /* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: data.matter.name
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "grid grid-cols-[auto_minmax(0,1fr)_auto_auto_auto] gap-x-4",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "text-muted-foreground col-span-full grid grid-cols-subgrid border-b pb-1.5 font-medium",
+						children: [
+							/* @__PURE__ */ jsx("span", { children: labels.date }),
+							/* @__PURE__ */ jsx("span", { children: labels.description }),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-end",
+								children: labels.billedTime
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-end",
+								children: labels.rate
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-end",
+								children: labels.fee
+							})
+						]
+					}),
+					rows.map((row) => /* @__PURE__ */ jsxs("div", {
+						className: "col-span-full grid grid-cols-subgrid items-baseline border-b py-2",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "text-muted-foreground whitespace-nowrap tabular-nums",
+								children: formatPreviewDate({
+									locale,
+									date: row.date,
+									options: {
+										day: "numeric",
+										month: "short",
+										year: "numeric"
+									}
+								})
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "truncate",
+								children: row.description
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-end tabular-nums",
+								children: formatPreviewHours(locale, row.billedMinutes)
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-muted-foreground text-end whitespace-nowrap tabular-nums",
+								children: money(data.hourlyRate)
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-end whitespace-nowrap tabular-nums",
+								children: money(row.amount)
+							})
+						]
+					}, row.date)),
+					/* @__PURE__ */ jsxs("div", {
+						className: "col-span-full grid grid-cols-subgrid pt-2.5 text-sm font-semibold",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "col-span-2",
+								children: labels.summary
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-end tabular-nums",
+								children: formatPreviewHours(locale, totalMinutes)
+							}),
+							/* @__PURE__ */ jsx("span", {}),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-end whitespace-nowrap tabular-nums",
+								children: money(totalCents)
+							})
+						]
+					})
+				]
+			})]
+		})
+	});
+};
+const DEFAULT_DATA = {
+	invoiceNumber: "INV-2026-0187",
+	client: "Harbour Logistics Ltd",
+	matter: PREVIEW_MATTERS.cargo,
+	currency: "EUR",
+	hourlyRate: cents(22e3),
+	entries: [
+		{
+			date: "2026-10-02",
+			description: "Conflict check and engagement letter",
+			billedMinutes: 30
+		},
+		{
+			date: "2026-10-06",
+			description: "Review of carriage contract and bills of lading",
+			billedMinutes: 144
+		},
+		{
+			date: "2026-10-09",
+			description: "Call with client on the cargo damage claim",
+			billedMinutes: 90
+		},
+		{
+			date: "2026-10-14",
+			description: "Draft letter before action",
+			billedMinutes: 210
+		},
+		{
+			date: "2026-10-16",
+			description: "Research on carrier liability limits",
+			billedMinutes: 120
+		}
+	]
+};
+//#endregion
+export { BillingPreview };

package/dist/feature-previews/contacts-preview.d.ts

@@ -0,0 +1,35 @@
+import { PreviewMatter } from "./mock-data.js";
+import { FeaturePreviewProps } from "./surface.js";
+//#region src/feature-previews/contacts-preview.d.ts
+export type ContactsPreviewLabels = {
+  /** Heading of the section filled from the company registry. */
+  businessRegistry: string;
+  /** Heading of the matters the contact is linked to. */
+  matters: string;
+};
+/** The contact's content. Registry field titles (`details[].label`,
+ *  `incorporatedOn.label`) are the registry's own, as the app shows them, so
+ *  they come with the data rather than the labels. */
+export type ContactsPreviewData = {
+  company: {
+    name: string;
+    legalForm: string;
+    status: string;
+    /** The registry's name, beside the section heading. */
+    registry: string;
+    details: readonly {
+      label: string;
+      value: string;
+    }[];
+    /** `date` is `YYYY-MM-DD`. */
+    incorporatedOn: {
+      label: string;
+      date: string;
+    };
+  };
+  linkedMatters: readonly PreviewMatter[];
+};
+/** A company contact filled from its business registry: legal form, status,
+ *  registered details and the matters it appears in. */
+export declare const ContactsPreview: ({ labels, locale, data: { company, linkedMatters }, className }: FeaturePreviewProps<ContactsPreviewLabels, ContactsPreviewData>) => import("react").JSX.Element;
+//#endregion

package/dist/feature-previews/contacts-preview.js

@@ -0,0 +1,109 @@
+import { formatPreviewDate } from "./format.js";
+import { PREVIEW_MATTERS } from "./mock-data.js";
+import { FeaturePreviewSurface } from "./surface.js";
+import { Building2Icon, ShieldCheckIcon } from "@stll/ui/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MatterIcon } from "@stll/ui/matter-icon";
+import { DetailsGrid, DetailsItem } from "@stll/ui/details-grid";
+//#region src/feature-previews/contacts-preview.tsx
+/** A company contact filled from its business registry: legal form, status,
+*  registered details and the matters it appears in. */
+const ContactsPreview = ({ labels, locale, data: { company, linkedMatters } = DEFAULT_DATA, className }) => /* @__PURE__ */ jsx(FeaturePreviewSurface, {
+	className,
+	icon: /* @__PURE__ */ jsx(Building2Icon, { className: "text-muted-foreground size-4 shrink-0" }),
+	title: company.name,
+	children: /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full min-h-0 flex-col gap-4 p-4",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 items-center gap-2 text-sm",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: company.legalForm
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "text-success flex shrink-0 items-center gap-1 font-medium",
+					children: [/* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-current" }), company.status]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("section", {
+				className: "flex min-w-0 flex-col gap-2",
+				children: [/* @__PURE__ */ jsxs("h3", {
+					className: "text-muted-foreground flex items-center gap-1.5 font-medium",
+					children: [
+						/* @__PURE__ */ jsx(ShieldCheckIcon, { className: "size-3.5 shrink-0" }),
+						labels.businessRegistry,
+						/* @__PURE__ */ jsxs("span", {
+							className: "text-foreground-subtle font-normal",
+							children: ["· ", company.registry]
+						})
+					]
+				}), /* @__PURE__ */ jsxs(DetailsGrid, {
+					className: "gap-y-1.5",
+					children: [company.details.map((detail) => /* @__PURE__ */ jsx(DetailsItem, {
+						label: detail.label,
+						children: detail.value
+					}, detail.label)), /* @__PURE__ */ jsx(DetailsItem, {
+						label: company.incorporatedOn.label,
+						children: formatPreviewDate({
+							locale,
+							date: company.incorporatedOn.date,
+							options: {
+								day: "numeric",
+								month: "long",
+								year: "numeric"
+							}
+						})
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("section", {
+				className: "flex min-w-0 flex-col gap-1.5",
+				children: [/* @__PURE__ */ jsx("h3", {
+					className: "text-muted-foreground font-medium",
+					children: labels.matters
+				}), /* @__PURE__ */ jsx("ul", {
+					className: "flex flex-col gap-1",
+					children: linkedMatters.map((matter) => /* @__PURE__ */ jsxs("li", {
+						className: "flex min-w-0 items-center gap-2",
+						children: [/* @__PURE__ */ jsx(MatterIcon, {
+							className: "size-3.5 shrink-0",
+							matter
+						}), /* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: matter.name
+						})]
+					}, matter.id))
+				})]
+			})
+		]
+	})
+});
+const DEFAULT_DATA = {
+	company: {
+		name: "Meridian Freight Ltd",
+		legalForm: "Private limited company",
+		status: "Active",
+		registry: "Companies House",
+		details: [
+			{
+				label: "Company number",
+				value: "09876543"
+			},
+			{
+				label: "Registered office",
+				value: "Unit 4, Quayside Park, Bristol BS1 6XX"
+			},
+			{
+				label: "SIC code",
+				value: "52290 – Other transportation support activities"
+			}
+		],
+		incorporatedOn: {
+			label: "Incorporated on",
+			date: "2015-03-04"
+		}
+	},
+	linkedMatters: [PREVIEW_MATTERS.cargo, PREVIEW_MATTERS.lease]
+};
+//#endregion
+export { ContactsPreview };

package/dist/feature-previews/documents-preview.d.ts

@@ -0,0 +1,44 @@
+import { PreviewPerson } from "./mock-data.js";
+import { FeaturePreviewProps } from "./surface.js";
+//#region src/feature-previews/documents-preview.d.ts
+export type DocumentsPreviewLabels = {
+  /** Heading of the comment rail beside the page. */
+  comments: string;
+};
+export type DocumentsPreviewComment = {
+  author: PreviewPerson;
+  /** `HH:MM`; unique within the document. */
+  time: string;
+  /** The commented passage, quoted under the comment. */
+  anchor: string;
+  body: string;
+};
+/** The page's content, top to bottom: a title, a heading, a clause with one
+ *  tracked change (`deleted` replaced by `inserted`), a clause with a
+ *  commented passage (`marked`), another heading and plain clauses; then
+ *  the comment rail. Text is literal: number each clause in its text. */
+export type DocumentsPreviewData = {
+  fileName: string;
+  /** People shown in the title row. */
+  reviewers: readonly PreviewPerson[];
+  title: string;
+  heading: string;
+  trackedChange: {
+    before: string;
+    deleted: string;
+    inserted: string;
+    after: string;
+  };
+  commented: {
+    before: string;
+    marked: string;
+    after: string;
+  };
+  nextHeading: string;
+  clauses: readonly string[];
+  comments: readonly DocumentsPreviewComment[];
+};
+/** A Word document edited in place: a page with a tracked change and a
+ *  commented passage, and the comment rail beside it. */
+export declare const DocumentsPreview: ({ labels, locale, data, className }: FeaturePreviewProps<DocumentsPreviewLabels, DocumentsPreviewData>) => import("react").JSX.Element;
+//#endregion

package/dist/feature-previews/documents-preview.js

@@ -0,0 +1,105 @@
+import { formatPreviewCount, formatPreviewTime } from "./format.js";
+import { PREVIEW_PEOPLE } from "./mock-data.js";
+import { FeaturePreviewSurface, PreviewAvatarStack } from "./surface.js";
+import { FileTextIcon } from "@stll/ui/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ReviewCommentCard } from "@stll/ui/review-comment-card";
+import { ReviewDiffDeletion, ReviewDiffInsertion } from "@stll/ui/review-diff-text";
+import { TextMark } from "@stll/ui/text-mark";
+//#region src/feature-previews/documents-preview.tsx
+/** A Word document edited in place: a page with a tracked change and a
+*  commented passage, and the comment rail beside it. */
+const DocumentsPreview = ({ labels, locale, data = DEFAULT_DATA, className }) => /* @__PURE__ */ jsx(FeaturePreviewSurface, {
+	className,
+	icon: /* @__PURE__ */ jsx(FileTextIcon, { className: "text-info size-4 shrink-0" }),
+	meta: /* @__PURE__ */ jsx(PreviewAvatarStack, { people: data.reviewers }),
+	title: data.fileName,
+	children: /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full min-h-0",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "bg-muted/50 flex min-w-0 flex-1 justify-center overflow-hidden px-4 pt-4",
+			children: /* @__PURE__ */ jsxs("article", {
+				className: "bg-card text-foreground text-2xs flex w-full max-w-md flex-col gap-2.5 rounded-t-sm border border-b-0 px-6 pt-6 font-serif leading-relaxed shadow-sm",
+				dir: "ltr",
+				children: [
+					/* @__PURE__ */ jsx("h3", {
+						className: "text-center text-xs font-semibold tracking-widest",
+						children: data.title
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "font-semibold",
+						children: data.heading
+					}),
+					/* @__PURE__ */ jsxs("p", { children: [
+						data.trackedChange.before,
+						/* @__PURE__ */ jsx(ReviewDiffDeletion, { children: data.trackedChange.deleted }),
+						/* @__PURE__ */ jsx(ReviewDiffInsertion, { children: data.trackedChange.inserted }),
+						data.trackedChange.after
+					] }),
+					/* @__PURE__ */ jsxs("p", { children: [
+						data.commented.before,
+						/* @__PURE__ */ jsx(TextMark, {
+							tone: "option-yellow",
+							variant: "fill",
+							children: data.commented.marked
+						}),
+						data.commented.after
+					] }),
+					/* @__PURE__ */ jsx("p", {
+						className: "font-semibold",
+						children: data.nextHeading
+					}),
+					data.clauses.map((clause) => /* @__PURE__ */ jsx("p", { children: clause }, clause))
+				]
+			})
+		}), /* @__PURE__ */ jsxs("aside", {
+			className: "flex w-[38%] max-w-64 min-w-0 shrink-0 flex-col border-s",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "text-muted-foreground flex h-8 shrink-0 items-center gap-1.5 px-3 font-medium",
+				children: [labels.comments, /* @__PURE__ */ jsx("span", {
+					className: "tabular-nums",
+					children: formatPreviewCount(locale, data.comments.length)
+				})]
+			}), data.comments.map((comment) => /* @__PURE__ */ jsx(ReviewCommentCard, {
+				anchorText: comment.anchor,
+				author: comment.author,
+				body: comment.body,
+				className: "border-t",
+				formattedTime: formatPreviewTime(locale, comment.time),
+				timestamp: `2026-10-19T${comment.time}:00Z`
+			}, comment.time))]
+		})]
+	})
+});
+const DEFAULT_DATA = {
+	fileName: "Share Purchase Agreement.docx",
+	reviewers: [PREVIEW_PEOPLE.laura, PREVIEW_PEOPLE.amira],
+	title: "SHARE PURCHASE AGREEMENT",
+	heading: "4. Purchase price",
+	trackedChange: {
+		before: "4.1 The Purchase Price shall be EUR 4,200,000, payable to the Seller's account within ",
+		deleted: "30",
+		inserted: "45",
+		after: " Business Days of Completion."
+	},
+	commented: {
+		before: "4.2 An amount equal to 10% of the Purchase Price shall be held in escrow ",
+		marked: "until the expiry of the Warranty Period",
+		after: " in accordance with Schedule 6."
+	},
+	nextHeading: "5. Warranties",
+	clauses: ["5.1 The Seller warrants to the Buyer that each of the Warranties is true, accurate and not misleading at the date of this Agreement and will be so at Completion.", "5.2 Each Warranty is a separate and independent warranty and shall not be limited by reference to any other Warranty."],
+	comments: [{
+		author: PREVIEW_PEOPLE.laura,
+		time: "09:12",
+		anchor: "45 Business Days",
+		body: "Buyer's counsel will push for 60 days. 45 is our floor."
+	}, {
+		author: PREVIEW_PEOPLE.amira,
+		time: "10:47",
+		anchor: "until the expiry of the Warranty Period",
+		body: "Tie the escrow release to the claims deadline in clause 7.3."
+	}]
+};
+//#endregion
+export { DocumentsPreview };

package/dist/feature-previews/format.d.ts

@@ -0,0 +1,16 @@
+//#region src/feature-previews/format.d.ts
+type FormatPreviewDateParams = {
+  locale: string;
+  /** `YYYY-MM-DD`. */
+  date: string;
+  options: Intl.DateTimeFormatOptions;
+};
+export declare const formatPreviewDate: ({ locale, date, options }: FormatPreviewDateParams) => string;
+/** A wall-clock time (`HH:MM`) in the locale's own hour cycle. */
+export declare const formatPreviewTime: (locale: string, time: string) => string;
+/** Minutes as `h:mm`, the way a timesheet shows a duration. */
+export declare const formatPreviewDuration: (locale: string, totalMinutes: number) => string;
+/** Minutes as decimal hours, the way an invoice bills them. */
+export declare const formatPreviewHours: (locale: string, totalMinutes: number) => string;
+export declare const formatPreviewCount: (locale: string, count: number) => string;
+//#endregion

package/dist/feature-previews/format.js

@@ -0,0 +1,20 @@
+import { Temporal } from "temporal-polyfill/full";
+//#region src/feature-previews/format.ts
+const formatPreviewDate = ({ locale, date, options }) => Temporal.PlainDate.from(date).toLocaleString(locale, options);
+/** A wall-clock time (`HH:MM`) in the locale's own hour cycle. */
+const formatPreviewTime = (locale, time) => Temporal.PlainTime.from(time).toLocaleString(locale, {
+	hour: "numeric",
+	minute: "2-digit"
+});
+/** Minutes as `h:mm`, the way a timesheet shows a duration. */
+const formatPreviewDuration = (locale, totalMinutes) => {
+	return `${new Intl.NumberFormat(locale).format(Math.floor(totalMinutes / 60))}:${new Intl.NumberFormat(locale, { minimumIntegerDigits: 2 }).format(totalMinutes % 60)}`;
+};
+/** Minutes as decimal hours, the way an invoice bills them. */
+const formatPreviewHours = (locale, totalMinutes) => new Intl.NumberFormat(locale, {
+	minimumFractionDigits: 1,
+	maximumFractionDigits: 2
+}).format(totalMinutes / 60);
+const formatPreviewCount = (locale, count) => new Intl.NumberFormat(locale).format(count);
+//#endregion
+export { formatPreviewCount, formatPreviewDate, formatPreviewDuration, formatPreviewHours, formatPreviewTime };