@heyramzi/ui 3.7.0 → 3.8.0

package/src/components/file-drop-zone/file-drop-zone.test.ts

@@ -0,0 +1,148 @@
+import { afterEach, beforeEach, describe, expect, it } from "vite-plus/test";
+import { flushSync, mount, unmount } from "svelte";
+import FileDropZone from "./file-drop-zone.svelte";
+
+// jsdom has no DataTransfer and its input.files takes only a FileList, so the stub returns an
+// array and each input records what the zone wrote.
+class DataTransferStub {
+  readonly list: File[] = [];
+  readonly items = { add: (file: File) => this.list.push(file) };
+  get files() {
+    return this.list;
+  }
+}
+
+beforeEach(() => {
+  (globalThis as { DataTransfer?: unknown }).DataTransfer = DataTransferStub;
+});
+
+afterEach(() => {
+  delete (globalThis as { DataTransfer?: unknown }).DataTransfer;
+  document.body.innerHTML = "";
+});
+
+const pdf = (name: string, size = 10) =>
+  new File([new Uint8Array(size)], name, { type: "application/pdf", lastModified: 1 });
+
+function render(props: Record<string, unknown> = {}) {
+  const target = document.createElement("div");
+  document.body.appendChild(target);
+  const app = mount(FileDropZone, { target, props: { name: "justificatif", ...props } });
+  flushSync();
+  const input = target.querySelector<HTMLInputElement>("input[type=file]");
+  if (!input) throw new Error("no file input");
+  let written: File[] = [];
+  Object.defineProperty(input, "files", {
+    configurable: true,
+    get: () => written,
+    set: (value: File[]) => {
+      written = [...value];
+    },
+  });
+  const fire = (type: string, files: File[]) => {
+    const event = new Event(type, { bubbles: true, cancelable: true });
+    Object.defineProperty(event, "dataTransfer", {
+      value: { types: ["Files"], files, dropEffect: "none" },
+    });
+    target.querySelector("[data-slot=file-drop-zone-target]")?.dispatchEvent(event);
+    flushSync();
+  };
+  const drop = (files: File[]) => {
+    fire("dragenter", files);
+    fire("drop", files);
+  };
+  const names = () =>
+    [...target.querySelectorAll("[data-file-name]")].map((row) =>
+      row.getAttribute("data-file-name"),
+    );
+  return {
+    target,
+    input,
+    drop,
+    fire,
+    names,
+    written: () => written.map((file) => file.name),
+    done: () => void unmount(app),
+  };
+}
+
+describe("FileDropZone", () => {
+  it("speaks French with no setup", () => {
+    const { target, done } = render({ accept: ".pdf", maxFileSize: 10 * 1024 * 1024 });
+    const text = target.textContent ?? "";
+    expect(text).toContain("Glissez votre fichier ici");
+    expect(text).toContain("ou cliquez pour le choisir");
+    expect(text).toContain("PDF, 10 Mo maximum");
+    done();
+  });
+
+  it("writes dropped files into the real input, so a form post carries them", () => {
+    const { input, drop, names, written, done } = render({ multiple: true });
+    drop([pdf("bail.pdf"), pdf("quittance.pdf")]);
+    expect(names()).toEqual(["bail.pdf", "quittance.pdf"]);
+    expect(written()).toEqual(["bail.pdf", "quittance.pdf"]);
+    expect(input.name).toBe("justificatif");
+    done();
+  });
+
+  it("shows the drag state while a file hovers", () => {
+    const { target, fire, done } = render();
+    fire("dragenter", [pdf("bail.pdf")]);
+    expect(target.textContent).toContain("Déposez votre fichier");
+    fire("dragleave", [pdf("bail.pdf")]);
+    expect(target.textContent).toContain("Glissez votre fichier ici");
+    done();
+  });
+
+  it("refuses the wrong format and a file too heavy, and says so", () => {
+    const rejected: string[] = [];
+    const { target, drop, names, done } = render({
+      accept: ".pdf",
+      maxFileSize: 100,
+      multiple: true,
+      onFileRejected: (list: { reason: string }[]) => rejected.push(...list.map((r) => r.reason)),
+    });
+    const photo = new File(["x"], "photo.png", { type: "image/png" });
+    drop([photo, pdf("gros.pdf", 500), pdf("ok.pdf")]);
+    expect(names()).toEqual(["ok.pdf"]);
+    expect(rejected).toEqual(["type", "size"]);
+    expect(target.textContent).toContain("photo.png : format non accepté");
+    expect(target.textContent).toContain("gros.pdf : fichier trop lourd");
+    done();
+  });
+
+  it("stops at maxFiles", () => {
+    const { target, drop, names, done } = render({ multiple: true, maxFiles: 2 });
+    drop([pdf("a.pdf"), pdf("b.pdf"), pdf("c.pdf")]);
+    expect(names()).toEqual(["a.pdf", "b.pdf"]);
+    expect(target.textContent).toContain("2 fichiers au maximum");
+    done();
+  });
+
+  it("removes a file from the list and from the input", () => {
+    const { target, drop, names, written, done } = render({ multiple: true });
+    drop([pdf("a.pdf"), pdf("b.pdf")]);
+    target.querySelector<HTMLButtonElement>('[aria-label="Retirer a.pdf"]')?.click();
+    flushSync();
+    expect(names()).toEqual(["b.pdf"]);
+    expect(written()).toEqual(["b.pdf"]);
+    done();
+  });
+
+  it("puts the one file in the zone's place, and brings the zone back on removal", () => {
+    const { target, drop, done } = render();
+    drop([pdf("bail.pdf")]);
+    expect(target.querySelector("[data-slot=file-drop-zone-target]")).toBeNull();
+    target.querySelector<HTMLButtonElement>('[aria-label="Retirer bail.pdf"]')?.click();
+    flushSync();
+    expect(target.querySelector("[data-slot=file-drop-zone-target]")).not.toBeNull();
+    done();
+  });
+
+  it("ignores drops while disabled", () => {
+    const { drop, names, done } = render({ disabled: true });
+    drop([pdf("bail.pdf")]);
+    expect(names()).toEqual([]);
+    done();
+  });
+});

