portal-mojo 0.1.0

package/docs/realtime.md

@@ -0,0 +1,61 @@
+# Realtime transport
+
+Import `RealtimeClient`, `RealtimeProvider`, `useRealtime`,
+`useRealtimeStatus`, `useRealtimeEvent`, `useRealtimeTopic`, and
+`defineRealtimeEvent` from `portal-mojo/client`.
+
+Mount one `RealtimeProvider` inside the app's auth root. It owns the connection;
+consumer permissions own topic subscriptions. Disabling the provider or losing
+the auth token closes the socket. A permission loss in one consumer must not
+disable this shared provider.
+
+## Wire contract
+
+- URL is derived from the configured API origin as exactly `/ws/realtime/`
+  with `ws:`/`wss:`. Credentials are never placed in the URL, lifecycle state,
+  logs, caches, mock observations, or storage beyond the existing auth store.
+- An open socket is not ready. The client waits for `auth_required`, then sends
+  `{type:'authenticate',token,prefix:'bearer'}` and becomes ready only after
+  `auth_success`. An auth error closes and suspends the connection until the
+  token value changes.
+- Heartbeat is a `ping` every 20 seconds with a 10-second `pong` deadline.
+  Reconnect uses capped jittered backoff. Pre-accept close code 4429 enforces at
+  least 60 seconds, and focus/visibility cannot bypass that deadline.
+- Desired topics are refcounted and replay after authentication. Operations are
+  serialized because acknowledgements carry only the topic and denial is a
+  generic uncorrelated `error`. Denial yields topic status `denied`; it does not
+  reconnect the socket. The server's automatic `user:<id>` topic is reported
+  separately and is never explicitly subscribed by the client. That automatic
+  topic is a delivery scope, not a presence feed.
+- Framework messages, one wrapped `{type:'message',data,topic?,timestamp?}`
+  layer, and direct application events share one dispatch boundary. Malformed
+  frames drop. No generic Query invalidation is performed.
+
+The transport does not invent application events. Current django-mojo has no
+canonical record-created/updated/deleted stream and no canonical presence
+stream, so neither record cache invalidation nor online status can be derived
+from this client. `defineRealtimeEvent` and `useRealtimeTopic` are useful only
+when a backend producer defines and authorizes that exact event/topic contract;
+Assistant streaming is the package's current concrete application consumer.
+
+```tsx
+// Hypothetical: this works only if the consuming backend publishes this
+// application-specific event and authorizes the `orders` topic.
+const orderChanged = defineRealtimeEvent('order_changed', (value) => {
+  if (!value || typeof value !== 'object') return null;
+  const id = (value as {id?: unknown}).id;
+  return typeof id === 'number' ? {id} : null;
+});
+
+function OrdersLive() {
+  const topic = useRealtimeTopic('orders');
+  useRealtimeEvent(orderChanged, ({data}) => console.log(data.id));
+  return <span>{topic}</span>;
+}
+```
+
+`createRealtimeMock()` is an adjacent deterministic in-memory server for demos
+and behavioral verification. Its injected factory replaces no global
+`WebSocket`; controls cover delayed challenge, auth failure left open, 4429,
+topic denial, missing pong, wrapped/direct events, forced disconnect, and
+multiple connections. Observations contain only bounded derived metadata.

package/docs/record-feed.md

