From 94155f292d131ecf6dda458dc73d7e647077b17c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martynas=20Jusevi=C4=8Dius?= <martynas@atomgraph.com>
Date: Tue, 14 Jul 2026 00:27:56 +0300
Subject: [PATCH] Add autocomplete typeahead for property and type lookups

Replace the long property/type <select> dropdowns in the annotation
overlay with autocomplete typeaheads, porting LinkedDataHub's typeahead
interaction but filtering the already-pooled vocabularies locally and
synchronously per keystroke (no SPARQL, no debounce, no
ixsl:schedule-action).

New src/typeahead.xsl: a stable span[@data-field] wrapper swaps between a
typing state (input + ul.typeahead-menu) and a committed state
(button.typeahead-value + hidden IRI, LDH-style) via result-document
literal result elements. Options are prefix-ranked, capped, and
bold-highlight the match; keyboard nav mirrors the slash menu; options
commit on mousedown (before the input's focusout). local:typeahead-value
reads the committed hidden IRI, else a free-typed absolute IRI, else the
untouched button->edit value parked on @data-editing-iri (cleared on the
first keystroke). Typing a full IRI is accepted directly, so the
per-field custom-IRI inputs and the urn:rdfa-editor:custom sentinel are
dropped for property/type.

The datatype field stays a <select> with its sentinel + custom-datatype
input and the datatype/lang mutual-exclusion, unchanged. Dead
local:vocab-options and local:ontology-label removed from vocab.xsl.

Tests: adapted datatype/features/editor/tables suites to drive the
typeahead via a shared typeahead-helper.mjs; the features lint test keeps
term-unresolvable via the retained datatype free-text input. New
tests/browser/typeahead.mjs covers filter, keyboard/mouse select,
free-IRI entry, non-IRI rejection, edit-prefill button, and
stale-selection invalidation.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 CLAUDE.md                          |   7 +-
 rdfa-editor.css                    | 101 +++++++-
 src/index.xsl                      |   4 +-
 src/overlay.xsl                    |  78 ++----
 src/typeahead.xsl                  | 382 +++++++++++++++++++++++++++++
 src/vocab.xsl                      |  33 +--
 tests/browser/datatype.mjs         |   6 +-
 tests/browser/editor.mjs           |   7 +-
 tests/browser/features.mjs         |  14 +-
 tests/browser/run.mjs              |   2 +-
 tests/browser/tables.mjs           |   3 +-
 tests/browser/typeahead-helper.mjs |  37 +++
 tests/browser/typeahead.mjs        | 169 +++++++++++++
 13 files changed, 741 insertions(+), 102 deletions(-)
 create mode 100644 src/typeahead.xsl
 create mode 100644 tests/browser/typeahead-helper.mjs
 create mode 100644 tests/browser/typeahead.mjs

diff --git a/CLAUDE.md b/CLAUDE.md
index c064720..e0b6da5 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -24,8 +24,9 @@ Modules under `src/`:
 - **index.xsl** — entry point: `$vocab-hrefs` param, `main` template (async vocabulary prefetch via `ixsl:schedule-action/@document`, then overlay init), `local:document-uri()`.
 - **RDFa2RDFXML-v3.xsl** — RDFa 1.1 → RDF/XML extraction. **Pure XSLT, no `ixsl:`** — it runs headless via `xslt3` for the test suite. Strictly W3C-conformant (RDFa 1.1 processing rules, section 7.5, including chaining via typed resources and `rdfa:usesVocabulary`). Covers `@about`/`@typeof`/`@property`/`@content`/`@datatype`/`@resource`/`@href`/`@src`/`@prefix` (and `xmlns:*`)/`@vocab` with bare terms, `@lang`+`@xml:lang` inheritance, base-URI resolution (`about=""` = the document, `<base href>` honored), and exclusion of `head`/`script`/`style`/`[data-role='rendering']` subtrees. Out of scope (documented future work): `@rel`/`@rev`, `@inlist`, safe CURIEs, `@datetime`/`<time>`, `xml:base`.
 - **content-model.xsl** — the XHTML content model as data. **Pure XSLT, include-free** (no dependencies; `index.xsl` includes it once, before its consumers): a 1:1 transcription of the XHTML 1.0 Strict DTD (Second Edition, Appendix A.1 entities + element declarations) and the Appendix B prohibitions, extended with HTML5 `figure`/`figcaption`. `$cm:model` (element → allowed children + `#PCDATA` flag), `$cm:prohibitions`, predicates `cm:known`/`cm:block`/`cm:inline`/`cm:allows-child`/`cm:allows-text`/`cm:inline-only`/`cm:flow`/`cm:structural`/`cm:valid-nesting`. The **single source of truth** for nesting: editability init and keyboard machines (edit.xsl), boundary normalization (canonical-xhtml.xsl) and nesting lint (lint-xhtml.xsl) all consult it, so verdicts can't drift. `$cm:model` is built with `map:merge`+`map:entry` — the SaxonJS compiler fails an internal assertion on large nested map literals. The editor contract "region children are blocks" is deliberately NOT in this module.
-- **vocab.xsl** — generic ontology RDF/XML → dropdown options. Handles typed elements (`<owl:Class rdf:about>`) and `rdf:Description`+`rdf:type` shapes (including striped one-triple-per-description files like DCMI terms); labels as attributes or child elements; terms outside the ontology namespace filtered out.
-- **overlay.xsl** — the annotation form (single copy), form reading (`local:form-values` map), pre-filling (`local:populate-form`), show/hide with viewport clamping (`local:show-at`, shared with the edit dialogs).
+- **vocab.xsl** — generic ontology RDF/XML → term maps (`local:vocab-terms` → `{uri, label}`, consumed by the typeahead). Handles typed elements (`<owl:Class rdf:about>`) and `rdf:Description`+`rdf:type` shapes (including striped one-triple-per-description files like DCMI terms); labels as attributes or child elements; terms outside the ontology namespace filtered out.
+- **overlay.xsl** — the annotation form (single copy), form reading (`local:form-values` map), pre-filling (`local:populate-form`), show/hide with viewport clamping (`local:show-at`, shared with the edit dialogs). The property/type fields are typeaheads (typeahead.xsl); the datatype field stays a `<select>` (short XSD list) with a `urn:rdfa-editor:custom` sentinel + free-text `custom-datatype` input and the datatype↔lang mutual-exclusion handler.
+- **typeahead.xsl** — autocomplete lookups for the **property** and **type** fields (replacing the long dropdowns; LDH's typeahead interaction ported with local synchronous filtering — no SPARQL/debounce, since vocabularies are already pooled). A stable wrapper `span[@data-field]` holds one of two states, swapped via `result-document` literal result elements: typing (`input.typeahead-input` + `ul.typeahead-menu`) or committed (`button.typeahead-value` + hidden input carrying the IRI, LDH-style). Filtering re-renders per keystroke from `local:vocab-terms` (prefix-ranked, capped, bold-highlighted match); keyboard nav mirrors the slash menu (Arrow/Enter/Escape, first option pre-selected); options commit on `ixsl:onmousedown` (before the input's `focusout`, children `pointer-events:none` so the `<li>` is the target). `local:typeahead-value` reads the committed hidden IRI, else a free-typed absolute IRI (`local:is-absolute-iri`), else the untouched button→edit value parked on `@data-editing-iri` (cleared on the first keystroke — the stale-selection guard). Escape closes the menu else the overlay (the innermost template fully owns the input's keys).
 - **annotate.xsl** — the unified right-click dispatcher (edit vs create), `local:apply-annotation` (single write path for RDFa attributes), shared `local:wrap-range`/`local:unwrap-element` (used by annotations AND inline formatting), invalid-selection flash, the shared output modal (`local:show-output`).
 - **edit.xsl** — the XHTML editor. **Recursive editability init** (`local:init-block`): an element is a *text host* (contenteditable) while its content model allows text and it holds no block children; mixed flow containers (`li`/`td`/`dd`/… with blocks) and structural containers (blockquote, lists, figure, table) lock their own markup and recurse into their parts (`figure` is always composite: image island + caption host); `img` never editable but given `tabindex="-1"` so a block image is a focusable **navigation island**. **Run wrappers**: the stray inline runs of a mixed flow container (`<li>text<ul>…</ul></li>`) get an ephemeral `p.rdfa-editor-run` host (`local:wrap-stray-runs`) so they stay editable — unwrapped again at canonicalization (C11), so mixed content round-trips byte-identical; structural gestures promote a wrapper to a real paragraph. **Load-init normalization**: each region is probed for invalid nesting (`cm:valid-nesting`, stray text in structural containers, stray region-level inline) and rebuilt through `mode="cm-normalize"` only when invalid (the valid case is zero-churn; host-page node references into a rewritten region go stale, same as undo restore). First-child chrome injection is a **top-level-only** affordance (`span[@data-role='chrome']`, hover-revealed via CSS) — nested hosts never carry drag handles. The Enter/Backspace state machine (split/merge primitives with explicit caret placement): splitting a run wrapper *promotes* it (marker class off); E4a — Enter on the empty last item of a *nested* list outdents one level (progressive), E4b — top-level exits to a paragraph; B2 merges text blocks, B2b descends into a preceding non-composite container's (blockquote/list) last host — bare text in the container itself would be invalid — while tables/figures stay hard boundaries (B3); B4 merges an `li` into the *visually preceding line* (`local:merge-host-in` — the last host of the previous item, unless it sits inside a nested table/figure: composites are hard boundaries at any depth, the gesture stays inert), B4b outdents the first item of a nested list, B4c merges the first item of a container-nested list (cell, quote, dd) into the preceding line inside the container — dissolving the emptied list and collapsing the container back to a text host — B7 exits the first block of a blockquote upward (emptied quote removed); E4b anchors the list-exit paragraph *before* removal, so it lands where the list was (inside the cell/quote for nested lists); E6 anchors the caption-exit paragraph after the figure/table itself (which may be nested). **Ancestor walks clamp at the region root** (`[exists(local:block-of(.))]` on `local:item-of`, the Tab cell lookup and the quote-toggle's blockquote lookup) — a host-page li/td/blockquote wrapping an embedded region is never touched. A focused image island deletes its *figure* when it has one, else just the image — never the whole containing list/table. **Tab/Shift+Tab** indent/outdent list items (`local:list-indent`/`local:list-outdent`: indent moves the item into a trailing-or-fresh nested list *inside the previous item* per `ul → (li)+`; outdent moves it after the container item, demoting followers into a nested list inside it; `local:collapse-container` reverts an emptied container to a text host; extremes flash) — the innermost context wins over table-cell traversal (li-in-td indents, a table nested in an item traverses). The **quote toggle** (`format-quote`) wraps the current host block in a `blockquote` where the parent admits one / unwraps all children out (refused with a flash when the quote carries RDFa — triples would drop); the block-type select is **host-based** (`local:current-host`): a paragraph inside a quote converts alone, non-convertible hosts disable it. The **insert buttons** (+¶, lists) place the new block per the content model (`local:insert-block-at-caret`): after the caret's host when its parent admits the kind, *inside* a leaf flow host otherwise (a list inserted in a cell nests in the cell; in a list item it becomes a sublist), after the top-level block as a last resort. **Paste** is cm-driven: clipboard HTML runs `mode="canonical"` + `mode="cm-normalize"`, then blocks land *inside* a mixed flow host (`local:paste-into-flow-host` — head/tail runs wrapped, host re-inited as container), or as siblings of an inline-only host via split-and-thread (when `cm:allows-child` permits), or flatten to text (caption, dt). Drag-and-drop ported from LinkedDataHub's `client/block.xsl` (handle-gated `draggable`, midpoint before/after marks). Arrow-key block crossing walks `local:nav-targets` (editable hosts **plus** block images, in document order): a host gets a caret, an image is *selected* (`local:select-image` focuses it, clearing the caret) — so images are never skipped; on a selected image, arrows step to the adjacent target and Backspace/Delete removes the whole figure (no confirm, undo-covered). Table cell keys (Tab/Enter) and the table dialog live in **tables.xsl**.
 - **tables.xsl** — table blocks as a composite kind: the insert dialog (rows×cols + header-row + caption, modeled on the figure dialog), positional row/column operations (`local:op-insert-row`/`-column`, `-delete-row`/`-column`) gated behind `local:has-spans` (disabled on pasted `colspan`/`rowspan` grids — positional edits would corrupt a spanned table) and toolbar-synced via `local:sync-table-toolbar` riding `local:update-breadcrumb`, plus `local:table-tab`/`local:table-enter` cell traversal that appends a body row at the bottom edge. Cells are `%Flow;` containers: every caret landing resolves through `local:first-host-in`/`local:last-host-in`, so a cell holding blocks lands the caret in its first/last editable host; the Tab dispatcher (edit.xsl) passes the *cell* as the traversal host even when the caret sits in a nested block. Deleting the last body row/column is a no-op — the confirm-guarded delete-block button removes the whole table. **Undo hazard:** a chrome `span` serialized as a direct child of `<table>` is foster-parented out by the HTML fragment parser on `innerHTML` restore, so `local:restore-snapshot` drops stray region-child chrome and re-injects (idempotent) before caret resolution.
@@ -67,6 +68,6 @@ Run `make sef` after any XSLT change; run the tests after any extractor change.
 - **Undo contract**: every mutating handler pushes a snapshot first (`local:push-undo`, optionally with a pre-captured `$snapshot` when the operation can fail) and calls `local:after-mutation` last — never push from shared primitives. Undo/redo restore invalidates all node-valued window properties (cleared in `local:restore-snapshot`) and closes overlay/dialogs. The caret rides along on stash entries as (block, text-node, offset) data attributes and is restored on undo/redo.
 - **Content markers**: anything written into `#content` for UI purposes must be `@class` (or `aria-*`) only — both are canonicalization-stripped. `@title` is NOT stripped and is forbidden as a marker.
 - **SaxonJS gotchas**: computed numeric predicates (`[xs:integer(...)]`) are evaluated as booleans in some contexts — bind to a variable and use the bare `[$index]` form. JS arrays returned by `ixsl:call` marshal to XDM sequences (empty array = empty sequence). Large nested map literals fail the compiler with an internal assertion — build them with `map:merge` over `map:entry` (see `$cm:model`).
-- Browser tests live in `tests/browser/` (`npm run test:browser` self-serves the repo): `editor.mjs`, `features.mjs`, `fixes.mjs`, `hardening.mjs`, `multiinstance.mjs`, `tables.mjs`, `datatype.mjs`, `inspector.mjs`, `nesting.mjs` (content-model foundation), `authoring.mjs` (nesting gestures), `select.mjs` (two-stage Ctrl+A, cross-host sweep delete, type-to-replace, canonical copy/cut, composite/clamp semantics, plus the real gestures: drag takeover with real mouse events, Shift+Click, Shift+Up/Down, gutter/backward/cross-region drags, drag-handle non-hijack), `notion.mjs` (slash menu, markdown input rules, context filtering) and `invariants.mjs` (the cross-product net: a uniform gesture battery in every caret context asserting properties that must always hold — no orphan text outside an editable host, no nested hosts, chrome top-level only, run wrappers editable, zero lint issues, undo restores the exact baseline), all against `tests/fixture-nesting.html`. Scenario tests assert *semantics* (where things land); the invariant suite catches *validity/editability/undo* regressions in combinations nobody enumerated. CI runs both headless loops and the browser suites (`.github/workflows/ci.yml`).
+- Browser tests live in `tests/browser/` (`npm run test:browser` self-serves the repo): `editor.mjs`, `features.mjs`, `fixes.mjs`, `hardening.mjs`, `multiinstance.mjs`, `tables.mjs`, `datatype.mjs`, `inspector.mjs`, `nesting.mjs` (content-model foundation), `authoring.mjs` (nesting gestures), `select.mjs` (two-stage Ctrl+A, cross-host sweep delete, type-to-replace, canonical copy/cut, composite/clamp semantics, plus the real gestures: drag takeover with real mouse events, Shift+Click, Shift+Up/Down, gutter/backward/cross-region drags, drag-handle non-hijack), `notion.mjs` (slash menu, markdown input rules, context filtering), `typeahead.mjs` (property/type autocomplete: filter, keyboard/mouse select, free-IRI entry, non-IRI rejection, edit-prefill button, stale-selection invalidation — via `typeahead-helper.mjs`) and `invariants.mjs` (the cross-product net: a uniform gesture battery in every caret context asserting properties that must always hold — no orphan text outside an editable host, no nested hosts, chrome top-level only, run wrappers editable, zero lint issues, undo restores the exact baseline), all against `tests/fixture-nesting.html`. Scenario tests assert *semantics* (where things land); the invariant suite catches *validity/editability/undo* regressions in combinations nobody enumerated. CI runs both headless loops and the browser suites (`.github/workflows/ci.yml`).
 - **Sanitization**: `canonical-xhtml.xsl` is the storage boundary — it drops script/style/iframe/object/embed/applet/form controls/link/meta/base subtrees, comments/PIs, all `on*` attributes, and `javascript:`/`vbscript:`/`data:` URLs (`data:image/*` allowed in `@src`). HTML paste goes through this same mode. Lint mirrors these as `unsafe-attribute`/`unsafe-url`.
 - Editor-contract CSS lives in `rdfa-editor.css` (host pages include it; the container needs ~2.5em left padding for the gutter handles); `index.html` keeps only demo styles.
diff --git a/rdfa-editor.css b/rdfa-editor.css
index 1dac6b1..eb3a05f 100644
--- a/rdfa-editor.css
+++ b/rdfa-editor.css
@@ -722,11 +722,108 @@
                 box-shadow: 0 2px 8px rgba(244, 67, 54, 0.3);
             }
 