package/src/components/file-drop-zone/files.test.ts

@@ -0,0 +1,105 @@
+import { describe, expect, it } from "vite-plus/test";
+import {
+  checkFiles,
+  describeAccept,
+  describeLimits,
+  fileKind,
+  formatSize,
+  matchesAccept,
+  removeFile,
+} from "./files.js";
+
+const file = (name: string, type: string, size = 10) =>
+  new File([new Uint8Array(size)], name, { type, lastModified: 1 });
+
+describe("matchesAccept", () => {
+  it("takes extensions, exact types and groups, in any case", () => {
+    expect(matchesAccept(file("Bail.PDF", ""), ".pdf")).toBe(true);
+    expect(matchesAccept(file("a.bin", "application/pdf"), "application/pdf")).toBe(true);
+    expect(matchesAccept(file("photo.heic", "image/heic"), "image/*")).toBe(true);
+    expect(matchesAccept(file("releve.csv", "text/csv"), ".pdf,image/*")).toBe(false);
+  });
+
+  it("lets everything through without an accept string", () => {
+    expect(matchesAccept(file("x.zip", "application/zip"), undefined)).toBe(true);
+    expect(matchesAccept(file("x.zip", "application/zip"), " ")).toBe(true);
+  });
+});
+
+describe("checkFiles", () => {
+  it("turns away the wrong type before the size", () => {
+    const big = file("gros.csv", "text/csv", 5000);
+    const result = checkFiles([big], [], { accept: ".pdf", maxFileSize: 100 });
+    expect(result.rejected).toEqual([{ file: big, reason: "type" }]);
+  });
+
+  it("turns away a file over the size limit", () => {
+    const big = file("gros.pdf", "application/pdf", 5000);
+    const small = file("petit.pdf", "application/pdf", 50);
+    const result = checkFiles([big, small], [], {
+      accept: ".pdf",
+      maxFileSize: 100,
+      multiple: true,
+    });
+    expect(result.files).toEqual([small]);
+    expect(result.rejected).toEqual([{ file: big, reason: "size" }]);
+  });
+
+  it("stops at maxFiles, counting what's already there", () => {
+    const a = file("a.pdf", "application/pdf");
+    const b = file("b.pdf", "application/pdf");
+    const c = file("c.pdf", "application/pdf");
+    const result = checkFiles([b, c], [a], { multiple: true, maxFiles: 2 });
+    expect(result.files).toEqual([a, b]);
+    expect(result.accepted).toEqual([b]);
+    expect(result.rejected).toEqual([{ file: c, reason: "count" }]);
+  });
+
+  it("replaces the one file without multiple, and keeps it when the new one is refused", () => {
+    const a = file("a.pdf", "application/pdf");
+    const b = file("b.pdf", "application/pdf");
+    expect(checkFiles([b], [a], { accept: ".pdf" }).files).toEqual([b]);
+    expect(checkFiles([file("x.png", "image/png")], [a], { accept: ".pdf" }).files).toEqual([a]);
+  });
+
+  it("ignores the same file picked twice", () => {
+    const a = file("a.pdf", "application/pdf");
+    const again = file("a.pdf", "application/pdf");
+    const result = checkFiles([again], [a], { multiple: true });
+    expect(result.files).toEqual([a]);
+    expect(result.rejected).toEqual([]);
+  });
+});
+
+describe("removeFile", () => {
+  it("drops that one file and keeps the order", () => {
+    const a = file("a.pdf", "application/pdf");
+    const b = file("b.pdf", "application/pdf");
+    const c = file("c.pdf", "application/pdf");
+    expect(removeFile([a, b, c], b)).toEqual([a, c]);
+  });
+});
+
+describe("words", () => {
+  it("writes sizes the French way", () => {
+    expect(formatSize(820)).toBe("820 o");
+    expect(formatSize(12 * 1024)).toBe("12 Ko");
+    expect(formatSize(1.4 * 1024 * 1024)).toBe("1,4 Mo");
+    expect(formatSize(10 * 1024 * 1024)).toBe("10 Mo");
+  });
+
+  it("names the accepted types once each", () => {
+    expect(describeAccept(".pdf,application/pdf")).toBe("PDF");
+    expect(describeAccept("image/*,.csv")).toBe("Images, CSV");
+    expect(describeLimits(".pdf", 10 * 1024 * 1024)).toBe("PDF, 10 Mo maximum");
+    expect(describeLimits(undefined, undefined)).toBe("");
+  });
+
+  it("picks an icon kind from the type or the name", () => {
+    expect(fileKind(file("a.pdf", ""))).toBe("pdf");
+    expect(fileKind(file("a.jpg", "image/jpeg"))).toBe("image");
+    expect(fileKind(file("a.csv", ""))).toBe("csv");
+    expect(fileKind(file("a.xlsx", ""))).toBe("sheet");
+    expect(fileKind(file("a.txt", "text/plain"))).toBe("other");
+  });
+});

