@justai/cuts 0.157.0 → 0.159.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justai/cuts",
-  "version": "0.157.0",
+  "version": "0.159.0",
   "description": "A persona's named parts — the page shell that holds them, and the cuts themselves.",
   "license": "UNLICENSED",
   "repository": {
@@ -25,6 +25,7 @@
     "./FilePicker.astro": "./src/FilePicker.astro",
     "./Files.astro": "./src/FilePicker.astro",
     "./LangPicker.astro": "./src/LangPicker.astro",
+    "./ListInput.astro": "./src/ListInput.astro",
     "./Posts.astro": "./src/Posts.astro",
     "./Preroll.astro": "./src/Preroll.astro",
     "./Profile.astro": "./src/Profile.astro",
@@ -32,6 +33,10 @@
     "./Sheet.astro": "./src/Sheet.astro",
     "./Toolbar.astro": "./src/Toolbar.astro",
     "./ground.css": "./src/ground.css",
+    "./personaHref": {
+      "types": "./src/personaHref.d.ts",
+      "default": "./src/personaHref.js"
+    },
     "./tagline.js": "./src/tagline.js"
   },
   "peerDependencies": {
@@ -41,7 +46,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@justai/core": "^0.43.0",
+    "@justai/core": "^0.43.1",
     "@justai/ui": "^0.29.0",
     "@justai/atrium": "^0.1.9"
   },

package/src/Catalogue.astro

@@ -38,6 +38,7 @@
 // statement about what the ecosystem IS, living in one page's markup, twice. It is now a question
 // asked of the registry, which has carried `personaKind` since long before anything read it.
 import CatalogueCard, { type CatalogueEntry } from "./CatalogueCard.astro";