-#overlay input[name="custom-property"],
-            #overlay input[name="custom-type"] {
+#overlay input[name="custom-datatype"] {
                 margin-top: 8px;
             }
 
+/* Typeahead lookups (property / type) */
+            .rdfa-editor-ui .typeahead-field {
+                position: relative;
+                display: block;
+            }
+
+.rdfa-editor-ui .typeahead-menu {
+                position: absolute;
+                top: 100%;
+                left: 0;
+                right: 0;
+                z-index: 10002;
+                margin: 2px 0 0 0;
+                padding: 4px;
+                list-style: none;
+                background: white;
+                border: 1px solid #e0e0e0;
+                border-radius: 6px;
+                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+                max-height: 260px;
+                overflow-y: auto;
+            }
+
+.rdfa-editor-ui .typeahead-option {
+                display: flex;
+                align-items: baseline;
+                justify-content: space-between;
+                gap: 10px;
+                padding: 7px 10px;
+                border-radius: 4px;
+                font-size: 14px;
+                color: #212121;
+                cursor: pointer;
+            }
+
+/* children never intercept the mousedown, so the <li> is always the event target */
+            .rdfa-editor-ui .typeahead-option * {
+                pointer-events: none;
+            }
+
+.rdfa-editor-ui .typeahead-option:hover,
+            .rdfa-editor-ui .typeahead-option[aria-selected="true"] {
+                background: #e3f2fd;
+                color: #0d47a1;
+            }
+
+.rdfa-editor-ui .typeahead-option-label strong {
+                font-weight: 700;
+            }
+
+.rdfa-editor-ui .typeahead-option-uri {
+                flex: 0 1 auto;
+                min-width: 0;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                font-size: 11px;
+                color: #9e9e9e;
+            }
+
+.rdfa-editor-ui .typeahead-value {
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                width: 100%;
+                padding: 10px 12px;
+                border: 1px solid #ccc;
+                border-radius: 4px;
+                background: white;
+                font-size: 14px;
+                font-family: "Roboto", sans-serif;
+                text-align: left;
+                cursor: pointer;
+            }
+
+.rdfa-editor-ui .typeahead-value:hover {
+                border-color: #2196f3;
+            }
+
+.rdfa-editor-ui .typeahead-label {
+                flex: 1 1 auto;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+
+.rdfa-editor-ui .typeahead-clear {
+                flex: 0 0 auto;
+                color: #9e9e9e;
+                font-size: 16px;
+                line-height: 1;
+                padding: 0 2px;
+            }
+
+.rdfa-editor-ui .typeahead-clear:hover {
+                color: #f44336;
+            }
+
 /* Modal Dialog */
 #output-modal {
                 position: fixed;
diff --git a/src/index.xsl b/src/index.xsl
index d6314f5..63a4322 100644
--- a/src/index.xsl
+++ b/src/index.xsl
@@ -18,8 +18,9 @@ version="3.0">
     - RDFa2RDFXML-v3.xsl   RDFa 1.1 to RDF/XML extraction (pure XSLT, tested headless)
     - content-model.xsl    XHTML Strict content model as data (pure XSLT, include-free)
     - canonical-xhtml.xsl  canonical serialization form (pure XSLT, tested headless)
-    - vocab.xsl            generic ontology RDF/XML to dropdown options
+    - vocab.xsl            generic ontology RDF/XML to term maps
     - overlay.xsl          annotation form: rendering, reading, populating, visibility
+    - typeahead.xsl        autocomplete lookups for the property and type fields
     - annotate.xsl         right-click dispatch, apply/remove annotation, extraction modal
     - edit.xsl             XHTML editing: blocks, keyboard, toolbar, dialogs, drag-and-drop
     - tables.xsl           table blocks: insert dialog, row/column operations, cell traversal
@@ -35,6 +36,7 @@ version="3.0">
     <xsl:include href="lint-xhtml.xsl"/>
     <xsl:include href="vocab.xsl"/>
     <xsl:include href="overlay.xsl"/>
+    <xsl:include href="typeahead.xsl"/>
     <xsl:include href="annotate.xsl"/>
     <xsl:include href="edit.xsl"/>
     <xsl:include href="tables.xsl"/>
diff --git a/src/overlay.xsl b/src/overlay.xsl
index 932ef3a..d6ea40c 100644
--- a/src/overlay.xsl
+++ b/src/overlay.xsl
@@ -30,10 +30,6 @@ version="3.0">
     </xsl:template>
 
     <xsl:template name="local:render-overlay">
-        <!-- the host page preloaded these into the document pool under page-relative URIs -->
-        <xsl:variable name="vocab-uris" as="xs:string*"
-            select="$vocab-hrefs ! string(resolve-uri(., ixsl:location()))"/>
-
         <div id="overlay" class="rdfa-editor-ui" role="dialog" aria-modal="true" aria-label="RDFa annotation" style="display: none;">
             <div class="overlay-header">
                 <h3>RDFa Annotation</h3>
@@ -44,14 +40,7 @@ version="3.0">
                     <div id="stmt-subject" class="stmt-value"/>
                     <span class="stmt-role" title="Predicate">P</span>
                     <div class="stmt-control">
-                        <select name="property">
-                            <xsl:call-template name="local:vocab-options">
-                                <xsl:with-param name="hrefs" select="$vocab-uris"/>
-                                <xsl:with-param name="kind" select="'property'"/>
-                            </xsl:call-template>
-                            <option value="{$local:custom}">-- Custom property --</option>
-                        </select>
-                        <input type="text" name="custom-property" placeholder="Property IRI" style="display: none;"/>
+                        <xsl:sequence select="local:typeahead-field('property')"/>
                     </div>
                     <span class="stmt-role" title="Object">O</span>
                     <div class="stmt-control">
@@ -64,15 +53,7 @@ version="3.0">
                     <summary>Type, subject &amp; object</summary>
                     <fieldset>
                         <label>Entity type (typeof)</label>
-                        <select name="typeof">
-                            <option value="">(none)</option>
-                            <xsl:call-template name="local:vocab-options">
-                                <xsl:with-param name="hrefs" select="$vocab-uris"/>
-                                <xsl:with-param name="kind" select="'class'"/>
-                            </xsl:call-template>
-                            <option value="{$local:custom}">-- Custom type --</option>
-                        </select>
-                        <input type="text" name="custom-type" placeholder="Type IRI" style="display: none;"/>
+                        <xsl:sequence select="local:typeahead-field('typeof')"/>
                         <span class="helper-text">Types the annotated resource; without a subject the typed
                             resource becomes the object of the property (chaining)</span>
                     </fieldset>
@@ -122,8 +103,8 @@ version="3.0">
         <xsl:param name="form" as="element()"/>
 
         <xsl:map>
-            <xsl:map-entry key="'property'" select="local:select-or-custom($form, 'property', 'custom-property')"/>
-            <xsl:map-entry key="'typeof'" select="local:select-or-custom($form, 'typeof', 'custom-type')"/>
+            <xsl:map-entry key="'property'" select="local:typeahead-value($form, 'property')"/>
+            <xsl:map-entry key="'typeof'" select="local:typeahead-value($form, 'typeof')"/>
             <xsl:map-entry key="'subject'"
                 select="string(ixsl:get(($form//input[@name = 'subject'])[1], 'value'))[. ne '']"/>
             <xsl:map-entry key="'object'"
@@ -158,9 +139,22 @@ version="3.0">
         <xsl:for-each select="id('annotation-form', ixsl:page())">
             <xsl:variable name="form" as="element()" select="."/>
             <xsl:sequence select="ixsl:call(., 'reset', [])[current-date() lt xs:date('2000-01-01')]"/>
-            <xsl:for-each select=".//input[@name = ('custom-property', 'custom-type', 'custom-datatype')]">
+            <xsl:for-each select=".//input[@name = 'custom-datatype']">
                 <ixsl:set-style name="display" select="'none'"/>
             </xsl:for-each>
+            <!-- the typeahead widgets are not native controls, so form.reset() leaves
+                 them as they were: reset both explicitly (empty in create mode, the
+                 committed button in edit mode) -->
+            <xsl:call-template name="local:typeahead-set-value">
+                <xsl:with-param name="form" select="$form"/>
+                <xsl:with-param name="field" select="'property'"/>
+                <xsl:with-param name="iri" select="string($span/@property)"/>
+            </xsl:call-template>
+            <xsl:call-template name="local:typeahead-set-value">
+                <xsl:with-param name="form" select="$form"/>
+                <xsl:with-param name="field" select="'typeof'"/>
+                <xsl:with-param name="iri" select="string($span/@typeof)"/>
+            </xsl:call-template>
             <xsl:for-each select=".//button[tokenize(@class) = 'remove-action']">
                 <ixsl:set-style name="display" select="if (exists($span)) then 'inline-block' else 'none'"/>
             </xsl:for-each>
@@ -179,22 +173,6 @@ version="3.0">
             </xsl:for-each>
 
             <xsl:for-each select="$span">
-                <xsl:for-each select="@property">
-                    <xsl:call-template name="local:set-select-or-custom">
-                        <xsl:with-param name="form" select="$form"/>
-                        <xsl:with-param name="select-name" select="'property'"/>
-                        <xsl:with-param name="custom-name" select="'custom-property'"/>
-                        <xsl:with-param name="value" select="string(.)"/>
-                    </xsl:call-template>
-                </xsl:for-each>
-                <xsl:for-each select="@typeof">
-                    <xsl:call-template name="local:set-select-or-custom">
-                        <xsl:with-param name="form" select="$form"/>
-                        <xsl:with-param name="select-name" select="'typeof'"/>
-                        <xsl:with-param name="custom-name" select="'custom-type'"/>
-                        <xsl:with-param name="value" select="string(.)"/>
-                    </xsl:call-template>
-                </xsl:for-each>
                 <xsl:for-each select="$form//input[@name = 'subject']">
                     <ixsl:set-property name="value" select="string($span/@about)" object="."/>
                 </xsl:for-each>
@@ -352,26 +330,20 @@ version="3.0">
         </xsl:for-each>
     </xsl:template>
 
-    <!-- the empty 'Custom' option reveals the free-text IRI input -->
-    <xsl:template match="select[@name = ('property', 'typeof', 'datatype')]" mode="ixsl:onchange">
-        <xsl:variable name="custom-name" as="xs:string"
-            select="if (@name = 'property') then 'custom-property'
-                else if (@name = 'typeof') then 'custom-type'
-                else 'custom-datatype'"/>
+    <!-- the datatype select's 'Custom' option reveals the free-text IRI input;
+         a chosen datatype wins over language, disabling the language input -->
+    <xsl:template match="select[@name = 'datatype']" mode="ixsl:onchange">
         <xsl:variable name="value" as="xs:string" select="string(ixsl:get(., 'value'))"/>
         <xsl:variable name="custom" as="xs:boolean" select="$value eq $local:custom"/>
-        <xsl:for-each select="ancestor::form//input[@name = $custom-name]">
+        <xsl:for-each select="ancestor::form//input[@name = 'custom-datatype']">
             <ixsl:set-style name="display" select="if ($custom) then 'block' else 'none'"/>
             <xsl:if test="$custom">
                 <xsl:sequence select="ixsl:call(., 'focus', [])[current-date() lt xs:date('2000-01-01')]"/>
             </xsl:if>
         </xsl:for-each>
-        <!-- datatype wins over language: a chosen datatype disables the language input -->
-        <xsl:if test="@name = 'datatype'">
-            <xsl:for-each select="ancestor::form//input[@name = 'lang']">
-                <ixsl:set-property name="disabled" select="$value ne ''" object="."/>
-            </xsl:for-each>
-        </xsl:if>
+        <xsl:for-each select="ancestor::form//input[@name = 'lang']">
+            <ixsl:set-property name="disabled" select="$value ne ''" object="."/>
+        </xsl:for-each>
     </xsl:template>
 
 </xsl:stylesheet>
diff --git a/src/typeahead.xsl b/src/typeahead.xsl
new file mode 100644
index 0000000..d2b8f8f
--- /dev/null
+++ b/src/typeahead.xsl
@@ -0,0 +1,382 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xsl:stylesheet
+xmlns="http://www.w3.org/1999/xhtml"
+xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+xmlns:ixsl="http://saxonica.com/ns/interactiveXSLT"
+xmlns:xs="http://www.w3.org/2001/XMLSchema"
+xmlns:local="urn:rdfa-editor:functions"
+extension-element-prefixes="ixsl"
+xpath-default-namespace="http://www.w3.org/1999/xhtml"
+exclude-result-prefixes="xs"
+version="3.0">
+
+<!--
+    Typeahead lookups for the annotation form's property and type fields (replacing
+    long <select> dropdowns). LinkedDataHub's typeahead fires debounced SPARQL; here
+    the vocabularies are already in the SaxonJS document pool, so filtering is a
+    synchronous per-keystroke pass over local:vocab-terms - no async, no debounce.
+
+    A field is a stable wrapper span[@data-field] holding one of two states, swapped
+    via result-document (literal result elements, the IXSL-idiomatic DOM build):
+      - typing:    input.typeahead-input + ul.typeahead-menu (the option list)
+      - committed: button.typeahead-value (label + hidden input carrying the IRI)
+    The value is read from the hidden input when committed, else from the visible
+    input's text when it is an absolute IRI (free entry) or, for an untouched
+    button->edit, from @data-editing-iri (cleared on the first keystroke).
+-->
+
+    <!-- an absolute IRI has a scheme; free text lacking one is not a usable value -->
+    <xsl:function name="local:is-absolute-iri" as="xs:boolean">
+        <xsl:param name="s" as="xs:string"/>
+        <xsl:sequence select="matches($s, '^[A-Za-z][A-Za-z0-9+.\-]*:')"/>
+    </xsl:function>
+
+    <xsl:function name="local:typeahead-placeholder" as="xs:string">
+        <xsl:param name="field" as="xs:string"/>
+        <xsl:sequence select="if ($field = 'typeof')
+            then 'Type or paste a class IRI…' else 'Type or paste a property IRI…'"/>
+    </xsl:function>
+
+    <xsl:function name="local:typeahead-kind" as="xs:string">
+        <xsl:param name="field" as="xs:string"/>
+        <xsl:sequence select="if ($field = 'typeof') then 'class' else 'property'"/>
+    </xsl:function>
+
+    <!-- all terms of the field's kind across every vocabulary, resolved the same way
+         local:render-overlay does so doc() hits the preloaded pool -->
+    <xsl:function name="local:typeahead-terms" as="map(xs:string, xs:string)*">
+        <xsl:param name="field" as="xs:string"/>
+
+        <xsl:variable name="kind" as="xs:string" select="local:typeahead-kind($field)"/>
+        <xsl:variable name="vocab-uris" as="xs:string*"
+            select="$vocab-hrefs ! string(resolve-uri(., ixsl:location()))"/>
+        <xsl:for-each select="$vocab-uris">
+            <xsl:sequence select="local:vocab-terms(doc(.), $kind)"/>
+        </xsl:for-each>
+    </xsl:function>
+
+    <!-- the human label for a committed IRI: the vocabulary term's label, else the IRI -->
+    <xsl:function name="local:typeahead-label-for" as="xs:string">
+        <xsl:param name="field" as="xs:string"/>
+        <xsl:param name="iri" as="xs:string"/>
+
+        <xsl:variable name="match" as="map(xs:string, xs:string)?"
+            select="(local:typeahead-terms($field)[?uri = $iri])[1]"/>
+        <xsl:sequence select="(if (exists($match)) then $match?label else (), $iri)[1]"/>
+    </xsl:function>
+
+    <!-- the empty typing-state field, placed by local:render-overlay -->
+    <xsl:function name="local:typeahead-field" as="element()">
+        <xsl:param name="field" as="xs:string"/>
+
+        <span class="typeahead-field rdfa-editor-ui" data-field="{$field}">
+            <input type="text" class="typeahead-input" autocomplete="off"
+                placeholder="{local:typeahead-placeholder($field)}"/>
+            <ul class="typeahead-menu" role="listbox" style="display: none;"/>
+        </span>
+    </xsl:function>
+
+    <!-- the committed IRI, else a free-typed absolute IRI, else the untouched
+         button->edit value, else nothing -->
+    <xsl:function name="local:typeahead-value" as="xs:string?">
+        <xsl:param name="form" as="element()"/>
+        <xsl:param name="field" as="xs:string"/>
+
+        <xsl:variable name="wrapper" as="element()?" select="($form//span[@data-field = $field])[1]"/>
+        <xsl:variable name="hidden" as="element()?" select="$wrapper//input[@type = 'hidden']"/>
+        <xsl:choose>
+            <xsl:when test="exists($hidden)">
+                <xsl:sequence select="string(ixsl:get($hidden, 'value'))[. ne '']"/>
+            </xsl:when>
+            <xsl:otherwise>
+                <xsl:variable name="input" as="element()?"
+                    select="$wrapper//input[contains-token(@class, 'typeahead-input')]"/>
+                <xsl:variable name="text" as="xs:string"
+                    select="normalize-space(string(ixsl:get($input, 'value')))"/>
+                <xsl:variable name="editing" as="xs:string" select="string($wrapper/@data-editing-iri)"/>
+                <xsl:sequence select="
+                    if ($text eq '') then ()
+                    else if (local:is-absolute-iri($text)) then $text
+                    else if ($editing ne '') then $editing
+                    else ()"/>
+            </xsl:otherwise>
+        </xsl:choose>
+    </xsl:function>
+
+    <!-- reset a field to reflect an IRI (empty -> empty input, non-empty -> button);
+         drives form open and edit pre-fill, fully controlling the state (form.reset()
+         leaves these custom widgets untouched) -->
+    <xsl:template name="local:typeahead-set-value">
+        <xsl:param name="form" as="element()"/>
+        <xsl:param name="field" as="xs:string"/>
+        <xsl:param name="iri" as="xs:string"/>
+
+        <xsl:for-each select="($form//span[@data-field = $field])[1]">
+            <ixsl:remove-attribute name="data-editing-iri"/>
+            <xsl:choose>
+                <xsl:when test="$iri ne ''">
+                    <xsl:call-template name="local:typeahead-commit">
+                        <xsl:with-param name="wrapper" select="."/>
+                        <xsl:with-param name="iri" select="$iri"/>
+                        <xsl:with-param name="label" select="local:typeahead-label-for($field, $iri)"/>
+                    </xsl:call-template>
+                </xsl:when>
+                <xsl:otherwise>
+                    <xsl:call-template name="local:typeahead-to-input">
+                        <xsl:with-param name="wrapper" select="."/>
+                    </xsl:call-template>
+                </xsl:otherwise>
+            </xsl:choose>
+        </xsl:for-each>
+    </xsl:template>
+
+    <!-- swap the wrapper to the committed button carrying the IRI -->
+    <xsl:template name="local:typeahead-commit">
+        <xsl:param name="wrapper" as="element()"/>
+        <xsl:param name="iri" as="xs:string"/>
+        <xsl:param name="label" as="xs:string"/>
+
+        <xsl:variable name="field" as="xs:string" select="string($wrapper/@data-field)"/>
+        <xsl:for-each select="$wrapper">
+            <ixsl:remove-attribute name="data-editing-iri"/>
+            <xsl:result-document href="?." method="ixsl:replace-content">
+                <button type="button" class="typeahead-value" title="{$iri}">
+                    <span class="typeahead-label"><xsl:value-of select="$label"/></span>
+                    <span class="typeahead-clear" role="button" aria-label="Clear">&#215;</span>
+                    <input type="hidden" name="{$field}" value="{$iri}"/>
+                </button>
+            </xsl:result-document>
+        </xsl:for-each>
+    </xsl:template>
+
+    <!-- swap the wrapper to the typing state; optionally seed the text, focus the
+         input and open the menu (button->edit) -->
+    <xsl:template name="local:typeahead-to-input">
+        <xsl:param name="wrapper" as="element()"/>
+        <xsl:param name="text" as="xs:string" select="''"/>
+        <xsl:param name="focus" as="xs:boolean" select="false()"/>
+        <xsl:param name="open" as="xs:boolean" select="false()"/>
+
+        <xsl:variable name="field" as="xs:string" select="string($wrapper/@data-field)"/>
+        <xsl:for-each select="$wrapper">
+            <xsl:result-document href="?." method="ixsl:replace-content">
+                <input type="text" class="typeahead-input" autocomplete="off"
+                    placeholder="{local:typeahead-placeholder($field)}" value="{$text}"/>
+                <ul class="typeahead-menu" role="listbox" style="display: {if ($open) then 'block' else 'none'};">
+                    <xsl:if test="$open">
+                        <xsl:call-template name="local:typeahead-options">
+                            <xsl:with-param name="field" select="$field"/>
+                            <xsl:with-param name="query" select="$text"/>
+                        </xsl:call-template>
+                    </xsl:if>
+                </ul>
+            </xsl:result-document>
+        </xsl:for-each>
+        <xsl:if test="$focus">
+            <xsl:for-each select="($wrapper//input[contains-token(@class, 'typeahead-input')])[1]">
+                <xsl:sequence select="ixsl:call(., 'focus', [])[current-date() lt xs:date('2000-01-01')]"/>
+            </xsl:for-each>
+        </xsl:if>
+    </xsl:template>
+
+    <!-- render the option <li> list for a query (no result-document of its own: the
+         caller places it inside one). Prefix matches rank first, then by label;
+         capped so a large vocabulary stays snappy; the first option is pre-selected -->
+    <xsl:template name="local:typeahead-options">
+        <xsl:param name="field" as="xs:string"/>
+        <xsl:param name="query" as="xs:string"/>
+
+        <xsl:variable name="q" as="xs:string" select="lower-case(normalize-space($query))"/>
+        <xsl:variable name="matches" as="map(xs:string, xs:string)*" select="local:typeahead-terms($field)
+            [$q = '' or contains(lower-case(?label), $q) or contains(lower-case(?uri), $q)]"/>
+        <xsl:variable name="ranked" as="map(xs:string, xs:string)*">
+            <xsl:perform-sort select="$matches">
+                <xsl:sort select="if (starts-with(lower-case(?label), $q)) then 0 else 1"/>
+                <xsl:sort select="lower-case(?label)"/>
+            </xsl:perform-sort>
+        </xsl:variable>
+        <xsl:for-each select="$ranked[position() le 50]">
+            <xsl:variable name="pos" as="xs:integer" select="position()"/>
+            <li class="typeahead-option" role="option" data-uri="{?uri}" data-label="{?label}">
+                <xsl:if test="$pos = 1">
+                    <xsl:attribute name="aria-selected" select="'true'"/>
+                </xsl:if>
+                <span class="typeahead-option-label">
+                    <xsl:call-template name="local:typeahead-highlight">
+                        <xsl:with-param name="text" select="?label"/>
+                        <xsl:with-param name="q" select="$q"/>
+                    </xsl:call-template>
+                </span>
+                <span class="typeahead-option-uri"><xsl:value-of select="?uri"/></span>
+            </li>
+        </xsl:for-each>
+    </xsl:template>
+
+    <!-- re-render the menu for the current query and show/hide it -->
+    <xsl:template name="local:typeahead-refresh">
+        <xsl:param name="wrapper" as="element()"/>
+        <xsl:param name="query" as="xs:string"/>
+
+        <xsl:variable name="field" as="xs:string" select="string($wrapper/@data-field)"/>
+        <xsl:for-each select="$wrapper//ul[contains-token(@class, 'typeahead-menu')]">
+            <xsl:result-document href="?." method="ixsl:replace-content">
+                <xsl:call-template name="local:typeahead-options">
+                    <xsl:with-param name="field" select="$field"/>
+                    <xsl:with-param name="query" select="$query"/>
+                </xsl:call-template>
+            </xsl:result-document>
+            <ixsl:set-style name="display"
+                select="if (exists(./li)) then 'block' else 'none'"/>
+        </xsl:for-each>
+    </xsl:template>
+
+    <!-- the matched substring in bold (first occurrence, case-insensitive) -->
+    <xsl:template name="local:typeahead-highlight">
+        <xsl:param name="text" as="xs:string"/>
+        <xsl:param name="q" as="xs:string"/>
+
+        <xsl:choose>
+            <xsl:when test="$q = '' or not(contains(lower-case($text), $q))">
+                <xsl:value-of select="$text"/>
+            </xsl:when>
+            <xsl:otherwise>
+                <xsl:variable name="i" as="xs:integer"
+                    select="string-length(substring-before(lower-case($text), $q))"/>
+                <xsl:value-of select="substring($text, 1, $i)"/>
+                <strong><xsl:value-of select="substring($text, $i + 1, string-length($q))"/></strong>
+                <xsl:value-of select="substring($text, $i + 1 + string-length($q))"/>
+            </xsl:otherwise>
+        </xsl:choose>
+    </xsl:template>
+
+    <!-- ............................ event handlers ............................ -->
+
+    <!-- typing filters the menu and invalidates a stale button->edit selection -->
+    <xsl:template match="input[contains-token(@class, 'typeahead-input')]" mode="ixsl:oninput">
+        <xsl:variable name="wrapper" as="element()"
+            select="ancestor::span[contains-token(@class, 'typeahead-field')][1]"/>
+        <ixsl:remove-attribute name="data-editing-iri" object="$wrapper"/>
+        <xsl:call-template name="local:typeahead-refresh">
+            <xsl:with-param name="wrapper" select="$wrapper"/>
+            <xsl:with-param name="query" select="string(ixsl:get(., 'value'))"/>
+        </xsl:call-template>
+    </xsl:template>
+
+    <!-- the innermost template fires, so this fully owns the input's keys: Escape
+         closes the menu (else the overlay, mirroring overlay.xsl's div handler);
+         Enter commits a free IRI or the active option; arrows move the selection -->
+    <xsl:template match="input[contains-token(@class, 'typeahead-input')]" mode="ixsl:onkeydown">
+        <xsl:variable name="event" select="ixsl:event()"/>
+        <xsl:variable name="key" as="xs:string" select="string(ixsl:get($event, 'key'))"/>
+        <xsl:variable name="wrapper" as="element()"
+            select="ancestor::span[contains-token(@class, 'typeahead-field')][1]"/>
+        <xsl:variable name="field" as="xs:string" select="string($wrapper/@data-field)"/>
+        <xsl:variable name="menu" as="element()" select="$wrapper//ul[contains-token(@class, 'typeahead-menu')]"/>
+        <xsl:variable name="open" as="xs:boolean" select="string(ixsl:get($menu, 'style.display')) ne 'none'"/>
+        <xsl:variable name="items" as="element()*" select="$menu//li[contains-token(@class, 'typeahead-option')]"/>
+        <xsl:variable name="current" as="element()?" select="$items[@aria-selected = 'true'][1]"/>
+        <xsl:variable name="text" as="xs:string" select="normalize-space(string(ixsl:get(., 'value')))"/>
+        <xsl:choose>
+            <xsl:when test="$key = 'Escape'">
+                <xsl:sequence select="ixsl:call($event, 'preventDefault', [])[current-date() lt xs:date('2000-01-01')]"/>
+                <xsl:choose>
+                    <xsl:when test="$open">
+                        <ixsl:set-style name="display" select="'none'" object="$menu"/>
+                    </xsl:when>
+                    <xsl:otherwise>
+                        <xsl:call-template name="local:hide-overlay"/>
+                    </xsl:otherwise>
+                </xsl:choose>
+            </xsl:when>
+            <xsl:when test="$key = 'Enter'">
+                <xsl:sequence select="ixsl:call($event, 'preventDefault', [])[current-date() lt xs:date('2000-01-01')]"/>
+                <xsl:choose>
+                    <xsl:when test="local:is-absolute-iri($text)">
+                        <xsl:call-template name="local:typeahead-commit">
+                            <xsl:with-param name="wrapper" select="$wrapper"/>
+                            <xsl:with-param name="iri" select="$text"/>
+                            <xsl:with-param name="label" select="local:typeahead-label-for($field, $text)"/>
+                        </xsl:call-template>
+                    </xsl:when>
+                    <xsl:when test="$open and exists($current)">
+                        <xsl:call-template name="local:typeahead-commit">
+                            <xsl:with-param name="wrapper" select="$wrapper"/>
+                            <xsl:with-param name="iri" select="string($current/@data-uri)"/>
+                            <xsl:with-param name="label" select="string($current/@data-label)"/>
+                        </xsl:call-template>
+                    </xsl:when>
+                    <xsl:otherwise>
+                        <ixsl:set-style name="display" select="'none'" object="$menu"/>
+                    </xsl:otherwise>
+                </xsl:choose>
+            </xsl:when>
+            <xsl:when test="$key = ('ArrowDown', 'ArrowUp') and $open and exists($items)">
+                <xsl:sequence select="ixsl:call($event, 'preventDefault', [])[current-date() lt xs:date('2000-01-01')]"/>
+                <xsl:variable name="pos" as="xs:integer"
+                    select="if (exists($current)) then count($items[. &lt;&lt; $current]) + 1 else 1"/>
+                <xsl:variable name="next" as="xs:integer" select="if ($key = 'ArrowDown')
+                    then min(($pos + 1, count($items))) else max(($pos - 1, 1))"/>
+                <xsl:for-each select="$items">
+                    <ixsl:remove-attribute name="aria-selected"/>
+                </xsl:for-each>
+                <xsl:for-each select="$items[$next]">
+                    <ixsl:set-attribute name="aria-selected" select="'true'"/>
+                    <xsl:variable name="opts" select="ixsl:call(ixsl:window(), 'Object', [])"/>
+                    <ixsl:set-property name="block" select="'nearest'" object="$opts"/>
+                    <xsl:sequence select="ixsl:call(., 'scrollIntoView', [ $opts ])[current-date() lt xs:date('2000-01-01')]"/>
+                </xsl:for-each>
+            </xsl:when>
+            <xsl:otherwise/>
+        </xsl:choose>
+    </xsl:template>
+
+    <!-- focus leaving the field hides the menu; an option's mousedown preventDefault
+         keeps focus, so mouse selection commits before this runs -->
+    <xsl:template match="input[contains-token(@class, 'typeahead-input')]" mode="ixsl:onfocusout">
+        <xsl:for-each select="ancestor::span[contains-token(@class, 'typeahead-field')][1]
+                //ul[contains-token(@class, 'typeahead-menu')]">
+            <ixsl:set-style name="display" select="'none'"/>
+        </xsl:for-each>
+    </xsl:template>
+
+    <!-- mousedown (not click): fires before the input's focusout, so the option is
+         still there to read. preventDefault keeps the caret/focus -->
+    <xsl:template match="li[contains-token(@class, 'typeahead-option')]" mode="ixsl:onmousedown">
+        <xsl:sequence select="ixsl:call(ixsl:event(), 'preventDefault', [])[current-date() lt xs:date('2000-01-01')]"/>
+        <xsl:call-template name="local:typeahead-commit">
+            <xsl:with-param name="wrapper" select="ancestor::span[contains-token(@class, 'typeahead-field')][1]"/>
+            <xsl:with-param name="iri" select="string(@data-uri)"/>
+            <xsl:with-param name="label" select="string(@data-label)"/>
+        </xsl:call-template>
+    </xsl:template>
+
+    <!-- the committed button: the × clears the field, the body re-opens it for
+         editing (prefilled with the label, IRI parked on @data-editing-iri) -->
+    <xsl:template match="button[contains-token(@class, 'typeahead-value')]" mode="ixsl:onclick">
+        <xsl:variable name="event" select="ixsl:event()"/>
+        <xsl:variable name="target" select="ixsl:get($event, 'target')"/>
+        <xsl:variable name="wrapper" as="element()"
+            select="ancestor-or-self::span[contains-token(@class, 'typeahead-field')][1]"/>
+        <xsl:variable name="iri" as="xs:string" select="string(@title)"/>
+        <xsl:variable name="label" as="xs:string"
+            select="string(.//span[contains-token(@class, 'typeahead-label')])"/>
+        <xsl:choose>
+            <xsl:when test="exists($target/ancestor-or-self::*[contains-token(@class, 'typeahead-clear')])">
+                <xsl:call-template name="local:typeahead-to-input">
+                    <xsl:with-param name="wrapper" select="$wrapper"/>
+                    <xsl:with-param name="focus" select="true()"/>
+                </xsl:call-template>
+            </xsl:when>
+            <xsl:otherwise>
+                <ixsl:set-attribute name="data-editing-iri" select="$iri" object="$wrapper"/>
+                <xsl:call-template name="local:typeahead-to-input">
+                    <xsl:with-param name="wrapper" select="$wrapper"/>
+                    <xsl:with-param name="text" select="$label"/>
+                    <xsl:with-param name="focus" select="true()"/>
+                    <xsl:with-param name="open" select="true()"/>
+                </xsl:call-template>
+            </xsl:otherwise>
+        </xsl:choose>
+    </xsl:template>
+
+</xsl:stylesheet>
diff --git a/src/vocab.xsl b/src/vocab.xsl
index a9d1d1b..662e664 100644
--- a/src/vocab.xsl
+++ b/src/vocab.xsl
@@ -49,19 +49,6 @@ version="3.0">
         )[1] ! string(.)"/>
     </xsl:function>
 
