@heyramzi/ui 2.23.0 → 3.0.0

package/src/lib/dates.test.ts

@@ -0,0 +1,63 @@
+import { describe, expect, it } from "vite-plus/test";
+import { formatAge } from "../record/format.js";
+import { localDay as recordDay } from "../record/logic.js";
+import { whenOf } from "../work/inbox/inbox-logic.js";
+import { editStamp, editedLabel, shortDate as editedDate } from "../work/docs/edited.js";
+import { todayIso } from "../work/dates.js";
+import { localDay as timeDay } from "../work/time/duration.js";
+
+// The modules that kept their own date names, pinned so the shared helpers can't change a string.
+// 10:00 UTC is the same calendar day from Hawaii to Auckland, so whenOf's date holds in any zone.
+const NOW = Date.parse("2026-10-23T10:00:00Z");
+const ago = (seconds: number) => new Date(NOW - seconds * 1000).toISOString();
+
+describe("relative time", () => {
+  it("formatAge says it in long words", () => {
+    expect(formatAge(ago(20), NOW)).toBe("now");
+    expect(formatAge(ago(3 * 86_400), NOW)).toBe("3 days ago");
+    expect(formatAge(ago(-14 * 86_400), NOW)).toBe("in 2 weeks");
+    expect(formatAge(ago(70 * 86_400), NOW)).toBe("2 months ago");
+    expect(formatAge(ago(400 * 86_400), NOW)).toBe("last year");
+  });
+
+  it("whenOf says it short, then turns to a date at four weeks", () => {
+    expect(whenOf(ago(3 * 3_600), NOW)).toBe("3 hr ago");
+    expect(whenOf(ago(86_400), NOW)).toBe("yesterday");
+    expect(whenOf(ago(40 * 86_400), NOW)).toBe("13 Sept");
+    expect(whenOf(ago(40 * 86_400), NOW, "en-US")).toBe("Sep 13");
+    expect(whenOf("Tuesday", NOW)).toBe("Tuesday");
+    expect(whenOf("2026-13-45T00:00:00Z", NOW)).toBe("");
+  });
+});
+
+describe("short date", () => {
+  const options = { now: new Date(NOW), timeZone: "UTC" };
+
+  it("adds the year only when it isn't this one", () => {
+    expect(editedDate("2026-10-23T08:00:00Z", options)).toBe("Oct 23");
+    expect(editedDate("2025-10-23T08:00:00Z", options)).toBe("Oct 23, 2025");
+    expect(editedDate("not a date", options)).toBe("");
+  });
+
+  it("builds the edited chip and stamp on it", () => {
+    expect(editStamp("2026-10-23T14:44:00Z", options)).toBe("Oct 23, 14:44");
+    expect(editedLabel("2026-10-23T14:44:00Z", "Edited", options)).toBe("Edited Oct 23");
+    expect(editedLabel(null, "Edited", options)).toBe("Edited");
+  });
+});
+
+describe("local day", () => {
+  it("reads a timestamp's day in the given zone", () => {
+    expect(recordDay("2026-10-23T23:30:00Z", "Europe/Paris")).toBe("2026-10-24");
+    expect(recordDay("2026-10-23T23:30:00Z", "UTC")).toBe("2026-10-23");
+  });
+
+  it("reads a date's day in the viewer's zone", () => {
+    expect(timeDay(new Date(2026, 0, 5, 23, 59))).toBe("2026-01-05");
+    expect(recordDay(new Date(2026, 0, 5, 0, 1).toISOString())).toBe("2026-01-05");
+  });
+
+  it("today matches across the modules", () => {
+    expect(todayIso()).toBe(timeDay());
+  });
+});

package/src/lib/dates.ts

