@heyramzi/ui 2.23.0 → 3.0.0

package/dist/record/demo-data.js

@@ -1,485 +0,0 @@
-/** 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 = [
-	{
-		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 = [{
-	key: "sales",
-	label: "Sales"
-}, {
-	key: "delivery",
-	label: "Delivery"
-}];
-export const websiteSteps = [
-	{
-		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 = [{
-	key: "scope",
-	label: "Scope"
-}, {
-	key: "loss",
-	label: "Loss"
-}];
-export const projectFields = [
-	{
-		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 = [{
-	key: "about",
-	label: "About"
-}];
-export const clientFields = [
-	{
-		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 = {
-	type: "implementation",
-	budget: 12e3,
-	urgency: "high",
-	goLive: "2026-12-14",
-	context: "Replace the brochure site. Booking stays on the old tool until spring."
-};
-export const clientValues = {
-	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, at, title, body) => ({
-	id,
-	kind: "note",
-	occurredAt: at,
-	title,
-	body,
-	actor: "Ramzi"
-});
-export const websiteEvents = [
-	{
-		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) => ({
-		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 = {
-	id: "p-web",
-	name: "Website rebuild",
-	href: "#",
-	stageKey: "sent",
-	value: 12e3,
-	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 = {
-	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 = {
-	id: "p-portal",
-	name: "Booking portal",
-	href: "#",
-	stageKey: "paid",
-	value: 18e3,
-	paid: 18e3,
-	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 = [{
-	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 = [
-	{
-		id: "b1",
-		kind: "payment",
-		occurredAt: "2026-04-02T10:00:00Z",
-		title: "Final invoice paid",
-		amount: 9e3,
-		currency: "EUR"
-	},
-	{
-		id: "b2",
-		kind: "payment",
-		occurredAt: "2026-02-10T10:00:00Z",
-		title: "First instalment paid",
-		amount: 9e3,
-		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 = [{
-	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/dist/status/pill-tint.js

@@ -1,13 +0,0 @@
-// A quiet tint and no border: the icon and the text carry the tone, the fill only groups
-// them. Neutral reads off the foreground, not `bg-muted`, because muted sits 0.005 L from
-// the canvas and vanishes there (tokens board, "what fights the new scale").
-// It lives in a .ts module, not status-pill.svelte's module script, so a plain tsc consumer
-// can import it: tsc's `*.svelte` shim only knows a default export.
-export const PILL_TINT = {
-	neutral: "bg-foreground/6 text-muted-foreground",
-	accent: "bg-[color-mix(in_oklab,var(--tone-accent,var(--color-primary))_12%,transparent)] text-[color:var(--tone-accent,var(--color-primary))]",
-	info: "bg-info/12 text-info-800 dark:text-info-400",
-	success: "bg-success/12 text-success-800 dark:text-success-400",
-	warning: "bg-warning/14 text-warning-800 dark:text-warning-400",
-	destructive: "bg-destructive/10 text-destructive-ink"
-};

package/dist/test-setup.js

@@ -1,30 +0,0 @@
-// WHY a setup file and not a beforeAll: layerchart and svelte/motion call
-// matchMedia while their module evaluates, which happens on import, before any hook runs. jsdom ships none of these, and bits-ui and embla measure with them.
-class ObserverStub {
-	observe() {}
-	unobserve() {}
-	disconnect() {}
-	takeRecords() {
-		return [];
-	}
-}
-globalThis.ResizeObserver ??= ObserverStub;
-globalThis.IntersectionObserver ??= ObserverStub;
-globalThis.matchMedia ??= ((query) => ({
-	matches: false,
-	media: query,
-	onchange: null,
-	addEventListener() {},
-	removeEventListener() {},
-	addListener() {},
-	removeListener() {},
-	dispatchEvent: () => false
-}));
-// jsdom lays out nothing, so an SVG path has no length to give. The success
-// check reads one to set its dash offset.
-if (globalThis.SVGElement && !("getTotalLength" in globalThis.SVGElement.prototype)) {
-	Object.defineProperty(globalThis.SVGElement.prototype, "getTotalLength", {
-		value: () => 100,
-		configurable: true
-	});
-}

package/dist/work/presets/sales.js

@@ -1,39 +0,0 @@
-import { defineStatuses } from "../../status/define-statuses.js";
-/**
-* An example status map for a sales pipeline. Names are neutral on purpose:
-* swap the keys and labels for your own domain.
-*/
-export const salesStatuses = defineStatuses({
-	new: {
-		label: "New",
-		tone: "accent",
-		variant: "open"
-	},
-	contacted: {
-		label: "Contacted",
-		tone: "info",
-		variant: "open"
-	},
-	proposal: {
-		label: "Proposal",
-		tone: "accent",
-		variant: "progress",
-		progress: .25
-	},
-	negotiation: {
-		label: "Negotiation",
-		tone: "warning",
-		variant: "progress",
-		progress: .75
-	},
-	won: {
-		label: "Won",
-		tone: "success",
-		variant: "completed"
-	},
-	lost: {
-		label: "Lost",
-		tone: "destructive",
-		variant: "lost"
-	}
-});

