From 53e54aa267dbfb427e8818cb0988d4c43b8d90a1 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Thu, 6 Aug 2026 13:37:38 +0300
Subject: [PATCH] web/components: add rich mode to Input

Signed-off-by: eti <eti@eti.tf>
---
 .../lib/components/ui/Input.stories.svelte    | 119 +++
 web/src/lib/components/ui/Input.svelte        | 163 +++--
 web/src/lib/components/ui/TagInput.svelte     | 677 ++++++++++++++++++
 web/src/lib/components/ui/inputField.ts       |  55 ++
 .../settings/profile/handle/+page.svelte      |   3 +-
 5 files changed, 953 insertions(+), 64 deletions(-)
 create mode 100644 web/src/lib/components/ui/TagInput.svelte
 create mode 100644 web/src/lib/components/ui/inputField.ts

diff --git a/web/src/lib/components/ui/Input.stories.svelte b/web/src/lib/components/ui/Input.stories.svelte
index 9d8cd0078..f5890741f 100644
--- a/web/src/lib/components/ui/Input.stories.svelte
+++ b/web/src/lib/components/ui/Input.stories.svelte
@@ -2,8 +2,11 @@
 	import { defineMeta } from "@storybook/addon-svelte-csf";
 	import Search from "$icon/search";
 	import Mail from "$icon/mail";
+	import Tag from "$icon/tag";
 	import Button from "./Button.svelte";
 	import Input from "./Input.svelte";
+	import User from "./User.svelte";
+	import type { InputTag } from "./inputField";
 
 	const { Story } = defineMeta({
 		title: "UI/Input",
@@ -17,6 +20,7 @@
 			error: { control: "boolean" },
 			disabled: { control: "boolean" },
 			loading: { control: "boolean" },
+			rich: { control: "boolean" },
 			placeholder: { control: "text" }
 		},
 		args: {
@@ -24,11 +28,31 @@
 			error: false,
 			disabled: false,
 			loading: false,
+			rich: false,
 			placeholder: "Placeholder"
 		}
 	});
 </script>
 
+<script lang="ts">
+	let topics = $state<InputTag[]>([{ value: "svelte" }, { value: "motion" }]);
+	let filters = $state<InputTag[]>([
+		{ field: "author", value: "eti", color: "info" },
+		{ field: "label", value: "needs-review", color: "warning" }
+	]);
+	let reviewers = $state<InputTag[]>([{ value: "eti.tf" }]);
+	let capped = $state<InputTag[]>([{ value: "one" }, { value: "two" }]);
+
+	const people = [
+		"eti.tf",
+		"oppi.li",
+		"icyphox.sh",
+		"seongmin.bsky.social",
+		"akshay.tangled.sh",
+		"nikhil.tangled.sh"
+	].map((handle) => ({ value: handle }));
+</script>
+
 <Story name="Default" />
 <Story name="Focus" args={{ autofocus: true }} />
 <Story name="Filled" args={{ value: "Filled value" }} />
@@ -67,3 +91,98 @@
 		{/each}
 	</div>
 </Story>
