@shadow-js/ui 1.0.1 → 1.0.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 1.0.2
+
+### Fixed
+
+- `Carousel` runs the `onPointerEnter`, `onPointerLeave`, `onFocusIn` and `onFocusOut` handlers you pass (they were dropped), takes `[handler, data]` tuples for its handlers and for `InputGroupAddon`'s `onClick`, and never starts autoplay with a `NaN` or infinite interval.
+- A carousel whose slides come and go (a list that shrinks, is filtered or is replaced) counts only the slides that exist: the "n of N" names, the indicators, `scrollSnapList()` and the current index follow the list, and `reInit` fires once after the change settles.
+- `ChartContainer` falls back to its default width for a `NaN` or infinite `initialWidth`, and a `ResizableHandle` that unmounts mid-drag stops listening to the pointer.
+- `shadow-ui add` refuses to write through a dangling symbolic link that points outside the project, reads `package.json`, `components.json` and tsconfig files that start with a byte order mark, reports a tsconfig that is not JSON as an invalid file instead of crashing, and treats the end of input (Ctrl-D) at a prompt as "no" instead of exiting with code 13.
+- `input-group` and `carousel` now import `callHandler` and `mergeElementProps` from `@shadow-js/primitives`; run `shadow-ui diff` to see the update for components you copied earlier.
+- `shadow-ui add --path <dir>` writes the imports between the copied ui components as `./name` when `<dir>` is not the directory the `ui` alias names (they used to import from the alias, a directory that does not hold them); with the default directory nothing changes.
+- `shadow-ui add` and `diff` keep at most 16 million array cells (64 MB) while diffing; two files that share almost nothing become one replacement instead of allocating gigabytes.
+- `ResizablePanelGroup` follows its panels: a panel that mounts after the first render takes its place in document order and a share of the 100 percent, a panel that unmounts gives its share back, and the handles keep resizing the panels on both sides of them. A remembered layout is brought inside the panels' `minSize` and `maxSize` and scaled to sum to 100 (one with a negative, infinite or missing size is ignored).
+- `ResizablePanelGroup`, `ResizablePanel` and `ResizableHandle` are tested to call a `ref` the application passes next to their own (they already did; the test pins it).
+- `shadow-ui add` can no longer write outside the project through a dangling relative symlink inside a linked folder: the path guard resolves the link's target from the folder's real place, as the operating system does, instead of from the folder as written.
+
 ## 1.0.1
 
 ### Changed

package/dist/cli.mjs

@@ -1,9 +1,9 @@
 #!/usr/bin/env node
 import { spawn } from "node:child_process";
 import { basename, dirname, extname, isAbsolute, join, relative, resolve, sep } from "node:path";
-import { createInterface } from "node:readline/promises";
-import { existsSync, mkdirSync, readFileSync, realpathSync, rmSync, writeFileSync } from "node:fs";
+import { existsSync, mkdirSync, readFileSync, readlinkSync, realpathSync, rmSync, writeFileSync } from "node:fs";
 import { parseArgs } from "node:util";
+import { createInterface } from "node:readline/promises";
 import { fileURLToPath } from "node:url";
 // src/cli/fs.ts
 /**
@@ -11,6 +11,38 @@ import { fileURLToPath } from "node:url";
 * directory or an in-memory tree, and so every path goes through one place.
 * @packageDocumentation
 */