package/src/components/file-drop-zone/files.ts

@@ -0,0 +1,144 @@
+/** Why a file didn't make it into the list. */
+export type RejectReason = "type" | "size" | "count";
+
+export interface Rejection {
+  file: File;
+  reason: RejectReason;
+}
+
+export interface CheckOptions {
+  /** The input's `accept` string: extensions (`.pdf`), MIME types (`application/pdf`) or groups (`image/*`). */
+  accept?: string;
+  /** Largest file, in bytes. */
+  maxFileSize?: number;
+  /** Most files the list holds. */
+  maxFiles?: number;
+  /** Without it, a new file replaces the one already there. */
+  multiple?: boolean;
+}
+
+export type FileKind = "pdf" | "image" | "csv" | "sheet" | "other";
+
+const tokens = (accept: string | undefined) =>
+  (accept ?? "")
+    .split(",")
+    .map((token) => token.trim().toLowerCase())
+    .filter(Boolean);
+
+/** Whether a file passes the `accept` string, the way the browser's picker reads it. */
+export function matchesAccept(file: File, accept: string | undefined): boolean {
+  const list = tokens(accept);
+  if (list.length === 0) return true;
+  const name = file.name.toLowerCase();
+  const type = file.type.toLowerCase();
+  return list.some((token) => {
+    if (token.startsWith(".")) return name.endsWith(token);
+    if (token.endsWith("/*")) return type.startsWith(token.slice(0, -1));
+    return type === token;
+  });
+}
+
+// The same file picked twice is one file: name, size and date match.
+const same = (a: File, b: File) =>
+  a.name === b.name && a.size === b.size && a.lastModified === b.lastModified;
+
+/**
+ * Sorts a drop, paste or pick into the next list and the refusals.
+ * A file is refused for its first fault: type, then size, then room.
+ */
+export function checkFiles(
+  incoming: readonly File[],
+  current: readonly File[],
+  { accept, maxFileSize, maxFiles, multiple = false }: CheckOptions,
+): { files: File[]; accepted: File[]; rejected: Rejection[] } {
+  const room = multiple ? (maxFiles ?? Infinity) : 1;
+  const kept = multiple ? [...current] : [];
+  const accepted: File[] = [];
+  const rejected: Rejection[] = [];
+  for (const file of incoming) {
+    if (!matchesAccept(file, accept)) rejected.push({ file, reason: "type" });
+    else if (maxFileSize !== undefined && file.size > maxFileSize)
+      rejected.push({ file, reason: "size" });
+    else if (kept.some((other) => same(other, file))) continue;
+    else if (kept.length >= room) rejected.push({ file, reason: "count" });
+    else {
+      kept.push(file);
+      accepted.push(file);
+    }
+  }
+  return { files: accepted.length > 0 || multiple ? kept : [...current], accepted, rejected };
+}
+
+/** Drops one file from the list. */
+export const removeFile = (files: readonly File[], file: File): File[] =>
+  files.filter((other) => other !== file);
+
+const UNITS = ["o", "Ko", "Mo", "Go"] as const;
+
+/** A byte count the way a French reader says it: "820 o", "12 Ko", "1,4 Mo". */
+export function formatSize(bytes: number, locale = "fr-FR"): string {
+  let value = bytes;
+  let unit = 0;
+  while (value >= 1024 && unit < UNITS.length - 1) {
+    value /= 1024;
+    unit += 1;
+  }
+  const digits = unit === 0 || value >= 10 ? 0 : 1;
+  const number = new Intl.NumberFormat(locale, { maximumFractionDigits: digits }).format(value);
+  return `${number} ${UNITS[unit]}`;
+}
+
+const GROUPS: Record<string, string> = {
+  "image/": "Images",
+  "audio/": "Audio",
+  "video/": "Vidéos",
+  "text/": "Texte",
+};
+
+const MIME_NAMES: Record<string, string> = {
+  "application/pdf": "PDF",
+  "text/csv": "CSV",
+  "application/vnd.ms-excel": "XLS",
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "XLSX",
+  "application/msword": "DOC",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "DOCX",
+  "application/zip": "ZIP",
+  "application/json": "JSON",
+};
+
+/** The `accept` string as a reader names it: ".pdf,application/pdf" is "PDF", "image/*" is "Images". */
+export function describeAccept(accept: string | undefined): string {
+  const names: string[] = [];
+  for (const token of tokens(accept)) {
+    const name = token.startsWith(".")
+      ? token.slice(1).toUpperCase()
+      : token.endsWith("/*")
+        ? (GROUPS[token.slice(0, -1)] ?? token)
+        : (MIME_NAMES[token] ?? token.split("/").pop()?.toUpperCase() ?? token);
+    if (name === "JPEG" && names.includes("JPG")) continue;
+    if (!names.includes(name)) names.push(name);
+  }
+  return names.join(", ");
+}
+
+/** The muted line under the title: "PDF, 10 Mo maximum". Empty when nothing limits the pick. */
+export function describeLimits(
+  accept: string | undefined,
+  maxFileSize: number | undefined,
+): string {
+  const types = describeAccept(accept);
+  const size = maxFileSize === undefined ? "" : `${formatSize(maxFileSize)} maximum`;
+  return [types, size].filter(Boolean).join(", ");
+}
+
+/** Which icon a file gets. */
+export function fileKind(file: File): FileKind {
+  const name = file.name.toLowerCase();
+  const type = file.type.toLowerCase();
+  if (type === "application/pdf" || name.endsWith(".pdf")) return "pdf";
+  if (type.startsWith("image/")) return "image";
+  if (type === "text/csv" || name.endsWith(".csv")) return "csv";
+  if (/\.(xlsx?|ods)$/.test(name) || type.includes("spreadsheet") || type.includes("excel"))
+    return "sheet";
+  return "other";
+}

