@heyramzi/ui 2.0.1 → 2.2.0

package/src/{tasks/record → record}/record-demo.svelte

@@ -1,117 +1,130 @@
 <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";
+	// =========================
+	// 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);
+	// =========================
+	// 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));
+	// =========================
+	// 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" },
-	];
-});
+	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 = "";
-}
+	// =========================
+	// 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));
-}
+	// 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>
 
 <!-- =========================== -->
@@ -125,7 +138,12 @@ async function pause() {
 			addNote();
 		}}
 	>
-		<Input bind:value={draftNote} placeholder="Write a note" aria-label="Write a note" class="flex-1" />
+		<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
@@ -188,7 +206,9 @@ async function pause() {
 							]}
 						>
 							{#snippet actions()}
-								<Button variant="ghost" size="sm" icon aria-label="More actions"><DotsThree weight="bold" /></Button>
+								<Button variant="ghost" size="sm" icon aria-label="More actions"
+									><DotsThree weight="bold" /></Button
+								>
 							{/snippet}
 						</RecordHeader>
 					{/snippet}

package/src/{tasks/record → record}/record-header.svelte

@@ -1,33 +1,42 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import type { Snippet } from "svelte";
-import { CaretLeft } from "phosphor-svelte";
-import { cn } from "../../lib/utils.js";
-import type { Tone } from "../../lib/tone.js";
-import StatusBadge from "../status-badge.svelte";
-import { gutterClass } from "./gutter.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { Snippet } from "svelte";
+	import { CaretLeft } from "phosphor-svelte";
+	import { cn } from "../lib/utils.js";
+	import type { Tone } from "../lib/tone.js";
+	import StatusBadge from "../status/status-badge.svelte";
+	import { gutterClass } from "./gutter.js";
 
-// =========================
-// PROPS
-// =========================
-interface Props {
-	title: string;
-	/** A mark drawn before the title: a logo, an avatar. */
-	logo?: Snippet;
-	/** The stage, in the agency's own word and the tone of its category. */
-	stage?: { label: string; tone: Tone; detail?: string | null } | null;
-	/** What this record sits under, such as the client of a project. */
-	parent?: { label: string; href: string } | null;
-	/** Quiet facts after the stage: a value, dates. */
-	facts?: string[];
-	actions?: Snippet;
-	/** Under the title row, for a stat strip. */
-	children?: Snippet;
-	class?: string;
-}
-let { title, logo, stage, parent, facts = [], actions, children, class: className }: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	interface Props {
+		title: string;
+		/** A mark drawn before the title: a logo, an avatar. */
+		logo?: Snippet;
+		/** The stage, in the agency's own word and the tone of its category. */
+		stage?: { label: string; tone: Tone; detail?: string | null } | null;
+		/** What this record sits under, such as the client of a project. */
+		parent?: { label: string; href: string } | null;
+		/** Quiet facts after the stage: a value, dates. */
+		facts?: string[];
+		actions?: Snippet;
+		/** Under the title row, for a stat strip. */
+		children?: Snippet;
+		class?: string;
+	}
+	let {
+		title,
+		logo,
+		stage,
+		parent,
+		facts = [],
+		actions,
+		children,
+		class: className,
+	}: Props = $props();
 </script>
 
 <!-- =========================== -->

package/src/{tasks/record → record}/record-shell.svelte

@@ -1,60 +1,60 @@
 <script lang="ts" generics="T extends string = string">
-// =========================
-// IMPORTS
-// =========================
-import type { Snippet } from "svelte";
-import { CaretRight } from "phosphor-svelte";
-import { cn } from "../../lib/utils.js";
-import { AnimatedTabs, type TabDef } from "../../components/segmented/index.js";
-import * as Sheet from "../../shadcn/sheet/index.js";
-import { Progress } from "../../shadcn/progress/index.js";
-import { gutterClass } from "./gutter.js";
-import { resolveLabels, type RecordLabels } from "./types.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { Snippet } from "svelte";
+	import { CaretRight } from "phosphor-svelte";
+	import { cn } from "../lib/utils.js";
+	import { AnimatedTabs, type TabDef } from "../components/segmented/index.js";
+	import * as Sheet from "../shadcn/sheet/index.js";
+	import { Progress } from "../shadcn/progress/index.js";
+	import { gutterClass } from "./gutter.js";
+	import { resolveLabels, type RecordLabels } from "./types.js";
 
-// =========================
-// PROPS
-// =========================
-interface Props {
-	header: Snippet;
-	/** Where we are, next up, stats: whatever sits between the header and the body. */
-	banner?: Snippet;
-	/** The tab row. Put each panel in a `Tabs.Content` from `@heyramzi/ui/shadcn/tabs`. */
-	tabs?: readonly TabDef<T>[];
-	tab?: T;
-	tabsLabel?: string;
-	/** The side rail. Docked at 48rem and wider, a sheet behind one row under that. */
-	rail?: Snippet;
-	/** The sheet's title, read out by screen readers. Defaults to the steps label. */
-	railTitle?: string;
-	/** Fills the narrow row's bar. Leave it out for a row with no progress. */
-	railProgress?: { done: number; total: number } | null;
-	railOpen?: boolean;
-	children: Snippet;
-	labels?: Partial<RecordLabels>;
-	class?: string;
-}
-let {
-	header,
-	banner,
-	tabs,
-	tab = $bindable(),
-	tabsLabel,
-	rail,
-	railTitle,
-	railProgress = null,
-	railOpen = $bindable(false),
-	children,
-	labels,
-	class: className,
-}: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	interface Props {
+		header: Snippet;
+		/** Where we are, next up, stats: whatever sits between the header and the body. */
+		banner?: Snippet;
+		/** The tab row. Put each panel in a `Tabs.Content` from `@heyramzi/ui/shadcn/tabs`. */
+		tabs?: readonly TabDef<T>[];
+		tab?: T;
+		tabsLabel?: string;
+		/** The side rail. Docked at 48rem and wider, a sheet behind one row under that. */
+		rail?: Snippet;
+		/** The sheet's title, read out by screen readers. Defaults to the steps label. */
+		railTitle?: string;
+		/** Fills the narrow row's bar. Leave it out for a row with no progress. */
+		railProgress?: { done: number; total: number } | null;
+		railOpen?: boolean;
+		children: Snippet;
+		labels?: Partial<RecordLabels>;
+		class?: string;
+	}
+	let {
+		header,
+		banner,
+		tabs,
+		tab = $bindable(),
+		tabsLabel,
+		rail,
+		railTitle,
+		railProgress = null,
+		railOpen = $bindable(false),
+		children,
+		labels,
+		class: className,
+	}: Props = $props();
 
-// =========================
-// DERIVED
-// =========================
-let t = $derived(resolveLabels(labels));
-let percent = $derived(
-	railProgress && railProgress.total > 0 ? (railProgress.done / railProgress.total) * 100 : 0,
-);
+	// =========================
+	// DERIVED
+	// =========================
+	let t = $derived(resolveLabels(labels));
+	let percent = $derived(
+		railProgress && railProgress.total > 0 ? (railProgress.done / railProgress.total) * 100 : 0,
+	);
 </script>
 
 <!-- =========================== -->

package/src/record/record-stats.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	// =========================
+	// IMPORTS
+	// =========================
+	import { cn } from "../lib/utils.js";
+	import type { PanelStat } from "../panel/side-panel-types.js";
+	import { gutterClass } from "./gutter.js";
+
+	// =========================
+	// PROPS
+	// =========================
+	interface Props {
+		stats: PanelStat[];
+		/** Sits flush with the record's gutter. Off inside a card. */
+		gutter?: boolean;
+		class?: string;
+	}
+	let { stats, gutter = true, class: className }: Props = $props();
+
+	// =========================
+	// DERIVED
+	// =========================
+	const TONE = {
+		default: "",
+		muted: "text-muted-foreground",
+		good: "text-success",
+		bad: "text-destructive",
+	} as const;
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+{#if stats.length > 0}
+	<dl class={cn("flex flex-wrap gap-x-6 gap-y-2", gutter && gutterClass, className)}>
+		{#each stats as stat (stat.label)}
+			<div class="min-w-0">
+				<dt class="text-xs text-muted-foreground">{stat.label}</dt>
+				<dd class={cn("text-sm font-medium tabular-nums", TONE[stat.tone ?? "default"])}>
+					{stat.value}
+					{#if stat.sub}
+						<span class="text-xs font-normal text-muted-foreground">{stat.sub}</span>
+					{/if}
+				</dd>
+			</div>
+		{/each}
+	</dl>
+{/if}