@stll/workspace-ui 0.12.6 → 0.13.0

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

@@ -0,0 +1,9 @@
+import { PreviewMatter, PreviewPerson } from "./mock-data.js";
+import { FeaturePreviewProps } from "./surface.js";
+import { BillingPreview, BillingPreviewData, BillingPreviewEntry, BillingPreviewLabels } from "./billing-preview.js";
+import { ContactsPreview, ContactsPreviewData, ContactsPreviewLabels } from "./contacts-preview.js";
+import { DocumentsPreview, DocumentsPreviewComment, DocumentsPreviewData, DocumentsPreviewLabels } from "./documents-preview.js";
+import { MattersPreview, MattersPreviewData, MattersPreviewLabels, MattersPreviewTask, MattersPreviewTaskStatus } from "./matters-preview.js";
+import { ResearchPreview, ResearchPreviewData, ResearchPreviewDecision, ResearchPreviewLabels } from "./research-preview.js";
+import { TimeTrackingPreview, TimeTrackingPreviewData, TimeTrackingPreviewEntry, TimeTrackingPreviewLabels } from "./time-tracking-preview.js";
+export { BillingPreview, type BillingPreviewData, type BillingPreviewEntry, type BillingPreviewLabels, ContactsPreview, type ContactsPreviewData, type ContactsPreviewLabels, DocumentsPreview, type DocumentsPreviewComment, type DocumentsPreviewData, type DocumentsPreviewLabels, type FeaturePreviewProps, MattersPreview, type MattersPreviewData, type MattersPreviewLabels, type MattersPreviewTask, type MattersPreviewTaskStatus, type PreviewMatter, type PreviewPerson, ResearchPreview, type ResearchPreviewData, type ResearchPreviewDecision, type ResearchPreviewLabels, TimeTrackingPreview, type TimeTrackingPreviewData, type TimeTrackingPreviewEntry, type TimeTrackingPreviewLabels };

package/dist/feature-previews/index.js

@@ -0,0 +1,7 @@
+import { BillingPreview } from "./billing-preview.js";
+import { ContactsPreview } from "./contacts-preview.js";
+import { DocumentsPreview } from "./documents-preview.js";
+import { MattersPreview } from "./matters-preview.js";
+import { ResearchPreview } from "./research-preview.js";
+import { TimeTrackingPreview } from "./time-tracking-preview.js";
+export { BillingPreview, ContactsPreview, DocumentsPreview, MattersPreview, ResearchPreview, TimeTrackingPreview };

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

@@ -0,0 +1,30 @@
+import { PreviewMatter, PreviewPerson } from "./mock-data.js";
+import { FeaturePreviewProps } from "./surface.js";
+//#region src/feature-previews/matters-preview.d.ts
+export type MattersPreviewLabels = {
+  /** Column names: the task statuses the board groups by. */
+  open: string;
+  inProgress: string;
+  done: string;
+};
+export type MattersPreviewTaskStatus = "open" | "in_progress" | "done";
+export type MattersPreviewTask = {
+  name: string;
+  status: MattersPreviewTaskStatus;
+  /** `YYYY-MM-DD`. */
+  due: string;
+  assignee: PreviewPerson;
+  /** File name of an attached document, if any. */
+  attachment: string | null;
+};
+/** The board's content: the matter in the title row, its team, and the tasks
+ *  (grouped into columns by status, in the given order). */
+export type MattersPreviewData = {
+  matter: PreviewMatter;
+  team: readonly PreviewPerson[];
+  tasks: readonly MattersPreviewTask[];
+};
+/** A matter's task board: three status columns of task cards with due dates,
+ *  assignees and an attached document. */
+export declare const MattersPreview: ({ labels, locale, data, className }: FeaturePreviewProps<MattersPreviewLabels, MattersPreviewData>) => import("react").JSX.Element;
+//#endregion

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