@@ -0,0 +1,238 @@
+# RecordFeed — record notes, assistant replies, and system history
+
+```tsx
+import {
+    createTicketNoteAdapter,
+    createIncidentHistoryAdapter,
+    normalizeRecordFeedItem,
+    recordFeedQueryKey,
+    type RecordFeedAdapter,
+    type RecordFeedItem,
+    type RecordFeedPage,
+} from 'portal-mojo/client';
+import { RecordFeed } from 'portal-mojo/ui';
+```
+
+`RecordFeed` is the shared display and cache substrate for ticket comments,
+incident history, assistant-authored notes, status changes, and plain system
+activity. It has two deliberately separate ownership modes:
+
+- **Adapter mode** owns a TanStack list query, POST mutation, and exact
+  optimistic cache lifecycle.
+- **Controlled mode** accepts `items` + `onSend`; a future streaming assistant
+  can own its own state without pretending a stream is a django-mojo list.
+
+Adapter mode supports one optional completed File reference. Controlled mode
+keeps its existing `items`/`onSend(text)` contract and has no attachment policy;
+specialized owners may place the shared `AttachmentQueue` in `composerAddon`.
+
+## Adapter mode
+
+```tsx
+const adapter = useMemo(
+    () => createTicketNoteAdapter(ticket.id, { groupId: ticket.group.id }),
+    [ticket.id, ticket.group.id],
+);
+
+<RecordFeed
+    adapter={adapter}
+    currentUser={{ id: me.id, name: me.display_name ?? me.username }}
+    currentUserId={me.id}
+    variant="compact"
+    attachmentUpload={{
+        destination: { groupId: ticket.group.id, use: 'uploads' },
+        expectedGroupId: ticket.group.id,
+    }}
+/>
+```
+
+Use `createIncidentHistoryAdapter(incidentId, {groupId})` for incident
+history. Memoize the adapter for ordinary React hygiene; its query key is
+structural and remains stable either way.
+
+### Wire contract
+
+Both adapters request only the latest window:
+
+```text
+GET /api/incident/ticket/note
+GET /api/incident/incident/history
+
+parent=<record id>
+group=<optional active group id>
+graph=default
+sort=-created
+start=0
+size=100
+```
+
+django-mojo returns newest-first. The adapter normalizes those rows and
+reverses the returned window for chronological display. Its result is:
+
+```ts
+interface RecordFeedPage {
+    items: RecordFeedItem[]; // chronological
+    count: number;           // full server count
+    hasEarlier: boolean;     // count > returned rows
+}
+```
+
+POST uses the same collection endpoint and `{parent, group, note, media?}` when the
+adapter has a group (`group` is the bare ForeignKey primary key django-mojo's
+generic REST saver consumes). Incident posts also carry `kind: 'comment'`.
+`media` is a single positive completed File id and never replaces required note
+text. Failed saves reject at the shared client boundary.
+
+Every incoming `media` value is positively rebuilt to exactly
+`{id, filename, content_type, category}` before domain sanitization,
+normalization, optimistic cache replacement, or rendering. Unknown fields,
+URLs, tokens, manager/provider details, transfer state, and browser `File`
+objects cannot enter RecordFeed state.
+
+The attachment queue has capacity/concurrency one. It is record-local,
+deduplicated, and exposes real progress/cancel/retry/recover/remove actions.
+Only a completed reference may be sent. Removal detaches queue state; it never
+deletes the File. Permission loss, logout, or any parent/group/destination
+change cancels and disposes the old queue.
+
+Grouped records use the authoritative parent group and immutable
+`{groupId, use:'uploads'}` initiation selectors. Groupless records send no
+selector. Parent payloads currently expose no exact FileManager upload
+capability, so the server resolves its authorized manager; the client then
+requires the completed lifecycle response to carry a positive manager id and
+the exact expected group before enabling association. A future parent contract
+may expose an explicit manager/readiness capability without changing the safe
+File-reference shape.
+
+The cache key is always:
+
+```ts
+['record-feed', 'ticket-note' | 'incident-history', parentId, groupId ?? null]
+```
+
+That final group slot is not cosmetic. Two group contexts viewing the same
+numeric record ID must never share a cache entry. Changing any adapter key
+slot also remounts adapter mode so its composer draft, mutation/error state,
+scroll position, and bottom-pin refs cannot leak into the next record.
+
+## Author/type normalization
+
+`normalizeRecordFeedItem(raw)` applies one strict precedence:
+
+1. A **structured status change** with `metadata.type='status_change'` (or a
+   `metadata.status_change` object) and a structured old/new value becomes
+   `kind:'status'`.
+2. `[LLM Agent]`, `kind:'handler:llm'`, or an explicit LLM handler/origin
+   becomes `kind:'assistant'` — even if a modern row also embeds a user.
+3. Legacy null-user action/context records become assistant notes.
+4. Any remaining row with a user becomes `kind:'comment'`.
+5. Everything else becomes `kind:'system'`.
+
+Two negative rules matter:
+
+- A null user alone **never means assistant**. Most automated history has no
+  user and remains System.
+- Prose is never regexed into a status transition. If old/new status is not
+  structured, the row follows the remaining precedence.
+
+`metadata` is normalized to a plain object. `raw` remains wire-shaped, but it
+may be domain-sanitized. Sensitive domains pass `sanitizeRow` and
+`sanitizeText`; the unsanitized failure-restoration draft remains only in a
+component-local ref and never enters MutationCache.
+
+## Exact optimistic lifecycle
+
+Adapter mode permits one submit at a time and performs these operations on
+the adapter's exact structural key:
+
+1. Trim the draft; ignore empty/duplicate pending submits.
+2. Clear the visible draft and cancel the exact in-flight query.
+3. Snapshot the exact `RecordFeedPage`.
+4. Append a client-only pending comment with a unique temporary ID.
+5. On success, replace that exact temporary row with the normalized server
+   row. The composer stays clear and regains focus.
+6. On a deterministic failure, restore the snapshot. If no cache existed, remove the exact
+   query instead of manufacturing stale state. Restore the exact submitted
+   text, focus the composer, and surface the mutation error in `role=alert`.
+7. On a lost/ambiguous response, retain the draft and completed candidate,
+   mark delivery uncertain, and block blind replay while an authoritative
+   refetch looks for a newly-created exact text/media row. A snapshot id can
+   never satisfy reconciliation. If refetch also fails, changing the draft or
+   detaching the candidate is the explicit escape.
+8. In all cases, invalidate only that exact record/group key.
+
+The input is disabled during the request, so no second draft can be lost or
+silently overwritten by failure restoration.
+
+## Controlled mode
+
+```tsx
+<RecordFeed
+    items={messages}
+    onSend={sendMessage}
+    isSending={streamStarting}
+    pending={streaming ? <Thinking /> : null}
+    error={streamError?.message}
+    variant="bubbles"
+/>
+```
+
+The parent owns item append/replacement/streaming. `RecordFeed` still owns the
+composer draft: it clears before awaiting `onSend`, restores the exact text on
+rejection, focuses after either outcome, prevents concurrent submits, and
+surfaces local rejection through the same alert region.
+
+## Props
+
+| Prop | Default | Meaning |
+|---|---|---|
+| `adapter` | — | Selects adapter mode. Mutually exclusive with `items/onSend`. |
+| `items`, `onSend` | — | Select controlled mode. |
+| `variant` | `'compact'` | `'compact'` admin activity or `'bubbles'` conversation layout. |
+| `currentUserId` | — | Marks only matching **comments** as the current user's/right-side bubble. Assistant rows never become “mine.” |
+| `currentUser` | `{id:currentUserId,name:'You'}` | Author stamped onto adapter-mode optimistic rows. |
+| `renderAddon(item)` | — | ReactNode slot below a comment/assistant body for domain cards/actions. |
+| `pending` | — | ReactNode after the list for thinking/streaming state. |
+| `showInput` | `true` | Hide the composer for read-only history. |
+| `disabled` | `false` | Disable sends while retaining history. |
+| `attachmentUpload` | — | Adapter-only immutable destination and expected parent group; enables the singular queue. |
+| `composerAddon` | — | Generic controlled-owner slot; RecordFeed itself assigns no attachment semantics. |
+| `submitBlocked` | `false` | Blocks text submission while a specialized composer owner is not ready. |
+| `placeholder` | `'Add a note…'` | Composer placeholder. |
+| `sendLabel` | `'Send'` | Visible/accessibility send label. |
+| `emptyLabel` | `'No activity yet.'` | Empty-state text. |
+| `ariaLabel` | `'Record activity'` | Feed region label. |
+
+## Rendering, keyboard, and scrolling
+
+- Comment and assistant bodies use existing `<MarkdownView renderer="client">`.
+  A feed never fans out one `/api/docit/render` request per row and never
+  creates another HTML path.
+- Status and system events are React nodes/plain text, not markdown.
+- The scroll viewport is `role=log` with a semantic ordered list and polite
+  addition/text announcements. Loading, pending, and failures have explicit
+  status/alert semantics.
+- Enter sends; Shift+Enter inserts a newline. Composition Enter is ignored via
+  the native `isComposing` flag, so CJK/IME commits cannot accidentally send.
+- The textarea grows to 144 px, then scrolls internally.
+- The feed pins to bottom only on initial load, the viewer's own send, or an
+  update received while already within 48 px of bottom. Reading older rows is
+  never interrupted by background/streaming updates.
+
+## Styling
+
+Import `theme/record-feed.css` after the token declarations (the portal and
+showcase theme aggregators already do). It uses only the mission-control
+tokens and supports both `data-theme` values. Override the default bounded
+height with `--record-feed-height` on a wrapper/component class.
+
+## Pitfalls
+
+- Do not use an endpoint-only query key; parent and group scope are required.
+- Do not fetch ascending and take the first 100 — that returns the oldest
+  window. Fetch descending, take 100, then reverse the returned window.
+- Do not read attachment data from `raw.media`; use the positively rebuilt
+  `item.attachment` reference.
+- Do not classify every null-user row as assistant or parse status prose.
+- Do not use server MarkdownView per row. Feeds use the secure React client
+  renderer; richer domain UI belongs in `renderAddon` as ReactNode.

