@heyramzi/ui 2.24.0 → 3.1.0

package/src/record/demo-data.ts

@@ -1,352 +0,0 @@
-// Fake data for the demo and the screenshots. Every name here is invented.
-import type {
-  FieldDef,
-  FieldSectionDef,
-  FieldValue,
-  RecordEvent,
-  RecordSummary,
-  StageDef,
-  StepDef,
-  StepGroupDef,
-} from "./types.js";
-
-/** The demo's clock, so a screenshot reads the same on any day. */
-export const DEMO_NOW = new Date("2026-10-21T12:00:00Z");
-export const DEMO_TODAY = "2026-10-21";
-
-export const stages: StageDef[] = [
-  { key: "lead", label: "Lead", tone: "neutral", category: "open" },
-  { key: "sent", label: "Proposal sent", tone: "info", category: "proposal" },
-  { key: "build", label: "In build", tone: "accent", category: "ongoing" },
-  { key: "paid", label: "Paid", tone: "success", category: "completed" },
-  { key: "lost", label: "Lost", tone: "destructive", category: "lost" },
-];
-
-export const stepGroups: StepGroupDef[] = [
-  { key: "sales", label: "Sales" },
-  { key: "delivery", label: "Delivery" },
-];
-
-export const websiteSteps: StepDef[] = [
-  { id: "s1", label: "Discovery call", done: true, group: "sales", start: "2026-10-03" },
-  { id: "s2", label: "Proposal", done: false, group: "sales", start: "2026-10-21" },
-  { id: "s3", label: "Kickoff", done: false, group: "delivery", start: "2026-10-26" },
-  { id: "s4", label: "Design review", done: false, group: "delivery", start: "2026-11-10" },
-  {
-    id: "s5",
-    label: "Build",
-    done: false,
-    group: "delivery",
-    start: "2026-11-12",
-    end: "2026-12-04",
-  },
-  {
-    id: "s6",
-    label: "Cutover",
-    done: false,
-    group: "delivery",
-    start: "2026-12-12",
-    end: "2026-12-13",
-  },
-  { id: "s7", label: "Training", done: false, group: "delivery", hidden: true },
-];
-
-export const projectSections: FieldSectionDef[] = [
-  { key: "scope", label: "Scope" },
-  { key: "loss", label: "Loss" },
-];
-
-export const projectFields: FieldDef[] = [
-  {
-    key: "type",
-    label: "Type",
-    type: "choice",
-    section: "scope",
-    options: [
-      { key: "strategy", label: "Strategy" },
-      { key: "implementation", label: "Implementation" },
-    ],
-  },
-  { key: "budget", label: "Budget", type: "money", section: "scope" },
-  {
-    key: "urgency",
-    label: "Urgency",
-    type: "choice",
-    section: "scope",
-    options: [
-      { key: "low", label: "Low", tone: "neutral" },
-      { key: "high", label: "High", tone: "warning" },
-    ],
-  },
-  { key: "goLive", label: "Go live", type: "date", section: "scope" },
-  { key: "context", label: "Context", type: "longtext", section: "scope" },
-  {
-    key: "reason",
-    label: "Reason",
-    type: "choice",
-    section: "loss",
-    showWhen: { key: "lossReasonOn", equals: "yes" },
-    options: [{ key: "price", label: "Price" }],
-  },
-];
-
-export const clientSections: FieldSectionDef[] = [{ key: "about", label: "About" }];
-
-export const clientFields: FieldDef[] = [
-  { key: "business", label: "Business", type: "longtext", section: "about" },
-  {
-    key: "size",
-    label: "Size",
-    type: "choice",
-    section: "about",
-    options: [
-      { key: "1-10", label: "1 to 10" },
-      { key: "11-50", label: "11 to 50" },
-      { key: "51+", label: "51 or more" },
-    ],
-  },
-  {
-    key: "sector",
-    label: "Sector",
-    type: "choice",
-    section: "about",
-    options: [
-      "Dental",
-      "Legal",
-      "Retail",
-      "Logistics",
-      "Education",
-      "Finance",
-      "Health",
-      "Hospitality",
-      "Media",
-    ].map((label) => ({ key: label.toLowerCase(), label })),
-  },
-  {
-    key: "needs",
-    label: "Needs",
-    type: "multi",
-    section: "about",
-    options: [
-      { key: "site", label: "Website" },
-      { key: "booking", label: "Booking" },
-      { key: "crm", label: "CRM" },
-      { key: "old", label: "Print", archived: true },
-    ],
-  },
-  { key: "site", label: "Website", type: "url", section: "about" },
-  { key: "email", label: "Email", type: "email", section: "about" },
-  { key: "tz", label: "Time zone", type: "timezone", section: "about" },
-];
-
-export const websiteValues: Record<string, FieldValue> = {
-  type: "implementation",
-  budget: 12000,
-  urgency: "high",
-  goLive: "2026-12-14",
-  context: "Replace the brochure site. Booking stays on the old tool until spring.",
-};
-
-export const clientValues: Record<string, FieldValue> = {
-  business: "A dental group in Lyon with 3 clinics and a shared front desk.",
-  size: "11-50",
-  sector: "dental",
-  needs: ["site", "booking", "old"],
-  site: "https://marlowfinch.example",
-  email: "jane@marlowfinch.example",
-  tz: "Europe/Paris",
-};
-
-const note = (id: string, at: string, title: string, body?: string): RecordEvent => ({
-  id,
-  kind: "note",
-  occurredAt: at,
-  title,
-  body,
-  actor: "Ramzi",
-});
-
-export const websiteEvents: RecordEvent[] = [
-  {
-    id: "w1",
-    kind: "status",
-    occurredAt: "2026-10-18T09:30:00Z",
-    title: "Sent SOW v2, legal is reviewing",
-    body: "The payment terms have 2 redlines. Sofia answers Monday and asks for the signature by the 26th, so the kickoff holds.",
-    actor: "Sofia",
-  },
-  {
-    id: "w2",
-    kind: "call",
-    occurredAt: "2026-10-21T08:15:00Z",
-    title: "Scoping review",
-    body: "45 minutes with Jane and the clinic manager. Booking stays out of scope. They want the new site to carry the clinic pages and nothing else.",
-    details: [
-      { label: "Length", value: "45 min" },
-      { label: "With", value: "Jane Roe, Tom Bell" },
-    ],
-    href: "#",
-  },
-  {
-    id: "w3",
-    kind: "stage",
-    occurredAt: "2026-10-12T14:00:00Z",
-    title: "Stage set to Proposal sent",
-    actor: "Sofia",
-  },
-  note(
-    "w4",
-    "2026-10-09T16:40:00Z",
-    "Their fear is another agency that vanishes",
-    "Said it twice. Lead the proposal with who answers the phone.",
-  ),
-  {
-    id: "w5",
-    kind: "invoice.sent",
-    occurredAt: "2026-10-06T10:00:00Z",
-    title: "Deposit invoice",
-    amount: 3600,
-    currency: "EUR",
-  },
-  {
-    id: "w6",
-    kind: "call",
-    occurredAt: "2026-10-03T13:00:00Z",
-    title: "Discovery call",
-    body: "Jane runs 3 clinics and the site is 4 years old.",
-  },
-  {
-    id: "w7",
-    kind: "milestone.done",
-    occurredAt: "2026-10-03T15:00:00Z",
-    title: "Discovery call done",
-  },
-  ...Array.from({ length: 34 }, (_, i): RecordEvent => ({
-    id: `old${i}`,
-    kind: i % 3 === 0 ? "email" : "note",
-    occurredAt: new Date(Date.UTC(2026, 8, 28 - i, 9, 0)).toISOString(),
-    title: i % 3 === 0 ? "Re: clinic pages" : "Warm intro follow-up",
-    actor: "Ramzi",
-  })),
-];
-
-export const website: RecordSummary = {
-  id: "p-web",
-  name: "Website rebuild",
-  href: "#",
-  stageKey: "sent",
-  value: 12000,
-  currency: "EUR",
-  startDate: "2026-11-01",
-  endDate: "2026-12-15",
-  whereWeAre: {
-    text: "Sent SOW v2, legal is reviewing. The payment terms have 2 redlines, Sofia answers Monday and asks for the signature by the 26th, so the kickoff holds.",
-    at: "2026-10-18T09:30:00Z",
-    actor: "Sofia",
-    health: { label: "Waiting", tone: "warning" },
-  },
-  next: { label: "Kickoff call", date: "2026-10-26", owner: "Ramzi" },
-  lastCallAt: "2026-10-21T08:15:00Z",
-  lastTouchAt: "2026-10-21T08:15:00Z",
-  progress: { done: 1, total: 6 },
-};
-
-export const audit: RecordSummary = {
-  id: "p-audit",
-  name: "Brand audit",
-  href: "#",
-  stageKey: "lost",
-  stageDetail: "Price",
-  value: 4500,
-  currency: "EUR",
-  whereWeAre: {
-    text: "They went with a freelancer at half the fee.",
-    at: "2026-06-11T10:00:00Z",
-    actor: "Sofia",
-  },
-  lastCallAt: "2026-06-04T10:00:00Z",
-  lastTouchAt: "2026-06-11T10:00:00Z",
-  progress: { done: 1, total: 3 },
-};
-
-export const portal: RecordSummary = {
-  id: "p-portal",
-  name: "Booking portal",
-  href: "#",
-  stageKey: "paid",
-  value: 18000,
-  paid: 18000,
-  currency: "EUR",
-  whereWeAre: {
-    text: "Live since March. Final invoice paid.",
-    at: "2026-04-02T10:00:00Z",
-    actor: "Ramzi",
-  },
-  lastCallAt: "2026-03-20T10:00:00Z",
-  lastTouchAt: "2026-04-02T10:00:00Z",
-  progress: { done: 5, total: 5 },
-};
-
-export const auditEvents: RecordEvent[] = [
-  {
-    id: "a1",
-    kind: "stage",
-    occurredAt: "2026-06-11T10:00:00Z",
-    title: "Stage set to Lost",
-    actor: "Sofia",
-    details: [
-      { label: "Reason", value: "Price" },
-      { label: "In their words", value: "A freelancer quoted half." },
-    ],
-  },
-  {
-    id: "a2",
-    kind: "call",
-    occurredAt: "2026-06-04T10:00:00Z",
-    title: "Proposal walk-through",
-    body: "Jane liked the audit and balked at the fee.",
-  },
-];
-
-export const portalEvents: RecordEvent[] = [
-  {
-    id: "b1",
-    kind: "payment",
-    occurredAt: "2026-04-02T10:00:00Z",
-    title: "Final invoice paid",
-    amount: 9000,
-    currency: "EUR",
-  },
-  {
-    id: "b2",
-    kind: "payment",
-    occurredAt: "2026-02-10T10:00:00Z",
-    title: "First instalment paid",
-    amount: 9000,
-    currency: "EUR",
-  },
-  {
-    id: "b3",
-    kind: "call",
-    occurredAt: "2026-03-20T10:00:00Z",
-    title: "Launch check",
-    body: "Live. A few copy fixes after.",
-  },
-];
-
-/** Something that happened before any project existed: it belongs to the client. */
-export const clientOnlyEvents: RecordEvent[] = [
-  {
-    id: "c1",
-    kind: "form",
-    occurredAt: "2026-02-01T09:00:00Z",
-    title: "Contact form: asked about online booking",
-    body: "Calls pile up at lunch and the front desk can't keep up.",
-  },
-];
-
-export const clientProjects = [
-  { summary: website, events: websiteEvents },
-  { summary: audit, events: auditEvents },
-  { summary: portal, events: portalEvents },
-];

