@heyramzi/ui 2.0.1 → 2.2.0

package/src/components/tags-input/tags-input.svelte

@@ -0,0 +1,305 @@
+<script lang="ts">
+	// =========================
+	// IMPORTS
+	// =========================
+	import { Plus, X } from "phosphor-svelte";
+	import { cn } from "../../lib/utils.js";
+	import {
+		addTag,
+		canCreate,
+		findOption,
+		matchOptions,
+		removeTag,
+		splitTags,
+	} from "./tags.js";
+
+	// =========================
+	// TYPES
+	// =========================
+	interface Labels {
+		/** Shown in the empty read state and as the input's placeholder. */
+		add: string;
+		create: (query: string) => string;
+		remove: (tag: string) => string;
+		max: string;
+		/** Shown when what's typed matches nothing and creating isn't allowed. */
+		none: string;
+	}
+
+	interface Props {
+		/** The tags. Order is kept. */
+		value: readonly string[];
+		/** Called with the whole next list. Throw to refuse: the list reverts. */
+		onchange: (next: string[]) => void | Promise<void>;
+		/** The labels people pick from. Picking one stores its exact spelling and case. */
+		options?: readonly string[];
+		/**
+		 * Whether a label that isn't an option may be made, through the "Create" row only.
+		 * Text close to an option never becomes a label unless that row is chosen.
+		 */
+		allowCreate?: boolean;
+		/** Most tags the list holds. Past it the input goes away. */
+		max?: number;
+		/** Accessible name of the field. */
+		label: string;
+		labels?: Partial<Labels>;
+		disabled?: boolean;
+		class?: string;
+	}
+
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		value,
+		onchange,
+		options = [],
+		allowCreate = true,
+		max,
+		label,
+		labels,
+		disabled = false,
+		class: className,
+	}: Props = $props();
+
+	// =========================
+	// STATE
+	// =========================
+	let editing = $state(false);
+	let query = $state("");
+	let active = $state(0);
+	// What the list shows while a save is in flight, so a tag doesn't blink out and back.
+	let pending = $state<string[] | null>(null);
+	let input = $state<HTMLInputElement | null>(null);
+	let root = $state<HTMLElement | null>(null);
+	const listId = $props.id();
+
+	// =========================
+	// DERIVED
+	// =========================
+	const text: Labels = $derived({
+		add: "Add",
+		create: (q) => `Create “${q}”`,
+		remove: (tag) => `Remove ${tag}`,
+		max: "Limit reached",
+		none: "No match",
+		...labels,
+	});
+	const tags = $derived(pending ?? [...value]);
+	const full = $derived(max !== undefined && tags.length >= max);
+	const matches = $derived(matchOptions(options, tags, query));
+	const creatable = $derived(canCreate(options, tags, query, allowCreate));
+	// Options closest first (a typo's fix comes before anything new), then the one row that makes what's typed.
+	const rows = $derived([
+		...matches.map((name) => ({ kind: "pick" as const, name })),
+		...(creatable ? [{ kind: "create" as const, name: query.trim() }] : []),
+	]);
+	const nothing = $derived(editing && !full && query.trim() !== "" && rows.length === 0);
+	const open = $derived(editing && !full && (rows.length > 0 || nothing));
+
+	// =========================
+	// FUNCTIONS
+	// =========================
+	async function commit(next: readonly string[]) {
+		if (next === tags) return;
+		pending = [...next];
+		try {
+			await onchange([...next]);
+		} finally {
+			pending = null;
+		}
+	}
+
+	function start() {
+		if (disabled) return;
+		editing = true;
+		queueMicrotask(() => input?.focus());
+	}
+
+	// Leaving the field keeps what was typed only when it is an existing label said another way.
+	// Anything else is dropped: free text is never saved by walking away.
+	function stop() {
+		const typed = query;
+		query = "";
+		editing = false;
+		const match = findOption(options, typed);
+		if (match) void commit(addTag(tags, match, options, max));
+	}
+
+	function add(name: string) {
+		query = "";
+		active = 0;
+		void commit(addTag(tags, name, options, max));
+	}
+
+	function onKey(event: KeyboardEvent) {
+		const last = rows.length - 1;
+		if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+			if (rows.length === 0) return;
+			event.preventDefault();
+			const step = event.key === "ArrowDown" ? 1 : -1;
+			active = (active + step + rows.length) % rows.length;
+		} else if (event.key === "Enter") {
+			event.preventDefault();
+			// The highlighted row: a close option when there is one, else the visible Create row.
+			if (!query.trim()) stop();
+			else if (rows.length > 0) add(rows[Math.min(active, last)].name);
+		} else if (event.key === "," || (event.key === "Tab" && query.trim())) {
+			event.preventDefault();
+			if (query.trim() && rows.length > 0) add(rows[Math.min(active, last)].name);
+		} else if (event.key === "Backspace" && query === "" && tags.length > 0) {
+			void commit(removeTag(tags, tags[tags.length - 1]));
+		} else if (event.key === "Escape") {
+			event.preventDefault();
+			if (query) query = "";
+			else {
+				editing = false;
+				root?.querySelector("button")?.focus();
+			}
+		}
+	}
+
+	// Pasted words that are existing labels are added. The rest stay in the box to be created on purpose.
+	function onPaste(event: ClipboardEvent) {
+		const pasted = event.clipboardData?.getData("text") ?? "";
+		if (!/[,\n]/.test(pasted)) return;
+		event.preventDefault();
+		const parts = splitTags(pasted);
+		const known = parts.filter((part) => findOption(options, part));
+		const rest = parts.filter((part) => !findOption(options, part));
+		query = rest.join(", ");
+		void commit(
+			known.reduce((list, part) => addTag(list, part, options, max), tags as readonly string[]),
+		);
+	}
+
+	function onFocusOut(event: FocusEvent) {
+		const next = event.relatedTarget as Node | null;
+		if (editing && !(next && root?.contains(next))) stop();
+	}
+
+	// A new query starts from its best match.
+	$effect(() => {
+		void query;
+		active = 0;
+	});
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- WHY: the edit frame is --radius-lg with 4px of padding, so the chip inside is --radius-xs
+     (8 - 4), and a read-state chip on its own takes --radius-sm. -->
+<!-- WHY text-base on the input: below 16px iOS zooms the page when it gets focus. -->
+<!-- =========================== -->
+{#snippet chip(tag: string, removable: boolean)}
+	<span
+		class={cn(
+			"inline-flex h-5 max-w-full items-center gap-0.5 bg-muted px-1.5 text-xs font-medium text-foreground",
+			removable ? "rounded-(--radius-xs) pr-0.5" : "rounded-(--radius-sm)",
+		)}
+	>
+		<span class="truncate">{tag}</span>
+		{#if removable}
+			<button
+				type="button"
+				tabindex="-1"
+				class="relative grid size-4 shrink-0 place-items-center rounded-(--radius-xs) text-muted-foreground transition-colors hover:bg-foreground/10 hover:text-foreground before:absolute before:-inset-1.5 before:content-['']"
+				aria-label={text.remove(tag)}
+				onmousedown={(e) => e.preventDefault()}
+				onclick={() => commit(removeTag(tags, tag))}
+			>
+				<X class="size-3" weight="bold" aria-hidden="true" />
+			</button>
+		{/if}
+	</span>
+{/snippet}
+
+<div
+	bind:this={root}
+	class={cn("relative min-w-0", className)}
+	onfocusout={onFocusOut}
+	role="presentation"
+>
+	{#if editing}
+		<div
+			class="-ml-1.5 flex min-h-7 flex-wrap items-center gap-1 rounded-lg bg-background p-1 ring-1 ring-ring/60 focus-within:ring-2 focus-within:ring-ring"
+		>
+			{#each tags as tag (tag.toLowerCase())}
+				{@render chip(tag, true)}
+			{/each}
+			{#if full}
+				<span class="px-1 text-xs text-muted-foreground">{text.max}</span>
+			{:else}
+				<input
+					bind:this={input}
+					bind:value={query}
+					type="text"
+					role="combobox"
+					aria-label={label}
+					aria-expanded={open}
+					aria-controls={listId}
+					aria-autocomplete="list"
+					aria-activedescendant={open ? `${listId}-${active}` : undefined}
+					autocomplete="off"
+					autocapitalize="off"
+					spellcheck="false"
+					enterkeyhint="done"
+					placeholder={tags.length === 0 ? text.add : ""}
+					class="h-5 min-w-16 flex-1 bg-transparent px-1 text-base outline-none placeholder:text-muted-foreground sm:text-xs"
+					onkeydown={onKey}
+					onpaste={onPaste}
+				/>
+			{/if}
+		</div>
+		{#if open}
+			<ul
+				id={listId}
+				role="listbox"
+				aria-label={label}
+				class="absolute top-full left-0 z-50 mt-1 max-h-60 w-full min-w-48 overflow-y-auto rounded-xl border border-border bg-popover p-1 text-popover-foreground shadow-(--elev-overlay)"
+			>
+				{#each rows as row, index (row.kind + row.name)}
+					<!-- svelte-ignore a11y_click_events_have_key_events -->
+					<li
+						id="{listId}-{index}"
+						role="option"
+						aria-selected={index === active}
+						class={cn(
+							"flex min-h-8 cursor-default items-center gap-2 rounded-lg px-2 text-sm any-pointer-coarse:min-h-11",
+							index === active && "bg-accent text-accent-foreground",
+						)}
+						onmousedown={(e) => e.preventDefault()}
+						onmousemove={() => (active = index)}
+						onclick={() => add(row.name)}
+					>
+						{#if row.kind === "create"}
+							<Plus class="size-3.5 shrink-0 text-muted-foreground" aria-hidden="true" />
+							<span class="truncate">{text.create(row.name)}</span>
+						{:else}
+							<span class="truncate">{row.name}</span>
+						{/if}
+					</li>
+				{/each}
+				{#if nothing}
+					<li class="flex min-h-8 items-center px-2 text-sm text-muted-foreground">{text.none}</li>
+				{/if}
+			</ul>
+		{/if}
+	{:else}
+		<button
+			type="button"
+			class={cn(
+				"-ml-1.5 flex min-h-7 w-full flex-wrap items-center gap-1 rounded-lg px-1.5 py-1 text-left transition-colors outline-none hover:bg-muted/60 focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none",
+			)}
+			aria-label={label}
+			{disabled}
+			onclick={start}
+		>
+			{#each tags as tag (tag.toLowerCase())}
+				{@render chip(tag, false)}
+			{:else}
+				<span class="text-sm text-muted-foreground">{text.add}</span>
+			{/each}
+		</button>
+	{/if}
+</div>

package/src/components/tags-input/tags.test.ts

@@ -0,0 +1,64 @@
+import { describe, expect, it } from "vite-plus/test";
+import {
+  addTag,
+  canCreate,
+  cleanTags,
+  collectOptions,
+  editDistance,
+  matchOptions,
+  removeTag,
+  splitTags,
+} from "./tags.js";
+
+const options = ["Airtable", "Docusign", "QuickBooks", "SharePoint", "Supabase"];
+
+describe("tags as labels", () => {
+  it("splits on commas and newlines", () => {
+    expect(splitTags(" a, b,,\nc ,")).toEqual(["a", "b", "c"]);
+  });
+
+  it("counts a transposition as one edit", () => {
+    expect(editDistance("airtbale", "airtable")).toBe(1);
+    expect(editDistance("make", "airtable")).toBeGreaterThan(2);
+  });
+
+  it("picks the option's spelling for a case or spacing difference", () => {
+    expect(addTag([], "airtable", options)).toEqual(["Airtable"]);
+    expect(addTag([], "share point", options)).toEqual(["SharePoint"]);
+    const held = ["Airtable"];
+    expect(addTag(held, "AIRTABLE", options)).toBe(held);
+  });
+
+  it("puts a near miss first and never offers a held option", () => {
+    expect(matchOptions(options, [], "Airtabel")[0]).toBe("Airtable");
+    expect(matchOptions(options, ["Airtable"], "airtable")).toEqual([]);
+    expect(matchOptions(options, [], "su")).toEqual(["Supabase"]);
+  });
+
+  it("ranks the same word, a prefix, then a part", () => {
+    expect(matchOptions(["QuickBooks", "Books", "Booksy"], [], "books")).toEqual([
+      "Books",
+      "Booksy",
+      "QuickBooks",
+    ]);
+  });
+
+  it("offers create only for a new word, and only when allowed", () => {
+    expect(canCreate(options, [], "airtable")).toBe(false);
+    expect(canCreate(options, [], "Airtabel")).toBe(true);
+    expect(canCreate(options, [], "Make", false)).toBe(false);
+  });
+
+  it("stops at max and removes by any casing", () => {
+    expect(addTag(["a", "b"], "c", [], 2)).toEqual(["a", "b"]);
+    expect(removeTag(["Airtable"], "airtable")).toEqual([]);
+  });
+
+  it("collapses a stored list and collects the most used spelling", () => {
+    expect(cleanTags(["docusign", "Docusign"], options)).toEqual(["Docusign"]);
+    expect(collectOptions([["Quickbooks"], ["QuickBooks", "Docusign"], ["QuickBooks"]])).toEqual([
+      "Docusign",
+      "QuickBooks",
+    ]);
+  });
+});

package/src/components/tags-input/tags.ts

@@ -0,0 +1,142 @@
+// The tag list's rules, with no DOM. Options are the values already used, so a spelling gets picked,
+// never retyped, and a new tag is a deliberate act.
+
+/** Splits typed or pasted text on commas and newlines, trimmed, empties dropped. */
+export function splitTags(text: string): string[] {
+  return text
+    .split(/[,\n]/)
+    .map((part) => part.trim())
+    .filter(Boolean);
+}
+
+/** What two spellings are compared by: no case, no spaces, no marks ("Share Point" is "SharePoint"). */
+export function fold(text: string): string {
+  return text
+    .normalize("NFD")
+    .replace(/\p{M}/gu, "")
+    .toLowerCase()
+    .replace(/[\s._-]+/g, "");
+}
+
+const same = (a: string, b: string) => fold(a) === fold(b);
+
+/** Edits (insert, delete, replace, swap of neighbours) between two strings, stopping past `limit`. */
+export function editDistance(a: string, b: string, limit = 2): number {
+  if (Math.abs(a.length - b.length) > limit) return limit + 1;
+  let prev2: number[] = [];
+  let prev = Array.from({ length: b.length + 1 }, (_, j) => j);
+  for (let i = 1; i <= a.length; i++) {
+    const row = [i];
+    for (let j = 1; j <= b.length; j++) {
+      let d = Math.min(prev[j] + 1, row[j - 1] + 1, prev[j - 1] + (a[i - 1] === b[j - 1] ? 0 : 1));
+      if (i > 1 && j > 1 && a[i - 1] === b[j - 2] && a[i - 2] === b[j - 1])
+        d = Math.min(d, prev2[j - 2] + 1);
+      row.push(d);
+    }
+    prev2 = prev;
+    prev = row;
+  }
+  return prev[b.length];
+}
+
+/** How close `query` is to `option`: 0 the same, 1 a prefix, 2 contained, 3 a typo away, else null. */
+function rank(option: string, query: string): number | null {
+  const o = fold(option);
+  const q = fold(query);
+  if (o === q) return 0;
+  if (o.startsWith(q)) return 1;
+  if (o.includes(q)) return 2;
+  // One edit for a short word, two from 7 letters, and not at all for 3 or fewer.
+  const limit = q.length >= 7 ? 2 : q.length >= 4 ? 1 : 0;
+  return limit > 0 && editDistance(o, q, limit) <= limit ? 3 : null;
+}
+
+/**
+ * The options to offer for what's typed, closest first, from exact match down to a typo away.
+ * Options already on the field are left out.
+ */
+export function matchOptions(
+  options: readonly string[],
+  tags: readonly string[],
+  query: string,
+  limit = 8,
+): string[] {
+  const open = options.filter((option) => !tags.some((held) => same(held, option)));
+  if (!query.trim()) return open.slice(0, limit);
+  return open
+    .flatMap((option) => {
+      const r = rank(option, query);
+      return r === null ? [] : [{ option, r }];
+    })
+    .sort((a, b) => a.r - b.r)
+    .map(({ option }) => option)
+    .slice(0, limit);
+}
+
+/** The existing option that is `input` apart from case, spacing and marks, or undefined. */
+export function findOption(options: readonly string[], input: string): string | undefined {
+  return options.find((option) => same(option, input));
+}
+
+/**
+ * Whether typing `query` may offer "Create": never for a word an option or tag already is. A
+ * typo's close option shows above it, never instead.
+ */
+export function canCreate(
+  options: readonly string[],
+  tags: readonly string[],
+  query: string,
+  allowCreate = true,
+): boolean {
+  return (
+    allowCreate && query.trim() !== "" && ![...options, ...tags].some((held) => same(held, query))
+  );
+}
+
+/**
+ * The list after adding the option `name`, in the option's spelling. A repeat returns the same
+ * array, so a caller can skip the save.
+ */
+export function addTag(
+  tags: readonly string[],
+  name: string,
+  options: readonly string[] = [],
+  max?: number,
+): readonly string[] {
+  const tag = findOption(options, name) ?? name.trim();
+  if (!tag || tags.some((held) => same(held, tag))) return tags;
+  if (max !== undefined && tags.length >= max) return tags;
+  return [...tags, tag];
+}
+
+/** The list without `tag`, whatever its casing. */
+export function removeTag(tags: readonly string[], tag: string): string[] {
+  return tags.filter((held) => !same(held, tag));
+}
+
+/**
+ * Collapses spellings of one word to the first, and takes an option's spelling when one matches.
+ * For a list that was stored before the options existed.
+ */
+export function cleanTags(tags: readonly string[], options: readonly string[] = []): string[] {
+  return tags.reduce<string[]>((out, tag) => [...addTag(out, tag, options)], []);
+}
+
+/**
+ * The distinct values across many lists, one spelling each: the most used wins, then the first
+ * seen. This is what an "existing values" field offers as its options.
+ */
+export function collectOptions(lists: Iterable<readonly string[]>): string[] {
+  const seen = new Map<string, Map<string, number>>();
+  for (const list of lists)
+    for (const raw of list) {
+      const tag = raw.trim();
+      if (!tag) continue;
+      const spellings = seen.get(fold(tag)) ?? new Map<string, number>();
+      spellings.set(tag, (spellings.get(tag) ?? 0) + 1);
+      seen.set(fold(tag), spellings);
+    }
+  return [...seen.values()]
+    .map((spellings) => [...spellings].sort((a, b) => b[1] - a[1])[0][0])
+    .sort((a, b) => a.localeCompare(b));
+}

package/src/components/theme/index.ts

@@ -1,8 +1,6 @@
 /**
- * The one light and dark system: mode-watcher's store and no-flash script, behind one provider.
- * Mount `ThemeProvider` once in the root layout, flip the mode with `toggleMode` or `setMode`, and
- * read it from `mode.current` or `userPrefersMode.current`. `ThemeToggle` and `revealTheme`
- * draw the control and the wipe.
+ * The one light and dark system, wrapping mode-watcher. Mount `ThemeProvider` once in the root
+ * layout, or the no-flash script never runs.
  */
 export { default as ThemeProvider } from "./theme-provider.svelte";
 export { revealTheme } from "../../lib/theme-transition.js";

package/src/components/theme/theme-provider.svelte

@@ -42,8 +42,6 @@
 	});
 </script>
 
-<!-- WHY it renders ModeWatcher and nothing else: its inline head script sets the class and
-     colour-scheme before the first paint, so there is no flash and no cookie to read.
-     WHY synchronous: `revealTheme` snapshots the page the moment its callback returns, so the
+<!-- WHY synchronous: `revealTheme` snapshots the page the moment its callback returns, so the
      class has to be on the root by then. -->
 <ModeWatcher defaultMode={initial} {synchronousModeChanges} {...watcher} />

package/src/components/toolbar/index.ts

@@ -3,3 +3,5 @@
  * each of those folds into a menu and the row never wraps.
  */
 export { default as Toolbar } from "./toolbar.svelte";
+export { default as ToolbarSearch } from "./toolbar-search.svelte";
+export { toolbarTriggerClass } from "./toolbar-trigger.js";

package/src/components/{list-page → toolbar}/toolbar-search.svelte

@@ -1,30 +1,30 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import { Input } from "../../shadcn/input/index.js";
-import { MagnifyingGlass } from "phosphor-svelte";
-import { cn } from "../../lib/utils.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import { Input } from "../../shadcn/input/index.js";
+	import { MagnifyingGlass } from "phosphor-svelte";
+	import { cn } from "../../lib/utils.js";
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	value: string;
-	placeholder?: string;
-	size?: "sm" | "default";
-	class?: string;
-};
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		value: string;
+		placeholder?: string;
+		size?: "sm" | "default";
+		class?: string;
+	}
 
-// =========================
-// PROPS
-// =========================
-let {
-	value = $bindable(""),
-	placeholder = "Search...",
-	size = "default",
-	class: extraClass,
-}: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		value = $bindable(""),
+		placeholder = "Search...",
+		size = "default",
+		class: extraClass,
+	}: Props = $props();
 </script>
 
 <!-- =========================== -->
@@ -39,7 +39,7 @@ let {
 	class={cn(
 		"relative",
 		extraClass,
-		"@max-3xl/toolbar:w-auto @max-3xl/toolbar:min-w-0 @max-3xl/toolbar:flex-1"
+		"@max-3xl/toolbar:w-auto @max-3xl/toolbar:min-w-0 @max-3xl/toolbar:flex-1",
 	)}
 >
 	<MagnifyingGlass

package/src/components/toolbar/toolbar.svelte

@@ -6,8 +6,8 @@
 	import { CaretDown, MagnifyingGlass } from "phosphor-svelte";
 	import { SegmentedFilter } from "../segmented/index.js";
 	import type { TabDef } from "../segmented/animated-tabs.svelte";
-	import { toolbarTriggerClass } from "../list-page/toolbar-trigger.js";
-	import ToolbarSearch from "../list-page/toolbar-search.svelte";
+	import { toolbarTriggerClass } from "./toolbar-trigger.js";
+	import ToolbarSearch from "./toolbar-search.svelte";
 	import { Input } from "../../shadcn/input/index.js";
 	import * as DropdownMenu from "../../shadcn/dropdown-menu/index.js";
 	import * as Popover from "../../shadcn/popover/index.js";
@@ -66,11 +66,8 @@
 <!-- =========================== -->
 <!-- MARKUP -->
 <!-- =========================== -->
-<!-- WHY a container query: the toolbar sits in a pane that is narrower than the screen, and a
-     breakpoint reads the screen. WHY nowrap: a second row pushes the content down and moves the
-     page as a search is opened. Search, tabs and view are the three that fold, each into the one
-     menu that holds them; both forms are in the DOM and the query shows one, so there is no
-     measuring and no flash on first paint. -->
+<!-- A container query, not a breakpoint, because the toolbar sits in a pane narrower than the
+     screen; both forms stay in the DOM, so nothing flashes. -->
 <div class={cn("@container/toolbar min-w-0", className)}>
 	<div class="flex flex-nowrap items-center gap-2">
 		{#if search !== undefined}
@@ -85,7 +82,12 @@
 					<MagnifyingGlass class="size-3.5" aria-hidden="true" />
 				</Popover.Trigger>
 				<Popover.Content align="start" class="w-64 p-2">
-					<Input bind:value={search} placeholder={searchPlaceholder} aria-label={searchLabel} class="h-8" />
+					<Input
+						bind:value={search}
+						placeholder={searchPlaceholder}
+						aria-label={searchLabel}
+						class="h-8"
+					/>
 				</Popover.Content>
 			</Popover.Root>
 		{/if}
@@ -112,7 +114,9 @@
 							<DropdownMenu.RadioItem value={item.value}>
 								{item.label}
 								{#if item.count != null}
-									<span class="ms-auto pe-2 text-xs text-muted-foreground tabular-nums">{item.count}</span>
+									<span class="ms-auto pe-2 text-xs text-muted-foreground tabular-nums"
+										>{item.count}</span
+									>
 								{/if}
 							</DropdownMenu.RadioItem>
 						{/each}

package/src/components/toolbar/toolbar.test.ts

@@ -45,7 +45,16 @@ describe("Toolbar", () => {
   });
 
   it("names the narrow controls so a screen reader can find them", () => {
-    const root = render({ search: "", tabs, tab: "all", views, view: "list", searchLabel: "Find", tabsLabel: "Status", viewLabel: "Layout" });
+    const root = render({
+      search: "",
+      tabs,
+      tab: "all",
+      views,
+      view: "list",
+      searchLabel: "Find",
+      tabsLabel: "Status",
+      viewLabel: "Layout",
+    });
     for (const label of ["Find", "Status", "Layout"]) {
       expect(root.querySelector(`button[aria-label="${label}"]`), label).not.toBeNull();
     }