package/docs/right-panel.md

@@ -0,0 +1,42 @@
+# RightPanel — persistent complementary shell content
+
+```tsx
+import { RightPanelProvider, RightPanelSlot, useRightPanel } from 'portal-mojo/ui';
+```
+
+RightPanel is an explicit exception for product experiences that need
+persistent, complementary shell context while the main route changes. It is
+not the default Admin record-detail presentation: Admin table records use
+`modal.detail(...)` unless the product specifically asks for a right panel.
+
+Mount one provider above the opted-in application shell and one slot beside
+the main route content. Open content with a stable key, visible title, render
+callback, and the exact launcher element:
+
+```tsx
+panel.open({
+    key: `map-layer:${layer.id}`,
+    title: layer.name,
+    render: ({ close }) => <MapLayerInspector id={layer.id} close={close} />,
+}, event.currentTarget);
+```
+
+The provider owns one session-only descriptor. Opening a different key replaces
+it atomically; opening the same key is idempotent. Closing is idempotent and
+restores focus when the captured launcher is still connected.
+
+`RightPanelSlot` renders a non-modal `aside[role=complementary]` with a visible
+close control and labelled heading. It moves focus into that control on open.
+Escape closes the panel only when no native `dialog[open]` exists, so
+`ModalHost` keeps ownership of its top-layer keyboard interaction. There is no
+focus trap or backdrop: use `modal.drawer()` when the interaction must be
+modal, awaitable, and transient.
+
+Do not add RightPanel to the global Admin shell merely to inspect a selected
+row. That changes the application layout and interaction model for every Admin
+domain; such a choice requires an explicit product decision.
+
+Panel selection never enters the hash or query string. Route navigation may
+replace the main `<Outlet>` while provider state stays mounted, and table params
+can never leak a `panel` key into Django filters. The supplied app styles use a
+third grid column on wide layouts and a fixed non-modal aside on narrow ones.