@@ -0,0 +1,153 @@
+import { TASK_STATUS_COLORS, TASK_STATUS_ICONS } from "../task-status.js";
+import { formatPreviewCount, formatPreviewDate } from "./format.js";
+import { PREVIEW_MATTERS, PREVIEW_PEOPLE } from "./mock-data.js";
+import { FeaturePreviewSurface, PreviewAvatar, PreviewAvatarStack } from "./surface.js";
+import { CalendarIcon, FileTextIcon } from "@stll/ui/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@stll/ui/utils";
+import { KanbanCardShell, KanbanColumnHeader } from "@stll/ui/kanban";
+import { MatterIcon } from "@stll/ui/matter-icon";
+//#region src/feature-previews/matters-preview.tsx
+/** A matter's task board: three status columns of task cards with due dates,
+*  assignees and an attached document. */
+const MattersPreview = ({ labels, locale, data = DEFAULT_DATA, className }) => /* @__PURE__ */ jsx(FeaturePreviewSurface, {
+	className,
+	icon: /* @__PURE__ */ jsx(MatterIcon, {
+		className: "size-4 shrink-0",
+		matter: data.matter
+	}),
+	meta: /* @__PURE__ */ jsx(PreviewAvatarStack, { people: data.team }),
+	title: data.matter.name,
+	children: /* @__PURE__ */ jsx("div", {
+		className: "grid h-full grid-cols-3 gap-2 p-2",
+		children: COLUMNS.map((column) => {
+			const tasks = data.tasks.filter((task) => task.status === column.status);
+			const Icon = TASK_STATUS_ICONS[column.status];
+			return /* @__PURE__ */ jsxs("div", {
+				className: "bg-muted/50 flex min-w-0 flex-col gap-1.5 rounded-md pb-1.5",
+				children: [/* @__PURE__ */ jsx(KanbanColumnHeader, {
+					className: "h-8 px-2",
+					meta: formatPreviewCount(locale, tasks.length),
+					swatch: /* @__PURE__ */ jsx(Icon, { className: cn("size-3.5 shrink-0", TASK_STATUS_COLORS[column.status]) }),
+					title: labels[column.label]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex min-w-0 flex-col gap-1.5 px-1.5",
+					children: tasks.map((task) => /* @__PURE__ */ jsx(PreviewTaskCard, {
+						locale,
+						task
+					}, task.name))
+				})]
+			}, column.status);
+		})
+	})
+});
+const PreviewTaskCard = ({ task, locale }) => {
+	const Icon = TASK_STATUS_ICONS[task.status];
+	return /* @__PURE__ */ jsx(KanbanCardShell, {
+		className: "p-2.5",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2",
+			children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: "flex min-w-0 items-start gap-1.5 leading-snug font-medium",
+					children: [/* @__PURE__ */ jsx(Icon, { className: cn("mt-px size-3.5 shrink-0", TASK_STATUS_COLORS[task.status]) }), /* @__PURE__ */ jsx("span", {
+						className: "line-clamp-2 min-w-0",
+						children: task.name
+					})]
+				}),
+				task.attachment === null ? null : /* @__PURE__ */ jsxs("span", {
+					className: "text-muted-foreground flex min-w-0 items-center gap-1.5",
+					children: [/* @__PURE__ */ jsx(FileTextIcon, { className: "size-3 shrink-0" }), /* @__PURE__ */ jsx("span", {
+						className: "truncate",
+						children: task.attachment
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "text-muted-foreground flex min-w-0 items-center gap-1.5 leading-none",
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "bg-muted/60 flex min-w-0 items-center gap-1 rounded px-1.5 py-0.5 whitespace-nowrap tabular-nums",
+						children: [/* @__PURE__ */ jsx(CalendarIcon, { className: "size-3 shrink-0" }), formatPreviewDate({
+							locale,
+							date: task.due,
+							options: {
+								day: "numeric",
+								month: "short"
+							}
+						})]
+					}), /* @__PURE__ */ jsx("span", {
+						className: "ms-auto",
+						children: /* @__PURE__ */ jsx(PreviewAvatar, { person: task.assignee })
+					})]
+				})
+			]
+		})
+	});
+};
+const COLUMNS = [
+	{
+		status: "open",
+		label: "open"
+	},
+	{
+		status: "in_progress",
+		label: "inProgress"
+	},
+	{
+		status: "done",
+		label: "done"
+	}
+];
+const DEFAULT_DATA = {
+	matter: PREVIEW_MATTERS.cargo,
+	team: [
+		PREVIEW_PEOPLE.laura,
+		PREVIEW_PEOPLE.tomas,
+		PREVIEW_PEOPLE.amira
+	],
+	tasks: [
+		{
+			name: "Draft statement of claim",
+			status: "open",
+			due: "2026-10-28",
+			assignee: PREVIEW_PEOPLE.laura,
+			attachment: null
+		},
+		{
+			name: "Collect shipping manifests",
+			status: "open",
+			due: "2026-10-30",
+			assignee: PREVIEW_PEOPLE.tomas,
+			attachment: null
+		},
+		{
+			name: "Review expert report on cargo damage",
+			status: "in_progress",
+			due: "2026-10-21",
+			assignee: PREVIEW_PEOPLE.amira,
+			attachment: "Expert report – cargo damage.pdf"
+		},
+		{
+			name: "Prepare witness statements",
+			status: "in_progress",
+			due: "2026-10-23",
+			assignee: PREVIEW_PEOPLE.laura,
+			attachment: null
+		},
+		{
+			name: "Send letter before action",
+			status: "done",
+			due: "2026-10-12",
+			assignee: PREVIEW_PEOPLE.tomas,
+			attachment: "Letter before action.docx"
+		},
+		{
+			name: "Run conflict check",
+			status: "done",
+			due: "2026-10-02",
+			assignee: PREVIEW_PEOPLE.amira,
+			attachment: null
+		}
+	]
+};
+//#endregion
+export { MattersPreview };

