@heyramzi/ui 3.0.0 → 3.2.0

package/dist/charts/dual-axis.js

@@ -0,0 +1,38 @@
+const NICE = [
+	1,
+	2,
+	2.5,
+	5,
+	10
+];
+/** The smallest 1, 2, 2.5 or 5 times a power of ten that is at least `raw`. */
+export function niceStep(raw) {
+	if (!(raw > 0) || !Number.isFinite(raw)) return 1;
+	const power = 10 ** Math.floor(Math.log10(raw));
+	// WHY the epsilon: 0.3 / 0.1 is 2.9999999999999996, which would skip 3 x 0.1 for the next step.
+	const multiple = NICE.find((m) => m * power >= raw * (1 - 1e-9)) ?? 10;
+	return multiple * power;
+}
+function ticksOf(step, count) {
+	// Rounded so 0.1 x 3 reads 0.3 on the axis, not 0.30000000000000004.
+	return Array.from({ length: count + 1 }, (_, i) => Number((i * step).toPrecision(12)));
+}
+/**
+* Left and right domains from 0, with the same tick count so both axes sit on one grid.
+* `target` is the number of intervals wanted; the left data may round it to one more or less.
+*/
+export function dualAxis(leftMax, rightMax, target = 4) {
+	const leftStep = niceStep(Math.max(0, leftMax) / target);
+	const count = Math.max(1, Math.ceil(Math.max(0, leftMax) / leftStep - 1e-9));
+	const rightStep = niceStep(Math.max(0, rightMax) / count);
+	return {
+		left: {
+			max: leftStep * count,
+			ticks: ticksOf(leftStep, count)
+		},
+		right: {
+			max: rightStep * count,
+			ticks: ticksOf(rightStep, count)
+		}
+	};
+}

package/dist/lib/sliding-pill.js

@@ -2,10 +2,10 @@
 // WHY attach to the pill, not the list: the pill finds its list via
 // `parentElement`, so any strip that renders one span gets the motion.
 // WHY measure: the active item's width is its label. The selector covers the
-// three ways a strip marks it: a tab, a nav link, a toggle.
+// ways a strip marks it: a tab, a nav link, a pressed button, a bits-ui toggle group item.
 // Per transitions.dev `tabs-sliding`: first paint and resizes write the
 // position with the transition off, so the pill snaps in instead of flying.