package/docs/tabs-and-form-wizard.md

@@ -0,0 +1,60 @@
+# Tabs and FormWizard
+
+Import both from `portal-mojo/ui`:
+
+```tsx
+import { Tabs, FormWizard, formWizardModal } from 'portal-mojo/ui';
+```
+
+## Tabs
+
+`Tabs` accepts `items: { key, label, panel, disabled?, ariaLabel? }[]`, optional controlled `activeKey`/`onActiveKeyChange`, uncontrolled `defaultActiveKey`, `variant`, `ariaLabel`, and `className`. Labels and panels are `ReactNode`.
+
+The default variant is `underline-all`. Canonical variants are `minimal`, `traditional`, `underline`, `underline-all`, `pills`, `pills-solid`, `segmented`, and `btn-group`; `buttongroup` and `btngroup` alias `btn-group`. Unknown variants warn once and use the default.
+
+In controlled mode, the caller owns the requested key. If it is missing or disabled, Tabs paints the first enabled key and notifies the caller once per requested-key/roster transition. Uncontrolled selection heals internally. Empty and duplicate keys are dropped with a warning; disabled tabs are never selected.
+
+The tablist uses automatic activation: Left/Right wraps and skips disabled tabs; Home/End selects the first/last enabled tab. Stable `tab`/`tabpanel` IDs carry `aria-controls` and `aria-labelledby`, with one roving `tabIndex=0`. Every panel shell remains mounted, while only the active panel content mounts. Narrow tab lists scroll horizontally.
+
+```tsx
+<Tabs
+  variant="segmented"
+  defaultActiveKey="profile"
+  items={[
+    { key: 'profile', label: 'Profile', panel: <Profile /> },
+    { key: 'audit', label: 'Audit', panel: <Audit />, disabled: !canAudit },
+  ]}
+/>
+```
+
+## FormWizard
+
+Sections have `{ key, label, fields, description?, optional?, content?, eligible?, onNext?, terminal? }`. `content` may be a node or a render function over the shared draft/busy state. `eligible(data)` removes a step without destroying its draft. `onNext(data)` is an async single-flight transition after section validation. `terminal` renders an actionless receipt/status step. Section keys must be non-empty and unique, and field names must be globally unique. Later duplicates are warned and dropped.
+
+Core props are `sections`, `initial`, `resetKey`, `mode: 'wizard' | 'tabs'`, `tabVariant`, button labels, `validateAllOnFinish`, `onStepChange`, `onCancel`, and `onFinish(data)`. Wizard mode has ordered Back/Next/Finish flow. Back does not validate; Next validates visible fields on the active step. Tabs mode provides non-linear navigation and one Save action. Finish validates all visible sections by default, opens the first invalid section, and focuses its first error. Set `validateAllOnFinish={false}` only when active-section validation is deliberately sufficient; the emitted payload still includes all visible fields.
+
+Required/email checks run before an optional `Field.schema`. Hidden fields neither validate nor submit, but their draft remains available if shown again. `onFinish` is async and single-flight: navigation and actions disable while pending; rejection remains visible and retryable. A new `initial` object does not overwrite drafts. Change `resetKey` to intentionally reseed values/errors/active section. Roster changes preserve surviving values, seed additions, retire removals, and heal selection; pending finish defers reconciliation.
+
+```tsx
+const save = User.useSave();
+<FormWizard
+  mode="wizard"
+  sections={sections}
+  initial={row}
+  resetKey={row.id}
+  onFinish={(data) => save.mutateAsync({ id: row.id, changes: data })}
+/>
+```
+
+`formWizardModal(options)` adds `title` and optional `size`, and returns the submitted `FormData` or `null` for idle cancellation. Its required `onFinish` runs before success closes. Next/Back/tabs/Cancel/Escape/backdrop are all locked during async transitions or finish. Reset/unmount generations make late completions stale, so they cannot advance, close, or rewrite a newer roster.
+
+```tsx
+const result = await formWizardModal({
+  title: 'Create member',
+  sections,
+  mode: 'wizard',
+  onFinish: (data) => create.mutateAsync(data),
+});
+```
+
+`SchemaForm` shares the submit-state/rendering core but deliberately retains its lazy one-time initialization, flat payload, and required/email-only validation. `FormView` remains a separate autosave reducer; it uses Tabs only for presentation so permission filtering and one cross-tab autosave batch stay intact.

