@heyramzi/ui 2.11.0 → 2.11.2

package/dist/charts/dashboard/chart.js

@@ -1 +1,5 @@
+/**
+* The height of every dashboard chart, half width or full, so a trend is one
+* size on every page.
+*/
 export const CHART_HEIGHT = 240;

package/dist/charts/dashboard/data-table.js

@@ -1,7 +1,18 @@
+/**
+* The one skin for a dashboard data table. Classes, not a component: two
+* dashboards share nothing but the look, and each drew its own slightly different one.
+*/
+// Heads aren't uppercase. `SectionLabel` already is, and a nine-column head in
+// the same style fights the panel title and reads worse where density matters.
 export const dataTableClass = "w-full text-sm";
 export const dataTheadClass = "bg-muted/40 text-xs text-muted-foreground";
 export const dataThClass = "px-4 py-2.5 text-left font-medium";
+/** A head over numbers. Right-aligned to the digits under it. */
 export const dataThNumClass = "px-4 py-2.5 text-right font-medium";
 export const dataTrClass = "border-b border-border transition-colors last:border-0 hover:bg-muted/40";
 export const dataTdClass = "px-4 py-2.5 align-top";
+/**
+* A cell holding a number. `tabular-nums` is required: proportional digits make
+* a spend column ragged, and then nobody can scan it.
+*/
 export const dataTdNumClass = "px-4 py-2.5 text-right align-top tabular-nums";

package/dist/charts/dashboard/windows.js

@@ -1,5 +1,10 @@
+/**
+* Day windows a strip offers: seven, thirty, ninety, the three every dataset
+* has. A page may add an option its data carries; labels translate at the
+* call site.
+*/
 export const DAY_WINDOWS = [
-    7,
-    30,
-    90
+	7,
+	30,
+	90
 ];

package/dist/charts/edge-fade.js

@@ -1,7 +1,12 @@
-export const EDGE_FADE_DEFAULT = 0.08;
+/** `true` fades this much of the width at each side. */
+export const EDGE_FADE_DEFAULT = .08;
+/**
+* Turns an `edgeFade` prop into the fraction of the width to fade at each side.
+* `false` (or 0) means no mask is rendered at all.
+*/
 export function resolveEdgeFade(value, fallback = EDGE_FADE_DEFAULT) {
-    if (value === false) return 0;
-    if (value === true || value == null) return fallback;
-    if (!Number.isFinite(value)) return 0;
-    return Math.min(0.45, Math.max(0, value));
+	if (value === false) return 0;
+	if (value === true || value == null) return fallback;
+	if (!Number.isFinite(value)) return 0;
+	return Math.min(.45, Math.max(0, value));
 }

package/dist/charts/hover-band.js

@@ -1,13 +1,18 @@
-export const HOVER_BAND_REACH = 0.8;
+/** How far the hover band reaches each side of the point, as a share of the gap to its neighbour. */
+export const HOVER_BAND_REACH = .8;
+/**
+* The hovered segment's clip, centered on the point at `xs[i]`.
+* Both sides take the shorter neighbour gap, so the dot always sits in the middle.
+*/
 export function hoverBand(xs, i, width, reach = HOVER_BAND_REACH) {
-    if (i < 0 || i >= xs.length) return null;
-    const at = xs[i];
-    const before = i > 0 ? at - xs[i - 1] : Infinity;
-    const after = i < xs.length - 1 ? xs[i + 1] - at : Infinity;
-    const gap = Math.min(before, after);
-    const half = (Number.isFinite(gap) ? gap : width) * reach;
-    return {
-        x: at - half,
-        width: half * 2
-    };
+	if (i < 0 || i >= xs.length) return null;
+	const at = xs[i];
+	const before = i > 0 ? at - xs[i - 1] : Infinity;
+	const after = i < xs.length - 1 ? xs[i + 1] - at : Infinity;
+	const gap = Math.min(before, after);
+	const half = (Number.isFinite(gap) ? gap : width) * reach;
+	return {
+		x: at - half,
+		width: half * 2
+	};
 }

package/dist/charts/index.js

@@ -8,7 +8,6 @@ export { default as TimeSeriesChart } from "../../src/charts/time-series-chart.s
 export { default as GaugeChart } from "../../src/charts/gauge-chart.svelte";
 export { default as RingChart } from "../../src/charts/ring-chart.svelte";
 export { default as Legend } from "../../src/charts/legend.svelte";
