@2lab.ai/ui 0.0.0-stage → 0.1.1

package/dist/model-picker.js

@@ -0,0 +1,858 @@
+import { d as define, U as UiElement, f as escAttr, e as esc, p as prefersReducedMotion } from "./html-DZWnrdcg.js";
+function morphInto(el, html) {
+  const tpl = document.createElement("template");
+  tpl.innerHTML = html;
+  morphChildren(el, tpl.content);
+}
+function keyOf(n) {
+  if (n.nodeType !== 1) return `#${n.nodeType}`;
+  const e = n;
+  const k = e.getAttribute("data-mk");
+  if (k !== null) return `${e.tagName}|@${k}`;
+  const c = e.getAttribute("class") || "";
+  const sp = c.indexOf(" ");
+  return `${e.tagName}|${e.id}.${sp < 0 ? c : c.slice(0, sp)}`;
+}
+function keyLater(n, key) {
+  for (; n; n = n.nextSibling) if (keyOf(n) === key) return true;
+  return false;
+}
+function morphNode(a, b) {
+  if (a.nodeType !== 1) {
+    if (a.nodeValue !== b.nodeValue) a.nodeValue = b.nodeValue;
+    return;
+  }
+  const ae = a;
+  const be = b;
+  for (let i = ae.attributes.length - 1; i >= 0; i--) {
+    const name = ae.attributes[i].name;
+    if (!be.hasAttribute(name)) ae.removeAttribute(name);
+  }
+  for (let i = 0; i < be.attributes.length; i++) {
+    const at = be.attributes[i];
+    if (ae.getAttribute(at.name) !== at.value) ae.setAttribute(at.name, at.value);
+  }
+  morphChildren(ae, be);
+}
+function morphChildren(a, b) {
+  let cur = a.firstChild;
+  let next = b.firstChild;
+  while (next) {
+    if (cur && keyOf(cur) !== keyOf(next) && !keyLater(next, keyOf(cur))) {
+      const dropped = cur;
+      cur = cur.nextSibling;
+      a.removeChild(dropped);
+      continue;
+    }
+    const after = next.nextSibling;
+    if (cur && keyOf(cur) === keyOf(next)) {
+      morphNode(cur, next);
+      cur = cur.nextSibling;
+    } else {
+      a.insertBefore(next, cur);
+    }
+    next = after;
+  }
+  while (cur) {
+    const gone = cur;
+    cur = cur.nextSibling;
+    a.removeChild(gone);
+  }
+}
+const styles = `
+:host { --mp-well: color-mix(in srgb, var(--ib-text) 6%, var(--ib-card)); --mp-bar: color-mix(in srgb, var(--ib-text) 24%, var(--ib-card));
+  --mp-bar-off: color-mix(in srgb, var(--ib-text) 9%, var(--ib-card));
+  display: inline-block; max-width: 100%; vertical-align: middle; }
+.mp { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; max-width: 100%; }
+.mp-trigger { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; min-height: 30px; padding: 0 9px 0 5px; font: inherit; font-size: 13px; font-weight: 500; color: var(--ib-text); background: var(--ib-seg); border: 1px solid var(--ib-card-border); border-radius: 8px; cursor: pointer; white-space: nowrap; transition: background-color var(--dur-press) var(--ease-out); }
+.mp-trigger:not([aria-disabled="true"]):hover, .mp-trigger[aria-expanded="true"] { background: var(--mp-well); }
+.mp-trigger:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
+.mp-trigger[aria-busy="true"] { cursor: progress; }
+.mp-trigger[aria-disabled="true"] { cursor: default; background: transparent; border-color: transparent; }
+.mp-trigger[aria-disabled="true"] .mp-chev { display: none; }
+.mp-trigger .mp-glyph { width: 18px; height: 18px; border-radius: 5px; font-size: 10px; }
+.mp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.mp-level { flex: none; font-weight: 400; color: var(--ib-text-2); }
+.mp-chev { flex: none; width: 6px; height: 6px; margin: 0 1px 0 2px; border-right: 1.5px solid var(--ib-muted); border-bottom: 1.5px solid var(--ib-muted); transform: translateY(-2px) rotate(45deg); transition: transform 300ms var(--ease-out); }
+.mp-trigger[aria-expanded="true"] .mp-chev { transform: translateY(1px) rotate(225deg); }
+.mp-glyph { display: inline-grid; flex: none; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--ib-card); box-shadow: inset 0 0 0 1px var(--ib-card-border); font-size: 10.5px; font-weight: 600; line-height: 1; color: var(--ib-text); }
+.mp-note { max-width: 100%; font-size: 12px; line-height: 17px; color: var(--ib-text-2); overflow-wrap: anywhere; }
+.mp-note.is-error { color: var(--st-fail-text); }
+.mp-note:empty { display: none; }
+/* A fixed 100px box at 0,0: tells the menu its containing block's origin and scale (transformed ancestors). */
+.mp-probe { position: fixed; left: 0; top: 0; width: 100px; height: 0; visibility: hidden; pointer-events: none; }
+/* The menu: position fixed (an ancestor's overflow clip never cuts it), placed from the trigger in script. */
+.mp-pop { position: fixed; z-index: 150; left: 0; top: 0; box-sizing: border-box; width: min(336px, calc(100vw - 32px)); max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain; container: mp / inline-size; padding: 4px; border-radius: 16px; background: var(--ib-col); box-shadow: 0 0 0 1px var(--ib-card-border), var(--ib-shadow-raised); color: var(--ib-text-2); font-size: 13px; line-height: 20px; text-align: left; white-space: normal; transform-origin: top left; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px) scale(0.96); transition: opacity 160ms ease, transform 220ms var(--ease-out), visibility 0s linear 220ms; }
+.mp-pop[data-side="top"] { transform-origin: bottom left; transform: translateY(4px) scale(0.96); }
+.mp-pop.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity 200ms ease, transform var(--dur-move) var(--ease-out), visibility 0s; }
+.mp-card { padding: 6px; border-radius: 12px; background: var(--ib-card); box-shadow: 0 0 0 1px var(--ib-card-border), var(--ib-shadow); }
+.mp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 24px; padding: 0 10px; font-size: 11px; line-height: 16px; color: var(--ib-muted); }
+.mp-head-t { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.mp-cols, .mp-bars { display: grid; flex: none; grid-template-columns: repeat(3, 36px); gap: 8px; }
+.mp-cols { font-size: 10px; letter-spacing: -0.01em; }
+.mp-cols > span { display: flex; justify-content: center; white-space: nowrap; }
+.mp-wait { margin: 0 10px 4px; font-size: 12px; line-height: 17px; color: var(--st-wait); overflow-wrap: anywhere; }
+.mp-list { display: grid; gap: 1px; border-radius: 10px; outline: none; }
+.mp-opt { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "g t b" "g d d"; align-items: center; column-gap: 10px; min-height: 48px; padding: 6px 10px; border-radius: 10px; cursor: pointer; transition: background-color var(--dur-press) ease, opacity 220ms ease; }
+.mp-opt > .mp-glyph { grid-area: g; }
+.mp-opt > .mp-bars { grid-area: b; }
+.mp-opt[aria-disabled="true"] { cursor: default; }
+.mp-list[aria-disabled="true"] .mp-opt:not([aria-selected="true"]) .mp-title { color: var(--ib-text-2); }
+.mp-list[data-pointing] .mp-opt[data-active] { background: var(--mp-well); }
+.mp-list[data-pointing] .mp-opt:not([data-active]) { opacity: 0.5; }
+.mp-list:focus-visible .mp-opt[data-active] { background: var(--mp-well); box-shadow: inset 0 0 0 1.5px var(--border-focus); }
+.mp-title { grid-area: t; display: flex; align-items: center; gap: 4px; min-width: 0; font-weight: 500; color: var(--ib-text); }
+.mp-title-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.mp-check { flex: none; font-size: 12px; line-height: 1; color: var(--accent); animation: mp-pop 320ms var(--ease-out) both; }
+.mp-desc { grid-area: d; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 12px; line-height: 17px; color: var(--ib-muted); overflow-wrap: anywhere; }
+.mp-meter { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; height: 5px; }
+.mp-meter.is-none { display: block; height: auto; font-size: 11px; line-height: 1; text-align: center; color: var(--ib-muted); }
+.mp-seg { border-radius: 1.5px; background: var(--mp-bar-off); transition: background-color 180ms ease; }
+.mp-seg[data-on] { background: var(--mp-bar); }
+.mp-opt[data-lit] .mp-seg[data-on] { background: var(--accent); transition-delay: calc(var(--c) * 70ms + var(--s) * 45ms); animation: mp-fill 360ms var(--ease-out) both; animation-delay: calc(var(--c) * 70ms + var(--s) * 45ms); }
+.mp-settings { margin-top: 6px; padding: 6px 10px 4px; border-top: 1px solid var(--ib-card-border); }
+.mp-effort-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-height: 22px; }
+.mp-effort-label { flex: none; font-size: 12.5px; color: var(--ib-text-2); }
+.mp-effort-cap { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--st-wait); }
+.mp-seg-ctl { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin-top: 4px; padding: 2px; border-radius: 9px; background: var(--ib-seg); box-shadow: inset 0 0 0 1px var(--ib-card-border); }
+.mp-thumb { position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc((100% - 4px) / var(--n)); border-radius: 7px; background: var(--ib-seg-on); box-shadow: 0 0 0 1px var(--ib-card-border), 0 1px 2px color-mix(in srgb, #000 12%, transparent); transform: translateX(calc(var(--i) * 100%)); transition: transform var(--dur-move) var(--ease-out); }
+.mp-seg-btn { position: relative; min-width: 0; min-height: 26px; padding: 0 2px; font: inherit; font-size: 12px; font-weight: 500; color: var(--ib-muted); background: none; border: 0; border-radius: 7px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 200ms ease; }
+.mp-seg-btn[aria-checked="true"], .mp-seg-btn:hover { color: var(--ib-text); }
+.mp-seg-btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
+.mp-seg-ctl[aria-disabled="true"] .mp-seg-btn { cursor: progress; }
+.mp-err { margin: 6px 10px 2px; font-size: 12px; line-height: 17px; color: var(--st-fail-text); overflow-wrap: anywhere; }
+.mp-err:empty { display: none; }
+.mp-foot { display: flex; align-items: center; gap: 6px; min-height: 38px; padding: 4px 6px 0 10px; }
+.mp-caption { flex: 1; min-width: 0; overflow: hidden; font-size: 12px; color: var(--ib-muted); white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
+.mp-caption b { font-weight: 500; color: var(--ib-text); }
+.mp-keys { display: flex; flex: none; gap: 2px; }
+.mp-keys kbd { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 3px; border-radius: 5px; background: var(--ib-card); box-shadow: 0 0 0 1px var(--ib-card-border); font-family: inherit; font-size: 10.5px; line-height: 1; color: var(--ib-muted); }
+@keyframes mp-pop { from { opacity: 0; transform: scale(0.6); } }
+@keyframes mp-fill { 0% { transform: scaleY(1); } 45% { transform: scaleY(1.6); } 100% { transform: scaleY(1); } }
+@container mp (max-width: 300px) {
+  .mp-opt .mp-glyph, .mp-keys { display: none; }
+  .mp-opt { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t b" "d d"; }
+}
+/* Touch / narrow: the dashboard's own block — trigger and levels ≥44px, rows ≥54px, no key hints. */
+@media (pointer: coarse), (max-width: 639px) {
+  .mp-trigger, .mp-seg-btn { min-height: 44px; }
+  .mp-opt { min-height: 54px; }
+  .mp-keys { display: none; }
+}
+/* The global rule shortens durations; scale, the staggered fill and the check pop stop here too. */
+@media (prefers-reduced-motion: reduce) {
+  .mp-pop, .mp-pop[data-side="top"] { transform: none; }
+  .mp-opt[data-lit] .mp-seg[data-on] { animation: none; transition-delay: 0s; }
+  .mp-check { animation: none; }
+}
+`;
+const MODEL_EFFORT_LEVELS = ["low", "medium", "high", "xhigh", "max"];
+const EFFORT_LABELS = {
+  low: "Low",
+  medium: "Medium",
+  high: "High",
+  xhigh: "Extra high",
+  max: "Max"
+};
+const EFFORT_SHORT = { low: "Low", medium: "Medium", high: "High", xhigh: "XHigh", max: "Max" };
+const ROLL_MS = 560;
+const WATCH_MS = 150;
+const STRINGS = {
+  en: {
+    model: "Model",
+    trigger: (name, level) => `Model ${name}${level ? `, effort ${level}` : ""} — change`,
+    dialog: "Model and effort for this session",
+    head: "This session model",
+    cols: ["Window", "Compact", "Cost"],
+    list: "Models",
+    after: "switches after compaction",
+    outside: "Current · not in the switch list",
+    outsideTray: "Not in the switch list · price unknown",
+    outsideSr: "Not in the switch list, price unknown",
+    win: (w) => `window ${w}`,
+    winSr: (w) => `window ${w}`,
+    tray: (i, o) => `Input ${i} · Output ${o} / M`,
+    noPrice: "Price —",
+    priceWords: (i, o) => `input ${i} · output ${o} per million tokens`,
+    noPriceWords: "price unknown",
+    switching: "Switching model…",
+    effort: "Effort",
+    cap: (set, runs) => `Set ${set} → this model runs ${runs}`
+  },
+  ko: {
+    model: "모델",
+    trigger: (name, level) => `모델 ${name}${level ? `, effort ${level}` : ""} — 바꾸기`,
+    dialog: "이 세션의 모델 · effort",
+    head: "이 세션 모델",
+    cols: ["창", "압축", "비용"],
+    list: "모델",
+    after: "compact 후 전환",
+    outside: "현재 · 전환 목록 밖",
+    outsideTray: "전환 목록 밖 모델 · 가격 정보 없음",
+    outsideSr: "전환 목록 밖 모델, 가격 정보 없음",
+    win: (w) => `창 ${w}`,
+    winSr: (w) => `창 ${w}`,
+    tray: (i, o) => `입력 ${i} · 출력 ${o} / M`,
+    noPrice: "가격 정보 없음",
+    priceWords: (i, o) => `입력 ${i} · 출력 ${o} / 백만 토큰`,
+    noPriceWords: "가격 정보 없음",
+    switching: "모델 전환 중…",
+    effort: "Effort",
+    cap: (set, runs) => `설정 ${set} → 이 모델은 ${runs}까지 실행`
+  }
+};
+const CHECK = "&#x2713;";
+const num = (v) => {
+  const n = Number(v);
+  return Number.isFinite(n) ? n : 0;
+};
+function meterSegments(v, max) {
+  const a = num(v);
+  const m = num(max);
+  if (!(a > 0) || !(m > 0)) return 0;
+  return Math.max(1, Math.min(5, Math.round(5 * a / m)));
+}
+function barOr(v, fallback) {
+  if (v === void 0 || v === null) return fallback;
+  return Math.max(0, Math.min(5, Math.round(num(v))));
+}
+function validModelPrice(p) {
+  if (!p) return null;
+  const input = Number(p.input);
+  const output = Number(p.output);
+  return Number.isFinite(input) && Number.isFinite(output) && input >= 0 && output >= 0 ? { input, output } : null;
+}
+function modelMeters(models) {
+  let win = 0;
+  let ac = 0;
+  let out = 0;
+  for (const m of models) {
+    win = Math.max(win, num(m.window));
+    ac = Math.max(ac, num(m.autoCompactAt));
+    out = Math.max(out, validModelPrice(m.price)?.output ?? 0);
+  }
+  return models.map((m) => {
+    const p = validModelPrice(m.price);
+    return [
+      barOr(m.bars?.window, meterSegments(m.window, win)),
+      barOr(m.bars?.compaction, meterSegments(m.autoCompactAt, ac)),
+      barOr(m.bars?.cost, p ? meterSegments(p.output, out) : 0)
+    ];
+  });
+}
+function fmtModelTokens(n) {
+  let v = Math.max(0, num(n));
+  if (v < 999.5) return String(Math.round(v));
+  for (const unit of ["K", "M", "B", "T"]) {
+    v /= 1e3;
+    if (v < 999.95) return `${v.toFixed(1)}${unit}`;
+  }
+  return "999.9T+";
+}
+function fmtModelPrice(v, ref) {
+  const n = num(v);
+  const t = ref === void 0 ? n : num(ref);
+  return `$${Math.round(t) === t ? String(Math.round(n)) : n.toFixed(2)}`;
+}
+function modelEffortLevels(model) {
+  if (!model || !Array.isArray(model.effortLevels)) return MODEL_EFFORT_LEVELS.slice();
+  const out = [];
+  for (const l of model.effortLevels) {
+    const s = String(l ?? "");
+    if (s && !out.includes(s)) out.push(s);
+  }
+  return out;
+}
+function modelEffortLabel(level) {
+  return level ? EFFORT_LABELS[level] ?? level : "";
+}
+function modelGlyph(m) {
+  const src = String(m.short || m.label || m.id || "?");
+  return (Array.from(src)[0] ?? "?").toUpperCase();
+}
+const MIN_ROOM = 180;
+function placeModelMenu(r, w, h, vw, vh, side = "bottom") {
+  const gap = 6;
+  const edge = 12;
+  const below = vh - r.bottom - gap - edge;
+  const above = r.top - gap - edge;
+  const s = side === "top" ? h > above && below > above ? "bottom" : "top" : h > below && above > below ? "top" : "bottom";
+  const room = s === "top" ? above : below;
+  const full = Math.max(0, vh - 2 * edge);
+  const fit = h > room && room >= MIN_ROOM ? room : Math.min(h, full);
+  const left = Math.max(edge, Math.min(r.left, vw - edge - w));
+  let top = s === "top" ? r.top - gap - fit : r.bottom + gap;
+  top = Math.max(edge, Math.min(top, vh - edge - fit));
+  return {
+    left: Math.round(left),
+    top: Math.round(top),
+    side: s,
+    maxHeight: Math.floor(h > room && room >= MIN_ROOM ? room : full)
+  };
+}
+function flatParent(n) {
+  if (n.assignedSlot) return n.assignedSlot;
+  const p = n.parentNode;
+  if (!p) return null;
+  if (p.nodeType === 11) return p.host ?? null;
+  return p.nodeType === 1 ? p : null;
+}
+function anchorSpot(el) {
+  const r = el.getBoundingClientRect();
+  let x = r.left;
+  let y = r.top;
+  for (let n = flatParent(el); n; n = flatParent(n)) {
+    x += n.scrollLeft || 0;
+    y += n.scrollTop || 0;
+    if (getComputedStyle(n).position === "fixed") break;
+  }
+  return { left: x, top: y };
+}
+function anchorMoved(at, now) {
+  if (!at || !now) return false;
+  return Math.abs(now.left - at.left) > 2 || Math.abs(now.top - at.top) > 2;
+}
+function pickerOptions(d) {
+  const seen = /* @__PURE__ */ new Set();
+  const models = [];
+  for (const m of Array.isArray(d.models) ? d.models : []) {
+    if (!m || typeof m.id !== "string" || !m.id || seen.has(m.id)) continue;
+    seen.add(m.id);
+    models.push(m);
+  }
+  const meters2 = modelMeters(models);
+  const cur = d.value?.model ?? "";
+  const out = [];
+  if (cur && !seen.has(cur)) out.push({ key: "", model: { id: cur, label: cur }, listed: false, meters: [0, 0, 0] });
+  models.forEach((m, i) => {
+    out.push({ key: m.id, model: m, listed: true, meters: meters2[i] });
+  });
+  return out;
+}
+function currentIndex(opts, cur) {
+  if (!cur) return -1;
+  return opts.findIndex((o) => o.key === "" || o.key === cur);
+}
+class UiModelPicker extends UiElement {
+  static styles = [styles];
+  static get observedAttributes() {
+    return ["lang", "open", "side"];
+  }
+  #open = false;
+  #reflecting = false;
+  #activeKey = null;
+  #pointing = false;
+  #shown = null;
+  #raf = 0;
+  #placeRaf = 0;
+  #watch = 0;
+  #attached = false;
+  #at = null;
+  #last = null;
+  #pos = null;
+  constructor() {
+    super();
+    this.root.addEventListener("click", (e) => this.#onClick(e));
+    this.root.addEventListener("keydown", (e) => this.#onKey(e));
+    this.root.addEventListener("pointerover", (e) => this.#onPointer(e));
+    this.root.addEventListener("pointerout", (e) => this.#onPointerOut(e));
+  }
+  /** Whether the menu is open. Setting it opens/closes without moving focus and without `ui-open-change`. */
+  get open() {
+    return this.#open;
+  }
+  set open(v) {
+    this.#setOpen(!!v, { user: false });
+  }
+  attributeChangedCallback(name, _old, value) {
+    if (name === "open") {
+      if (!this.#reflecting) this.#setOpen(value !== null, { user: false });
+      return;
+    }
+    this.requestRender();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.#open) this.#attach();
+  }
+  disconnectedCallback() {
+    this.#detach();
+  }
+  get #t() {
+    return this.getAttribute("lang") === "ko" ? STRINGS.ko : STRINGS.en;
+  }
+  get #side() {
+    return this.getAttribute("side") === "top" ? "top" : "bottom";
+  }
+  #off() {
+    return !!this.data?.disabled;
+  }
+  #opts() {
+    return this.data ? pickerOptions(this.data) : [];
+  }
+  /** The active row: the model last pointed at while it is still listed, else the session's model. */
+  #activeIndex(opts, cur) {
+    const i = this.#activeKey === null ? -1 : opts.findIndex((o) => o.key === this.#activeKey);
+    return i >= 0 ? i : Math.max(cur, 0);
+  }
+  // ── open / close ──────────────────────────────────────────────────────────
+  #setOpen(v, o) {
+    if (v === this.#open) {
+      if (v && o.focusList) this.#focusList();
+      return;
+    }
+    if (v) {
+      if (this.#off()) {
+        this.#reflect(false);
+        return;
+      }
+      this.#open = true;
+      this.#activeKey = null;
+      this.#pointing = false;
+      this.#shown = null;
+      this.#at = null;
+      this.#last = null;
+      this.#reflect(true);
+      if (this.isConnected) {
+        this.renderNow();
+        if (!this.#open) return;
+        this.#attach();
+        if (o.focusList) this.#focusList();
+      }
+    } else {
+      if (o.returnFocus) this.$(".mp-trigger")?.focus();
+      this.#open = false;
+      this.#pointing = false;
+      this.#at = null;
+      this.#last = null;
+      this.#reflect(false);
+      this.#detach();
+      if (this.isConnected) this.renderNow();
+    }
+    if (o.user) this.emit("ui-open-change", { open: v });
+  }
+  #reflect(v) {
+    if (this.hasAttribute("open") === v) return;
+    this.#reflecting = true;
+    this.toggleAttribute("open", v);
+    this.#reflecting = false;
+  }
+  #focusList() {
+    this.$(".mp-list")?.focus({ preventScroll: true });
+  }
+  #onOutside = (e) => {
+    if (this.#open && !e.composedPath().includes(this)) this.#setOpen(false, { user: true });
+  };
+  #onViewport = () => this.#queuePlace();
+  #tick = () => {
+    if (!this.#open) return;
+    const trig = this.$(".mp-trigger");
+    if (!trig) return;
+    if (!this.#at) {
+      this.#place();
+      return;
+    }
+    const r = trig.getBoundingClientRect();
+    if (!r.width && !r.height || anchorMoved(this.#at, anchorSpot(trig))) {
+      this.#setOpen(false, { user: true });
+      return;
+    }
+    if (!this.#last || r.left !== this.#last.left || r.top !== this.#last.top) this.#place();
+  };
+  #attach() {
+    if (this.#attached || !this.#open || !this.isConnected) return;
+    this.#attached = true;
+    document.addEventListener("pointerdown", this.#onOutside, true);
+    document.addEventListener("focusin", this.#onOutside);
+    document.addEventListener("scroll", this.#onViewport, { capture: true, passive: true });
+    window.addEventListener("resize", this.#onViewport);
+    this.#watch = window.setInterval(this.#tick, WATCH_MS);
+    this.#queuePlace();
+  }
+  #detach() {
+    if (this.#attached) {
+      document.removeEventListener("pointerdown", this.#onOutside, true);
+      document.removeEventListener("focusin", this.#onOutside);
+      document.removeEventListener("scroll", this.#onViewport, { capture: true });
+      window.removeEventListener("resize", this.#onViewport);
+      this.#attached = false;
+    }
+    clearInterval(this.#watch);
+    this.#watch = 0;
+    if (this.#placeRaf) cancelAnimationFrame(this.#placeRaf);
+    this.#placeRaf = 0;
+    if (this.#raf) cancelAnimationFrame(this.#raf);
+    this.#raf = 0;
+  }
+  #queuePlace() {
+    if (!this.#open || this.#placeRaf || typeof requestAnimationFrame !== "function") return;
+    this.#placeRaf = requestAnimationFrame(() => {
+      this.#placeRaf = 0;
+      this.#place();
+    });
+  }
+  /**
+   * Fixed positioning from the trigger's rect. The menu is `position: fixed`, so the open card's clip never
+   * cuts it; when an ancestor is a containing block for fixed elements (a transform, a filter) the probe —
+   * a fixed 100px box at 0,0 — tells its origin and scale and the viewport position is mapped into it.
+   */
+  #place() {
+    if (!this.#open || !this.isConnected) return;
+    const trig = this.$(".mp-trigger");
+    const pop = this.$(".mp-pop");
+    const probe = this.$(".mp-probe");
+    if (!trig || !pop) return;
+    const r = trig.getBoundingClientRect();
+    if (!r.width && !r.height) {
+      if (this.#at) this.#setOpen(false, { user: true });
+      return;
+    }
+    const vw = document.documentElement.clientWidth || window.innerWidth;
+    const vh = window.innerHeight;
+    if (r.bottom < 0 || r.top > vh || r.right < 0 || r.left > vw) {
+      this.#setOpen(false, { user: true });
+      return;
+    }
+    const o = probe?.getBoundingClientRect();
+    const k = o && o.width > 0 ? o.width / 100 : 1;
+    const ox = o?.left ?? 0;
+    const oy = o?.top ?? 0;
+    const p = placeModelMenu(r, pop.offsetWidth * k, pop.scrollHeight * k, vw, vh, this.#side);
+    this.#pos = {
+      left: Math.round((p.left - ox) / k),
+      top: Math.round((p.top - oy) / k),
+      side: p.side,
+      maxHeight: Math.floor(p.maxHeight / k)
+    };
+    pop.style.left = `${this.#pos.left}px`;
+    pop.style.top = `${this.#pos.top}px`;
+    pop.style.maxHeight = `${this.#pos.maxHeight}px`;
+    pop.setAttribute("data-side", p.side);
+    this.#last = { left: r.left, top: r.top };
+    if (!this.#at) this.#at = anchorSpot(trig);
+  }
+  // ── picks ─────────────────────────────────────────────────────────────────
+  /** A row picks its model — by id, never by position. The current row only closes; locked rows do nothing. */
+  #pickKey(key) {
+    const d = this.data;
+    if (!d || this.#off()) return;
+    const opts = this.#opts();
+    const i = opts.findIndex((o2) => o2.key === key);
+    if (i < 0) return;
+    if (i === currentIndex(opts, d.value?.model ?? "")) {
+      this.#setOpen(false, { user: true, returnFocus: true });
+      return;
+    }
+    const o = opts[i];
+    if (!o.listed || d.busy?.model) return;
+    this.#setOpen(false, { user: true, returnFocus: true });
+    const detail = { model: o.model.id, effort: d.value?.effort, changed: "model" };
+    if (this.emit("ui-change", detail) && this.data && this.data.value === d.value)
+      this.data = { ...this.data, value: { model: o.model.id, effort: d.value?.effort } };
+  }
+  /** A level keeps the menu open (it is a setting of the same choice). */
+  #pickEffort(level) {
+    const d = this.data;
+    if (!d || this.#off() || d.busy?.effort || !level || level === d.value?.effort) return;
+    const model = d.value?.model ?? "";
+    const detail = { model, effort: level, changed: "effort" };
+    if (this.emit("ui-change", detail) && this.data && this.data.value === d.value)
+      this.data = { ...this.data, value: { model, effort: level } };
+  }
+  // ── input ─────────────────────────────────────────────────────────────────
+  #onClick(e) {
+    const t = e.target;
+    if (!t?.closest) return;
+    if (t.closest(".mp-trigger")) {
+      if (this.#off()) return;
+      const opening = !this.#open;
+      this.#setOpen(opening, { user: true, focusList: opening, returnFocus: !opening });
+      return;
+    }
+    if (!this.#open) return;
+    const opt = t.closest(".mp-opt");
+    if (opt) {
+      this.#pickKey(opt.getAttribute("data-k") ?? "");
+      return;
+    }
+    const b = t.closest(".mp-seg-btn");
+    if (b && b.parentElement?.getAttribute("aria-disabled") !== "true")
+      this.#pickEffort(b.getAttribute("data-effort") ?? "");
+  }
+  #onKey(e) {
+    const t = e.target;
+    if (!t?.closest) return;
+    if (t.closest(".mp-trigger")) {
+      this.#triggerKey(e);
+      return;
+    }
+    if (!t.closest(".mp-pop") || !this.#open) return;
+    e.stopPropagation();
+    const onList = t.classList.contains("mp-list");
+    if (e.key === "Escape") {
+      e.preventDefault();
+      this.#setOpen(false, { user: true, returnFocus: true });
+    } else if (e.key === "Tab") {
+      e.preventDefault();
+      const level = this.$('.mp-seg-btn[tabindex="0"]');
+      const list = this.$(".mp-list");
+      (onList ? level ?? list : list)?.focus();
+    } else if (onList) {
+      this.#listKey(e);
+    } else {
+      const radio = t.closest(".mp-seg-btn");
+      if (radio) this.#effortKey(e, radio);
+    }
+  }
+  /** ↓ / ↑ on the trigger open the menu (Enter and Space are the button's own click); Esc closes it. */
+  #triggerKey(e) {
+    if (e.key === "Escape" && this.#open) {
+      e.preventDefault();
+      e.stopPropagation();
+      this.#setOpen(false, { user: true, returnFocus: true });
+      return;
+    }
+    if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+    e.preventDefault();
+    if (this.#off()) return;
+    this.#setOpen(true, { user: true, focusList: true });
+  }
+  /** ↑ ↓ (wrapping) · Home · End point at a row; Enter · Space pick it. */
+  #listKey(e) {
+    const opts = this.#opts();
+    const n = opts.length;
+    if (!n) return;
+    const k = e.key;
+    const cur = currentIndex(opts, this.data?.value?.model ?? "");
+    if (k === "ArrowDown" || k === "ArrowUp" || k === "Home" || k === "End") {
+      e.preventDefault();
+      const i = k === "Home" ? 0 : k === "End" ? n - 1 : this.#activeIndex(opts, cur) + (k === "ArrowDown" ? 1 : -1);
+      this.#activeKey = opts[(i % n + n) % n].key;
+      this.#pointing = true;
+      this.renderNow();
+      this.$(".mp-opt[data-active]")?.scrollIntoView?.({ block: "nearest" });
+    } else if (k === "Enter" || k === " ") {
+      e.preventDefault();
+      this.#pickKey(opts[this.#activeIndex(opts, cur)].key);
+    }
+  }
+  /** Effort: the arrows move and select at once (radio pattern); Home · End. */
+  #effortKey(e, radio) {
+    const group = radio.parentElement;
+    if (!group) return;
+    const btns = Array.from(group.querySelectorAll(".mp-seg-btn"));
+    const n = btns.length;
+    const i = btns.indexOf(radio);
+    const k = e.key;
+    const j = k === "ArrowRight" || k === "ArrowDown" ? i + 1 : k === "ArrowLeft" || k === "ArrowUp" ? i - 1 : k === "Home" ? 0 : k === "End" ? n - 1 : null;
+    if (j === null || !n) return;
+    e.preventDefault();
+    if (group.getAttribute("aria-disabled") === "true") return;
+    const next = btns[(j % n + n) % n];
+    next.focus();
+    this.#pickEffort(next.getAttribute("data-effort") ?? "");
+  }
+  /** The mouse points at a row: it lights, the others step back; leaving the list lets go. */
+  #onPointer(e) {
+    if (!this.#open || e.pointerType && e.pointerType !== "mouse") return;
+    const opt = e.target?.closest?.(".mp-opt");
+    if (!opt) return;
+    const key = opt.getAttribute("data-k") ?? "";
+    if (this.#pointing && this.#activeKey === key) return;
+    this.#activeKey = key;
+    this.#pointing = true;
+    this.renderNow();
+  }
+  #onPointerOut(e) {
+    if (!this.#open || !this.#pointing || e.pointerType && e.pointerType !== "mouse") return;
+    const list = this.$(".mp-list");
+    const to = e.relatedTarget;
+    if (!list || !list.contains(e.target) || to && list.contains(to)) return;
+    this.#pointing = false;
+    this.renderNow();
+  }
+  // ── render ────────────────────────────────────────────────────────────────
+  /** Patch the live tree instead of replacing it: the open/close transition, the thumb and focus survive. */
+  update() {
+    morphInto(this.content, this.render());
+    this.updated();
+  }
+  render() {
+    const d = this.data;
+    if (!d) return "";
+    const t = this.#t;
+    const v = d.value ?? { model: "" };
+    const opts = pickerOptions(d);
+    const cur = currentIndex(opts, v.model ?? "");
+    const curOpt = cur >= 0 ? opts[cur] : null;
+    const open = this.#open;
+    const off = !!d.disabled;
+    const why = typeof d.disabled === "string" ? d.disabled : "";
+    const busy = !!(d.busy?.model || d.busy?.effort);
+    const name = curOpt ? curOpt.model.label || curOpt.model.id : t.model;
+    const level = modelEffortLabel(v.effectiveEffort || v.effort);
+    const pending = typeof d.busy?.model === "string" ? d.busy.model : "";
+    const trigger = `<button type="button" class="mp-trigger" part="trigger" data-key="mp-trigger" aria-haspopup="dialog" aria-expanded="${open ? "true" : "false"}" aria-controls="mp-menu" aria-label="${escAttr(t.trigger(name, level))}"${busy ? ' aria-busy="true"' : ""}${off ? ` aria-disabled="true"${why ? ` title="${escAttr(why)}" aria-describedby="mp-why"` : ""}` : ""}><span class="mp-glyph" aria-hidden="true">${esc(modelGlyph(curOpt ? curOpt.model : { label: name }))}</span><span class="mp-name">${esc(
+      name
+    )}</span>${level ? `<span class="mp-level">&middot; ${esc(level)}</span>` : ""}<span class="mp-chev" aria-hidden="true"></span></button>`;
+    return `<div class="mp">${trigger}${why ? `<span class="sr-only" id="mp-why">${esc(why)}</span>` : ""}
+<div class="mp-note" role="status">${!open && pending ? esc(pending) : ""}</div>
+<div class="mp-note is-error" role="alert">${!open && d.error ? esc(d.error) : ""}</div>
+<i class="mp-probe" aria-hidden="true"></i>${this.#menu(d, opts, cur, t)}</div>`;
+  }
+  #menu(d, opts, cur, t) {
+    const open = this.#open;
+    const active = opts.length ? this.#activeIndex(opts, cur) : -1;
+    const lit = this.#pointing ? active : cur;
+    const used = num(d.contextTokens);
+    const locked = !!d.busy?.model;
+    const wait = typeof d.busy?.model === "string" && d.busy.model ? d.busy.model : t.switching;
+    const pos = this.#pos;
+    let rows = "";
+    opts.forEach((o, i) => {
+      const m = o.model;
+      const isCur = i === cur;
+      const name = m.label || m.id;
+      const ac = num(m.autoCompactAt);
+      const win = num(m.window);
+      const price = validModelPrice(m.price);
+      const desc = o.listed ? [
+        m.short || m.id,
+        ac > 0 ? `autocompact ${fmtModelTokens(ac)}` : "",
+        !isCur && ac > 0 && used > ac ? t.after : ""
+      ].filter(Boolean).join(" · ") : t.outside;
+      const facts = o.listed ? [
+        win > 0 ? t.winSr(fmtModelTokens(win)) : "",
+        price ? t.priceWords(fmtModelPrice(price.input), fmtModelPrice(price.output)) : t.noPriceWords
+      ].filter(Boolean).join(", ") : "";
+      const label = `${name}, ${desc}${facts ? `. ${facts}` : ""}`;
+      rows += `<div class="mp-opt" id="mp-opt-${i}" role="option" data-mk="opt:${escAttr(o.key)}" data-k="${escAttr(o.key)}" aria-selected="${isCur ? "true" : "false"}"${locked || !o.listed ? ' aria-disabled="true"' : ""}${i === active ? ' data-active=""' : ""}${i === lit ? ' data-lit=""' : ""} aria-label="${escAttr(label)}"><span class="mp-glyph" aria-hidden="true">${esc(modelGlyph(m))}</span><span class="mp-title"><span class="mp-title-name">${esc(
+        name
+      )}</span>${isCur ? `<span class="mp-check" aria-hidden="true">${CHECK}</span>` : ""}</span>${meters(o.meters)}<span class="mp-desc">${esc(desc)}</span></div>`;
+    });
+    const tray = this.#tray(lit >= 0 ? opts[lit] : void 0, t);
+    return `<div class="mp-pop${open ? " is-open" : ""}" part="menu" id="mp-menu" role="dialog" aria-label="${escAttr(t.dialog)}"${open ? "" : " inert"} data-side="${pos?.side ?? this.#side}"${pos ? ` style="left:${pos.left}px;top:${pos.top}px;max-height:${pos.maxHeight}px"` : ""}><div class="mp-card"><div class="mp-head" aria-hidden="true"><span class="mp-head-t">${esc(
+      t.head
+    )}</span><span class="mp-cols">${t.cols.map((c) => `<span>${esc(c)}</span>`).join("")}</span></div>${locked ? `<div class="mp-wait" id="mp-wait">${esc(wait)}</div>` : ""}<div class="mp-list" role="listbox" aria-label="${escAttr(t.list)}" tabindex="0" data-key="mp-list"${active >= 0 ? ` aria-activedescendant="mp-opt-${active}"` : ""}${locked ? ' aria-disabled="true" aria-describedby="mp-wait"' : ""}${this.#pointing ? ' data-pointing=""' : ""}>${rows}</div>${this.#effort(
+      d,
+      cur >= 0 ? opts[cur] : void 0,
+      t
+    )}<div class="mp-err" role="alert">${open && d.error ? esc(d.error) : ""}</div></div><div class="mp-foot"><span class="mp-caption" aria-hidden="true">${tray.html}</span><span class="mp-keys" aria-hidden="true"><kbd>&#x2191;&#x2193;</kbd><kbd>&#x21B5;</kbd></span><span class="sr-only mp-sr" aria-live="polite">${esc(
+      tray.sr
+    )}</span></div></div>`;
+  }
+  /** Effort as a radiogroup with one tab stop; checked = the level that runs; only the model's levels. */
+  #effort(d, cur, t) {
+    const levels = modelEffortLevels(cur?.listed ? cur.model : null);
+    if (!levels.length) return "";
+    const v = d.value ?? {};
+    const on = v.effectiveEffort || v.effort || "";
+    const idx = levels.indexOf(on);
+    const capped = !!(v.effectiveEffort && v.effort && v.effectiveEffort !== v.effort);
+    const busy = !!d.busy?.effort;
+    let btns = "";
+    levels.forEach((l, i) => {
+      const checked = l === on;
+      btns += `<button type="button" class="mp-seg-btn" role="radio" data-mk="eff:${escAttr(l)}" data-key="eff:${escAttr(
+        l
+      )}" data-effort="${escAttr(l)}" aria-checked="${checked ? "true" : "false"}" tabindex="${checked || idx < 0 && i === 0 ? "0" : "-1"}" aria-label="${escAttr(modelEffortLabel(l))}">${esc(EFFORT_SHORT[l] ?? l)}</button>`;
+    });
+    return `<div class="mp-settings"><div class="mp-effort-head"><span class="mp-effort-label" id="mp-effort-label">${esc(
+      t.effort
+    )}</span>${capped ? `<span class="mp-effort-cap">${esc(t.cap(modelEffortLabel(v.effort), modelEffortLabel(v.effectiveEffort)))}</span>` : ""}</div><div class="mp-seg-ctl" role="radiogroup" aria-labelledby="mp-effort-label"${busy ? ' aria-disabled="true" aria-busy="true"' : ""} style="--i:${Math.max(0, idx)};--n:${levels.length}">${idx >= 0 ? '<span class="mp-thumb" aria-hidden="true"></span>' : ""}${btns}</div></div>`;
+  }
+  /** The tray of the lit row, and the sentence the live region reads once. */
+  #tray(o, t) {
+    if (!o) return { html: "", sr: "" };
+    if (!o.listed) return { html: esc(t.outsideTray), sr: t.outsideSr };
+    const m = o.model;
+    const p = validModelPrice(m.price);
+    const win = num(m.window) > 0 ? fmtModelTokens(m.window) : "";
+    const html = [
+      p ? t.tray(
+        `<b class="mp-roll" data-roll="input">${fmtModelPrice(p.input)}</b>`,
+        `<b class="mp-roll" data-roll="output">${fmtModelPrice(p.output)}</b>`
+      ) : esc(t.noPrice),
+      win ? esc(t.win(win)) : ""
+    ].filter(Boolean).join(" · ");
+    const sr = `${m.label || m.id}: ${[
+      p ? t.priceWords(fmtModelPrice(p.input), fmtModelPrice(p.output)) : t.noPriceWords,
+      win ? t.winSr(win) : ""
+    ].filter(Boolean).join(", ")}`;
+    return { html, sr };
+  }
+  updated() {
+    if (!this.#open) {
+      if (this.#raf) cancelAnimationFrame(this.#raf);
+      this.#raf = 0;
+      return;
+    }
+    if (this.#off()) {
+      this.#setOpen(false, { user: true });
+      return;
+    }
+    this.#place();
+    this.#rollTray();
+  }
+  /** The tray's prices roll from what is shown to the lit row's (560ms, ease-out quart); reduced motion jumps. */
+  #rollTray() {
+    if (this.#raf) cancelAnimationFrame(this.#raf);
+    this.#raf = 0;
+    const opts = this.#opts();
+    const cur = currentIndex(opts, this.data?.value?.model ?? "");
+    const lit = this.#pointing ? this.#activeIndex(opts, cur) : cur;
+    const o = lit >= 0 ? opts[lit] : void 0;
+    const to = o?.listed ? validModelPrice(o.model.price) : null;
+    const from = this.#shown;
+    this.#shown = to;
+    if (!to || !from || from.input === to.input && from.output === to.output) return;
+    if (prefersReducedMotion() || typeof requestAnimationFrame !== "function") return;
+    const els = this.$$(".mp-roll");
+    const t0 = performance.now();
+    const step = (now) => {
+      const p = Math.min(1, Math.max(0, (now - t0) / ROLL_MS));
+      const e = 1 - (1 - p) ** 4;
+      const at = {
+        input: from.input + (to.input - from.input) * e,
+        output: from.output + (to.output - from.output) * e
+      };
+      this.#shown = p < 1 ? at : to;
+      for (const el of els) {
+        const k = el.getAttribute("data-roll") === "input" ? "input" : "output";
+        el.textContent = fmtModelPrice(at[k], to[k]);
+      }
+      this.#raf = p < 1 ? requestAnimationFrame(step) : 0;
+    };
+    step(t0);
+  }
+}
+function meters(vals) {
+  let html = '<span class="mp-bars" aria-hidden="true">';
+  vals.forEach((v, c) => {
+    if (!v) {
+      html += '<span class="mp-meter is-none">&mdash;</span>';
+      return;
+    }
+    html += `<span class="mp-meter" style="--c:${c}">`;
+    for (let k = 0; k < 5; k++) html += `<span class="mp-seg" style="--s:${k}"${k < v ? ' data-on=""' : ""}></span>`;
+    html += "</span>";
+  });
+  return `${html}</span>`;
+}
+define("ui-model-picker", UiModelPicker);
+export {
+  MODEL_EFFORT_LEVELS,
+  UiModelPicker,
+  anchorMoved,
+  anchorSpot,
+  fmtModelPrice,
+  fmtModelTokens,
+  meterSegments,
+  modelEffortLabel,
+  modelEffortLevels,
+  modelGlyph,
+  modelMeters,
+  placeModelMenu,
+  validModelPrice
+};
+//# sourceMappingURL=model-picker.js.map