-    <xsl:function name="local:ontology-label" as="xs:string">
-        <xsl:param name="vocab" as="document-node()"/>
-        <xsl:param name="href" as="xs:string"/>
-
-        <!-- bound outside the predicate: SaxonJS does not hoist the loop-invariant
-             call, and re-evaluating it per scanned element is quadratic -->
-        <xsl:variable name="ontology-uri" as="xs:string?" select="local:ontology-uri($vocab)"/>
-        <xsl:variable name="ontology" as="element()*"
-            select="$vocab/rdf:RDF/*[@rdf:about = $ontology-uri]"/>
-        <xsl:sequence select="($ontology/@dc11:title, $ontology/dc11:title, $ontology/@dct:title, $ontology/dct:title,
-            $ontology/@rdfs:label, $ontology/rdfs:label, $href)[1] ! string(.)"/>
-    </xsl:function>
-
     <!--
         Terms of the requested kind ('class' | 'property') as maps with 'uri' and 'label'.
         Descriptions are grouped by @rdf:about so striped vocabularies work; terms outside
@@ -86,24 +73,6 @@ version="3.0">
         </xsl:for-each-group>
     </xsl:function>
 
-    <!-- one optgroup per vocabulary; feeds both the typeof and the property selects.
-         $hrefs are absolute URIs resolved by the caller; in the browser they hit the
-         preloaded document pool, headless they are ordinary file URIs -->
-    <xsl:template name="local:vocab-options">
-        <xsl:param name="hrefs" as="xs:string*"/>
-        <xsl:param name="kind" as="xs:string"/>
-
-        <xsl:for-each select="$hrefs">
-            <xsl:variable name="vocab" as="document-node()" select="doc(.)"/>
-            <optgroup label="{local:ontology-label($vocab, .)}">
-                <xsl:for-each select="local:vocab-terms($vocab, $kind)">
-                    <xsl:sort select="?label"/>
-                    <option value="{?uri}">
-                        <xsl:value-of select="?label"/>
-                    </option>
-                </xsl:for-each>
-            </optgroup>
-        </xsl:for-each>
-    </xsl:template>
+    <!-- local:vocab-terms feeds the property and type typeaheads (typeahead.xsl) -->
 
 </xsl:stylesheet>