package/src/components/file-drop-zone/index.ts

@@ -0,0 +1,14 @@
+export { default as FileDropZone } from "./file-drop-zone.svelte";
+export {
+  checkFiles,
+  describeAccept,
+  describeLimits,
+  fileKind,
+  formatSize,
+  matchesAccept,
+  removeFile,
+  type CheckOptions,
+  type FileKind,
+  type RejectReason,
+  type Rejection,
+} from "./files.js";

package/src/consumer-prebundle.test.ts

@@ -0,0 +1,126 @@
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+import {
+  cpSync,
+  existsSync,
+  mkdirSync,
+  mkdtempSync,
+  readdirSync,
+  readFileSync,
+  realpathSync,
+  rmSync,
+  symlinkSync,
+  writeFileSync,
+} from "node:fs";
+import { createRequire } from "node:module";
+import { tmpdir } from "node:os";
+import { dirname, join, relative } from "node:path";
+import { fileURLToPath, pathToFileURL } from "node:url";
+import { afterAll, describe, expect, it } from "vite-plus/test";
+import { writeSvelteModules } from "../scripts/lib/svelte-modules.mjs";
+
+// A consumer's dev server prebundles this package, types still in each `.svelte.ts`. 3.6.0's
+// reveal.svelte.ts killed Locameublé's dev server at startup on `import type`.
+
+const root = join(dirname(fileURLToPath(import.meta.url)), "..");
+const pkg = JSON.parse(readFileSync(join(root, "package.json"), "utf8")) as {
+  scripts: Record<string, string>;
+  exports: Record<string, string | string[] | Record<string, string | string[]>>;
+};
+
+/** The Vite core a consumer gets beside vite-plugin-svelte; this package only depends on vite-plus. */
+type Vite = {
+  resolveConfig(config: object, command: "serve", mode: string): Promise<unknown>;
+  optimizeDeps(
+    config: unknown,
+    force: boolean,
+  ): Promise<{ optimized: Record<string, { file: string }> }>;
+};
+const plugin = createRequire(import.meta.url).resolve("@sveltejs/vite-plugin-svelte");
+const vite: Vite = await import(pathToFileURL(createRequire(plugin).resolve("vite")).href);
+
+function walk(dir: string, out: string[] = []): string[] {
+  for (const e of readdirSync(dir, { withFileTypes: true })) {
+    const p = join(dir, e.name);
+    if (e.isDirectory()) walk(p, out);
+    else out.push(p);
+  }
+  return out;
+}
+
+/** The tarball's shape: `files` as prepack leaves them, under a consumer's node_modules. */
+async function consumer(): Promise<{ dir: string; ui: string }> {
+  const dir = mkdtempSync(join(tmpdir(), "ui-consumer-"));
+  const nm = join(dir, "node_modules");
+  const ui = join(nm, "@heyramzi/ui");
+  mkdirSync(ui, { recursive: true });
+  cpSync(join(root, "src"), join(ui, "src"), { recursive: true });
+  cpSync(join(root, "package.json"), join(ui, "package.json"));
+  await writeSvelteModules(join(ui, "src"));
+  for (const name of readdirSync(join(root, "node_modules"))) {
+    const from = join(root, "node_modules", name);
+    const scoped = name.startsWith("@") ? readdirSync(from).map((s) => join(name, s)) : [name];
+    if (name.startsWith("@")) mkdirSync(join(nm, name));
+    for (const dep of scoped)
+      symlinkSync(realpathSync(join(root, "node_modules", dep)), join(nm, dep));
+  }
+  writeFileSync(join(dir, "package.json"), JSON.stringify({ name: "consumer", type: "module" }));
+  return { dir, ui };
+}
+
+/** Every subpath a Svelte app can import, wildcards expanded against the tarball's files. */
+function browserEntries(ui: string): string[] {
+  const out = new Set<string>();
+  for (const [key, value] of Object.entries(pkg.exports)) {
+    if (typeof value !== "object" || Array.isArray(value)) continue;
+    const target = value.svelte;
+    if (typeof target !== "string") continue;
+    if (!key.includes("*")) {
+      out.add(`@heyramzi/ui${key.slice(1)}`);
+      continue;
+    }
+    const [head, tail] = target.split("*");
+    for (const file of walk(join(ui, head))) {
+      const rel = relative(join(ui, head), file);
+      if (!rel.endsWith(tail) || /\.(test|spec)\./.test(rel)) continue;
+      out.add(`@heyramzi/ui${key.slice(1).replace("*", rel.slice(0, -tail.length))}`);
+    }
+  }
+  return [...out].toSorted();
+}
+
+const made: string[] = [];
+afterAll(() => {
+  for (const dir of made) rmSync(dir, { recursive: true, force: true });
+});
+
+describe("a consumer's dev server", () => {
+  it("writes the type-free modules on every pack and removes them after", () => {
+    expect(pkg.scripts.prepack).toContain("node scripts/svelte-modules.mjs");
+    expect(pkg.scripts.postpack).toContain("node scripts/svelte-modules.mjs --clean");
+  });
+
+  it("prebundles every Svelte subpath, chat windows included", async () => {
+    const { dir, ui } = await consumer();
+    made.push(dir);
+    const include = browserEntries(ui);
+    expect(include).toContain("@heyramzi/ui/ai/chat-window");
+    expect(include).toContain("@heyramzi/ui/shadcn/hooks/use-highlighted-code.svelte");
+    expect(include).toContain("@heyramzi/ui/canvas/editor/dispatch.svelte.js");
+
+    const config = await vite.resolveConfig(
+      {
+        root: dir,
+        configFile: false,
+        logLevel: "error",
+        plugins: [svelte({ configFile: false })],
+        optimizeDeps: { include, noDiscovery: true },
+      },
+      "serve",
+      "development",
+    );
+    const { optimized } = await vite.optimizeDeps(config, true);
+    const chat = optimized["@heyramzi/ui/ai/chat-window"];
+    expect(chat && existsSync(chat.file)).toBe(true);
+    expect(readFileSync(chat.file, "utf8")).toContain("REVEAL_BEATS");
+  }, 120_000);
+});