+
+<!-- rich mode: Enter or a comma commits the draft, Backspace highlights the last chip and a
+     second Backspace takes it. -->
+<Story name="Rich" asChild>
+	<div class="max-w-md">
+		<Input
+			rich
+			bind:tags={topics}
+			label="Topics"
+			placeholder="Add a topic"
+			hint="Enter adds · Backspace removes"
+		/>
+	</div>
+</Story>
+
+<!-- a `field` on a tag renders as a dim prefix, which is all it takes for the same array to read
+     as a filter bar. -->
+<Story name="Rich filters" asChild>
+	<div class="max-w-lg">
+		<Input
+			rich
+			bind:tags={filters}
+			iconLeft={Search}
+			label="Filters"
+			placeholder="Filter issues"
+			separators={[","]}
+		/>
+	</div>
+</Story>
+
+<!-- the point of the `tag` snippet: chips are whatever you render, here a typeahead over
+     User.svelte. Anything already picked drops out of the suggestions. -->
+<Story name="Rich user typeahead" asChild>
+	<div class="max-w-md">
+		<Input
+			rich
+			bind:tags={reviewers}
+			suggestions={people}
+			label="Reviewers"
+			placeholder="Add a reviewer"
+			hint="Pick from the list, or type a handle"
+			emptyLabel="No one left to add"
+		>
+			{#snippet tag(t)}
+				<User handle={t.value} size="regular" link={false} />
+			{/snippet}
+			{#snippet suggestion(t)}
+				<User handle={t.value} size="regular" link={false} />
+			{/snippet}
+		</Input>
+	</div>
+</Story>
+
+<!-- max shows a counter and turns further drafts away; validate vets the rest. Both cross-fade
+     their reason over the hint and put it back after a moment. -->
+<Story name="Rich limits" asChild>
+	<div class="max-w-md">
+		<Input
+			rich
+			bind:tags={capped}
+			maxTags={4}
+			hint="Up to four, 12 characters each"
+			placeholder="Add a tag"
+			validate={(v) => (v.length <= 12 ? true : "Keep it under 12 characters")}
+		/>
+	</div>
+</Story>
+
+<!-- the box is the same recipe either way, so the size ladder and the states carry over. -->
+<Story name="Rich sizes" asChild>
+	<div class="flex max-w-md flex-col gap-3">
+		{#each ["small", "regular", "large"] as const as s (s)}
+			<Input
+				rich
+				size={s}
+				iconLeft={Tag}
+				tags={[{ value: "svelte" }, { value: "tailwind" }]}
+				placeholder={s}
+			/>
+		{/each}
+	</div>
+</Story>
+
+<Story name="Rich states" asChild>
+	<div class="flex max-w-md flex-col gap-3">
+		<Input rich error tags={[{ value: "bad-input" }]} placeholder="Add a tag" />
+		<Input
+			rich
+			disabled
+			tags={[{ value: "locked" }, { value: "read-only" }]}
+			placeholder="Add a tag"
+		/>
+		<Input rich loading tags={[{ value: "checking" }]} placeholder="Add a tag" />
+	</div>
+</Story>
diff --git a/web/src/lib/components/ui/Input.svelte b/web/src/lib/components/ui/Input.svelte
index 95eadd898..710be6191 100644
--- a/web/src/lib/components/ui/Input.svelte
+++ b/web/src/lib/components/ui/Input.svelte
@@ -1,47 +1,13 @@
-<script module lang="ts">
-	import { tv, type VariantProps } from "tailwind-variants";
-
-	export const inputField = tv({
-		base: "flex items-center rounded-sm border bg-background-default transition-colors",
-		variants: {
-			// same 32/36/40 heights as Button's small/regular/large, so an input and a button of
-			// the same size line up in a row. line-height + py + border stays under each min-h, so
-			// the field sits exactly on that height whatever it holds. horizontal padding runs one
-			// step tighter than Button's — a button centres its label and needs the room, a
-			// field's text is left-aligned against the border.
-			size: {
-				small: "min-h-8 gap-1.5 px-1.5 py-1 typography-paragraph-small",
-				regular: "min-h-9 gap-2 px-2 py-1 typography-paragraph-regular",
-				large: "min-h-10 gap-2.5 px-3 py-1 typography-paragraph-large"
-			},
-			error: {
-				false:
-					"border-border-default focus-within:border-border-strong focus-within:ring-1 focus-within:ring-border-strong",
-				true: "border-border-danger bg-background-danger-subtle text-foreground-danger focus-within:border-border-focus-danger focus-within:ring-1 focus-within:ring-border-focus-danger"
-			},
-			disabled: {
-				false: "",
-				true: "cursor-not-allowed bg-background-inset text-foreground-disabled"
-			}
-		},
-		defaultVariants: {
-			size: "regular",
-			error: false,
-			disabled: false
-		}
-	});
-
-	export type InputFieldVariants = VariantProps<typeof inputField>;
-</script>
-
 <script lang="ts">
-	import type { Component } from "svelte";
+	// inputField and InputTag live in ./inputField, which owns what both renderings read;
+	// re-exporting them from here trips eslint's no-import-assign on module scripts
+	import type { Component, Snippet } from "svelte";
 	import type { HTMLInputAttributes, SvelteHTMLElements } from "svelte/elements";
+	import { inputField, type InputFieldVariants, type InputTag } from "./inputField";
 	import Spinner from "./Spinner.svelte";
+	import TagInput from "./TagInput.svelte";
 
-	// `size` shadows the native character-width attribute, which nothing here uses and which
-	// no design would reach for over a width class
-	interface Props extends Omit<HTMLInputAttributes, "class" | "value" | "size"> {
+	interface Props extends Omit<HTMLInputAttributes, "class" | "value" | "size" | "list"> {
 		value?: string;
 		size?: InputFieldVariants["size"];
 		error?: boolean;
@@ -49,11 +15,37 @@
 		loading?: boolean;
 		iconLeft?: Component<SvelteHTMLElements["svg"]>;
 		iconRight?: Component<SvelteHTMLElements["svg"]>;
-		/** static, non-editable trailing text shown inside the field, e.g. a domain suffix */
 		suffix?: string;
-		/** the input itself, for callers that have to focus or measure it */
 		element?: HTMLInputElement;
 		class?: string;
+		/** Turn the field into a token editor: it still takes a draft, but what's committed lands
+		 *  as a removable chip beside the caret. Same box, same states — reach for it once one
+		 *  value stops being enough. */
+		rich?: boolean;
+		// rich only
+		/** two-way; the tokens the field holds. A bare `value` is a tag, a `field` makes it a filter. */
+		tags?: InputTag[];
+		/** hard ceiling on tags; native `max` still reaches the plain input */
+		maxTags?: number;
+		separators?: string[];
+		allowDuplicates?: boolean;
+		/** vet a candidate before it lands; return a string to say why it didn't */
+		validate?: (value: string) => boolean | string;
+		/** typeahead source. Anything already added is dropped from the list. */
+		suggestions?: InputTag[];
+		/** take filtering over, e.g. to query a server: `suggestions` is then rendered as given */
+		onSearch?: (query: string) => void;
+		onAdd?: (tag: InputTag) => void;
+		onRemove?: (tag: InputTag) => void;
+		/** persistent helper text; a rejection cross-fades over it */
+		hint?: string;
+		emptyLabel?: string;
+		label?: string;
+		panelClass?: string;
+		/** the body of a chip — this is where a User, a ColorBall, an avatar stack goes */
+		tag?: Snippet<[InputTag]>;
+		/** the body of a suggestion row; defaults to the chip's rendering */
+		suggestion?: Snippet<[InputTag]>;
 	}
 
 	let {
@@ -67,35 +59,80 @@
 		suffix,
 		element = $bindable(),
 		class: className,
+		rich = false,
+		tags = $bindable([]),
+		maxTags,
+		separators,
+		allowDuplicates,
+		validate,
+		suggestions,
+		onSearch,
+		onAdd,
+		onRemove,
+		hint,
+		emptyLabel,
+		label,
+		panelClass,
+		tag,
+		suggestion,
 		...rest
 	}: Props = $props();
 
 	const classes = $derived(inputField({ size, error, disabled, class: className }));
-	// matches Button: the icon only steps up on large
 	const iconSize = $derived(size === "large" ? "size-5" : "size-4");
 </script>
 
-<div class={classes}>
-	{#if iconLeft}
-		{@const IconLeft = iconLeft}
-		<IconLeft class="{iconSize} shrink-0 text-foreground-subtle" aria-hidden="true" />
-	{/if}
-	<input
-		bind:this={element}
+{#if rich}
+	<TagInput
+		bind:tags
 		bind:value
+		bind:element
+		{size}
+		{error}
 		{disabled}
-		aria-invalid={error}
-		aria-busy={loading}
-		class="mt-px min-w-0 flex-1 bg-transparent outline-none placeholder:text-foreground-placeholder disabled:cursor-not-allowed"
+		{loading}
+		{iconLeft}
+		{maxTags}
+		{separators}
+		{allowDuplicates}
+		{validate}
+		{suggestions}
+		{onSearch}
+		{onAdd}
+		{onRemove}
+		{hint}
+		{emptyLabel}
+		{label}
+		{panelClass}
+		{tag}
+		{suggestion}
+		class={className}
 		{...rest}
 	/>
-	{#if suffix}
-		<span class="shrink-0 text-foreground-muted select-none">{suffix}</span>
-	{/if}
-	{#if loading}
-		<Spinner class="{iconSize} shrink-0" />
-	{:else if iconRight}
-		{@const IconRight = iconRight}
-		<IconRight class="{iconSize} shrink-0 text-foreground-subtle" aria-hidden="true" />
-	{/if}
-</div>
+{:else}
+	<div class={classes}>
+		{#if iconLeft}
+			{@const IconLeft = iconLeft}
+			<IconLeft class="{iconSize} shrink-0 text-foreground-subtle" aria-hidden="true" />
+		{/if}
+		<input
+			bind:this={element}
+			bind:value
+			{disabled}
+			aria-invalid={error}
+			aria-busy={loading}
+			aria-label={label}
+			class="mt-px min-w-0 flex-1 bg-transparent outline-none placeholder:text-foreground-placeholder disabled:cursor-not-allowed"
+			{...rest}
+		/>
+		{#if suffix}
+			<span class="shrink-0 text-foreground-muted select-none">{suffix}</span>
+		{/if}
+		{#if loading}
+			<Spinner class="{iconSize} shrink-0" />
+		{:else if iconRight}
+			{@const IconRight = iconRight}
+			<IconRight class="{iconSize} shrink-0 text-foreground-subtle" aria-hidden="true" />
+		{/if}
+	</div>
+{/if}
diff --git a/web/src/lib/components/ui/TagInput.svelte b/web/src/lib/components/ui/TagInput.svelte
new file mode 100644
index 000000000..d5abd35c5
--- /dev/null
+++ b/web/src/lib/components/ui/TagInput.svelte
@@ -0,0 +1,677 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	// the box, its border and its state colours come from inputField, shared with the plain
+	// rendering so flipping `rich` on an Input cannot change how the field looks
+	export const tagInput = tv({
+		slots: {
+			root: "relative inline-flex w-full flex-col",
+			// content-center is what centres a single row of tags on the min-h the size sets,
+			// the way a plain input centres its text
+			list: "flex min-w-0 flex-1 flex-wrap content-center items-center",
+			item: "flex min-w-0",
+			draftItem: "flex min-w-0 flex-1 items-center",
+			chip: "max-w-full",
+			// the leading icon pins to the first row rather than centring across all of them,
+			// so it stays put as tags wrap
+			icon: "text-foreground-subtle",
+			// dimmed off the chip's own colour rather than a fixed token: a filter can sit on any
+			// of Tag's six fills, and a muted grey goes muddy on the coloured ones in dark
+			field: "shrink-0 opacity-70",
+			label: "truncate",
+			remove:
+				"-mr-0.5 flex shrink-0 p-0 min-h-0 rounded-xs text-foreground-inherit transition-colors focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-border-focus",
+			draft:
+				"w-full min-w-0 bg-transparent outline-none placeholder:text-foreground-placeholder disabled:cursor-not-allowed",
+			panel:
+				"tag-panel fixed z-50 m-0 hidden max-h-[min(18rem,calc(100dvh-1rem))] w-72 max-w-[calc(100vw-1rem)] popover-transition flex-col overflow-hidden rounded-sm border border-border-default bg-background-default p-0 text-foreground-default open:flex",
+			options: "min-h-0 flex-1 overflow-y-auto p-1",
+			option:
+				"flex w-full cursor-pointer items-center gap-2 rounded-sm bg-transparent px-2 py-1.5 text-left data-active:bg-background-subtle",
+			optionLabel: "min-w-0 flex-1 truncate",
+			empty: "px-2 py-6 text-center text-foreground-muted",
+			footer: "mt-1.5 flex items-start gap-2",
+			// hint and rejection share one grid cell so one can cross-fade over the other
+			// without the footer changing height
+			message: "grid min-w-0 flex-1",
+			hint: "col-start-1 row-start-1 text-foreground-muted transition-opacity duration-200",
+			rejection: "col-start-1 row-start-1 text-foreground-danger transition-opacity duration-200",
+			counter: "shrink-0 text-foreground-subtle tabular-nums"
+		},
+		variants: {
+			size: {
+				small: {
+					list: "gap-1",
+					// basis, not min-width: a wrapping flex line only pushes an item to the next
+					// row when its basis won't fit, and flex-1 then lets it fill that row
+					draftItem: "basis-16",
+					footer: "typography-paragraph-mini",
+					panel: "typography-paragraph-small"
+				},
+				regular: {
+					list: "gap-1.5",
+					draftItem: "basis-20",
+					footer: "typography-paragraph-small",
+					panel: "typography-paragraph-regular"
+				},
+				large: {
+					list: "gap-1.5",
+					draftItem: "basis-24",
+					footer: "typography-paragraph-small",
+					panel: "typography-paragraph-regular"
+				}
+			}
+		},
+		defaultVariants: {
+			size: "regular"
+		}
+	});
+
+	export type TagInputVariants = VariantProps<typeof tagInput>;
+
+	// interior.dev's chip spring (stiffness 700, damping 46, mass 0.5) refitted to svelte/motion's
+	// per-frame coefficients, the same way Tabs and Pagination carry theirs — 0.4% rms off the
+	// original step response
+	const CHIP = { stiffness: 0.146, damping: 0.64 };
+	// how long the row takes to close over a chip that left — shared by the chips flipping into
+	// place and by the draft sliding after them
+	const REFLOW = 220;
+	// exit is a plain ease-in upstream too, so it stays a transition rather than a spring
+	const EXIT = 180;
+	// the leaving chip drifts a little way into the gap it vacates, as a share of its own width.
+	// Bounded, because a full width would slide it clean over its left-hand neighbour.
+	const EXIT_DRIFT = { share: 0.3, min: 10, max: 28 };
+	const REJECTION_LINGER = 2400;
+</script>
+
+<script lang="ts">
+	import X from "$icon/x";
+	import { tick, type Component, type Snippet } from "svelte";
+	import { flip } from "svelte/animate";
+	import { cubicIn, cubicOut } from "svelte/easing";
+	import type { HTMLInputAttributes, SvelteHTMLElements } from "svelte/elements";
+	import { Spring, prefersReducedMotion } from "svelte/motion";
+	import {
+		inputField,
+		type InputFieldVariants,
+		type InputTag,
+		type TagRejection
+	} from "$lib/components/ui/inputField";
+	import Spinner from "$lib/components/ui/Spinner.svelte";
+	import Tag from "$lib/components/ui/Tag.svelte";
+	import Button from "$lib/components/ui/Button.svelte";
+
+	interface Props extends Omit<HTMLInputAttributes, "class" | "value" | "size" | "list"> {
+		/** two-way; the tokens the field holds, tags and filters alike */
+		tags?: InputTag[];
+		/** two-way; the uncommitted draft sitting after the last tag */
+		value?: string;
+		size?: InputFieldVariants["size"];
+		error?: boolean;
+		disabled?: boolean;
+		loading?: boolean;
+		iconLeft?: Component<SvelteHTMLElements["svg"]>;
+		/** hard ceiling; shows a counter and turns further drafts away. Not `max`, which stays the
+		 *  native numeric attribute the plain rendering forwards. */
+		maxTags?: number;
+		/** characters that commit the draft as they're typed, and split a paste */
+		separators?: string[];
+		allowDuplicates?: boolean;
+		/** vet a candidate before it lands; return a string to say why it didn't */
+		validate?: (value: string) => boolean | string;
+		/** typeahead source. Anything already added is dropped from the list. */
+		suggestions?: InputTag[];
+		/** take filtering over, e.g. to query a server: `suggestions` is then rendered as given */
+		onSearch?: (query: string) => void;
+		onAdd?: (tag: InputTag) => void;
+		onRemove?: (tag: InputTag) => void;
+		/** persistent helper text; a rejection cross-fades over it */
+		hint?: string;
+		emptyLabel?: string;
+		/** names the field for screen readers */
+		label?: string;
+		/** the draft input, for callers that have to focus or measure it */
+		element?: HTMLInputElement;
+		class?: string;
+		panelClass?: string;
+		/** the body of a chip — this is where a User, a ColorBall, an avatar stack goes */
+		tag?: Snippet<[InputTag]>;
+		/** the body of a suggestion row; defaults to the chip's rendering */
+		suggestion?: Snippet<[InputTag]>;
+	}
+
+	let {
+		tags = $bindable([]),
+		value = $bindable(""),
+		size = "regular",
+		error = false,
+		disabled = false,
+		loading = false,
+		iconLeft,
+		maxTags,
+		separators = [","],
+		allowDuplicates = false,
+		validate,
+		suggestions = [],
+		onSearch,
+		onAdd,
+		onRemove,
+		hint,
+		emptyLabel = "No matches",
+		label,
+		element = $bindable(),
+		class: className,
+		panelClass,
+		tag: tagBody,
+		suggestion: suggestionBody,
+		...rest
+	}: Props = $props();
+
+	const panelId = $props.id();
+	const hintId = `${panelId}-hint`;
+	const optionsId = `${panelId}-options`;
+	const optionId = (index: number) => `${panelId}-option-${index}`;
+	// anchor-name has to be a unique custom ident per instance, so it cannot live in the
+	// stylesheet; naming it explicitly is also what keeps the panel off the viewport corner
+	const anchorName = `--tag-input-${panelId.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
+
+	/** index of the chip Backspace has highlighted but not yet removed, -1 for none */
+	let armed = $state(-1);
+	let rejection = $state<TagRejection>();
+	let rejectionDetail = $state<string>();
+	let rejectionTimer: ReturnType<typeof setTimeout>;
+	let announcement = $state("");
+	let draftFocused = $state(false);
+	/** Escape hides the panel without blurring, so it needs its own flag — reusing the focus
+	 *  one would keep the panel shut for the rest of the visit */
+	let dismissed = $state(false);
+	let activeIndex = $state(-1);
+
+	let panelEl = $state<HTMLElement>();
+	let optionsEl = $state<HTMLElement>();
+
+	// one spring covers both chip moments: a new chip springs up from 0.9, and a chip a duplicate
+	// landed on springs back down from 1.12. Only the chip at `popIndex` reads it, so there is no
+	// need for one spring per tag.
+	const pop = new Spring({ scale: 1, opacity: 1 }, CHIP);
+	let popIndex = $state(-1);
+
+	const atLimit = $derived(maxTags !== undefined && tags.length >= maxTags);
+	// what makes two tags the same tag: the pair, not the two halves glued together. A value
+	// is free to contain spaces, so joining on one would let `author` + `a b` collide with
+	// `author a` + `b`.
+	const identity = (tag: InputTag) => JSON.stringify([tag.field ?? "", tag.value]);
+	const chosen = $derived(new Set(tags.map(identity)));
+
+	const query = $derived(value.trim().toLowerCase());
+	const visible = $derived(
+		(onSearch || query === ""
+			? suggestions
+			: suggestions.filter(
+					(option) =>
+						(option.label ?? option.value).toLowerCase().includes(query) ||
+						option.value.toLowerCase().includes(query)
+				)
+		).filter((option) => allowDuplicates || !chosen.has(identity(option)))
+	);
+
+	// a duplicate value is legal when allowDuplicates is on, so the key carries which occurrence
+	// this is — otherwise the second copy collides with the first and the each block throws
+	const rows = $derived.by(() => {
+		// a null-prototype bag, not a Map: this is a throwaway counter inside the derived, and a
+		// plain object can't be mistaken for the reactive state SvelteMap exists for
+		const seen: Record<string, number> = Object.create(null);
+		return tags.map((tag, index) => {
+			const key = identity(tag);
+			const seq = seen[key] ?? 0;
+			seen[key] = seq + 1;
+			return { tag, index, key: seq === 0 ? key : `${key}#${seq}` };
+		});
+	});
+
+	const box = $derived(inputField({ size, error, disabled, rich: true, class: className }));
+	const slots = $derived(tagInput({ size }));
+	const iconSize = $derived(size === "large" ? "size-5" : "size-4");
+	const glyphSize = $derived(size === "large" ? "size-3.5" : "size-3");
+
+	const splitter = $derived(
+		new RegExp(`[${separators.map((s) => s.replace(/[.*+?^${}()|[\]\\-]/g, "\\$&")).join("")}]`)
+	);
+
+	const clean = (raw: string) => raw.trim().replace(/\s+/g, " ");
+	const labelOf = (tag: InputTag) => tag.label ?? tag.value;
+
+	const reject = (reason: TagRejection, detail?: string) => {
+		rejection = reason;
+		rejectionDetail = detail;
+		clearTimeout(rejectionTimer);
+		rejectionTimer = setTimeout(() => {
+			rejection = undefined;
+			rejectionDetail = undefined;
+		}, REJECTION_LINGER);
+	};
+
+	const springTo = (index: number, from: { scale: number; opacity: number }) => {
+		popIndex = index;
+		if (prefersReducedMotion.current) return;
+		pop.set(from, { instant: true });
+		pop.target = { scale: 1, opacity: 1 };
+	};
+
+	/** Commit a candidate. Returns whether it landed, so the caller knows to clear the draft. */
+	const add = (candidate: InputTag | string) => {
+		if (disabled) return false;
+
+		const draft = typeof candidate === "string" ? { value: candidate } : candidate;
+		const tag = { ...draft, value: clean(draft.value) };
+		if (tag.value === "") return false;
+
+		if (atLimit) {
+			reject("limit");
+			return false;
+		}
+
+		const clash = tags.findIndex((existing) => identity(existing) === identity(tag));
+		if (clash !== -1 && !allowDuplicates) {
+			reject("duplicate");
+			springTo(clash, { scale: 1.12, opacity: 1 });
+			return false;
+		}
+
+		const verdict = validate?.(tag.value);
+		if (verdict === false || typeof verdict === "string") {
+			reject("invalid", typeof verdict === "string" ? verdict : undefined);
+			return false;
+		}
+
+		sweepDraft(() => (tags = [...tags, tag]));
+		onAdd?.(tag);
+		announcement = `Added ${labelOf(tag)}`;
+		springTo(tags.length - 1, { scale: 0.9, opacity: 0 });
+		return true;
+	};
+
+	const removeAt = (index: number) => {
+		const tag = tags[index];
+		if (disabled || !tag) return;
+		sweepDraft(() => (tags = tags.toSpliced(index, 1)));
+		onRemove?.(tag);
+		announcement = `Removed ${labelOf(tag)}`;
+		armed = -1;
+		popIndex = -1;
+		element?.focus();
+	};
+
+	const pick = (option: InputTag) => {
+		if (add(option)) {
+			value = "";
+			if (element) element.value = "";
+			onSearch?.("");
+			activeIndex = 0;
+		}
+		element?.focus();
+	};
+
+	/** Commit everything before the last separator, and hand back what should stay in the draft. */
+	const commitSplit = (raw: string, keepTail: boolean) => {
+		const parts = raw.split(splitter);
+		const tail = keepTail ? (parts.pop() ?? "") : "";
+		for (const part of parts) add(part);
+		return tail;
+	};
+
+	const setDraft = (next: string) => {
+		value = next;
+		// the element has to be written directly too: typing "a," leaves `value` at "a", so the
+		// attribute never changes and the comma would sit there in the DOM
+		if (element) element.value = next;
+	};
+
+	const onInput = (event: Event) => {
+		const raw = (event.currentTarget as HTMLInputElement).value;
+		armed = -1;
+		dismissed = false;
+		setDraft(separators.some((s) => raw.includes(s)) ? commitSplit(raw, true) : raw);
+		onSearch?.(value.trim());
+		activeIndex = visible.length > 0 ? 0 : -1;
+	};
+
+	const onPaste = (event: ClipboardEvent) => {
+		const text = event.clipboardData?.getData("text");
+		if (!text || !separators.some((s) => text.includes(s))) return;
+		event.preventDefault();
+		commitSplit(text, false);
+		setDraft("");
+		onSearch?.("");
+	};
+
+	const move = (delta: number) => {
+		if (visible.length === 0) return;
+		const next = (activeIndex + delta + visible.length) % visible.length;
+		activeIndex = next;
+		optionsEl
+			?.querySelector(`#${CSS.escape(optionId(next))}`)
+			?.scrollIntoView({ block: "nearest" });
+	};
+
+	const onKeydown = (event: KeyboardEvent) => {
+		const el = event.currentTarget as HTMLInputElement;
+		const atStart = el.selectionStart === 0 && el.selectionEnd === 0;
+
+		switch (event.key) {
+			case "ArrowDown":
+				if (!open) break;
+				event.preventDefault();
+				move(1);
+				break;
+			case "ArrowUp":
+				if (!open) break;
+				event.preventDefault();
+				move(-1);
+				break;
+			case "Enter": {
+				// a bare Enter in a form would submit it, whether or not anything commits
+				event.preventDefault();
+				const option = open ? visible[activeIndex] : undefined;
+				if (option) pick(option);
+				else if (add(value)) setDraft("");
+				break;
+			}
+			case "Backspace":
+				if (value !== "" || tags.length === 0) break;
+				event.preventDefault();
+				// first press highlights the last chip, second one takes it
+				if (armed === -1) armed = tags.length - 1;
+				else removeAt(armed);
+				break;
+			case "Delete":
+				if (armed === -1) break;
+				event.preventDefault();
+				removeAt(armed);
+				break;
+			case "ArrowLeft":
+				if (!atStart || tags.length === 0) break;
+				event.preventDefault();
+				armed = armed === -1 ? tags.length - 1 : Math.max(0, armed - 1);
+				break;
+			case "ArrowRight":
+				if (armed === -1) break;
+				event.preventDefault();
+				armed = armed === tags.length - 1 ? -1 : armed + 1;
+				break;
+			case "Escape":
+				if (open) {
+					event.preventDefault();
+					dismissed = true;
+				} else if (armed !== -1) {
+					event.preventDefault();
+					armed = -1;
+				}
+				break;
+		}
+	};
+
+	// clicking the field's padding or the gaps between chips should land in the draft, the way
+	// clicking anywhere in a plain input does. pointerdown, so it beats the browser's own focus.
+	const onPointerDown = (event: PointerEvent) => {
+		if (disabled || (event.target as HTMLElement).closest("button")) return;
+		if (event.target === element) return;
+		event.preventDefault();
+		element?.focus();
+	};
+
+	let open = $state(false);
+	const wantsPanel = $derived(draftFocused && !dismissed && !disabled && suggestions.length > 0);
+
+	$effect(() => {
+		const el = panelEl;
+		if (!el) return;
+		const shown = el.matches(":popover-open");
+		if (wantsPanel && !shown) el.showPopover();
+		else if (!wantsPanel && shown) el.hidePopover();
+	});
+
+	// fade and shrink, plus a short drift the way the row is closing. This is svelte's own `scale`
+	// shape, hand-rolled only because it has to carry the drift too.
+	const chipExit = (node: Element) => {
+		const el = node as HTMLElement;
+		// svelte pulls a leaving chip out of the flex flow and pins it back in place with an inline
+		// transform, since as the sole absolute child the browser would otherwise park it at the
+		// row's left edge. Keep that in front of ours, the way the built-in transitions do, or every
+		// chip but the first teleports before it fades.
+		const held = getComputedStyle(el).transform;
+		const drift = Math.min(
+			EXIT_DRIFT.max,
+			Math.max(EXIT_DRIFT.min, el.offsetWidth * EXIT_DRIFT.share)
+		);
+		return {
+			duration: prefersReducedMotion.current ? 0 : EXIT,
+			easing: cubicIn,
+			css: (t: number, u: number) =>
+				`transform: ${held === "none" ? "" : held} translateX(${-u * drift}px) scale(${0.9 + 0.1 * t}); opacity: ${t}`
+		};
+	};
+
+	let draftItemEl = $state<HTMLLIElement>();
+
+	/** The chips after a removed one slide into the gap, and that sweep is what makes a removal
+	 *  read as a removal. The draft sits outside the each block, so it can't take an `animate:`
+	 *  directive and was snapping across instead — which is what made the LAST chip look like a
+	 *  bare fade: with nothing behind it, the draft is the only thing left to move. So FLIP it by
+	 *  hand around whatever changes the row, on the same curve the chips get. */
+	const sweepDraft = (change: () => void) => {
+		const el = draftItemEl;
+		const from = el?.getBoundingClientRect().left;
+		change();
+		if (!el || from === undefined || prefersReducedMotion.current) return;
+		tick().then(() => {
+			const dx = from - el.getBoundingClientRect().left;
+			if (dx === 0) return;
+			// sampled rather than handed a cubic-bezier, so it is the exact same curve `reflow`
+			// gives the chips — close-but-not-equal shows up as the draft lagging behind them
+			el.animate(
+				Array.from({ length: 21 }, (_, i) => ({
+					transform: `translateX(${dx * (1 - cubicOut(i / 20))}px)`
+				})),
+				{ duration: REFLOW }
+			);
+		});
+	};
+
+	const reflow = $derived({
+		duration: prefersReducedMotion.current ? 0 : REFLOW,
+		easing: cubicOut
+	});
+
+	const rejectionText = $derived.by(() => {
+		switch (rejection) {
+			case "duplicate":
+				return "Already added";
+			case "limit":
+				return `Limit of ${maxTags} reached`;
+			case "invalid":
+				return rejectionDetail ?? "Not allowed";
+			default:
+				return "";
+		}
+	});
+</script>
+
+<div class={slots.root()}>
+	<!-- the box is chrome around the real controls, and the pointerdown is a mouse-only
+	     convenience — a keyboard reaches the draft by tabbing to it, so there is no key handler
+	     to pair with. role=presentation says that rather than inventing a widget role. -->
+	<div
+		class={box}
+		role="presentation"
+		onpointerdown={onPointerDown}
+		style="anchor-name: {anchorName}"
+	>
+		{#if iconLeft}
+			{@const IconLeft = iconLeft}
+			<IconLeft class={slots.icon({ class: iconSize })} aria-hidden="true" />
+		{/if}
+
+		<ul class={slots.list()}>
+			{#each rows as { tag, index, key } (key)}
+				<li class={slots.item()} animate:flip={reflow} out:chipExit>
+					<Tag
+						{size}
+						color={armed === index ? "gray" : tag.color}
+						icon={tag.icon}
+						class={slots.chip({
+							class: armed === index ? "border border-border-focus" : undefined
+						})}
+						style={index === popIndex
+							? `transform: scale(${pop.current.scale}); opacity: ${pop.current.opacity}`
+							: undefined}
+					>
+						{#if tagBody}
+							{@render tagBody(tag)}
+						{:else}
+							{#if tag.field}
+								<span class={slots.field()}>{tag.field}:</span>
+							{/if}
+							<span class={slots.label()}>{labelOf(tag)}</span>
+						{/if}
+						{#if !disabled}
+							<!-- <button
+								type="button"
+								class={slots.remove()}
+								aria-label="Remove {labelOf(tag)}"
+								onclick={() => removeAt(index)}
+							>
+								<X class={glyphSize} aria-hidden="true" />
+							</button> -->
+							<Button
+								class={slots.remove()}
+								aria-label="Remove {labelOf(tag)}"
+								onclick={() => removeAt(index)}
+								variant="ghost"
+								size="mini"
+							>
+								<X class={glyphSize} aria-hidden="true" />
+							</Button>
+						{/if}
+					</Tag>
+				</li>
+			{/each}
+
+			<li bind:this={draftItemEl} class={slots.draftItem()}>
+				<input
+					bind:this={element}
+					{disabled}
+					{value}
+					class={slots.draft()}
+					oninput={onInput}
+					onkeydown={onKeydown}
+					onpaste={onPaste}
+					onfocus={() => {
+						draftFocused = true;
+						dismissed = false;
+					}}
+					onblur={() => {
+						draftFocused = false;
+						armed = -1;
+					}}
+					aria-label={label}
+					aria-invalid={error}
+					aria-busy={loading}
+					aria-describedby={hint ? hintId : undefined}
+					role={suggestions.length > 0 ? "combobox" : undefined}
+					aria-expanded={suggestions.length > 0 ? open : undefined}
+					aria-controls={suggestions.length > 0 ? optionsId : undefined}
+					aria-activedescendant={open && activeIndex >= 0 ? optionId(activeIndex) : undefined}
+					autocomplete="off"
+					{...rest}
+				/>
+			</li>
+		</ul>
+
+		{#if loading}
+			<Spinner class="{iconSize} mt-0.5 shrink-0 self-start" />
+		{/if}
+	</div>
+
+	<!-- no suggestions means no typeahead, so the popover isn't built at all rather than sitting
+	     in the top layer empty -->
+	{#if suggestions.length > 0}
+		<div
+			bind:this={panelEl}
+			id={panelId}
+			popover="manual"
+			ontoggle={(event) => (open = (event as ToggleEvent).newState === "open")}
+			style="position-anchor: {anchorName}"
+			class={slots.panel({ class: panelClass })}
+		>
+			<div
+				bind:this={optionsEl}
+				id={optionsId}
+				role="listbox"
+				aria-label={label}
+				class={slots.options()}
+			>
+				{#each visible as option, index (identity(option))}
+					<button
+						id={optionId(index)}
+						type="button"
+						role="option"
+						tabindex={-1}
+						class={slots.option()}
+						data-active={index === activeIndex || undefined}
+						aria-selected={index === activeIndex}
+						onpointerdown={(event) => event.preventDefault()}
+						onclick={() => pick(option)}
+						onpointermove={() => (activeIndex = index)}
+					>
+						{#if suggestionBody}
+							{@render suggestionBody(option)}
+						{:else if tagBody}
+							{@render tagBody(option)}
+						{:else}
+							{#if option.icon}
+								{@const OptionIcon = option.icon}
+								<OptionIcon class="size-4 shrink-0 text-foreground-subtle" aria-hidden="true" />
+							{/if}
+							{#if option.field}
+								<span class={slots.field()}>{option.field}:</span>
+							{/if}
+							<span class={slots.optionLabel()}>{labelOf(option)}</span>
+						{/if}
+					</button>
+				{:else}
+					<p class={slots.empty()}>{emptyLabel}</p>
+				{/each}
+			</div>
+		</div>
+	{/if}
+
+	{#if hint || maxTags !== undefined || rejection}
+		<div class={slots.footer()}>
+			<div class={slots.message()}>
+				<span id={hintId} class={slots.hint()} style:opacity={rejection ? 0 : 1}>{hint ?? ""}</span>
+				<span class={slots.rejection()} style:opacity={rejection ? 1 : 0} aria-hidden={!rejection}>
+					{rejectionText}
+				</span>
+			</div>
+			{#if maxTags !== undefined}
+				<span class={slots.counter()}>{tags.length}/{maxTags}</span>
+			{/if}
+		</div>
+	{/if}
+
+	<span class="sr-only" role="status" aria-live="polite">{announcement}</span>
+</div>
+
+<style>
+	/* anchor positioning went Baseline in early 2026; without it the popover falls back to the
+	   UA's centred position, the same trade-off Dropdown and Combobox already take. */
+	@supports (position-area: bottom) and (position-try: flip-block) {
+		.tag-panel {
+			/* the gap to the field — margin, because position-area owns inset */
+			margin-top: 0.25rem;
+			position-area: block-end span-inline-end;
+			position-try: flip-block;
+		}
+	}
+</style>
diff --git a/web/src/lib/components/ui/inputField.ts b/web/src/lib/components/ui/inputField.ts
new file mode 100644
index 000000000..905215a70
--- /dev/null
+++ b/web/src/lib/components/ui/inputField.ts
@@ -0,0 +1,55 @@
+import type { Component } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+import { tv, type VariantProps } from "tailwind-variants";
+import type { TagVariants } from "./Tag.svelte";
+
+/** One token in a rich Input. On its own a tag is just a word; give it a `field` and it reads as
+ *  a filter — `author: eti` — so tags and filters sit in the same array and remove the same way. */
+export interface InputTag {
+	/** identity: what a duplicate check compares, and what a committed draft becomes */
+	value: string;
+	/** shown instead of `value`; `value` is still what gets matched */
+	label?: string;
+	/** dim prefix inside the chip, which is what turns a tag into a filter */
+	field?: string;
+	color?: TagVariants["color"];
+	icon?: Component<SvelteHTMLElements["svg"]>;
+}
+
+/** why a draft was turned away: the footer says which, and a duplicate flashes the chip it hit */
+export type TagRejection = "duplicate" | "limit" | "invalid";
+
+export const inputField = tv({
+	base: "flex items-center rounded-sm border bg-background-default transition-colors",
+	variants: {
+		size: {
+			small: "min-h-8 gap-1.5 px-1.5 py-1 typography-paragraph-small",
+			regular: "min-h-9 gap-2 px-2 py-1 typography-paragraph-regular",
+			large: "min-h-10 gap-2.5 px-3 py-1 typography-paragraph-large"
+		},
+		error: {
+			false:
+				"border-border-default focus-within:border-border-strong focus-within:ring-1 focus-within:ring-border-strong",
+			true: "border-border-danger bg-background-danger-subtle text-foreground-danger focus-within:border-border-focus-danger focus-within:ring-1 focus-within:ring-border-focus-danger"
+		},
+		disabled: {
+			false: "",
+			true: "cursor-not-allowed bg-background-inset text-foreground-disabled"
+		},
+		rich: {
+			// tags wrap onto more rows, so the box has to be free to grow past the min-h its size
+			// sets. items-stretch hands the full height to the tag list, which then centres its
+			// own rows — that way one row of tags sits exactly where a plain input's text sits.
+			true: "items-center",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		size: "regular",
+		error: false,
+		disabled: false,
+		rich: false
+	}
+});
+
+export type InputFieldVariants = VariantProps<typeof inputField>;
diff --git a/web/src/routes/settings/profile/handle/+page.svelte b/web/src/routes/settings/profile/handle/+page.svelte
index 7d5c2066b..9020203e7 100644
--- a/web/src/routes/settings/profile/handle/+page.svelte
+++ b/web/src/routes/settings/profile/handle/+page.svelte
@@ -2,7 +2,8 @@
 	import { goto } from "$app/navigation";
 	import { resolve } from "$app/paths";
 	import Button from "$lib/components/ui/Button.svelte";
-	import Input, { inputField } from "$lib/components/ui/Input.svelte";
+	import Input from "$lib/components/ui/Input.svelte";
+	import { inputField } from "$lib/components/ui/inputField";
 	import Toggle from "$lib/components/ui/Toggle.svelte";
 	import DrillDown from "$lib/components/settings/DrillDown.svelte";
 	import SettingsList from "$lib/components/settings/SettingsList.svelte";
-- 
2.51.2