-export { } from "../../src/charts/reference-line.svelte";
 export { default as StatCard } from "../../src/charts/stat-card.svelte";
 export { default as NumberChart } from "../../src/charts/number-chart.svelte";
 export { default as Figure } from "../../src/charts/figure.svelte";

package/dist/charts/motion.js

@@ -1,15 +1,19 @@
 import { cubicInOut } from "svelte/easing";
+/** Mirrors `--chart-motion-reveal` in charts.css, for when no element is mounted to read it from. */
 export const REVEAL_MS = 1100;
+/** Rescales the axes when the data changes; the first render never animates. */
 export const DOMAIN_MOTION = {
-    type: "tween",
-    duration: 500,
-    easing: cubicInOut
+	type: "tween",
+	duration: 500,
+	easing: cubicInOut
 };
+/** The tooltip sits beside the hovered point at the top of the plot, so it never chases the cursor. */
 export const TOOLTIP_TOP = 8;
 export const TOOLTIP_GAP = 16;
+/** A chart duration token in ms, read off a mounted element; both `ms` and `s` parse. */
 export function tokenMs(el, name, fallback) {
-    const raw = getComputedStyle(el).getPropertyValue(name).trim();
-    const n = Number.parseFloat(raw);
-    if (Number.isNaN(n)) return fallback;
-    return raw.endsWith("ms") ? n : n * 1000;
+	const raw = getComputedStyle(el).getPropertyValue(name).trim();
+	const n = Number.parseFloat(raw);
+	if (Number.isNaN(n)) return fallback;
+	return raw.endsWith("ms") ? n : n * 1e3;
 }

package/dist/charts/primitives/chart-utils.js

@@ -1,22 +1,22 @@
 import { getContext, setContext } from "svelte";
 export const THEMES = {
-    light: "",
-    dark: ".dark"
+	light: "",
+	dark: ".dark"
 };
 export function getPayloadConfigFromPayload(config, item, key) {
-    if (typeof item !== "object" || item === null) return undefined;
-    let configLabelKey = key;
-    if (item.key === key) {
-        configLabelKey = item.key;
-    } else if (item.label === key) {
-        configLabelKey = item.label;
-    }
-    return configLabelKey in config ? config[configLabelKey] : config[key];
+	if (typeof item !== "object" || item === null) return undefined;
+	let configLabelKey = key;
+	if (item.key === key) {
+		configLabelKey = item.key;
+	} else if (item.label === key) {
+		configLabelKey = item.label;
+	}
+	return configLabelKey in config ? config[configLabelKey] : config[key];
 }
 const chartContextKey = Symbol("chart-context");
 export function setChartContext(value) {
-    return setContext(chartContextKey, value);
+	return setContext(chartContextKey, value);
 }
 export function useChart() {
-    return getContext(chartContextKey);
+	return getContext(chartContextKey);
 }

package/dist/components/copy/clipboard.js

@@ -1,38 +1,38 @@
+/**
+* The one write to the clipboard. A rejected permission, a missing gesture and
+* an insecure origin get one answer: false. The caller decides what to show.
+*/
+/** Plain text. Returns false when the browser refused the write. */
 export async function copyText(value) {
-    try {
-        await navigator.clipboard.writeText(value);
-        return true;
-    } catch  {
-        return false;
-    }
+	try {
+		await navigator.clipboard.writeText(value);
+		return true;
+	} catch {
+		return false;
+	}
 }
+/**
+* HTML plus a plain-text twin: Gmail keeps the formatting, Cmd+Shift+V stays
+* readable. Falls back to plain text.
+*/
 export async function copyRichText(html, plainText) {
-    const text = plainText ?? htmlToPlainText(html);
-    try {
-        await navigator.clipboard.write([
-            new ClipboardItem({
-                "text/html": new Blob([
-                    html
-                ], {
-                    type: "text/html"
-                }),
-                "text/plain": new Blob([
-                    text
-                ], {
-                    type: "text/plain"
-                })
-            })
-        ]);
-        return true;
-    } catch  {
-        return copyText(text);
-    }
+	const text = plainText ?? htmlToPlainText(html);
+	try {
+		await navigator.clipboard.write([new ClipboardItem({
+			"text/html": new Blob([html], { type: "text/html" }),
+			"text/plain": new Blob([text], { type: "text/plain" })
+		})]);
+		return true;
+	} catch {
+		return copyText(text);
+	}
 }