package/src/record/record-demo.svelte

@@ -1,342 +0,0 @@
-<script lang="ts">
-	// =========================
-	// IMPORTS
-	// =========================
-	import { DotsThree, NotePencil } from "phosphor-svelte";
-	import { SegmentedFilter } from "../components/segmented/index.js";
-	import { Button } from "../shadcn/button/index.js";
-	import { Input } from "../shadcn/input/index.js";
-	import * as Tabs from "../shadcn/tabs/index.js";
-	import RecordShell from "./record-shell.svelte";
-	import RecordHeader from "./record-header.svelte";
-	import WhereWeAre from "./where-we-are.svelte";
-	import NextUp from "./next-up.svelte";
-	import RecordStats from "./record-stats.svelte";
-	import StepsRail from "./steps-rail.svelte";
-	import RecordTimeline from "./record-timeline.svelte";
-	import ProjectList from "./project-list.svelte";
-	import FieldSection from "./field-section.svelte";
-	import InfoList from "./info-list.svelte";
-	import { formatAge, formatMoney, formatRange } from "./format.js";
-	import {
-		latestWhereWeAre,
-		mergeClientEvents,
-		nextAcrossProjects,
-		rollupProjects,
-		stepProgress,
-	} from "./logic.js";
-	import type { FieldValue, RecordEvent, StepDef } from "./types.js";
-	import {
-		DEMO_NOW,
-		DEMO_TODAY,
-		clientFields,
-		clientOnlyEvents,
-		clientProjects,
-		clientSections,
-		clientValues,
-		projectFields,
-		projectSections,
-		stages,
-		stepGroups,
-		website,
-		websiteEvents,
-		websiteSteps,
-		websiteValues,
-	} from "./demo-data.js";
-
-	// =========================
-	// STATE
-	// =========================
-	type Fixture = "project" | "client";
-	let fixture = $state<Fixture>("project");
-	let narrow = $state(false);
-	let tab = $state<"activity" | "notes">("activity");
-	let filter = $state("all");
-	let steps = $state<StepDef[]>(structuredClone(websiteSteps));
-	let activeStep = $state<string | null>("s2");
-	let projectValues = $state<Record<string, FieldValue | undefined>>({ ...websiteValues });
-	let personValues = $state<Record<string, FieldValue | undefined>>({ ...clientValues });
-	let extra = $state<RecordEvent[]>([]);
-	let draftNote = $state("");
-	let railOpen = $state(false);
-
-	// =========================
-	// DERIVED
-	// =========================
-	const locale = "en-GB";
-	let projectEvents = $derived([...extra, ...websiteEvents]);
-	let clientEvents = $derived(
-		mergeClientEvents(
-			clientOnlyEvents,
-			clientProjects.map((p) => ({
-				id: p.summary.id,
-				name: p.summary.name,
-				href: p.summary.href,
-				events: p.events,
-			})),
-		),
-	);
-	let summaries = $derived(clientProjects.map((p) => p.summary));
-	let rollup = $derived(rollupProjects(summaries, stages));
-	let latest = $derived(latestWhereWeAre(summaries));
-	let next = $derived(nextAcrossProjects(summaries, stages));
-	let progress = $derived(stepProgress(steps));
-	let notes = $derived(projectEvents.filter((e) => e.kind === "note"));
-	let stage = $derived(stages.find((s) => s.key === website.stageKey));
-
-	let clientStats = $derived.by(() => {
-		const eur = rollup.totals.EUR;
-		return [
-			{ label: "Projects", value: String(rollup.count), sub: `${rollup.activeCount} active` },
-			{ label: "Pipeline", value: formatMoney(eur?.pipeline ?? 0, "EUR", locale, true) },
-			{ label: "Won", value: formatMoney(eur?.won ?? 0, "EUR", locale, true) },
-			{
-				label: "Paid",
-				value: formatMoney(eur?.paid ?? 0, "EUR", locale, true),
-				tone: "good" as const,
-			},
-			{
-				label: "Last call",
-				value: rollup.lastCallAt ? formatAge(rollup.lastCallAt, DEMO_NOW, locale) : "None yet",
-			},
-		];
-	});
-
-	// =========================
-	// FUNCTIONS
-	// =========================
-	function addNote() {
-		const title = draftNote.trim();
-		if (!title) return;
-		extra = [
-			{
-				id: `n${extra.length}`,
-				kind: "note",
-				occurredAt: DEMO_NOW.toISOString(),
-				title,
-				actor: "Ramzi",
-			},
-			...extra,
-		];
-		draftNote = "";
-	}
-
-	// A real host would round-trip here. The pause lets the rail show its optimistic order.
-	async function pause() {
-		await new Promise((resolve) => setTimeout(resolve, 250));
-	}
-</script>
-
-<!-- =========================== -->
-<!-- MARKUP -->
-<!-- =========================== -->
-{#snippet composer()}
-	<form
-		class="flex items-center gap-2"
-		onsubmit={(e) => {
-			e.preventDefault();
-			addNote();
-		}}
-	>
-		<Input
-			bind:value={draftNote}
-			placeholder="Write a note"
-			aria-label="Write a note"
-			class="flex-1"
-		/>
-		<Button type="submit" variant="outline" disabled={!draftNote.trim()}>
-			<NotePencil data-icon="inline-start" />
-			Add
-		</Button>
-	</form>
-{/snippet}
-
-{#snippet payment(event: RecordEvent)}
-	<p class="text-sm leading-snug font-medium">{event.title}</p>
-	<p class="text-lg font-semibold tabular-nums text-success">
-		{formatMoney(event.amount ?? 0, event.currency ?? "EUR", locale)}
-	</p>
-{/snippet}
-
-<div class="flex flex-col gap-3">
-	<div class="flex flex-wrap items-center gap-3">
-		<SegmentedFilter
-			ariaLabel="Record"
-			block={false}
-			value={fixture}
-			onValueChange={(v) => (fixture = v)}
-			options={[
-				{ value: "project", label: "One project" },
-				{ value: "client", label: "Client with 3 projects" },
-			]}
-		/>
-		<SegmentedFilter
-			ariaLabel="Width"
-			block={false}
-			value={narrow ? "narrow" : "full"}
-			onValueChange={(v) => (narrow = v === "narrow")}
-			options={[
-				{ value: "full", label: "Full width" },
-				{ value: "narrow", label: "390px" },
-			]}
-		/>
-	</div>
-
-	<div class={narrow ? "mx-auto w-full max-w-[390px]" : "w-full"}>
-		<div class="overflow-hidden rounded-xl shadow-card">
-			{#if fixture === "project"}
-				<RecordShell
-					bind:tab
-					bind:railOpen
-					tabs={[
-						{ value: "activity", label: "Activity", count: projectEvents.length },
-						{ value: "notes", label: "Notes", count: notes.length },
-					]}
-					tabsLabel="Project views"
-					railProgress={progress}
-				>
-					{#snippet header()}
-						<RecordHeader
-							title={website.name}
-							parent={{ label: "Marlow & Finch", href: "#" }}
-							stage={stage ? { label: stage.label, tone: stage.tone } : null}
-							facts={[
-								formatMoney(website.value ?? 0, "EUR", locale),
-								formatRange(website.startDate ?? "", website.endDate, locale),
-							]}
-						>
-							{#snippet actions()}
-								<Button variant="ghost" size="sm" icon aria-label="More actions"
-									><DotsThree weight="bold" /></Button
-								>
-							{/snippet}
-						</RecordHeader>
-					{/snippet}
-					{#snippet banner()}
-						<WhereWeAre
-							note={website.whereWeAre?.text}
-							at={website.whereWeAre?.at}
-							actor={website.whereWeAre?.actor}
-							health={website.whereWeAre?.health}
-							now={DEMO_NOW}
-							{locale}
-						/>
-						<NextUp next={website.next} today={DEMO_TODAY} {locale} />
-					{/snippet}
-					<Tabs.Content value="activity" class="mt-0">
-						<RecordTimeline
-							events={projectEvents}
-							bind:filter
-							{composer}
-							entry={{ payment }}
-							today={DEMO_TODAY}
-							timeZone="UTC"
-							{locale}
-						/>
-					</Tabs.Content>
-					<Tabs.Content value="notes" class="mt-0">
-						<RecordTimeline events={notes} {composer} today={DEMO_TODAY} timeZone="UTC" {locale} />
-					</Tabs.Content>
-					{#snippet rail()}
-						<div class="flex flex-col gap-6">
-							<StepsRail
-								{steps}
-								groups={stepGroups}
-								activeId={activeStep}
-								today={DEMO_TODAY}
-								{locale}
-								onSelect={(id) => (activeStep = id)}
-								onToggle={(id, visible) => {
-									steps = steps.map((s) => (s.id === id ? { ...s, hidden: !visible } : s));
-								}}
-								onReorder={async (ids) => {
-									await pause();
-									const byId = new Map(steps.map((s) => [s.id, s]));
-									steps = ids.flatMap((id) => byId.get(id) ?? []);
-								}}
-								onRename={(id, label) => {
-									const original = websiteSteps.find((s) => s.id === id)?.label ?? "";
-									steps = steps.map((s) =>
-										s.id === id ? { ...s, label: label || original, renamed: label !== "" } : s,
-									);
-								}}
-							/>
-							<InfoList
-								title="People"
-								rows={[
-									{ id: "contact", label: "Contact", value: "Jane Roe, CFO" },
-									{ id: "owner", label: "Owner", value: "Ramzi" },
-								]}
-							/>
-							<FieldSection
-								fields={projectFields}
-								sections={projectSections}
-								values={projectValues}
-								currency="EUR"
-								{locale}
-								onSave={async (key, value) => {
-									await pause();
-									projectValues = { ...projectValues, [key]: value };
-								}}
-							/>
-						</div>
-					{/snippet}
-				</RecordShell>
-			{:else}
-				<RecordShell bind:railOpen railTitle="Projects">
-					{#snippet header()}
-						<RecordHeader
-							title="Marlow & Finch"
-							parent={{ label: "Clients", href: "#" }}
-							facts={[
-								`Pipeline ${formatMoney(rollup.totals.EUR?.pipeline ?? 0, "EUR", locale, true)}`,
-								`Won ${formatMoney(rollup.totals.EUR?.won ?? 0, "EUR", locale, true)}`,
-							]}
-						>
-							<RecordStats stats={clientStats} gutter={false} />
-						</RecordHeader>
-					{/snippet}
-					{#snippet banner()}
-						<WhereWeAre
-							note={latest?.text}
-							at={latest?.at}
-							actor={latest?.actor}
-							health={latest?.health}
-							project={latest ? { name: latest.projectName } : null}
-							now={DEMO_NOW}
-							{locale}
-						/>
-						<NextUp {next} showProject today={DEMO_TODAY} {locale} />
-					{/snippet}
-					<RecordTimeline
-						events={clientEvents}
-						bind:filter
-						showProject
-						entry={{ payment }}
-						today={DEMO_TODAY}
-						timeZone="UTC"
-						{locale}
-					/>
-					{#snippet rail()}
-						<div class="flex flex-col gap-6">
-							<section class="flex flex-col gap-2">
-								<h2 class="px-2 text-xs font-medium text-muted-foreground">Projects</h2>
-								<ProjectList projects={summaries} {stages} today={DEMO_TODAY} {locale} />
-							</section>
-							<FieldSection
-								fields={clientFields}
-								sections={clientSections}
-								values={personValues}
-								{locale}
-								onSave={async (key, value) => {
-									await pause();
-									personValues = { ...personValues, [key]: value };
-								}}
-							/>
-						</div>
-					{/snippet}
-				</RecordShell>
-			{/if}
-		</div>
-	</div>
-</div>