@heyramzi/ui 2.11.1 → 2.11.2

package/dist/lib/sliding-pill.js

@@ -1,45 +1,60 @@
-const ACTIVE = '[data-state="active"],[aria-current="page"],[aria-pressed="true"]';
-export const slidingPill = (pill)=>{
-    const list = pill.parentElement;
-    if (!list) return;
-    let settled = false;
-    const move = (animate)=>{
-        const active = list.querySelector(ACTIVE);
-        if (!active) {
-            pill.style.opacity = "0";
-            return;
-        }
-        pill.style.opacity = "1";
-        if (animate) {
-            pill.style.transform = `translateX(${active.offsetLeft}px)`;
-            pill.style.width = `${active.offsetWidth}px`;
-            return;
-        }
-        pill.style.transition = "none";
-        pill.style.transform = `translateX(${active.offsetLeft}px)`;
-        pill.style.width = `${active.offsetWidth}px`;
-        void pill.offsetWidth;
-        pill.style.transition = "";
-    };
-    move(false);
-    list.dataset.pill = "on";
-    settled = true;
-    const attributes = new MutationObserver(()=>move(settled));
-    attributes.observe(list, {
-        subtree: true,
-        childList: true,
-        attributes: true,
-        attributeFilter: [
-            "data-state",
-            "aria-current",
-            "aria-pressed"
-        ]
-    });
-    const resize = new ResizeObserver(()=>move(false));
-    resize.observe(list);
-    return ()=>{
-        attributes.disconnect();
-        resize.disconnect();
-        delete list.dataset.pill;
-    };
+/** The travelling highlight behind the active tab. Attach it to a span inside the list. */
+// 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.
+// 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\"]";
+export const slidingPill = (pill) => {
+	const list = pill.parentElement;
+	if (!list) return;
+	let settled = false;
+	const move = (animate) => {
+		const active = list.querySelector(ACTIVE);
+		if (!active) {
+			pill.style.opacity = "0";
+			return;
+		}
+		pill.style.opacity = "1";
+		if (animate) {
+			pill.style.transform = `translateX(${active.offsetLeft}px)`;
+			pill.style.width = `${active.offsetWidth}px`;
+			return;
+		}
+		// Suspend, write, reflow, restore. Without the reflow the browser
+		// coalesces the two writes and the snap animates anyway.
+		pill.style.transition = "none";
+		pill.style.transform = `translateX(${active.offsetLeft}px)`;
+		pill.style.width = `${active.offsetWidth}px`;
+		void pill.offsetWidth;
+		pill.style.transition = "";
+	};
+	// Position first, THEN hand the highlight over. Swapped, one frame draws both
+	// the trigger's own background and a zero-width pill: a flicker on hydration.
+	move(false);
+	list.dataset.pill = "on";
+	settled = true;
+	// The selection lives in an attribute bits-ui owns, and a badge arriving
+	// changes a trigger's width without any attribute changing.
+	const attributes = new MutationObserver(() => move(settled));
+	attributes.observe(list, {
+		subtree: true,
+		childList: true,
+		attributes: true,
+		attributeFilter: [
+			"data-state",
+			"aria-current",
+			"aria-pressed"
+		]
+	});
+	// A list that reflows (a rail collapsing, a font landing) re-measures
+	// without motion: nothing was chosen, so nothing should travel.
+	const resize = new ResizeObserver(() => move(false));
+	resize.observe(list);
+	return () => {
+		attributes.disconnect();
+		resize.disconnect();
+		delete list.dataset.pill;
+	};
 };

package/dist/lib/theme-transition.js

@@ -1,53 +1,53 @@
 const DEFAULT_DURATION = 300;
 const STYLE_ID = "heyramzi-reveal-theme";
+/**
+* Run `apply` inside a circular wipe from the clicked element or a point, falling back to
+* plain `apply()` without view transitions, under reduced motion, or with `skip`.
+*/
 export function revealTheme(origin, apply, options = {}) {
-    const { skip = false, duration = DEFAULT_DURATION, easing = "cubic-bezier(0.77, 0, 0.175, 1)" } = options;
-    const point = resolveOrigin(origin);
-    const prefersReduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-    if (skip || prefersReduced || !document.startViewTransition || !point) {
-        apply();
-        return;
-    }
-    const { x, y } = point;
-    const endRadius = Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y));
-    ensureStyles();
-    const transition = document.startViewTransition(()=>{
-        apply();
-    });
-    transition.ready.then(()=>{
-        document.documentElement.animate({
-            clipPath: [
-                `circle(0px at ${x}px ${y}px)`,
-                `circle(${endRadius}px at ${x}px ${y}px)`
-            ]
-        }, {
-            duration,
-            easing,
-            pseudoElement: "::view-transition-new(root)"
-        });
-    });
+	const { skip = false, duration = DEFAULT_DURATION, easing = "cubic-bezier(0.77, 0, 0.175, 1)" } = options;
+	const point = resolveOrigin(origin);
+	const prefersReduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+	if (skip || prefersReduced || !document.startViewTransition || !point) {
+		apply();
+		return;
+	}
+	const { x, y } = point;
+	const endRadius = Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y));
+	ensureStyles();
+	const transition = document.startViewTransition(() => {
+		apply();
+	});
+	transition.ready.then(() => {
+		document.documentElement.animate({ clipPath: [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`] }, {
+			duration,
+			easing,
+			pseudoElement: "::view-transition-new(root)"
+		});
+	});
 }
 function centreOf(element) {
-    const rect = element.getBoundingClientRect();
-    return {
-        x: rect.left + rect.width / 2,
-        y: rect.top + rect.height / 2
-    };
+	const rect = element.getBoundingClientRect();
+	return {
+		x: rect.left + rect.width / 2,
+		y: rect.top + rect.height / 2
+	};
 }
+// A click on a child still wipes from the control that owns the handler.
 function resolveOrigin(origin) {
-    if (origin instanceof Element) return centreOf(origin);
-    if (origin instanceof MouseEvent) {
-        return origin.currentTarget instanceof Element ? centreOf(origin.currentTarget) : {
-            x: origin.clientX,
-            y: origin.clientY
-        };
-    }
-    return origin;
+	if (origin instanceof Element) return centreOf(origin);
+	if (origin instanceof MouseEvent) {
+		return origin.currentTarget instanceof Element ? centreOf(origin.currentTarget) : {
+			x: origin.clientX,
+			y: origin.clientY
+		};
+	}
+	return origin;
 }
 function ensureStyles() {
-    if (document.getElementById(STYLE_ID)) return;
-    const style = document.createElement("style");
-    style.id = STYLE_ID;
-    style.textContent = `::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal;}`;
-    document.head.appendChild(style);
+	if (document.getElementById(STYLE_ID)) return;
+	const style = document.createElement("style");
+	style.id = STYLE_ID;
+	style.textContent = `::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal;}`;
+	document.head.appendChild(style);
 }

package/dist/lib/tone.js

@@ -1,32 +1,39 @@
+/**
+* The severity scale as chip classes and dot colors. Accent reads `--tone-accent` before
+* `--color-primary`, for a host whose primary is a neutral.
+*/
 export const TONE_CLASS = {
-    neutral: "border-border bg-muted/40 text-muted-foreground",
-    accent: "border-[color-mix(in_oklab,var(--tone-accent,var(--color-primary))_30%,transparent)] bg-[color-mix(in_oklab,var(--tone-accent,var(--color-primary))_10%,transparent)] text-[color:var(--tone-accent,var(--color-primary))]",
-    info: "border-info/30 bg-info/10 text-info-800 dark:text-info-400",
-    success: "border-success/30 bg-success/10 text-success-800 dark:text-success-400",
-    warning: "border-warning/30 bg-warning/10 text-warning-800 dark:text-warning-400",
-    destructive: "border-destructive/30 bg-destructive/10 text-destructive-ink"
+	neutral: "border-border bg-muted/40 text-muted-foreground",
+	accent: "border-[color-mix(in_oklab,var(--tone-accent,var(--color-primary))_30%,transparent)] bg-[color-mix(in_oklab,var(--tone-accent,var(--color-primary))_10%,transparent)] text-[color:var(--tone-accent,var(--color-primary))]",
+	info: "border-info/30 bg-info/10 text-info-800 dark:text-info-400",
+	success: "border-success/30 bg-success/10 text-success-800 dark:text-success-400",
+	warning: "border-warning/30 bg-warning/10 text-warning-800 dark:text-warning-400",
+	destructive: "border-destructive/30 bg-destructive/10 text-destructive-ink"
 };
+/** The same scale as text, for a verdict inside a line of muted facts. */
 export const TONE_TEXT = {
-    neutral: "text-muted-foreground",
-    accent: "text-[color:var(--tone-accent,var(--color-primary))]",
-    info: "text-info-800 dark:text-info-400",
-    success: "text-success-800 dark:text-success-400",
-    warning: "text-warning-800 dark:text-warning-400",
-    destructive: "text-destructive"
+	neutral: "text-muted-foreground",
+	accent: "text-[color:var(--tone-accent,var(--color-primary))]",
+	info: "text-info-800 dark:text-info-400",
+	success: "text-success-800 dark:text-success-400",
+	warning: "text-warning-800 dark:text-warning-400",
+	destructive: "text-destructive"
 };
+/** The same scale as icon color. */
 export const TONE_ICON = {
-    neutral: "text-muted-foreground",
-    accent: "text-[color:var(--tone-accent,var(--color-primary))]",
-    info: "text-info",
-    success: "text-success",
-    warning: "text-warning",
-    destructive: "text-destructive"
+	neutral: "text-muted-foreground",
+	accent: "text-[color:var(--tone-accent,var(--color-primary))]",
+	info: "text-info",
+	success: "text-success",
+	warning: "text-warning",
+	destructive: "text-destructive"
 };
+/** The scale as CSS colors, for the SVG dot. */
 export const TONE_COLOR = {
-    neutral: "var(--color-muted-foreground)",
-    accent: "var(--tone-accent,var(--color-primary))",
-    info: "var(--color-info)",
-    success: "var(--color-success)",
-    warning: "var(--color-warning)",
-    destructive: "var(--color-destructive)"
+	neutral: "var(--color-muted-foreground)",
+	accent: "var(--tone-accent,var(--color-primary))",
+	info: "var(--color-info)",
+	success: "var(--color-success)",
+	warning: "var(--color-warning)",
+	destructive: "var(--color-destructive)"
 };

package/dist/lib/utils.js

@@ -1,5 +1,7 @@
+// The class merge and prop types every shadcn primitive uses, kept here, not in a shared utils
+// package, so this public package installs with nothing private behind it.
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 export function cn(...inputs) {
-    return twMerge(clsx(inputs));
+	return twMerge(clsx(inputs));
 }

package/dist/onboarding/define-tours.js

@@ -1,28 +1,29 @@
 import { MAX_STEPS } from "./types.js";
 function fail(id, problem) {
-    throw new Error(`tour "${id}": ${problem}`);
+	throw new Error(`tour "${id}": ${problem}`);
 }
+/** Returns the tours as written, after checking what a typo would hide until a user hits it. */
 export function defineTours(tours) {
-    const ids = new Set();
-    for (const tour of tours){
-        const { id } = tour;
-        if (!id || !id.trim()) throw new Error("a tour needs an id");
-        if (ids.has(id)) fail(id, "its id is used twice");
-        ids.add(id);
-        if (!tour.route.startsWith("/")) fail(id, `route "${tour.route}" is not a route id`);
-        const version = tour.version ?? 1;
-        if (!Number.isInteger(version) || version < 1) fail(id, "version is a whole number from 1");
-        if (tour.kind === "intro") {
-            if (!tour.title || !tour.body) fail(id, "an intro needs a title and a body");
-            continue;
-        }
-        if (tour.steps.length < 1 || tour.steps.length > MAX_STEPS) {
-            fail(id, `has ${tour.steps.length} steps, and a tour takes 1 to ${MAX_STEPS}`);
-        }
-        tour.steps.forEach((step, i)=>{
-            if (!step.target.trim()) fail(id, `step ${i + 1} has no target`);
-            if (!step.title || !step.body) fail(id, `step ${i + 1} needs a title and a body`);
-        });
-    }
-    return tours;
+	const ids = new Set();
+	for (const tour of tours) {
+		const { id } = tour;
+		if (!id || !id.trim()) throw new Error("a tour needs an id");
+		if (ids.has(id)) fail(id, "its id is used twice");
+		ids.add(id);
+		if (!tour.route.startsWith("/")) fail(id, `route "${tour.route}" is not a route id`);
+		const version = tour.version ?? 1;
+		if (!Number.isInteger(version) || version < 1) fail(id, "version is a whole number from 1");
+		if (tour.kind === "intro") {
+			if (!tour.title || !tour.body) fail(id, "an intro needs a title and a body");
+			continue;
+		}
+		if (tour.steps.length < 1 || tour.steps.length > MAX_STEPS) {
+			fail(id, `has ${tour.steps.length} steps, and a tour takes 1 to ${MAX_STEPS}`);
+		}
+		tour.steps.forEach((step, i) => {
+			if (!step.target.trim()) fail(id, `step ${i + 1} has no target`);
+			if (!step.title || !step.body) fail(id, `step ${i + 1} needs a title and a body`);
+		});
+	}
+	return tours;
 }

package/dist/onboarding/onboarding.svelte.js

@@ -1,15 +1,19 @@
 class Onboarding {
-    hasTour = $state(false);
-    running = $state(false);
-    #replay = null;
-    bind(replay) {
-        this.#replay = replay;
-        return ()=>{
-            if (this.#replay === replay) this.#replay = null;
-        };
-    }
-    replay(tourId) {
-        return this.#replay ? this.#replay(tourId) : Promise.resolve(false);
-    }
+	/** 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/dist/onboarding/pick.js

@@ -1,16 +1,20 @@
+/** The seen version has to reach the tour's own, so bumping `version` shows it again. */
 export function isSeen(tour, seen) {
-    return (seen[tour.id] ?? 0) >= (tour.version ?? 1);
+	return (seen[tour.id] ?? 0) >= (tour.version ?? 1);
 }
 export function toursForRoute(tours, routeId) {
-    return routeId ? tours.filter((tour)=>tour.route === routeId) : [];
+	return routeId ? tours.filter((tour) => tour.route === routeId) : [];
 }
+/** The first unseen tour on a route, in the order they were defined. One per page view. */
 export function pickTour(tours, routeId, seen) {
-    return toursForRoute(tours, routeId).find((tour)=>!isSeen(tour, seen));
+	return toursForRoute(tours, routeId).find((tour) => !isSeen(tour, seen));
 }
+/** What replay starts: a named tour, or the page's first one whether or not it was seen. */
 export function pickForReplay(tours, routeId, tourId) {
-    if (tourId) return tours.find((tour)=>tour.id === tourId);
-    return toursForRoute(tours, routeId)[0];
+	if (tourId) return tours.find((tour) => tour.id === tourId);
+	return toursForRoute(tours, routeId)[0];
 }
+/** Keeps the steps whose target is on the page. A tour with none left starts nothing. */
 export function keepFoundSteps(steps, exists) {
-    return steps.filter((step)=>exists(step.target));
+	return steps.filter((step) => exists(step.target));
 }

package/dist/onboarding/stores.js

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

package/dist/onboarding/wait.js

@@ -1,25 +1,26 @@
-const find = (selector)=>document.querySelector(selector);
+const find = (selector) => document.querySelector(selector);
+/** Resolves with the element once the selector matches, or null after `timeoutMs` or an abort. */
 export function waitForElement(selector, timeoutMs, signal) {
-    return new Promise((resolve)=>{
-        const now = find(selector);
-        if (now) return resolve(now);
-        if (signal?.aborted) return resolve(null);
-        const finish = (el)=>{
-            observer.disconnect();
-            clearTimeout(timer);
-            signal?.removeEventListener("abort", onAbort);
-            resolve(el);
-        };
-        const onAbort = ()=>finish(null);
-        const observer = new MutationObserver(()=>{
-            const el = find(selector);
-            if (el) finish(el);
-        });
-        const timer = setTimeout(()=>finish(find(selector)), timeoutMs);
-        observer.observe(document.documentElement, {
-            childList: true,
-            subtree: true
-        });
-        signal?.addEventListener("abort", onAbort);
-    });
+	return new Promise((resolve) => {
+		const now = find(selector);
+		if (now) return resolve(now);
+		if (signal?.aborted) return resolve(null);
+		const finish = (el) => {
+			observer.disconnect();
+			clearTimeout(timer);
+			signal?.removeEventListener("abort", onAbort);
+			resolve(el);
+		};
+		const onAbort = () => finish(null);
+		const observer = new MutationObserver(() => {
+			const el = find(selector);
+			if (el) finish(el);
+		});
+		const timer = setTimeout(() => finish(find(selector)), timeoutMs);
+		observer.observe(document.documentElement, {
+			childList: true,
+			subtree: true
+		});
+		signal?.addEventListener("abort", onAbort);
+	});
 }

package/dist/panel/side-panel-types.js

@@ -0,0 +1 @@
+export {};