package/dist/feature-previews/mock-data.d.ts

@@ -0,0 +1,41 @@
+//#region src/feature-previews/mock-data.d.ts
+/** A person drawn as initials (assignees, reviewers, comment authors). */
+export type PreviewPerson = {
+  name: string;
+};
+export declare const PREVIEW_PEOPLE: {
+  readonly laura: {
+    readonly name: "Laura Chen";
+  };
+  readonly tomas: {
+    readonly name: "Tomás Novák";
+  };
+  readonly amira: {
+    readonly name: "Amira Haddad";
+  };
+};
+/** A matter drawn with its icon. `color` is a matter colour token
+ *  (`--option-blue`, `--option-violet`, …); `id` seeds the fallback colour. */
+export type PreviewMatter = {
+  id: string;
+  color: string;
+  name: string;
+};
+export declare const PREVIEW_MATTERS: {
+  readonly cargo: {
+    readonly id: "preview-matter-cargo";
+    readonly color: "--option-blue";
+    readonly name: "Harbour Logistics v. Meridian Freight";
+  };
+  readonly acquisition: {
+    readonly id: "preview-matter-acquisition";
+    readonly color: "--option-violet";
+    readonly name: "Project Alder: share purchase";
+  };
+  readonly lease: {
+    readonly id: "preview-matter-lease";
+    readonly color: "--option-amber";
+    readonly name: "Quayside warehouse lease";
+  };
+};
+//#endregion

package/dist/feature-previews/mock-data.js

@@ -0,0 +1,25 @@
+//#region src/feature-previews/mock-data.ts
+const PREVIEW_PEOPLE = {
+	laura: { name: "Laura Chen" },
+	tomas: { name: "Tomás Novák" },
+	amira: { name: "Amira Haddad" }
+};
+const PREVIEW_MATTERS = {
+	cargo: {
+		id: "preview-matter-cargo",
+		color: "--option-blue",
+		name: "Harbour Logistics v. Meridian Freight"
+	},
+	acquisition: {
+		id: "preview-matter-acquisition",
+		color: "--option-violet",
+		name: "Project Alder: share purchase"
+	},
+	lease: {
+		id: "preview-matter-lease",
+		color: "--option-amber",
+		name: "Quayside warehouse lease"
+	}
+};
+//#endregion
+export { PREVIEW_MATTERS, PREVIEW_PEOPLE };

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