+import { personaHref } from "./personaHref.js";
 
 interface Props {
   /** BCP-47 code of the page — the language the registry is asked for. */
@@ -63,6 +64,19 @@ interface Props {
   kind?: string;
   /** The apex's own host, used for the referral parameter on every card. */
   apexHost: string;
+  /**
+   * queries: localeLinks · clean locale links · ref=app.zone · lang parameter · data-locale-links
+   *
+   * LINK STRAIGHT TO THE PERSONA'S PAGE IN THIS PAGE'S LANGUAGE — `https://<home>/<lang>/`, no query
+   * string — instead of `https://<home>/?ref=<apex>&lang=<lang>`.
+   *
+   * An apex turns this on when its citizens all serve the apex's languages at `/<lang>/` (app.zone:
+   * measured, 37 of 37 personas × 13 languages). It is a statement only the apex can make, which is
+   * why it is a prop and not the default: a persona that lacks the language answers 404 at that
+   * address, where the old hint was quietly ignored. See ./personaHref.js for the measurements that
+   * made the parameters worth removing.
+   */
+  localeLinks?: boolean;
   /** Layer one. Empty is valid and correct for an apex with nothing seeded yet. */
   seed?: CatalogueEntry[];
   /** The curated sequence, keyed by host — read by the runtime sort. */
@@ -102,7 +116,7 @@ interface Props {
   };
 }
 const {
-  lang, apexHost,
+  lang, apexHost, localeLinks = false,
   seed = [], order = [], taglines = {}, catLabels = {}, entries = {},
   locales, strings,
 } = Astro.props;
@@ -228,8 +242,8 @@ const isNew = (added: string): boolean => { const t0 = Date.parse(added || "");
       {/* taglines ride the same channel as newLabel and catMap: a data attribute on the grid. The
           runtime append builds its cards in plain strings and cannot reach this component's scope, so
           anything it needs has to arrive this way. Keyed by host, which is what the API calls `home`. */}
-      <section class="grid" id="grid" data-apex={apexHost} data-new-label={strings.new} data-cat-map={JSON.stringify(catLabels)} data-order={JSON.stringify(order)} data-taglines={JSON.stringify(taglines)}>
-        {seed.map((app) => <CatalogueCard app={app} name={appName(app)} desc={appDesc(app)} isNew={isNew(app.added)} newLabel={strings.new} />)}
+      <section class="grid" id="grid" data-apex={apexHost} data-locale-links={localeLinks ? "" : undefined} data-new-label={strings.new} data-cat-map={JSON.stringify(catLabels)} data-order={JSON.stringify(order)} data-taglines={JSON.stringify(taglines)}>
+        {seed.map((app) => <CatalogueCard app={app} href={localeLinks ? personaHref(hostOf(app.url), lang) : undefined} name={appName(app)} desc={appDesc(app)} isNew={isNew(app.added)} newLabel={strings.new} />)}
       </section>
       {/* queries: runtime cards are unstyled · the card has no CSS · an apex with no seed · scope cid ·
                    data-astro-cid · pin.games cards render as blue links
@@ -264,8 +278,21 @@ const isNew = (added: string): boolean => { const t0 = Date.parse(added || "");
   // locale list has ONE home and is never typed here. A literal array once lived on this line and
   // drifted: it was edited by hand when Italian shipped, and any locale missing from it fell through
   // to "en", which the receiving persona then WROTE as the visitor's saved language choice.
-  // Pass the visitor's language + a referral to each app link, so apps open in the same
-  // language and show their "home → app.zone" affordance.
+  // queries: ?ref=app.zone&lang= indexed · parameterised persona url in search console · crawler sees
+  //          ref and lang · Google indexed the hint, not the page · when does a card get ?ref
+  //
+  // THE VISITOR'S LANGUAGE AND A REFERRAL, HANDED OVER AT THE MOMENT OF THE TAP — never written into
+  // the page. This used to rewrite every card's href on load. A crawler renders the script too, so the
+  // links it followed were `https://<home>/?ref=<apex>&lang=<xx>`. That address is a page whose HTML is
+  // the default language, whose canonical is the root, and whose script goes elsewhere. Search Console
+  // then filed those addresses as pages of their own: 232 "Page with redirect" and 67 indexed on
+  // app.zone (2026-10-11, see ./personaHref.js).
+  //
+  // Now the href in the DOM stays whatever the card was rendered with: the persona's own page in this
+  // language when the apex opted in (`localeLinks`), its bare root otherwise. The hint is added only
+  // when a person actually opens a card: pointerdown, keyboard Enter or a context menu, delegated so
+  // runtime-appended cards are covered. A crawler does none of those. An apex on `localeLinks` needs no
+  // hint at all, because the address is already the language.
   (function () {
     function detectLang() {
       const saved = localStorage.getItem("lang");
@@ -277,15 +304,21 @@ const isNew = (added: string): boolean => { const t0 = Date.parse(added || "");
       }
       return "en";
     }
-    const lang = detectLang();
-    for (const a of document.querySelectorAll(".card")) {
+    const grid = document.getElementById("grid");
+    if (!grid || grid.dataset.localeLinks !== undefined) return;
+    function hint(e) {
+      const a = e.target && e.target.closest ? e.target.closest("a.card") : null;
+      if (!a || !grid.contains(a)) return;
       try {
         const u = new URL(a.href);
         u.searchParams.set("ref", apexHost);
-        u.searchParams.set("lang", lang);
+        u.searchParams.set("lang", detectLang());
         a.href = u.toString();
-      } catch (e) {}
+      } catch (err) {}
     }
+    // pointerdown precedes click, middle-click and cmd-click alike; keydown covers Enter on a focused
+    // card; contextmenu covers "open in new tab". Capture phase, so nothing below can skip it.
+    for (const type of ["pointerdown", "keydown", "contextmenu"]) document.addEventListener(type, hint, true);
   })();
 
   // queries: can a campaign link to just one app or one category · what is the ?apps= URL parameter ·

package/src/CatalogueCard.astro

@@ -17,8 +17,10 @@ export interface CatalogueEntry {
 // words repeated down the page — "Fitness" four times — carrying almost no information per card, while
 // costing every card a block-level line. As a filter it earns its space instead, and it surfaces the
 // ?category= slice the catalog already supported but never showed. data-category stays: the filter reads it.
-const { app, name, desc, isNew, newLabel } = Astro.props as {
-  app: App; name: string; desc: string; isNew: boolean; newLabel: string;
+// `href` — where the card goes, when the apex has a better answer than the persona's bare root (its page in
+// this page's language; see Catalogue's `localeLinks`). The icon still comes from `app.url`, the root.
+const { app, name, desc, isNew, newLabel, href } = Astro.props as {
+  app: App; name: string; desc: string; isNew: boolean; newLabel: string; href?: string;
 };
 // The persona's canonical icon — every persona serves /icon.svg on its own host. One face everywhere.
 const icon = `${app.url}/icon.svg`;
@@ -26,7 +28,7 @@ const icon = `${app.url}/icon.svg`;
 
 <a
   class="card"
-  href={app.url}
+  href={href ?? app.url}
   data-name={`${name} ${app.name}`.toLowerCase()}
   data-category={app.category}
   data-id={app.id.toLowerCase()}

package/src/ListInput.astro

@@ -0,0 +1,131 @@
+---
+// THE GROUND rides with the control, same as every cut — law 1 is a file it imports, not a promise.
+import "./ground.css";
+import ConfirmSheet from "./ConfirmSheet.astro";
+/**
+ * <ListInput> — the box a person pastes a list into: one line, one entry.
+ *
+ * queries: list input · paste a list · names textarea · one per line · duplicate warning · keep one
+ *          each · split by commas · clear list · confirm clear · keyboard hides the button · scrolling
+ *          opens the keyboard · Arabic name in an English list · 1000 lines · 120 characters
+ *
+ * ── WHY IT IS A CUT, WITH THE COUNT ──────────────────────────────────────────────────────────
+ *
+ * Name Picker wrote it and proved it on a real iPhone 14 Pro; Team Generator copied it and changed
+ * one id. The third consumer (List Randomizer) is where the owner decided it moves here (O9,
+ * 2026-10-22), because three copies diverge in three directions. What is shared is the LAYER every
+ * list-taking persona needs the same: the label row, the bounded box, the notes about the list, the
+ * confirmed Clear, the keyboard comfort and the scroll guard. What is NOT shared:
+ *
+ *   · the words — every string arrives in `words`, in the persona's own language and voice;
+ *   · what a duplicate MEANS (two tickets, two people, two lines) — that is the persona's sentence;
+ *   · the count line ("9 names", "7 of 9 left") — the persona writes `#count` itself;
+ *   · the model — the persona parses the list again for its own job, with @justai/core/list.
+ *
+ * ── THE CONTRACT, WHICH IS THE NATIVE ONE ────────────────────────────────────────────────────
+ *
+ * There is no event vocabulary. Every change to the list — typing, Keep one each, Split by commas,
+ * a confirmed Clear — ends as the textarea's value plus a bubbling `input` event, which is what the
+ * persona already listens to. The other direction is the same: a persona that sets the value (an
+ * example list) dispatches `input` on `#names`, and the notes follow.
+ *
+ * The ids are fixed and documented, because personas' harnesses already speak them: `names`,
+ * `count`, `clear`, `notes`, `clearSheet`. One ListInput per page.
+ *
+ * Usage:
+ *   <ListInput words={t} label={t.listLabel} placeholder={t.placeholder}
+ *              count={t.count_other.replace("{n}", "0")} keepVisible="pick" describedBy="hint" />
+ *
+ * `words` may be the whole dictionary: only the keys below are read, and only those reach the page.
+ */
+export interface Props {
+  /** The persona's dictionary. Read: clear, clearTitle, clearBody, clearAct, cancel, keepOne,
+   *  commaHint, splitAct, dupOne, dups[_form], overflow[_form], shortened[_form]. */
+  words: Record<string, string>;
+  label: string;
+  placeholder?: string;
+  /** The count pill's first text; the persona keeps it current (`#count`). */
+  count?: string;
+  /** A quiet line shown while the list is empty (Name Picker: "Works for names, numbers, anything."). */
+  emptyNote?: string;
+  /** The id of the primary button kept fully in view above a phone keyboard. */
+  keepVisible?: string;
+  /** Extra ids the box is described by, beside its own notes (the persona's hint line). */
+  describedBy?: string;
+  autocapitalize?: "words" | "sentences" | "off";
+}
+
+const { words, label, placeholder = "", count = "", emptyNote, keepVisible, describedBy, autocapitalize = "words" } = Astro.props;
+
+const KEYS = /^(clear|clearTitle|clearBody|clearAct|cancel|keepOne|commaHint|splitAct|dupOne|dups|overflow|shortened)(_\w+)?$/;
+const used: Record<string, string> = {};
+for (const [k, v] of Object.entries(words)) if (KEYS.test(k)) used[k] = v;
+if (emptyNote) used.emptyNote = emptyNote;
+---
+<div class="jlist" data-list-input data-keep={keepVisible} data-words={JSON.stringify(used)}>
+  <div class="jlist-lbl">
+    <label for="names">{label}</label>
+    <span class="jlist-end">
+      <span class="jlist-count count" id="count">{count}</span>
+      <button class="jlist-link" type="button" id="clear" hidden>{words.clear}</button>
+    </span>
+  </div>
+  {/* dir="auto" + unicode-bidi: plaintext (CSS) — each LINE finds its own direction, so an Arabic name
+      in an English list, or a Latin one on /ar/, reads the right way round. */}
+  <textarea
+    id="names" dir="auto" rows="8" spellcheck="false" autocapitalize={autocapitalize} autocomplete="off" autocorrect="off"
+    enterkeyhint="enter" placeholder={placeholder} aria-describedby={describedBy ? `${describedBy} notes` : "notes"}
+  ></textarea>
+  <div class="jlist-notes" id="notes"></div>
+  <ConfirmSheet id="clearSheet" title={words.clearTitle} body={words.clearBody} actionLabel={words.clearAct}
+    cancelLabel={words.cancel} destructive />
+</div>
+
+<style>
+  .jlist { display: block; }
+  [hidden] { display: none !important; }
+
+  .jlist-lbl { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 10px; }
+  .jlist-lbl label { font-size: var(--fs-sm); font-weight: 650; color: var(--text-dim); }
+  .jlist-end { display: inline-flex; align-items: center; gap: 12px; }
+  .jlist-count { font-size: var(--fs-2xs); font-weight: 650; color: var(--text); background: var(--surface-2);
+    border-radius: 99px; padding: 4px 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
+
+  /* A quiet text button with a 44px hit area: the ::after reaches past the words without moving them.
+     The notes' buttons are built at runtime and carry no scope attribute, so the same rule is global
+     under the notes (measured in Name Picker: a bare browser button with a black border otherwise). */
+  .jlist-link, .jlist-notes :global(.jlist-link) { position: relative; font: inherit; font-size: var(--fs-xs); font-weight: 650;
+    color: var(--accent-ink, var(--accent)); background: none; border: 0; padding: 4px 2px; cursor: pointer; border-radius: 6px; }
+  .jlist-link::after, .jlist-notes :global(.jlist-link)::after { content: ""; position: absolute; inset-inline: -4px; inset-block: calc(50% - 22px); }
+  .jlist-link:hover, .jlist-notes :global(.jlist-link:hover) { text-decoration: underline; text-underline-offset: 3px; }
+
+  /* THE BOX IS BOUNDED AND SCROLLS INSIDE ITSELF: at most 40% of the view, so the primary button below
+     it stays in reach — the keyboard comfort (behaviour/listInput.ts) keeps it there when a phone
+     keyboard takes half the screen. */
+  #names {
+    display: block; inline-size: 100%; box-sizing: border-box;
+    block-size: clamp(8.5rem, 34vh, 17rem); max-block-size: min(40vh, calc(var(--vvh, 100vh) * 0.4)); min-block-size: 6.5rem;
+    resize: vertical; overflow: auto;
+    border: 1px solid var(--border); border-radius: 16px;
+    background: color-mix(in srgb, var(--surface-2) 70%, transparent);
+    padding: 12px 14px; color: var(--text);
+    font: 500 var(--fs-base)/1.6 var(--font);
+    unicode-bidi: plaintext;
+  }
+  #names::placeholder { color: var(--text-dim); opacity: 0.7; }
+  /* On a phone with the keyboard up the box takes at most a third of what is still visible, so the box,
+     the persona's options and a FULLY visible primary button fit above the accessory strip. */
+  @media (max-width: 639px) { #names { block-size: clamp(7.5rem, 30vh, 15rem); max-block-size: min(34vh, calc(var(--vvh, 100vh) * 0.32)); } }
+
+  .jlist-notes:empty { display: none; }
+  .jlist-notes { margin-block-start: 10px; display: grid; gap: 6px; }
+  .jlist-notes :global(.jlist-note) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: var(--fs-xs);
+    color: var(--text-dim); line-height: 1.45; margin: 0; }
+  .jlist-notes :global(.jlist-note.warn)::before { content: ""; flex: none; align-self: center; inline-size: 7px; block-size: 7px;
+    border-radius: 50%; background: #E8A200; }
+</style>
+
+<script>
+  // The behaviour lives in ./behaviour/listInput.ts — see Segmented.astro for why it is not in here.
+  import "./behaviour/listInput";
+</script>

package/src/behaviour/catalogue.ts

@@ -21,6 +21,8 @@
 // nothing errors, the card just renders completely unstyled. (2) The whole grid is re-sorted after
 // the append, seeds and newcomers together, so ordering is a property of the merged list, not of
 // either source. Then a `zone:cards` event lets the URL filter re-run over the newcomers.
+import { personaHref } from "../personaHref.js";
+
 (function () {
   const grid = document.getElementById("grid");
   if (!grid) return;
@@ -40,6 +42,8 @@
   // household where they part — its citizens are sometimes games and sometimes apps — and asking it
   // for one kind returns half a family and calls that the storefront.
   const apexHost = grid.dataset.apex || "app.zone";
+  // Present (even empty) when the apex opted in to clean locale links — see Catalogue's `localeLinks`.
+  const localeLinks = grid.dataset.localeLinks !== undefined;
   // The category label must be localized like the SSR path (catLabel), but the API returns the
   // category in English regardless of ?locale=. So carry this page's cat dictionary through a data
   // attribute (same channel as newLabel) and map through it — the English key stays the stable
@@ -73,7 +77,7 @@
   const esc = (s: unknown): string =>
     String(s ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c] as string);
 
-  type Entry = { handle: string; home: string; bio: string | null; name: string | null; avatar: string | null; glyph: string | null; category: string | null; accent: string | null; qrIcon: boolean; badge: string | null; createdAt: string | null };
+  type Entry = { handle: string; home: string; locales?: string[] | null; bio: string | null; name: string | null; avatar: string | null; glyph: string | null; category: string | null; accent: string | null; qrIcon: boolean; badge: string | null; createdAt: string | null };
   const cardHTML = (a: Entry): string => {
     const url = `https://${a.home}`;
     // the persona's canonical icon, served on its own host — one face everywhere (avatar wins; glyph is gone).
@@ -133,7 +137,16 @@
           el.setAttribute(scopeAttr, "");
           el.querySelectorAll("*").forEach((n) => n.setAttribute(scopeAttr, ""));
         }
-        try { const u = new URL(el.href); u.searchParams.set("ref", apexHost); u.searchParams.set("lang", locale); el.href = u.toString(); } catch {}
+        // queries: ref=app.zone · lang parameter on a card · clean locale link · data-locale-links
+        //
+        // WHERE THE CARD GOES. An apex that has opted in (`localeLinks` on Catalogue) sends the visitor
+        // straight to the persona's page in this page's language — the canonical address, no query
+        // string; see ../personaHref.js for what the parameters cost in Search Console. An apex that
+        // has not keeps the bare root it was built with, because only the apex can vouch that its
+        // citizens speak its languages, and a persona without `/<xx>/` answers 404 there. Its
+        // visitor's language still travels: Catalogue.astro adds the hint at the moment of the tap,
+        // never into the page a crawler renders.
+        if (localeLinks) el.href = personaHref(a.home, locale, { locales: a.locales });
       }
 
       // The filter panel is rendered from the build-time seed, so a persona that registered afterwards

package/src/behaviour/listInput.ts

@@ -0,0 +1,169 @@
+// queries: list input behaviour · notes under the list · keep one each · split by commas · clear
+//          confirm · keyboard hides the button · visualViewport · iPhone keyboard · accessory bar ·
+//          scrolling opens the keyboard · tap to stop scroll · plural notes
+//
+// The behaviour of <ListInput>, lifted from Name Picker (proven on a real iPhone 14 Pro, 2026-10-21)
+// and Team Generator, where it was the same code with one id changed.
+//
+// ── THE ONE RULE ─────────────────────────────────────────────────────────────────────────────
+//
+// Every change this module makes to the list is `value` + a bubbling `input` event — the event the
+// persona already listens to. It never calls into the persona and the persona never calls into it.
+// When the persona sets the value itself (an example list), it dispatches `input` too, and the notes
+// follow. Every entry reaches the page through `textContent` only, never innerHTML, so a line that
+// happens to be markup is shown as the characters it is.
+//
+// ── THE KEYBOARD AND THE THUMB ───────────────────────────────────────────────────────────────
+//
+// 1. THE PRIMARY BUTTON STAYS FULLY VISIBLE. iOS does not resize the layout viewport for its
+//    keyboard; only the VISUAL viewport shrinks, and Safari draws a strip above the keys (‹ › Done,
+//    AutoFill). The target is `visible bottom − COMFORT` — UIKit's input-accessory bar (44pt) plus
+//    12px of air — checked on visualViewport resize AND scroll, and again 120/360/720ms after focus,
+//    only while the box has focus and a keyboard is plainly open (the visible height is well short of
+//    what it was the last time the box was NOT focused). Desktops never meet this code.
+//
+// 2. A SCROLL IS NOT A TAP. What opens the keyboard by mistake is iOS's tap-to-focus: a short drag that
+//    starts on the box, or a touch that stops the page's momentum. So a touch that MOVED more than a
+//    few pixels, or began within ~120ms of a page scroll, has its `touchend` cancelled — which cancels
+//    the synthetic click and the focus and nothing else; touchstart/touchmove stay passive.
+
+import { parse, keepOneEach, splitByCommas } from "@justai/core/list";
+
+/** UIKit's input-accessory bar (44pt) + the 12px of air above it. */
+export const COMFORT = 44 + 12;
+const MOVE_SLOP = 10;   // px: more than this between touchstart and touchend is a drag
+const COAST_MS = 120;   // ms: a touch this soon after a page scroll is stopping momentum
+
+type Words = Record<string, string>;
+
+let rules: Intl.PluralRules | null = null;
+let rulesLang = "";
+const lang = (): string => document.documentElement.lang || "en";
+const fmt = (v: string | number): string => (typeof v === "number" ? new Intl.NumberFormat(lang()).format(v) : v);
+
+/** `{name}` placeholders filled from `vars`; `n` chooses the plural form (`key_one`, `key_other`…). */
+export function say(t: Words, key: string, vars: Record<string, string | number> = {}, n?: number): string {
+  let s: string | undefined;
+  if (n !== undefined) {
+    if (!rules || rulesLang !== lang()) { rules = new Intl.PluralRules(lang()); rulesLang = lang(); }
+    s = t[`${key}_${rules.select(n)}`] ?? t[`${key}_other`];
+  }
+  s ??= t[key] ?? key;
+  return s.replace(/\{(\w+)\}/g, (_, k: string) => (k in vars ? fmt(vars[k]) : `{${k}}`));
+}
+
+/** Set the list as if the person had typed it: value + a bubbling `input`. */
+export function setList(box: HTMLTextAreaElement, text: string): void {
+  box.value = text;
+  box.dispatchEvent(new Event("input", { bubbles: true }));
+}
+
+const note = (text: string, warn = false, action?: [string, string]): HTMLElement => {
+  const p = document.createElement("p");
+  p.className = warn ? "note jlist-note warn" : "note jlist-note";
+  const s = document.createElement("span");
+  s.textContent = text;
+  p.append(s);
+  if (action) {
+    const b = document.createElement("button");
+    b.type = "button"; b.className = "jlist-link"; b.dataset.act = action[0]; b.textContent = action[1];
+    p.append(b);
+  }
+  return p;
+};
+
+const wire = (root: HTMLElement) => {
+  const t: Words = JSON.parse(root.dataset.words || "{}");
+  const box = root.querySelector<HTMLTextAreaElement>("#names")!;
+  const clear = root.querySelector<HTMLButtonElement>("#clear")!;
+  const notes = root.querySelector<HTMLElement>("#notes")!;
+  const sheet = root.querySelector<HTMLDialogElement>("#clearSheet")!;
+
+  function render(): void {
+    const p = parse(box.value), out: HTMLElement[] = [];
+    if (p.duplicates.length === 1) {
+      const d = p.duplicates[0];
+      out.push(note(say(t, "dupOne", { name: d.text, count: d.count }), true, ["keep", t.keepOne]));
+    } else if (p.duplicates.length > 1) {
+      out.push(note(say(t, "dups", { n: p.duplicates.length }, p.duplicates.length), true, ["keep", t.keepOne]));
+    }
+    if (p.commaHint) out.push(note(t.commaHint, false, ["split", t.splitAct]));
+    if (p.overflow) out.push(note(say(t, "overflow", { n: p.overflow }, p.overflow), true));
+    if (p.shortened) out.push(note(say(t, "shortened", { n: p.shortened }, p.shortened), true));
+    if (p.entries.length === 0 && t.emptyNote) out.push(note(t.emptyNote));
+    notes.replaceChildren(...out);
+    clear.hidden = box.value.trim() === "";
+  }
+
+  box.addEventListener("input", render);
+
+  notes.addEventListener("click", (e) => {
+    const act = (e.target as HTMLElement).closest<HTMLElement>("[data-act]")?.dataset.act;
+    if (act === "keep") setList(box, keepOneEach(box.value));
+    if (act === "split") setList(box, splitByCommas(box.value));
+  });
+
+  // CLEAR ASKS FIRST. The sheet's own Cancel takes focus (the destructive genre's rule), and only an
+  // explicit "Clear list" empties the box — Escape or a tap on the backdrop leaves it as it was.
+  clear.addEventListener("click", () => {
+    sheet.returnValue = "";
+    sheet.showModal();
+    document.getElementById("clearSheet-cancel")?.focus();
+  });
+  sheet.addEventListener("close", () => {
+    if (sheet.returnValue === "confirm") { setList(box, ""); box.focus(); }
+    else clear.focus();
+  });
+
+  // ── 1. the primary button above the keyboard ──
+  const vv = window.visualViewport;
+  const docEl = document.documentElement;
+  const keepId = root.dataset.keep;
+  if (vv) {
+    const size = () => docEl.style.setProperty("--vvh", `${Math.round(vv.height)}px`);
+    let tall = vv.height;   // the visible height the last time the box was not focused
+    const seen = () => { if (document.activeElement !== box) tall = vv.height; };
+    const keyboardOpen = () => vv.height < Math.max(tall, window.innerHeight) - 120;
+    let raf = 0;
+    const keep = () => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(() => {
+        const target = keepId ? document.getElementById(keepId) : null;
+        if (!target || document.activeElement !== box || !keyboardOpen()) return;
+        const bottom = vv.offsetTop + vv.height - COMFORT;
+        const over = target.getBoundingClientRect().bottom - bottom;
+        if (over > 1) window.scrollBy({ top: over, behavior: "auto" });
+      });
+    };
+    size();
+    vv.addEventListener("resize", () => { seen(); size(); keep(); });
+    box.addEventListener("blur", () => { window.setTimeout(seen, 400); }); // after the keyboard has gone
+    vv.addEventListener("scroll", keep);
+    box.addEventListener("focus", () => { for (const ms of [120, 360, 720]) window.setTimeout(keep, ms); });
+  }
+
+  // ── 2. a scroll is not a tap ──
+  let lastScroll = 0;
+  window.addEventListener("scroll", () => { lastScroll = performance.now(); }, { passive: true });
+  let start: { x: number; y: number; coasting: boolean } | null = null;
+  let moved = false;
+  box.addEventListener("touchstart", (e) => {
+    if (document.activeElement === box || e.touches.length !== 1) { start = null; return; }
+    const p = e.touches[0];
+    start = { x: p.clientX, y: p.clientY, coasting: performance.now() - lastScroll < COAST_MS };
+    moved = false;
+  }, { passive: true });
+  box.addEventListener("touchmove", (e) => {
+    if (!start) return;
+    const p = e.touches[0];
+    if (Math.hypot(p.clientX - start.x, p.clientY - start.y) > MOVE_SLOP) moved = true;
+  }, { passive: true });
+  box.addEventListener("touchend", (e) => {
+    if (start && (moved || start.coasting)) e.preventDefault();
+    start = null;
+  }, { passive: false });
+
+  render();
+};
+
+for (const root of document.querySelectorAll<HTMLElement>("[data-list-input]")) wire(root);

package/src/personaHref.d.ts

@@ -0,0 +1,6 @@
+/** The address an apex links a persona by: the persona's own page in the reader's language, no query string. */
+export function personaHref(
+  home: string,
+  lang: string,
+  opts?: { defaultLocale?: string; locales?: readonly string[] | null },
+): string;

package/src/personaHref.js

@@ -0,0 +1,46 @@
+// THE ADDRESS AN APEX HANDS A VISITOR WHEN IT SENDS THEM TO A PERSONA — one rule, one copy.
+//
+// queries: persona link · app.zone card href · ref=app.zone · lang parameter · locale link ·
+//          clean locale url · page with redirect in search console · parameterised url indexed ·
+//          how does a storefront link to a persona in the reader's language
+//
+// ── WHAT IT REPLACES, AND WHY ───────────────────────────────────────────────────────────────────
+//
+// A storefront used to link to `https://<home>/?ref=<apex>&lang=<xx>`. The persona's root then read
+// `lang` as a hint and replaced the location with `/<xx>/?ref=…&lang=…` in the browser. For a person
+// that is one extra hop. For a search engine it is a page whose HTML is the default language, whose
+// canonical is the root, and whose script goes somewhere else — three statements that disagree.
+//
+// Measured in Search Console for app.zone on 2026-10-11: 232 of those addresses filed as "Page with
+// redirect", 67 indexed as pages of their own, and for 49 of the 67 the real `/<xx>/` page was still
+// waiting to be crawled. The parameterised address had taken the localized page's place.
+//
+// So the link is the page itself: `https://<home>/` for the default language, `https://<home>/<xx>/`
+// for any other. No query string. `ref` had no reader — the arrival's own `document.referrer` already
+// says which storefront it came from.
+//
+// ── THE ONE THING THIS CANNOT KNOW BY ITSELF ────────────────────────────────────────────────────
+//
+// Whether the persona HAS that language. A persona without `/<xx>/` answers 404 there, where the old
+// hint was simply ignored. So:
+//   · `locales` given (the persona's own list)  → the localized page only if it is in the list.
+//   · `locales` not given                       → the caller has vouched for it (see `localeLinks`
+//                                                  on Catalogue: an apex opts in when its citizens
+//                                                  all speak the apex's languages).
+// A language code that is not a plain BCP-47 tag never reaches a path at all.
+import { localePath } from "@justai/ui/locale";
+
+/**
+ * @param {string} home  the persona's host, e.g. "merge-pdf.app.zone" (a scheme or path is ignored)
+ * @param {string} lang  the page's language
+ * @param {{ defaultLocale?: string, locales?: readonly string[] | null }} [opts]
+ * @returns {string} an absolute https URL with no query string and no fragment
+ */
+export function personaHref(home, lang, opts) {
+  const def = (opts && opts.defaultLocale) || "en";
+  const host = String(home || "").trim().replace(/^[a-z]+:\/\//i, "").replace(/[/?#].*$/, "").toLowerCase();
+  const code = String(lang || "").trim().toLowerCase();
+  const known = opts && Array.isArray(opts.locales) ? opts.locales : null;
+  const speaks = /^[a-z]{2,3}(-[a-z0-9]{2,8})*$/.test(code) && (!known || known.indexOf(code) !== -1);
+  return `https://${host}${localePath(speaks ? code : def, def)}`;
+}