@heyramzi/ui 2.23.0 → 3.0.0

package/src/onboarding/tour-runner.svelte

@@ -10,13 +10,13 @@
 		tour,
 		steps,
 		strings,
-		onfinish,
+		onFinish,
 	}: {
 		tour: Tour;
 		steps: Step[];
 		strings: Strings;
 		/** `null` means the tour never showed, so nothing is worth recording. */
-		onfinish: (outcome: Outcome | null) => void;
+		onFinish: (outcome: Outcome | null) => void;
 	} = $props();
 
 	// The provider keys this component per run, so the tour never changes under it.
@@ -40,7 +40,7 @@
 	function finish(outcome: Outcome | null) {
 		if (finished) return;
 		finished = true;
-		onfinish(outcome);
+		onFinish(outcome);
 	}
 
 	// Dismissing on the last step reports "dismissed" and then "completed" in one go, so the
@@ -120,7 +120,7 @@
 			{...api.getContentProps()}
 			bind:this={card}
 			class={[
-				"tour-card bg-popover text-popover-foreground ring-foreground/10 shadow-overlay pointer-events-auto max-w-full text-sm ring-1 outline-none",
+				"tour-card bg-popover text-popover-foreground ring-foreground/10 shadow-overlay pointer-events-auto max-w-full text-sm ring-1 outline-none max-sm:w-full",
 				intro ? "w-96 rounded-2xl" : "w-80 rounded-xl",
 			]}
 		>
@@ -134,73 +134,75 @@
 				{strings}
 				titleAttrs={api.getTitleProps()}
 				bodyAttrs={api.getDescriptionProps()}
-				onclose={dismiss}
-				onprev={() => api.prev()}
-				onnext={() => (api.lastStep ? dismiss() : api.next())}
+				onClose={dismiss}
+				onPrev={() => api.prev()}
+				onNext={() => (api.lastStep ? dismiss() : api.next())}
 			/>
 		</div>
 	</div>
 {/if}
 
 <style>
-	.tour-backdrop,
-	.tour-spotlight,
-	.tour-positioner {
-		--tour-z-index: 60;
-		z-index: calc(var(--tour-layer) + var(--tour-z-index));
-	}
-	.tour-backdrop {
-		background: oklch(0 0 0 / 0.5);
-		transition: clip-path var(--duration-fast) var(--ease-smooth-out);
-	}
-	.tour-backdrop[data-instant] {
-		transition-duration: 0ms;
-	}
-	.tour-spotlight {
-		outline: 2px solid oklch(1 0 0 / 0.7);
-		transition-property: left, top, width, height;
-		transition-duration: var(--duration-fast);
-		transition-timing-function: var(--ease-smooth-out);
-	}
-	.tour-positioner[data-type="dialog"] {
-		position: fixed;
-		inset: 0;
-		display: grid;
-		place-items: center;
-		padding: 1rem;
-		pointer-events: none;
-	}
-	.tour-card[data-state="open"] {
-		animation: tour-in var(--duration-fast) var(--ease-smooth-out);
-	}
-	@keyframes tour-in {
-		from {
-			opacity: 0;
-			scale: 0.97;
-		}
-	}
-	@media (max-width: 639px) {
+	@layer theme, base, components, utilities;
+
+	@layer components {
+		.tour-backdrop,
+		.tour-spotlight,
 		.tour-positioner {
-			position: fixed !important;
-			inset: auto 0 0 0 !important;
-			transform: none !important;
-			translate: none !important;
-			min-width: 0 !important;
-			width: auto !important;
-			display: block !important;
-			padding: 0.75rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom));
+			--tour-z-index: 60;
+			z-index: calc(var(--tour-layer) + var(--tour-z-index));
 		}
