@heyramzi/ui 2.0.1 → 2.2.0

package/src/onboarding/stores.test.ts

@@ -3,101 +3,101 @@ import { localStorageStore, memoryStore } from "./stores.js";
 import type { SeenStore } from "./types.js";
 
 function fakeStorage(): Storage {
-	const data = new Map<string, string>();
-	return {
-		get length() {
-			return data.size;
-		},
-		clear: () => data.clear(),
-		getItem: (key) => data.get(key) ?? null,
-		key: (i) => [...data.keys()][i] ?? null,
-		removeItem: (key) => void data.delete(key),
-		setItem: (key, value) => void data.set(key, String(value)),
-	};
+  const data = new Map<string, string>();
+  return {
+    get length() {
+      return data.size;
+    },
+    clear: () => data.clear(),
+    getItem: (key) => data.get(key) ?? null,
+    key: (i) => [...data.keys()][i] ?? null,
+    removeItem: (key) => void data.delete(key),
+    setItem: (key, value) => void data.set(key, String(value)),
+  };
 }
 
 function behavesLikeAStore(make: () => SeenStore) {
-	it("starts empty", async () => {
-		expect(await make().load()).toEqual({});
-	});
+  it("starts empty", async () => {
+    expect(await make().load()).toEqual({});
+  });
 
-	it("remembers the version it saw", async () => {
-		const store = make();
-		await store.markSeen("home", 1, "completed");
-		await store.markSeen("board", 2, "dismissed");
-		expect(await store.load()).toEqual({ home: 1, board: 2 });
-	});
+  it("remembers the version it saw", async () => {
+    const store = make();
+    await store.markSeen("home", 1, "completed");
+    await store.markSeen("board", 2, "dismissed");
+    expect(await store.load()).toEqual({ home: 1, board: 2 });
+  });
 
-	it("never goes back to an older version", async () => {
-		const store = make();
-		await store.markSeen("home", 3, "completed");
-		await store.markSeen("home", 2, "completed");
-		expect((await store.load()).home).toBe(3);
-	});
+  it("never goes back to an older version", async () => {
+    const store = make();
+    await store.markSeen("home", 3, "completed");
+    await store.markSeen("home", 2, "completed");
+    expect((await store.load()).home).toBe(3);
+  });
 
-	it("resets one tour or all of them", async () => {
-		const store = make();
-		await store.markSeen("home", 1, "completed");
-		await store.markSeen("board", 1, "completed");
-		await store.reset("home");
-		expect(await store.load()).toEqual({ board: 1 });
-		await store.reset();
-		expect(await store.load()).toEqual({});
-	});
+  it("resets one tour or all of them", async () => {
+    const store = make();
+    await store.markSeen("home", 1, "completed");
+    await store.markSeen("board", 1, "completed");
+    await store.reset("home");
+    expect(await store.load()).toEqual({ board: 1 });
+    await store.reset();
+    expect(await store.load()).toEqual({});
+  });
 }
 
 describe("memoryStore", () => {
-	behavesLikeAStore(() => memoryStore());
+  behavesLikeAStore(() => memoryStore());
 
-	it("takes a starting state and keeps its own copy", async () => {
-		const initial = { home: 1 };
-		const store = memoryStore(initial);
-		await store.markSeen("board", 1, "completed");
-		expect(initial).toEqual({ home: 1 });
-		expect(await store.load()).toEqual({ home: 1, board: 1 });
-	});
+  it("takes a starting state and keeps its own copy", async () => {
+    const initial = { home: 1 };
+    const store = memoryStore(initial);
+    await store.markSeen("board", 1, "completed");
+    expect(initial).toEqual({ home: 1 });
+    expect(await store.load()).toEqual({ home: 1, board: 1 });
+  });
 });
 
 describe("localStorageStore", () => {
-	beforeEach(() => {
-		vi.stubGlobal("localStorage", fakeStorage());
-	});
-	afterEach(() => {
-		vi.unstubAllGlobals();
-	});
+  beforeEach(() => {
+    vi.stubGlobal("localStorage", fakeStorage());
+  });
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
 
-	behavesLikeAStore(() => localStorageStore());
+  behavesLikeAStore(() => localStorageStore());
 
-	it("shares state between two stores on one key and keeps keys apart", async () => {
-		await localStorageStore("a").markSeen("home", 1, "completed");
-		expect(await localStorageStore("a").load()).toEqual({ home: 1 });
-		expect(await localStorageStore("b").load()).toEqual({});
-	});
+  it("shares state between two stores on one key and keeps keys apart", async () => {
+    await localStorageStore("a").markSeen("home", 1, "completed");
+    expect(await localStorageStore("a").load()).toEqual({ home: 1 });
+    expect(await localStorageStore("b").load()).toEqual({});
+  });
 
-	it("reads corrupt or foreign data as empty", async () => {
-		localStorage.setItem("heyramzi:onboarding", "{nope");
-		expect(await localStorageStore().load()).toEqual({});
-		localStorage.setItem("heyramzi:onboarding", JSON.stringify(["x"]));
-		expect(await localStorageStore().load()).toEqual({});
-		localStorage.setItem("heyramzi:onboarding", JSON.stringify({ home: 1, bad: "yes" }));
-		expect(await localStorageStore().load()).toEqual({ home: 1 });
-	});
+  it("reads corrupt or foreign data as empty", async () => {
+    localStorage.setItem("heyramzi:onboarding", "{nope");
+    expect(await localStorageStore().load()).toEqual({});
+    localStorage.setItem("heyramzi:onboarding", JSON.stringify(["x"]));
+    expect(await localStorageStore().load()).toEqual({});
+    localStorage.setItem("heyramzi:onboarding", JSON.stringify({ home: 1, bad: "yes" }));
+    expect(await localStorageStore().load()).toEqual({ home: 1 });
+  });
 
-	it("doesn't throw when storage is blocked", async () => {
-		vi.stubGlobal("localStorage", {
-			getItem: () => {
-				throw new Error("blocked");
-			},
-			setItem: () => {
-				throw new Error("blocked");
-			},
-			removeItem: () => {
-				throw new Error("blocked");
-			},
-		});
-		const store = localStorageStore();
-		expect(await store.load()).toEqual({});
-		await expect(store.markSeen("home", 1, "completed")).resolves.toBeUndefined();
-		await expect(store.reset()).resolves.toBeUndefined();
-	});
+  it("doesn't throw when storage is blocked", async () => {
+    vi.stubGlobal("localStorage", {
+      getItem: () => {
+        throw new Error("blocked");
+      },
+      setItem: () => {
+        throw new Error("blocked");
+      },
+      removeItem: () => {
+        throw new Error("blocked");
+      },
+    });
+    const store = localStorageStore();
+    expect(await store.load()).toEqual({});
+    await expect(store.markSeen("home", 1, "completed")).resolves.toBeUndefined();
+    await expect(store.reset()).resolves.toBeUndefined();
+  });
 });

