@heyramzi/ui 2.1.0 → 2.2.0

package/src/onboarding/tour-card.svelte

@@ -40,12 +40,28 @@
 </script>
 
 {#if image}
-	<img src={image} alt="" class="aspect-video w-full rounded-t-[inherit] object-cover outline -outline-offset-1 outline-black/10 dark:outline-white/10" />
+	<img
+		src={image}
+		alt=""
+		class="aspect-video w-full rounded-t-[inherit] object-cover outline -outline-offset-1 outline-black/10 dark:outline-white/10"
+	/>
 {/if}
 <div class="flex flex-col gap-1.5 p-4 pb-3">
 	<div class="flex items-start justify-between gap-3">
-		<h2 {...titleAttrs} class={["font-semibold leading-snug text-balance", intro ? "text-base" : "text-sm"]}>{title}</h2>
-		<Button onclick={onclose} variant="ghost" size="sm" icon class="-mt-1 -mr-1.5 text-muted-foreground" aria-label={strings.skip}>
+		<h2
+			{...titleAttrs}
+			class={["font-semibold leading-snug text-balance", intro ? "text-base" : "text-sm"]}
+		>
+			{title}
+		</h2>
+		<Button
+			onclick={onclose}
+			variant="ghost"
+			size="sm"
+			icon
+			class="-mt-1 -mr-1.5 text-muted-foreground"
+			aria-label={strings.skip}
+		>
 			<X weight="bold" />
 		</Button>
 	</div>
@@ -53,9 +69,18 @@
 </div>
 <div class="flex items-center justify-between gap-3 px-4 pb-4">
 	{#if total > 1}
-		<div role="img" aria-label={strings.progress(index + 1, total)} class="flex items-center gap-1.5">
+		<div
+			role="img"
+			aria-label={strings.progress(index + 1, total)}
+			class="flex items-center gap-1.5"
+		>
 			{#each { length: total } as _, i (i)}
-				<span class={["h-1.5 rounded-full transition-[width,background-color] duration-(--duration-fast) ease-(--ease-smooth-out) motion-reduce:transition-none", i === index ? "bg-foreground w-4" : "bg-border w-1.5"]}></span>
+				<span
+					class={[
+						"h-1.5 rounded-full transition-[width,background-color] duration-(--duration-fast) ease-(--ease-smooth-out) motion-reduce:transition-none",
+						i === index ? "bg-foreground w-4" : "bg-border w-1.5",
+					]}
+				></span>
 			{/each}
 		</div>
 	{:else}

package/src/onboarding/tour-runner.svelte

@@ -47,7 +47,8 @@
 	// dismissal waits a microtask and the completion wins.
 	function onStatusChange({ status }: zag.StatusChangeDetails) {
 		if (status === "completed") finish("completed");
-		else if (status === "dismissed" || status === "skipped") queueMicrotask(() => finish("dismissed"));
+		else if (status === "dismissed" || status === "skipped")
+			queueMicrotask(() => finish("dismissed"));
 		else if (status === "not-found") finish(null);
 	}
 
@@ -107,13 +108,21 @@
 </script>
 
 {#if step}
-	<div use:portal {...api.getBackdropProps()} class="tour-backdrop" data-instant={instant || undefined}></div>
+	<div
+		use:portal
+		{...api.getBackdropProps()}
+		class="tour-backdrop"
+		data-instant={instant || undefined}
+	></div>
 	<div use:portal {...api.getSpotlightProps()} class="tour-spotlight"></div>
 	<div use:portal {...api.getPositionerProps()} class="tour-positioner">
 		<div
 			{...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", intro ? "w-96 rounded-2xl" : "w-80 rounded-xl"]}
+			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",
+				intro ? "w-96 rounded-2xl" : "w-80 rounded-xl",
+			]}
 		>
 			<TourCard
 				title={String(step.title)}

package/src/onboarding/types.ts

@@ -9,26 +9,34 @@ export type Step = { target: string; title: string; body: string; placement?: Pl
  * `version` starts at 1. Raise it and everyone who saw the old one sees the tour again.
  */
 export type Tour =
-	| { id: string; version?: number; route: string; kind: "steps"; steps: Step[] }
-	| { id: string; version?: number; route: string; kind: "intro"; title: string; body: string; image?: string };
+  | { id: string; version?: number; route: string; kind: "steps"; steps: Step[] }
+  | {
+      id: string;
+      version?: number;
+      route: string;
+      kind: "intro";
+      title: string;
+      body: string;
+      image?: string;
+    };
 
 export type Outcome = "completed" | "dismissed";
 
 /** Where seen-state lives. `load` runs once per session. */
 export interface SeenStore {
-	/** Tour id to the version seen. */
-	load(): Promise<Record<string, number>>;
-	markSeen(tourId: string, version: number, outcome: Outcome): Promise<void>;
-	/** One tour, or all of them when no id is given. */
-	reset(tourId?: string): Promise<void>;
+  /** Tour id to the version seen. */
+  load(): Promise<Record<string, number>>;
+  markSeen(tourId: string, version: number, outcome: Outcome): Promise<void>;
+  /** One tour, or all of them when no id is given. */
+  reset(tourId?: string): Promise<void>;
 }
 
 export type Strings = {
-	next: string;
-	back: string;
-	done: string;
-	skip: string;
-	progress: (n: number, total: number) => string;
+  next: string;
+  back: string;
+  done: string;
+  skip: string;
+  progress: (n: number, total: number) => string;
 };
 
 export const MAX_STEPS = 6;

package/src/onboarding/wait.ts

@@ -2,28 +2,28 @@ const find = (selector: string) => document.querySelector(selector);
 
 /** Resolves with the element once the selector matches, or null after `timeoutMs` or an abort. */
 export function waitForElement(
-	selector: string,
-	timeoutMs: number,
-	signal?: AbortSignal,
+  selector: string,
+  timeoutMs: number,
+  signal?: AbortSignal,
 ): Promise<Element | null> {
-	return new Promise((resolve) => {
-		const now = find(selector);
-		if (now) return resolve(now);
-		if (signal?.aborted) return resolve(null);
+  return new Promise((resolve) => {
+    const now = find(selector);
+    if (now) return resolve(now);
+    if (signal?.aborted) return resolve(null);
 
-		const finish = (el: Element | null) => {
-			observer.disconnect();
-			clearTimeout(timer);
-			signal?.removeEventListener("abort", onAbort);
-			resolve(el);
-		};
-		const onAbort = () => finish(null);
-		const observer = new MutationObserver(() => {
-			const el = find(selector);
-			if (el) finish(el);
-		});
-		const timer = setTimeout(() => finish(find(selector)), timeoutMs);
-		observer.observe(document.documentElement, { childList: true, subtree: true });
-		signal?.addEventListener("abort", onAbort);
-	});
+    const finish = (el: Element | null) => {
+      observer.disconnect();
+      clearTimeout(timer);
+      signal?.removeEventListener("abort", onAbort);
+      resolve(el);
+    };
+    const onAbort = () => finish(null);
+    const observer = new MutationObserver(() => {
+      const el = find(selector);
+      if (el) finish(el);
+    });
+    const timer = setTimeout(() => finish(find(selector)), timeoutMs);
+    observer.observe(document.documentElement, { childList: true, subtree: true });
+    signal?.addEventListener("abort", onAbort);
+  });
 }

package/src/panel/side-panel.svelte

@@ -1,104 +1,103 @@
 <script lang="ts" module>
-import type { PanelStat, SidePanelWidth } from "./side-panel-types.js";
-export type { PanelStat, SidePanelWidth };
+	import type { PanelStat, SidePanelWidth } from "./side-panel-types.js";
+	export type { PanelStat, SidePanelWidth };
 </script>
 
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import type { Snippet } from "svelte";
-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 { cn } from "../lib/utils.js";
-import StatusBadge from "../status/status-badge.svelte";
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { Snippet } from "svelte";
+	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 { cn } from "../lib/utils.js";
+	import StatusBadge from "../status/status-badge.svelte";
 
-// =========================
-// PROPS
-// =========================
-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
+	// =========================
+	// PROPS
+	// =========================
+	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;
-	/** Fires once when the panel closes, from the close button, Escape or the overlay. */
-	onClose?: () => void;
-};
-let {
-	open = $bindable(),
-	title,
-	titleClass,
-	description,
-	badges = [],
-	openIn = [],
-	handoff,
-	stats = [],
-	actions,
-	footer,
-	children,
-	width = "sm",
-	bare = false,
-	onClose,
-}: Props = $props();
+		bare?: boolean;
+		/** Fires once when the panel closes, from the close button, Escape or the overlay. */
+		onClose?: () => void;
+	}
+	let {
+		open = $bindable(),
+		title,
+		titleClass,
+		description,
+		badges = [],
+		openIn = [],
+		handoff,
+		stats = [],
+		actions,
+		footer,
+		children,
+		width = "sm",
+		bare = false,
+		onClose,
+	}: Props = $props();
 
-// =========================
-// STATE
-// =========================
-let panel = $state<HTMLElement | null>(null);
+	// =========================
+	// STATE
+	// =========================
+	let panel = $state<HTMLElement | null>(null);
 
-// =========================
-// DERIVED
-// =========================
-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",
-} as const;
-const WIDTH: Record<SidePanelWidth, string> = {
-	sm: "sm:max-w-sm",
-	md: "sm:max-w-md",
-	lg: "sm:max-w-xl",
-	xl: "sm:max-w-2xl",
-	"2xl": "sm:max-w-3xl",
-};
+	// =========================
+	// DERIVED
+	// =========================
+	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",
+	} as const;
+	const WIDTH: Record<SidePanelWidth, string> = {
+		sm: "sm:max-w-sm",
+		md: "sm:max-w-md",
+		lg: "sm:max-w-xl",
+		xl: "sm:max-w-2xl",
+		"2xl": "sm:max-w-3xl",
+	};
 