package/docs/taginput.md

@@ -0,0 +1,120 @@
+# TagInput — chip tags over a CSV string
+
+```ts
+import { TagInput } from 'portal-mojo/ui';
+```
+
+Free-text tags as removable chips with a full keyboard flow. Ported from
+web-mojo's `TagInputView` (`src/core/forms/inputs/TagInput.js`).
+
+**The value is a CSV string, both directions.** django-mojo models store the
+joined string and split it server-side, so `onChange` hands back the string
+FIRST and the array second. A parent that persists the array instead has
+changed the wire shape.
+
+```tsx
+const [csv, setCsv] = useState(record.tags ?? '');   // "prod,us-east-1,pci"
+
+<TagInput
+    name="tags"
+    value={csv}
+    onChange={(next) => setCsv(next)}
+    maxTags={10}
+/>
+```
+
+## API
+
+| Prop | Default | Notes |
+|---|---|---|
+| `name` | — | also renders a hidden input carrying the CSV, for native form posts |
+| `value` | `''` | CSV string **or** array; both parse to the same tags |
+| `onChange` | — | `(csv: string, tags: string[]) => void` — fires on commit/removal only |
+| `placeholder` | `'Add tags...'` | |
+| `maxTags` | `50` | caps interactive adds; the counter's denominator |
+| `allowDuplicates` | `false` | duplicate check is CASE-SENSITIVE (`Design` ≠ `design`) |
+| `separator` | `','` | exactly one character; joins the CSV, splits input, and commits on keypress |
+| `trimTags` | `true` | |
+| `minLength` / `maxLength` | `1` / `50` | per tag |
+| `disabled` | `false` | field stays, every add/removal refused |
+| `readonly` | `false` | chips only — no input, no remove icons |
+| `className` | — | appended to the root |
+
+## Keyboard + commit routes
+
+| Key | In the text field | On a focused chip |
+|---|---|---|
+| `Enter` | commit (preventDefault; an empty field still submits an enclosing form) | — |
+| `Tab` | commit **and move focus on** | — |
+| separator (`,`) | commit (always preventDefault) | — |
+| `Backspace` | empty field → drop the last chip | remove it, focus the previous chip (or the field) |
+| `Delete` | — | same as Backspace |
+| `←` | empty field → focus the last chip | chip 0 → field, else previous chip |
+| `→` | empty field → focus chip 0 | last chip → field, else next chip |
+| `Escape` | clear the draft text | — |
+
+Two more commit routes that are not keydowns:
+
+- **input-change**: text ending in the separator or a newline commits. This is
+  what catches pastes and soft keyboards, which never fire a usable keydown.
+- **blur**: a pending draft commits rather than vanishing (the house commit set
+  is select/Enter/blur).
+
+Every route funnels through one `commitText`, which splits on the separator and
+on newlines first — so pasting `a,b,c,` yields three tags, never one tag
+containing commas that would re-split on the next load.
+
+## Invariants
+
+1. **No committed tag contains the separator.** Enforced at commit AND on parse
+   (array entries are split too). This is what keeps the CSV round-trip exact.
+2. **`separator` must be one character** — anything else falls back to `,` with
+   a `console.warn` (the house rule for unknown option values; an empty
+   separator would split every tag into characters).
+3. **Controlled.** Tags derive from `value` on every render — the chips can
+   never show something the parent's state doesn't hold. With no `onChange` (and
+   not `readonly`/`disabled`) the component warns once at mount instead of
+   silently swallowing adds.
+4. **Parsing `value` does NOT apply `minLength`/`maxLength`/`maxTags`.** Those
+   cap what a user may add; silently dropping stored values would lose backend
+   data on the next save. A record with 7 tags under `maxTags={5}` honestly
+   reads `7/5 tags` and refuses further adds.
+5. **Rejected adds are never silent** — a transient inline error (~3s,
+   `role="status"`) says why: `Tag "x" already exists`,
+   `Maximum N tags allowed`, or the length messages.
+
+## Deliberate deviations from web-mojo
+
+| web-mojo | here | why |
+|---|---|---|
+| `Tab` calls `preventDefault` | Tab commits, focus still moves | the source trapped focus in the field for as long as it held text |
+| commits on `,` even when `separator` is something else | commits on the separator key | otherwise a `\|`-separated field could never hold a comma |
+| length violations rejected silently | inline error | "silent failure as policy" is on the do-not-recreate list |
+| `Delete` promised by the chip's aria-label, only Backspace wired | both work | the label was lying |
+| `Escape` also blurs | clears the draft only | Escape inside a modal still reaches the dialog once there is nothing to clear |
+| wrapper `role="combobox" aria-expanded="false"` | `role="group"` | there is no popup; a permanently-false `aria-expanded` misleads AT |
+| `escapeHtml()` on every tag before HTML-string render | plain JSX | React escapes; the "caller must escape" contract class is gone |
+| `console.log` in `focusTag` | dropped | |
+| `tag:added` / `tag:removed` / `tags:cleared` events | `onChange` only | it already carries the full next list |
+
+## Styling
+
+Classes are styled by the consuming app (`apps/portal/src/theme/taginput.css`,
+tokens only, light + dark): `.tag-input`, `.tag-input-wrap` (wears the `.input`
+field look, accent ring on `:focus-within`), `.tag-chip` / `.tag-chip-text` /
+`.tag-chip-x`, `.tag-input-field`, `.tag-input-foot` / `.tag-input-count` /
+`.tag-input-error`, plus `.tag-input-disabled` / `.tag-input-readonly` on the
+root. Chips show a focus ring on pointer focus too — they are only focusable to
+drive the arrow/Backspace flow, and Backspace must never delete a chip whose
+focus is invisible.
+
+## Pitfalls
+
+- Don't store the `tags` array and rebuild the string with a different
+  separator on save — pass through the CSV the component emits.
+- Clicking the wrapper's padding focuses the field without blurring it
+  (mousedown default is swallowed); don't add a competing focus handler.
+- The remove `×` is `aria-hidden` on purpose: it duplicates the chip's own
+  keyboard removal, and nesting an interactive element inside `role="button"`
+  is invalid ARIA.
+- Live demo: portal → **Develop → Components → TagInput**.