+/** Symbolic links followed while resolving one path; the same bound the operating system uses. */
+const MAX_LINK_HOPS = 40;
+/** Whether a failed file call means "nothing is there" (or a file stands where a directory should). */
+function isMissing(error) {
+	const code = error.code;
+	return code === "ENOENT" || code === "ENOTDIR";
+}
+/**
+* The real path of `path`, where the part that does not exist yet is kept as written. A symbolic
+* link whose target is missing is followed to that target: a write through it would create the
+* target, so the guard has to see where it is.
+*/
+function resolveReal(path, hops) {
+	try {
+		return realpathSync(path);
+	} catch (error) {
+		if (!isMissing(error)) throw error;
+	}
+	let link;
+	try {
+		link = readlinkSync(path);
+	} catch (error) {
+		if (!isMissing(error) && error.code !== "EINVAL") throw error;
+	}
+	if (link !== void 0) {
+		if (hops >= MAX_LINK_HOPS) throw Object.assign(/* @__PURE__ */ new Error(`Too many symbolic links: ${path}`), { code: "ELOOP" });
+		return resolveReal(resolve(resolveReal(dirname(path), hops + 1), link), hops + 1);
+	}
+	const parent = dirname(path);
+	if (parent === path) return path;
+	return join(resolveReal(parent, hops), basename(path));
+}
 /**
 * The real filesystem.
 *
@@ -26,7 +58,7 @@ function nodeFs() {
 		exists: (path) => existsSync(path),
 		read(path) {
 			try {
-				return readFileSync(path, "utf8");
+				return readFileSync(path, "utf8").replace(/^\uFEFF/, "");
 			} catch (error) {
 				if (error.code === "ENOENT") return void 0;
 				throw error;
@@ -40,15 +72,7 @@ function nodeFs() {
 			rmSync(path, { force: true });
 		},
 		realpath(path) {
-			const tail = [];
-			let current = path;
-			while (!existsSync(current)) {
-				const parent = dirname(current);
-				if (parent === current) return path;
-				tail.unshift(basename(current));
-				current = parent;
-			}
-			return join(realpathSync(current), ...tail);
+			return resolveReal(path, 0);
 		}
 	};
 }
@@ -210,25 +234,37 @@ function installCrashHandlers(argv) {
 	process.on("uncaughtException", crash);
 	process.on("unhandledRejection", crash);
 }
-/** The edit script turning `a` into `b`; one big replacement when the texts are too large. */
-function edits(a, b) {
-	const n = a.length;
-	const m = b.length;
-	const max = n + m;
-	if (max > 2e4) return [...a.map((line) => ({
+/** The whole of `a` deleted and the whole of `b` inserted: always correct, never minimal. */
+function replacement(a, b) {
+	return [...a.map((line) => ({
 		kind: "delete",
 		line
 	})), ...b.map((line) => ({
 		kind: "insert",
 		line
 	}))];
+}
+/** The edit script turning `a` into `b`; one big replacement when the texts are too large or too different. */
+function edits(a, b) {
+	const n = a.length;
+	const m = b.length;
+	const max = n + m;
+	if (max > 2e4) return replacement(a, b);
 	const offset = max;
-	let frontier = new Int32Array(2 * max + 2);
+	const frontier = new Int32Array(2 * max + 2);
+	/** The frontier before each round, only the diagonals the next round can read: `[offset - d - 1, offset + d + 1]`. */
 	const trace = [];
+	let kept = 0;
 	let reached = -1;
 	for (let d = 0; d <= max && reached === -1; d += 1) {
-		trace.push(frontier.slice());
-		const next = frontier.slice();
+		const from = Math.max(0, offset - d - 1);
+		const cells = frontier.slice(from, Math.min(frontier.length, offset + d + 2));
+		kept += cells.length;
+		if (kept > 16e6) return replacement(a, b);
+		trace.push({
+			from,
+			cells
+		});
 		for (let k = -d; k <= d; k += 2) {
 			let x;
 			const below = frontier[offset + k - 1] ?? 0;
@@ -240,24 +276,24 @@ function edits(a, b) {
 				x += 1;
 				y += 1;
 			}
-			next[offset + k] = x;
+			frontier[offset + k] = x;
 			if (x >= n && y >= m) {
 				reached = d;
 				break;
 			}
 		}
-		frontier = next;
 	}
 	const result = [];
 	let x = n;
 	let y = m;
 	for (let d = reached; d > 0; d -= 1) {
-		const previous = trace[d] ?? /* @__PURE__ */ new Int32Array(0);
+		const previous = trace[d];
+		const at = (index) => previous === void 0 ? 0 : previous.cells[index - previous.from] ?? 0;
 		const k = x - y;
-		const below = previous[offset + k - 1] ?? 0;
-		const above = previous[offset + k + 1] ?? 0;
+		const below = at(offset + k - 1);
+		const above = at(offset + k + 1);
 		const previousK = k === -d || k !== d && below < above ? k + 1 : k - 1;
-		const previousX = previous[offset + previousK] ?? 0;
+		const previousX = at(offset + previousK);
 		const previousY = previousX - previousK;
 		while (x > previousX && y > previousY) {
 			x -= 1;
@@ -371,6 +407,186 @@ function unifiedDiff(before, after, labels, context = 3) {
 		...hunks
 	].join("\n");
 }
+// src/cli/schema.ts
+/**
+* The base colors, in documentation order.
+* @since 1.0.0
+*
+* @internal Not exported from `@shadow-js/ui`: part of the shadow-ui command, whose public surface is the CLI.
+*/
+const BASE_COLORS = [
+	"neutral",
+	"zinc",
+	"slate",
+	"stone",
+	"gray"
+];
+/**
+* The default aliases (shadcn's).
+* @since 1.0.0
+*
+* @internal Not exported from `@shadow-js/ui`: part of the shadow-ui command, whose public surface is the CLI.
+*/
+const DEFAULT_ALIASES = {
+	components: "@/components",
+	ui: "@/components/ui",
+	lib: "@/lib",
+	utils: "@/lib/utils",
+	hooks: "@/hooks"
+};
+/** Registry item names are kebab-case; nothing else may reach a file path. */
+const NAME_PATTERN = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
+/** A file name inside `registry/<name>/`. */
+const FILE_PATTERN = /^[A-Za-z0-9][A-Za-z0-9._-]*$/;
+/**
+* Whether `name` is a valid registry item name.
+*
+* @param name Any string.
+* @returns `true` for kebab-case names such as `dropdown-menu`.
+* @example
+* isValidItemName("../etc/passwd"); // false
+* @since 1.0.0
+*
+* @internal Not exported from `@shadow-js/ui`: part of the shadow-ui command, whose public surface is the CLI.
+*/
+function isValidItemName(name) {
+	return NAME_PATTERN.test(name);
+}
+/**
+* Thrown for malformed registry or configuration data.
+* @since 1.0.0
+*
+* @internal Not exported from `@shadow-js/ui`: part of the shadow-ui command, whose public surface is the CLI.
+*/
+var SchemaError = class extends Error {
+	/** The stable code `--json` prints. */
+	code = "SHADOW_UI_INVALID_FILE";
+	constructor(message) {
+		super(message);
+		this.name = "SchemaError";
+	}
+};
+function record(value, where) {
+	if (typeof value !== "object" || value === null || Array.isArray(value)) throw new SchemaError(`${where} must be an object`);
+	return value;
+}
+function text(value, where) {
+	if (typeof value !== "string" || value === "") throw new SchemaError(`${where} must be a string`);
+	return value;
+}
+function strings(value, where) {
+	if (!Array.isArray(value)) throw new SchemaError(`${where} must be an array`);
+	return value.map((entry, index) => text(entry, `${where}[${index}]`));
+}
+function itemType(value, where) {
+	if (value === "ui" || value === "lib" || value === "hook") return value;
+	throw new SchemaError(`${where} must be "ui", "lib" or "hook"`);
+}
+function parseItem(value, index) {
+	const where = `items[${index}]`;
+	const item = record(value, where);
+	const name = text(item["name"], `${where}.name`);
+	if (!isValidItemName(name)) throw new SchemaError(`${where}.name "${name}" is not a valid name`);
+	const files = item["files"];
+	if (!Array.isArray(files) || files.length === 0) throw new SchemaError(`${where}.files must be a non-empty array`);
+	const dependencies = record(item["dependencies"], `${where}.dependencies`);
+	const tailwind = record(item["tailwind"], `${where}.tailwind`);
+	return {
+		name,
+		type: itemType(item["type"], `${where}.type`),
+		title: text(item["title"], `${where}.title`),
+		description: text(item["description"], `${where}.description`),
+		files: files.map((file, fileIndex) => {
+			const entry = record(file, `${where}.files[${fileIndex}]`);
+			const path = text(entry["path"], `${where}.files[${fileIndex}].path`);
+			const segments = path.split("/");
+			const [root, folder, base] = segments;
+			if (segments.length !== 3 || root !== "registry" || folder !== name || base === void 0 || !FILE_PATTERN.test(base)) throw new SchemaError(`${where}.files[${fileIndex}].path "${path}" must be registry/${name}/<file>`);
+			return {
+				path,
+				type: itemType(entry["type"], `${where}.files[${fileIndex}].type`)
+			};
+		}),
+		registryDependencies: strings(item["registryDependencies"], `${where}.registryDependencies`),
+		dependencies: Object.fromEntries(Object.entries(dependencies).map(([pkg, version]) => [pkg, text(version, `${where}.dependencies.${pkg}`)])),
+		exports: strings(item["exports"], `${where}.exports`),
+		primitives: strings(item["primitives"], `${where}.primitives`),
+		tailwind: {
+			tokens: strings(tailwind["tokens"], `${where}.tailwind.tokens`),
+			animations: tailwind["animations"] === true
+		}
+	};
+}
+/**
+* Validates parsed `registry.json` data.
+*
+* @param value The parsed JSON.
+* @returns The typed index.
+* @throws SchemaError naming the first malformed field.
+* @example
+* const index = parseRegistryIndex(JSON.parse(readFileSync("registry.json", "utf8")));
+* @since 1.0.0
+*
+* @internal Not exported from `@shadow-js/ui`: part of the shadow-ui command, whose public surface is the CLI.
+*/
+function parseRegistryIndex(value) {
+	const root = record(value, "registry");
+	const items = root["items"];
+	if (!Array.isArray(items)) throw new SchemaError("registry.items must be an array");
+	const parsed = items.map(parseItem);
+	const seen = /* @__PURE__ */ new Set();
+	for (const item of parsed) {
+		if (seen.has(item.name)) throw new SchemaError(`registry has two items named "${item.name}"`);
+		seen.add(item.name);
+	}
+	return {
+		name: text(root["name"], "registry.name"),
+		version: text(root["version"], "registry.version"),
+		frameworkDependencies: strings(root["frameworkDependencies"], "registry.frameworkDependencies"),
+		items: parsed
+	};
+}
+/**
+* Validates parsed `components.json` data.
+*
+* @param value The parsed JSON.
+* @returns The typed configuration, with defaults for missing aliases.
+* @throws SchemaError naming the first malformed field.
+* @example
+* const config = parseComponentsConfig(JSON.parse(readFileSync("components.json", "utf8")));
+* @since 1.0.0
+*
+* @internal Not exported from `@shadow-js/ui`: part of the shadow-ui command, whose public surface is the CLI.
+*/
+function parseComponentsConfig(value) {
+	const root = record(value, "components.json");
+	const tailwind = record(root["tailwind"], "components.json tailwind");
+	const baseColor = tailwind["baseColor"] ?? "neutral";
+	if (!BASE_COLORS.includes(baseColor)) throw new SchemaError(`components.json tailwind.baseColor must be one of ${BASE_COLORS.join(", ")}`);
+	const given = root["aliases"] === void 0 ? {} : record(root["aliases"], "components.json aliases");
+	const alias = (key) => {
+		const entry = given[key];
+		if (entry === void 0) return DEFAULT_ALIASES[key];
+		const aliasText = text(entry, `components.json aliases.${key}`);
+		if (aliasText.includes("..") || /\s/.test(aliasText)) throw new SchemaError(`components.json aliases.${key} "${aliasText}" is not a valid alias`);
+		return aliasText;
+	};
+	const framework = root["framework"];
+	return {
+		framework: framework === "vite" || framework === "dusk" ? framework : "unknown",
+		tailwind: {
+			css: text(tailwind["css"], "components.json tailwind.css"),
+			baseColor
+		},
+		aliases: {
+			components: alias("components"),
+			ui: alias("ui"),
+			lib: alias("lib"),
+			utils: alias("utils"),
+			hooks: alias("hooks")
+		}
+	};
+}
 // src/cli/paths.ts
 /**
 * Path handling: reading `tsconfig` path aliases, mapping an import alias to a directory, and the
@@ -477,7 +693,14 @@ function readPathMappings(fs, root) {
 	for (const name of ["tsconfig.json", "tsconfig.app.json"]) {
 		const text = fs.read(join(root, name));
 		if (text === void 0) continue;
-		const options = asRecord(asRecord(parseJsonc(text))?.["compilerOptions"]);
+		let parsed;
+		try {
+			parsed = parseJsonc(text);
+		} catch (error) {
+			if (error instanceof SyntaxError) throw new SchemaError(`${name} is not valid JSON: ${error.message}`);
+			throw error;
+		}
+		const options = asRecord(asRecord(parsed)?.["compilerOptions"]);
 		const paths = asRecord(options?.["paths"]);
 		if (paths === void 0) continue;
 		const base = typeof options?.["baseUrl"] === "string" ? resolve(root, options["baseUrl"]) : root;
@@ -633,186 +856,6 @@ function installCommand(manager, packages) {
 		};
 	}
 }
-// src/cli/schema.ts
-/**
-* The base colors, in documentation order.
-* @since 1.0.0
-*
-* @internal Not exported from `@shadow-js/ui`: part of the shadow-ui command, whose public surface is the CLI.
-*/
-const BASE_COLORS = [
-	"neutral",
-	"zinc",
-	"slate",
-	"stone",
-	"gray"
-];
-/**
-* The default aliases (shadcn's).
-* @since 1.0.0
-*
-* @internal Not exported from `@shadow-js/ui`: part of the shadow-ui command, whose public surface is the CLI.
-*/
-const DEFAULT_ALIASES = {
-	components: "@/components",
-	ui: "@/components/ui",
-	lib: "@/lib",
-	utils: "@/lib/utils",
-	hooks: "@/hooks"
-};
-/** Registry item names are kebab-case; nothing else may reach a file path. */
-const NAME_PATTERN = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
-/** A file name inside `registry/<name>/`. */
-const FILE_PATTERN = /^[A-Za-z0-9][A-Za-z0-9._-]*$/;
-/**
-* Whether `name` is a valid registry item name.
-*
-* @param name Any string.
-* @returns `true` for kebab-case names such as `dropdown-menu`.
-* @example
-* isValidItemName("../etc/passwd"); // false
-* @since 1.0.0
-*
-* @internal Not exported from `@shadow-js/ui`: part of the shadow-ui command, whose public surface is the CLI.
-*/
-function isValidItemName(name) {
-	return NAME_PATTERN.test(name);
-}
-/**
-* Thrown for malformed registry or configuration data.
-* @since 1.0.0
-*
-* @internal Not exported from `@shadow-js/ui`: part of the shadow-ui command, whose public surface is the CLI.
-*/
-var SchemaError = class extends Error {
-	/** The stable code `--json` prints. */
-	code = "SHADOW_UI_INVALID_FILE";
-	constructor(message) {
-		super(message);
-		this.name = "SchemaError";
-	}
-};
-function record(value, where) {
-	if (typeof value !== "object" || value === null || Array.isArray(value)) throw new SchemaError(`${where} must be an object`);
-	return value;
-}
-function text(value, where) {
-	if (typeof value !== "string" || value === "") throw new SchemaError(`${where} must be a string`);
-	return value;
-}
-function strings(value, where) {
-	if (!Array.isArray(value)) throw new SchemaError(`${where} must be an array`);
-	return value.map((entry, index) => text(entry, `${where}[${index}]`));
-}
-function itemType(value, where) {
-	if (value === "ui" || value === "lib" || value === "hook") return value;
-	throw new SchemaError(`${where} must be "ui", "lib" or "hook"`);
-}
-function parseItem(value, index) {
-	const where = `items[${index}]`;
-	const item = record(value, where);
-	const name = text(item["name"], `${where}.name`);
-	if (!isValidItemName(name)) throw new SchemaError(`${where}.name "${name}" is not a valid name`);
-	const files = item["files"];
-	if (!Array.isArray(files) || files.length === 0) throw new SchemaError(`${where}.files must be a non-empty array`);
-	const dependencies = record(item["dependencies"], `${where}.dependencies`);
-	const tailwind = record(item["tailwind"], `${where}.tailwind`);
-	return {
-		name,
-		type: itemType(item["type"], `${where}.type`),
-		title: text(item["title"], `${where}.title`),
-		description: text(item["description"], `${where}.description`),
-		files: files.map((file, fileIndex) => {
-			const entry = record(file, `${where}.files[${fileIndex}]`);
-			const path = text(entry["path"], `${where}.files[${fileIndex}].path`);
-			const segments = path.split("/");
-			const [root, folder, base] = segments;
-			if (segments.length !== 3 || root !== "registry" || folder !== name || base === void 0 || !FILE_PATTERN.test(base)) throw new SchemaError(`${where}.files[${fileIndex}].path "${path}" must be registry/${name}/<file>`);
-			return {
-				path,
-				type: itemType(entry["type"], `${where}.files[${fileIndex}].type`)
-			};
-		}),
-		registryDependencies: strings(item["registryDependencies"], `${where}.registryDependencies`),
-		dependencies: Object.fromEntries(Object.entries(dependencies).map(([pkg, version]) => [pkg, text(version, `${where}.dependencies.${pkg}`)])),
-		exports: strings(item["exports"], `${where}.exports`),
-		primitives: strings(item["primitives"], `${where}.primitives`),
-		tailwind: {
-			tokens: strings(tailwind["tokens"], `${where}.tailwind.tokens`),
-			animations: tailwind["animations"] === true
-		}
-	};
-}
-/**
-* Validates parsed `registry.json` data.
-*
-* @param value The parsed JSON.
-* @returns The typed index.
-* @throws SchemaError naming the first malformed field.
-* @example
-* const index = parseRegistryIndex(JSON.parse(readFileSync("registry.json", "utf8")));
-* @since 1.0.0
-*
-* @internal Not exported from `@shadow-js/ui`: part of the shadow-ui command, whose public surface is the CLI.
-*/
-function parseRegistryIndex(value) {
-	const root = record(value, "registry");
-	const items = root["items"];
-	if (!Array.isArray(items)) throw new SchemaError("registry.items must be an array");
-	const parsed = items.map(parseItem);
-	const seen = /* @__PURE__ */ new Set();
-	for (const item of parsed) {
-		if (seen.has(item.name)) throw new SchemaError(`registry has two items named "${item.name}"`);
-		seen.add(item.name);
-	}
-	return {
-		name: text(root["name"], "registry.name"),
-		version: text(root["version"], "registry.version"),
-		frameworkDependencies: strings(root["frameworkDependencies"], "registry.frameworkDependencies"),
-		items: parsed
-	};
-}
-/**
-* Validates parsed `components.json` data.
-*
-* @param value The parsed JSON.
-* @returns The typed configuration, with defaults for missing aliases.
-* @throws SchemaError naming the first malformed field.
-* @example
-* const config = parseComponentsConfig(JSON.parse(readFileSync("components.json", "utf8")));
-* @since 1.0.0
-*
-* @internal Not exported from `@shadow-js/ui`: part of the shadow-ui command, whose public surface is the CLI.
-*/
-function parseComponentsConfig(value) {
-	const root = record(value, "components.json");
-	const tailwind = record(root["tailwind"], "components.json tailwind");
-	const baseColor = tailwind["baseColor"] ?? "neutral";
-	if (!BASE_COLORS.includes(baseColor)) throw new SchemaError(`components.json tailwind.baseColor must be one of ${BASE_COLORS.join(", ")}`);
-	const given = root["aliases"] === void 0 ? {} : record(root["aliases"], "components.json aliases");
-	const alias = (key) => {
-		const entry = given[key];
-		if (entry === void 0) return DEFAULT_ALIASES[key];
-		const aliasText = text(entry, `components.json aliases.${key}`);
-		if (aliasText.includes("..") || /\s/.test(aliasText)) throw new SchemaError(`components.json aliases.${key} "${aliasText}" is not a valid alias`);
-		return aliasText;
-	};
-	const framework = root["framework"];
-	return {
-		framework: framework === "vite" || framework === "dusk" ? framework : "unknown",
-		tailwind: {
-			css: text(tailwind["css"], "components.json tailwind.css"),
-			baseColor
-		},
-		aliases: {
-			components: alias("components"),
-			ui: alias("ui"),
-			lib: alias("lib"),
-			utils: alias("utils"),
-			hooks: alias("hooks")
-		}
-	};
-}
 // src/cli/project.ts
 /**
 * The project the CLI works in: `components.json`, `package.json`, the stylesheet that imports
@@ -1243,6 +1286,7 @@ function dependentsOf(index, name, candidates) {
 *
 * @param specifier An import specifier such as `@/components/ui/button`.
 * @param aliases The aliases from `components.json`.
+* @param options Rewrites besides the aliases (relative imports between ui components).
 * @returns The rewritten specifier, or the input unchanged when it is not a registry alias.
 * @example
 * rewriteSpecifier("@/lib/utils", { ...aliases, utils: "~/helpers/cn" }); // "~/helpers/cn"
@@ -1250,9 +1294,12 @@ function dependentsOf(index, name, candidates) {
 *
 * @internal Not exported from `@shadow-js/ui`: part of the shadow-ui command, whose public surface is the CLI.
 */
-function rewriteSpecifier(specifier, aliases) {
+function rewriteSpecifier(specifier, aliases, options = {}) {
 	if (specifier === "@/lib/utils") return aliases.utils;
-	if (specifier.startsWith("@/components/ui/")) return `${aliases.ui}/${specifier.slice(16)}`;
+	if (specifier.startsWith("@/components/ui/")) {
+		const rest = specifier.slice(16);
+		return options.relativeUi === true ? `./${rest}` : `${aliases.ui}/${rest}`;
+	}
 	if (specifier.startsWith("@/hooks/")) return `${aliases.hooks}/${specifier.slice(8)}`;
 	if (specifier.startsWith("@/lib/")) return `${aliases.lib}/${specifier.slice(6)}`;
 	return specifier;
@@ -1265,6 +1312,7 @@ const SPECIFIER = /(\bfrom\s*|\bimport\s*\(\s*|\bimport\s+)(["'])(@\/[^"'\n]+)\2
 *
 * @param source A registry file's text.
 * @param aliases The aliases from `components.json`.
+* @param options Rewrites besides the aliases (relative imports between ui components).
 * @returns The text with rewritten specifiers.
 * @example
 * rewriteImports('import { cn } from "@/lib/utils";', aliases);
@@ -1272,8 +1320,8 @@ const SPECIFIER = /(\bfrom\s*|\bimport\s*\(\s*|\bimport\s+)(["'])(@\/[^"'\n]+)\2
 *
 * @internal Not exported from `@shadow-js/ui`: part of the shadow-ui command, whose public surface is the CLI.
 */
-function rewriteImports(source, aliases) {
-	return source.replace(SPECIFIER, (_match, lead, quote, specifier) => `${lead}${quote}${rewriteSpecifier(specifier, aliases)}${quote}`);
+function rewriteImports(source, aliases, options = {}) {
+	return source.replace(SPECIFIER, (_match, lead, quote, specifier) => `${lead}${quote}${rewriteSpecifier(specifier, aliases, options)}${quote}`);
 }
 // src/cli/commands.ts
 /**
@@ -1334,12 +1382,26 @@ function targetFor(item, file, config, mappings, ctx, pathOverride) {
 	if (item.type === "lib" && item.name === "utils") return resolveInsideReal(ctx.fs, ctx.cwd, `${aliasToDirectory(config.aliases.utils, mappings)}${extname(base)}`);
 	return resolveInsideReal(ctx.fs, ctx.cwd, join(directoryFor(item, config, mappings, ctx, pathOverride), base));
 }
+/**
+* Whether ui components written with `--path` need relative imports between them: they do when that directory is not the one the
+* `ui` alias names (the alias would point at a directory that does not hold them), or when the alias names no directory at all.
+*/
+function importsBetweenUiAreRelative(ctx, config, mappings, pathOverride) {
+	if (pathOverride === void 0) return false;
+	try {
+		return resolve(aliasToDirectory(config.aliases.ui, mappings)) !== resolve(ctx.cwd, pathOverride);
+	} catch (error) {
+		if (error instanceof PathError) return true;
+		throw error;
+	}
+}
 /** Builds the per-file plan for the items, reading what is on disk. */
 function planFiles(ctx, config, items, pathOverride, mappings = readPathMappings(ctx.fs, ctx.cwd)) {
 	const plans = [];
+	const relativeUi = importsBetweenUiAreRelative(ctx, config, mappings, pathOverride);
 	for (const item of items) for (const file of item.files) {
 		const raw = ctx.registry.readFile(file.path);
-		const content = file.path.endsWith(".css") ? raw : rewriteImports(raw, config.aliases);
+		const content = file.path.endsWith(".css") ? raw : rewriteImports(raw, config.aliases, { relativeUi: relativeUi && item.type === "ui" });
 		const target = targetFor(item, file, config, mappings, ctx, pathOverride);
 		const current = ctx.fs.read(target);
 		plans.push({
@@ -2160,6 +2222,42 @@ async function dispatch(ctx, command, rest, values, common) {
 		}
 	}
 }
+// src/cli/prompt.ts
+/**
+* The yes/no question of the executable, kept apart from `bin.ts` (which runs on import) so a test
+* can drive it with in-memory streams.
+* @packageDocumentation
+*/
+/**
+* Asks a yes/no question and resolves `true` only for `y` or `yes` (any case). An empty answer is
+* no, and so is the end of input (Ctrl-D, a closed pipe): readline never settles `question()` when
+* its input ends, which left Node to exit with code 13 ("unsettled top-level await").
+*
+* @param question The question, without the `(y/N)` suffix.
+* @param input The stream the answer is read from.
+* @param output The stream the question is written to.
+* @returns Whether the user said yes.
+* @example
+* const yes = await askYesNo("Install packages?", process.stdin, process.stdout);
+* @since 1.0.0
+*
+* @internal Not exported from `@shadow-js/ui`: part of the shadow-ui command, whose public surface is the CLI.
+*/
+async function askYesNo(question, input, output) {
+	const prompt = createInterface({
+		input,
+		output
+	});
+	try {
+		const answer = await new Promise((settle, fail) => {
+			prompt.once("close", () => settle(""));
+			prompt.question(`${question} (y/N) `).then(settle, fail);
+		});
+		return /^y(es)?$/i.test(answer.trim());
+	} finally {
+		prompt.close();
+	}
+}
 // src/cli/registry-source.ts
 /**
 * Where the CLI reads the registry from. The registry ships inside the package, so nothing is
@@ -2243,21 +2341,12 @@ function realContext(cwd) {
 		cwd: resolve(cwd ?? process.cwd()),
 		fs: nodeFs(),
 		registry: loadRegistrySource(),
-		version: "1.0.1",
+		version: "1.0.2",
 		out: (line) => process.stdout.write(`${line}\n`),
 		err: (line) => process.stderr.write(`${line}\n`),
 		async confirm(question) {
 			if (!process.stdin.isTTY) return false;
-			const prompt = createInterface({
-				input: process.stdin,
-				output: process.stdout
-			});
-			try {
-				const answer = await prompt.question(`${question} (y/N) `);
-				return /^y(es)?$/i.test(answer.trim());
-			} finally {
-				prompt.close();
-			}
+			return askYesNo(question, process.stdin, process.stdout);
 		},
 		install: ({ cwd: directory, manager, packages, output }) => new Promise((done, reject) => {
 			const args = manager === "npm" ? ["install", ...packages] : ["add", ...packages];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shadow-js/ui",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "shadcn-style components you add to your project with a CLI, styled with Tailwind v4",
   "license": "MIT",
   "type": "module",
@@ -60,18 +60,18 @@
     "check": "npm run lint && npm run typecheck && npm run build && npm test && npm run test:perf && npm run test:gc"
   },
   "peerDependencies": {
-    "@shadow-js/core": "^1.0.1",
-    "@shadow-js/primitives": "^1.0.1",
-    "@shadow-js/web": "^1.0.1"
+    "@shadow-js/core": "^1.0.2",
+    "@shadow-js/primitives": "^1.0.2",
+    "@shadow-js/web": "^1.0.2"
   },
   "devDependencies": {
     "@biomejs/biome": "2.5.15",
-    "@shadow-js/compiler": "^1.0.1",
-    "@shadow-js/core": "^1.0.1",
-    "@shadow-js/forms": "^1.0.1",
-    "@shadow-js/primitives": "^1.0.1",
-    "@shadow-js/testing": "^1.0.1",
-    "@shadow-js/web": "^1.0.1",
+    "@shadow-js/compiler": "^1.0.2",
+    "@shadow-js/core": "^1.0.2",
+    "@shadow-js/forms": "^1.0.2",
+    "@shadow-js/primitives": "^1.0.2",
+    "@shadow-js/testing": "^1.0.2",
+    "@shadow-js/web": "^1.0.2",
     "@tailwindcss/node": "4.3.3",
     "@types/node": "^24.0.0",
     "fast-check": "^4.10.2",
@@ -84,7 +84,7 @@
     "vitest": "5.0.3"
   },
   "dependencies": {
-    "@shadow-js/table": "1.0.1",
+    "@shadow-js/table": "1.0.2",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "tailwind-merge": "3.7.0"

package/registry/carousel/carousel.tsx

@@ -1,7 +1,9 @@
 import { onCleanup, onMount, splitProps, useEffect, useSignal } from "@shadow-js/core";
 import {
+  callHandler,
   createPartContext,
   type Direction,
+  mergeElementProps,
   useDirectionAround,
   useRefSignal,
 } from "@shadow-js/primitives";
@@ -99,6 +101,7 @@ interface CarouselContextValue {
   readonly setViewport: (element: HTMLElement | undefined) => void;
   readonly claimSlide: () => number;
   readonly registerCount: () => void;
+  readonly releaseSlide: () => void;
   readonly pause: (paused: boolean) => void;
   readonly labels: () => ResolvedLabels;
   /** True once the carousel is mounted in the browser; the slide names wait for it (see CarouselItem). */
@@ -306,6 +309,12 @@ function Carousel(props: CarouselProps): JSX.Element {
   const [ready, setReady] = useSignal(false);
   let viewport: HTMLElement | undefined;
   let claimed = 0;
+  // The slide count the "reInit" listeners were last told, and whether the carousel is gone.
+  let reported = 0;
+  let disposed = false;
+  onCleanup(() => {
+    disposed = true;
+  });
   // The slide a programmatic move is heading for, until the scroll arrives there. While it is set,
   // the intermediate positions of a smooth scroll do not move the index back.
   let pending: number | undefined;
@@ -376,6 +385,27 @@ function Carousel(props: CarouselProps): JSX.Element {
       if (typeof viewport.scrollTo !== "function") viewport.scrollLeft = position * sign;
     }
   };
+  /** Tells the "reInit" listeners when the slide count differs from what they last heard. */
+  const announceCount = (): void => {
+    if (!ready()) return;
+    const total = count();
+    if (total === reported) return;
+    reported = total;
+    // Slides were removed: the current one may be gone.
+    if (total > 0 && index() > total - 1) setIndex(total - 1);
+    emit("reInit");
+  };
+  // A list that is replaced removes every slide and adds new ones in the same turn, and a carousel
+  // that unmounts removes them all: wait for the final count before telling anyone, once.
+  let announcing = false;
+  const scheduleAnnounce = (): void => {
+    if (!ready() || announcing) return;
+    announcing = true;
+    queueMicrotask(() => {
+      announcing = false;
+      if (!disposed) announceCount();
+    });
+  };
   const canPrevious = (): boolean => loops() || index() > 0;
   const canNext = (): boolean => loops() || index() < count() - 1;
 
@@ -402,9 +432,13 @@ function Carousel(props: CarouselProps): JSX.Element {
       return slot;
     },
     registerCount() {
-      const changed = claimed !== count();
       setCount(claimed);
-      if (changed && ready()) emit("reInit");
+      scheduleAnnounce();
+    },
+    releaseSlide() {
+      claimed = Math.max(0, claimed - 1);
+      setCount(claimed);
+      scheduleAnnounce();
     },
     pause: (value) => setPaused(value),
     labels,
@@ -436,6 +470,7 @@ function Carousel(props: CarouselProps): JSX.Element {
   onMount(() => {
     setRegionElement(regionNode);
     setReady(true);
+    reported = count();
     const start = opts().startIndex;
     if (start !== undefined && start > 0) scrollToIndex(start, true);
     (local.setApi as ((api: CarouselApi) => void) | undefined)?.(api);
@@ -445,7 +480,8 @@ function Carousel(props: CarouselProps): JSX.Element {
   // `autoplay` prop: changing it retimes the interval, and removing it stops the interval.
   useEffect(() => {
     const interval = local.autoplay as number | undefined;
-    if (interval === undefined || interval <= 0) return undefined;
+    // NaN and Infinity must not reach setInterval: a NaN delay fires every tick and an Infinity one wraps to 0.
+    if (interval === undefined || !Number.isFinite(interval) || interval <= 0) return undefined;
     if (typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches)
       return undefined;
     const timer = setInterval(() => {
@@ -489,12 +525,24 @@ function Carousel(props: CarouselProps): JSX.Element {
         class={cn("relative", local.class)}
         onKeyDown={(event: KeyboardEvent) => {
           onKeyDown(event);
-          (local.onKeyDown as ((event: KeyboardEvent) => void) | undefined)?.(event);
+          callHandler(local.onKeyDown, event);
+        }}
+        onPointerEnter={(event: PointerEvent) => {
+          callHandler(local.onPointerEnter, event);
+          setPaused(true);
+        }}
+        onPointerLeave={(event: PointerEvent) => {
+          callHandler(local.onPointerLeave, event);
+          setPaused(false);
+        }}
+        onFocusIn={(event: FocusEvent) => {
+          callHandler(local.onFocusIn, event);
+          setPaused(true);
+        }}
+        onFocusOut={(event: FocusEvent) => {
+          callHandler(local.onFocusOut, event);
+          setPaused(false);
         }}
-        onPointerEnter={() => setPaused(true)}
-        onPointerLeave={() => setPaused(false)}
-        onFocusIn={() => setPaused(true)}
-        onFocusOut={() => setPaused(false)}
         {...rest}
       >
         {local.children as JSX.Element}
@@ -551,15 +599,15 @@ function CarouselContent(props: ComponentProps<"div">): JSX.Element {
         local.class,
       )}
       onScroll={(event: Event) => {
-        (local.onScroll as ((event: Event) => void) | undefined)?.(event);
+        callHandler(local.onScroll, event);
         carousel.scrolled();
       }}
       onWheel={(event: WheelEvent) => {
-        (local.onWheel as ((event: WheelEvent) => void) | undefined)?.(event);
+        callHandler(local.onWheel, event);
         carousel.userMoved();
       }}
       onPointerDown={(event: PointerEvent) => {
-        (local.onPointerDown as ((event: PointerEvent) => void) | undefined)?.(event);
+        callHandler(local.onPointerDown, event);
         carousel.userMoved();
         if (event.button !== 0 || event.pointerType === "touch") return;
         const element = event.currentTarget as HTMLElement;
@@ -630,12 +678,28 @@ function CarouselItem(props: ComponentProps<"div">): JSX.Element {
   // before the next one is counted; so a slide is named only once the carousel is mounted, and
   // the name then uses the final count (UI-CRS-18).
   carousel.registerCount();
+  // A slide that goes away (a list that shrinks or is replaced) no longer counts.
+  onCleanup(() => carousel.releaseSlide());
+  let node: HTMLElement | undefined;
+  // The position among the slides that exist now, from the DOM order: the slot a slide claimed when
+  // it rendered is stale once another slide has been removed or inserted before it.
+  const position = (): number => {
+    carousel.count();
+    const parent = node?.parentElement;
+    if (node === undefined || parent === null || parent === undefined) return slot + 1;
+    const slides = Array.from(parent.children).filter(
+      (child) => child.getAttribute("data-slot") === "carousel-item",
+    );
+    const at = slides.indexOf(node);
+    return at === -1 ? slot + 1 : at + 1;
+  };
+  const merged = mergeElementProps({ ref: (element: HTMLElement) => (node = element) }, rest);
   return (
     <div
       role="group"
       aria-roledescription="slide"
       aria-label={
-        carousel.ready() ? carousel.labels().slide(slot + 1, carousel.count()) : undefined
+        carousel.ready() ? carousel.labels().slide(position(), carousel.count()) : undefined
       }
       data-slot="carousel-item"
       class={cn(
@@ -643,7 +707,7 @@ function CarouselItem(props: ComponentProps<"div">): JSX.Element {
         carousel.orientation() === "vertical" ? "pt-4" : "ps-4",
         local.class,
       )}
-      {...rest}
+      {...merged}
     />
   );
 }
@@ -699,7 +763,7 @@ function CarouselPrevious(props: ComponentProps<"button">): JSX.Element {
       )}
       disabled={!carousel.canPrevious()}
       onClick={(event: MouseEvent) => {
-        (local.onClick as ((event: MouseEvent) => void) | undefined)?.(event);
+        callHandler(local.onClick, event);
         carousel.previous();
       }}
       {...rest}
@@ -764,7 +828,7 @@ function CarouselNext(props: ComponentProps<"button">): JSX.Element {
       )}
       disabled={!carousel.canNext()}
       onClick={(event: MouseEvent) => {
-        (local.onClick as ((event: MouseEvent) => void) | undefined)?.(event);
+        callHandler(local.onClick, event);
         carousel.next();
       }}
       {...rest}

package/registry/chart/chart.tsx

@@ -220,7 +220,11 @@ function ChartContainer(props: ChartContainerProps): JSX.Element {
     "children",
   ]);
   const uiLocale = useUiLocale();
-  const [width, setWidth] = useSignal<number>((local.initialWidth as number | undefined) ?? 600);
+  // A NaN or Infinity width would put "NaN" into every path; fall back to the default instead.
+  const initial = local.initialWidth as number | undefined;
+  const [width, setWidth] = useSignal<number>(
+    initial !== undefined && Number.isFinite(initial) ? initial : 600,
+  );
   const [element, setElement] = useRefSignal<HTMLElement>();
   let node: HTMLElement | undefined;
   const dir = useDirectionAround(() => local.dir as Direction | undefined, element);

package/registry/input-group/input-group.tsx

@@ -1,4 +1,5 @@
 import { splitProps } from "@shadow-js/core";
+import { callHandler } from "@shadow-js/primitives";
 import type { ComponentProps, JSX } from "@shadow-js/web";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
@@ -117,7 +118,7 @@ function InputGroupAddon(props: InputGroupAddonProps): JSX.Element {
   const [local, rest] = splitProps(props, ["class", "align", "onClick"]);
   // The application's own click handler runs first; the focus move is the default.
   const onClick = (event: MouseEvent): void => {
-    (local.onClick as ((event: MouseEvent) => void) | undefined)?.(event);
+    callHandler(local.onClick, event);
     const target = event.target;
     if (target instanceof Element && target.closest("button") !== null) return;
     const group = (event.currentTarget as HTMLElement).closest('[data-slot="input-group"]');

package/registry/resizable/resizable.tsx

@@ -1,4 +1,4 @@
-import { onMount, splitProps, useSignal } from "@shadow-js/core";
+import { onCleanup, onMount, splitProps, useSignal } from "@shadow-js/core";
 import {
   createPartContext,
   type Direction,
@@ -51,6 +51,18 @@ export function resizeSizes(
   return next;
 }
 
+/** One panel as the group tracks it. @internal */
+interface PanelEntry {
+  readonly defaultSize: number;
+  readonly minSize: number;
+  readonly maxSize: number;
+  /** Set once a handle, a restored layout or a change of panels gave the panel a size; until then `defaultSize` applies. */
+  size: number | undefined;
+  element: HTMLElement | undefined;
+  /** Registered after the group had mounted: it still has to find its place among the panels that were there. */
+  late: boolean;
+}
+
 /** What the group shares with its panels and handles. @internal */
 interface ResizableContextValue {
   readonly direction: () => "horizontal" | "vertical";
@@ -58,7 +70,18 @@ interface ResizableContextValue {
   readonly sizes: () => number[];
   readonly min: () => number[];
   readonly max: () => number[];
-  readonly claimPanel: (defaultSize: number, minSize: number, maxSize: number) => number;
+  readonly claimPanel: (defaultSize: number, minSize: number, maxSize: number) => PanelEntry;
+  /** The place of a panel among the panels now, in document order. Reactive. */
+  readonly indexOf: (panel: PanelEntry) => number;
+  /** Called when a panel mounted: a panel that arrived late is put in its place and given its share. */
+  readonly placePanel: (panel: PanelEntry) => void;
+  /** Called when a panel unmounted: its share goes back to the others. */
+  readonly releasePanel: (panel: PanelEntry) => void;
+  /**
+   * The panel before a handle, as an index. Before the handle is in the document that is the number of panels rendered so far
+   * minus one (`fallback`); after, it is read from the document, so a panel that came or went moves the handle with it. Reactive.
+   */
+  readonly handleIndex: (handle: HTMLElement | undefined, fallback: number) => number;
   readonly move: (index: number, delta: number) => void;
   readonly set: (index: number, size: number) => void;
   /** How many panels have rendered so far: a handle sits after panel `n - 1`, so its index is `n - 1`. */
@@ -66,6 +89,43 @@ interface ResizableContextValue {
   readonly storageKey: () => string | undefined;
 }
 
+const PRECEDING = 2;
+const FOLLOWING = 4;
+
+/**
+ * Brings sizes to what the group can show: scaled so they sum to 100, then each held within its panel's bounds with the
+ * difference spread over the panels that still have room. Best effort when the bounds cannot all be met (their minimums
+ * already add up to more than 100).
+ */
+function fitSizes(
+  sizes: readonly number[],
+  min: readonly number[],
+  max: readonly number[],
+): number[] {
+  const total = sizes.reduce((sum, size) => sum + size, 0);
+  if (!(total > 0)) return [...sizes];
+  const out = sizes.map((size) => (size * 100) / total);
+  const clampAll = (): void => {
+    for (let at = 0; at < out.length; at += 1) {
+      out[at] = Math.min(max[at] ?? 100, Math.max(min[at] ?? 0, out[at] ?? 0));
+    }
+  };
+  for (let pass = 0; pass <= out.length; pass += 1) {
+    clampAll();
+    const gap = 100 - out.reduce((sum, size) => sum + size, 0);
+    if (Math.abs(gap) < 1e-9) break;
+    const roomy: number[] = [];
+    for (let at = 0; at < out.length; at += 1) {
+      const size = out[at] ?? 0;
+      if (gap > 0 ? size < (max[at] ?? 100) : size > (min[at] ?? 0)) roomy.push(at);
+    }
+    if (roomy.length === 0) break;
+    for (const at of roomy) out[at] = (out[at] ?? 0) + gap / roomy.length;
+  }
+  clampAll();
+  return out;
+}
+
 /**
  * Reports a storage problem. The layout keeps working without storage; the warning tells the
  * developer why the sizes are not remembered.
@@ -152,24 +212,48 @@ function ResizablePanelGroup(props: ResizablePanelGroupProps): JSX.Element {
   const [groupElement, setGroupElement] = useRefSignal<HTMLElement>();
   let groupNode: HTMLElement | undefined;
   const dir = useDirectionAround(() => local.dir as Direction | undefined, groupElement);
-  // The panels register their defaults while they render (plain arrays, no signal writes during a
-  // render). The sizes signal starts empty and is filled by the first change or the restore on mount.
-  const defaults: number[] = [];
-  const minimums: number[] = [];
-  const maximums: number[] = [];
-  const [sizes, setSizes] = useSignal<number[]>([]);
+  // The panels register while they render (plain array, no signal writes during a render), in document order. A panel that
+  // arrives or leaves later changes the array and bumps `version`, which everything that reads the sizes or places follows.
+  const panels: PanelEntry[] = [];
+  const [version, setVersion] = useSignal(0);
+  const touch = (): void => {
+    setVersion((count) => count + 1);
+  };
+  let mounted = false;
+  let disposed = false;
+  onCleanup(() => {
+    disposed = true;
+  });
   const currentSizes = (): number[] => {
-    const current = sizes();
-    return current.length > 0 ? current : [...defaults];
+    version();
+    return panels.map((panel) => panel.size ?? panel.defaultSize);
+  };
+  const minimums = (): number[] => {
+    version();
+    return panels.map((panel) => panel.minSize);
+  };
+  const maximums = (): number[] => {
+    version();
+    return panels.map((panel) => panel.maxSize);
+  };
+  const apply = (sizes: readonly number[]): void => {
+    panels.forEach((panel, at) => {
+      panel.size = sizes[at];
+    });
+    touch();
+  };
+  /** The sizes the panels have now, fitted to 100 and to their bounds: what a change of the panels leaves behind. */
+  const refit = (): void => {
+    if (panels.length === 0) return;
+    apply(fitSizes(currentSizes(), minimums(), maximums()));
   };
-  let claimed = 0;
   const storageKey = (): string | undefined =>
     local.autoSaveId === undefined
       ? undefined
       : `shadow-ui:resizable:${local.autoSaveId as string}`;
 
   const commit = (next: number[]): void => {
-    setSizes(next);
+    apply(next);
     (local.onLayout as ((sizes: number[]) => void) | undefined)?.(next);
     const key = storageKey();
     if (key === undefined) return;
@@ -183,6 +267,7 @@ function ResizablePanelGroup(props: ResizablePanelGroupProps): JSX.Element {
 
   // Restores the remembered sizes after mount, so the server and the first client render agree.
   onMount(() => {
+    mounted = true;
     setGroupElement(groupNode);
     const key = storageKey();
     if (key === undefined) return;
@@ -190,10 +275,11 @@ function ResizablePanelGroup(props: ResizablePanelGroupProps): JSX.Element {
       const saved: unknown = JSON.parse(localStorage.getItem(key) ?? "null");
       if (
         Array.isArray(saved) &&
-        saved.length === defaults.length &&
-        saved.every((value) => typeof value === "number")
+        saved.length === panels.length &&
+        saved.every((value) => typeof value === "number" && Number.isFinite(value) && value >= 0)
       ) {
-        setSizes(saved as number[]);
+        // Whatever is stored (edited by hand, saved by an older layout) is made to fit the bounds and the total.
+        apply(fitSizes(saved as number[], minimums(), maximums()));
       }
     } catch (error) {
       // A value that is not JSON is ignored and the defaults apply; the mismatch is reported.
@@ -205,25 +291,65 @@ function ResizablePanelGroup(props: ResizablePanelGroupProps): JSX.Element {
     direction,
     dir,
     sizes: currentSizes,
-    min: () => minimums,
-    max: () => maximums,
+    min: minimums,
+    max: maximums,
     claimPanel(defaultSize, minSize, maxSize) {
-      const index = claimed;
-      claimed += 1;
-      defaults.push(defaultSize);
-      minimums.push(minSize);
-      maximums.push(maxSize);
-      return index;
+      const panel: PanelEntry = {
+        defaultSize,
+        minSize,
+        maxSize,
+        size: undefined,
+        element: undefined,
+        late: mounted,
+      };
+      panels.push(panel);
+      return panel;
+    },
+    indexOf(panel) {
+      version();
+      return panels.indexOf(panel);
+    },
+    placePanel(panel) {
+      if (!panel.late || disposed) return;
+      panel.late = false;
+      // It was appended when it rendered; the document says where it really is.
+      panels.sort((first, second) => {
+        if (first.element === undefined || second.element === undefined) return 0;
+        return (first.element.compareDocumentPosition(second.element) & FOLLOWING) !== 0 ? -1 : 1;
+      });
+      refit();
+    },
+    releasePanel(panel) {
+      const at = panels.indexOf(panel);
+      if (at === -1) return;
+      panels.splice(at, 1);
+      if (disposed) return;
+      if (panels.length === 0) touch();
+      else refit();
+    },
+    handleIndex(handle, fallback) {
+      version();
+      if (handle === undefined || !mounted) return fallback;
+      let before = 0;
+      for (const panel of panels) {
+        if (
+          panel.element !== undefined &&
+          (handle.compareDocumentPosition(panel.element) & PRECEDING) !== 0
+        ) {
+          before += 1;
+        }
+      }
+      return Math.max(0, before - 1);
     },
     move(index, delta) {
-      commit(resizeSizes(currentSizes(), index, delta, minimums, maximums));
+      commit(resizeSizes(currentSizes(), index, delta, minimums(), maximums()));
     },
     set(index, size) {
       const current = currentSizes();
       const delta = size - (current[index] ?? 0);
-      commit(resizeSizes(current, index, delta, minimums, maximums));
+      commit(resizeSizes(current, index, delta, minimums(), maximums()));
     },
-    panelsClaimed: () => defaults.length,
+    panelsClaimed: () => panels.length,
     storageKey,
   };
 
@@ -301,16 +427,22 @@ function ResizablePanel(props: ResizablePanelProps): JSX.Element {
     "maxSize",
     "children",
   ]);
-  const index = group.claimPanel(
+  const panel = group.claimPanel(
     (local.defaultSize as number | undefined) ?? 50,
     (local.minSize as number | undefined) ?? 10,
     (local.maxSize as number | undefined) ?? 100,
   );
+  const index = (): number => group.indexOf(panel);
+  onMount(() => group.placePanel(panel));
+  onCleanup(() => group.releasePanel(panel));
   return (
     <div
+      ref={(node: HTMLElement) => {
+        panel.element = node;
+      }}
       data-slot="resizable-panel"
-      data-panel-index={index}
-      style={{ flex: `${group.sizes()[index] ?? 0} 1 0%`, minWidth: 0, minHeight: 0 }}
+      data-panel-index={index()}
+      style={{ flex: `${group.sizes()[index()] ?? 0} 1 0%`, minWidth: 0, minHeight: 0 }}
       class={cn("min-h-0 min-w-0 overflow-hidden", local.class)}
       {...rest}
     >
@@ -362,11 +494,15 @@ function ResizableHandle(props: ResizableHandleProps): JSX.Element {
   const group = resizableContext.use("ResizableHandle");
   const t = useUiStrings();
   const [local, rest] = splitProps(props, ["class", "withHandle"]);
-  // A handle sits right after the panel before it, so its index follows from the panels rendered.
-  const handleIndex = Math.max(0, group.panelsClaimed() - 1);
+  // A handle sits right after the panel before it: from the panels rendered so far, then from the document once it is there.
+  const fallbackIndex = Math.max(0, group.panelsClaimed() - 1);
+  let handleNode: HTMLElement | undefined;
+  const handleIndexNow = (): number => group.handleIndex(handleNode, fallbackIndex);
   const step = 5;
   const vertical = (): boolean => group.direction() === "vertical";
   let stopDrag: (() => void) | undefined;
+  // A handle that unmounts mid-drag (a panel closes) must not keep resizing from window listeners.
+  onCleanup(() => stopDrag?.());
 
   const startDrag = (event: PointerEvent): void => {
     if (event.button !== 0) return;
@@ -378,6 +514,7 @@ function ResizableHandle(props: ResizableHandleProps): JSX.Element {
     const box = (event.currentTarget as HTMLElement | null)?.parentElement?.getBoundingClientRect();
     const length = box === undefined ? 0 : vertical() ? box.height : box.width;
     const mirror = !vertical() && group.dir() === "rtl" ? -1 : 1;
+    const handleIndex = handleIndexNow();
     const startSize = group.sizes()[handleIndex] ?? 0;
     // Only the pointer that pressed the handle moves it; another finger is not part of this drag.
     const pointer = event.pointerId;
@@ -402,12 +539,15 @@ function ResizableHandle(props: ResizableHandleProps): JSX.Element {
 
   return (
     <div
+      ref={(node: HTMLElement) => {
+        handleNode = node;
+      }}
       role="separator"
       tabindex={0}
       aria-orientation={vertical() ? "horizontal" : "vertical"}
-      aria-valuenow={Math.round(group.sizes()[handleIndex] ?? 0)}
-      aria-valuemin={Math.round(group.min()[handleIndex] ?? 0)}
-      aria-valuemax={Math.round(group.max()[handleIndex] ?? 100)}
+      aria-valuenow={Math.round(group.sizes()[handleIndexNow()] ?? 0)}
+      aria-valuemin={Math.round(group.min()[handleIndexNow()] ?? 0)}
+      aria-valuemax={Math.round(group.max()[handleIndexNow()] ?? 100)}
       aria-label={t("resizable.handle", "Resize panels")}
       data-slot="resizable-handle"
       data-orientation={vertical() ? "vertical" : "horizontal"}
@@ -421,6 +561,7 @@ function ResizableHandle(props: ResizableHandleProps): JSX.Element {
       )}
       onPointerDown={(event: PointerEvent) => startDrag(event)}
       onKeyDown={(event: KeyboardEvent) => {
+        const handleIndex = handleIndexNow();
         const forward = vertical()
           ? "ArrowDown"
           : group.dir() === "rtl"

package/registry.json

@@ -1,6 +1,6 @@
 {
   "name": "@shadow-js/ui",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "frameworkDependencies": [
     "@shadow-js/core",
     "@shadow-js/primitives",
@@ -587,7 +587,9 @@
       ],
       "primitives": [
         "Direction",
+        "callHandler",
         "createPartContext",
+        "mergeElementProps",
         "useDirectionAround",
         "useRefSignal"
       ],
@@ -1061,7 +1063,7 @@
         "utils"
       ],
       "dependencies": {
-        "@shadow-js/table": "1.0.1"
+        "@shadow-js/table": "1.0.2"
       },
       "exports": [
         "DataTable",
@@ -1663,7 +1665,9 @@
         "InputGroupText",
         "InputGroupTextarea"
       ],
-      "primitives": [],
+      "primitives": [
+        "callHandler"
+      ],
       "tailwind": {
         "tokens": [
           "accent",