+/** The plain-text twin of an HTML fragment. */
 export function htmlToPlainText(html) {
-    if (typeof document === "undefined") {
-        return html.replace(/<br\s*\/?>/gi, "\n").replace(/<\/p>/gi, "\n\n").replace(/<\/li>/gi, "\n").replace(/<li>/gi, "• ").replace(/<[^>]+>/g, "").replace(/&nbsp;/g, " ").replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").trim();
-    }
-    const div = document.createElement("div");
-    div.innerHTML = html;
-    return div.textContent || div.innerText || "";
+	if (typeof document === "undefined") {
+		return html.replace(/<br\s*\/?>/gi, "\n").replace(/<\/p>/gi, "\n\n").replace(/<\/li>/gi, "\n").replace(/<li>/gi, "• ").replace(/<[^>]+>/g, "").replace(/&nbsp;/g, " ").replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").trim();
+	}
+	const div = document.createElement("div");
+	div.innerHTML = html;
+	return div.textContent || div.innerText || "";
 }

package/dist/components/copy/copied.svelte.js

@@ -1,26 +1,34 @@
 import { copyText } from "./clipboard.js";
+/**
+* The copied flag for a surface whose affordance is a whole row or card rather
+* than a `CopyButton`. Keyed, so one instance serves a list of rows.
+*/
 export class Copied {
-    key = $state(null);
-    #timer = null;
-    is(key = "") {
-        return this.key === key;
-    }
-    async copy(value, key = "", hold = 1400) {
-        if (!await copyText(value)) return false;
-        this.mark(key, hold);
-        return true;
-    }
-    mark(key = "", hold = 1400) {
-        this.key = key;
-        if (this.#timer) clearTimeout(this.#timer);
-        this.#timer = setTimeout(()=>{
-            this.key = null;
-            this.#timer = null;
-        }, hold);
-    }
-    reset() {
-        if (this.#timer) clearTimeout(this.#timer);
-        this.#timer = null;
-        this.key = null;
-    }
+	/** The key that last copied, or null. Empty string when a surface has one. */
+	key = $state(null);
+	#timer = null;
+	/** True when anything copied; with a key, true only for that one. */
+	is(key = "") {
+		return this.key === key;
+	}
+	/** Writes, then holds the check for `hold` ms. False when the write failed. */
+	async copy(value, key = "", hold = 1400) {
+		if (!await copyText(value)) return false;
+		this.mark(key, hold);
+		return true;
+	}
+	/** The confirmation without the write, for a copy this class did not make. */
+	mark(key = "", hold = 1400) {
+		this.key = key;
+		if (this.#timer) clearTimeout(this.#timer);
+		this.#timer = setTimeout(() => {
+			this.key = null;
+			this.#timer = null;
+		}, hold);
+	}
+	reset() {
+		if (this.#timer) clearTimeout(this.#timer);
+		this.#timer = null;
+		this.key = null;
+	}
 }

package/dist/components/data-table/data-table.js

@@ -1,55 +1,55 @@
 export function normalizeQuery(query) {
-    return query.trim().toLowerCase();
+	return query.trim().toLowerCase();
 }
 export function containsQuery(value, query) {
-    if (!query) return true;
-    return value?.toLowerCase().includes(query) ?? false;
+	if (!query) return true;
+	return value?.toLowerCase().includes(query) ?? false;
 }
 export function anyContainsQuery(values, query) {
-    return values.some((value)=>containsQuery(value, query));
+	return values.some((value) => containsQuery(value, query));
 }
