@heyramzi/ui 2.24.0 → 3.1.0

package/src/lib/panel.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { Snippet } from "svelte";
+import type { PhosphorIcon } from "./icon-types.js";
+interface Props {
+    /** What this panel is, drawn as the app's one panel label. No label, no actions: no header. */
+    label?: string;
+    labelIcon?: PhosphorIcon;
+    /** A mark the icon set lacks (a platform logo), drawn ahead of the label at the same size. */
+    labelLead?: Snippet;
+    /** A line under the label, for the scope a number was measured over. */
+    sublabel?: string;
+    /**
+     * A row count, total or freshness stamp. A prop, not an action, because
+     * hand-placed hints ended up at three type sizes on one screen.
+     */
+    hint?: string;
+    /** Controls that act on this panel. Pinned right, after the hint. */
+    actions?: Snippet;
+    /** Off for a body that supplies its own padding: a table, a media grid, a full-bleed list. */
+    pad?: boolean;
+    /** The body scrolls sideways rather than squeezing, for a table wider than the window. */
+    scroll?: boolean;
+    /** Takes the height the panels above it left, inside a `fill` stack. One per stack. */
+    grow?: boolean;
+    children: Snippet;
+    class?: string;
+    bodyClass?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/lib/tone.ts

@@ -16,9 +16,8 @@ export const TONE_CLASS: Record<Tone, string> = {
 };
 
 /**
- * The scale as a quiet tint with no border: the icon and the text carry the tone, the fill only
- * groups them. Neutral reads off the foreground, not `bg-muted`, because muted sits 0.005 L from
- * the canvas and vanishes there (tokens board, "what fights the new scale").
+ * A quiet borderless tint: icon and text carry the tone. Neutral reads off the foreground,
+ * since `bg-muted` sits 0.005 L from the canvas and vanishes there.
  */
 export const TONE_TINT: Record<Tone, string> = {
   neutral: "bg-foreground/6 text-muted-foreground",
@@ -37,7 +36,7 @@ export const TONE_TEXT: Record<Tone, string> = {
   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",
+  destructive: "text-destructive-ink",
 };
 
 /** The same scale as icon color. */

package/src/modules.test.ts

@@ -1,5 +1,5 @@
-import { existsSync, readFileSync } from "node:fs";
-import { dirname, join } from "node:path";
+import { existsSync, readFileSync, readdirSync } from "node:fs";
+import { dirname, join, relative } from "node:path";
 import { fileURLToPath } from "node:url";
 import { describe, expect, it } from "vite-plus/test";
 import * as record from "./record/index.js";
@@ -7,12 +7,95 @@ import * as inbox from "./inbox/index.js";
 import * as thread from "./thread/index.js";
 import * as triage from "./triage/index.js";
 
-const pkg = JSON.parse(
-  readFileSync(join(dirname(fileURLToPath(import.meta.url)), "..", "package.json"), "utf8"),
-) as {
+const root = join(dirname(fileURLToPath(import.meta.url)), "..");
+const pkg = JSON.parse(readFileSync(join(root, "package.json"), "utf8")) as {
   exports: Record<string, string | Record<string, string>>;
 };
 
+const targetOf = (v: string | Record<string, string>) =>
+  typeof v === "string" ? v : (v.svelte ?? v.default);
+
+/** A relative or `#src` specifier as a `.ts` or `.svelte` file, or null for a package. */
+function resolveSpec(from: string, spec: string): string | null {
+  if (!spec.startsWith("#src/") && !spec.startsWith(".")) return null;
+  const p = spec.startsWith("#src/") ? join(root, "src", spec.slice(5)) : join(dirname(from), spec);
+  const hit = [p, p.replace(/\.js$/, ".ts"), `${p}.ts`, join(p, "index.ts")].find(
+    (c) => /\.(ts|svelte)$/.test(c) && existsSync(c),
+  );
+  return hit ?? null;
+}
+
+type Origin = { file: string; name: string };
+const origins = new Map<string, Map<string, Origin>>();
+
+/** Each name a module exports, traced through re-exports to the file and name that define it. */
+function exportsOf(file: string): Map<string, Origin> {
+  const known = origins.get(file);
+  if (known) return known;
+  const out = new Map<string, Origin>();
+  origins.set(file, out);
+  if (file.endsWith(".svelte")) return out.set("default", { file, name: "default" });
+
+  const code = readFileSync(file, "utf8")
+    .replace(/\/\*[\s\S]*?\*\//g, "")
+    .replace(/\/\/.*$/gm, "");
+  const trace = (src: string | null, name: string): Origin =>
+    (src && exportsOf(src).get(name)) || { file: src ?? file, name };
+  const specifiers = (list: string) =>
+    list
+      .split(",")
+      .map((part) => part.trim().replace(/^type\s+/, ""))
+      .filter(Boolean)
+      .map((part) => part.split(/\s+as\s+/));
+
+  const imported = new Map<string, Origin>();
+  for (const [, def, list = "", spec] of code.matchAll(
+    /import\s+(?:type\s+)?([\w$]+)?\s*,?\s*(?:\{([^}]*)\})?\s*from\s*["']([^"']+)["']/g,
+  )) {
+    const src = resolveSpec(file, spec);
+    if (def) imported.set(def, trace(src, "default"));
+    for (const [name, local = name] of specifiers(list)) imported.set(local, trace(src, name));
+  }
+  for (const [, list, spec] of code.matchAll(
+    /export\s+(?:type\s+)?\{([^}]*)\}(?:\s*from\s*["']([^"']+)["'])?/g,
+  )) {
+    const src = spec ? resolveSpec(file, spec) : null;
+    for (const [name, as = name] of specifiers(list))
+      out.set(as, spec ? trace(src, name) : (imported.get(name) ?? { file, name }));
+  }
+  for (const [, spec] of code.matchAll(/export\s+\*\s+from\s*["']([^"']+)["']/g)) {
+    const src = resolveSpec(file, spec);
+    if (src) for (const [name, at] of exportsOf(src)) if (name !== "default") out.set(name, at);
+  }
+  for (const [, name] of code.matchAll(
+    /export\s+(?:declare\s+)?(?:async\s+)?(?:const|let|function\*?|class|type|interface|enum)\s+([\w$]+)/g,
+  ))
+    out.set(name, { file, name });
+  return out;
+}
+
+/** Every public module path and its file, wildcards expanded. The `./canvas/*` deep paths stay beside the barrel in 3.0. */
+function publicModules(): Map<string, string> {
+  const modules = new Map<string, string>();
+  for (const [key, value] of Object.entries(pkg.exports)) {
+    const target = targetOf(value);
+    if (!/\.(ts|svelte)$/.test(target) || key.startsWith("./canvas/")) continue;
+    if (!key.includes("*")) {
+      modules.set(key, join(root, target));
+      continue;
+    }
+    const [head, tail] = target.split("*");
+    for (const entry of readdirSync(join(root, head), { withFileTypes: true })) {
+      const { name } = entry;
+      const stem = entry.isDirectory() ? name : name.endsWith(tail) && name.slice(0, -tail.length);
+      if (!stem) continue;
+      const file = join(root, head + stem + tail);
+      if (existsSync(file) && !file.endsWith(".test.ts")) modules.set(key.replace("*", stem), file);
+    }
+  }
+  return modules;
+}
+
 describe("module split", () => {
   it("holds the record page's names", () => {
     expect(record.RecordShell).toBeDefined();
@@ -30,10 +113,9 @@ describe("module split", () => {
   });
 
   it("resolves every export path to a file", () => {
-    const root = join(dirname(fileURLToPath(import.meta.url)), "..");
     const missing: string[] = [];
     for (const [name, target] of Object.entries(pkg.exports)) {
-      const path = typeof target === "string" ? target : (target.default ?? target.svelte);
+      const path = targetOf(target);
       if (path.includes("*") || path.endsWith(".css")) continue;
       if (!existsSync(join(root, path))) missing.push(`${name} -> ${path}`);
     }
@@ -54,4 +136,34 @@ describe("module split", () => {
     }
     expect(Object.keys(pkg.exports).filter((name) => name.startsWith("./tasks"))).toEqual([]);
   });
+
+  it("ships no demo, the docs site holds them", () => {
+    expect(Object.keys(pkg.exports).filter((name) => name.includes("demo"))).toEqual([]);
+  });
+
+  it("has no package root, every import names its subpath", () => {
+    expect(pkg.exports["."]).toBeUndefined();
+    expect(existsSync(join(root, "src/index.ts"))).toBe(false);
+  });
+
+  it("reaches each value and type through one public path", () => {
+    const paths = new Map<string, string[]>();
+    for (const [key, file] of publicModules())
+      for (const [name, at] of exportsOf(file)) {
+        const id = `${relative(join(root, "src"), at.file)}#${at.name}`;
+        paths.set(id, [...(paths.get(id) ?? []), `${key} :: ${name}`]);
+      }
+    const twice = [...paths]
+      .filter(([, at]) => new Set(at.map((a) => a.split(" :: ")[0])).size > 1)
+      .map(([id, at]) => `${id} <- ${at.join(", ")}`);
+    expect(twice).toEqual([]);
+  });
+
+  it("traces a re-export to its source and expands wildcards, so a clean run means something", () => {
+    const twice = [...exportsOf(join(root, "src/components/list-page/index.ts"))].filter(([, at]) =>
+      at.file.endsWith("lib/panel.svelte"),
+    );
+    expect(twice.map(([name]) => name)).toEqual(["DetailPanel"]);
+    expect(publicModules().get("./lib/tone.js")).toBe(join(root, "src/lib/tone.ts"));
+  });
 });

package/src/onboarding/README.md

@@ -104,8 +104,8 @@ interface SeenStore {
 ```
 
 The store keeps a version, not a boolean. Raise a tour's `version` after the page changes and everyone sees it
-again. `localStorageStore(key?)` and `memoryStore(initial?)` come with the package and also live at
-`@heyramzi/ui/onboarding/stores`. Server stores belong in the app: a table keyed by user and tour id, and a `fetch`
+again. `localStorageStore(key?)` and `memoryStore(initial?)` come with
+`@heyramzi/ui/onboarding`. Server stores belong in the app: a table keyed by user and tour id, and a `fetch`
 adapter.
 
 If `load` rejects, no tour shows that session.

package/src/onboarding/onboarding-provider.svelte

@@ -127,6 +127,6 @@
 
 {#if active}
 	{#key active.run}
-		<TourRunner tour={active.tour} steps={active.steps} {strings} onfinish={finish} />
+		<TourRunner tour={active.tour} steps={active.steps} {strings} onFinish={finish} />
 	{/key}
 {/if}

package/src/onboarding/onboarding-provider.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { SeenStore, Strings, Tour } from "./types.js";
+type $$ComponentProps = {
+    tours: readonly Tour[];
+    store: SeenStore;
+    strings: Strings;
+    /** `page.route.id`. A tour runs on the route it names. */
+    routeId: string | null | undefined;
+    /** False while signed out, or anywhere a tour has no business starting. */
+    enabled?: boolean;
+    /** Press `?` to replay this page's tour. */
+    replayKey?: boolean;
+    /** How long to wait for the first target before giving the tour up. */
+    waitMs?: number;
+};
+declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/onboarding/tour-card.svelte

@@ -17,9 +17,9 @@
 		strings,
 		titleAttrs,
 		bodyAttrs,
-		onclose,
-		onprev,
-		onnext,
+		onClose,
+		onPrev,
+		onNext,
 	}: {
 		title: string;
 		body: string;
@@ -30,10 +30,10 @@
 		strings: Strings;
 		titleAttrs: Attrs;
 		bodyAttrs: Attrs;
-		onclose: () => void;
-		onprev: () => void;
+		onClose: () => void;
+		onPrev: () => void;
 		/** The last step's button reads "done", and this closes the tour. */
-		onnext: () => void;
+		onNext: () => void;
 	} = $props();
 
 	const last = $derived(index === total - 1);
@@ -55,14 +55,14 @@
 			{title}
 		</h2>
 		<Button
-			onclick={onclose}
+			onclick={onClose}
 			variant="ghost"
 			size="sm"
 			icon
 			class="-mt-1 -mr-1.5 text-muted-foreground"
 			aria-label={strings.skip}
 		>
-			<X weight="bold" />
+			<X aria-hidden="true" weight="bold" />
 		</Button>
 	</div>
 	<p {...bodyAttrs} class="text-muted-foreground text-sm text-pretty">{body}</p>
@@ -88,8 +88,8 @@
 	{/if}
 	<div class="flex items-center gap-2">
 		{#if index > 0}
-			<Button onclick={onprev} variant="ghost" size="sm">{strings.back}</Button>
+			<Button onclick={onPrev} variant="ghost" size="sm">{strings.back}</Button>
 		{/if}
-		<Button onclick={onnext} size="sm">{last ? strings.done : strings.next}</Button>
+		<Button onclick={onNext} size="sm">{last ? strings.done : strings.next}</Button>
 	</div>
 </div>

package/src/onboarding/tour-card.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { HTMLAttributes } from "svelte/elements";
+import type { Strings } from "./types.js";
+type Attrs = HTMLAttributes<HTMLElement>;
+type $$ComponentProps = {
+    title: string;
+    body: string;
+    image?: string;
+    intro?: boolean;
+    index: number;
+    total: number;
+    strings: Strings;
+    titleAttrs: Attrs;
+    bodyAttrs: Attrs;
+    onClose: () => void;
+    onPrev: () => void;
+    /** The last step's button reads "done", and this closes the tour. */
+    onNext: () => void;
+};
+declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/onboarding/tour-runner.svelte

@@ -10,13 +10,13 @@
 		tour,
 		steps,
 		strings,
-		onfinish,
+		onFinish,
 	}: {
 		tour: Tour;
 		steps: Step[];
 		strings: Strings;
 		/** `null` means the tour never showed, so nothing is worth recording. */
-		onfinish: (outcome: Outcome | null) => void;
+		onFinish: (outcome: Outcome | null) => void;
 	} = $props();
 
 	// The provider keys this component per run, so the tour never changes under it.
@@ -40,7 +40,7 @@
 	function finish(outcome: Outcome | null) {
 		if (finished) return;
 		finished = true;
-		onfinish(outcome);
+		onFinish(outcome);
 	}
 
 	// Dismissing on the last step reports "dismissed" and then "completed" in one go, so the
@@ -120,7 +120,7 @@
 			{...api.getContentProps()}
 			bind:this={card}
 			class={[
-				"tour-card bg-popover text-popover-foreground ring-foreground/10 shadow-overlay pointer-events-auto max-w-full text-sm ring-1 outline-none",
+				"tour-card bg-popover text-popover-foreground ring-foreground/10 shadow-overlay pointer-events-auto max-w-full text-sm ring-1 outline-none max-sm:w-full",
 				intro ? "w-96 rounded-2xl" : "w-80 rounded-xl",
 			]}
 		>
@@ -134,73 +134,75 @@
 				{strings}
 				titleAttrs={api.getTitleProps()}
 				bodyAttrs={api.getDescriptionProps()}
-				onclose={dismiss}
-				onprev={() => api.prev()}
-				onnext={() => (api.lastStep ? dismiss() : api.next())}
+				onClose={dismiss}
+				onPrev={() => api.prev()}
+				onNext={() => (api.lastStep ? dismiss() : api.next())}
 			/>
 		</div>
 	</div>
 {/if}
 
 <style>
-	.tour-backdrop,
-	.tour-spotlight,
-	.tour-positioner {
-		--tour-z-index: 60;
-		z-index: calc(var(--tour-layer) + var(--tour-z-index));
-	}
-	.tour-backdrop {
-		background: oklch(0 0 0 / 0.5);
-		transition: clip-path var(--duration-fast) var(--ease-smooth-out);
-	}
-	.tour-backdrop[data-instant] {
-		transition-duration: 0ms;
-	}
-	.tour-spotlight {
-		outline: 2px solid oklch(1 0 0 / 0.7);
-		transition-property: left, top, width, height;
-		transition-duration: var(--duration-fast);
-		transition-timing-function: var(--ease-smooth-out);
-	}
-	.tour-positioner[data-type="dialog"] {
-		position: fixed;
-		inset: 0;
-		display: grid;
-		place-items: center;
-		padding: 1rem;
-		pointer-events: none;
-	}
-	.tour-card[data-state="open"] {
-		animation: tour-in var(--duration-fast) var(--ease-smooth-out);
-	}
-	@keyframes tour-in {
-		from {
-			opacity: 0;
-			scale: 0.97;
-		}
-	}
-	@media (max-width: 639px) {
+	@layer theme, base, components, utilities;
+
+	@layer components {
+		.tour-backdrop,
+		.tour-spotlight,
 		.tour-positioner {
-			position: fixed !important;
-			inset: auto 0 0 0 !important;
-			transform: none !important;
-			translate: none !important;
-			min-width: 0 !important;
-			width: auto !important;
-			display: block !important;
-			padding: 0.75rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom));
+			--tour-z-index: 60;
+			z-index: calc(var(--tour-layer) + var(--tour-z-index));
 		}
-		.tour-card {
-			width: 100%;
+		.tour-backdrop {
+			background: oklch(0 0 0 / 0.5);
+			transition: clip-path var(--duration-fast) var(--ease-smooth-out);
+		}
+		.tour-backdrop[data-instant] {
+			transition-duration: 0ms;
 		}
-	}
-	@media (prefers-reduced-motion: reduce) {
-		.tour-backdrop,
 		.tour-spotlight {
-			transition: none;
+			outline: 2px solid oklch(1 0 0 / 0.7);
+			transition-property: left, top, width, height;
+			transition-duration: var(--duration-fast);
+			transition-timing-function: var(--ease-smooth-out);
+		}
+		.tour-positioner[data-type="dialog"] {
+			position: fixed;
+			inset: 0;
+			display: grid;
+			place-items: center;
+			padding: 1rem;
+			pointer-events: none;
+		}
+		.tour-card {
+			transition-property: opacity, scale;
+			transition-duration: var(--duration-fast);
+			transition-timing-function: var(--ease-smooth-out);
+		}
+		@starting-style {
+			.tour-card[data-state="open"] {
+				opacity: 0;
+				scale: 0.97;
+			}
+		}
+
+		@media (max-width: 639px) {
+			.tour-positioner {
+				position: fixed !important;
+				inset: auto 0 0 0 !important;
+				transform: none !important;
+				translate: none !important;
+				min-width: 0 !important;
+				width: auto !important;
+				display: block !important;
+				padding: 0.75rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom));
+			}
 		}
-		.tour-card[data-state="open"] {
-			animation: none;
+		@media (prefers-reduced-motion: reduce) {
+			.tour-backdrop,
+			.tour-spotlight,
+			.tour-card {
+				transition: none;
+			}
 		}
 	}
 </style>

package/src/onboarding/tour-runner.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Outcome, Step, Strings, Tour } from "./types.js";
+type $$ComponentProps = {
+    tour: Tour;
+    steps: Step[];
+    strings: Strings;
+    /** `null` means the tour never showed, so nothing is worth recording. */
+    onFinish: (outcome: Outcome | null) => void;
+};
+declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/panel/side-panel.svelte

@@ -44,8 +44,8 @@
 		/** The body brings its own header: the title is read out but not drawn, and
 	    the body is neither padded nor scrolled by the panel. */
 		bare?: boolean;
-		/** Fires once when the panel closes, from the close button, Escape or the overlay. */
-		onClose?: () => void;
+		/** Called with the new state when the close button, Escape or the overlay closes the panel. */
+		onOpenChange?: (open: boolean) => void;
 	}
 	let {
 		open = $bindable(),
@@ -61,7 +61,7 @@
 		children,
 		width = "sm",
 		bare = false,
-		onClose,
+		onOpenChange,
 	}: Props = $props();
 
 	// =========================
@@ -104,12 +104,7 @@
 <!-- =========================== -->
 <!-- MARKUP -->
 <!-- =========================== -->
-<Sheet.Root
-	bind:open
-	onOpenChange={(next) => {
-		if (!next) onClose?.();
-	}}
->
+<Sheet.Root bind:open {onOpenChange}>
 	<Sheet.Content
 		side="right"
 		bind:ref={panel}

package/src/panel/side-panel.svelte.d.ts

@@ -0,0 +1,48 @@
+import type { PanelStat, SidePanelWidth } from "./side-panel-types.js";
+export type { PanelStat, SidePanelWidth };
+import type { Snippet } from "svelte";
+import { type OpenInTool } from "../components/open-in/index.js";
+import { type Tone } from "../lib/tone.js";
+interface Props {
+    open: boolean;
+    /** Names the dialog for screen readers and heads the panel. */
+    title: string;
+    /** Merged onto the title. A short path is set `font-mono`, a subject is not. */
+    titleClass?: string;
+    /** The facts the record is filed under, read out under the title. */
+    description?: string;
+    /** Status chips, left of the action row. */
+    badges?: {
+        label: string;
+        tone: Tone;
+    }[];
+    /** Doors out to another tool. `text` replaces the tool's name on the button. */
+    openIn?: {
+        tool: OpenInTool;
+        href: string;
+        label: string;
+        text?: string;
+    }[];
+    /** A prompt for an AI about this record, copied on click. */
+    handoff?: {
+        value: () => string | Promise<string>;
+        label: string;
+        copiedLabel: string;
+    };
+    /** The record's numbers, as a strip under the badges. Same place in every panel. */
+    stats?: PanelStat[];
+    /** Anything else the record can do, drawn last in the action row. */
+    actions?: Snippet;
+    /** Pinned actions. The body scrolls above it; the caller aligns the row. */
+    footer?: Snippet;
+    children: Snippet;
+    width?: SidePanelWidth;
+    /** The body brings its own header: the title is read out but not drawn, and
+    the body is neither padded nor scrolled by the panel. */
+    bare?: boolean;
+    /** Called with the new state when the close button, Escape or the overlay closes the panel. */
+    onOpenChange?: (open: boolean) => void;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "open">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/record/field-section.svelte.d.ts

@@ -0,0 +1,19 @@
+import { type FieldValues } from "./fields.js";
+import type { FieldDef, FieldSectionDef, FieldValue, RecordLabels } from "./types.js";
+interface Props {
+    /** What a module declares for this record. */
+    fields: FieldDef[];
+    /** Section headings in the order to draw them. A section with no field isn't drawn. */
+    sections?: FieldSectionDef[];
+    values: FieldValues;
+    /** Without it every field is read-only and an empty one is left out. */
+    onSave?: (key: string, value: FieldValue) => void | Promise<void>;
+    /** For a money field that names none. */
+    currency?: string;
+    labels?: Partial<RecordLabels>;
+    locale?: string;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/record/info-list.svelte

@@ -218,7 +218,7 @@
 					{#if saving === key}
 						<Spinner class="size-3.5 text-muted-foreground" />
 					{:else if !multi}
-						<CaretUpDown class="size-3.5 shrink-0 opacity-60" />
+						<CaretUpDown aria-hidden="true" class="size-3.5 shrink-0 opacity-60" />
 					{/if}
 				</Button>
 			{/snippet}
@@ -235,6 +235,7 @@
 								onSelect={() => (multi ? toggle(row, option.value) : pick(row, option.value))}
 							>
 								<Check
+									aria-hidden="true"
 									class={cn(
 										"size-3.5",
 										current.includes(option.value) ? "opacity-100" : "opacity-0",
@@ -338,7 +339,7 @@
 								max={row.tags.max}
 								label={t.edit(row.label)}
 								labels={{ add: t.add(row.label), none: t.noMatch }}
-								onchange={(next) => commit(row, next, false)}
+								onValueChange={(next) => commit(row, next, false)}
 							/>
 						{:else if row.input === "multi" && row.options}
 							{@render list(row, key, true)}
@@ -418,7 +419,7 @@
 							</Button>
 						{/if}
 						{#if failed?.key === key}
-							<p class="text-xs text-destructive" role="alert">{failed.text}</p>
+							<p class="text-xs text-destructive-ink" role="alert">{failed.text}</p>
 						{/if}
 					</dd>
 				{/if}

package/src/record/info-list.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { Snippet } from "svelte";
+import { type InfoRow, type RecordLabels } from "./types.js";
+interface Props {
+    rows: InfoRow[];
+    /** A heading over the list. Left out, nothing is drawn. */
+    title?: string | null;
+    labels?: Partial<RecordLabels>;
+    /**
+     * `list` is the editable label and value grid. `row` is a read-only band of items that
+     * wrap, with values that truncate. Rows ignore `onSave` there and keep their empty ones.
+     */
+    layout?: "list" | "row";
+    /** `row` only. Where the label sits against its value. */
+    labelPosition?: "above" | "beside";
+    /** `row` only. Classes for the `<dl>`, to set a grid or a gap. */
+    listClass?: string;
+    /** `row` only. Classes for each item, to cap its width. */
+    itemClass?: string;
+    /** `row` only. Sits after the list on the same line, a button for the whole band. */
+    trailing?: Snippet;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;