@@ -0,0 +1,33 @@
+import { FeaturePreviewProps } from "./surface.js";
+import { COURT_TIER_WEIGHT } from "@stll/ui/document-identity-badge.logic";
+//#region src/feature-previews/research-preview.d.ts
+export type ResearchPreviewLabels = {
+  /** Title of the case-law search surface. */
+  caseLaw: string;
+};
+export type ResearchPreviewDecision = {
+  court: {
+    name: string;
+    /** Badge text (`NS`, `ÚS`). */
+    abbreviation: string;
+    /** Badge weight, from solid (constitutional) to dashed (other). */
+    tier: keyof typeof COURT_TIER_WEIGHT;
+  };
+  /** `YYYY-MM-DD`. */
+  date: string;
+  /** Unique within the results. */
+  fileNumber: string;
+  /** The matched passage: `hit` is highlighted between `before` and
+   *  `after`. */
+  before: string;
+  hit: string;
+  after: string;
+};
+export type ResearchPreviewData = {
+  query: string;
+  decisions: readonly ResearchPreviewDecision[];
+};
+/** Case-law search: a query and the decisions it found, each with its court,
+ *  date, file number and the passage that matched. */
+export declare const ResearchPreview: ({ labels, locale, data, className }: FeaturePreviewProps<ResearchPreviewLabels, ResearchPreviewData>) => import("react").JSX.Element;
+//#endregion

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

@@ -0,0 +1,115 @@
+import { formatPreviewDate } from "./format.js";
+import { FeaturePreviewSurface } from "./surface.js";
+import { CaseLawIcon, SearchIcon } from "@stll/ui/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SEARCH_HIT_MARK, TextMark } from "@stll/ui/text-mark";
+import { DocumentIdentityBadge } from "@stll/ui/document-identity-badge";
+//#region src/feature-previews/research-preview.tsx
+/** Case-law search: a query and the decisions it found, each with its court,
+*  date, file number and the passage that matched. */
+const ResearchPreview = ({ labels, locale, data = DEFAULT_DATA, className }) => /* @__PURE__ */ jsx(FeaturePreviewSurface, {
+	className,
+	icon: /* @__PURE__ */ jsx(CaseLawIcon, { className: "text-muted-foreground size-4 shrink-0" }),
+	title: labels.caseLaw,
+	children: /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full min-h-0 flex-col gap-2 p-3",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "bg-card flex h-9 shrink-0 items-center gap-2 rounded-md border px-2.5 text-sm shadow-xs",
+			children: [/* @__PURE__ */ jsx(SearchIcon, { className: "text-muted-foreground size-4 shrink-0" }), /* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: data.query
+			})]
+		}), /* @__PURE__ */ jsx("ol", {
+			className: "flex min-h-0 flex-col divide-y",
+			children: data.decisions.map((decision) => /* @__PURE__ */ jsxs("li", {
+				className: "flex flex-col gap-1 py-2.5",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex min-w-0 items-center gap-2",
+						children: [
+							/* @__PURE__ */ jsx(DocumentIdentityBadge, { identity: {
+								kind: "decision",
+								courtAbbreviation: decision.court.abbreviation,
+								courtTier: decision.court.tier
+							} }),
+							/* @__PURE__ */ jsx("span", {
+								className: "truncate text-sm font-medium",
+								children: decision.court.name
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-muted-foreground ms-auto shrink-0 whitespace-nowrap tabular-nums",
+								children: formatPreviewDate({
+									locale,
+									date: decision.date,
+									options: {
+										day: "numeric",
+										month: "short",
+										year: "numeric"
+									}
+								})
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx("bdi", {
+						className: "text-muted-foreground text-2xs font-mono",
+						children: decision.fileNumber
+					}),
+					/* @__PURE__ */ jsxs("p", {
+						className: "text-foreground-strong-muted line-clamp-2 leading-relaxed",
+						children: [
+							decision.before,
+							/* @__PURE__ */ jsx(TextMark, {
+								...SEARCH_HIT_MARK,
+								children: decision.hit
+							}),
+							decision.after
+						]
+					})
+				]
+			}, decision.fileNumber))
+		})]
+	})
+});
+const DEFAULT_DATA = {
+	query: "limitation period for warranty claims under a share purchase",
+	decisions: [
+		{
+			court: {
+				name: "Supreme Court",
+				abbreviation: "NS",
+				tier: "supreme"
+			},
+			date: "2025-03-18",
+			fileNumber: "27 Cdo 1931/2024",
+			before: "For a claim under a share purchase agreement, the ",
+			hit: "limitation period",
+			after: " begins when the buyer learned of the breach of warranty, not on the day of completion."
+		},
+		{
+			court: {
+				name: "Constitutional Court",
+				abbreviation: "ÚS",
+				tier: "constitutional"
+			},
+			date: "2024-06-04",
+			fileNumber: "II. ÚS 1187/23",
+			before: "A court that applies the ",
+			hit: "limitation period",
+			after: " without asking when the claimant could know of the defect denies a fair hearing."
+		},
+		{
+			court: {
+				name: "High Court in Prague",
+				abbreviation: "VS",
+				tier: "regional"
+			},
+			date: "2023-11-29",
+			fileNumber: "5 Cmo 112/2023",
+			before: "Contractual caps on ",
+			hit: "warranty claims",
+			after: " do not shorten the statutory limitation period unless the parties say so expressly."
+		}
+	]
+};
+//#endregion
+export { ResearchPreview };

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