+// ========================= FUNCTIONS
 export function toggleSort(current, key) {
-    if (current?.key !== key) return {
-        key,
-        direction: "asc"
-    };
-    if (current.direction === "asc") return {
-        key,
-        direction: "desc"
-    };
-    return null;
+	if (current?.key !== key) return {
+		key,
+		direction: "asc"
+	};
+	if (current.direction === "asc") return {
+		key,
+		direction: "desc"
+	};
+	return null;
 }
 export function sortRows(rows, sort) {
-    if (!sort) return rows;
-    const { key, direction } = sort;
-    const multiplier = direction === "asc" ? 1 : -1;
-    return [
-        ...rows
-    ].sort((a, b)=>{
-        const aVal = a[key];
-        const bVal = b[key];
-        if (aVal == null && bVal == null) return 0;
-        if (aVal == null) return 1;
-        if (bVal == null) return -1;
-        if (typeof aVal === "string" && typeof bVal === "string") {
-            return multiplier * aVal.localeCompare(bVal);
-        }
-        if (typeof aVal === "number" && typeof bVal === "number") {
-            return multiplier * (aVal - bVal);
-        }
-        return multiplier * String(aVal).localeCompare(String(bVal));
-    });
+	if (!sort) return rows;
+	const { key, direction } = sort;
+	const multiplier = direction === "asc" ? 1 : -1;
+	return [...rows].sort((a, b) => {
+		const aVal = a[key];
+		const bVal = b[key];
+		if (aVal == null && bVal == null) return 0;
+		if (aVal == null) return 1;
+		if (bVal == null) return -1;
+		if (typeof aVal === "string" && typeof bVal === "string") {
+			return multiplier * aVal.localeCompare(bVal);
+		}
+		if (typeof aVal === "number" && typeof bVal === "number") {
+			return multiplier * (aVal - bVal);
+		}
+		return multiplier * String(aVal).localeCompare(String(bVal));
+	});
 }
 export function paginateRows(rows, page, pageSize) {
-    const start = (page - 1) * pageSize;
-    return rows.slice(start, start + pageSize);
+	const start = (page - 1) * pageSize;
+	return rows.slice(start, start + pageSize);
 }
 export function totalPages(total, pageSize) {
-    return Math.max(1, Math.ceil(total / pageSize));
+	return Math.max(1, Math.ceil(total / pageSize));
 }
 export function formatCount(visible, total, label) {
-    const singular = label.endsWith("s") ? label.slice(0, -1) : label;
-    const noun = total === 1 ? singular : label;
-    if (visible === total) return `${total.toLocaleString()} ${noun}`;
-    return `${visible.toLocaleString()} of ${total.toLocaleString()} ${noun}`;
+	const singular = label.endsWith("s") ? label.slice(0, -1) : label;
+	// The noun agrees with the total: "0 of 1 item", not "0 of 1 items".
+	const noun = total === 1 ? singular : label;
+	if (visible === total) return `${total.toLocaleString()} ${noun}`;
+	return `${visible.toLocaleString()} of ${total.toLocaleString()} ${noun}`;
 }

package/dist/components/docs/index.js

@@ -1,3 +1,7 @@
+/**
+* The documentation anatomy: one page component and the contents rail inside it.
+* A surface supplies a title and a body, and never lays a document out itself.
+*/
 export { default as DocPage } from "../../../src/components/docs/doc-page.svelte";
 export { default as OnThisPage } from "../../../src/components/docs/on-this-page.svelte";
 export { ScrollSpy, READ_LINE } from "./scroll-spy.svelte.js";

package/dist/components/docs/scroll-spy.svelte.js