diff --git a/tests/browser/datatype.mjs b/tests/browser/datatype.mjs
index 3078845..e94df3b 100644
--- a/tests/browser/datatype.mjs
+++ b/tests/browser/datatype.mjs
@@ -1,4 +1,5 @@
 import { chromium } from 'playwright';
+import { pickTerm, typeIri } from './typeahead-helper.mjs';
 
 const BASE = process.env.BASE_URL ?? 'http://localhost:8080';
 
@@ -63,8 +64,7 @@ const spanAttrs = (property) => page.evaluate(p => {
 // ---- 1. typed literal: xsd:date + machine-readable @content --------------------
 await selectText('Q4 2024');
 await rightClickSelection();
-await page.selectOption('#overlay select[name=property]', 'urn:rdfa-editor:custom');
-await page.fill('#overlay input[name=custom-property]', 'http://purl.org/dc/terms/date');
+await typeIri(page, 'property', 'http://purl.org/dc/terms/date');
 await page.selectOption('#overlay select[name=datatype]', XSD + 'date');
 await page.fill('#overlay input[name=value]', '2024-10-01');
 await page.click('#overlay button.spo-action');
@@ -86,7 +86,7 @@ await page.click('#output-modal .modal-close');
 // ---- 2. language-tagged literal (no datatype) ----------------------------------
 await selectText('information');
 await rightClickSelection();
-await page.selectOption('#overlay select[name=property]', 'http://purl.org/dc/terms/description');
+await pickTerm(page, 'property', 'http://purl.org/dc/terms/description', 'description');
 await page.fill('#overlay input[name=lang]', 'fr');
 await page.click('#overlay button.spo-action');
 await page.waitForTimeout(150);
diff --git a/tests/browser/editor.mjs b/tests/browser/editor.mjs
index f1c11ec..bfdea01 100644
--- a/tests/browser/editor.mjs
+++ b/tests/browser/editor.mjs
@@ -1,4 +1,5 @@
 import { chromium } from 'playwright';
+import { pickTerm } from './typeahead-helper.mjs';
 
 const BASE = process.env.BASE_URL ?? 'http://localhost:8080';
 
@@ -308,7 +309,7 @@ await page.evaluate(() => {
 });
 await page.locator('#content > p', { hasText: 'official website' }).click({ button: 'right', position: { x: 25, y: 8 } });
 await page.waitForTimeout(300);
-await page.selectOption('#overlay select[name=property]', 'http://purl.org/dc/terms/description');
+await pickTerm(page, 'property', 'http://purl.org/dc/terms/description', 'description');
 await page.click('#overlay button.spo-action');
 await page.click('#parse-rdf');
 await page.waitForTimeout(300);
@@ -329,8 +330,10 @@ await page.waitForTimeout(300);
 results.blockAnnotation = {
     editorOpened: await page.evaluate(() =>
         getComputedStyle(document.getElementById('overlay')).display !== 'none'),
+    // edit pre-fill renders the committed typeahead button carrying the IRI
     propertyPrefilled: await page.evaluate(() =>
-        document.querySelector('#overlay select[name=property]').value === 'http://purl.org/dc/terms/title'),
+        document.querySelector('#overlay .typeahead-field[data-field=property] input[type=hidden]')?.value
+            === 'http://purl.org/dc/terms/title'),
     // the value field must not leak the block's chrome (⠿) glyph
     valueClean: await page.evaluate(() =>
         document.querySelector('#overlay input[name=value]').value === 'Demo document'),
diff --git a/tests/browser/features.mjs b/tests/browser/features.mjs
index 794b49b..e272dc9 100644
--- a/tests/browser/features.mjs
+++ b/tests/browser/features.mjs
@@ -1,4 +1,5 @@
 import { chromium } from 'playwright';
+import { pickTerm } from './typeahead-helper.mjs';
 
 const BASE = process.env.BASE_URL ?? 'http://localhost:8080';
 
@@ -112,7 +113,7 @@ await page.evaluate(() => {
 });
 await page.locator('#content > p', { hasText: 'official website' }).click({ button: 'right', position: { x: 25, y: 8 } });
 await page.waitForTimeout(300);
-await page.selectOption('#overlay select[name=property]', 'http://purl.org/dc/terms/description');
+await pickTerm(page, 'property', 'http://purl.org/dc/terms/description', 'description');
 await page.click('#overlay button.spo-action');
 const spanCount = await page.evaluate(() => document.querySelectorAll('#content span[property="http://purl.org/dc/terms/description"]').length);
 await caretInText('#content > p:first-of-type');
@@ -248,15 +249,20 @@ await page.evaluate(() => {
 });
 await page.locator('#content > p', { hasText: 'official website' }).click({ button: 'right', position: { x: 25, y: 8 } });
 await page.waitForTimeout(300);
-await page.selectOption('#overlay select[name=property]', 'urn:rdfa-editor:custom');
-await page.fill('#overlay input[name=custom-property]', 'nmae');
+// term-unresolvable is now reached via the datatype free-text input: the property/
+// type typeaheads reject bare terms outright, but @datatype is still lint-checked and
+// its input is unchanged. This exercises the same surfacing pipeline (badge/squiggle/
+// modal/canonical/undo). Open the advanced disclosure to reach the datatype control.
+await page.evaluate(() => { document.getElementById('advanced-fields').open = true; });
+await page.selectOption('#overlay select[name=datatype]', 'urn:rdfa-editor:custom');
+await page.fill('#overlay input[name=custom-datatype]', 'nmae');
 await page.click('#overlay button.spo-action');
 await page.waitForTimeout(200);
 results.lint.badgeShown = await page.evaluate(() =>
     getComputedStyle(document.getElementById('lint-badge')).display !== 'none'
     && document.getElementById('lint-badge').textContent === '1 issue');
 results.lint.squiggle = await page.evaluate(() =>
-    document.querySelector('#content span[property="nmae"]')?.classList.contains('rdfa-invalid') === true);
+    document.querySelector('#content span[datatype="nmae"]')?.classList.contains('rdfa-invalid') === true);
 await page.click('#lint-badge');
 results.lint.modalLists = await page.evaluate(() =>
     document.getElementById('output-content').textContent.includes('term-unresolvable'));
diff --git a/tests/browser/run.mjs b/tests/browser/run.mjs
index d14fd5d..a38d873 100644
--- a/tests/browser/run.mjs
+++ b/tests/browser/run.mjs
@@ -25,7 +25,7 @@ const base = `http://localhost:${server.address().port}`;
 console.log(`serving ${root} at ${base}`);
 
 let failed = 0;
-for (const suite of ['editor', 'features', 'fixes', 'hardening', 'multiinstance', 'tables', 'datatype', 'inspector', 'nesting', 'authoring', 'invariants', 'select', 'notion']) {
+for (const suite of ['editor', 'features', 'fixes', 'hardening', 'multiinstance', 'tables', 'datatype', 'inspector', 'nesting', 'authoring', 'invariants', 'select', 'notion', 'typeahead']) {
     console.log(`\n=== ${suite} ===`);
     const code = await new Promise(resolve => {
         const child = spawn(process.execPath, [fileURLToPath(new URL(`${suite}.mjs`, import.meta.url))],
diff --git a/tests/browser/tables.mjs b/tests/browser/tables.mjs
index f4052b1..824df35 100644
--- a/tests/browser/tables.mjs
+++ b/tests/browser/tables.mjs
@@ -1,4 +1,5 @@
 import { chromium } from 'playwright';
+import { pickTerm } from './typeahead-helper.mjs';
 
 const BASE = process.env.BASE_URL ?? 'http://localhost:8080';
 
@@ -284,7 +285,7 @@ await page.evaluate(() => {
 await page.locator('#content table > tbody > tr:first-child > td').first()
     .click({ button: 'right', position: { x: 8, y: 8 } });
 await page.waitForTimeout(300);
-await page.selectOption('#overlay select[name=property]', 'http://purl.org/dc/terms/description');
+await pickTerm(page, 'property', 'http://purl.org/dc/terms/description', 'description');
 await page.click('#overlay button.spo-action');
 await page.waitForTimeout(120);
 assert('cellAnnotation', await page.evaluate(() =>
diff --git a/tests/browser/typeahead-helper.mjs b/tests/browser/typeahead-helper.mjs
new file mode 100644
index 0000000..b2a6be0
--- /dev/null
+++ b/tests/browser/typeahead-helper.mjs
@@ -0,0 +1,37 @@
+// Shared drivers for the property/type typeahead fields in the annotation overlay.
+// A field is #overlay .typeahead-field[data-field=property|typeof]; it is either in
+// the typing state (input.typeahead-input + ul.typeahead-menu) or committed
+// (button.typeahead-value). These helpers normalise to the typing state first.
+
+export async function openTypeahead(page, field) {
+    const wrap = `#overlay .typeahead-field[data-field=${field}]`;
+    if (await page.locator(`${wrap} .typeahead-value`).count())
+        await page.click(`${wrap} .typeahead-value`);          // committed -> re-open for editing
+    return wrap;
+}
+
+// type a query, then select the suggested option carrying the exact IRI. Selection
+// fires on mousedown (before the input's focusout), and the option is removed on
+// commit, so dispatch mousedown directly rather than click (whose mouseup would find
+// the element detached).
+export async function pickTerm(page, field, iri, query) {
+    const wrap = await openTypeahead(page, field);
+    await page.fill(`${wrap} input.typeahead-input`, query);
+    await page.waitForTimeout(120);
+    await page.locator(`${wrap} .typeahead-option[data-uri="${iri}"]`).dispatchEvent('mousedown');
+    await page.waitForTimeout(50);
+}
+
+// type a full IRI and commit it as a free entry (no matching vocabulary term needed)
+export async function typeIri(page, field, iri) {
+    const wrap = await openTypeahead(page, field);
+    await page.fill(`${wrap} input.typeahead-input`, iri);
+    await page.keyboard.press('Enter');
+    await page.waitForTimeout(50);
+}
+
+// the committed IRI a field currently holds (hidden input inside the button), or ''
+export async function committedIri(page, field) {
+    return page.evaluate(f => document.querySelector(
+        `#overlay .typeahead-field[data-field=${f}] input[type=hidden]`)?.value ?? '', field);
+}
diff --git a/tests/browser/typeahead.mjs b/tests/browser/typeahead.mjs
new file mode 100644
index 0000000..2609cd7
--- /dev/null
+++ b/tests/browser/typeahead.mjs
@@ -0,0 +1,169 @@
+import { chromium } from 'playwright';
+import { typeIri, committedIri } from './typeahead-helper.mjs';
+
+const BASE = process.env.BASE_URL ?? 'http://localhost:8080';
+
+const errors = [];
+const results = {};
+const browser = await chromium.launch();
+const page = await browser.newPage();
+page.on('console', msg => { if (msg.type() === 'error') errors.push(msg.text()); });
+page.on('pageerror', err => errors.push(String(err)));
+page.on('dialog', d => d.accept());
+
+const assert = (name, cond) => { results[name] = cond; if (!cond) errors.push('ASSERT FAILED: ' + name); };
+
+await page.goto(BASE + '/tests/fixture.html');
+await page.waitForSelector('#overlay', { state: 'attached', timeout: 15000 })
+    .catch(() => errors.push('overlay never rendered'));
+await page.waitForSelector('#content > * > [data-role=chrome]', { state: 'attached', timeout: 5000 })
+    .catch(() => errors.push('chrome never injected'));
+
+const FOAF = 'http://xmlns.com/foaf/0.1/';
+const TITLE = 'http://purl.org/dc/terms/title';
+const pWrap = '#overlay .typeahead-field[data-field=property]';
+const tWrap = '#overlay .typeahead-field[data-field=typeof]';
+const pIn = `${pWrap} input.typeahead-input`;
+const menuOpen = (w) => page.evaluate(s =>
+    getComputedStyle(document.querySelector(s + ' .typeahead-menu')).display !== 'none', w);
+const activeUri = (w) => page.evaluate(s =>
+    document.querySelector(s + ' .typeahead-option[aria-selected=true]')?.getAttribute('data-uri') ?? '', w);
+const optionCount = (w) => page.locator(w + ' .typeahead-option').count();
+
+// select the first occurrence of a substring within a single #content text node
+const selectText = (substr) => page.evaluate(s => {
+    const walker = document.createTreeWalker(document.getElementById('content'), NodeFilter.SHOW_TEXT);
+    let node;
+    while ((node = walker.nextNode())) {
+        const i = node.textContent.indexOf(s);
+        if (i >= 0) {
+            node.parentElement.closest('[contenteditable=true]')?.focus();
+            const range = document.createRange();
+            range.setStart(node, i); range.setEnd(node, i + s.length);
+            const sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range);
+            return true;
+        }
+    }
+    return false;
+}, substr);
+
+// right-click the centre of the current selection to open the overlay
+const rightClickSelection = async () => {
+    const box = await page.evaluate(() => {
+        const sel = window.getSelection();
+        const el = sel.anchorNode.nodeType === 3 ? sel.anchorNode.parentElement : sel.anchorNode;
+        el.scrollIntoView({ block: 'center' });
+        const r = sel.getRangeAt(0).getBoundingClientRect();
+        return { x: r.left + r.width / 2, y: r.top + r.height / 2 };
+    });
+    await page.mouse.click(box.x, box.y, { button: 'right' });
+    await page.waitForTimeout(250);
+};
+
+const annotate = async (substr) => { await selectText(substr); await rightClickSelection(); };
+const cancel = async () => { await page.click('#overlay button.cancel-action'); await page.waitForTimeout(80); };
+
+// select an existing annotation (the h1 that carries @property=dct:title) and open it
+const openTitleEdit = async () => {
+    await page.evaluate(() => {
+        const h1 = document.querySelector('#content > h1');
+        h1.closest('[contenteditable=true]')?.focus();
+        const range = document.createRange(); range.selectNodeContents(h1);
+        const sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range);
+    });
+    await rightClickSelection();
+};
+
+// ---- 1. typing filters the list down to the matches, menu shown -----------------
+await annotate('official');
+await page.fill(pIn, 'know');
+await page.waitForTimeout(120);
+assert('filter.knowsShown', await page.locator(`${pWrap} .typeahead-option[data-uri="${FOAF}knows"]`).count() === 1);
+assert('filter.menuOpen', await menuOpen(pWrap));
+const narrow = await optionCount(pWrap);
+await page.fill(pIn, '');
+await page.waitForTimeout(120);
+const broad = await optionCount(pWrap);
+assert('filter.narrows', narrow >= 1 && narrow < broad);
+
+// ---- 2. keyboard: ArrowDown moves the active option, Enter commits it ------------
+await page.fill(pIn, 'a');
+await page.waitForTimeout(120);
+const first = await activeUri(pWrap);
+await page.press(pIn, 'ArrowDown');
+const second = await activeUri(pWrap);
+assert('keyboard.arrowMoves', first !== '' && second !== '' && first !== second);
+await page.press(pIn, 'Enter');
+await page.waitForTimeout(80);
+assert('keyboard.enterCommitsActive', await committedIri(page, 'property') === second);
+await cancel();
+
+// ---- 3. mouse: clicking an option commits it (typeof, in the disclosure) ---------
+await annotate('official');
+await page.evaluate(() => { document.getElementById('advanced-fields').open = true; });
+await page.fill(`${tWrap} input.typeahead-input`, 'Person');
+await page.waitForTimeout(120);
+await page.locator(`${tWrap} .typeahead-option[data-uri="${FOAF}Person"]`).dispatchEvent('mousedown');
+await page.waitForTimeout(80);
+assert('mouse.selectCommits', await committedIri(page, 'typeof') === FOAF + 'Person');
+await cancel();
+
+// ---- 4. a full IRI typed directly is accepted as a free entry -------------------
+await annotate('company');
+await typeIri(page, 'property', 'https://schema.org/birthDate');
+await page.click('#overlay button.spo-action');
+await page.waitForTimeout(120);
+assert('freeIri.written', await page.evaluate(() =>
+    !!document.querySelector('#content span[property="https://schema.org/birthDate"]')));
+
+// ---- 5. non-IRI free text yields no value (nothing committed, no @property) ------
+await annotate('graduated');
+await page.fill(pIn, 'notaterm');
+await page.waitForTimeout(80);
+assert('nonIri.notCommitted', await committedIri(page, 'property') === '');
+await page.click('#overlay button.spo-action');
+await page.waitForTimeout(120);
+assert('nonIri.noProperty', await page.evaluate(() =>
+    !document.querySelector('#content [property="notaterm"]')));
+
+// ---- 6. editing an existing annotation shows the committed button + label -------
+await openTitleEdit();
+assert('editPrefill.button', await page.locator(`${pWrap} .typeahead-value`).count() === 1);
+assert('editPrefill.iri', await committedIri(page, 'property') === TITLE);
+assert('editPrefill.label', await page.evaluate(w =>
+    (document.querySelector(w + ' .typeahead-label')?.textContent ?? '').length > 0, pWrap));
+await cancel();
+
+// ---- 7a. clicking the committed button re-opens it for editing ------------------
+await openTitleEdit();
+await page.click(`${pWrap} .typeahead-value`);
+await page.waitForTimeout(80);
+assert('stale.reopened', await page.locator(pIn).count() === 1);
+assert('stale.inputFocused', await page.evaluate(w =>
+    document.activeElement === document.querySelector(w + ' input.typeahead-input'), pWrap));
+assert('stale.editingIriParked', await page.evaluate(([w, t]) =>
+    document.querySelector(w)?.getAttribute('data-editing-iri') === t, [pWrap, TITLE]));
+await cancel();
+
+// ---- 7b. an untouched button->edit preserves the IRI on save --------------------
+await openTitleEdit();
+await page.click(`${pWrap} .typeahead-value`);
+await page.waitForTimeout(80);
+await page.click('#overlay button.spo-action');
+await page.waitForTimeout(120);
+assert('stale.untouchedPreserves', await page.evaluate(t =>
+    document.querySelector('#content > h1')?.getAttribute('property') === t, TITLE));
+
+// ---- 7c. the first keystroke invalidates the stale selection --------------------
+await openTitleEdit();
+await page.click(`${pWrap} .typeahead-value`);
+await page.waitForTimeout(80);
+await page.type(pIn, 'x');
+await page.waitForTimeout(80);
+assert('stale.typingClearsEditingIri', await page.evaluate(w =>
+    !document.querySelector(w)?.hasAttribute('data-editing-iri'), pWrap));
+await cancel();
+
+console.log(JSON.stringify({ results, errors: errors.slice(0, 8) }, null, 2));
+await browser.close();
+process.exit(errors.length ? 1 : 0);