@@ -0,0 +1,34 @@
+import { PreviewPerson } from "./mock-data.js";
+import * as React from "react";
+//#region src/feature-previews/surface.d.ts
+/** Props every scene takes: its interface labels, the formatting locale for
+ *  its dates and numbers, its content, and classes for the host's sizing. */
+export type FeaturePreviewProps<Labels, Data> = {
+  labels: Labels;
+  /** Full formatting locale (`en-GB`, `cs-CZ`), used for dates and numbers. */
+  locale: string;
+  /** What the scene depicts (matters, documents, amounts). Omitted, the
+   *  scene shows the package's fictional English set. */
+  data?: Data | undefined;
+  className?: string | undefined;
+};
+type FeaturePreviewSurfaceProps = React.PropsWithChildren<{
+  icon: React.ReactNode;
+  title: React.ReactNode;
+  meta?: React.ReactNode;
+  className?: string | undefined;
+}>;
+/**
+ * The window every scene draws in: a title row and a clipped body that fills
+ * whatever box the host gives it. Decorative, so it is hidden from assistive
+ * technology and takes no pointer input; the host names what it illustrates.
+ */
+export declare const FeaturePreviewSurface: ({ icon, title, meta, className, children }: FeaturePreviewSurfaceProps) => React.JSX.Element;
+/** A row of overlapping initials, as the app shows a matter's team. */
+export declare const PreviewAvatarStack: ({ people }: {
+  people: readonly PreviewPerson[];
+}) => React.JSX.Element;
+export declare const PreviewAvatar: ({ person }: {
+  person: PreviewPerson;
+}) => React.JSX.Element;
+//#endregion

package/dist/feature-previews/surface.js