package/src/onboarding/stores.ts

@@ -5,54 +5,56 @@ type Seen = Record<string, number>;
 
 /** Holds seen-state in memory. Tests and previews. */
 export function memoryStore(initial: Seen = {}): SeenStore {
-	let seen: Seen = { ...initial };
-	return {
-		async load() {
-			return { ...seen };
-		},
-		async markSeen(tourId, version, _outcome: Outcome) {
-			seen[tourId] = Math.max(seen[tourId] ?? 0, version);
-		},
-		async reset(tourId) {
-			if (tourId === undefined) seen = {};
-			else delete seen[tourId];
-		},
-	};
+  let seen: Seen = { ...initial };
+  return {
+    async load() {
+      return { ...seen };
+    },
+    async markSeen(tourId, version, _outcome: Outcome) {
+      seen[tourId] = Math.max(seen[tourId] ?? 0, version);
+    },
+    async reset(tourId) {
+      if (tourId === undefined) seen = {};
+      else delete seen[tourId];
+    },
+  };
 }
 
 function readSeen(key: string): Seen {
-	const read = tryCatch(() => JSON.parse(localStorage.getItem(key) ?? "{}") as unknown);
-	const parsed = read.ok ? read.value : null;
-	if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return {};
-	return Object.fromEntries(
-		Object.entries(parsed).filter((entry): entry is [string, number] => typeof entry[1] === "number"),
-	);
+  const read = tryCatch(() => JSON.parse(localStorage.getItem(key) ?? "{}") as unknown);
+  const parsed = read.ok ? read.value : null;
+  if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return {};
+  return Object.fromEntries(
+    Object.entries(parsed).filter(
+      (entry): entry is [string, number] => typeof entry[1] === "number",
+    ),
+  );
 }
 
 // Blocked storage (private mode, a full disk) means the tour shows again next visit, which beats an error.
 function writeSeen(key: string, seen: Seen): void {
-	tryCatch(() => localStorage.setItem(key, JSON.stringify(seen)));
+  tryCatch(() => localStorage.setItem(key, JSON.stringify(seen)));
 }
 
 /** Keeps seen-state in this browser. Demos and signed-out pages. */
 export function localStorageStore(key = "heyramzi:onboarding"): SeenStore {
-	return {
-		async load() {
-			return readSeen(key);
-		},
-		async markSeen(tourId, version, _outcome: Outcome) {
-			const seen = readSeen(key);
-			seen[tourId] = Math.max(seen[tourId] ?? 0, version);
-			writeSeen(key, seen);
-		},
-		async reset(tourId) {
-			if (tourId === undefined) {
-				tryCatch(() => localStorage.removeItem(key));
-				return;
-			}
-			const seen = readSeen(key);
-			delete seen[tourId];
-			writeSeen(key, seen);
-		},
-	};
+  return {
+    async load() {
+      return readSeen(key);
+    },
+    async markSeen(tourId, version, _outcome: Outcome) {
+      const seen = readSeen(key);
+      seen[tourId] = Math.max(seen[tourId] ?? 0, version);
+      writeSeen(key, seen);
+    },
+    async reset(tourId) {
+      if (tourId === undefined) {
+        tryCatch(() => localStorage.removeItem(key));
+        return;
+      }
+      const seen = readSeen(key);
+      delete seen[tourId];
+      writeSeen(key, seen);
+    },
+  };
 }

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/README.md