package/src/agents/demo.svelte

@@ -1,137 +0,0 @@
-<script lang="ts">
-	import AgentAvatar from "./agent-avatar.svelte";
-	import AgentCast from "./agent-cast.svelte";
-	import type { Agent, AgentState } from "./types.js";
-
-	const cast: Agent[] = [
-		{
-			id: "ada",
-			name: "Ada",
-			role: "Researcher",
-			shape: "clover",
-			color: "#41C4FF",
-			group: "Research",
-		},
-		{ id: "bo", name: "Bo", role: "Analyst", shape: "flower", group: "Research" },
-		{ id: "cy", name: "Cy", role: "Planner", shape: "mech", group: "Planning" },
-		{ id: "dia", name: "Dia", role: "Scheduler", shape: "droid", group: "Planning" },
-		{ id: "eli", name: "Eli", role: "Writer", shape: "cat", group: "Craft" },
-		{ id: "fen", name: "Fen", role: "Editor", shape: "pill", group: "Craft" },
-		{ id: "gus", name: "Gus", role: "Runner", shape: "ghost", group: "Craft" },
-		{ id: "hal", name: "Hal", role: "Watcher", shape: "star", group: "Craft" },
-	];
-
-	const states: { value: AgentState; label: string }[] = [
-		{ value: "default", label: "Idle" },
-		{ value: "working", label: "Working" },
-		{ value: "sleeping", label: "Sleeping" },
-	];
-
-	let selected = $state<string | null>("ada");
-	let leadState = $state<AgentState>("working");
-	let lead = $derived(cast.find((agent) => agent.id === selected) ?? cast[0]);
-</script>
-
-<div class="demo">
-	<header class="demo__hero">
-		<div class="demo__portrait">
-			<AgentAvatar
-				name={lead.name}
-				role={lead.role}
-				shape={lead.shape}
-				color={lead.color}
-				state={leadState}
-			/>
-		</div>
-		<div class="demo__intro">
-			<p class="demo__eyebrow">AgentCast</p>
-			<h1 class="demo__title">{lead.name}</h1>
-			<p class="demo__role">{lead.role}</p>
-			<div class="demo__states" role="radiogroup" aria-label="State">
-				{#each states as s (s.value)}
-					<button
-						type="button"
-						role="radio"
-						aria-checked={leadState === s.value}
-						onclick={() => (leadState = s.value)}
-					>
-						{s.label}
-					</button>
-				{/each}
-			</div>
-		</div>
-	</header>
-
-	<AgentCast
-		agents={cast}
-		selectedId={selected}
-		onSelect={(agent) => (selected = agent.id ?? agent.name)}
-	/>
-</div>
-
-<style>
-	.demo {
-		max-width: 56rem;
-		margin: 0 auto;
-		padding: 2rem 1.5rem 4rem;
-		color: var(--color-foreground, #18181b);
-		background: var(--color-background, #fafafa);
-	}
-	.demo__hero {
-		display: flex;
-		align-items: center;
-		gap: 1.5rem;
-		margin-bottom: 2.5rem;
-	}
-	.demo__portrait {
-		flex: none;
-		width: 9rem;
-	}
-	.demo__eyebrow {
-		margin: 0;
-		font-size: 0.75rem;
-		letter-spacing: 0.14em;
-		text-transform: uppercase;
-		color: var(--color-muted-foreground, #71717a);
-	}
-	.demo__title {
-		margin: 0.25rem 0 0;
-		font-size: 2.25rem;
-		letter-spacing: -0.03em;
-	}
-	.demo__role {
-		margin: 0.25rem 0 0;
-		color: var(--color-muted-foreground, #52525b);
-	}
-	.demo__states {
-		display: inline-flex;
-		gap: 0.25rem;
-		margin-top: 0.875rem;
-		padding: 0.1875rem;
-		border-radius: 0.625rem;
-		background: color-mix(in oklab, var(--color-foreground, #18181b) 6%, transparent);
-	}
-	.demo__states button {
-		padding: 0.3125rem 0.75rem;
-		font: inherit;
-		font-size: 0.8125rem;
-		color: var(--color-muted-foreground, #71717a);
-		background: transparent;
-		border: 0;
-		border-radius: 0.4375rem;
-		cursor: pointer;
-		transition:
-			color var(--duration-quick, 150ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)),
-			background-color var(--duration-quick, 150ms)
-				var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
-	}
-	.demo__states button[aria-checked="true"] {
-		color: var(--color-foreground, #18181b);
-		background: var(--color-card, #fff);
-		box-shadow: var(--elev-hairline, 0 0 0 1px rgb(0 0 0 / 0.06));
-	}
-	.demo__states button:focus-visible {
-		outline: 2px solid var(--color-ring, #6366f1);
-		outline-offset: 1px;
-	}
-</style>