@@ -0,0 +1,42 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@stll/ui/utils";
+import { ReviewAuthorAvatar } from "@stll/ui/review-author-avatar";
+//#region src/feature-previews/surface.tsx
+/**
+* The window every scene draws in: a title row and a clipped body that fills
+* whatever box the host gives it. Decorative, so it is hidden from assistive
+* technology and takes no pointer input; the host names what it illustrates.
+*/
+const FeaturePreviewSurface = ({ icon, title, meta, className, children }) => /* @__PURE__ */ jsxs("div", {
+	"aria-hidden": true,
+	className: cn("bg-background text-foreground pointer-events-none flex size-full min-h-0 flex-col overflow-hidden rounded-lg border text-start text-xs select-none", className),
+	"data-slot": "feature-preview",
+	children: [/* @__PURE__ */ jsxs("div", {
+		className: "flex h-10 shrink-0 items-center gap-2 border-b px-3",
+		children: [
+			icon,
+			/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 truncate text-sm font-medium",
+				children: title
+			}),
+			meta === void 0 ? null : /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground ms-auto flex shrink-0 items-center gap-2",
+				children: meta
+			})
+		]
+	}), /* @__PURE__ */ jsx("div", {
+		className: "relative min-h-0 flex-1 overflow-hidden",
+		children
+	})]
+});
+/** A row of overlapping initials, as the app shows a matter's team. */
+const PreviewAvatarStack = ({ people }) => /* @__PURE__ */ jsx("span", {
+	className: "flex gap-1",
+	children: people.map((person) => /* @__PURE__ */ jsx(PreviewAvatar, { person }, person.name))
+});
+const PreviewAvatar = ({ person }) => /* @__PURE__ */ jsx(ReviewAuthorAvatar, {
+	className: "size-5 shrink-0",
+	name: person.name
+});
+//#endregion
+export { FeaturePreviewSurface, PreviewAvatar, PreviewAvatarStack };

package/dist/feature-previews/time-tracking-preview.d.ts

@@ -0,0 +1,35 @@
+import { PreviewMatter } from "./mock-data.js";
+import { FeaturePreviewProps } from "./surface.js";
+//#region src/feature-previews/time-tracking-preview.d.ts
+export type TimeTrackingPreviewLabels = {
+  /** Title of the time-tracking surface. */
+  time: string;
+  /** Label of the day's total row. */
+  summary: string;
+};
+export type TimeTrackingPreviewEntry = {
+  /** `HH:MM`; `start` is unique within the day. */
+  start: string;
+  end: string;
+  minutes: number;
+  description: string;
+  matter: PreviewMatter;
+};
+/** The day's content: the running timer (its elapsed time frozen, since a
+ *  static scene shows one moment) and the entries already recorded. The
+ *  day's total is computed. */
+export type TimeTrackingPreviewData = {
+  /** `YYYY-MM-DD`. */
+  day: string;
+  running: {
+    description: string;
+    matter: PreviewMatter;
+    elapsedMinutes: number;
+  };
+  /** In the order they were worked. */
+  entries: readonly TimeTrackingPreviewEntry[];
+};
+/** A running timer on a matter above the day's recorded entries and their
+ *  total. */
+export declare const TimeTrackingPreview: ({ labels, locale, data: { day, running, entries }, className }: FeaturePreviewProps<TimeTrackingPreviewLabels, TimeTrackingPreviewData>) => import("react").JSX.Element;
+//#endregion

package/dist/feature-previews/time-tracking-preview.js

