@heyramzi/ui 2.24.0 → 3.1.0

package/dist/shadcn/sidebar/context.svelte.js

@@ -1,6 +1,11 @@
 import { IsMobile } from "../hooks/is-mobile.svelte.js";
 import { getContext, setContext } from "svelte";
 import { SIDEBAR_KEYBOARD_SHORTCUT } from "./constants.js";
+// Cmd+B in a field means bold, so the shortcut leaves typing alone.
+function isEditable(target) {
+	if (!(target instanceof HTMLElement)) return false;
+	return target.closest("input, textarea, [contenteditable]:not([contenteditable=\"false\"])") !== null;
+}
 class SidebarState {
 	props;
 	open = $derived.by(() => this.props.open());
@@ -8,8 +13,10 @@ class SidebarState {
 	setOpen;
 	#isMobile;
 	state = $derived.by(() => this.open ? "expanded" : "collapsed");
+	id;
 	constructor(props) {
 		this.setOpen = props.setOpen;
+		this.id = props.id;
 		this.#isMobile = new IsMobile();
 		this.props = props;
 	}
@@ -18,9 +25,13 @@ class SidebarState {
 	get isMobile() {
 		return this.#isMobile.current;
 	}
+	/** Whether the sidebar a trigger controls is showing: the sheet on a phone, the panel otherwise. */
+	get expanded() {
+		return this.#isMobile.current ? this.openMobile : this.open;
+	}
 	// Event handler to apply to the `<svelte:window>`
 	handleShortcutKeydown = (e) => {
-		if (e.key === SIDEBAR_KEYBOARD_SHORTCUT && (e.metaKey || e.ctrlKey)) {
+		if (e.key === SIDEBAR_KEYBOARD_SHORTCUT && (e.metaKey || e.ctrlKey) && !isEditable(e.target)) {
 			e.preventDefault();
 			this.toggle();
 		}

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

@@ -3,17 +3,21 @@ import { fitBox, gridBoxes } from "./layout.js";
 import { keyAction, nextPosition, ordinalOf, prevPosition, progressOf, settle, visibleIndexes } from "./navigation.js";
 import { resolveLabels } from "./labels.js";
 import { DEFAULT_CANVAS } from "./types.js";
-/* With several decks on a page, keys belong to the one the reader last touched. */
-const live = new Set();
-let active = null;
-const claimKeys = (deck) => {
-	active = deck;
-};
 /** 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",
@@ -28,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
@@ -36,6 +40,7 @@ export class DeckController {
 	options;
 	#listeners = new Set();
 	#timer;
+	#frame = 0;
 	constructor(options) {
 		this.options = options;
 	}
@@ -67,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(() => {
@@ -83,36 +93,26 @@ export class DeckController {
 		this.#listeners.add(listener);
 		return () => this.#listeners.delete(listener);
 	}
-	/** Marks this deck as the one that owns the keys. Mounting does it too. */
-	activate() {
-		claimKeys(this);
-	}
 	mount() {
-		live.add(this);
-		claimKeys(this);
-		return () => {
-			live.delete(this);
-			if (active === this) active = null;
-			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() {
-		if (this.options.keyboard === false) return false;
-		const eligible = [...live].filter((deck) => deck.options.keyboard !== false);
-		return eligible.length <= 1 || active === this;
+		return this.options.keyboard !== false;
 	}
 	#write(position) {
 		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);
 	}
@@ -128,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/dist/status/index.js

@@ -3,4 +3,3 @@ export { default as StatusDot } from "../../src/status/status-dot.svelte";
 export { default as StatusIcon } from "../../src/status/status-icon.svelte";
 export { defineStatuses } from "./define-statuses.js";
 export { default as StatusPill } from "../../src/status/status-pill.svelte";
-export { TONE_TINT as PILL_TINT } from "../lib/tone.js";

package/dist/work/index.js

@@ -15,5 +15,4 @@ export { default as TimeChip } from "../../src/work/time/time-chip.svelte";
 export { default as TimeRing } from "../../src/work/time/time-ring.svelte";
 export { default as TimeDot } from "../../src/work/time/time-dot.svelte";
 export { budgetTone, dayLabel, formatClock, formatMinutes, localDay, parseMinutes, personColor } from "./time/duration.js";
-export { confidenceLevel, inboxConfidence, inboxKinds, inboxStates } from "./inbox/index.js";
 export { DEFAULT_TIME_LABELS } from "./time/time-types.js";

package/dist/work/kanban-keyboard.js

@@ -4,7 +4,7 @@ export function createCardKeyDown(config) {
 	const { input, canDrop, isHidden, sortedByColumn, isCapped, moveAndPin } = config;
 	/**
 	* Alt + ArrowLeft/Right moves the focused card to the next droppable column, so
-	* keyboard and screen-reader users get drag's onMove contract.
+	* keyboard and screen-reader users get drag's onMove contract. Returns the move, if one ran.
 	*/
 	return function onCardKeyDown(e, id) {
 		const { onSelect, items, getId, getColumn, columns, sortKey, dropAtTop, boardOrder } = input();
@@ -30,16 +30,21 @@ export function createCardKeyDown(config) {
 				const index = atTop ? 0 : column.length;
 				const before = column[index - 1];
 				const after = column[index];
-				void moveAndPin(id, {
+				const done = moveAndPin(id, {
 					columnId: target.id,
 					...boardOrder ? { boardOrder: boardOrderAt(column, index, (entry) => boardOrder(entry)) } : {},
 					beforeId: before === undefined ? null : getId(before),
 					afterId: after === undefined ? null : getId(after)
 				});
-			} else {
-				void moveAndPin(id, { columnId: target.id });
+				return {
+					column: target,
+					done
+				};
 			}
-			return;
+			return {
+				column: target,
+				done: moveAndPin(id, { columnId: target.id })
+			};
 		}
 	};
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyramzi/ui",
-  "version": "2.24.0",
+  "version": "3.1.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",
@@ -18,18 +18,11 @@
     "dist"
   ],
   "type": "module",
-  "svelte": "./src/index.ts",
   "imports": {
     "#scripts/*": "./scripts/*",
     "#src/*": "./src/*"
   },
   "exports": {
-    ".": {
-      "svelte": "./src/index.ts",
-      "types": "./src/index.ts",
-      "node": "./dist/index.js",
-      "default": "./src/index.ts"
-    },
     "./package.json": "./package.json",
     "./tokens.css": "./src/tokens/index.css",
     "./brand": {
@@ -44,27 +37,17 @@
       "node": "./dist/lib/*.js",
       "default": "./src/lib/*.ts"
     },
-    "./lib/*": {
-      "svelte": "./src/lib/*.ts",
-      "types": "./src/lib/*.ts",
-      "node": "./dist/lib/*.js",
-      "default": "./src/lib/*.ts"
-    },
-    "./border-beam": {
-      "svelte": "./src/effects/border-beam/BorderBeam.svelte",
-      "default": "./src/effects/border-beam/BorderBeam.svelte"
-    },
     "./effects/border-beam": {
-      "svelte": "./src/effects/border-beam/BorderBeam.svelte",
-      "default": "./src/effects/border-beam/BorderBeam.svelte"
-    },
-    "./theme-toggle": {
-      "svelte": "./src/effects/theme-toggle/ThemeToggle.svelte",
-      "default": "./src/effects/theme-toggle/ThemeToggle.svelte"
+      "svelte": "./src/effects/border-beam/index.ts",
+      "types": "./src/effects/border-beam/index.ts",
+      "node": "./dist/effects/border-beam/index.js",
+      "default": "./src/effects/border-beam/index.ts"
     },
     "./effects/theme-toggle": {
-      "svelte": "./src/effects/theme-toggle/ThemeToggle.svelte",
-      "default": "./src/effects/theme-toggle/ThemeToggle.svelte"
+      "svelte": "./src/effects/theme-toggle/index.ts",
+      "types": "./src/effects/theme-toggle/index.ts",
+      "node": "./dist/effects/theme-toggle/index.js",
+      "default": "./src/effects/theme-toggle/index.ts"
     },
     "./effects/animated-beam": {
       "svelte": "./src/effects/animated-beam/index.ts",
@@ -73,16 +56,22 @@
       "default": "./src/effects/animated-beam/index.ts"
     },
     "./effects/spotlight": {
-      "svelte": "./src/effects/spotlight/Spotlight.svelte",
-      "default": "./src/effects/spotlight/Spotlight.svelte"
+      "svelte": "./src/effects/spotlight/index.ts",
+      "types": "./src/effects/spotlight/index.ts",
+      "node": "./dist/effects/spotlight/index.js",
+      "default": "./src/effects/spotlight/index.ts"
     },
     "./effects/magic-card": {
-      "svelte": "./src/effects/magic-card/MagicCard.svelte",
-      "default": "./src/effects/magic-card/MagicCard.svelte"
+      "svelte": "./src/effects/magic-card/index.ts",
+      "types": "./src/effects/magic-card/index.ts",
+      "node": "./dist/effects/magic-card/index.js",
+      "default": "./src/effects/magic-card/index.ts"
     },
     "./effects/marquee": {
-      "svelte": "./src/effects/marquee/Marquee.svelte",
-      "default": "./src/effects/marquee/Marquee.svelte"
+      "svelte": "./src/effects/marquee/index.ts",
+      "types": "./src/effects/marquee/index.ts",
+      "node": "./dist/effects/marquee/index.js",
+      "default": "./src/effects/marquee/index.ts"
     },
     "./effects/image-reveal": {
       "svelte": "./src/effects/image-reveal/index.ts",
@@ -103,16 +92,22 @@
       "default": "./src/effects/reveal/index.ts"
     },
     "./effects/progressive-blur": {
-      "svelte": "./src/effects/progressive-blur/ProgressiveBlur.svelte",
-      "default": "./src/effects/progressive-blur/ProgressiveBlur.svelte"
+      "svelte": "./src/effects/progressive-blur/index.ts",
+      "types": "./src/effects/progressive-blur/index.ts",
+      "node": "./dist/effects/progressive-blur/index.js",
+      "default": "./src/effects/progressive-blur/index.ts"
     },
     "./effects/interactive-hover-button": {
-      "svelte": "./src/effects/interactive-hover-button/InteractiveHoverButton.svelte",
-      "default": "./src/effects/interactive-hover-button/InteractiveHoverButton.svelte"
+      "svelte": "./src/effects/interactive-hover-button/index.ts",
+      "types": "./src/effects/interactive-hover-button/index.ts",
+      "node": "./dist/effects/interactive-hover-button/index.js",
+      "default": "./src/effects/interactive-hover-button/index.ts"
     },
     "./effects/image-comparison": {
-      "svelte": "./src/effects/image-comparison/ImageComparison.svelte",
-      "default": "./src/effects/image-comparison/ImageComparison.svelte"
+      "svelte": "./src/effects/image-comparison/index.ts",
+      "types": "./src/effects/image-comparison/index.ts",
+      "node": "./dist/effects/image-comparison/index.js",
+      "default": "./src/effects/image-comparison/index.ts"
     },
     "./effects/magnetic": {
       "svelte": "./src/effects/magnetic/magnetic.ts",
@@ -127,8 +122,8 @@
       "default": "./src/icons/sf-symbols.ts"
     },
     "./design": {
-      "style": "./src/design/index.css",
-      "default": "./src/design/index.css"
+      "style": "./src/tokens/design.css",
+      "default": "./src/tokens/design.css"
     },
     "./animations": {
       "style": "./src/animations/index.css",
@@ -165,12 +160,6 @@
       "style": "./src/shadcn/utilities.css",
       "default": "./src/shadcn/utilities.css"
     },
-    "./ai": {
-      "svelte": "./src/ai/index.ts",
-      "types": "./src/ai/index.ts",
-      "node": "./dist/ai/index.js",
-      "default": "./src/ai/index.ts"
-    },
     "./ai/*": {
       "svelte": "./src/ai/*/index.ts",
       "types": "./src/ai/*/index.ts",
@@ -183,7 +172,6 @@
       "node": "./dist/agents/index.js",
       "default": "./src/agents/index.ts"
     },
-    "./agents/demo.svelte": "./src/agents/demo.svelte",
     "./status": {
       "svelte": "./src/status/index.ts",
       "types": "./src/status/index.ts",
@@ -202,7 +190,6 @@
       "node": "./dist/record/index.js",
       "default": "./src/record/index.ts"
     },
-    "./record/demo.svelte": "./src/record/record-demo.svelte",
     "./thread": {
       "svelte": "./src/thread/index.ts",
       "types": "./src/thread/index.ts",
@@ -227,50 +214,18 @@
       "node": "./dist/work/index.js",
       "default": "./src/work/index.ts"
     },
-    "./work/kanban": {
-      "svelte": "./src/work/kanban-board.svelte",
-      "types": "./src/work/kanban-board.svelte",
-      "default": "./src/work/kanban-board.svelte"
-    },
-    "./work/list": {
-      "svelte": "./src/work/task-list.svelte",
-      "types": "./src/work/task-list.svelte",
-      "default": "./src/work/task-list.svelte"
-    },
-    "./work/gantt": {
-      "svelte": "./src/work/task-gantt.svelte",
-      "types": "./src/work/task-gantt.svelte",
-      "default": "./src/work/task-gantt.svelte"
-    },
-    "./work/time": {
-      "svelte": "./src/work/time/time-tracker.svelte",
-      "types": "./src/work/time/time-tracker.svelte",
-      "default": "./src/work/time/time-tracker.svelte"
-    },
     "./work/inbox": {
       "svelte": "./src/work/inbox/index.ts",
       "types": "./src/work/inbox/index.ts",
       "node": "./dist/work/inbox/index.js",
       "default": "./src/work/inbox/index.ts"
     },
-    "./work/detail": {
-      "svelte": "./src/work/detail/task-detail.svelte",
-      "types": "./src/work/detail/task-detail.svelte",
-      "default": "./src/work/detail/task-detail.svelte"
-    },
     "./work/docs": {
       "svelte": "./src/work/docs/index.ts",
       "types": "./src/work/docs/index.ts",
       "node": "./dist/work/docs/index.js",
       "default": "./src/work/docs/index.ts"
     },
-    "./work/docs-demo.svelte": "./src/work/docs/docs-demo.svelte",
-    "./work/detail-demo.svelte": "./src/work/detail/detail-demo.svelte",
-    "./work/demo": {
-      "svelte": "./src/work/demo.svelte",
-      "default": "./src/work/demo.svelte"
-    },
-    "./work/demo.svelte": "./src/work/demo.svelte",
     "./charts": {
       "svelte": "./src/charts/index.ts",
       "types": "./src/charts/index.ts",
@@ -299,27 +254,12 @@
       "node": "./dist/slides/export/index.js",
       "default": "./src/slides/export/index.ts"
     },
-    "./slides/demo": {
-      "svelte": "./src/slides/demo.svelte",
-      "default": "./src/slides/demo.svelte"
-    },
-    "./slides/demo.svelte": "./src/slides/demo.svelte",
-    "./slides/demo-slides": {
-      "svelte": "./src/slides/demo-slides.svelte",
-      "default": "./src/slides/demo-slides.svelte"
-    },
-    "./slides/demo-slides.svelte": "./src/slides/demo-slides.svelte",
     "./editor": {
       "svelte": "./src/editor/index.ts",
       "types": "./src/editor/index.ts",
       "node": "./dist/editor/index.js",
       "default": "./src/editor/index.ts"
     },
-    "./editor/serializer": {
-      "types": "./src/editor/serializer.ts",
-      "node": "./dist/editor/serializer.js",
-      "default": "./src/editor/serializer.ts"
-    },
     "./editor/markdown": {
       "types": "./src/editor/markdown.ts",
       "node": "./dist/editor/markdown.js",
@@ -331,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"
     },
@@ -344,17 +288,6 @@
       "node": "./dist/onboarding/index.js",
       "default": "./src/onboarding/index.ts"
     },
-    "./onboarding/stores": {
-      "svelte": "./src/onboarding/stores.ts",
-      "types": "./src/onboarding/stores.ts",
-      "node": "./dist/onboarding/stores.js",
-      "default": "./src/onboarding/stores.ts"
-    },
-    "./onboarding/demo": {
-      "svelte": "./src/onboarding/demo.svelte",
-      "default": "./src/onboarding/demo.svelte"
-    },
-    "./onboarding/demo.svelte": "./src/onboarding/demo.svelte",
     "./canvas": {
       "types": "./src/canvas/index.ts",
       "svelte": "./src/canvas/index.ts",
@@ -362,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"
     },
@@ -415,6 +351,7 @@
     "svelte": "^5.57.3",
     "svelte-check": "^4.7.8",
     "svelte-sonner": "^1.2.3",
+    "svelte2tsx": "^0.7.63",
     "typescript": "~7.0.2",
     "vite-plus": "1.5.0"
   },

package/scripts/svelte-dts.mjs

@@ -0,0 +1,65 @@
+#!/usr/bin/env node
+// Writes `x.svelte.d.ts` beside each `x.svelte` for the tarball: native TypeScript can't read a
+// `.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";
+import { dirname, join, relative } from "node:path";
+import { argv, chdir, exit } from "node:process";
+import { fileURLToPath } from "node:url";
+import { emitDts } from "svelte2tsx";
+
+const root = join(dirname(fileURLToPath(import.meta.url)), "..");
+const src = join(root, "src");
+
+function walk(dir, test, out = []) {
+  for (const e of readdirSync(dir, { withFileTypes: true })) {
+    const p = join(dir, e.name);
+    if (e.isDirectory()) walk(p, test, out);
+    else if (test(e.name)) out.push(p);
+  }
+  return out;
+}
+
+for (const file of walk(src, (n) => n.endsWith(".svelte.d.ts"))) rmSync(file);
+if (argv.includes("--clean")) exit(0);
+
+// emitDts also declares every .ts file; only the component ones are copied out.
+const out = mkdtempSync(join(tmpdir(), "svelte-dts-"));
+chdir(root);
+await emitDts({
+  libRoot: src,
+  tsconfig: join(root, "tsconfig.json"),
+  // svelte2tsx's own option name, a computed key because the old-names gate reads a bare key as ours.
+  ["svelteShimsPath"]: createRequire(import.meta.url).resolve("svelte2tsx/svelte-shims-v4.d.ts"),
+  declarationDir: out,
+});
+
+const components = walk(src, (n) => n.endsWith(".svelte"));
+const dtsOf = (file) => join(out, `${relative(src, file)}.d.ts`);
+const missing = components.filter((file) => !existsSync(dtsOf(file)));
+if (missing.length) {
+  rmSync(out, { recursive: true, force: true });
+  const list = missing.map((file) => relative(root, file)).join("\n");
+  console.error(`svelte-dts: no declaration for ${missing.length} file(s):\n${list}`);
+  exit(1);
+}
+
+// emitDts names the component after its file, a name 5 files also import (calendar's
+// `* as Calendar`): a circular alias on TypeScript 7, so the default gets a neutral name.
+function unnamed(dts) {
+  const name = dts.match(/^export default (\w+);$/m)[1];
+  const own = new RegExp(`^(declare const |type |export default )${name}\\b.*$`, "gm");
+  return dts.replace(own, (line) =>
+    line.replaceAll(new RegExp(`\\b${name}\\b`, "g"), "$$$$Component"),
+  );
+}
+for (const file of components)
+  writeFileSync(`${file}.d.ts`, unnamed(readFileSync(dtsOf(file), "utf8")));
+rmSync(out, { recursive: true, force: true });
+console.log(`svelte-dts: ${components.length} declaration(s) beside src/**/*.svelte`);

package/scripts/sync-shadcn.mjs

@@ -131,7 +131,9 @@ const meta = (doc, name) => {
       .match(new RegExp(`^${key}:\\s*(.+)$`, "m"))?.[1]
       .trim()
       .replace(/^["']|["']$/g, "");
-  return { title: field("title") ?? pascal(name), note: field("description") ?? "" };
+  // Upstream sets clauses off with em dashes; the site's copy uses commas.
+  const note = (field("description") ?? "").replace(/\s*—\s*/g, ", ");
+  return { title: field("title") ?? pascal(name), note };
 };
 
 /** The demo's own shadcn imports, as it spells them for a consumer. */