-		.tour-card {
-			width: 100%;
+		.tour-backdrop {
+			background: oklch(0 0 0 / 0.5);
+			transition: clip-path var(--duration-fast) var(--ease-smooth-out);
+		}
+		.tour-backdrop[data-instant] {
+			transition-duration: 0ms;
 		}
-	}
-	@media (prefers-reduced-motion: reduce) {
-		.tour-backdrop,
 		.tour-spotlight {
-			transition: none;
+			outline: 2px solid oklch(1 0 0 / 0.7);
+			transition-property: left, top, width, height;
+			transition-duration: var(--duration-fast);
+			transition-timing-function: var(--ease-smooth-out);
+		}
+		.tour-positioner[data-type="dialog"] {
+			position: fixed;
+			inset: 0;
+			display: grid;
+			place-items: center;
+			padding: 1rem;
+			pointer-events: none;
+		}
+		.tour-card {
+			transition-property: opacity, scale;
+			transition-duration: var(--duration-fast);
+			transition-timing-function: var(--ease-smooth-out);
+		}
+		@starting-style {
+			.tour-card[data-state="open"] {
+				opacity: 0;
+				scale: 0.97;
+			}
+		}
+
+		@media (max-width: 639px) {
+			.tour-positioner {
+				position: fixed !important;
+				inset: auto 0 0 0 !important;
+				transform: none !important;
+				translate: none !important;
+				min-width: 0 !important;
+				width: auto !important;
+				display: block !important;
+				padding: 0.75rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom));
+			}
 		}
-		.tour-card[data-state="open"] {
-			animation: none;
+		@media (prefers-reduced-motion: reduce) {
+			.tour-backdrop,
+			.tour-spotlight,
+			.tour-card {
+				transition: none;
+			}
 		}
 	}
 </style>

package/src/onboarding/tour-runner.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Outcome, Step, Strings, Tour } from "./types.js";
+type $$ComponentProps = {
+    tour: Tour;
+    steps: Step[];
+    strings: Strings;
+    /** `null` means the tour never showed, so nothing is worth recording. */
+    onFinish: (outcome: Outcome | null) => void;
+};
+declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/panel/side-panel.svelte

@@ -11,7 +11,7 @@
 	import * as Sheet from "../shadcn/sheet/index.js";
 	import { OpenIn, type OpenInTool } from "../components/open-in/index.js";
 	import { CopyButton } from "../components/copy/index.js";
-	import type { Tone } from "../lib/tone.js";
+	import { TONE_TEXT, type Tone } from "../lib/tone.js";
 	import { cn } from "../lib/utils.js";
 	import StatusBadge from "../status/status-badge.svelte";
 	import PopValue from "../charts/pop-value.svelte";
@@ -44,8 +44,8 @@
 		/** The body brings its own header: the title is read out but not drawn, and
 	    the body is neither padded nor scrolled by the panel. */
 		bare?: boolean;
-		/** Fires once when the panel closes, from the close button, Escape or the overlay. */
-		onClose?: () => void;
+		/** Called with the new state when the close button, Escape or the overlay closes the panel. */
+		onOpenChange?: (open: boolean) => void;
 	}
 	let {
 		open = $bindable(),
@@ -61,7 +61,7 @@
 		children,
 		width = "sm",
 		bare = false,
-		onClose,
+		onOpenChange,
 	}: Props = $props();
 
 	// =========================