@@ -0,0 +1,135 @@
+import { formatPreviewDate, formatPreviewDuration, formatPreviewTime } from "./format.js";
+import { PREVIEW_MATTERS } from "./mock-data.js";
+import { FeaturePreviewSurface } from "./surface.js";
+import { ClockIcon, SquareIcon } from "@stll/ui/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MatterIcon } from "@stll/ui/matter-icon";
+//#region src/feature-previews/time-tracking-preview.tsx
+/** A running timer on a matter above the day's recorded entries and their
+*  total. */
+const TimeTrackingPreview = ({ labels, locale, data: { day, running, entries } = DEFAULT_DATA, className }) => {
+	const totalMinutes = entries.reduce((sum, entry) => sum + entry.minutes, 0) + running.elapsedMinutes;
+	return /* @__PURE__ */ jsx(FeaturePreviewSurface, {
+		className,
+		icon: /* @__PURE__ */ jsx(ClockIcon, { className: "text-muted-foreground size-4 shrink-0" }),
+		meta: /* @__PURE__ */ jsx("span", {
+			className: "whitespace-nowrap",
+			children: formatPreviewDate({
+				locale,
+				date: day,
+				options: {
+					weekday: "long",
+					day: "numeric",
+					month: "long"
+				}
+			})
+		}),
+		title: labels.time,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex h-full min-h-0 flex-col gap-3 p-3",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "bg-card flex min-w-0 items-center gap-3 rounded-lg border p-3 shadow-xs",
+					children: [
+						/* @__PURE__ */ jsxs("span", {
+							className: "relative flex size-2 shrink-0",
+							children: [/* @__PURE__ */ jsx("span", { className: "bg-success absolute inset-0 rounded-full opacity-60 motion-safe:animate-ping" }), /* @__PURE__ */ jsx("span", { className: "bg-success relative size-2 rounded-full" })]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex min-w-0 flex-1 flex-col gap-1",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "truncate text-sm font-medium",
+								children: running.description
+							}), /* @__PURE__ */ jsx(PreviewMatterLabel, { matter: running.matter })]
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "shrink-0 text-xl font-medium tabular-nums",
+							children: formatPreviewDuration(locale, running.elapsedMinutes)
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "bg-primary text-primary-foreground flex size-7 shrink-0 items-center justify-center rounded-md",
+							children: /* @__PURE__ */ jsx(SquareIcon, { className: "size-3 fill-current" })
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx("ul", {
+					className: "flex min-h-0 flex-col divide-y",
+					children: entries.map((entry) => /* @__PURE__ */ jsxs("li", {
+						className: "flex min-w-0 items-center gap-3 py-2",
+						children: [
+							/* @__PURE__ */ jsxs("span", {
+								className: "text-muted-foreground w-24 shrink-0 whitespace-nowrap tabular-nums",
+								children: [
+									formatPreviewTime(locale, entry.start),
+									"–",
+									formatPreviewTime(locale, entry.end)
+								]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex min-w-0 flex-1 flex-col gap-0.5",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "truncate",
+									children: entry.description
+								}), /* @__PURE__ */ jsx(PreviewMatterLabel, { matter: entry.matter })]
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "shrink-0 tabular-nums",
+								children: formatPreviewDuration(locale, entry.minutes)
+							})
+						]
+					}, entry.start))
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between border-t pt-2 text-sm font-semibold",
+					children: [/* @__PURE__ */ jsx("span", { children: labels.summary }), /* @__PURE__ */ jsx("span", {
+						className: "tabular-nums",
+						children: formatPreviewDuration(locale, totalMinutes)
+					})]
+				})
+			]
+		})
+	});
+};
+const PreviewMatterLabel = ({ matter }) => /* @__PURE__ */ jsxs("span", {
+	className: "text-muted-foreground flex min-w-0 items-center gap-1.5",
+	children: [/* @__PURE__ */ jsx(MatterIcon, {
+		className: "size-3 shrink-0",
+		matter
+	}), /* @__PURE__ */ jsx("span", {
+		className: "truncate",
+		children: matter.name
+	})]
+});
+const DEFAULT_DATA = {
+	day: "2026-10-19",
+	running: {
+		description: "Prepare witness statements",
+		matter: PREVIEW_MATTERS.cargo,
+		elapsedMinutes: 84
+	},
+	entries: [
+		{
+			start: "08:30",
+			end: "09:15",
+			minutes: 45,
+			description: "Review disclosure list",
+			matter: PREVIEW_MATTERS.cargo
+		},
+		{
+			start: "09:30",
+			end: "11:00",
+			minutes: 90,
+			description: "Mark up share purchase agreement",
+			matter: PREVIEW_MATTERS.acquisition
+		},
+		{
+			start: "11:15",
+			end: "11:45",
+			minutes: 30,
+			description: "Call with landlord's solicitors",
+			matter: PREVIEW_MATTERS.lease
+		}
+	]
+};
+//#endregion
+export { TimeTrackingPreview };