-const ACTIVE = "[data-state=\"active\"],[aria-current=\"page\"],[aria-pressed=\"true\"]";
+const ACTIVE = "[data-state=\"active\"],[aria-current=\"page\"],[aria-pressed=\"true\"],[data-state=\"on\"]";
 export const slidingPill = (pill) => {
 	const list = pill.parentElement;
 	if (!list) return;

package/dist/record/measure-clamp.js

@@ -0,0 +1,23 @@
+import { untrack } from "svelte";
+/** Reports whether a line-clamped box cuts its text, so "More" shows only then. */
+// WHY measure: a note that fits two lines at 1280px overflows at 390px.
+// WHY untracked: an open box keeps its last answer, so a fold never remounts the toggle under focus.
+export function measureClamp(expanded, onCut) {
+	return (el) => {
+		const measure = () => untrack(() => {
+			if (!expanded()) onCut(el.scrollHeight > el.clientHeight + 1);
+		});
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(el);
+		// A web font landing rewraps the text in a box that keeps its height, and the observer stays quiet.
+		let live = true;
+		void document.fonts?.ready.then(() => live && measure());
+		document.fonts?.addEventListener("loadingdone", measure);
+		return () => {
+			live = false;
+			observer.disconnect();
+			document.fonts?.removeEventListener("loadingdone", measure);
+		};
+	};
+}

package/dist/shadcn/button-group/index.js

@@ -0,0 +1,6 @@
+import Separator from "../../../src/shadcn/button-group/button-group-separator.svelte";
+import Text from "../../../src/shadcn/button-group/button-group-text.svelte";
+import Root, { buttonGroupVariants } from "../../../src/shadcn/button-group/button-group.svelte";
+export { Root, Text, Separator, buttonGroupVariants, 
+//
+ Root as ButtonGroup, Text as ButtonGroupText, Separator as ButtonGroupSeparator };

package/dist/shadcn/checkbox/checkbox-box.js

@@ -0,0 +1,3 @@
+// The checkbox's square, shared with rows that draw it as a picture inside a menu item,
+// where a real checkbox would put a button inside a button.
+export const checkboxBoxClass = "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 not-data-checked:enabled:hover:border-foreground/30 focus-visible:border-ring focus-visible:shadow-(--ring-focus) aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-sm border shadow-btn transition-[background-color,border-color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] group-has-disabled/field:opacity-50 aria-invalid:ring-3 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 any-pointer-coarse:after:-inset-[15px] disabled:cursor-not-allowed disabled:opacity-50";

package/dist/shadcn/input-group/index.js

@@ -0,0 +1,9 @@
+import Addon from "../../../src/shadcn/input-group/input-group-addon.svelte";
+import Button from "../../../src/shadcn/input-group/input-group-button.svelte";
+import Input from "../../../src/shadcn/input-group/input-group-input.svelte";
+import Text from "../../../src/shadcn/input-group/input-group-text.svelte";
+import Textarea from "../../../src/shadcn/input-group/input-group-textarea.svelte";
+import Root from "../../../src/shadcn/input-group/input-group.svelte";
+export { Root, Addon, Button, Input, Text, Textarea, 
+//
+ Root as InputGroup, Addon as InputGroupAddon, Button as InputGroupButton, Input as InputGroupInput, Text as InputGroupText, Textarea as InputGroupTextarea };

package/dist/shadcn/item/index.js

@@ -0,0 +1,13 @@
+import Actions from "../../../src/shadcn/item/item-actions.svelte";
+import Content from "../../../src/shadcn/item/item-content.svelte";
+import Description from "../../../src/shadcn/item/item-description.svelte";
+import Footer from "../../../src/shadcn/item/item-footer.svelte";
+import Group from "../../../src/shadcn/item/item-group.svelte";
+import Header from "../../../src/shadcn/item/item-header.svelte";
+import Media from "../../../src/shadcn/item/item-media.svelte";
+import Separator from "../../../src/shadcn/item/item-separator.svelte";
+import Title from "../../../src/shadcn/item/item-title.svelte";
+import Root from "../../../src/shadcn/item/item.svelte";
+export { Root, Group, Separator, Header, Footer, Content, Title, Description, Actions, Media, 
+//
+ Root as Item, Group as ItemGroup, Separator as ItemSeparator, Header as ItemHeader, Footer as ItemFooter, Content as ItemContent, Title as ItemTitle, Description as ItemDescription, Actions as ItemActions, Media as ItemMedia };

package/dist/shadcn/native-select/index.js

@@ -0,0 +1,6 @@
+import Root from "../../../src/shadcn/native-select/native-select.svelte";
+import Option from "../../../src/shadcn/native-select/native-select-option.svelte";
+import OptGroup from "../../../src/shadcn/native-select/native-select-opt-group.svelte";
+export { Root, Option, OptGroup, 
+//
+ Root as NativeSelect, Option as NativeSelectOption, OptGroup as NativeSelectOptGroup };

package/dist/shadcn/pagination/index.js

@@ -0,0 +1,12 @@
+import Content from "../../../src/shadcn/pagination/pagination-content.svelte";
+import Ellipsis from "../../../src/shadcn/pagination/pagination-ellipsis.svelte";
+import Item from "../../../src/shadcn/pagination/pagination-item.svelte";
+import Link from "../../../src/shadcn/pagination/pagination-link.svelte";
+import NextButton from "../../../src/shadcn/pagination/pagination-next-button.svelte";
+import Next from "../../../src/shadcn/pagination/pagination-next.svelte";
+import PrevButton from "../../../src/shadcn/pagination/pagination-prev-button.svelte";
+import Previous from "../../../src/shadcn/pagination/pagination-previous.svelte";
+import Root from "../../../src/shadcn/pagination/pagination.svelte";
+export { Root, Content, Item, Link, PrevButton, NextButton, Ellipsis, Previous, Next, 
+//
+ Root as Pagination, Content as PaginationContent, Item as PaginationItem, Link as PaginationLink, PrevButton as PaginationPrevButton, NextButton as PaginationNextButton, Ellipsis as PaginationEllipsis, Previous as PaginationPrevious, Next as PaginationNext };

package/dist/slides/deck-controller.svelte.js

@@ -5,9 +5,19 @@ import { resolveLabels } from "./labels.js";
 import { DEFAULT_CANVAS } from "./types.js";
 /** Height the controls bar takes at the bottom of the overview, in px. */
 const CONTROLS_ROOM = 56;
-/** How long the overview morph flag stays up, a little past the longest stagger. */
-const MORPH_MS = 900;
 const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+/**
+* Where `cell` lands when the camera moves `target` onto `fit`. Every box shares one scale and
+* shift, and a transform tween is linear in both, so the grid stays rigid while it zooms.
+*/
+function frame(cell, target, fit) {
+	const k = fit.scale / target.scale;
+	return {
+		x: fit.x + (cell.x - target.x) * k,
+		y: fit.y + (cell.y - target.y) * k,
+		scale: cell.scale * k
+	};
+}
 function isEditable(el) {
 	return el.isContentEditable || [
 		"INPUT",
@@ -22,7 +32,7 @@ export class DeckController {
 	/** The highlighted thumbnail in the overview, as an index among the visible slides. */
 	cursor = $state(0);
 	direction = $state(1);
-	morphing = $state(false);
+	zoom = $state(null);
 	size = $state({
 		w: 0,
 		h: 0
@@ -30,6 +40,7 @@ export class DeckController {
 	options;
 	#listeners = new Set();
 	#timer;
+	#frame = 0;
 	constructor(options) {
 		this.options = options;
 	}
@@ -61,8 +72,13 @@ export class DeckController {
 	}, this.canvas, this.visible.length));
 	/** Where slide `index` sits right now: centred to fit, or in its overview cell. */
 	boxOf(index) {
-		if (!this.overview) return this.fit;
-		return this.grid.boxes[this.visible.indexOf(index)];
+		const zoom = this.zoom;
+		const cell = this.grid.boxes[this.visible.indexOf(index)];
+		if (zoom?.framed) {
+			const target = this.grid.boxes[this.visible.indexOf(zoom.index)];
+			return cell && target ? frame(cell, target, this.fit) : this.fit;
+		}
+		return this.overview || zoom ? cell : this.fit;
 	}
 	register(entry) {
 		untrack(() => {
@@ -78,7 +94,7 @@ export class DeckController {
 		return () => this.#listeners.delete(listener);
 	}
 	mount() {
-		return () => clearTimeout(this.#timer);
+		return () => this.#stopZoom();
 	}
 	/** Which deck hears a key is the page's call: Deck passes only keys from focus inside it. */
 	get listening() {
@@ -88,14 +104,15 @@ export class DeckController {
 		this.options.index = position.index;
 		this.options.step = position.step;
 	}
-	commit(target, source = "local") {
+	/** `animate: false` skips the slide transition, for a move the overview zoom already shows. */
+	commit(target, source = "local", animate = true) {
 		if (!target) return;
 		const from = this.position;
 		const to = settle(this.slides, target);
 		if (to.index === from.index && to.step === from.step) return;
 		this.direction = to.index >= from.index ? 1 : -1;
 		const apply = () => this.#write(to);
-		if (to.index !== from.index && this.options.transition) this.options.transition(apply);
+		if (animate && to.index !== from.index && this.options.transition) this.options.transition(apply);
 		else apply();
 		for (const listener of this.#listeners) listener(to, source);
 	}
@@ -111,23 +128,53 @@ export class DeckController {
 			step
 		}, source);
 	}
+	/**
+	* Opening zooms the camera out from the current slide to the whole grid. Closing zooms into
+	* the current slide, so `select` moves there first.
+	*/
 	toggleOverview(force) {
 		const open = force ?? !this.overview;
 		if (open === this.overview) return;
-		if (open) this.cursor = Math.max(0, this.visible.indexOf(this.position.index));
+		const index = this.position.index;
+		if (open) this.cursor = Math.max(0, this.visible.indexOf(index));
 		this.view = open ? "overview" : "slide";
-		this.#morph();
+		this.#stopZoom();
+		const ms = this.options.zoomMs?.() ?? 0;
+		if (ms <= 0 || !this.visible.includes(index)) return;
+		/*
+		* Each way paints its start state first and moves on a later frame. Moved in the same
+		* flush, a style read in between (the overview handing focus back) commits the boxes
+		* before the transition rule is on, and the zoom jumps to its end.
+		*/
+		this.zoom = {
+			index,
+			framed: open,
+			running: !open
+		};
+		this.#frame = requestAnimationFrame(() => {
+			this.#frame = requestAnimationFrame(() => {
+				this.zoom = {
+					index,
+					framed: !open,
+					running: true
+				};
+				this.#timer = setTimeout(() => this.#stopZoom(), ms);
+			});
+		});
 	}
 	/** Leaves the overview on slide `index`. Picking the current slide keeps its step. */
 	select(index) {
-		this.toggleOverview(false);
 		const keep = index === this.position.index;
-		this.go(index, keep ? this.position.step : 0);
+		this.commit({
+			index,
+			step: keep ? this.position.step : 0
+		}, "local", false);
+		this.toggleOverview(false);
 	}
-	#morph() {
-		this.morphing = true;
+	#stopZoom() {
 		clearTimeout(this.#timer);
-		this.#timer = setTimeout(() => this.morphing = false, MORPH_MS);
+		cancelAnimationFrame(this.#frame);
+		this.zoom = null;
 	}
 	#moveCursor(to) {
 		this.cursor = clamp(to, 0, this.visible.length - 1);

package/dist/slides/layout.js

@@ -10,7 +10,8 @@ export function fitBox(view, canvas) {
 function scaleFor(cols, count, view, canvas, pad, gap) {
 	const rows = Math.ceil(count / cols);
 	const byWidth = (view.w - 2 * pad - (cols - 1) * gap) / cols / canvas.w;
-	const byHeight = (view.h - 2 * pad - (rows - 1) * gap) / rows / canvas.h;
+	/* Every row, the last too, keeps a gap under it for its numbers. */
+	const byHeight = (view.h - 2 * pad - rows * gap) / rows / canvas.h;
 	return Math.min(byWidth, byHeight);
 }
 /** Lays `count` canvases in the roomiest grid that shows them all, centred. */
@@ -32,7 +33,7 @@ export function gridBoxes(view, canvas, count) {
 	const cellH = canvas.h * scale;
 	const rows = Math.ceil(count / cols);
 	const left = (view.w - (cols * cellW + (cols - 1) * gap)) / 2;
-	const top = (view.h - (rows * cellH + (rows - 1) * gap)) / 2;
+	const top = (view.h - rows * (cellH + gap)) / 2;
 	const boxes = Array.from({ length: count }, (_, i) => ({
 		x: left + i % cols * (cellW + gap),
 		y: top + Math.floor(i / cols) * (cellH + gap),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyramzi/ui",
-  "version": "3.0.0",
+  "version": "3.2.0",
   "description": "Svelte 5 UI for apps: primitives, effects and animations, plus work (tasks and docs), charts, slides, an editor, onboarding and a canvas as subpaths.",
   "homepage": "https://ui.heyramzi.com",
   "license": "MIT",
@@ -271,6 +271,10 @@
       "default": "./src/editor/block-ops.ts"
     },
     "./editor/inline-editor": {
+      "types": [
+        "./src/editor/inline-editor.svelte.d.ts",
+        "./src/editor/inline-editor.svelte"
+      ],
       "svelte": "./src/editor/inline-editor.svelte",
       "default": "./src/editor/inline-editor.svelte"
     },
@@ -291,7 +295,10 @@
       "default": "./src/canvas/index.ts"
     },
     "./canvas/*.svelte": {
-      "types": "./src/canvas/*.svelte",
+      "types": [
+        "./src/canvas/*.svelte.d.ts",
+        "./src/canvas/*.svelte"
+      ],
       "svelte": "./src/canvas/*.svelte",
       "default": "./src/canvas/*.svelte"
     },

package/scripts/svelte-dts.mjs

@@ -3,6 +3,9 @@
 // `.svelte` under node_modules, so without them every component types as `any`.
 
 // prepack writes them, postpack deletes them (`--clean`): left in src, they'd shadow the components.
+// An export whose target is a `.svelte` file lists its `types` as [`x.svelte.d.ts`, `x.svelte`]:
+// from a `.svelte` target TypeScript only looks for `x.d.svelte.ts`, and svelte-check stops
+// faking that file once a real `x.svelte.d.ts` sits beside it, so the import found nothing (3.0.0).
 import { existsSync, mkdtempSync, readdirSync, readFileSync, rmSync, writeFileSync } from "node:fs";
 import { createRequire } from "node:module";
 import { tmpdir } from "node:os";

package/scripts/sync-shadcn.mjs

@@ -76,19 +76,14 @@ const DEMO_ALIASES = [
 /* Registry primitives this package does not ship: no product imports them. Skipped, so a sync does not bring them back. */
 const NOT_SHIPPED = new Set([
   "aspect-ratio",
-  "button-group",
   "carousel",
   "chart",
   "data-table",
   "drawer",
   "form",
-  "input-group",
-  "item",
   "kbd",
   "menubar",
-  "native-select",
   "navigation-menu",
-  "pagination",
   "range-calendar",
   "resizable",
   // Its `pascalToKebab` has no importer, in the registry or here.

package/src/ai/generation-progress/GenerationProgress.svelte

@@ -19,6 +19,7 @@
 	// =========================
 	// IMPORTS
 	// =========================
+	import { Progress as ProgressPrimitive } from "bits-ui";
 	import { cn } from "../../lib/utils.js";
 
 	// =========================
@@ -104,21 +105,22 @@
 			</span>
 		</div>
 
-		<div
-			class="gen-track"
-			data-indeterminate={progress ? undefined : true}
-			role="progressbar"
+		<!-- Bits' root, not the shadcn bar: that one has no indeterminate look and fills with primary. -->
+		<ProgressPrimitive.Root
+			value={progress ? progress.completed : null}
+			max={progress?.total}
 			aria-label={heading}
-			aria-valuemin={progress ? 0 : undefined}
-			aria-valuemax={progress?.total}
-			aria-valuenow={progress?.completed}
 			aria-valuetext={progress ? `${progress.completed} of ${progress.total}` : undefined}
 		>
-			<div
-				class="gen-fill"
-				style:transform={progress ? `scaleX(${percent / 100})` : undefined}
-			></div>
-		</div>
+			{#snippet child({ props })}
+				<div {...props} class="gen-track">
+					<div
+						class="gen-fill"
+						style:transform={progress ? `scaleX(${percent / 100})` : undefined}
+					></div>
+				</div>
+			{/snippet}
+		</ProgressPrimitive.Root>
 
 		{#if progress?.currentStep}
 			{#key progress.currentStep}

package/src/canvas/pen/PenOverlay.svelte

@@ -8,6 +8,7 @@
 	import type { PenOp } from "./ops.js";
 	import { createPenSession, type PenPreview } from "./pen-session.js";
 	import type { PenColor, PenTool } from "./types.js";
+	import { forwardWheel } from "../ui/forward-wheel.js";
 
 	// =========================
 	// TYPES
@@ -106,36 +107,6 @@
 		if (event.key === "Escape") session.cancel();
 	}
 
-	// The overlay sits above xyflow's zoom pane, so a wheel or a trackpad pinch would
-	// never reach it. Hand those to the pane so you can zoom and pan mid-drawing.
-	function forwardWheel(node: HTMLElement) {
-		const handler = (event: WheelEvent) => {
-			const zoomPane = node.closest(".svelte-flow")?.querySelector(".svelte-flow__zoom");
-			if (!zoomPane) return;
-			event.preventDefault();
-			zoomPane.dispatchEvent(
-				new WheelEvent("wheel", {
-					deltaX: event.deltaX,
-					deltaY: event.deltaY,
-					deltaZ: event.deltaZ,
-					deltaMode: event.deltaMode,
-					clientX: event.clientX,
-					clientY: event.clientY,
-					screenX: event.screenX,
-					screenY: event.screenY,
-					ctrlKey: event.ctrlKey,
-					shiftKey: event.shiftKey,
-					altKey: event.altKey,
-					metaKey: event.metaKey,
-					bubbles: true,
-					cancelable: true,
-				}),
-			);
-		};
-		node.addEventListener("wheel", handler, { passive: false });
-		return () => node.removeEventListener("wheel", handler);
-	}
-
 	function cursorFor(current: PenTool): string {
 		if (current === "text") return "text";
 		return "crosshair";

package/src/canvas/screen/PartView.svelte

@@ -3,6 +3,7 @@
 	// IMPORTS
 	// =========================
 	import { tick } from "svelte";
+	import { Toggle } from "../../shadcn/toggle/index.js";
 	import GlyphIcon from "./GlyphIcon.svelte";
 	import { addItem, removeItem, setItem } from "./parts.js";
 	import type { ScreenLabels } from "./labels.js";
@@ -206,15 +207,19 @@
 	{#if !readonly}
 		<div class="cv-tools nodrag">
 			{#if part.kind === "button"}
-				<button
-					type="button"
-					class="cv-tool is-text"
-					aria-pressed={part.variant !== "secondary"}
-					onclick={() =>
-						onCommit({ variant: part.variant === "secondary" ? "primary" : "secondary" }, false)}
+				<!-- The button is drawn here, so the card's own classes replace the toggle's utilities. -->
+				<Toggle
+					bind:pressed={
+						() => part.variant !== "secondary",
+						(primary) => onCommit({ variant: primary ? "primary" : "secondary" }, false)
+					}
 				>
-					{part.variant === "secondary" ? labels.secondary : labels.primary}
-				</button>
+					{#snippet child({ props })}
+						<button {...props} class="cv-tool is-text">
+							{part.variant === "secondary" ? labels.secondary : labels.primary}
+						</button>
+					{/snippet}
+				</Toggle>
 			{/if}
 			<button
 				type="button"

package/src/canvas/screen/ScreenBody.svelte

@@ -2,6 +2,7 @@
 	// =========================
 	// IMPORTS
 	// =========================
+	import { RadioGroup } from "bits-ui";
 	import { getDiagramEditorContext } from "../editor/editor-context.js";
 	import { isLocked } from "../editor/lock.js";
 	import { DEFAULT_SCREEN_LABELS, type ScreenLabels } from "./labels.js";
@@ -71,6 +72,13 @@
 		if (mode !== screen.mode) write({ mode });
 	}
 
+	// Svelte Flow nudges a selected card on an arrow, so the mode switch keeps the keys it moves by.
+	function keepArrows(event: KeyboardEvent) {
+		if (event.key.startsWith("Arrow") || event.key === "Home" || event.key === "End") {
+			event.stopPropagation();
+		}
+	}
+
 	function add(kind: PartKind) {
 		write({ parts: addPart(screen.parts, kind) });
 		tray = false;
@@ -104,20 +112,19 @@
 			}}
 		/>
 		{#if !readonly}
-			<div class="cv-switch nodrag" role="radiogroup" aria-label={labels.mode}>
+			<RadioGroup.Root
+				class="cv-switch nodrag"
+				orientation="horizontal"
+				aria-label={labels.mode}
+				bind:value={() => screen.mode, (mode) => setMode(mode as ScreenMode)}
+				onkeydown={keepArrows}
+			>
 				{#each SCREEN_MODES as mode (mode)}
-					<button
-						type="button"
-						role="radio"
-						class="cv-seg"
-						aria-checked={screen.mode === mode}
-						data-mode-option={mode}
-						onclick={() => setMode(mode)}
-					>
+					<RadioGroup.Item value={mode} class="cv-seg" data-mode-option={mode}>
 						{labels.modes[mode]}
-					</button>
+					</RadioGroup.Item>
 				{/each}
-			</div>
+			</RadioGroup.Root>
 		{/if}
 	</div>
 

package/src/canvas/ui/BarTooltip.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { Snippet } from "svelte";
+	import { Kbd } from "../../shadcn/kbd/index.js";
+	import * as Tooltip from "../../shadcn/tooltip/index.js";
+
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		/** Shown in the tooltip, and the button's name unless `name` is set. */
+		label: string;
+		/** The name a screen reader reads, when it needs more than the tooltip, like "Fill: Red". */
+		name?: string;
+		/** The single key that picks this tool, shown beside the label and set as aria-keyshortcuts. */
+		shortcut?: string;
+		side?: "top" | "right" | "bottom" | "left";
+		/** The bar control. Spread `props` on it, so the tooltip opens from it and names it. */
+		child: Snippet<[{ props: Record<string, unknown> }]>;
+	}
+
+	// =========================
+	// PROPS
+	// =========================
+	// Renamed, because the trigger's own `child` snippet below would shadow it.
+	let { label, name = label, shortcut, side = "top", child: control }: Props = $props();
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<Tooltip.Root>
+	<Tooltip.Trigger>
+		{#snippet child({ props })}
+			{@render control({
+				props: { ...props, "aria-label": name, "aria-keyshortcuts": shortcut || undefined },
+			})}
+		{/snippet}
+	</Tooltip.Trigger>
+	<Tooltip.Content {side} sideOffset={10} class="flex items-center gap-2">
+		{label}
+		{#if shortcut}<Kbd>{shortcut}</Kbd>{/if}
+	</Tooltip.Content>
+</Tooltip.Root>

package/src/canvas/ui/BarTooltip.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from "svelte";
+interface Props {
+    /** Shown in the tooltip, and the button's name unless `name` is set. */
+    label: string;
+    /** The name a screen reader reads, when it needs more than the tooltip, like "Fill: Red". */
+    name?: string;
+    /** The single key that picks this tool, shown beside the label and set as aria-keyshortcuts. */
+    shortcut?: string;
+    side?: "top" | "right" | "bottom" | "left";
+    /** The bar control. Spread `props` on it, so the tooltip opens from it and names it. */
+    child: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;