@@ -0,0 +1,5 @@
+# @heyramzi/ui/panel
+
+`SidePanel`, a sheet for one record: badges, links out to other tools, a copy-a-prompt handoff and a stats strip. `PanelStat` types one stat. It used to live in `@heyramzi/ui/tasks`, which still re-exports both, and `tasks/side-panel` still resolves.
+
+Exports: `SidePanel` and the types `PanelStat`, `SidePanelWidth`.

package/src/panel/index.ts

@@ -0,0 +1,2 @@
+export { default as SidePanel } from "./side-panel.svelte";
+export type { PanelStat, SidePanelWidth } from "./side-panel-types.js";

package/src/panel/side-panel.svelte

@@ -0,0 +1,194 @@
+<script lang="ts" module>
+	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";
+
+	// =========================
+	// 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();
+
+	// =========================
+	// 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",
+	};
+
+	// =========================
+	// 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>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<Sheet.Root
+	bind:open
+	onOpenChange={(next) => {
+		if (!next) onClose?.();
+	}}
+>
+	<Sheet.Content
+		side="right"
+		bind:ref={panel}
+		tabindex={-1}
+		class={cn("flex w-full flex-col gap-0 p-0", WIDTH[width], bare && "overflow-hidden")}
+		{onOpenAutoFocus}
+	>
+		{#if bare}
+			<Sheet.Header class="sr-only">
+				<Sheet.Title>{title}</Sheet.Title>
+			</Sheet.Header>
+			{@render children()}
+		{:else}
+			<Sheet.Header class="gap-1 border-b border-border">
+				<!-- WHY the right padding: the close button sits over this corner and
+				     a long title runs straight under it. -->
+				<Sheet.Title class={cn("pr-9 text-base leading-snug", titleClass)}>{title}</Sheet.Title>
+				{#if description}
+					<Sheet.Description>{description}</Sheet.Description>
+				{/if}
+				{#if hasRow}
+					<div class="flex items-center justify-between gap-3 pt-1.5">
+						<div class="flex min-w-0 flex-wrap items-center gap-2">
+							{#each badges as badge (`${badge.tone}:${badge.label}`)}
+								<StatusBadge tone={badge.tone}>{badge.label}</StatusBadge>
+							{/each}
+						</div>
+						<div class="flex shrink-0 items-center gap-1">
+							{#each openIn as door (door.href)}
+								<OpenIn
+									tool={door.tool}
+									href={door.href}
+									title={door.label}
+									label={door.text}
+									variant="button"
+									size="sm"
+								/>
+							{/each}
+							{#if handoff}
+								<CopyButton
+									agent
+									value={handoff.value}
+									label={handoff.label}
+									copiedLabel={handoff.copiedLabel}
+								/>
+							{/if}
+							{@render actions?.()}
+						</div>
+					</div>
+				{/if}
+				{#if stats.length > 0}
+					<dl class="flex flex-wrap gap-x-6 gap-y-3 pt-3">
+						{#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"])}
+								>
+									{stat.value}
+									{#if stat.sub}
+										<span class="text-xs font-normal text-muted-foreground">{stat.sub}</span>
+									{/if}
+								</dd>
+							</div>
+						{/each}
+					</dl>
+				{/if}
+			</Sheet.Header>
+
+			<!-- WHY the body pads and spaces its sections itself: a panel that lets the
+			     caller choose drifts, one with a grey band and one with a white page. -->
+			<div class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4">
+				{@render children()}
+			</div>
+
+			{#if footer}
+				<Sheet.Footer class="mt-0 flex-row items-center justify-end border-t border-border">
+					{@render footer()}
+				</Sheet.Footer>
+			{/if}
+		{/if}
+	</Sheet.Content>
+</Sheet.Root>