@@ -0,0 +1,63 @@
+// The date strings the library shows, through Intl so a locale and a zone are all a caller passes.
+
+type At = Date | string | number;
+
+export type ShortDateOptions = {
+  locale?: string;
+  timeZone?: string;
+  /** Adds the year: "Oct 23, 2025". */
+  year?: boolean;
+};
+
+/** "Oct 23" in the caller's locale. */
+export function shortDate(at: At, { locale, timeZone, year }: ShortDateOptions = {}): string {
+  return new Intl.DateTimeFormat(locale, {
+    month: "short",
+    day: "numeric",
+    year: year ? "numeric" : undefined,
+    timeZone,
+  }).format(new Date(at));
+}
+
+const UNITS: [number, Intl.RelativeTimeFormatUnit][] = [
+  [31_536_000, "year"],
+  [2_592_000, "month"],
+  [604_800, "week"],
+  [86_400, "day"],
+  [3_600, "hour"],
+  [60, "minute"],
+];
+
+export type RelativeTimeOptions = {
+  locale?: string;
+  /** `long` says "3 hours ago", `short` "3 hr ago". */
+  style?: Intl.RelativeTimeFormatStyle;
+};
+
+/** "3 days ago", "in 2 weeks", "now": the largest whole unit between `at` and `now`. */
+export function relativeTime(
+  at: At,
+  now: At = Date.now(),
+  { locale, style = "long" }: RelativeTimeOptions = {},
+): string {
+  const seconds = Math.round((new Date(at).getTime() - new Date(now).getTime()) / 1000);
+  const age = Math.abs(seconds);
+  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto", style });
+  for (const [size, unit] of UNITS) {
+    if (age >= size) return rtf.format(Math.round(seconds / size), unit);
+  }
+  return rtf.format(0, "second");
+}
+
+/** The calendar day of a moment as `YYYY-MM-DD`, in the given zone or the viewer's own. Today by default. */
+export function localDay(at: At = new Date(), timeZone?: string): string {
+  const parts = new Intl.DateTimeFormat("en-US", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    timeZone,
+  }).formatToParts(new Date(at));
+  const part = (type: Intl.DateTimeFormatPartTypes) =>
+    parts.find((p) => p.type === type)?.value ?? "";
+  return `${part("year")}-${part("month")}-${part("day")}`;
+}

package/src/lib/focus.ts

@@ -0,0 +1,19 @@
+import { tick } from "svelte";
+
+/**
+ * Focuses the first target that takes focus, a selector under root or an element, once Svelte
+ * has rendered. A moved keyed item or opened pane is a new node.
+ */
+export async function focusAfterRender(
+  root: ParentNode | null | undefined,
+  ...targets: (string | HTMLElement | null | undefined)[]
+): Promise<HTMLElement | undefined> {
+  await tick();
+  for (const target of targets) {
+    const el = typeof target === "string" ? root?.querySelector<HTMLElement>(target) : target;
+    if (!el?.isConnected) continue;
+    el.focus();
+    if (document.activeElement === el) return el;
+  }
+  return undefined;
+}

package/src/lib/live-region.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { tick } from "svelte";
+
+	let message = $state("");
+
+	/** Reads text out politely. Clearing first makes the same words read again. */
+	export async function announce(text: string): Promise<void> {
+		message = "";
+		await tick();
+		message = text;
+	}
+</script>
+
+<div class="sr-only" role="status" aria-live="polite">{message}</div>