package/src/effects/animated-beam/path-calculator.svelte.js

@@ -0,0 +1,54 @@
+function anchorX(rect, containerLeft, anchor, offset) {
+	const left = rect.left - containerLeft;
+	if (anchor === "left") return left + offset;
+	if (anchor === "right") return left + rect.width + offset;
+	return left + rect.width / 2 + offset;
+}
+export function usePathCalculator() {
+	let pathD = $state("");
+	let svgDimensions = $state({
+		width: 0,
+		height: 0
+	});
+	function calculatePath(containerRef, fromRef, toRef, curvature, startXOffset, startYOffset, endXOffset, endYOffset, fromAnchor = "center", toAnchor = "center") {
+		if (!containerRef || !fromRef || !toRef) return;
+		const containerRect = containerRef.getBoundingClientRect();
+		const rectA = fromRef.getBoundingClientRect();
+		const rectB = toRef.getBoundingClientRect();
+		// A scaled ancestor shrinks every rect, but the SVG draws in the container's own pixels.
+		// Divide the scale out, or the beams stop short of their nodes.
+		const scaleX = containerRef.offsetWidth ? containerRect.width / containerRef.offsetWidth : 1;
+		const scaleY = containerRef.offsetHeight ? containerRect.height / containerRef.offsetHeight : 1;
+		const local = (rect) => new DOMRect((rect.left - containerRect.left) / scaleX, (rect.top - containerRect.top) / scaleY, rect.width / scaleX, rect.height / scaleY);
+		const a = local(rectA);
+		const b = local(rectB);
+		svgDimensions = {
+			width: containerRect.width / scaleX,
+			height: containerRect.height / scaleY
+		};
+		const startX = anchorX(a, 0, fromAnchor, startXOffset);
+		const startY = a.top + a.height / 2 + startYOffset;
+		const endX = anchorX(b, 0, toAnchor, endXOffset);
+		const endY = b.top + b.height / 2 + endYOffset;
+		// A cubic with horizontal handles, not a quadratic through a raised midpoint.
+		// The quadratic put its single control point at `midY` minus `curvature`, which for a fan into one node lands past the far end:
+		// the top beam dove below the hub and crossed the middle beam before arriving, and three beams bundled into a lens for the last stretch.
+		// Handles along the axis of travel make each beam leave and arrive perpendicular to its anchor, so a fan converges at the anchor and nowhere else.
+		// `curvature` still bows the middle, and zero still draws a straight line between two anchors at the same height.
+		const span = Math.abs(endX - startX);
+		const handle = Math.max(span * .5, 24);
+		const direction = endX >= startX ? 1 : -1;
+		const c1x = startX + handle * direction;
+		const c2x = endX - handle * direction;
+		pathD = `M ${startX},${startY} C ${c1x},${startY - curvature} ${c2x},${endY - curvature} ${endX},${endY}`;
+	}
+	return {
+		get pathD() {
+			return pathD;
+		},
+		get svgDimensions() {
+			return svgDimensions;
+		},
+		calculatePath
+	};
+}

