@poodle64/ui 2026.10.17 → 2026.10.19

package/dist/components/ui/graph-canvas/scene.js

@@ -34,6 +34,10 @@ export class GraphScene {
     selected = null;
     hovered = null;
     matches = new Set();
+    /** The highlighted route: its nodes and every edge joining consecutive ones. */
+    routeNodes = new Set();
+    routeEdges = new Set();
+    routeIds = [];
     sim;
     link = forceLink([]);
     charge = forceManyBody().strength((d) => -28 - 14 * Math.sqrt(d.degree));
@@ -143,8 +147,20 @@ export class GraphScene {
         if (this.hovered)
             this.hovered = byId.get(this.hovered.id) ?? null;
         this.matches = new Set([...this.matches].flatMap((m) => byId.get(m.id) ?? []));
+        this.setRoute(this.routeIds);
         return fresh.length;
     }
+    /** Highlight a path given as node ids in order; ids not in the graph are skipped. */
+    setRoute(ids) {
+        this.routeIds = ids;
+        const nodes = ids.flatMap((id) => this.byId.get(id) ?? []);
+        this.routeNodes = new Set(nodes);
+        const key = (a, b) => (a < b ? `${a}\u0000${b}` : `${b}\u0000${a}`);
+        const pairs = new Set();
+        for (let i = 1; i < nodes.length; i++)
+            pairs.add(key(nodes[i - 1].id, nodes[i].id));
+        this.routeEdges = new Set(this.edges.filter((e) => pairs.has(key(e.source.id, e.target.id))));
+    }
     hot() {
         return this.sim.alpha() >= this.sim.alphaMin();
     }
@@ -236,9 +252,12 @@ export class GraphScene {
         if (!P)
             return;
         const chosen = this.selected && this.visible(this.selected) ? this.selected : null;
-        const focus = this.hovered ?? chosen;
+        // A route holds the picture until the pointer rests on a node.
+        const route = !this.hovered && this.routeNodes.size > 0;
+        const focus = route ? null : (this.hovered ?? chosen);
         const near = focus ? this.adj.get(focus) : undefined;
-        const lit = (s) => !focus || s === focus || !!near?.has(s);
+        const dim = !!focus || route;
+        const lit = (s) => (route ? this.routeNodes.has(s) : !focus || s === focus || !!near?.has(s));
         const margin = 40 / k;
         const vx0 = -tx / k - margin;
         const vy0 = -ty / k - margin;
@@ -268,24 +287,26 @@ export class GraphScene {
         const curved = shown.length < 1200;
         // Edges: one batched path for the rest, one per colour for the lit ones.
         const rest = new Path2D();
+        const restDashed = new Path2D();
         const restHeads = new Path2D();
         const litPaths = new Map();
         const edgeLabels = [];
-        const heads = this.directed && (shown.length < 500 || !!focus);
+        const heads = this.directed && (shown.length < 500 || dim);
         // A hub's relations crowd its own spokes; past a dozen the card lists them instead.
         const relationWords = focus ? (this.adj.get(focus)?.size ?? 0) <= 12 : shown.length < 300;
         for (const e of shown) {
             const a = e.source;
             const b = e.target;
-            const hot = !!focus && (a === focus || b === focus);
-            let path = rest;
+            const hot = route ? this.routeEdges.has(e) : !!focus && (a === focus || b === focus);
+            const dashed = e.edge.style === 'dashed';
+            let path = dashed ? restDashed : rest;
             let head = restHeads;
             if (hot) {
-                const colour = this.colour(a === focus ? b : a);
+                const colour = route ? P.ink : this.colour(a === focus ? b : a);
                 let p = litPaths.get(colour);
                 if (!p)
-                    litPaths.set(colour, (p = { line: new Path2D(), head: new Path2D() }));
-                path = p.line;
+                    litPaths.set(colour, (p = { line: new Path2D(), dashed: new Path2D(), head: new Path2D() }));
+                path = dashed ? p.dashed : p.line;
                 head = p.head;
             }
             const [cx, cy] = curved || hot ? this.control(e) : [(a.x + b.x) / 2, (a.y + b.y) / 2];
@@ -294,30 +315,36 @@ export class GraphScene {
                 path.quadraticCurveTo(cx, cy, b.x, b.y);
             else
                 path.lineTo(b.x, b.y);
-            if (heads && (hot || !focus))
+            if (heads && (hot || !dim))
                 this.arrow(head, cx, cy, b, rad(b), k);
-            if (e.edge.label && relationWords && (hot || !focus))
+            if (e.edge.label && (route ? hot : relationWords && (hot || !focus)))
                 edgeLabels.push(e);
         }
         ctx.strokeStyle = P.edge;
         ctx.fillStyle = P.edge;
-        ctx.globalAlpha = focus ? 0.07 : Math.min(0.65, 0.12 + 0.35 * k);
+        ctx.globalAlpha = dim ? 0.07 : Math.min(0.65, 0.12 + 0.35 * k);
         ctx.lineWidth = 1 / k;
         ctx.stroke(rest);
+        ctx.setLineDash([5 / k, 4 / k]);
+        ctx.stroke(restDashed);
+        ctx.setLineDash([]);
         ctx.fill(restHeads);
         ctx.globalAlpha = 0.95;
-        ctx.lineWidth = 1.75 / k;
+        ctx.lineWidth = (route ? 2.75 : 1.75) / k;
         for (const [colour, p] of litPaths) {
             ctx.strokeStyle = colour;
             ctx.fillStyle = colour;
             ctx.stroke(p.line);
+            ctx.setLineDash([6 / k, 4 / k]);
+            ctx.stroke(p.dashed);
+            ctx.setLineDash([]);
             ctx.fill(p.head);
         }
         // Nodes: dimmed first, then lit, each batched by kind. A dot too small to
         // overlap its neighbour visibly skips the ground-coloured halo.
         const halo = k >= 0.5 ? 1.4 / k : 0;
         for (const pass of [false, true]) {
-            if (pass === false && !focus)
+            if (pass === false && !dim)
                 continue;
             const groups = new Map();
             for (const s of this.nodes) {
@@ -345,7 +372,8 @@ export class GraphScene {
             if (!this.visible(s) || !onScreen(s))
                 continue;
             const ring = s === this.selected || s === focus;
-            if (!s.node.emphasis && !ring && !this.matches.has(s))
+            const onRoute = route && this.routeNodes.has(s);
+            if (!s.node.emphasis && !ring && !onRoute && !this.matches.has(s))
                 continue;
             const r = rad(s);
             const shape = this.shapes.get(s.node.kind) ?? 'circle';
@@ -361,11 +389,11 @@ export class GraphScene {
             const p = new Path2D();
             this.shape(p, shape, s.x, s.y, r + 3.5 / k);
             ctx.lineWidth = (ring ? 2 : 1.4) / k;
-            ctx.strokeStyle = ring || this.matches.has(s) ? P.ink : this.colour(s);
+            ctx.strokeStyle = ring || onRoute || this.matches.has(s) ? P.ink : this.colour(s);
             ctx.stroke(p);
         }
         ctx.globalAlpha = 1;
-        this.labels(ctx, P, focus, near, edgeLabels, onScreen, rad);
+        this.labels(ctx, P, focus, near, edgeLabels, route, onScreen, rad);
     }
     colour(s) {
         return this.palette?.kinds.get(s.node.kind) ?? this.palette?.fallback ?? 'currentColor';
@@ -457,7 +485,7 @@ export class GraphScene {
         }
         return true;
     }
-    labels(ctx, P, focus, near, edgeLabels, onScreen, rad) {
+    labels(ctx, P, focus, near, edgeLabels, route, onScreen, rad) {
         const { k, x: tx, y: ty } = this.cam;
         const { dpr, width: W, height: H } = this;
         this.grid.clear();
@@ -487,8 +515,11 @@ export class GraphScene {
         else {
             if (this.selected)
                 order.push(this.selected);
+            if (route)
+                order.push(...this.routeNodes);
             order.push(...this.matches);
-            order.push(...this.ranked);
+            if (!route)
+                order.push(...this.ranked);
         }
         const seen = new Set();
         const quota = Math.ceil((W * H) / LABEL_AREA);
@@ -504,7 +535,7 @@ export class GraphScene {
             seen.add(s);
             tries++;
             const text = clip(s.node.label);
-            const prominent = s === focus || s === this.selected || !!s.node.emphasis;
+            const prominent = s === focus || s === this.selected || !!s.node.emphasis || (route && this.routeNodes.has(s));
             if (!focus && placed >= quota && rad(s) * k < 7 && !prominent && !this.matches.has(s))
                 continue;
             const font = prominent ? strong : body;
@@ -519,7 +550,7 @@ export class GraphScene {
             const below = ty + s.y * k + r + 4;
             const above = ty + s.y * k - r - 4 - h;
             const fits = (y) => this.claim(sx - w / 2 - 3, y - 2, sx + w / 2 + 3, y + h + 2);
-            const sy = fits(below) ? below : fits(above) ? above : s === focus || s === this.selected ? below : null;
+            const sy = fits(below) ? below : fits(above) ? above : s === focus || s === this.selected || (route && this.routeNodes.has(s)) ? below : null;
             if (sy === null || sy > H || sy + h < 0)
                 continue;
             this.text(ctx, font, text, sx, sy, 'top', P.ink, P.ground);
@@ -542,7 +573,7 @@ export class GraphScene {
             const w = this.measure(ctx, small, text);
             if (!this.claim(mx - w / 2 - 3, my - 7, mx + w / 2 + 3, my + 7))
                 continue;
-            const hot = !!focus && (e.source === focus || e.target === focus);
+            const hot = route || (!!focus && (e.source === focus || e.target === focus));
             this.text(ctx, small, text, mx, my, 'middle', hot ? P.ink : P.inkSoft, P.ground);
             edgesPlaced++;
         }

package/dist/components/ui/graph-canvas/types.d.ts

@@ -14,7 +14,10 @@ export interface GraphNode {
 export interface GraphEdge {
     source: string;
     target: string;
+    /** The relation's verb, drawn on the line on the highlighted path or around a focused node. */
     label?: string;
+    /** `dashed` for a weaker link, such as a claim with no citation yet. Defaults to `solid`. */
+    style?: 'solid' | 'dashed';
 }
 export type GraphShape = 'circle' | 'square' | 'diamond' | 'triangle';
 /** A legend row. The colour is any CSS colour; a `var(--…)` resolves against the graph's own element. */

package/dist/components/ui/page-container/index.d.ts

@@ -0,0 +1,2 @@
+export { default as PageContainer } from './page-container.svelte';
+export { default } from './page-container.svelte';

package/dist/components/ui/page-container/index.js

@@ -0,0 +1,2 @@
+export { default as PageContainer } from './page-container.svelte';
+export { default } from './page-container.svelte';

package/dist/components/ui/page-container/page-container.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	/**
+	 * A route's page: its header, sections and panels stacked at the one page
+	 * rhythm. Pages had written that wrapper per file (`space-y-6`, `space-y-10`,
+	 * `gap-4`, `gap-5`, `gap-10` in one app; a local PageContainer behind 56
+	 * call sites in another).
+	 *
+	 * Width is not this component's: AppShell caps the content box from the
+	 * route's `measure`, which a route declares in its load data. The container
+	 * fills that box and grows to its height, so a page holding a board or a
+	 * table can scroll inside itself.
+	 *
+	 * PageHeader carries its own bottom margin for pages written without this;
+	 * inside it the gap alone spaces the header, so the header sits at the same
+	 * distance either way.
+	 */
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../../utils.js';
+
+	let {
+		children,
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { children: Snippet } = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="page-container"
+	class={cn(
+		'flex min-h-0 w-full min-w-0 flex-1 flex-col gap-6 *:data-[slot=page-header]:mb-0',
+		className
+	)}
+	{...restProps}
+>
+	{@render children()}
+</div>

package/dist/components/ui/page-container/page-container.svelte.d.ts

@@ -0,0 +1,24 @@
+/**
+     * A route's page: its header, sections and panels stacked at the one page
+     * rhythm. Pages had written that wrapper per file (`space-y-6`, `space-y-10`,
+     * `gap-4`, `gap-5`, `gap-10` in one app; a local PageContainer behind 56
+     * call sites in another).
+     *
+     * Width is not this component's: AppShell caps the content box from the
+     * route's `measure`, which a route declares in its load data. The container
+     * fills that box and grows to its height, so a page holding a board or a
+     * table can scroll inside itself.
+     *
+     * PageHeader carries its own bottom margin for pages written without this;
+     * inside it the gap alone spaces the header, so the header sits at the same
+     * distance either way.
+     */
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    children: Snippet;
+};
+declare const PageContainer: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type PageContainer = ReturnType<typeof PageContainer>;
+export default PageContainer;

package/dist/components/ui/page-header/page-header.svelte

@@ -3,6 +3,7 @@
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { cn, type WithElementRef } from '../../../utils.js';
 	import InfoTip from '../info-tip/info-tip.svelte';
+	import Breadcrumbs, { type BreadcrumbItem } from '../breadcrumbs/breadcrumbs.svelte';
 
 	/**
 	 * The one page-title pattern for every route. `subtitle` is a short, single
@@ -23,10 +24,11 @@
 	 * the drift this package exists to end. One component, one spacing rhythm,
 	 * two shapes.
 	 *
-	 * The trail itself stays the app's, as a snippet: a breadcrumb trail is made
-	 * of routed links, and a package with no SvelteKit runtime of its own cannot
-	 * own those (the same reasoning that makes AppShell take `currentPath` as a
-	 * prop rather than importing `$app/state`).
+	 * The trail is a list of steps (`BreadcrumbItem[]`), drawn by Breadcrumbs.
+	 * A snippet is still accepted for a trail that is not a list of links (a
+	 * record switcher in the trail's place), but a list is the default: three
+	 * apps wrote the same chevron trail by hand, one behind a 28-call-site
+	 * wrapper that existed only to turn this snippet into an array.
 	 *
 	 * `icon` and `meta` are snippets for the same reason and earn their place the
 	 * same way `breadcrumbs` did: three apps had hand-rolled the meta row and two
@@ -50,8 +52,8 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
 		/** A short kicker above the title. Use this OR `breadcrumbs`, not both. */
 		eyebrow?: string;
-		/** The trail above the title — the app's own routed links. */
-		breadcrumbs?: Snippet;
+		/** The trail above the title: its steps, or a snippet for a trail that is not links. */
+		breadcrumbs?: BreadcrumbItem[] | Snippet;
 		/** The glyph alone. The tinted square around it is this component's. */
 		icon?: Snippet;
 		/** Omit for a header that is a breadcrumb bar with actions. */
@@ -66,6 +68,7 @@
 
 <div
 	bind:this={ref}
+	data-slot="page-header"
 	class={cn('mb-6 flex flex-wrap items-start justify-between gap-4', className)}
 	{...restProps}
 >
@@ -83,10 +86,12 @@
 			</span>
 		{/if}
 		<div class="min-w-0">
-			{#if breadcrumbs}
+			{#if typeof breadcrumbs === 'function'}
 				<div class="text-muted-foreground mb-1.5 flex min-w-0 items-center text-sm">
 					{@render breadcrumbs()}
 				</div>
+			{:else if breadcrumbs?.length}
+				<Breadcrumbs items={breadcrumbs} class="mb-1.5" />
 			{/if}
 			{#if eyebrow}
 				<div class="text-primary text-2xs tracking-eyebrow mb-1 font-medium uppercase">

package/dist/components/ui/page-header/page-header.svelte.d.ts

@@ -1,11 +1,12 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import { type WithElementRef } from '../../../utils.js';
+import { type BreadcrumbItem } from '../breadcrumbs/breadcrumbs.svelte';
 type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     /** A short kicker above the title. Use this OR `breadcrumbs`, not both. */
     eyebrow?: string;
-    /** The trail above the title — the app's own routed links. */
-    breadcrumbs?: Snippet;
+    /** The trail above the title: its steps, or a snippet for a trail that is not links. */
+    breadcrumbs?: BreadcrumbItem[] | Snippet;
     /** The glyph alone. The tinted square around it is this component's. */
     icon?: Snippet;
     /** Omit for a header that is a breadcrumb bar with actions. */

package/dist/components/ui/page-section/index.d.ts

@@ -0,0 +1,2 @@
+export { default as PageSection } from './page-section.svelte';
+export { default } from './page-section.svelte';

package/dist/components/ui/page-section/index.js

@@ -0,0 +1,2 @@
+export { default as PageSection } from './page-section.svelte';
+export { default } from './page-section.svelte';

package/dist/components/ui/page-section/page-section.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	/**
+	 * A section of a page, under its PageHeader: a heading, an optional line of
+	 * explanation, trailing actions, and the section's content at one distance
+	 * below them.
+	 *
+	 * One app had five recipes for this one role, from an 11px uppercase kicker
+	 * to a 20px display heading, and each page spaced its content from the
+	 * heading differently. The heading and the gap under it are this
+	 * component's, because those are the halves that drift.
+	 *
+	 * Level 2 is a section, in the display face one step under the page title.
+	 * Level 3 is a subsection, in the body face at a Panel title's size, so a
+	 * titled card and a subsection read as the same rank. There is no uppercase
+	 * kicker form: a small caps label above content is the column head of a
+	 * table or a nav group, never a heading.
+	 */
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../../utils.js';
+
+	let {
+		title,
+		level = 2,
+		description,
+		count,
+		actions,
+		children,
+		id,
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: Omit<WithElementRef<HTMLAttributes<HTMLElement>>, 'title'> & {
+		title: string;
+		/** 2, a section of the page; 3, a section within one. */
+		level?: 2 | 3;
+		/** A sentence or two under the heading. It wraps. */
+		description?: string;
+		/** How many things the section holds, set beside the heading. */
+		count?: number;
+		/** Controls for the section, trailing the heading. */
+		actions?: Snippet;
+		children?: Snippet;
+		/** The heading's id, for a link to the section. One is generated otherwise. */
+		id?: string;
+	} = $props();
+
+	const fallbackId = $props.id();
+	const headingId = $derived(id ?? `section-${fallbackId}`);
+</script>
+
+<section
+	bind:this={ref}
+	aria-labelledby={headingId}
+	data-slot="page-section"
+	class={cn('flex min-w-0 flex-col', level === 2 ? 'gap-4' : 'gap-3', className)}
+	{...restProps}
+>
+	<!-- Actions share the heading's row, so on a phone they stay beside the
+	     heading rather than dropping under the description. -->
+	<header class="flex min-w-0 flex-col gap-1">
+		<div class="flex min-w-0 flex-wrap items-center gap-x-4 gap-y-2">
+			<svelte:element
+				this={`h${level}`}
+				id={headingId}
+				class={cn(
+					'flex min-w-0 items-baseline gap-2 scroll-mt-4 font-semibold',
+					level === 2
+						? 'font-display text-section tracking-[var(--ds-font-display-tracking,-0.015em)]'
+						: 'text-body leading-tight tracking-tight'
+				)}
+			>
+				<span class="min-w-0">{title}</span>
+				{#if count !== undefined}
+					<span
+						class="text-muted-foreground font-sans text-sm font-normal tracking-normal tabular-nums"
+						>{count}</span
+					>
+				{/if}
+			</svelte:element>
+			{#if actions}
+				<div class="ml-auto flex min-w-0 flex-wrap items-center justify-end gap-2">
+					{@render actions()}
+				</div>
+			{/if}
+		</div>
+		{#if description}
+			<p class="text-muted-foreground ds-measure text-sm" data-measure="prose">{description}</p>
+		{/if}
+	</header>
+	{@render children?.()}
+</section>

package/dist/components/ui/page-section/page-section.svelte.d.ts

@@ -0,0 +1,36 @@
+/**
+     * A section of a page, under its PageHeader: a heading, an optional line of
+     * explanation, trailing actions, and the section's content at one distance
+     * below them.
+     *
+     * One app had five recipes for this one role, from an 11px uppercase kicker
+     * to a 20px display heading, and each page spaced its content from the
+     * heading differently. The heading and the gap under it are this
+     * component's, because those are the halves that drift.
+     *
+     * Level 2 is a section, in the display face one step under the page title.
+     * Level 3 is a subsection, in the body face at a Panel title's size, so a
+     * titled card and a subsection read as the same rank. There is no uppercase
+     * kicker form: a small caps label above content is the column head of a
+     * table or a nav group, never a heading.
+     */
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+type $$ComponentProps = Omit<WithElementRef<HTMLAttributes<HTMLElement>>, 'title'> & {
+    title: string;
+    /** 2, a section of the page; 3, a section within one. */
+    level?: 2 | 3;
+    /** A sentence or two under the heading. It wraps. */
+    description?: string;
+    /** How many things the section holds, set beside the heading. */
+    count?: number;
+    /** Controls for the section, trailing the heading. */
+    actions?: Snippet;
+    children?: Snippet;
+    /** The heading's id, for a link to the section. One is generated otherwise. */
+    id?: string;
+};
+declare const PageSection: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type PageSection = ReturnType<typeof PageSection>;
+export default PageSection;

package/dist/components/ui/sheet/index.d.ts

@@ -0,0 +1,13 @@
+import Root from './sheet.svelte';
+import Trigger from './sheet-trigger.svelte';
+import Close from './sheet-close.svelte';
+import Portal from './sheet-portal.svelte';
+import Overlay from './sheet-overlay.svelte';
+import Content from './sheet-content.svelte';
+import Header from './sheet-header.svelte';
+import Body from './sheet-body.svelte';
+import Footer from './sheet-footer.svelte';
+import Title from './sheet-title.svelte';
+import Description from './sheet-description.svelte';
+export { sheetVariants, type SheetSide } from './sheet-content.svelte';
+export { Root, Trigger, Close, Portal, Overlay, Content, Header, Body, Footer, Title, Description, Root as Sheet, Trigger as SheetTrigger, Close as SheetClose, Portal as SheetPortal, Overlay as SheetOverlay, Content as SheetContent, Header as SheetHeader, Body as SheetBody, Footer as SheetFooter, Title as SheetTitle, Description as SheetDescription };

package/dist/components/ui/sheet/index.js

@@ -0,0 +1,15 @@
+import Root from './sheet.svelte';
+import Trigger from './sheet-trigger.svelte';
+import Close from './sheet-close.svelte';
+import Portal from './sheet-portal.svelte';
+import Overlay from './sheet-overlay.svelte';
+import Content from './sheet-content.svelte';
+import Header from './sheet-header.svelte';
+import Body from './sheet-body.svelte';
+import Footer from './sheet-footer.svelte';
+import Title from './sheet-title.svelte';
+import Description from './sheet-description.svelte';
+export { sheetVariants } from './sheet-content.svelte';
+export { Root, Trigger, Close, Portal, Overlay, Content, Header, Body, Footer, Title, Description, 
+//
+Root as Sheet, Trigger as SheetTrigger, Close as SheetClose, Portal as SheetPortal, Overlay as SheetOverlay, Content as SheetContent, Header as SheetHeader, Body as SheetBody, Footer as SheetFooter, Title as SheetTitle, Description as SheetDescription };

package/dist/components/ui/sheet/sheet-body.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<!-- The part that scrolls, so the header and footer stay put. -->
+<div
+	bind:this={ref}
+	data-slot="sheet-body"
+	class={cn('min-h-0 flex-1 overflow-y-auto p-4', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/sheet/sheet-body.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+declare const SheetBody: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type SheetBody = ReturnType<typeof SheetBody>;
+export default SheetBody;

package/dist/components/ui/sheet/sheet-close.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		type = 'button',
+		...restProps
+	}: DialogPrimitive.CloseProps = $props();
+</script>
+
+<DialogPrimitive.Close bind:ref data-slot="sheet-close" {type} {...restProps} />

package/dist/components/ui/sheet/sheet-close.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Dialog as DialogPrimitive } from 'bits-ui';
+declare const SheetClose: import("svelte").Component<DialogPrimitive.TriggerProps, {}, "ref">;
+type SheetClose = ReturnType<typeof SheetClose>;
+export default SheetClose;

package/dist/components/ui/sheet/sheet-content.svelte

@@ -0,0 +1,70 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from 'tailwind-variants';
+
+	// A sheet stands on the hairline-and-ladder depth every other kit surface
+	// uses (README §Depth): an edge border against the dimmed page, no shadow.
+	// A side sheet takes a phone's whole width: a sliver of dimmed page beside
+	// it is too narrow to read and too narrow to aim at.
+	export const sheetVariants = tv({
+		base: 'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out border-border fixed z-50 flex flex-col text-sm outline-none duration-200 ease-out data-closed:duration-150',
+		variants: {
+			side: {
+				right: 'data-closed:slide-out-to-right data-open:slide-in-from-right inset-y-0 right-0 h-full w-full border-l sm:max-w-sm',
+				left: 'data-closed:slide-out-to-left data-open:slide-in-from-left inset-y-0 left-0 h-full w-full border-r sm:max-w-sm',
+				bottom: 'data-closed:slide-out-to-bottom data-open:slide-in-from-bottom inset-x-0 bottom-0 max-h-[85%] rounded-t-xl border-t',
+				top: 'data-closed:slide-out-to-top data-open:slide-in-from-top inset-x-0 top-0 max-h-[85%] rounded-b-xl border-b'
+			}
+		},
+		defaultVariants: { side: 'right' }
+	});
+
+	export type SheetSide = VariantProps<typeof sheetVariants>['side'];
+</script>
+
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import type { ComponentProps, Snippet } from 'svelte';
+	import XIcon from '@lucide/svelte/icons/x';
+	import { cn, type WithoutChildrenOrChild } from '../../../utils.js';
+	import { Button } from '../button/index.js';
+	import SheetOverlay from './sheet-overlay.svelte';
+	import SheetPortal from './sheet-portal.svelte';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		side = 'right',
+		portalProps,
+		showCloseButton = true,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
+		side?: SheetSide;
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SheetPortal>>;
+		showCloseButton?: boolean;
+		children: Snippet;
+	} = $props();
+</script>
+
+<SheetPortal {...portalProps}>
+	<SheetOverlay />
+	<SheetPrimitive.Content
+		bind:ref
+		data-slot="sheet-content"
+		data-side={side}
+		class={cn(sheetVariants({ side }), className)}
+		{...restProps}
+	>
+		{@render children?.()}
+		{#if showCloseButton}
+			<SheetPrimitive.Close data-slot="sheet-close">
+				{#snippet child({ props })}
+					<Button variant="ghost" class="absolute top-3 right-3" size="icon-sm" {...props}>
+						<XIcon />
+						<span class="sr-only">Close</span>
+					</Button>
+				{/snippet}
+			</SheetPrimitive.Close>
+		{/if}
+	</SheetPrimitive.Content>
+</SheetPortal>