@justai/cuts 0.158.0 → 0.159.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justai/cuts",
-  "version": "0.158.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",
@@ -45,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/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/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);