package/src/lib/live-region.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const $$Component: import("svelte").Component<Record<string, never>, {
+    announce: (text: string) => Promise<void>;
+}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/lib/panel.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+	/*
+	 * The one titled panel, exported as `DetailPanel` from list-page and used by the
+	 * dashboard too. It draws its box from `panel.ts`.
+	 */
+
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { Snippet } from "svelte";
+	import SectionLabel from "../components/section-header/section-label.svelte";
+	import { cn } from "./utils.js";
+	import { panelHeaderClass, panelShellClass } from "./panel.js";
+	import type { PhosphorIcon } from "./icon-types.js";
+
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		/** What this panel is, drawn as the app's one panel label. No label, no actions: no header. */
+		label?: string;
+		labelIcon?: PhosphorIcon;
+		/** A mark the icon set lacks (a platform logo), drawn ahead of the label at the same size. */
+		labelLead?: Snippet;
+		/** A line under the label, for the scope a number was measured over. */
+		sublabel?: string;
+		/**
+		 * A row count, total or freshness stamp. A prop, not an action, because
+		 * hand-placed hints ended up at three type sizes on one screen.
+		 */
+		hint?: string;
+		/** Controls that act on this panel. Pinned right, after the hint. */
+		actions?: Snippet;
+		/** Off for a body that supplies its own padding: a table, a media grid, a full-bleed list. */
+		pad?: boolean;
+		/** The body scrolls sideways rather than squeezing, for a table wider than the window. */
+		scroll?: boolean;
+		/** Takes the height the panels above it left, inside a `fill` stack. One per stack. */
+		grow?: boolean;
+		children: Snippet;
+		class?: string;
+		bodyClass?: string;
+	}
+
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		label,
+		labelIcon,
+		labelLead,
+		sublabel,
+		hint,
+		actions,
+		pad = true,
+		scroll = false,
+		grow = false,
+		children,
+		class: className,
+		bodyClass,
+	}: Props = $props();
+
+	// =========================
+	// DERIVED
+	// =========================
+	let titled = $derived(Boolean(label || labelLead || sublabel));
+	let hasHeader = $derived(titled || Boolean(hint || actions));
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<section class={cn(panelShellClass, grow && "flex min-h-0 flex-1 flex-col", className)}>
+	{#if hasHeader}
+		<div class={panelHeaderClass}>
+			{#if titled}
+				<div class="flex min-w-0 flex-col gap-0.5">
+					{#if label || labelLead}
+						<SectionLabel icon={labelIcon}>
+							{@render labelLead?.()}
+							{label}
+						</SectionLabel>
+					{/if}
+					{#if sublabel}
+						<span class="truncate text-xs text-muted-foreground">{sublabel}</span>
+					{/if}
+				</div>
+			{:else}
+				<!-- Holds the left slot so the actions stay pinned right. -->
+				<span></span>
+			{/if}
+			{#if hint || actions}
+				<div class="flex min-w-0 items-center gap-3">
+					{#if hint}
+						<span class="text-xs tabular-nums text-muted-foreground">{hint}</span>
+					{/if}
+					{#if actions}
+						<div class="flex min-w-0 flex-wrap items-center justify-end gap-2">
+							{@render actions()}
+						</div>
+					{/if}
+				</div>
+			{/if}
+		</div>
+	{/if}
+	<div
+		class={cn(
+			pad && "p-4",
+			scroll && "overflow-x-auto",
+			grow && "flex min-h-0 flex-1 flex-col",
+			bodyClass,
+		)}
+	>
+		{@render children()}
+	</div>
+</section>

package/src/lib/panel.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { Snippet } from "svelte";
+import type { PhosphorIcon } from "./icon-types.js";
+interface Props {
+    /** What this panel is, drawn as the app's one panel label. No label, no actions: no header. */
+    label?: string;
+    labelIcon?: PhosphorIcon;
+    /** A mark the icon set lacks (a platform logo), drawn ahead of the label at the same size. */
+    labelLead?: Snippet;
+    /** A line under the label, for the scope a number was measured over. */
+    sublabel?: string;
+    /**
+     * A row count, total or freshness stamp. A prop, not an action, because
+     * hand-placed hints ended up at three type sizes on one screen.
+     */
+    hint?: string;
+    /** Controls that act on this panel. Pinned right, after the hint. */
+    actions?: Snippet;
+    /** Off for a body that supplies its own padding: a table, a media grid, a full-bleed list. */
+    pad?: boolean;
+    /** The body scrolls sideways rather than squeezing, for a table wider than the window. */
+    scroll?: boolean;
+    /** Takes the height the panels above it left, inside a `fill` stack. One per stack. */
+    grow?: boolean;
+    children: Snippet;
+    class?: string;
+    bodyClass?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/lib/panel.ts

@@ -1,7 +1,7 @@
 /** The one panel shell: a titled box holding a table, a chart or a stack. */
 
-// WHY tokens, not markup: `DetailPanel` and `DataPanel` draw the same box with
-// different props, and their edges drifted because the classes were typed twice.
+// Tokens beside `panel.svelte`, because skeletons and hand-built cards draw this
+// same edge without the panel's header.
 
 // Dashboards used `Card`, so /ads had a ring and a shadow where /social had a
 // hairline. Flat, one hairline, `rounded-xl`.

package/src/lib/tone.ts

@@ -15,6 +15,20 @@ export const TONE_CLASS: Record<Tone, string> = {
   destructive: "border-destructive/30 bg-destructive/10 text-destructive-ink",
 };
 
+/**
+ * A quiet borderless tint: icon and text carry the tone. Neutral reads off the foreground,
+ * since `bg-muted` sits 0.005 L from the canvas and vanishes there.
+ */
+export const TONE_TINT: Record<Tone, string> = {
+  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",
+};
+
 /** The same scale as text, for a verdict inside a line of muted facts. */
 export const TONE_TEXT: Record<Tone, string> = {
   neutral: "text-muted-foreground",
@@ -22,7 +36,7 @@ export const TONE_TEXT: Record<Tone, string> = {
   info: "text-info-800 dark:text-info-400",
   success: "text-success-800 dark:text-success-400",
   warning: "text-warning-800 dark:text-warning-400",
-  destructive: "text-destructive",
+  destructive: "text-destructive-ink",
 };
 
 /** The same scale as icon color. */

package/src/modules.test.ts

@@ -1,5 +1,5 @@
-import { existsSync, readFileSync } from "node:fs";
-import { dirname, join } from "node:path";
+import { existsSync, readFileSync, readdirSync } from "node:fs";
+import { dirname, join, relative } from "node:path";
 import { fileURLToPath } from "node:url";
 import { describe, expect, it } from "vite-plus/test";
 import * as record from "./record/index.js";
@@ -7,12 +7,95 @@ import * as inbox from "./inbox/index.js";
 import * as thread from "./thread/index.js";
 import * as triage from "./triage/index.js";
 
-const pkg = JSON.parse(
-  readFileSync(join(dirname(fileURLToPath(import.meta.url)), "..", "package.json"), "utf8"),
-) as {
+const root = join(dirname(fileURLToPath(import.meta.url)), "..");
+const pkg = JSON.parse(readFileSync(join(root, "package.json"), "utf8")) as {
   exports: Record<string, string | Record<string, string>>;
 };
 
+const targetOf = (v: string | Record<string, string>) =>
+  typeof v === "string" ? v : (v.svelte ?? v.default);
+
+/** A relative or `#src` specifier as a `.ts` or `.svelte` file, or null for a package. */
+function resolveSpec(from: string, spec: string): string | null {
+  if (!spec.startsWith("#src/") && !spec.startsWith(".")) return null;
+  const p = spec.startsWith("#src/") ? join(root, "src", spec.slice(5)) : join(dirname(from), spec);
+  const hit = [p, p.replace(/\.js$/, ".ts"), `${p}.ts`, join(p, "index.ts")].find(
+    (c) => /\.(ts|svelte)$/.test(c) && existsSync(c),
+  );
+  return hit ?? null;
+}
+
+type Origin = { file: string; name: string };
+const origins = new Map<string, Map<string, Origin>>();
+
+/** Each name a module exports, traced through re-exports to the file and name that define it. */
+function exportsOf(file: string): Map<string, Origin> {
+  const known = origins.get(file);
+  if (known) return known;
+  const out = new Map<string, Origin>();
+  origins.set(file, out);
+  if (file.endsWith(".svelte")) return out.set("default", { file, name: "default" });
+
+  const code = readFileSync(file, "utf8")
+    .replace(/\/\*[\s\S]*?\*\//g, "")
+    .replace(/\/\/.*$/gm, "");
+  const trace = (src: string | null, name: string): Origin =>
+    (src && exportsOf(src).get(name)) || { file: src ?? file, name };
+  const specifiers = (list: string) =>
+    list
+      .split(",")
+      .map((part) => part.trim().replace(/^type\s+/, ""))
+      .filter(Boolean)
+      .map((part) => part.split(/\s+as\s+/));
+
+  const imported = new Map<string, Origin>();
+  for (const [, def, list = "", spec] of code.matchAll(
+    /import\s+(?:type\s+)?([\w$]+)?\s*,?\s*(?:\{([^}]*)\})?\s*from\s*["']([^"']+)["']/g,
+  )) {
+    const src = resolveSpec(file, spec);
+    if (def) imported.set(def, trace(src, "default"));
+    for (const [name, local = name] of specifiers(list)) imported.set(local, trace(src, name));
+  }
+  for (const [, list, spec] of code.matchAll(
+    /export\s+(?:type\s+)?\{([^}]*)\}(?:\s*from\s*["']([^"']+)["'])?/g,
+  )) {
+    const src = spec ? resolveSpec(file, spec) : null;
+    for (const [name, as = name] of specifiers(list))
+      out.set(as, spec ? trace(src, name) : (imported.get(name) ?? { file, name }));
+  }
+  for (const [, spec] of code.matchAll(/export\s+\*\s+from\s*["']([^"']+)["']/g)) {
+    const src = resolveSpec(file, spec);
+    if (src) for (const [name, at] of exportsOf(src)) if (name !== "default") out.set(name, at);
+  }
+  for (const [, name] of code.matchAll(
+    /export\s+(?:declare\s+)?(?:async\s+)?(?:const|let|function\*?|class|type|interface|enum)\s+([\w$]+)/g,
+  ))
+    out.set(name, { file, name });
+  return out;
+}
+
+/** Every public module path and its file, wildcards expanded. The `./canvas/*` deep paths stay beside the barrel in 3.0. */
+function publicModules(): Map<string, string> {
+  const modules = new Map<string, string>();
+  for (const [key, value] of Object.entries(pkg.exports)) {
+    const target = targetOf(value);
+    if (!/\.(ts|svelte)$/.test(target) || key.startsWith("./canvas/")) continue;
+    if (!key.includes("*")) {
+      modules.set(key, join(root, target));
+      continue;
+    }
+    const [head, tail] = target.split("*");
+    for (const entry of readdirSync(join(root, head), { withFileTypes: true })) {
+      const { name } = entry;
+      const stem = entry.isDirectory() ? name : name.endsWith(tail) && name.slice(0, -tail.length);
+      if (!stem) continue;
+      const file = join(root, head + stem + tail);
+      if (existsSync(file) && !file.endsWith(".test.ts")) modules.set(key.replace("*", stem), file);
+    }
+  }
+  return modules;
+}
+
 describe("module split", () => {
   it("holds the record page's names", () => {
     expect(record.RecordShell).toBeDefined();
@@ -30,10 +113,9 @@ describe("module split", () => {
   });
 
   it("resolves every export path to a file", () => {
-    const root = join(dirname(fileURLToPath(import.meta.url)), "..");
     const missing: string[] = [];
     for (const [name, target] of Object.entries(pkg.exports)) {
-      const path = typeof target === "string" ? target : (target.default ?? target.svelte);
+      const path = targetOf(target);
       if (path.includes("*") || path.endsWith(".css")) continue;
       if (!existsSync(join(root, path))) missing.push(`${name} -> ${path}`);
     }
@@ -54,4 +136,34 @@ describe("module split", () => {
     }
     expect(Object.keys(pkg.exports).filter((name) => name.startsWith("./tasks"))).toEqual([]);
   });
+
+  it("ships no demo, the docs site holds them", () => {
+    expect(Object.keys(pkg.exports).filter((name) => name.includes("demo"))).toEqual([]);
+  });
+
+  it("has no package root, every import names its subpath", () => {
+    expect(pkg.exports["."]).toBeUndefined();
+    expect(existsSync(join(root, "src/index.ts"))).toBe(false);
+  });
+
+  it("reaches each value and type through one public path", () => {
+    const paths = new Map<string, string[]>();
+    for (const [key, file] of publicModules())
+      for (const [name, at] of exportsOf(file)) {
+        const id = `${relative(join(root, "src"), at.file)}#${at.name}`;
+        paths.set(id, [...(paths.get(id) ?? []), `${key} :: ${name}`]);
+      }
+    const twice = [...paths]
+      .filter(([, at]) => new Set(at.map((a) => a.split(" :: ")[0])).size > 1)
+      .map(([id, at]) => `${id} <- ${at.join(", ")}`);
+    expect(twice).toEqual([]);
+  });
+
+  it("traces a re-export to its source and expands wildcards, so a clean run means something", () => {
+    const twice = [...exportsOf(join(root, "src/components/list-page/index.ts"))].filter(([, at]) =>
+      at.file.endsWith("lib/panel.svelte"),
+    );
+    expect(twice.map(([name]) => name)).toEqual(["DetailPanel"]);
+    expect(publicModules().get("./lib/tone.js")).toBe(join(root, "src/lib/tone.ts"));
+  });
 });

package/src/onboarding/README.md

@@ -104,8 +104,8 @@ interface SeenStore {
 ```
 
 The store keeps a version, not a boolean. Raise a tour's `version` after the page changes and everyone sees it
-again. `localStorageStore(key?)` and `memoryStore(initial?)` come with the package and also live at
-`@heyramzi/ui/onboarding/stores`. Server stores belong in the app: a table keyed by user and tour id, and a `fetch`
+again. `localStorageStore(key?)` and `memoryStore(initial?)` come with
+`@heyramzi/ui/onboarding`. Server stores belong in the app: a table keyed by user and tour id, and a `fetch`
 adapter.
 
 If `load` rejects, no tour shows that session.

package/src/onboarding/onboarding-provider.svelte

@@ -127,6 +127,6 @@
 
 {#if active}
 	{#key active.run}
-		<TourRunner tour={active.tour} steps={active.steps} {strings} onfinish={finish} />
+		<TourRunner tour={active.tour} steps={active.steps} {strings} onFinish={finish} />
 	{/key}
 {/if}

package/src/onboarding/onboarding-provider.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { SeenStore, Strings, Tour } from "./types.js";
+type $$ComponentProps = {
+    tours: readonly Tour[];
+    store: SeenStore;
+    strings: Strings;
+    /** `page.route.id`. A tour runs on the route it names. */
+    routeId: string | null | undefined;
+    /** False while signed out, or anywhere a tour has no business starting. */
+    enabled?: boolean;
+    /** Press `?` to replay this page's tour. */
+    replayKey?: boolean;
+    /** How long to wait for the first target before giving the tour up. */
+    waitMs?: number;
+};
+declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/onboarding/tour-card.svelte

@@ -17,9 +17,9 @@
 		strings,
 		titleAttrs,
 		bodyAttrs,
-		onclose,
-		onprev,
-		onnext,
+		onClose,
+		onPrev,
+		onNext,
 	}: {
 		title: string;
 		body: string;
@@ -30,10 +30,10 @@
 		strings: Strings;
 		titleAttrs: Attrs;
 		bodyAttrs: Attrs;
-		onclose: () => void;
-		onprev: () => void;
+		onClose: () => void;
+		onPrev: () => void;
 		/** The last step's button reads "done", and this closes the tour. */
-		onnext: () => void;
+		onNext: () => void;
 	} = $props();
 
 	const last = $derived(index === total - 1);
@@ -55,14 +55,14 @@
 			{title}
 		</h2>
 		<Button
-			onclick={onclose}
+			onclick={onClose}
 			variant="ghost"
 			size="sm"
 			icon
 			class="-mt-1 -mr-1.5 text-muted-foreground"
 			aria-label={strings.skip}
 		>
-			<X weight="bold" />
+			<X aria-hidden="true" weight="bold" />
 		</Button>
 	</div>
 	<p {...bodyAttrs} class="text-muted-foreground text-sm text-pretty">{body}</p>
@@ -88,8 +88,8 @@
 	{/if}
 	<div class="flex items-center gap-2">
 		{#if index > 0}
-			<Button onclick={onprev} variant="ghost" size="sm">{strings.back}</Button>
+			<Button onclick={onPrev} variant="ghost" size="sm">{strings.back}</Button>
 		{/if}
-		<Button onclick={onnext} size="sm">{last ? strings.done : strings.next}</Button>
+		<Button onclick={onNext} size="sm">{last ? strings.done : strings.next}</Button>
 	</div>
 </div>

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

@@ -0,0 +1,21 @@
+import type { HTMLAttributes } from "svelte/elements";
+import type { Strings } from "./types.js";
+type Attrs = HTMLAttributes<HTMLElement>;
+type $$ComponentProps = {
+    title: string;
+    body: string;
+    image?: string;
+    intro?: boolean;
+    index: number;
+    total: number;
+    strings: Strings;
+    titleAttrs: Attrs;
+    bodyAttrs: Attrs;
+    onClose: () => void;
+    onPrev: () => void;
+    /** The last step's button reads "done", and this closes the tour. */
+    onNext: () => void;
+};
+declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;