package/src/onboarding/onboarding.svelte.js

@@ -0,0 +1,19 @@
+class Onboarding {
+	/** True when the current page has a tour, so a menu item can hide itself. */
+	hasTour = $state(false);
+	/** True while a tour is on screen. */
+	running = $state(false);
+	#replay = null;
+	/** The provider registers itself here. Returns the undo for cleanup. */
+	bind(replay) {
+		this.#replay = replay;
+		return () => {
+			if (this.#replay === replay) this.#replay = null;
+		};
+	}
+	/** Restarts this page's tour, or the one named. Writes no seen-state. False when nothing started. */
+	replay(tourId) {
+		return this.#replay ? this.#replay(tourId) : Promise.resolve(false);
+	}
+}
+export const onboarding = new Onboarding();

package/src/shadcn/calendar/calendar-month-select.svelte

@@ -26,7 +26,7 @@
 						value={monthItem.value}
 						selected={value !== undefined
 							? monthItem.value === value
-							: monthItem.value === selectedMonthItem.value}
+							: monthItem.value === selectedMonthItem?.value}
 					>
 						{monthItem.label}
 					</option>
@@ -36,7 +36,7 @@
 				class="[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
 				aria-hidden="true"
 			>
-				{monthItems.find((item) => item.value === value)?.label || selectedMonthItem.label}
+				{monthItems.find((item) => item.value === value)?.label || selectedMonthItem?.label}
 				<CaretDown aria-hidden="true" class="size-4" />
 			</span>
 		{/snippet}

package/src/shadcn/calendar/calendar-year-select.svelte

@@ -25,7 +25,7 @@
 						value={yearItem.value}
 						selected={value !== undefined
 							? yearItem.value === value
-							: yearItem.value === selectedYearItem.value}
+							: yearItem.value === selectedYearItem?.value}
 					>
 						{yearItem.label}
 					</option>
@@ -35,7 +35,7 @@
 				class="[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
 				aria-hidden="true"
 			>
-				{yearItems.find((item) => item.value === value)?.label || selectedYearItem.label}
+				{yearItems.find((item) => item.value === value)?.label || selectedYearItem?.label || value}
 				<CaretDown aria-hidden="true" class="size-4" />
 			</span>
 		{/snippet}