-// =========================
-// HANDLERS
-// =========================
-// WHY focus goes to the panel unless a text field comes first: the dialog otherwise
-// opens on its first control, which draws a ring on a record nobody has touched.
-// A form that opens on its field keeps the default, since that is where you type.
-const FIRST_CONTROL =
-	'a[href], button:not([disabled]), input:not([type="hidden"]):not([disabled]), textarea:not([disabled]), select:not([disabled])';
-function onOpenAutoFocus(event: Event) {
-	if (!panel || panel.querySelector(FIRST_CONTROL)?.matches("input, textarea, select")) return;
-	event.preventDefault();
-	panel.focus();
-}
+	// =========================
+	// HANDLERS
+	// =========================
+	// Focus goes to the panel unless a text field comes first, or the first control draws
+	// a ring on a record nobody touched.
+	const FIRST_CONTROL =
+		'a[href], button:not([disabled]), input:not([type="hidden"]):not([disabled]), textarea:not([disabled]), select:not([disabled])';
+	function onOpenAutoFocus(event: Event) {
+		if (!panel || panel.querySelector(FIRST_CONTROL)?.matches("input, textarea, select")) return;
+		event.preventDefault();
+		panel.focus();
+	}
 </script>
 
 <!-- =========================== -->
@@ -165,7 +164,9 @@ function onOpenAutoFocus(event: Event) {
 						{#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", STAT_TONE[stat.tone ?? "default"])}>
+								<dd
+									class={cn("text-sm font-medium tabular-nums", STAT_TONE[stat.tone ?? "default"])}
+								>
 									{stat.value}
 									{#if stat.sub}
 										<span class="text-xs font-normal text-muted-foreground">{stat.sub}</span>