@@ -75,9 +75,9 @@
 	let hasRow = $derived(badges.length > 0 || openIn.length > 0 || Boolean(handoff || actions));
 	const STAT_TONE = {
 		default: "",
-		muted: "text-muted-foreground",
-		good: "text-success",
-		bad: "text-destructive",
+		muted: TONE_TEXT.neutral,
+		good: TONE_TEXT.success,
+		bad: TONE_TEXT.destructive,
 	} as const;
 	const WIDTH: Record<SidePanelWidth, string> = {
 		sm: "sm:max-w-sm",
@@ -104,12 +104,7 @@
 <!-- =========================== -->
 <!-- MARKUP -->
 <!-- =========================== -->
-<Sheet.Root
-	bind:open
-	onOpenChange={(next) => {
-		if (!next) onClose?.();
-	}}
->
+<Sheet.Root bind:open {onOpenChange}>
 	<Sheet.Content
 		side="right"
 		bind:ref={panel}

package/src/panel/side-panel.svelte.d.ts

@@ -0,0 +1,48 @@
+import type { PanelStat, SidePanelWidth } from "./side-panel-types.js";
+export type { PanelStat, SidePanelWidth };
+import type { Snippet } from "svelte";
+import { type OpenInTool } from "../components/open-in/index.js";
+import { type Tone } from "../lib/tone.js";
+interface Props {
+    open: boolean;
+    /** Names the dialog for screen readers and heads the panel. */
+    title: string;
+    /** Merged onto the title. A short path is set `font-mono`, a subject is not. */
+    titleClass?: string;
+    /** The facts the record is filed under, read out under the title. */
+    description?: string;
+    /** Status chips, left of the action row. */
+    badges?: {
+        label: string;
+        tone: Tone;
+    }[];
+    /** Doors out to another tool. `text` replaces the tool's name on the button. */
+    openIn?: {
+        tool: OpenInTool;
+        href: string;
+        label: string;
+        text?: string;
+    }[];
+    /** A prompt for an AI about this record, copied on click. */
+    handoff?: {
+        value: () => string | Promise<string>;
+        label: string;
+        copiedLabel: string;
+    };
+    /** The record's numbers, as a strip under the badges. Same place in every panel. */
+    stats?: PanelStat[];
+    /** Anything else the record can do, drawn last in the action row. */
+    actions?: Snippet;
+    /** Pinned actions. The body scrolls above it; the caller aligns the row. */
+    footer?: Snippet;
+    children: Snippet;
+    width?: SidePanelWidth;
+    /** The body brings its own header: the title is read out but not drawn, and
+    the body is neither padded nor scrolled by the panel. */
+    bare?: boolean;
+    /** Called with the new state when the close button, Escape or the overlay closes the panel. */
+    onOpenChange?: (open: boolean) => void;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "open">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/record/field-section.svelte.d.ts

@@ -0,0 +1,19 @@
+import { type FieldValues } from "./fields.js";
+import type { FieldDef, FieldSectionDef, FieldValue, RecordLabels } from "./types.js";
+interface Props {
+    /** What a module declares for this record. */
+    fields: FieldDef[];
+    /** Section headings in the order to draw them. A section with no field isn't drawn. */
+    sections?: FieldSectionDef[];
+    values: FieldValues;
+    /** Without it every field is read-only and an empty one is left out. */
+    onSave?: (key: string, value: FieldValue) => void | Promise<void>;
+    /** For a money field that names none. */
+    currency?: string;
+    labels?: Partial<RecordLabels>;
+    locale?: string;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/record/format.ts

@@ -1,6 +1,8 @@
 // Display formatting through Intl, so a locale string is all a host passes.
 // A date-only value ("2026-10-26") is a calendar day, read in UTC so no zone shifts it.
 
+import { relativeTime } from "../lib/dates.js";
+
 const DAY_ONLY = /^\d{4}-\d{2}-\d{2}$/;
 
 function parse(iso: string): { date: Date; timeZone?: string } {
@@ -61,21 +63,7 @@ export function formatTime(iso: string, locale = "en-GB", timeZone?: string): st
 
 /** "3 days ago", "in 2 weeks", "now". */
 export function formatAge(iso: string, now: Date | number = Date.now(), locale = "en-GB"): string {
-  const seconds = Math.round((new Date(iso).getTime() - new Date(now).getTime()) / 1000);
-  const abs = Math.abs(seconds);
-  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto", style: "long" });
-  const units: [number, Intl.RelativeTimeFormatUnit][] = [
-    [31_536_000, "year"],
-    [2_592_000, "month"],
-    [604_800, "week"],
-    [86_400, "day"],
-    [3_600, "hour"],
-    [60, "minute"],
-  ];
-  for (const [size, unit] of units) {
-    if (abs >= size) return rtf.format(Math.round(seconds / size), unit);
-  }
-  return rtf.format(0, "second");
+  return relativeTime(iso, now, { locale });
 }
 
 /** "€12,000". `compact` gives "€12K". */

package/src/record/info-list.svelte

@@ -218,7 +218,7 @@
 					{#if saving === key}
 						<Spinner class="size-3.5 text-muted-foreground" />
 					{:else if !multi}
-						<CaretUpDown class="size-3.5 shrink-0 opacity-60" />
+						<CaretUpDown aria-hidden="true" class="size-3.5 shrink-0 opacity-60" />
 					{/if}
 				</Button>
 			{/snippet}
@@ -235,6 +235,7 @@
 								onSelect={() => (multi ? toggle(row, option.value) : pick(row, option.value))}
 							>
 								<Check
+									aria-hidden="true"
 									class={cn(
 										"size-3.5",
 										current.includes(option.value) ? "opacity-100" : "opacity-0",
@@ -338,7 +339,7 @@
 								max={row.tags.max}
 								label={t.edit(row.label)}
 								labels={{ add: t.add(row.label), none: t.noMatch }}
-								onchange={(next) => commit(row, next, false)}
+								onValueChange={(next) => commit(row, next, false)}
 							/>
 						{:else if row.input === "multi" && row.options}
 							{@render list(row, key, true)}
@@ -418,7 +419,7 @@
 							</Button>
 						{/if}
 						{#if failed?.key === key}
-							<p class="text-xs text-destructive" role="alert">{failed.text}</p>
+							<p class="text-xs text-destructive-ink" role="alert">{failed.text}</p>
 						{/if}
 					</dd>
 				{/if}

package/src/record/info-list.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { Snippet } from "svelte";
+import { type InfoRow, type RecordLabels } from "./types.js";
+interface Props {
+    rows: InfoRow[];
+    /** A heading over the list. Left out, nothing is drawn. */
+    title?: string | null;
+    labels?: Partial<RecordLabels>;
+    /**
+     * `list` is the editable label and value grid. `row` is a read-only band of items that
+     * wrap, with values that truncate. Rows ignore `onSave` there and keep their empty ones.
+     */
+    layout?: "list" | "row";
+    /** `row` only. Where the label sits against its value. */
+    labelPosition?: "above" | "beside";
+    /** `row` only. Classes for the `<dl>`, to set a grid or a gap. */
+    listClass?: string;
+    /** `row` only. Classes for each item, to cap its width. */
+    itemClass?: string;
+    /** `row` only. Sits after the list on the same line, a button for the whole band. */
+    trailing?: Snippet;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/record/logic.ts

@@ -1,4 +1,5 @@
 // The record's pure logic: grouping, merging, picking. No DOM, no clock of its own.
+import { localDay as dayOf } from "../lib/dates.js";
 import type {
   RecordEvent,
   RecordFilterDef,
@@ -16,12 +17,7 @@ import type {
 
 /** The calendar day of a timestamp as `YYYY-MM-DD`, in the given zone or the viewer's own. */
 export function localDay(iso: string, timeZone?: string): string {
-  return new Intl.DateTimeFormat("en-CA", {
-    year: "numeric",
-    month: "2-digit",
-    day: "2-digit",
-    timeZone,
-  }).format(new Date(iso));
+  return dayOf(iso, timeZone);
 }
 
 export type DayGroup = { day: string; events: RecordEvent[] };

package/src/record/next-up.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type RecordLabels, type RecordNext } from "./types.js";
+interface Props {
+    next?: RecordNext | null;
+    /** Client mode: say which project the next step belongs to. */
+    showProject?: boolean;
+    labels?: Partial<RecordLabels>;
+    locale?: string;
+    /** ISO date. Decides "late". Defaults to the viewer's today. */
+    today?: string;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/record/project-list.svelte.d.ts

@@ -0,0 +1,18 @@
+import { type RecordLabels, type RecordSummary, type StageDef } from "./types.js";
+interface Props {
+    projects: RecordSummary[];
+    /** The agency's stages: each project draws its stage's label and tone. */
+    stages: StageDef[];
+    /** A project being looked at, marked in the list. */
+    activeId?: string | null;
+    /** Money shown when a project has none of its own. */
+    currency?: string;
+    labels?: Partial<RecordLabels>;
+    locale?: string;
+    /** ISO date. Decides "late". Defaults to the viewer's today. */
+    today?: string;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/record/record-header.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { Snippet } from "svelte";
+import type { Tone } from "../lib/tone.js";
+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;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/record/record-rail.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from "svelte";
+export interface RecordRailTab {
+    id: string;
+    label: string;
+    /** Drawn beside the label, such as the number of comments. Hidden at 0 or when left out. */
+    count?: number;
+    content: Snippet;
+}
+interface Props {
+    tabs: RecordRailTab[];
+    /** The open tab's id. Defaults to the first tab. */
+    value?: string;
+    /** Names the tab list for a screen reader, such as "Task sidebar". */
+    label: string;
+    class?: string;
+    /** Classes for the strip that holds the tab list. */
+    listClass?: string;
+    /** Classes for each tab's panel. */
+    contentClass?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "value">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/record/record-shell.svelte.d.ts

@@ -0,0 +1,48 @@
+import type { Snippet } from "svelte";
+import { type TabDef } from "../components/segmented/index.js";
+import { type RecordLabels } from "./types.js";
+declare function $$render<T extends string = string>(): {
+    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;
+    };
+    exports: {};
+    bindings: "tab" | "railOpen";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends string = string> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "tab" | "railOpen";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends string = string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends string = string>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const $$Component: $$IsomorphicComponent;
+type $$Component<T extends string = string> = InstanceType<typeof $$Component<T>>;
+export default $$Component;

package/src/record/record-stats.svelte

@@ -2,6 +2,7 @@
 	// =========================
 	// IMPORTS
 	// =========================
+	import { TONE_TEXT } from "../lib/tone.js";
 	import { cn } from "../lib/utils.js";
 	import PopValue from "../charts/pop-value.svelte";
 	import type { PanelStat } from "../panel/side-panel-types.js";
@@ -23,9 +24,9 @@
 	// =========================
 	const TONE = {
 		default: "",
-		muted: "text-muted-foreground",
-		good: "text-success",
-		bad: "text-destructive",
+		muted: TONE_TEXT.neutral,
+		good: TONE_TEXT.success,
+		bad: TONE_TEXT.destructive,
 	} as const;
 </script>
 

package/src/record/record-stats.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { PanelStat } from "../panel/side-panel-types.js";
+interface Props {
+    stats: PanelStat[];
+    /** Sits flush with the record's gutter. Off inside a card. */
+    gutter?: boolean;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/record/record-timeline.svelte

@@ -169,7 +169,9 @@
 									{:else}
 										<p class="text-sm leading-snug font-medium wrap-anywhere">
 											{#if event.href}
-												<a href={event.href} class="underline-offset-2 hover:underline"
+												<a
+													href={event.href}
+													class="-my-1 inline-block py-1 underline-offset-2 hover:underline"
 													>{event.title}</a
 												>
 											{:else}

package/src/record/record-timeline.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { Snippet } from "svelte";
+import { type RecordEvent, type RecordFilterDef, type RecordKindDef, type RecordLabels } from "./types.js";
+interface Props {
+    events: RecordEvent[];
+    kinds?: RecordKindDef[];
+    filters?: RecordFilterDef[];
+    /** The chip picked: `all` or a filter key. */
+    filter?: string;
+    /** Draws a kind's content in place of the default title and body. The time,
+    the project chip and the amount stay the timeline's. */
+    entry?: Record<string, Snippet<[RecordEvent]>>;
+    /** Client mode: a chip on each entry says which project it came from. */
+    showProject?: boolean;
+    /** Entries drawn before the rest fold behind one button. */
+    limit?: number;
+    /** Above the list: a note composer, a status form. */
+    composer?: Snippet;
+    loading?: boolean;
+    labels?: Partial<RecordLabels>;
+    locale?: string;
+    /** IANA zone for day boundaries. Defaults to the viewer's own. */
+    timeZone?: string;
+    /** ISO date for "Today". Defaults to the viewer's today. */
+    today?: string;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "filter">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;