@@ -1,71 +1,76 @@
+/** How far below the scroller's top edge a heading counts as "reached" and lands. */
 export const READ_LINE = 80;
 export class ScrollSpy {
-    active = $state("");
-    #scroller = null;
-    #items = [];
-    #locate;
-    #frame = 0;
-    attach(scroller, items, locate) {
-        this.#scroller = scroller;
-        this.#items = items;
-        this.#locate = locate;
-        if (!scroller || items.length === 0) {
-            this.active = "";
-            return ()=>{};
-        }
-        const schedule = ()=>{
-            this.#frame ||= requestAnimationFrame(()=>{
-                this.#frame = 0;
-                this.update();
-            });
-        };
-        scroller.addEventListener("scroll", schedule, {
-            passive: true
-        });
-        const observer = new ResizeObserver(schedule);
-        observer.observe(scroller);
-        for (const child of scroller.children)observer.observe(child);
-        this.update();
-        return ()=>{
-            scroller.removeEventListener("scroll", schedule);
-            observer.disconnect();
-            if (this.#frame) cancelAnimationFrame(this.#frame);
-            this.#frame = 0;
-        };
-    }
-    topOf(id) {
-        const scroller = this.#scroller;
-        if (!scroller) return null;
-        if (this.#locate) return this.#locate(id);
-        const el = scroller.querySelector(`#${CSS.escape(id)}`);
-        if (!el) return null;
-        return el.getBoundingClientRect().top - scroller.getBoundingClientRect().top + scroller.scrollTop;
-    }
-    update() {
-        const scroller = this.#scroller;
-        if (!scroller || this.#items.length === 0) return;
-        const atEnd = scroller.scrollTop + scroller.clientHeight >= scroller.scrollHeight - 2;
-        if (atEnd && scroller.scrollTop > 0) {
-            this.active = this.#items[this.#items.length - 1].id;
-            return;
-        }
-        const line = scroller.scrollTop + READ_LINE + 1;
-        let current = this.#items[0].id;
-        for (const item of this.#items){
-            const top = this.topOf(item.id);
-            if (top !== null && top <= line) current = item.id;
-        }
-        this.active = current;
-    }
-    jump(id) {
-        const scroller = this.#scroller;
-        const top = this.topOf(id);
-        if (!scroller || top === null) return;
-        const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-        this.active = id;
-        scroller.scrollTo({
-            top: Math.max(0, top - READ_LINE),
-            behavior: reduced ? "auto" : "smooth"
-        });
-    }
+	active = $state("");
+	#scroller = null;
+	#items = [];
+	#locate;
+	#frame = 0;
+	/** Point the spy at a scroller and a list. Returns the cleanup. */
+	attach(scroller, items, locate) {
+		this.#scroller = scroller;
+		this.#items = items;
+		this.#locate = locate;
+		if (!scroller || items.length === 0) {
+			this.active = "";
+			return () => {};
+		}
+		const schedule = () => {
+			this.#frame ||= requestAnimationFrame(() => {
+				this.#frame = 0;
+				this.update();
+			});
+		};
+		scroller.addEventListener("scroll", schedule, { passive: true });
+		const observer = new ResizeObserver(schedule);
+		observer.observe(scroller);
+		// A document that grows after load (a diagram, a chart) moves every
+		// heading below it, so watch the content too.
+		for (const child of scroller.children) observer.observe(child);
+		this.update();
+		return () => {
+			scroller.removeEventListener("scroll", schedule);
+			observer.disconnect();
+			if (this.#frame) cancelAnimationFrame(this.#frame);
+			this.#frame = 0;
+		};
+	}
+	topOf(id) {
+		const scroller = this.#scroller;
+		if (!scroller) return null;
+		if (this.#locate) return this.#locate(id);
+		const el = scroller.querySelector(`#${CSS.escape(id)}`);
+		if (!el) return null;
+		return el.getBoundingClientRect().top - scroller.getBoundingClientRect().top + scroller.scrollTop;
+	}
+	update() {
+		const scroller = this.#scroller;
+		if (!scroller || this.#items.length === 0) return;
+		// At the very bottom the last heading wins, or a short final section could
+		// never be the current one.
+		const atEnd = scroller.scrollTop + scroller.clientHeight >= scroller.scrollHeight - 2;
+		if (atEnd && scroller.scrollTop > 0) {
+			this.active = this.#items[this.#items.length - 1].id;
+			return;
+		}
+		const line = scroller.scrollTop + READ_LINE + 1;
+		let current = this.#items[0].id;
+		for (const item of this.#items) {
+			const top = this.topOf(item.id);
+			if (top !== null && top <= line) current = item.id;
+		}
+		this.active = current;
+	}
+	/** Scroll so the heading lands on the read line, instant under reduced motion. */
+	jump(id) {
+		const scroller = this.#scroller;
+		const top = this.topOf(id);
+		if (!scroller || top === null) return;
+		const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+		this.active = id;
+		scroller.scrollTo({
+			top: Math.max(0, top - READ_LINE),
+			behavior: reduced ? "auto" : "smooth"
+		});
+	}
 }

package/dist/components/list-page/filter-section.js

@@ -1,4 +1,7 @@
 import { cn } from "../../lib/utils.js";
+// The header for each control group in a toolbar popover, in one place so
+// sections can't drift in size or weight.
+// `first:` drops the leading header's top padding, since the popover pads itself.
 export function filterSectionClass(className) {
-    return cn("px-2 pt-2 pb-1 text-[11px] font-medium uppercase tracking-wide text-muted-foreground first:pt-1", className);
+	return cn("px-2 pt-2 pb-1 text-[11px] font-medium uppercase tracking-wide text-muted-foreground first:pt-1", className);
 }

package/dist/components/list-page/index.js

@@ -19,6 +19,8 @@ export { filterSectionClass } from "./filter-section.js";
 export { default as GroupedList } from "../../../src/components/list-page/grouped-list.svelte";
 export { default as ListPageShell } from "../../../src/components/list-page/list-page-shell.svelte";
 export { default as MasterDetail } from "../../../src/components/list-page/master-detail.svelte";
+// The segmented control isn't re-exported here. Two import paths drifted, so
+// its one home is `@heyramzi/ui/components/segmented`.
 export { default as ToolbarSearch } from "../../../src/components/toolbar/toolbar-search.svelte";
 export { toolbarTriggerClass } from "../toolbar/toolbar-trigger.js";
 export { listTable } from "./list-table.js";

package/dist/components/list-page/list-table.js

@@ -1,5 +1,10 @@
 import { cn } from "../../lib/utils.js";
+/**
+* The list-page table rhythm, Attio's: one 40px row, a hairline under each, a flat hover.
+*/
 export const listTable = {
-    headRow: (className)=>cn("hover:translate-y-0 hover:bg-transparent hover:shadow-none [&>th]:h-9 [&>th]:border-b [&>th]:border-border", className),
-    row: (className)=>cn("border-b border-border/50 last:border-b-0 hover:translate-y-0 hover:bg-muted/40 hover:shadow-none [&>td]:h-10 [&>td]:py-0", className)
+	/** The header row: 36px, a hairline under it. On the cells: `thead` zeroes its row's border. */
+	headRow: (className) => cn("hover:translate-y-0 hover:bg-transparent hover:shadow-none [&>th]:h-9 [&>th]:border-b [&>th]:border-border", className),
+	/** A body row. The shared row lifts on hover; a flush list row does not. */
+	row: (className) => cn("border-b border-border/50 last:border-b-0 hover:translate-y-0 hover:bg-muted/40 hover:shadow-none [&>td]:h-10 [&>td]:py-0", className)
 };

package/dist/components/list-page/queue-rail.js

@@ -1,3 +1,17 @@
+/**
+* The rail surface of a queue page, passed to `MasterDetail`'s `railClass`.
+* A class, not a wrapper: the shell's `<aside>` already owns the scroll height.
+*/
+// Copies of this string drifted to `rounded-lg`, the control radius, not the container one.
 export const queueRailClass = "flex flex-col overflow-hidden rounded-xl border border-border bg-card";
+/**
+* The rail column track, passed to `MasterDetail`'s `railWidth`. One page ran
+* 20px wider, so the detail pane jumped between pages.
+*/
+// 280px fits a two-line thread title. Past 340px the list competes with the record.
 export const queueRailWidth = "minmax(280px, 340px)";
+/**
+* Context key for the pane `MasterDetail` shows on a phone. Picking a row moves
+* to the record, so `RailRow` reads this instead of each page passing a callback.
+*/
 export const MASTER_DETAIL_PANE = Symbol("master-detail-pane");

package/dist/components/list-page/section-host.js

@@ -1,8 +1,10 @@
 import { getContext, setContext } from "svelte";
+// WHY context: the shell decides the strip once and ninety pages draw it, so a prop on every page would be ninety edits.
 const KEY = Symbol("list-page.section-host");
+/** Call once in the layout that owns the section strip. */
 export function setSectionHost(host) {
-    setContext(KEY, host);
+	setContext(KEY, host);
 }
 export function getSectionHost() {
-    return getContext(KEY);
+	return getContext(KEY);
 }

package/dist/components/list-page/step.js

@@ -1,5 +1,6 @@
+/** The id `by` rows away from `current`, or null at either end or when `current` isn't listed. */
 export function stepTo(ids, current, by) {
-    const index = current ? ids.indexOf(current) : -1;
-    if (index < 0) return null;
-    return ids[index + by] ?? null;
+	const index = current ? ids.indexOf(current) : -1;
+	if (index < 0) return null;
+	return ids[index + by] ?? null;
 }

package/dist/components/list-page/types.js

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