tickslate 0.0.0-stage → 0.1.0

package/elements.dev.js

@@ -0,0 +1,4781 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { isSize, snapSize, toTime, toNumber, emptyLayout, WIDGETS, readLayout, DEFAULT_PROFILE, withProfile, addItem, nextProfileChange, activeProfile, columnsFor, resizeItem, typeForTag, place, footprint, dropIndex, moveItem, sizeForExtent, stepSize, removeItem, SIZE_NAMES, SIZES, currentConfig, createFormatter, equitySeries, equityStats, toDay, localDate, version } from "./index.js";
+import { version as version2 } from "./index.js";
+function metrics(width, columns, rowHeight, gap) {
+  const colWidth = Math.max(0, (width - gap * (columns - 1)) / columns);
+  return { columns, colWidth, rowHeight, gap, pitchX: colWidth + gap, pitchY: rowHeight + gap };
+}
+function boxOf(p, m) {
+  return {
+    x: p.col * m.pitchX,
+    y: p.row * m.pitchY,
+    w: p.cols * m.colWidth + (p.cols - 1) * m.gap,
+    h: p.rows * m.rowHeight + (p.rows - 1) * m.gap
+  };
+}
+function boardHeight(rows, m) {
+  return rows > 0 ? rows * m.rowHeight + (rows - 1) * m.gap : 0;
+}
+function cellAt(x, y, cols, m) {
+  const maxCol = Math.max(0, m.columns - cols);
+  return {
+    col: Math.min(maxCol, Math.max(0, x / m.pitchX)),
+    row: Math.max(0, y / m.pitchY)
+  };
+}
+function extentOf(w, h, m) {
+  return {
+    cols: Math.min(m.columns, Math.max(1, (w + m.gap) / m.pitchX)),
+    rows: Math.max(1, (h + m.gap) / m.pitchY)
+  };
+}
+function mergeOrder(full, visibleOrder) {
+  const visible = new Set(visibleOrder.map((item) => item.id));
+  let next = 0;
+  return full.map((item) => visible.has(item.id) ? visibleOrder[next++] : item);
+}
+function px(value, fallback) {
+  const n = parseFloat(value);
+  return Number.isFinite(n) && /px\s*$/.test(String(value).trim()) ? n : fallback;
+}
+const hasOwn$1 = (o, k2) => Object.prototype.hasOwnProperty.call(o, k2);
+function itemsFromChildren(descriptors, resolve, reserved) {
+  const claimed = /* @__PURE__ */ new Set();
+  const ids = descriptors.map((d) => {
+    if (!d.item || claimed.has(d.item)) return null;
+    claimed.add(d.item);
+    return d.item;
+  });
+  const taken = /* @__PURE__ */ new Set([...claimed, ...reserved || []]);
+  return descriptors.map((d, i) => {
+    const { type, spec: catalogSpec } = resolve(d.tag);
+    const spec = d.spec || catalogSpec || null;
+    let id = ids[i];
+    if (id === null) {
+      id = type;
+      for (let n = 2; taken.has(id); n++) id = `${type}-${n}`;
+      taken.add(id);
+    }
+    const sizes = spec && Array.isArray(spec.sizes) && spec.sizes.length ? spec.sizes : null;
+    let size;
+    if (isSize(d.declaredSize)) size = sizes ? snapSize(d.declaredSize, sizes) : d.declaredSize;
+    else size = sizes ? sizes[0] : "S";
+    return id === type ? { id, size } : { id, type, size };
+  });
+}
+function reconcile(prevItems, current, removedIds) {
+  const removed = removedIds || /* @__PURE__ */ new Set();
+  const live = new Set(current.map((item) => item.id));
+  const kept = prevItems.filter((item) => live.has(item.id) && !removed.has(item.id));
+  const have = new Set(kept.map((item) => item.id));
+  return kept.concat(current.filter((item) => !have.has(item.id) && !removed.has(item.id)));
+}
+function specResolver(elementSpecs, hostCatalog, base) {
+  return (item) => elementSpecs.get(item.id) || lookup$1(item, hostCatalog) || lookup$1(item, base) || null;
+}
+function lookup$1(item, catalog) {
+  if (typeof catalog === "function") return catalog(item) || null;
+  if (!catalog) return null;
+  const type = item.type === void 0 ? item.id : item.type;
+  return typeof type === "string" && hasOwn$1(catalog, type) ? catalog[type] : null;
+}
+function hostResizes(entries) {
+  const out = /* @__PURE__ */ new Map();
+  for (const { id, size, written } of entries) {
+    if (written !== void 0 && size !== written && isSize(size)) out.set(id, size);
+  }
+  return out;
+}
+function elementSpec(el) {
+  if (!el) return null;
+  const own = el.spec;
+  if (own !== void 0) {
+    return own && typeof own === "object" && Array.isArray(own.sizes) && own.sizes.length ? own : null;
+  }
+  const attr = el.getAttribute("sizes");
+  if (!attr) return null;
+  const sizes = attr.split(/[\s,]+/).filter(isSize);
+  return sizes.length ? { label: el.getAttribute("label") || "", sizes } : null;
+}
+const DEV = true;
+const warned = /* @__PURE__ */ new Set();
+function warnOnce(key, message) {
+  if (warned.has(key)) return;
+  warned.add(key);
+  console.warn("tickslate: " + message);
+}
+const KINDS = ["number", "numeric", "time", "string", "boolean", "array", "object"];
+const FIELD_KEYS = ["kind", "optional", "of"];
+const isObject = (v) => v !== null && typeof v === "object" && !Array.isArray(v);
+const isField = (spec) => isObject(spec) && typeof spec.kind === "string" && KINDS.includes(spec.kind) && Object.keys(spec).every((k2) => FIELD_KEYS.includes(k2));
+function received(v) {
+  if (v === void 0) return "missing";
+  if (v === null) return "null";
+  if (Array.isArray(v)) return "array";
+  if (typeof v === "string") return `string "${v.length > 24 ? v.slice(0, 24) + "…" : v}"`;
+  if (typeof v === "number" || typeof v === "boolean") return `${typeof v} ${v}`;
+  return typeof v;
+}
+function passes(kind, v) {
+  switch (kind) {
+    case "number":
+      return typeof v === "number" && Number.isFinite(v);
+    case "numeric":
+      return Number.isFinite(toNumber(v));
+    case "time":
+      return Number.isFinite(toTime(v));
+    case "string":
+      return typeof v === "string";
+    case "boolean":
+      return typeof v === "boolean";
+    case "array":
+      return Array.isArray(v);
+    default:
+      return isObject(v);
+  }
+}
+function checkValue(value, spec, path, parent) {
+  if (typeof spec === "string") spec = { kind: spec };
+  else if (!isField(spec)) spec = { kind: "object", of: spec };
+  if (value === void 0 || value === null) {
+    if (spec.optional) return null;
+    const problem = { path, expected: spec.kind, received: received(value) };
+    if (parent) problem.keys = Object.keys(parent);
+    return problem;
+  }
+  if (!passes(spec.kind, value)) return { path, expected: spec.kind, received: received(value) };
+  if (spec.of === void 0) return null;
+  if (spec.kind === "array") {
+    for (let i = 0; i < value.length; i++) {
+      const problem = checkValue(value[i], spec.of, `${path}[${i}]`, isObject(value[i]) ? value[i] : null);
+      if (problem) return problem;
+    }
+  } else if (spec.kind === "object" && isObject(spec.of) && !isField(spec.of)) {
+    return checkShape(value, spec.of, path);
+  }
+  return null;
+}
+function checkShape(data, shape, path = "data") {
+  if (!isObject(data)) return { path, expected: "object", received: received(data) };
+  for (const key of Object.keys(shape)) {
+    const problem = checkValue(data[key], shape[key], `${path}.${key}`, data);
+    if (problem) return problem;
+  }
+  return null;
+}
+function shapeMessage(problem) {
+  if (problem.received === "missing") {
+    return `${problem.path} is missing (got keys: ${problem.keys && problem.keys.length ? problem.keys.join(", ") : "none"})`;
+  }
+  return `${problem.path} should be ${problem.expected} (got ${problem.received})`;
+}
+function parseErrorParts(err) {
+  const raw = String(err && err.message || err);
+  const at = /position (\d+)/.exec(raw);
+  const message = raw.replace(/\s*(in JSON )?at position \d+(\s*\(line \d+ column \d+\))?/, "");
+  return { message, position: at ? Number(at[1]) : null };
+}
+function createHistory(cap = 20) {
+  const limit = Math.max(1, Math.floor(cap) || 20);
+  let stacks = /* @__PURE__ */ Object.create(null);
+  return {
+    /** Remember `layout` as the state to return to for `profile`. The oldest entry goes past the cap. */
+    push(profile, layout) {
+      const stack = stacks[profile] || (stacks[profile] = []);
+      stack.push(layout);
+      if (stack.length > limit) stack.shift();
+    },
+    /** The most recent layout for `profile`, removed from the history, or null when there is none. */
+    undo(profile) {
+      const stack = stacks[profile];
+      return stack && stack.length ? stack.pop() : null;
+    },
+    /** Forget everything, as when the host sets a layout of its own. */
+    clear() {
+      stacks = /* @__PURE__ */ Object.create(null);
+    }
+  };
+}
+function isOutside(path, grid, extras = []) {
+  if (!path) return true;
+  for (const node of path) {
+    if (node === grid || extras.includes(node)) return false;
+  }
+  return true;
+}
+function pickFocusTarget(candidates) {
+  for (const c of candidates) {
+    if (c && c.connected && !c.hidden && !c.disabled) return c.target;
+  }
+  return null;
+}
+const ARROWS = {
+  ArrowLeft: [-1, 0],
+  ArrowRight: [1, 0],
+  ArrowUp: [0, -1],
+  ArrowDown: [0, 1]
+};
+const isActivate = (key) => key === " " || key === "Enter" || key === "Spacebar";
+function keyAction(key, focusedId, state) {
+  const held = state && state.held ? state.held : null;
+  if (held) {
+    if (isActivate(key)) return { type: "drop", id: held };
+    if (key === "Escape") return { type: "cancel", id: held };
+    const arrow = ARROWS[key];
+    if (arrow) return { type: "moveBy", id: held, dCol: arrow[0], dRow: arrow[1] };
+    return null;
+  }
+  if (!focusedId) return null;
+  if (isActivate(key)) return { type: "pickUp", id: focusedId };
+  if (key === "+" || key === "=") return { type: "resizeStep", id: focusedId, dir: 1 };
+  if (key === "-" || key === "_") return { type: "resizeStep", id: focusedId, dir: -1 };
+  if (key === "Delete" || key === "Backspace") return { type: "remove", id: focusedId };
+  return null;
+}
+function tapAction(tappedId, state) {
+  const held = state && state.held ? state.held : null;
+  if (held) {
+    if (!tappedId) return { type: "cancel", id: held };
+    if (tappedId === held) return { type: "drop", id: held };
+    return { type: "placeAt", id: held, targetId: tappedId };
+  }
+  return tappedId ? { type: "pickUp", id: tappedId } : null;
+}
+const LONG_PRESS_MS = 500;
+const PRESS_SLOP = 8;
+const MOUSE_DRAG_SLOP = 4;
+const TOUCH_HOLD_MS = 200;
+const SETTLE_MS = 120;
+const EDGE = 64;
+const MAX_SCROLL = 900;
+const LIFT_SCALE = 1.04;
+const SLIDE = "var(--ts-motion, 220ms) var(--ts-ease, cubic-bezier(.2, .8, .2, 1))";
+const MAX_WAIT = 6e4;
+const UNDEFINED_TAG_MS = 2e3;
+const NOT_TILES = /* @__PURE__ */ new Set(["script", "style", "template", "link", "meta", "noscript"]);
+const NO_SPECS = /* @__PURE__ */ new Map();
+const REMOVE_GUARD_MS = 400;
+const TOAST_MS = 6e3;
+const TEXT = {
+  removed: (label) => `${label} removed`,
+  undo: "Undo",
+  editLayout: "Edit layout",
+  done: "Done",
+  addBack: (n) => `Add back (${n})`,
+  addBackItem: (label) => `Add back ${label}`,
+  addedBack: (label) => `${label} added back.`,
+  hiddenHeading: "Hidden from this layout",
+  editingGroup: "Editing layout",
+  emptyBoard: "No widgets on this layout yet",
+  dashboard: "Dashboard",
+  editStart: (n) => `Editing layout, ${n} ${n === 1 ? "tile" : "tiles"}. Tab to a tile, Space to pick it up.`,
+  editDone: "Done editing layout.",
+  handle: (label, size, n, total) => `${label}, ${size}, position ${n} of ${total}`,
+  instructions: "Space or Enter picks the tile up, then the arrow keys move it and Space drops it. Plus and minus resize it. Delete removes it. You can also tap the tile, then tap where it should go.",
+  removeLabel: (label) => `Remove ${label}`,
+  resizeLabel: (label, size) => `Resize ${label}, now ${size}`,
+  pickedUp: (label) => `${label}, picked up. Use the arrow keys to move it, Space to drop, Escape to cancel.`,
+  moved: (label, n, total) => `${label}, moved to position ${n} of ${total}.`,
+  dropped: (label) => `${label}, dropped.`,
+  droppedAt: (label, n, total) => `${label}, dropped at position ${n} of ${total}.`,
+  cancelled: (label) => `${label}, move cancelled.`,
+  blocked: "Can't move further.",
+  resized: (label, size) => `${label}, size ${size}.`,
+  profile: (name) => `Showing the ${name} layout.`,
+  undone: "Undone.",
+  lockedWarning: "<ts-grid> is locked, so editing = true was ignored. Remove the locked attribute to allow editing."
+};
+const hasOwn = (o, k2) => Object.prototype.hasOwnProperty.call(o, k2);
+let template = null;
+const TEMPLATE$1 = `
+<style>
+  :host { display: block; position: relative; -webkit-tap-highlight-color: transparent; }
+  :host([hidden]) { display: none; }
+  :host([dragging]) { cursor: grabbing; }
+  .board { position: relative; transition: height ${SLIDE}; }
+  /* A long press must never start a text selection on a touch screen, but a
+     mouse user may copy a figure out of a tile until they start editing. */
+  @media (pointer: coarse) {
+    :host(:not([locked])) ::slotted(*) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
+  }
+  :host([editing]) ::slotted(*), :host([dragging]) ::slotted(*) { -webkit-user-select: none; user-select: none; }
+  .placeholder {
+    position: absolute; top: 0; left: 0; box-sizing: border-box; pointer-events: none;
+    border-radius: var(--ts-radius, 10px);
+    background: color-mix(in srgb, var(--ts-ink, #1C1A16) 4%, transparent);
+    border: 1.5px dashed color-mix(in srgb, var(--ts-ink, #1C1A16) 22%, transparent);
+    opacity: 0; transition: opacity 120ms ease;
+  }
+  .placeholder.on { opacity: 1; }
+  .chromes { position: absolute; inset: 0; pointer-events: none; }
+  /* The container never takes a pointer; its three buttons do, while editing. */
+  .chrome {
+    position: absolute; top: 0; left: 0; box-sizing: border-box; pointer-events: none;
+    border-radius: var(--ts-radius, 10px); z-index: 2;
+  }
+  .chrome button { font: inherit; color: inherit; }
+  .handle {
+    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: inherit;
+    background: none; pointer-events: none; cursor: grab; -webkit-tap-highlight-color: transparent;
+  }
+  :host([editing]) .handle, :host([editing]) .remove, :host([editing]) .resize { pointer-events: auto; }
+  :host([locked]) .chrome button { pointer-events: none; }
+  .chrome.removing .handle, .chrome.removing .remove, .chrome.removing .resize { pointer-events: none; }
+  .chrome.removing .remove { display: none; }
+  :host([dragging]) .handle { cursor: grabbing; }
+  /* An outline, not a shadow, so the ring survives forced colours. */
+  .handle:focus-visible, .resize:focus-visible { outline: 2px solid var(--ts-focus); outline-offset: 2px; }
+  .chrome.held .handle { outline: 2px solid var(--ts-focus); outline-offset: 2px; }
+  .remove, .resize { display: none; }
+  :host([editing]) .remove, :host([editing]) .resize { display: flex; }
+  .chrome.lifted .remove, .chrome.lifted .resize, .chrome.fixed .resize { display: none; }
+  .remove {
+    position: absolute; top: -16px; left: -16px; width: 44px; height: 44px; padding: 0; margin: 0;
+    border: 0; background: none; align-items: center; justify-content: center; cursor: pointer;
+    animation: pop 160ms var(--ts-ease, ease-out);
+  }
+  .remove span {
+    width: 22px; height: 22px; border-radius: 50%; box-sizing: border-box;
+    display: flex; align-items: center; justify-content: center;
+    background: var(--ts-surface-2, #F1EBDE); color: var(--ts-ink, #1C1A16);
+    border: 1px solid var(--ts-line, #E2DACB); box-shadow: var(--ts-shadow, none);
+    font: 600 16px/1 var(--ts-font-ui, system-ui, sans-serif);
+  }
+  .remove:focus-visible span { outline: 2px solid var(--ts-focus); outline-offset: 2px; }
+  .resize {
+    position: absolute; right: -6px; bottom: -6px; width: 44px; height: 44px; margin: 0; padding: 0; border: 0;
+    background: none; cursor: nwse-resize; touch-action: none; animation: pop 160ms var(--ts-ease, ease-out);
+  }
+  .resize::after {
+    content: ''; position: absolute; right: 12px; bottom: 12px; width: 12px; height: 12px;
+    border-right: 3px solid var(--ts-muted, #6A655B); border-bottom: 3px solid var(--ts-muted, #6A655B);
+    border-bottom-right-radius: 6px;
+  }
+  @keyframes pop { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
+  @media (prefers-reduced-motion: reduce) {
+    /* The wiggle is gone, so this outline alone says "editing". The RFC's 45% mix is
+       2.8:1 against Paper's --ts-bg, under the 3:1 it asks for; 50% clears it in both themes. */
+    :host([editing]) .chrome { outline: 2px dashed color-mix(in srgb, var(--ts-ink) 50%, transparent); outline-offset: -1px; }
+    .remove, .resize { animation: none; }
+  }
+  [hidden] { display: none !important; }
+  /* The dock holds the pill and, above it, the undo toast, so they never overlap.
+     It has no height of its own until the pill shows, then it reserves the pill's
+     room: below the grid when it all fits, floating over the tiles when it doesn't. */
+  .dock { position: sticky; bottom: 22px; height: 0; z-index: 7; pointer-events: none; }
+  .dock.has-pill { height: 56px; margin-top: 22px; }
+  .stack {
+    position: absolute; inset-inline: 0; bottom: 0; display: flex; flex-direction: column; align-items: center;
+    gap: 10px; pointer-events: none;
+  }
+  .toast {
+    position: relative; display: inline-flex; align-items: center; gap: 0; padding: 4px 4px 4px 20px;
+    border-radius: 999px; box-sizing: border-box; max-width: calc(100% - 32px); white-space: nowrap;
+    background: var(--ts-ink); color: var(--ts-surface); box-shadow: var(--ts-shadow-lift);
+    font: 500 13px var(--ts-font-ui); pointer-events: auto;
+  }
+  /* Kept in the tree while off, so the status region announces the next text put in it. */
+  .toast:not(.on) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; opacity: 0; pointer-events: none; }
+  .toast .msg { overflow: hidden; text-overflow: ellipsis; }
+  .toast .sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+  .toast .undo {
+    min-width: 44px; min-height: 44px; margin: 0 0 0 16px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer;
+    background: color-mix(in srgb, var(--ts-surface) 14%, transparent); color: inherit; font: inherit; font-weight: 600;
+  }
+  .toast .undo:focus-visible { outline: 2px solid var(--ts-surface); outline-offset: 2px; }
+  .pill {
+    position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px;
+    box-sizing: border-box; max-width: calc(100% - 32px); pointer-events: auto;
+    background: var(--ts-surface); color: var(--ts-ink); border: 1px solid var(--ts-line); box-shadow: var(--ts-shadow-lift);
+  }
+  .pb {
+    min-width: 44px; min-height: 44px; margin: 0; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer;
+    display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
+    background: none; color: var(--ts-ink); font: 600 13px var(--ts-font-ui);
+  }
+  .pb:focus-visible, .mi:focus-visible, .edit-btn:focus-visible { outline: 2px solid var(--ts-focus); outline-offset: 2px; }
+  .pb[aria-expanded="true"] { background: var(--ts-surface-2); }
+  .pb.done { padding-inline: 24px; background: var(--ts-accent); color: var(--ts-surface); }
+  .pb.ghost { border: 1px solid var(--ts-line); background: var(--ts-surface); }
+  .pb .plus { color: var(--ts-accent); font-size: 16px; line-height: 1; }
+  .menu {
+    position: absolute; bottom: calc(100% + 8px); inset-inline-start: 0; z-index: 3; box-sizing: border-box;
+    width: 250px; max-width: calc(100vw - 32px); max-height: 50vh; overflow-y: auto; padding: 6px;
+    display: flex; flex-direction: column; text-align: start;
+    background: var(--ts-surface); color: var(--ts-ink); border: 1px solid var(--ts-line);
+    border-radius: var(--ts-radius); box-shadow: var(--ts-shadow-lift); pointer-events: auto;
+  }
+  .menu-h { padding: 8px 10px 6px; font: 600 10px var(--ts-font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ts-muted); }
+  .mi {
+    display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px;
+    margin: 0; padding: 0 10px; border: 0; border-radius: var(--ts-radius-sm); cursor: pointer; text-align: start;
+    background: none; color: inherit; font: 13px var(--ts-font-ui);
+  }
+  .mi:hover { background: var(--ts-surface-2); }
+  .mi .plus { color: var(--ts-accent); font-size: 16px; }
+  /* Visually hidden until a keyboard user reaches it, so it is the first Tab stop without crowding the dashboard. */
+  .edit-btn {
+    position: absolute; top: 12px; left: 12px; z-index: 8; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
+    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
+  }
+  .edit-btn:focus-visible {
+    width: auto; height: auto; min-height: 44px; margin: 0; padding: 0 18px; overflow: visible; clip-path: none;
+    border: 1px solid var(--ts-line); border-radius: 999px; cursor: pointer;
+    background: var(--ts-surface); color: var(--ts-ink); font: 600 13px var(--ts-font-ui); box-shadow: var(--ts-shadow-lift);
+  }
+  .empty {
+    position: absolute; inset: 0; box-sizing: border-box; display: flex; flex-direction: column; align-items: center;
+    justify-content: center; gap: 12px; padding: 16px; text-align: center; color: var(--ts-ink); font: 500 14px var(--ts-font-ui);
+    border: 1.5px dashed color-mix(in srgb, var(--ts-ink) 22%, transparent); border-radius: var(--ts-radius);
+    background: color-mix(in srgb, var(--ts-ink) 4%, transparent);
+  }
+  .empty .note { margin: 0; }
+  .empty .anchor { position: relative; }
+  .empty .menu { bottom: auto; top: calc(100% + 8px); inset-inline-start: 50%; transform: translateX(-50%); }
+  .hint { display: none; }
+  .sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+</style>
+<button class="edit-btn" type="button" hidden></button>
+<div class="board" part="board">
+  <div class="placeholder" part="placeholder"></div>
+  <slot></slot>
+  <div class="chromes"></div>
+  <div class="empty" part="empty" hidden>
+    <slot name="empty"><p class="note"></p></slot>
+    <div class="anchor"><button class="pb ghost add" type="button" aria-expanded="false" hidden><span class="plus" aria-hidden="true">+</span><span class="t"></span></button><div class="menu" role="group" hidden></div></div>
+  </div>
+</div>
+<div class="dock"><div class="stack">
+  <div class="toast" part="toast" role="status"><span class="msg"></span><span class="sep"> · </span><button class="undo" type="button" tabindex="-1"></button></div>
+  <div class="pill" part="edit-pill" role="group" hidden>
+    <button class="pb add" type="button" aria-expanded="false" hidden><span class="plus" aria-hidden="true">+</span><span class="t"></span></button>
+    <button class="pb done" type="button"></button>
+    <div class="menu" role="group" hidden></div>
+  </div>
+</div></div>
+<div class="sr" role="status" aria-live="polite"></div>
+<p class="hint" id="hint"></p>
+`;
+const Base$1 = typeof HTMLElement === "undefined" ? class {
+} : HTMLElement;
+class TsGrid extends Base$1 {
+  static get observedAttributes() {
+    return ["editing", "profile", "locked", "edit-controls"];
+  }
+  constructor() {
+    super();
+    if (!template) {
+      template = document.createElement("template");
+      template.innerHTML = TEMPLATE$1;
+    }
+    const root = this.attachShadow({ mode: "open" });
+    root.appendChild(template.content.cloneNode(true));
+    this._board = root.querySelector(".board");
+    this._placeholder = root.querySelector(".placeholder");
+    this._chromeLayer = root.querySelector(".chromes");
+    this._status = root.querySelector(".sr");
+    this._toast = root.querySelector(".toast");
+    this._toastText = root.querySelector(".toast .msg");
+    this._toastUndo = root.querySelector(".toast .undo");
+    this._toastUndo.textContent = TEXT.undo;
+    this._editBtn = root.querySelector(".edit-btn");
+    this._editBtn.textContent = TEXT.editLayout;
+    this._dock = root.querySelector(".dock");
+    this._pill = root.querySelector(".pill");
+    this._pill.setAttribute("aria-label", TEXT.editingGroup);
+    this._pill.querySelector(".done").textContent = TEXT.done;
+    this._emptyPanel = root.querySelector(".empty");
+    this._emptyPanel.querySelector(".note").textContent = TEXT.emptyBoard;
+    this._addBack = {
+      pill: { add: this._pill.querySelector(".add"), menu: this._pill.querySelector(".menu"), wrap: this._pill },
+      empty: { add: this._emptyPanel.querySelector(".add"), menu: this._emptyPanel.querySelector(".menu"), wrap: this._emptyPanel.querySelector(".anchor") }
+    };
+    this._menuOwner = null;
+    this._menuSig = "";
+    this._editOrigin = null;
+    this._toastState = null;
+    this._history = createHistory();
+    this._removing = /* @__PURE__ */ new Set();
+    this._removedAt = -Infinity;
+    root.querySelector(".hint").textContent = TEXT.instructions;
+    this._inertWas = /* @__PURE__ */ new Map();
+    this._deferred = false;
+    this._said = [];
+    this._layout = emptyLayout();
+    this._catalog = WIDGETS;
+    this._explicit = false;
+    this._removed = /* @__PURE__ */ new Map();
+    this._declared = /* @__PURE__ */ new WeakMap();
+    this._written = /* @__PURE__ */ new WeakMap();
+    this._itemOf = /* @__PURE__ */ new WeakMap();
+    this._columnsSeen = false;
+    this._watching = /* @__PURE__ */ new Set();
+    this._watchedTags = /* @__PURE__ */ new Set();
+    this._elementSpecs = { get: (id) => elementSpec(this._tiles.get(id)) };
+    this._setCatalog(WIDGETS);
+    this._columns = 0;
+    this._m = null;
+    this._order = [];
+    this._tiles = /* @__PURE__ */ new Map();
+    this._chromes = /* @__PURE__ */ new Map();
+    this._boxes = /* @__PURE__ */ new Map();
+    this._placements = /* @__PURE__ */ new Map();
+    this._wiggles = /* @__PURE__ */ new Map();
+    this._gesture = null;
+    this._rendered = false;
+    this._editing = false;
+    this._suppressClick = false;
+    this._schedule = null;
+    this._scheduled = null;
+    this._override = null;
+    this._profileTimer = 0;
+    this._clock = () => Date.now();
+    this._onVisibility = () => {
+      if (document.visibilityState === "visible") this._reschedule(true);
+    };
+    this._motionQuery = typeof matchMedia === "function" ? matchMedia("(prefers-reduced-motion: reduce)") : null;
+    this._onPointerDown = this._onPointerDown.bind(this);
+    this._onPointerMove = this._onPointerMove.bind(this);
+    this._onPointerUp = this._onPointerUp.bind(this);
+    this._onPointerCancel = this._onPointerCancel.bind(this);
+    this._onKeyDown = this._onKeyDown.bind(this);
+    this._onDocKeyDown = this._onDocKeyDown.bind(this);
+    this._onDocPointerDown = this._onDocPointerDown.bind(this);
+    this._onMenuPointerDown = this._onMenuPointerDown.bind(this);
+    this._frame = this._frame.bind(this);
+    this.addEventListener("pointerdown", this._onPointerDown);
+    this.addEventListener("keydown", this._onKeyDown);
+    this.addEventListener("keyup", (e) => {
+      if (this._editing && (e.key === " " || e.key === "Spacebar") && this._handleOf(e)) e.preventDefault();
+    });
+    this.addEventListener("touchmove", (e) => {
+      if (this._gesture && (this._gesture.kind === "drag" || this._gesture.kind === "resize")) e.preventDefault();
+    }, { passive: false });
+    this.addEventListener("contextmenu", (e) => {
+      if (this._gesture) e.preventDefault();
+    });
+    this.addEventListener("click", (e) => {
+      if (this._suppressClick) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    }, true);
+    root.addEventListener("click", (e) => {
+      const target = e.target.closest ? e.target : null;
+      if (!target) return;
+      const button = target.closest(".remove");
+      const handle = target.closest(".handle");
+      const resize = target.closest(".resize");
+      if (button) this._remove(button.parentElement.dataset.id);
+      else if (handle) this._tap(handle.parentElement.dataset.id);
+      else if (resize) this._resizeClick(resize.parentElement.dataset.id);
+      else if (target === this._board) this._tap(null);
+      else if (target.closest(".undo")) this._undoFromToast();
+      else if (target.closest(".edit-btn")) {
+        if (this.locked) return;
+        this._editOrigin = this._editBtn;
+        this.editing = true;
+      } else if (target.closest(".done")) this.editing = false;
+      else if (target.closest(".add")) this._toggleMenu(target.closest(".pill") ? "pill" : "empty");
+      else if (target.closest(".mi")) this._restoreFromMenu(target.closest(".mi").dataset.id);
+    });
+    root.addEventListener("keydown", (e) => {
+      if (!this._menuOwner) return;
+      if (e.key === "Escape") {
+        e.preventDefault();
+        this._closeMenu(true);
+      } else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        const items = [...this._addBack[this._menuOwner].menu.querySelectorAll(".mi")];
+        const at = items.indexOf(root.activeElement);
+        if (at < 0 && root.activeElement !== this._addBack[this._menuOwner].add) return;
+        e.preventDefault();
+        const next = at < 0 ? e.key === "ArrowDown" ? 0 : items.length - 1 : (at + (e.key === "ArrowDown" ? 1 : -1) + items.length) % items.length;
+        if (items[next]) items[next].focus();
+      }
+    });
+    const toastHold = (key, on) => () => {
+      const t = this._toastState;
+      if (!t) return;
+      t[key] = on;
+      this._toastTimer();
+    };
+    this._toast.addEventListener("pointerenter", toastHold("hover", true));
+    this._toast.addEventListener("pointerleave", toastHold("hover", false));
+    this._toast.addEventListener("focusin", toastHold("focus", true));
+    this._toast.addEventListener("focusout", toastHold("focus", false));
+  }
+  // ── Public API ─────────────────────────────────────────────────────────
+  get layout() {
+    return this._layout;
+  }
+  /** A Layout or an item array. Setting it ends implicit mode for good. */
+  set layout(value) {
+    this._explicit = true;
+    this._history.clear();
+    this._hideToast(false);
+    this._apply(value);
+  }
+  get catalog() {
+    return this._catalog;
+  }
+  set catalog(value) {
+    this._setCatalog(value || WIDGETS);
+    this._apply(this._layout);
+  }
+  _setCatalog(catalog) {
+    this._catalog = catalog;
+    this._resolve = specResolver(this._elementSpecs, catalog, WIDGETS);
+    this._typeSpec = specResolver(NO_SPECS, catalog, WIDGETS);
+  }
+  /** Read a layout from the host and show it. Issues are reported only here, never for the grid's own edits. */
+  _apply(value) {
+    this._matchChildren(false);
+    const columns = this._columns;
+    const device = columns ? columns === 2 ? "phone" : "desktop" : void 0;
+    const { layout, issues } = readLayout(value, { catalog: this._resolve, unknown: "keep", device });
+    if (issues.length) this._emit("ts-layout-issues", { issues });
+    this._cancelGesture();
+    this._layout = layout;
+    this._sync(this._rendered);
+  }
+  /** The profile shown: the `profile` attribute, else an override, else the schedule, else 'market'. */
+  get profile() {
+    return this.getAttribute("profile") || this._override && this._override.profile || this._scheduled || DEFAULT_PROFILE;
+  }
+  set profile(value) {
+    if (value) this.setAttribute("profile", value);
+    else this.removeAttribute("profile");
+  }
+  get editing() {
+    return this.hasAttribute("editing");
+  }
+  set editing(value) {
+    this.toggleAttribute("editing", !!value);
+  }
+  /** Read-only dashboard: no long press, no edit mode, no chromes. */
+  get locked() {
+    return this.hasAttribute("locked");
+  }
+  set locked(value) {
+    this.toggleAttribute("locked", !!value);
+  }
+  get columns() {
+    return this._columns;
+  }
+  /** Children whose item id isn't in the active profile, which includes tiles the user removed. */
+  get hiddenItems() {
+    const shown = new Set(this._profileItems().map((item) => item.id));
+    const seen = /* @__PURE__ */ new Set();
+    const list = [];
+    for (const el of this.children) {
+      if (!isTile(el)) continue;
+      const id = el.getAttribute("item");
+      if (!id || shown.has(id) || seen.has(id)) continue;
+      seen.add(id);
+      const type = this._typeFor(el.localName).type;
+      list.push({ id, type, label: this._labelFor(el, this._resolve({ id, type })) });
+    }
+    return list;
+  }
+  /**
+   * Put the active profile back the way it was before the last edit. A host
+   * can call this even while locked: the lock is for the user's hands.
+   */
+  undo() {
+    const profile = this.profile;
+    const before = this._profileItems();
+    const snapshot = this._history.undo(profile);
+    if (!snapshot) return false;
+    const items = hasOwn(snapshot.profiles, profile) && Array.isArray(snapshot.profiles[profile]) ? snapshot.profiles[profile] : [];
+    this._cancelGesture();
+    this._hideToast(false);
+    const now = new Set(items.map((item) => item.id));
+    const removed = this._removedFor(profile);
+    for (const item of before) if (!now.has(item.id)) removed.add(item.id);
+    for (const id of now) removed.delete(id);
+    const previous = this._layout;
+    this._layout = withProfile(this._layout, profile, items);
+    this._sync(true);
+    this._emit("ts-layout-change", { layout: this._layout, items: this._profileItems(), previous, profile, reason: "undo", id: "" });
+    return true;
+  }
+  /** Add a hidden child's item back, at the end of the profile; false when no hidden child has that id. */
+  restore(id) {
+    const hidden = this.hiddenItems.find((h) => h.id === id);
+    if (!hidden) return false;
+    const el = [...this.children].find((c) => isTile(c) && c.getAttribute("item") === id);
+    const spec = this._resolve({ id, type: hidden.type });
+    const sizes = spec && Array.isArray(spec.sizes) && spec.sizes.length ? spec.sizes : null;
+    const declared = this._declared.get(el) || el.getAttribute("size");
+    const size = sizes ? sizes.includes(declared) ? declared : sizes[0] : declared || "S";
+    const item = id === hidden.type ? { id, size } : { id, type: hidden.type, size };
+    const profile = this.profile;
+    const previous = this._layout;
+    const list = this._profileItems();
+    this._history.push(profile, previous);
+    this._removedFor(profile).delete(id);
+    this._layout = withProfile(this._layout, profile, addItem(list, item, this._resolve));
+    this._hideToast(false);
+    this._sync(true);
+    const items = this._profileItems();
+    const index = items.findIndex((it) => it.id === id);
+    this._emit("ts-layout-change", { layout: this._layout, items, previous, profile, reason: "add", id, index, item: items[index] });
+    return true;
+  }
+  /** { calendar, market: { sessions, leadMinutes?, lagMinutes? } }; switches profiles on time. */
+  get schedule() {
+    return this._schedule;
+  }
+  set schedule(value) {
+    const before = this.profile;
+    this._schedule = value || null;
+    if (!value) this._override = null;
+    this._reschedule(false);
+    this._profileChanged(before, "schedule", true);
+  }
+  /** What the grid takes the time to be. Tests and demos can replace it. */
+  get clock() {
+    return this._clock;
+  }
+  set clock(fn) {
+    this._clock = typeof fn === "function" ? fn : () => Date.now();
+    this._reschedule(true, "schedule", true);
+  }
+  /**
+   * Show `profile` until the schedule next changes, then go back to it: a
+   * manual switch the user makes from the dashboard. With no schedule it lasts
+   * until cleared with override(null). The `profile` attribute, if set, still wins.
+   */
+  override(profile) {
+    if (!profile) {
+      const before2 = this.profile;
+      this._override = null;
+      this._reschedule(false);
+      this._profileChanged(before2, "override-ended");
+      return;
+    }
+    const now = this._clock();
+    const until = this._schedule ? nextProfileChange(this._schedule.calendar, this._schedule, now) : null;
+    const before = this.profile;
+    this._override = { profile, until: until === null ? Infinity : until };
+    this._reschedule(false);
+    this._profileChanged(before, "override");
+  }
+  // ── Lifecycle ──────────────────────────────────────────────────────────
+  connectedCallback() {
+    this._resizeObserver = new ResizeObserver(() => {
+      cancelAnimationFrame(this._measureFrame);
+      this._measureFrame = requestAnimationFrame(() => this._measure(false));
+    });
+    this._resizeObserver.observe(this);
+    this._mutationObserver = new MutationObserver((records) => {
+      if (!records.some((r) => this._concerns(r))) return;
+      this._cancelGesture();
+      this._sync(true);
+    });
+    this._mutationObserver.observe(this, { childList: true, subtree: true, attributeFilter: ["item", "size"] });
+    if (!this._explicit) this._reconcile();
+    this._measure(true);
+    this._syncControls();
+    if (this._editing) this._startEditing();
+    document.addEventListener("visibilitychange", this._onVisibility);
+    this._reschedule(true, "schedule", true);
+  }
+  disconnectedCallback() {
+    this._resizeObserver.disconnect();
+    cancelAnimationFrame(this._measureFrame);
+    this._mutationObserver.disconnect();
+    this._cancelGesture();
+    this._stopEditing();
+    this._hideToast(false);
+    document.removeEventListener("visibilitychange", this._onVisibility);
+    clearTimeout(this._profileTimer);
+    for (const timer of this._watching) clearTimeout(timer);
+    this._watching.clear();
+    this._watchedTags.clear();
+    if (this._orphanWatch) cancelAnimationFrame(this._orphanWatch);
+    this._orphanWatch = 0;
+  }
+  /** Whether a mutation is news: our own child list, or a change the grid didn't make itself. */
+  _concerns(r) {
+    if (r.type === "childList") return r.target === this;
+    const el = r.target;
+    if (el.parentElement !== this) return false;
+    if (r.attributeName === "size") return !this._explicit && el.getAttribute("size") !== this._written.get(el);
+    return el.getAttribute("item") !== this._itemOf.get(el);
+  }
+  attributeChangedCallback(name, old, value) {
+    if (name === "locked") {
+      if (this.locked) {
+        this.editing = false;
+        this._cancelGesture();
+        this._hideToast(false);
+      }
+      this._syncControls();
+    } else if (name === "edit-controls") {
+      this._syncControls();
+    } else if (name === "editing") {
+      const on = this.hasAttribute("editing");
+      if (on === this._editing) return;
+      if (on && this.locked) {
+        warnOnce("grid-locked-editing", TEXT.lockedWarning);
+        this.removeAttribute("editing");
+        return;
+      }
+      this._editing = on;
+      if (on) this._startEditing();
+      else this._stopEditing();
+      this._emit("ts-edit-change", { editing: on });
+    } else if (name === "profile") {
+      this._cancelGesture();
+      this._sync(false);
+      if (this._rendered && old !== value) this._announce(TEXT.profile(this.profile));
+    }
+  }
+  // ── Profiles on a schedule ─────────────────────────────────────────────
+  /** Work out the scheduled profile now and arm a timer for the next change. */
+  _reschedule(emit, reason = "schedule", quiet = false) {
+    clearTimeout(this._profileTimer);
+    const before = this.profile;
+    const s = this._schedule;
+    if (!s || !this.isConnected) {
+      this._scheduled = null;
+      this._deferred = false;
+    } else if ((this._editing || this._gesture) && this._scheduled !== null) {
+      this._deferred = true;
+      return;
+    } else {
+      this._deferred = false;
+      const now = this._clock();
+      if (this._override && now >= this._override.until) {
+        this._override = null;
+        reason = "override-ended";
+      }
+      this._scheduled = activeProfile(s.calendar, s, now);
+      const next = nextProfileChange(s.calendar, s, now);
+      const until = this._override ? Math.min(this._override.until, next === null ? Infinity : next) : next;
+      const wait = until === null || until === Infinity ? MAX_WAIT : Math.min(MAX_WAIT, Math.max(0, until - now));
+      this._profileTimer = setTimeout(() => this._reschedule(true), wait);
+    }
+    if (emit) this._profileChanged(before, reason, quiet);
+  }
+  _profileChanged(before, reason, quiet = false) {
+    const profile = this.profile;
+    if (profile === before) return;
+    this._cancelGesture();
+    this._sync(false);
+    if (!quiet) this._announce(TEXT.profile(profile));
+    this._emit("ts-profile-change", { profile, reason });
+  }
+  /** Apply a scheduled change that fell due while the user was editing or dragging. */
+  _applyDeferred() {
+    if (this._deferred && !this._editing && !this._gesture && this.isConnected) this._reschedule(true);
+  }
+  // ── Measuring and rendering ────────────────────────────────────────────
+  _measure(force) {
+    if (!this.isConnected) return;
+    const width = this.clientWidth;
+    if (!force && width === this._width) return;
+    this._width = width;
+    const columns = columnsFor(width);
+    const changed = columns !== this._columns;
+    if (changed && this._gesture) this._cancelGesture();
+    const style = getComputedStyle(this);
+    const compact = columns === 2;
+    const row = px(style.getPropertyValue(compact ? "--ts-row-compact" : "--ts-row"), 0) || px(style.getPropertyValue("--ts-row"), 150);
+    const gap = px(style.getPropertyValue(compact ? "--ts-gap-compact" : "--ts-gap"), compact ? 10 : 16);
+    this._columns = columns;
+    this._m = metrics(width, columns, row, gap);
+    if (force || changed || this._rendered) this._sync(false, !force);
+    const initial = !this._columnsSeen;
+    this._columnsSeen = true;
+    if (initial || changed) this._emit("ts-columns-change", { columns, device: columns === 2 ? "phone" : "desktop", initial });
+  }
+  _profileItems() {
+    const profiles = this._layout.profiles;
+    const name = this.profile;
+    return hasOwn(profiles, name) && Array.isArray(profiles[name]) ? profiles[name] : [];
+  }
+  _removedFor(profile) {
+    let set = this._removed.get(profile);
+    if (!set) this._removed.set(profile, set = /* @__PURE__ */ new Set());
+    return set;
+  }
+  /**
+   * Implicit mode: bring the active profile in line with the children. The
+   * first pass seeds it; later ones keep the grid's list as the truth, so a
+   * moved or resized tile stays put when a framework re-renders.
+   */
+  _reconcile() {
+    const kids = [...this.children].filter(isTile);
+    const profile = this.profile;
+    const prev = this._profileItems();
+    const removed = this._removedFor(profile);
+    const descriptors = kids.map((el) => {
+      if (!this._declared.has(el)) this._declared.set(el, el.getAttribute("size"));
+      return {
+        tag: el.localName,
+        item: el.getAttribute("item") || void 0,
+        declaredSize: this._declared.get(el) || void 0,
+        spec: elementSpec(el)
+      };
+    });
+    const current = itemsFromChildren(descriptors, (tag) => this._typeFor(tag), removed);
+    kids.forEach((el, i) => {
+      if (el.getAttribute("item") !== current[i].id) el.setAttribute("item", current[i].id);
+    });
+    this._warnGenerated(kids, descriptors, current);
+    this._matchChildren(false);
+    let items = reconcile(prev, current, removed);
+    const resized = hostResizes(kids.map((el, i) => ({ id: current[i].id, size: el.getAttribute("size"), written: this._written.get(el) })));
+    for (const [id, size] of resized) items = resizeItem(items, id, size, this._resolve);
+    kids.forEach((el) => {
+      if (resized.has(el.getAttribute("item"))) this._written.set(el, el.getAttribute("size"));
+    });
+    if (items.length !== prev.length || items.some((item, i) => item !== prev[i])) {
+      this._layout = withProfile(this._layout, profile, items);
+    }
+  }
+  /** The type of a child tag and the spec the catalogs give it. */
+  _typeFor(tag) {
+    var _a, _b;
+    const type = (_b = (_a = typeForTag(this._catalog, tag)) != null ? _a : typeForTag(WIDGETS, tag)) != null ? _b : tag;
+    return { type, spec: this._typeSpec({ id: type }) };
+  }
+  /** Match children to layout items, hide the rest, and lay out. */
+  _sync(animate, keepTiles) {
+    if (!this.isConnected) return;
+    if (!keepTiles && !this._explicit) this._reconcile();
+    if (!this._m) return;
+    const before = new Set(this._tiles.keys());
+    if (!keepTiles) this._matchChildren(true);
+    const items = this._profileItems();
+    this._order = items.filter((item) => this._tiles.has(item.id));
+    const shown = new Set(this._order.map((item) => item.id));
+    for (const [id, el] of this._tiles) if (!shown.has(id)) el.style.display = "none";
+    for (const id of this._chromes.keys()) if (!shown.has(id)) this._dropChrome(id);
+    this._render(animate);
+    if (animate && this._motion() && this._wasShown && this._wasShown.size) {
+      for (const id of shown) {
+        if (before.has(id) && this._wasShown.has(id)) continue;
+        this._tiles.get(id).animate([{ opacity: 0, scale: 0.92 }, { opacity: 1, scale: 1 }], { duration: 220, easing: "cubic-bezier(.2,.8,.2,1)" });
+      }
+    }
+    this._wasShown = shown;
+    this._rendered = true;
+    this._syncControls();
+    if (!keepTiles) this._watchOrphans();
+  }
+  /** Match children to items by their item attribute. `hide` also hides the ones that match nothing. */
+  _matchChildren(hide) {
+    this._tiles.clear();
+    for (const el of this.children) {
+      if (!isTile(el)) continue;
+      const id = el.getAttribute("item");
+      this._itemOf.set(el, id);
+      if (id && !this._tiles.has(id)) this._tiles.set(id, el);
+      else if (hide) {
+        el.style.display = "none";
+        if (!id && this._explicit) warnOnce(`grid-noitem:${el.localName}`, `<ts-grid> child <${el.localName}> has no item attribute, so no layout item can place it.`);
+      }
+      if (hide) this._watchDefined(el);
+    }
+  }
+  /** DEV: a dashed tag that is still undefined after a while is usually a missing import. */
+  _watchDefined(el) {
+    const tag = el.localName;
+    if (!tag.includes("-") || typeof customElements === "undefined" || customElements.get(tag) || this._watchedTags.has(tag)) return;
+    this._watchedTags.add(tag);
+    const timer = setTimeout(() => {
+      this._watching.delete(timer);
+      this._watchedTags.delete(tag);
+      if (!customElements.get(tag)) warnOnce(`grid-undefined:${tag}`, `<ts-grid> child <${tag}> is still undefined after 2 s. Did you import 'tickslate/elements'?`);
+    }, UNDEFINED_TAG_MS);
+    this._watching.add(timer);
+  }
+  /** DEV: a layout item whose child hasn't appeared after two frames is kept but not shown. */
+  _watchOrphans() {
+    if (!this._explicit || this._orphanWatch || typeof requestAnimationFrame !== "function") return;
+    let frames = 2;
+    const step = () => {
+      if (--frames > 0) {
+        this._orphanWatch = requestAnimationFrame(step);
+        return;
+      }
+      this._orphanWatch = 0;
+      for (const item of this._profileItems()) {
+        if (!this._tiles.has(item.id)) warnOnce(`grid-orphan:${item.id}`, `<ts-grid> layout item "${item.id}" has no child with item="${item.id}"; it is kept in the layout but not shown.`);
+      }
+    };
+    this._orphanWatch = requestAnimationFrame(step);
+  }
+  /** DEV: generated ids for a repeated type are fragile across reorders. */
+  _warnGenerated(kids, descriptors, current) {
+    const byTag = /* @__PURE__ */ new Map();
+    kids.forEach((el, i) => {
+      const entry = byTag.get(el.localName) || { instances: 0, generated: [] };
+      entry.instances++;
+      if (!descriptors[i].item || descriptors[i].item !== current[i].id) entry.generated.push(current[i].id);
+      byTag.set(el.localName, entry);
+    });
+    for (const [tag, { instances, generated }] of byTag) {
+      if (instances >= 2 && generated.length) {
+        warnOnce(`grid-generated:${tag}`, `<ts-grid> generated ids ${generated.join(", ")} for repeated <${tag}> children. Give each an item attribute so saved layouts survive reordering.`);
+      }
+    }
+  }
+  _render(animate, skipId) {
+    const m = this._m;
+    if (!m) return;
+    animate = animate && this._motion();
+    const { placements, rows } = place(this._order, this._columns, this._resolve);
+    this._placements = new Map(placements.map((p) => [p.id, p]));
+    for (const p of placements) {
+      const box = boxOf(p, m);
+      const el = this._tiles.get(p.id);
+      const slide = animate && this._boxes.has(p.id) && el.style.display !== "none";
+      this._boxes.set(p.id, box);
+      if (el.getAttribute("size") !== p.variant) el.setAttribute("size", p.variant);
+      this._written.set(el, p.variant);
+      const chrome = this._chrome(p.id);
+      if (p.id === skipId) continue;
+      setBox(el, box, slide);
+      setBox(chrome, box, slide);
+      const held = this._gesture && this._gesture.id === p.id;
+      if (this._editing && !held && !this._wiggles.has(p.id)) this._wiggle(p.id);
+      if (this._editing) this._makeInert(el);
+    }
+    this._orderChromes(placements);
+    this._board.style.transition = animate ? "" : "none";
+    this._board.style.height = `${boardHeight(rows || 1, m)}px`;
+  }
+  _chrome(id) {
+    let chrome = this._chromes.get(id);
+    if (!chrome) {
+      chrome = document.createElement("div");
+      chrome.className = "chrome";
+      chrome.dataset.id = id;
+      chrome.innerHTML = '<button class="handle" type="button" aria-describedby="hint" aria-pressed="false"></button><button class="remove" type="button" tabindex="-1"><span aria-hidden="true">−</span></button><button class="resize" type="button" tabindex="-1"></button>';
+      this._chromeLayer.appendChild(chrome);
+      this._chromes.set(id, chrome);
+    }
+    const label = this._label(id);
+    const item = this._item(id);
+    const size = item ? item.size : "";
+    const handle = chrome.querySelector(".handle");
+    setAttr(handle, "aria-label", TEXT.handle(label, size, this._position(id), this._order.length));
+    setAttr(chrome.querySelector(".remove"), "aria-label", TEXT.removeLabel(label));
+    setAttr(chrome.querySelector(".resize"), "aria-label", TEXT.resizeLabel(label, size));
+    handle.tabIndex = this._editing ? 0 : -1;
+    if (this._editing) chrome.removeAttribute("aria-hidden");
+    else chrome.setAttribute("aria-hidden", "true");
+    const spec = this._spec(id);
+    chrome.classList.toggle("fixed", !spec || spec.sizes.length < 2);
+    return chrome;
+  }
+  /**
+   * Keep the chromes in the DOM in placement order, so Tab follows what the
+   * eye sees. moveBefore keeps focus and running animations; without it a
+   * moved node loses both, so the focused handle is refocused and the wiggle restarted.
+   */
+  _orderChromes(placements) {
+    const layer = this._chromeLayer;
+    const want = [...placements].sort((a, b) => a.row - b.row || a.col - b.col).map((p) => this._chromes.get(p.id));
+    const active = this.shadowRoot.activeElement;
+    const moved = [];
+    for (let i = 0; i < want.length; i++) {
+      const at = layer.children[i];
+      if (at === want[i]) continue;
+      if (typeof layer.moveBefore === "function") layer.moveBefore(want[i], at || null);
+      else layer.insertBefore(want[i], at || null);
+      moved.push(want[i]);
+    }
+    if (!moved.length || typeof layer.moveBefore === "function") return;
+    if (active && active.isConnected && this.shadowRoot.activeElement !== active) active.focus({ preventScroll: true });
+    if (this._editing) {
+      for (const chrome of moved) if (!(this._gesture && this._gesture.id === chrome.dataset.id)) this._wiggle(chrome.dataset.id);
+    }
+  }
+  /** Tiles are inert while editing, so a widget's own buttons and links can't be reached; the host's own value comes back after. */
+  _makeInert(el) {
+    if (this._inertWas.has(el)) return;
+    this._inertWas.set(el, el.hasAttribute("inert"));
+    el.setAttribute("inert", "");
+  }
+  _restoreInert() {
+    for (const [el, was] of this._inertWas) if (!was) el.removeAttribute("inert");
+    this._inertWas.clear();
+  }
+  _dropChrome(id) {
+    this._unwiggle(id);
+    const chrome = this._chromes.get(id);
+    if (chrome) chrome.remove();
+    this._chromes.delete(id);
+  }
+  _item(id) {
+    return this._order.find((item) => item.id === id);
+  }
+  _spec(id) {
+    const item = this._item(id);
+    return item ? this._resolve(item) : null;
+  }
+  _label(id) {
+    return this._labelFor(this._tiles.get(id), this._spec(id), id);
+  }
+  _labelFor(el, spec, id = el && el.getAttribute("item")) {
+    return el && (el.getAttribute("label") || el.getAttribute("aria-label")) || spec && spec.label || id;
+  }
+  _motion() {
+    return !(this._motionQuery && this._motionQuery.matches);
+  }
+  // ── Edit mode ──────────────────────────────────────────────────────────
+  _startEditing() {
+    if (!this.isConnected) return;
+    const inside = document.activeElement && document.activeElement !== this && this.contains(document.activeElement) ? document.activeElement : null;
+    const focusId = inside && [...this._tiles].find(([, el]) => el.contains(inside));
+    for (const el of this._tiles.values()) this._makeInert(el);
+    for (const [id, chrome] of this._chromes) {
+      chrome.querySelector(".handle").tabIndex = 0;
+      chrome.removeAttribute("aria-hidden");
+      this._wiggle(id);
+    }
+    if (focusId && this._chromes.has(focusId[0])) this._chromes.get(focusId[0]).querySelector(".handle").focus({ preventScroll: true });
+    document.addEventListener("keydown", this._onDocKeyDown);
+    document.addEventListener("pointerdown", this._onDocPointerDown, true);
+    this._syncControls();
+    this._announce(TEXT.editStart(this._order.length));
+  }
+  _stopEditing() {
+    if (this._gesture) this._cancelGesture();
+    this._restoreInert();
+    this._returnFocus();
+    this._closeMenu(false);
+    for (const [id, chrome] of this._chromes) {
+      chrome.querySelector(".handle").tabIndex = -1;
+      chrome.setAttribute("aria-hidden", "true");
+      this._unwiggle(id);
+    }
+    document.removeEventListener("keydown", this._onDocKeyDown);
+    document.removeEventListener("pointerdown", this._onDocPointerDown, true);
+    this._editOrigin = null;
+    this._syncControls();
+    if (this.isConnected) this._announce(TEXT.editDone);
+    this._applyDeferred();
+  }
+  /** A press outside the grid ends editing; one in the pill or its list is inside, because the path names the grid. */
+  _onDocPointerDown(e) {
+    if (this._editing && isOutside(e.composedPath(), this)) this.editing = false;
+  }
+  /** Put focus back where editing began, but only if it is inside the grid and about to be lost. */
+  _returnFocus() {
+    if (!this.isConnected) return;
+    const active = this.shadowRoot.activeElement || (document.activeElement !== this && this.contains(document.activeElement) ? document.activeElement : null);
+    if (!active) return;
+    const origin = this._editOrigin;
+    let candidate = null;
+    if (origin) {
+      const button = origin === this._editBtn;
+      if (button) origin.tabIndex = 0;
+      candidate = {
+        target: origin,
+        connected: origin.isConnected,
+        // The button is hidden by the opt-out or the lock; a tile is only focusable if it has a tab index.
+        hidden: button ? !this._controlsOn() : origin.hidden || origin.tabIndex < 0 || origin.style.display === "none",
+        disabled: !!origin.disabled
+      };
+    }
+    this._focus(pickFocusTarget([candidate]) || this);
+  }
+  /** The grid itself is the last resort, so it gets a tab index and a name when the host gave none. */
+  _focus(target) {
+    if (target === this) {
+      if (!this.hasAttribute("tabindex")) this.setAttribute("tabindex", "-1");
+      if (!this.hasAttribute("aria-label") && !this.hasAttribute("aria-labelledby")) this.setAttribute("aria-label", TEXT.dashboard);
+      if (!this.hasAttribute("role")) this.setAttribute("role", "group");
+    }
+    target.focus();
+  }
+  _controlsOn() {
+    return !this.locked && this.getAttribute("edit-controls") !== "off";
+  }
+  // ── Edit controls: the Edit layout button, the pill, Add back, the empty board ──
+  _syncControls() {
+    const on = this._controlsOn();
+    const editing = this._editing;
+    const pillOn = on && editing;
+    this._editBtn.hidden = !on;
+    this._editBtn.tabIndex = editing ? -1 : 0;
+    this._pill.hidden = !pillOn;
+    this._dock.classList.toggle("has-pill", pillOn);
+    const empty = this._rendered && !!this._m && this._order.length === 0;
+    this._emptyPanel.hidden = !empty;
+    const hidden = this.hiddenItems;
+    for (const [owner, show] of [["pill", pillOn && hidden.length > 0], ["empty", empty && on && hidden.length > 0]]) {
+      const c = this._addBack[owner];
+      c.add.hidden = !show;
+      if (show) c.add.querySelector(".t").textContent = TEXT.addBack(hidden.length);
+      if (!show && this._menuOwner === owner) this._closeMenu(false);
+    }
+    const sig = hidden.map((h) => `${h.id}
+${h.label}`).join("\n\n");
+    if (sig !== this._menuSig) {
+      this._menuSig = sig;
+      for (const { menu } of Object.values(this._addBack)) {
+        menu.textContent = "";
+        const heading = document.createElement("span");
+        heading.className = "menu-h";
+        heading.textContent = TEXT.hiddenHeading;
+        menu.appendChild(heading);
+        for (const h of hidden) {
+          const item = document.createElement("button");
+          item.type = "button";
+          item.className = "mi";
+          item.dataset.id = h.id;
+          item.setAttribute("aria-label", TEXT.addBackItem(h.label));
+          const name = document.createElement("span");
+          name.textContent = h.label;
+          const plus = document.createElement("span");
+          plus.className = "plus";
+          plus.setAttribute("aria-hidden", "true");
+          plus.textContent = "+";
+          item.append(name, plus);
+          menu.appendChild(item);
+        }
+      }
+    }
+  }
+  _toggleMenu(owner) {
+    if (this._menuOwner === owner) return this._closeMenu(true);
+    this._closeMenu(false);
+    const c = this._addBack[owner];
+    c.menu.hidden = false;
+    c.add.setAttribute("aria-expanded", "true");
+    this._menuOwner = owner;
+    document.addEventListener("pointerdown", this._onMenuPointerDown, true);
+    const first = c.menu.querySelector(".mi");
+    if (first) first.focus();
+  }
+  /** `refocus` hands focus back to the Add back button, for Escape and a second press on it. */
+  _closeMenu(refocus) {
+    const owner = this._menuOwner;
+    if (!owner) return;
+    const c = this._addBack[owner];
+    this._menuOwner = null;
+    document.removeEventListener("pointerdown", this._onMenuPointerDown, true);
+    c.menu.hidden = true;
+    c.add.setAttribute("aria-expanded", "false");
+    if (refocus && !c.add.hidden) c.add.focus();
+  }
+  _onMenuPointerDown(e) {
+    if (this._menuOwner && isOutside(e.composedPath(), this._addBack[this._menuOwner].wrap)) this._closeMenu(false);
+  }
+  _restoreFromMenu(id) {
+    const hidden = this.hiddenItems.find((h) => h.id === id);
+    this._closeMenu(false);
+    if (!hidden || !this.restore(id)) return;
+    this._announce(TEXT.addedBack(hidden.label));
+    const el = this._tiles.get(id);
+    const chrome = this._chromes.get(id);
+    this._focus(pickFocusTarget([
+      chrome && { target: chrome.querySelector(".handle"), connected: chrome.isConnected, hidden: !this._editing },
+      el && { target: el, connected: el.isConnected, hidden: el.tabIndex < 0 || el.style.display === "none" }
+    ]) || this);
+  }
+  /**
+   * A gentle rocking, run on the tile and its chrome with the same timing so
+   * they move as one. The angle shrinks for big tiles so every tile's
+   * corners travel about the same 2–3 px.
+   */
+  _wiggle(id) {
+    if (!this._motion() || !this._editing) return;
+    const el = this._tiles.get(id);
+    const chrome = this._chromes.get(id);
+    const box = this._boxes.get(id);
+    if (!el || !chrome || !box) return;
+    this._unwiggle(id);
+    const deg = Math.min(0.9, 2.4 / (Math.max(box.w, box.h) / 2) * (180 / Math.PI));
+    const index = this._order.findIndex((item) => item.id === id);
+    const options = { duration: 130, iterations: Infinity, direction: "alternate", easing: "ease-in-out", delay: -(index * 47 % 260) };
+    const frames = [{ rotate: `${-deg}deg` }, { rotate: `${deg}deg` }];
+    this._wiggles.set(id, [el.animate(frames, options), chrome.animate(frames, options)]);
+  }
+  _unwiggle(id) {
+    const running = this._wiggles.get(id);
+    if (running) for (const a of running) a.cancel();
+    this._wiggles.delete(id);
+  }
+  // ── Pointer gestures ───────────────────────────────────────────────────
+  _hit(path) {
+    const root = this.shadowRoot;
+    for (const node of path) {
+      if (node === this) break;
+      if (node.nodeType !== 1) continue;
+      if (node.getRootNode() === root) {
+        if (node.classList.contains("remove")) return { kind: "remove", id: node.parentElement.dataset.id };
+        if (node.classList.contains("resize")) return { kind: "resize", id: node.parentElement.dataset.id };
+        if (node.classList.contains("handle")) return { kind: "chrome", id: node.parentElement.dataset.id };
+        if (node === this._board) return { kind: "board" };
+      } else if (node.parentElement === this && node.hasAttribute("item")) {
+        const id = node.getAttribute("item");
+        return this._placements.has(id) ? { kind: "tile", id } : { kind: "none" };
+      }
+    }
+    return { kind: "none" };
+  }
+  _onPointerDown(e) {
+    if (this.locked) return;
+    if (this._gesture || !e.isPrimary || e.pointerType === "mouse" && e.button !== 0) return;
+    const hit = this._hit(e.composedPath());
+    const base = { pointerId: e.pointerId, pointerType: e.pointerType, startX: e.clientX, startY: e.clientY, x: e.clientX, y: e.clientY };
+    if (!this._editing) {
+      if (hit.kind !== "tile") return;
+      this._begin({ ...base, kind: "press", id: hit.id });
+      const g = this._gesture;
+      g.squeeze = setTimeout(() => {
+        if (this._motion()) g.squeezeAnim = this._tiles.get(g.id).animate([{ scale: 1 }, { scale: 0.97 }], { duration: LONG_PRESS_MS - 120, easing: "ease-out", fill: "forwards" });
+      }, 120);
+      g.timer = setTimeout(() => {
+        this._unsqueeze(g);
+        this._editOrigin = this._tiles.get(g.id);
+        this.editing = true;
+        this._lift(g);
+      }, LONG_PRESS_MS);
+    } else if (hit.kind === "chrome") {
+      this._begin({ ...base, kind: "pending", id: hit.id });
+      if (e.pointerType !== "mouse") {
+        const g = this._gesture;
+        g.timer = setTimeout(() => this._lift(g), TOUCH_HOLD_MS);
+      }
+    } else if (hit.kind === "resize") {
+      e.preventDefault();
+      this._begin({ ...base, kind: "resize", id: hit.id });
+      this._startResize(this._gesture);
+    } else if (hit.kind === "board") {
+      this._begin({ ...base, kind: "tap" });
+    }
+  }
+  _begin(g) {
+    this._gesture = g;
+    window.addEventListener("pointermove", this._onPointerMove);
+    window.addEventListener("pointerup", this._onPointerUp);
+    window.addEventListener("pointercancel", this._onPointerCancel);
+  }
+  _end() {
+    const g = this._gesture;
+    if (!g) return;
+    clearTimeout(g.timer);
+    clearTimeout(g.squeeze);
+    clearTimeout(g.settle);
+    cancelAnimationFrame(g.raf);
+    this._unsqueeze(g);
+    window.removeEventListener("pointermove", this._onPointerMove);
+    window.removeEventListener("pointerup", this._onPointerUp);
+    window.removeEventListener("pointercancel", this._onPointerCancel);
+    this.removeAttribute("dragging");
+    this._gesture = null;
+    if (this._deferred && !this._editing) Promise.resolve().then(() => this._applyDeferred());
+  }
+  _unsqueeze(g) {
+    clearTimeout(g.squeeze);
+    if (g.squeezeAnim) g.squeezeAnim.cancel();
+    g.squeezeAnim = null;
+  }
+  _onPointerMove(e) {
+    const g = this._gesture;
+    if (!g || e.pointerId !== g.pointerId) return;
+    g.x = e.clientX;
+    g.y = e.clientY;
+    const moved = Math.hypot(g.x - g.startX, g.y - g.startY);
+    if (g.kind === "press" || g.kind === "tap") {
+      if (moved > PRESS_SLOP) this._end();
+    } else if (g.kind === "pending") {
+      if (g.pointerType === "mouse") {
+        if (moved > MOUSE_DRAG_SLOP) this._lift(g);
+      } else if (moved > PRESS_SLOP) {
+        this._end();
+      }
+    } else if (g.kind === "resize") {
+      this._resizeMove(g);
+    }
+  }
+  _onPointerUp(e) {
+    const g = this._gesture;
+    if (!g || e.pointerId !== g.pointerId) return;
+    if (g.kind === "drag") this._drop(g);
+    else if (g.kind === "resize") this._endResize(g);
+    else if (g.kind === "tap") {
+      this._end();
+      this.editing = false;
+    } else this._end();
+  }
+  _onPointerCancel(e) {
+    const g = this._gesture;
+    if (g && e.pointerId === g.pointerId) this._cancelGesture();
+  }
+  // ── Dragging ───────────────────────────────────────────────────────────
+  _lift(g) {
+    if (this._gesture !== g) return;
+    clearTimeout(g.timer);
+    const el = this._tiles.get(g.id);
+    const chrome = this._chromes.get(g.id);
+    const box = this._boxes.get(g.id);
+    if (!el || !chrome || !box) return this._end();
+    const rect = this._board.getBoundingClientRect();
+    g.kind = "drag";
+    g.scroller = scrollParent(this);
+    g.scroll0 = scrollPos(g.scroller);
+    g.board0 = { left: rect.left, top: rect.top };
+    g.view = g.scroller ? g.scroller.getBoundingClientRect() : { top: 0, bottom: innerHeight };
+    g.offsetX = g.x - (rect.left + box.x);
+    g.offsetY = g.y - (rect.top + box.y);
+    g.from = this._order.slice();
+    g.pending = -1;
+    const item = this._item(g.id);
+    const spec = this._spec(g.id);
+    g.cols = footprint(item.size, this._columns, spec ? spec.sizes : null, spec ? spec.phoneRows : null).cols;
+    this.setAttribute("dragging", "");
+    if (g.pointerType !== "keyboard") {
+      try {
+        this.setPointerCapture(g.pointerId);
+      } catch {
+      }
+    }
+    if (g.pointerType !== "keyboard") this._suppressClick = true;
+    this._unwiggle(g.id);
+    liftStyle(el, chrome, true);
+    if (g.pointerType === "keyboard") {
+      chrome.querySelector(".handle").setAttribute("aria-pressed", "true");
+      chrome.classList.add("held");
+    }
+    this._showPlaceholder(box, false);
+    if (navigator.vibrate) navigator.vibrate(8);
+    if (g.pointerType !== "keyboard") g.raf = requestAnimationFrame(this._frame);
+  }
+  _frame() {
+    const g = this._gesture;
+    if (!g || g.kind !== "drag") return;
+    const now = performance.now();
+    const dt = Math.min(50, now - (g.lastFrame || now)) / 1e3;
+    g.lastFrame = now;
+    const step = MAX_SCROLL * dt;
+    if (g.y < g.view.top + EDGE) scrollBy(g.scroller, -step * Math.min(1, (g.view.top + EDGE - g.y) / EDGE));
+    else if (g.y > g.view.bottom - EDGE) scrollBy(g.scroller, step * Math.min(1, (g.y - (g.view.bottom - EDGE)) / EDGE));
+    const { x, y, target } = this._track(g);
+    const translate = `${x}px ${y}px`;
+    this._tiles.get(g.id).style.translate = translate;
+    this._chromes.get(g.id).style.translate = translate;
+    const current = this._order.findIndex((item) => item.id === g.id);
+    if (target === current) {
+      clearTimeout(g.settle);
+      g.pending = -1;
+    } else if (target !== g.pending) {
+      g.pending = target;
+      clearTimeout(g.settle);
+      g.settle = setTimeout(() => this._reorder(g, g.pending), SETTLE_MS);
+    }
+    g.raf = requestAnimationFrame(this._frame);
+  }
+  /** Where the lifted tile is, relative to the board, and the slot under it. */
+  _track(g) {
+    const m = this._m;
+    const scroll = scrollPos(g.scroller);
+    const x = g.x - g.offsetX - (g.board0.left - (scroll.x - g.scroll0.x));
+    const y = g.y - g.offsetY - (g.board0.top - (scroll.y - g.scroll0.y));
+    const target = dropIndex(this._order, g.id, cellAt(x, y, g.cols, m), this._columns, this._resolve, m.pitchX / m.pitchY);
+    return { x, y, target };
+  }
+  /** Take a new slot: the other tiles slide, the placeholder follows. */
+  _reorder(g, index) {
+    if (this._gesture !== g || index < 0) return;
+    g.pending = -1;
+    this._order = moveItem(this._order, g.id, index);
+    this._render(true, g.kind === "drag" ? g.id : void 0);
+    this._showPlaceholder(this._boxes.get(g.id), true);
+  }
+  _drop(g, placed) {
+    clearTimeout(g.settle);
+    if (g.pointerType !== "keyboard") {
+      const { target } = this._track(g);
+      if (target !== this._order.findIndex((item) => item.id === g.id)) this._reorder(g, target);
+    }
+    this._settle(g);
+    const moved = !sameOrder(g.from, this._order);
+    if (moved) this._commit("move", g.id);
+    const label = this._label(g.id);
+    const at = [this._position(g.id), this._order.length];
+    if (g.pointerType !== "keyboard") {
+      if (moved) this._announce(TEXT.moved(label, ...at));
+    } else if (placed && moved) {
+      this._announce(TEXT.droppedAt(label, ...at));
+    } else {
+      this._announce(TEXT.dropped(label));
+    }
+  }
+  /** Glide the lifted tile into its slot and put it back among the others. */
+  _settle(g) {
+    const el = this._tiles.get(g.id);
+    const chrome = this._chromes.get(g.id);
+    const box = this._boxes.get(g.id);
+    this._hidePlaceholder();
+    this._end();
+    setTimeout(() => {
+      this._suppressClick = false;
+    }, 0);
+    if (chrome) {
+      chrome.classList.remove("held");
+      chrome.querySelector(".handle").setAttribute("aria-pressed", "false");
+    }
+    if (!el || !chrome || !box) return;
+    const animate = this._motion();
+    setBox(el, box, animate, true);
+    setBox(chrome, box, animate, true);
+    liftStyle(el, chrome, false, animate);
+    const done = () => {
+      if (this._gesture && this._gesture.id === g.id) return;
+      el.style.zIndex = "";
+      chrome.style.zIndex = "";
+      chrome.classList.remove("lifted");
+      if (this._editing) this._wiggle(g.id);
+    };
+    if (animate) setTimeout(done, 240);
+    else done();
+  }
+  _cancelGesture() {
+    const g = this._gesture;
+    if (!g) return;
+    if (g.kind === "drag" || g.kind === "resize") {
+      clearTimeout(g.settle);
+      this._order = g.from;
+      this._render(true, g.id);
+      this._settle(g);
+      if (g.pointerType === "keyboard") this._announce(TEXT.cancelled(this._label(g.id)));
+    } else {
+      this._end();
+    }
+  }
+  _showPlaceholder(box, animate) {
+    const ph = this._placeholder;
+    setBox(ph, box, animate && this._motion());
+    ph.classList.add("on");
+  }
+  _hidePlaceholder() {
+    this._placeholder.classList.remove("on");
+  }
+  // ── Resizing ───────────────────────────────────────────────────────────
+  _startResize(g) {
+    const box = this._boxes.get(g.id);
+    const item = this._item(g.id);
+    if (!box || !item) return this._end();
+    g.box0 = box;
+    g.from = this._order.slice();
+    g.size0 = item.size;
+    g.moved = false;
+    this._unwiggle(g.id);
+    this._chromes.get(g.id).classList.add("lifted");
+    this._tiles.get(g.id).style.zIndex = "5";
+    this._chromes.get(g.id).style.zIndex = "6";
+    this._suppressClick = true;
+  }
+  _resizeMove(g) {
+    const dx = g.x - g.startX;
+    const dy = g.y - g.startY;
+    if (!g.moved && Math.hypot(dx, dy) < MOUSE_DRAG_SLOP) return;
+    if (!g.moved) {
+      g.moved = true;
+      this.setAttribute("dragging", "");
+    }
+    const spec = this._spec(g.id);
+    if (!spec) return;
+    const w = Math.max(this._m.colWidth, g.box0.w + dx);
+    const h = Math.max(this._m.rowHeight, g.box0.h + dy);
+    this._showPlaceholder({ x: g.box0.x, y: g.box0.y, w, h }, false);
+    const extent2 = extentOf(w, h, this._m);
+    const item = this._item(g.id);
+    const size = sizeForExtent(spec, extent2.cols, extent2.rows, this._columns, item.size);
+    if (size !== item.size) {
+      this._order = resizeItem(this._order, g.id, size, this._resolve);
+      this._render(true);
+    }
+  }
+  _endResize(g) {
+    const spec = this._spec(g.id);
+    if (!g.moved && spec) {
+      let next = stepSize(spec, g.size0, 1);
+      if (next === g.size0) next = stepSize(spec, g.size0, -1) === g.size0 ? g.size0 : smallest(spec);
+      this._order = resizeItem(this._order, g.id, next, this._resolve);
+      this._render(true);
+    }
+    this._hidePlaceholder();
+    this._end();
+    setTimeout(() => {
+      this._suppressClick = false;
+    }, 0);
+    const el = this._tiles.get(g.id);
+    const chrome = this._chromes.get(g.id);
+    setTimeout(() => {
+      if (el) el.style.zIndex = "";
+      if (chrome) {
+        chrome.style.zIndex = "";
+        chrome.classList.remove("lifted");
+      }
+      if (this._editing && this._placements.has(g.id)) this._wiggle(g.id);
+    }, this._motion() ? 240 : 0);
+    const size = this._item(g.id).size;
+    if (size !== g.size0) {
+      this._commit("resize", g.id);
+      this._announce(TEXT.resized(this._label(g.id), size));
+    }
+  }
+  // ── Removing ───────────────────────────────────────────────────────────
+  _remove(id) {
+    if (!this._editing || !this._placements.has(id) || this._gesture || this._removing.has(id)) return;
+    const now = Date.now();
+    if (now - this._removedAt < REMOVE_GUARD_MS) return;
+    this._removedAt = now;
+    const el = this._tiles.get(id);
+    const chrome = this._chromes.get(id);
+    const label = this._label(id);
+    const ids = [...this._placements.values()].sort((a, b) => a.row - b.row || a.col - b.col).map((p) => p.id);
+    const near = ids[ids.indexOf(id) + 1] || ids[ids.indexOf(id) - 1];
+    this._removing.add(id);
+    chrome.classList.add("removing");
+    const finish = () => {
+      if (!this._removing.delete(id)) return;
+      const hadFocus = chrome.contains(this.shadowRoot.activeElement);
+      this._order = removeItem(this._order, id);
+      el.style.display = "none";
+      this._dropChrome(id);
+      this._placements.delete(id);
+      this._render(true);
+      const profile = this.profile;
+      const previous = this._layout;
+      const list = this._profileItems();
+      const index = list.findIndex((item) => item.id === id);
+      this._history.push(profile, previous);
+      this._removedFor(profile).add(id);
+      this._layout = withProfile(this._layout, profile, removeItem(list, id));
+      this._emit("ts-layout-change", { layout: this._layout, items: this._profileItems(), previous, profile, reason: "remove", id, index, item: list[index] });
+      this._syncControls();
+      if (hadFocus) this._focusAfterRemove(near);
+      if (!this._showToast(TEXT.removed(label))) this._announce(TEXT.removed(label) + ".");
+    };
+    if (!this._motion()) return finish();
+    this._unwiggle(id);
+    const out = [{ opacity: 1, scale: 1 }, { opacity: 0, scale: 0.85 }];
+    const options = { duration: 180, easing: "ease-in", fill: "forwards" };
+    chrome.animate(out, options);
+    const done = () => {
+      finish();
+      for (const a of el.getAnimations()) a.cancel();
+    };
+    el.animate(out, options).finished.then(done, done);
+  }
+  /** Focus the removed tile's neighbour, else the pill's Done, else the grid, so it is never left on a node that is gone. */
+  _focusAfterRemove(near) {
+    const chrome = near && this._chromes.get(near);
+    const done = this._pill.querySelector(".done");
+    this._focus(pickFocusTarget([
+      chrome && { target: chrome.querySelector(".handle"), connected: chrome.isConnected, hidden: !this._editing },
+      { target: done, connected: done.isConnected, hidden: this._pill.hidden }
+    ]) || this);
+  }
+  // ── The undo toast ─────────────────────────────────────────────────────
+  /** Show the toast; false when the host turned it off, so the caller announces instead. */
+  _showToast(text) {
+    if (this.getAttribute("undo-toast") === "off") return false;
+    const toast = this._toast;
+    const wasOn = !!this._toastState;
+    if (this._toastState) clearTimeout(this._toastState.timer);
+    this._toastState = { remaining: TOAST_MS, started: 0, timer: 0, hover: false, focus: false };
+    this._toastText.textContent = text;
+    this._toastUndo.tabIndex = 0;
+    toast.classList.add("on");
+    if (!wasOn && this._motion() && toast.animate) toast.animate([{ translate: "0 12px", opacity: 0 }, { translate: "0 0", opacity: 1 }], { duration: 180, easing: "ease-out" });
+    this._toastTimer();
+    return true;
+  }
+  /** Start or pause the countdown: it runs only while neither hovered nor focused. */
+  _toastTimer() {
+    const t = this._toastState;
+    if (!t) return;
+    if (t.timer) {
+      clearTimeout(t.timer);
+      t.remaining = Math.max(0, t.remaining - (Date.now() - t.started));
+      t.timer = 0;
+    }
+    if (t.hover || t.focus) return;
+    t.started = Date.now();
+    t.timer = setTimeout(() => this._hideToast(true), t.remaining);
+  }
+  _hideToast(animate) {
+    const t = this._toastState;
+    if (!t) return;
+    clearTimeout(t.timer);
+    this._toastState = null;
+    const toast = this._toast;
+    const off = () => {
+      if (this._toastState) return;
+      toast.classList.remove("on");
+      this._toastText.textContent = "";
+      this._toastUndo.tabIndex = -1;
+    };
+    if (this.shadowRoot.activeElement === this._toastUndo) this._toastUndo.blur();
+    if (animate && this._motion() && toast.animate) toast.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 160, easing: "ease-in" }).finished.then(off, off);
+    else off();
+  }
+  _undoFromToast() {
+    const before = new Set(this._profileItems().map((item) => item.id));
+    if (!this.undo()) return this._hideToast(false);
+    const back = this._profileItems().find((item) => !before.has(item.id));
+    const chrome = back && this._chromes.get(back.id);
+    if (this._editing && chrome) chrome.querySelector(".handle").focus();
+  }
+  // ── Keyboard ───────────────────────────────────────────────────────────
+  _onDocKeyDown(e) {
+    if (e.defaultPrevented) return;
+    if ((e.ctrlKey || e.metaKey) && !e.shiftKey && !e.altKey && typeof e.key === "string" && e.key.toLowerCase() === "z") {
+      const origin = e.composedPath()[0];
+      if (origin && (origin.isContentEditable || /^(input|textarea|select)$/i.test(origin.localName || ""))) return;
+      if (!this._gesture && this.undo()) {
+        this._announce(TEXT.undone);
+        e.preventDefault();
+      }
+      return;
+    }
+    if (e.key !== "Escape") return;
+    if (this._gesture) this._cancelGesture();
+    else {
+      const active = document.activeElement;
+      if (active && active !== document.body && !this.contains(active)) return;
+      this.editing = false;
+    }
+    e.preventDefault();
+  }
+  /** The handle an event came from, if any. */
+  _handleOf(e) {
+    const el = e.composedPath()[0];
+    return el && el.classList && el.classList.contains("handle") ? el : null;
+  }
+  /** The tile picked up and not yet dropped, by key or by tap; both share it. */
+  _heldId() {
+    const g = this._gesture;
+    return g && g.kind === "drag" && g.pointerType === "keyboard" ? g.id : null;
+  }
+  _onKeyDown(e) {
+    if (!this._editing || e.ctrlKey || e.metaKey || e.altKey) return;
+    const handle = this._handleOf(e);
+    if (!handle) return;
+    const held = this._heldId();
+    if (this._gesture && !held) return;
+    const action = keyAction(e.key, handle.parentElement.dataset.id, { held });
+    if (!action) return;
+    e.preventDefault();
+    this._perform(action);
+  }
+  /** A handle was activated without dragging: by tap, click, or a screen reader's activate. Null is the empty board. */
+  _tap(id) {
+    if (!this._editing || this.locked) return;
+    const held = this._heldId();
+    if (this._gesture && !held) return;
+    const action = tapAction(id, { held });
+    if (action) this._perform(action);
+  }
+  /** Run what keyAction or tapAction decided. */
+  _perform(a) {
+    const g = this._gesture;
+    const id = a.id;
+    if (a.type === "pickUp") {
+      if (g || !this._placements.has(id)) return;
+      this._gesture = { kind: "pending", pointerType: "keyboard", id, x: 0, y: 0 };
+      this._lift(this._gesture);
+      if (this._gesture) this._announce(TEXT.pickedUp(this._label(id)));
+    } else if (a.type === "moveBy") {
+      if (g && this._heldId() === id) this._keyMove(g, a.dCol, a.dRow);
+    } else if (a.type === "placeAt") {
+      if (g && this._heldId() === id) this._placeAt(g, a.targetId);
+    } else if (a.type === "drop") {
+      if (g && this._heldId() === id) this._drop(g);
+    } else if (a.type === "cancel") {
+      if (g && this._heldId() === id) this._cancelGesture();
+    } else if (a.type === "resizeStep") {
+      if (!g) this._resizeStep(id, a.dir);
+    } else if (a.type === "remove") {
+      if (!g) this._remove(id);
+    }
+  }
+  /** Move the held tile to the target's slot and drop it there. */
+  _placeAt(g, targetId) {
+    const to = this._order.findIndex((item) => item.id === targetId);
+    if (to < 0) return;
+    if (to !== this._order.findIndex((item) => item.id === g.id)) {
+      this._order = moveItem(this._order, g.id, to);
+      this._render(true);
+    }
+    this._drop(g, true);
+    this._reveal(g.id);
+  }
+  /** The resize button's click: a tap on it steps to the next size, wrapping, like the pointer's tap. */
+  _resizeClick(id) {
+    if (!this._editing || this._gesture) return;
+    const spec = this._spec(id);
+    const item = this._item(id);
+    if (!spec || !item) return;
+    let next = stepSize(spec, item.size, 1);
+    if (next === item.size) next = stepSize(spec, item.size, -1) === item.size ? item.size : smallest(spec);
+    this._applyResize(id, next);
+  }
+  _resizeStep(id, dir) {
+    const spec = this._spec(id);
+    const item = this._item(id);
+    if (!spec || !item) return;
+    this._applyResize(id, stepSize(spec, item.size, dir));
+  }
+  _applyResize(id, size) {
+    const item = this._item(id);
+    if (!item || size === item.size) return;
+    this._order = resizeItem(this._order, id, size, this._resolve);
+    this._render(true);
+    this._commit("resize", id);
+    this._announce(TEXT.resized(this._label(id), size));
+    this._reveal(id);
+  }
+  /** Scroll the tile's handle into view once it has slid there, smoothly only when motion is welcome. */
+  _reveal(id) {
+    const show = () => {
+      const chrome = this._chromes.get(id);
+      const handle = chrome && chrome.querySelector(".handle");
+      if (handle && handle.isConnected && handle.scrollIntoView) handle.scrollIntoView({ block: "nearest", behavior: this._motion() ? "smooth" : "auto" });
+    };
+    if (this._motion()) setTimeout(show, 240);
+    else show();
+  }
+  /** Move a held tile one cell, going further if that cell can't hold it. */
+  _keyMove(g, dCol, dRow) {
+    const p = this._placements.get(g.id);
+    const current = this._order.findIndex((item) => item.id === g.id);
+    const limit = Math.max(this._columns, this._order.length * 2);
+    for (let step = 1; step <= limit; step++) {
+      const col = p.col + dCol * step;
+      const row = p.row + dRow * step;
+      if (col < 0 || row < 0 || col > this._columns - p.cols) break;
+      const target = dropIndex(this._order, g.id, { col, row }, this._columns, this._resolve);
+      if (target !== current) {
+        this._order = moveItem(this._order, g.id, target);
+        this._render(true);
+        this._showPlaceholder(this._boxes.get(g.id), true);
+        this._announce(TEXT.moved(this._label(g.id), this._position(g.id), this._order.length));
+        this._reveal(g.id);
+        return;
+      }
+    }
+    this._announce(TEXT.blocked);
+  }
+  // ── Output ─────────────────────────────────────────────────────────────
+  _commit(reason, id) {
+    const previous = this._layout;
+    this._history.push(this.profile, previous);
+    const items = mergeOrder(this._profileItems(), this._order);
+    this._layout = withProfile(this._layout, this.profile, items);
+    this._emit("ts-layout-change", { layout: this._layout, items, previous, profile: this.profile, reason, id });
+  }
+  _position(id) {
+    const sorted = [...this._placements.values()].sort((a, b) => a.row - b.row || a.col - b.col);
+    return sorted.findIndex((p) => p.id === id) + 1;
+  }
+  /**
+   * Speak `text` politely. The region is cleared first and filled on the next
+   * frame, because setting identical text twice in a row says nothing the
+   * second time. Texts queued in the same frame are read together, in order.
+   */
+  _announce(text) {
+    const status = this._status;
+    status.textContent = "";
+    this._said.push(text);
+    if (this._sayFrame) return;
+    const say = () => {
+      cancelAnimationFrame(this._sayFrame);
+      clearTimeout(this._sayTimer);
+      this._sayFrame = 0;
+      status.textContent = this._said.join(" ");
+      this._said = [];
+    };
+    this._sayFrame = requestAnimationFrame(say);
+    this._sayTimer = setTimeout(say, 120);
+  }
+  _emit(name, detail) {
+    this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+  }
+}
+function isTile(el) {
+  return !NOT_TILES.has(el.localName) && el.getAttribute("slot") !== "empty";
+}
+function setBox(el, box, animate, lifted) {
+  const s = el.style;
+  s.position = "absolute";
+  s.top = "0";
+  s.left = "0";
+  s.margin = "0";
+  s.boxSizing = "border-box";
+  s.width = `${box.w}px`;
+  s.height = `${box.h}px`;
+  s.transition = animate ? `translate ${SLIDE}, width ${SLIDE}, height ${SLIDE}${lifted ? `, scale ${SLIDE}, box-shadow ${SLIDE}` : ""}` : "none";
+  s.translate = `${box.x}px ${box.y}px`;
+  if (s.display === "none") s.display = "";
+}
+function liftStyle(el, chrome, on, animate = true) {
+  if (on) {
+    el.style.transition = "scale 160ms ease-out, box-shadow 160ms ease-out";
+    chrome.style.transition = "scale 160ms ease-out";
+    el.style.zIndex = "5";
+    chrome.style.zIndex = "6";
+    el.style.scale = String(LIFT_SCALE);
+    chrome.style.scale = String(LIFT_SCALE);
+    el.style.boxShadow = "var(--ts-shadow-lift, 0 24px 48px -16px rgba(0, 0, 0, .4))";
+    el.style.borderRadius = "var(--ts-radius, 10px)";
+    chrome.classList.add("lifted");
+  } else {
+    el.style.scale = "";
+    chrome.style.scale = "";
+    el.style.boxShadow = "";
+    if (!animate) chrome.classList.remove("lifted");
+  }
+}
+function setAttr(el, name, value) {
+  if (el.getAttribute(name) !== value) el.setAttribute(name, value);
+}
+function sameOrder(a, b) {
+  return a.length === b.length && a.every((item, i) => item.id === b[i].id);
+}
+function smallest(spec) {
+  let size = spec.sizes[0];
+  for (let next = stepSize(spec, size, -1); next !== size; next = stepSize(spec, size, -1)) size = next;
+  return size;
+}
+function scrollParent(el) {
+  for (let node = el.parentElement || el.getRootNode() && el.getRootNode().host; node; ) {
+    if (node === document.body || node === document.documentElement) return null;
+    const style = getComputedStyle(node);
+    if (/(auto|scroll|overlay)/.test(style.overflowY) && node.scrollHeight > node.clientHeight) return node;
+    node = node.parentElement || node.getRootNode() && node.getRootNode().host;
+  }
+  return null;
+}
+function scrollPos(scroller) {
+  return scroller ? { x: scroller.scrollLeft, y: scroller.scrollTop } : { x: scrollX, y: scrollY };
+}
+function scrollBy(scroller, dy) {
+  if (scroller) scroller.scrollTop += dy;
+  else window.scrollBy(0, dy);
+}
+const TOKENS_CSS = `@layer tickslate.defaults {
+  :where(:root) {
+    --ts-bg: #F3EFE6;
+    --ts-surface: #FFFDF8;
+    --ts-surface-2: #F1EBDE;
+    --ts-line: #E2DACB;
+    --ts-ink: #1C1A16;
+    --ts-muted: #6A655B;
+    --ts-profit: #0E7A4E;
+    --ts-loss: #C0362C;
+    --ts-warn: #A85A06;
+    --ts-accent: #2C52C4;
+    --ts-axis: #948C7C;
+    --ts-series-1: #2C52C4;
+    --ts-series-2: #B45309;
+    --ts-series-3: #0F766E;
+    --ts-series-4: #8B3FB5;
+    --ts-series-5: #BE185D;
+    --ts-series-6: #6B7A1A;
+    --ts-focus: var(--ts-accent);
+    --ts-radius: 10px;
+    --ts-radius-sm: 6px;
+    --ts-shadow: 0 1px 0 rgba(28, 26, 22, .04), 0 8px 20px -12px rgba(28, 26, 22, .25);
+    --ts-fill: 12%;
+    --ts-font-ui: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
+    --ts-font-num: 'Newsreader', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+    --ts-row: 150px;
+    --ts-gap: 16px;
+    --ts-pad: 18px;
+    --ts-row-compact: 150px;
+    --ts-gap-compact: 10px;
+    --ts-num-weight: 500;
+    --ts-num-weight-small: 500;
+    --ts-shadow-lift: 0 2px 6px rgba(28, 26, 22, .08), 0 28px 48px -18px rgba(28, 26, 22, .45);
+    --ts-motion: 220ms;
+    --ts-ease: cubic-bezier(.2, .8, .2, 1);
+  }
+  @media (prefers-color-scheme: dark) {
+    :where([data-theme="auto"]) {
+      --ts-bg: #111827;
+      --ts-surface: #1F2937;
+      --ts-surface-2: #374151;
+      --ts-line: #374151;
+      --ts-ink: #F3F4F6;
+      --ts-muted: #9CA3AF;
+      --ts-profit: #34D399;
+      --ts-loss: #FB7185;
+      --ts-warn: #FBBF24;
+      --ts-accent: #818CF8;
+      --ts-axis: #6B7280;
+      --ts-series-1: #818CF8;
+      --ts-series-2: #F59E0B;
+      --ts-series-3: #2DD4BF;
+      --ts-series-4: #C084FC;
+      --ts-series-5: #F472B6;
+      --ts-series-6: #A3E635;
+      --ts-focus: var(--ts-accent);
+      --ts-radius: 12px;
+      --ts-pad: 16px;
+      --ts-shadow: none;
+      --ts-fill: 16%;
+      --ts-num-weight-small: 600;
+      --ts-shadow-lift: 0 2px 6px rgba(0, 0, 0, .3), 0 28px 48px -16px rgba(0, 0, 0, .7);
+    }
+  }
+  :where([data-theme="dark"], .dark) {
+    --ts-bg: #111827;
+    --ts-surface: #1F2937;
+    --ts-surface-2: #374151;
+    --ts-line: #374151;
+    --ts-ink: #F3F4F6;
+    --ts-muted: #9CA3AF;
+    --ts-profit: #34D399;
+    --ts-loss: #FB7185;
+    --ts-warn: #FBBF24;
+    --ts-accent: #818CF8;
+    --ts-axis: #6B7280;
+    --ts-series-1: #818CF8;
+    --ts-series-2: #F59E0B;
+    --ts-series-3: #2DD4BF;
+    --ts-series-4: #C084FC;
+    --ts-series-5: #F472B6;
+    --ts-series-6: #A3E635;
+    --ts-focus: var(--ts-accent);
+    --ts-radius: 12px;
+    --ts-pad: 16px;
+    --ts-shadow: none;
+    --ts-fill: 16%;
+    --ts-num-weight-small: 600;
+    --ts-shadow-lift: 0 2px 6px rgba(0, 0, 0, .3), 0 28px 48px -16px rgba(0, 0, 0, .7);
+  }
+  :where([data-theme="light"]) {
+    --ts-bg: #F3EFE6;
+    --ts-surface: #FFFDF8;
+    --ts-surface-2: #F1EBDE;
+    --ts-line: #E2DACB;
+    --ts-ink: #1C1A16;
+    --ts-muted: #6A655B;
+    --ts-profit: #0E7A4E;
+    --ts-loss: #C0362C;
+    --ts-warn: #A85A06;
+    --ts-accent: #2C52C4;
+    --ts-axis: #948C7C;
+    --ts-series-1: #2C52C4;
+    --ts-series-2: #B45309;
+    --ts-series-3: #0F766E;
+    --ts-series-4: #8B3FB5;
+    --ts-series-5: #BE185D;
+    --ts-series-6: #6B7A1A;
+    --ts-focus: var(--ts-accent);
+    --ts-radius: 10px;
+    --ts-pad: 18px;
+    --ts-shadow: 0 1px 0 rgba(28, 26, 22, .04), 0 8px 20px -12px rgba(28, 26, 22, .25);
+    --ts-fill: 12%;
+    --ts-num-weight-small: 500;
+    --ts-shadow-lift: 0 2px 6px rgba(28, 26, 22, .08), 0 28px 48px -18px rgba(28, 26, 22, .45);
+  }
+  :where(ts-grid:not(:defined)) {
+    display: block;
+    min-height: var(--ts-row, 150px);
+  }
+  :where(ts-grid:not(:defined) > *) {
+    display: none;
+  }
+  :where(:is(ts-today-pnl, ts-equity-curve, ts-session-clock, ts-pnl-calendar, ts-edge-stats, ts-capital-funding, ts-open-positions, ts-watchlist, ts-mini-chart, ts-card, ts-metric, ts-chart):not(:defined)) {
+    display: block;
+    height: var(--ts-row, 150px);
+  }
+  :where(:is(ts-pnl-calendar, ts-mini-chart):not(:defined):not([size])),
+  :where(:is(ts-today-pnl, ts-equity-curve, ts-session-clock, ts-pnl-calendar, ts-edge-stats, ts-capital-funding, ts-open-positions, ts-watchlist, ts-mini-chart, ts-card, ts-metric, ts-chart):not(:defined):is([size="M"], [size="Tall"], [size="L"], [size="XL"])) {
+    height: calc(2 * var(--ts-row, 150px) + var(--ts-gap, 16px));
+  }
+}`;
+const checked = /* @__PURE__ */ new WeakSet();
+function ensureTokens(doc = typeof document === "undefined" ? void 0 : document) {
+  if (!doc || !doc.documentElement || checked.has(doc)) return;
+  checked.add(doc);
+  const view = doc.defaultView || globalThis;
+  let defined = "";
+  try {
+    defined = view.getComputedStyle(doc.documentElement).getPropertyValue("--ts-surface");
+  } catch {
+  }
+  if (defined && defined.trim()) return;
+  warnOnce("tokens", "tokens.css is not loaded, so tickslate injected its default tokens. Link tickslate/tokens.css (or set the --ts-* variables) to theme the widgets yourself.");
+  adopt(doc, view);
+}
+function adopt(doc, view) {
+  const Sheet = view.CSSStyleSheet;
+  if (Array.isArray(doc.adoptedStyleSheets) && typeof Sheet === "function" && Sheet.prototype && "replaceSync" in Sheet.prototype) {
+    try {
+      const sheet = new Sheet();
+      sheet.replaceSync(TOKENS_CSS);
+      doc.adoptedStyleSheets = [...doc.adoptedStyleSheets, sheet];
+      return;
+    } catch {
+    }
+  }
+  const style = doc.createElement("style");
+  style.setAttribute("data-tickslate", "defaults");
+  style.textContent = TOKENS_CSS;
+  (doc.head || doc.documentElement).appendChild(style);
+}
+const STRINGS$6 = Object.freeze({
+  noData: "No data",
+  errorDefault: "Couldn't display this data",
+  errorRegion: "{label}, error: {message}",
+  retry: "Retry"
+});
+const Base = typeof HTMLElement === "undefined" ? class {
+} : HTMLElement;
+const FORMAT_ATTRS = [
+  ["locale", "locale"],
+  ["currency", "currency"],
+  ["time-zone", "timeZone"]
+];
+function resolveFormatOptions(...sources) {
+  const out = {};
+  for (const [attr, key] of FORMAT_ATTRS) {
+    for (const source of sources) {
+      const value = source && typeof source.getAttribute === "function" ? source.getAttribute(attr) : null;
+      if (value) {
+        out[key] = value;
+        break;
+      }
+    }
+  }
+  return out;
+}
+function standaloneCss() {
+  return SIZE_NAMES.map((name) => {
+    const rows = SIZES[name].rows;
+    const height = rows === 1 ? "var(--ts-row, 150px)" : `calc(${rows} * var(--ts-row, 150px) + ${rows - 1} * var(--ts-gap, 16px))`;
+    return `:host([size="${name}"]) { height: ${height}; }`;
+  }).join("\n");
+}
+function describeElement(el) {
+  const item = el && typeof el.getAttribute === "function" ? el.getAttribute("item") : null;
+  return `<${el.localName}${item ? ` item="${item}"` : ""}>`;
+}
+function escapeHtml(s) {
+  return String(s).replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+}
+const SK_WIDTHS = Array.from({ length: 19 }, (_, i) => 10 + i * 5);
+const SK_HEIGHTS = [4, 6, 9, 10, 11, 12, 13, 16, 30, 44];
+const SK_CSS = SK_WIDTHS.map((w) => `.sk.w${w} { width: ${w}%; }`).join(" ") + " .sk.wx { width: 40px; } " + SK_HEIGHTS.map((h) => `.sk.h${h} { height: ${h}px; }`).join(" ");
+function sk(width, height) {
+  const w = width === "x" ? "wx" : `w${SK_WIDTHS.reduce((a, b) => Math.abs(b - width) < Math.abs(a - width) ? b : a)}`;
+  const h = SK_HEIGHTS.reduce((a, b) => Math.abs(b - height) < Math.abs(a - height) ? b : a);
+  return `<span class="sk ${w} h${h}"></span>`;
+}
+const SHARED_CSS = `
+:host { display: block; }
+:host([hidden]) { display: none; }
+${standaloneCss()}
+.tile {
+  box-sizing: border-box; height: 100%; display: flex; flex-direction: column; gap: 10px;
+  padding: var(--ts-pad, 18px); background: var(--ts-surface); border: 1px solid var(--ts-line);
+  border-radius: var(--ts-radius); box-shadow: var(--ts-shadow); color: var(--ts-ink);
+  font: 13px var(--ts-font-ui); overflow: hidden; position: relative;
+  container-type: inline-size;
+}
+.hd { display: flex; align-items: center; gap: 8px; min-height: 18px; }
+.lb { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; color: var(--ts-muted); }
+.n, .big, .xbig {
+  font-family: var(--ts-font-num); font-variant-numeric: tabular-nums lining-nums; font-weight: var(--ts-num-weight, 500);
+}
+.big { font-size: min(34px, 19cqi); line-height: 1; letter-spacing: -.01em; }
+.xbig { font-size: min(48px, 9cqi); line-height: 1; letter-spacing: -.02em; }
+.md { font-size: min(17px, 12cqi); }
+.sm { font-size: 11px; }
+.xs { font-size: 10px; }
+.n.sm, .n.xs { font-weight: var(--ts-num-weight-small, 500); }
+.mut { color: var(--ts-muted); }
+.pos { color: var(--ts-profit); }
+.neg { color: var(--ts-loss); }
+.warn { color: var(--ts-warn); }
+.acc { color: var(--ts-accent); }
+.f1 { flex: 1; min-width: 0; }
+.row { display: flex; align-items: center; gap: 8px; }
+.rowb { display: flex; align-items: baseline; gap: 8px; }
+.col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
+.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
+.g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
+.sep { border-top: 1px solid var(--ts-line); }
+.ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+.btn {
+  font: 500 11px var(--ts-font-ui); min-height: 28px; padding: 0 9px; border-radius: var(--ts-radius-sm);
+  border: 1px solid var(--ts-line); background: transparent; color: var(--ts-muted); cursor: pointer;
+}
+.btn.on { background: var(--ts-surface-2); color: var(--ts-ink); box-shadow: inset 0 -2px 0 var(--ts-accent); }
+.btn:focus-visible { outline: 2px solid var(--ts-focus, var(--ts-accent)); outline-offset: 2px; }
+/* Touch screens: the 44px minimum target the RFC asks for at 2 columns. */
+@media (pointer: coarse) { .btn { min-height: 44px; min-width: 44px; } }
+.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
+.dot.live { background: var(--ts-profit); animation: ts-pulse 2s infinite; }
+@keyframes ts-pulse {
+  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ts-profit) 55%, transparent); }
+  70% { box-shadow: 0 0 0 7px transparent; }
+  100% { box-shadow: 0 0 0 0 transparent; }
+}
+@media (prefers-reduced-motion: reduce) { .dot.live { animation: none; } }
+.empty { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--ts-muted); text-align: center; }
+.err { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
+.err-msg { display: inline-flex; align-items: flex-start; gap: 6px; max-width: 100%; font-size: 12px; font-weight: 500; color: var(--ts-ink); text-align: start; }
+.err-msg svg { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--ts-warn); }
+.btn.retry { color: var(--ts-ink); }
+.sk { display: block; flex: none; position: relative; overflow: hidden; border-radius: var(--ts-radius-sm); background: var(--ts-surface-2); }
+.sk.grow { flex: 1; min-height: 0; width: 100%; }
+.sk::after {
+  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
+  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ts-surface-2) 35%, var(--ts-surface)), transparent);
+  animation: ts-shimmer 1.6s ease-in-out infinite;
+}
+@keyframes ts-shimmer { to { transform: translateX(100%); } }
+@media (prefers-reduced-motion: reduce) { .sk::after { animation: none; display: none; } }
+${SK_CSS}
+.lp, .ln { fill: none; stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
+.lp { stroke: var(--ts-profit); }
+.ln { stroke: var(--ts-loss); }
+.ap { fill: color-mix(in srgb, var(--ts-profit) var(--ts-fill, 12%), transparent); }
+.an { fill: color-mix(in srgb, var(--ts-loss) var(--ts-fill, 12%), transparent); }
+.lz { stroke: var(--ts-axis); stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
+`;
+const EMPTY_SPEC = Object.freeze({ label: "", sizes: Object.freeze([]) });
+const cssCache = /* @__PURE__ */ new WeakMap();
+const templateCache = /* @__PURE__ */ new WeakMap();
+const skeletonCache = /* @__PURE__ */ new WeakMap();
+function cssFor(Ctor) {
+  let css = cssCache.get(Ctor);
+  if (css === void 0) cssCache.set(Ctor, css = SHARED_CSS + (Ctor.styles || ""));
+  return css;
+}
+function templateFor(Ctor, variant) {
+  let byVariant = templateCache.get(Ctor);
+  if (!byVariant) templateCache.set(Ctor, byVariant = /* @__PURE__ */ new Map());
+  let html = byVariant.get(variant);
+  if (html === void 0) byVariant.set(variant, html = Ctor.template(variant));
+  return html;
+}
+function skeletonFor(Ctor, variant) {
+  let byVariant = skeletonCache.get(Ctor);
+  if (!byVariant) skeletonCache.set(Ctor, byVariant = /* @__PURE__ */ new Map());
+  let html = byVariant.get(variant);
+  if (html === void 0) byVariant.set(variant, html = Ctor.skeleton(variant));
+  return html;
+}
+const WARN_GLYPH = '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1.9 15 14.1H1z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"></path><path d="M8 6.2v3.6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"></path><circle cx="8" cy="11.9" r=".95" fill="currentColor"></circle></svg>';
+const STATES = ["loading", "error"];
+let uids = 0;
+const NO_DATA_MS = 1e4;
+const FORMAT_ATTR = { locale: "locale", currency: "currency", timeZone: "time-zone" };
+function findGrid(el) {
+  let node = el.parentElement || el.getRootNode && el.getRootNode().host;
+  while (node) {
+    if (node.localName === "ts-grid") return node;
+    node = node.parentElement || node.getRootNode && node.getRootNode().host;
+  }
+  return null;
+}
+class TsWidget extends Base {
+  static get observedAttributes() {
+    return ["size", "label", "locale", "currency", "time-zone", "state", "data"];
+  }
+  constructor() {
+    super();
+    this._data = void 0;
+    this._error = null;
+    this._actions = Object.freeze([]);
+    this._clock = null;
+    this._queued = false;
+    this._shown = null;
+    this._refs = /* @__PURE__ */ new Map();
+    this._fmt = null;
+    this._fmtKey = "";
+    this._every = 0;
+    this._timer = 0;
+    this._failed = false;
+    this._dataSet = false;
+    this._fromAttr = false;
+    this._parseError = false;
+    this._uid = ++uids;
+    this._undefTimer = 0;
+    this._checkedData = void 0;
+    this._onVisibility = () => {
+      if (this._visible()) {
+        this._arm();
+        this.requestRender();
+      } else {
+        this._disarm();
+      }
+    };
+    const root = this.attachShadow({ mode: "open" });
+    root.innerHTML = `<style>${cssFor(this.constructor)}</style><section class="tile" part="tile"></section>`;
+    this._section = root.querySelector(".tile");
+    this._section.addEventListener("click", (e) => {
+      const target = e.target && e.target.closest ? e.target.closest("[data-action]") : null;
+      if (target && target.getAttribute("data-action") === "retry" && this.actionEnabled("retry")) this.emit("retry");
+    });
+  }
+  // ── Public API ─────────────────────────────────────────────────────────
+  get data() {
+    return this._data;
+  }
+  set data(value) {
+    this._data = value;
+    this._dataSet = true;
+    this._fromAttr = false;
+    this._parseError = false;
+    this.requestRender();
+  }
+  /** 'loading', 'error' or null; anything else reads as null. */
+  get state() {
+    const value = this.getAttribute("state");
+    return STATES.includes(value) ? value : null;
+  }
+  set state(value) {
+    if (value === null || value === void 0 || value === "") this.removeAttribute("state");
+    else this.setAttribute("state", value);
+  }
+  get error() {
+    return this._error;
+  }
+  set error(value) {
+    const message = value instanceof Error ? value.message : value;
+    this._error = typeof message === "string" && message ? message : null;
+    this.requestRender();
+  }
+  get actions() {
+    return this._actions;
+  }
+  set actions(value) {
+    this._actions = Object.freeze(Array.isArray(value) ? value.filter((a) => typeof a === "string") : []);
+    this.requestRender();
+  }
+  actionEnabled(name) {
+    return this._actions.includes(name);
+  }
+  get size() {
+    const supported = this._supported();
+    return snapSize(this.getAttribute("size") || supported[0], supported);
+  }
+  set size(value) {
+    if (value === null || value === void 0 || value === "") this.removeAttribute("size");
+    else this.setAttribute("size", value);
+  }
+  get variant() {
+    return this.size;
+  }
+  get label() {
+    const own = this.getAttribute("label");
+    if (own) return own;
+    return this.spec.label;
+  }
+  /**
+   * The widget's description: catalog entry, else a validated static spec,
+   * else nothing. Validated here, not at class definition, so a subclass can
+   * set `static spec` in any order and a bad entry degrades to fewer sizes
+   * rather than throwing in a render.
+   */
+  get spec() {
+    const Ctor = this.constructor;
+    const key = Ctor.catalogKey;
+    if (key && Object.prototype.hasOwnProperty.call(WIDGETS, key)) return WIDGETS[key];
+    const own = Ctor.spec;
+    if (!own || typeof own !== "object") return EMPTY_SPEC;
+    const out = {
+      label: typeof own.label === "string" ? own.label : "",
+      sizes: Array.isArray(own.sizes) ? own.sizes.filter(isSize) : []
+    };
+    if (own.phoneRows && typeof own.phoneRows === "object") out.phoneRows = own.phoneRows;
+    return out;
+  }
+  set label(value) {
+    if (value === null || value === void 0) this.removeAttribute("label");
+    else this.setAttribute("label", value);
+  }
+  get clock() {
+    return this._clock;
+  }
+  set clock(fn) {
+    this._clock = typeof fn === "function" ? fn : null;
+    this.requestRender();
+  }
+  now() {
+    return this._clock ? this._clock() : Date.now();
+  }
+  get formatter() {
+    const options = resolveFormatOptions(this, findGrid(this));
+    const key = JSON.stringify([options, currentConfig()]);
+    if (!this._fmt || key !== this._fmtKey) {
+      this._fmt = createFormatter(options);
+      this._fmtKey = key;
+    }
+    return this._fmt;
+  }
+  /** The first match for `selector` in the shadow root, remembered until the template is rebuilt. */
+  $(selector) {
+    let el = this._refs.get(selector);
+    if (!el) {
+      el = this.shadowRoot.querySelector(selector);
+      if (el) this._refs.set(selector, el);
+    }
+    return el;
+  }
+  requestRender() {
+    if (this._queued) return;
+    this._queued = true;
+    queueMicrotask(() => {
+      this._queued = false;
+      if (this.isConnected) this._render();
+    });
+  }
+  every(ms) {
+    const period = ms > 0 ? ms : 0;
+    if (period === this._every && (this._timer || !period)) return;
+    this._every = period;
+    this._disarm();
+    this._arm();
+  }
+  emit(action, detail) {
+    return this.dispatchEvent(new CustomEvent("ts-action", { detail: { action, ...detail }, bubbles: true, composed: true, cancelable: true }));
+  }
+  /** Re-apply properties set on the element before it was defined, which would otherwise shadow the accessors. */
+  upgrade(...names) {
+    for (const name of names) {
+      if (Object.prototype.hasOwnProperty.call(this, name)) {
+        const value = this[name];
+        delete this[name];
+        this[name] = value;
+      }
+    }
+  }
+  // ── To override ────────────────────────────────────────────────────────
+  static template() {
+    return "";
+  }
+  static viewModel() {
+    return {};
+  }
+  /** The default loading shape: a header, a headline bar and two text lines. */
+  static skeleton() {
+    return `<div class="hd"><span class="lb ell" data-k="label"></span></div>${sk(60, 30)}${sk(85, 11)}${sk(70, 11)}`;
+  }
+  viewContext() {
+    return {};
+  }
+  update() {
+  }
+  // ── Lifecycle ──────────────────────────────────────────────────────────
+  connectedCallback() {
+    ensureTokens();
+    this.upgrade("data", "size", "clock", "state", "error", "actions");
+    this._normaliseSize();
+    if (typeof document !== "undefined") document.addEventListener("visibilitychange", this._onVisibility);
+    this._arm();
+    this._watchForData();
+    this.requestRender();
+  }
+  disconnectedCallback() {
+    clearTimeout(this._undefTimer);
+    if (typeof document !== "undefined") document.removeEventListener("visibilitychange", this._onVisibility);
+    this._disarm();
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    if (name === "size") this._normaliseSize();
+    else if (name === "data") this._readDataAttribute(newValue);
+    this.requestRender();
+  }
+  // ── Internals ──────────────────────────────────────────────────────────
+  /**
+   * Feed the data attribute into _data when no property has been set. A value
+   * that isn't JSON-shaped is ignored, but data this attribute supplied earlier
+   * is dropped so a removed attribute doesn't leave stale numbers behind.
+   */
+  _readDataAttribute(value) {
+    if (this._dataSet) return;
+    const text = typeof value === "string" ? value.trim() : "";
+    if (text[0] !== "{" && text[0] !== "[") {
+      if (this._fromAttr) {
+        this._data = void 0;
+        this._fromAttr = false;
+        this._parseError = false;
+      }
+      return;
+    }
+    this._fromAttr = true;
+    if (text === "[object Object]") {
+      this._data = void 0;
+      this._parseError = true;
+      warnOnce(`attr-object:${this._uid}`, `${describeElement(this)} data attribute reads "[object Object]"; set the data property instead.`);
+      return;
+    }
+    try {
+      this._data = JSON.parse(text);
+      this._parseError = false;
+    } catch (err) {
+      this._data = void 0;
+      this._parseError = true;
+      {
+        const { message, position } = parseErrorParts(err);
+        warnOnce(`attr-json:${this._uid}`, `${describeElement(this)} data attribute is not valid JSON: ${message}${position === null ? "" : ` (position ${position})`}.`);
+      }
+    }
+  }
+  // The checks below wrap their whole body in `if (DEV)`. A class method
+  // survives tree-shaking even when its only caller is guarded, so the guard
+  // has to be inside for a production build to lose the messages.
+  /** Development: say so if nothing has set data (and nothing is loading on purpose) 10 s after connecting. */
+  _watchForData() {
+    {
+      clearTimeout(this._undefTimer);
+      if (this._data !== void 0 || this._parseError) return;
+      this._undefTimer = setTimeout(() => {
+        if (this._data === void 0 && !this._parseError && !this.state && !this.constructor.dataOptional && this.isConnected) {
+          warnOnce(`no-data:${this._uid}`, `${describeElement(this)} has had no data for 10 s and still shows a skeleton. Set data, or null for the empty state.`);
+        }
+      }, NO_DATA_MS);
+      if (this._undefTimer && typeof this._undefTimer.unref === "function") this._undefTimer.unref();
+    }
+  }
+  /** Development: warn about invalid formatter options, naming where each came from. */
+  _checkFormatter(fmt) {
+    {
+      for (const issue of fmt.issues) {
+        const attr = FORMAT_ATTR[issue.option];
+        const grid = findGrid(this);
+        let source = "configure()";
+        if (this.getAttribute(attr) === issue.value) source = `its ${attr} attribute`;
+        else if (grid && grid.getAttribute(attr) === issue.value) source = `its grid's ${attr} attribute`;
+        warnOnce(`format:${this._uid}:${issue.option}`, `${describeElement(this)} ${issue.message} (from ${source}); the default is used.`);
+      }
+    }
+  }
+  /** Development: a view model that couldn't read some rows says how many. */
+  _checkDropped(vm) {
+    if (vm.dropped > 0) {
+      warnOnce(`dropped:${this._uid}`, `${describeElement(this)} dropped ${vm.dropped} ${vm.dropped === 1 ? "row" : "rows"} it couldn't read.`);
+    }
+  }
+  /** Development: check data against the class's dataShape, once per new value. */
+  _checkShape(data) {
+    {
+      const shape = this.constructor.dataShape;
+      if (!shape || data === void 0 || this._checkedData === data) return;
+      this._checkedData = data;
+      const problem = checkShape(data, shape);
+      if (problem) warnOnce(`shape:${this._uid}`, `${describeElement(this)} ${shapeMessage(problem)}`);
+    }
+  }
+  _supported() {
+    return this.spec.sizes;
+  }
+  /** The name for the tile: the label, else the tag, never empty. */
+  _name() {
+    const label = this.label;
+    if (label) return label;
+    {
+      warnOnce(`label:${this.localName}`, `<${this.localName}> has no label, so its region is named "${this.localName}". Set a label attribute or static spec.`);
+    }
+    return this.localName;
+  }
+  /**
+   * Make the attribute say the size actually rendered, so the standalone
+   * height rules match it. Only once connected: a constructor or a detached
+   * element must not grow attributes.
+   */
+  _normaliseSize() {
+    if (!this.isConnected) return;
+    const size = this.size;
+    if (this.getAttribute("size") !== size) this.setAttribute("size", size);
+  }
+  _visible() {
+    return typeof document === "undefined" || document.visibilityState !== "hidden";
+  }
+  _arm() {
+    if (this._timer || !this._every || !this.isConnected || !this._visible()) return;
+    this._timer = setInterval(() => this.requestRender(), this._every);
+  }
+  _disarm() {
+    clearInterval(this._timer);
+    this._timer = 0;
+  }
+  _render() {
+    const Ctor = this.constructor;
+    const label = this._name();
+    const variant = this.variant;
+    const state = this.state;
+    if (state === "error" || this._error || this._parseError) {
+      this._failed = false;
+      return this._showError(label, this._error);
+    }
+    if (state === "loading" || this._data === void 0 && !Ctor.dataOptional) {
+      this._failed = false;
+      return this._showLoading(label, variant);
+    }
+    if (this._data === null) {
+      this._failed = false;
+      return this._showEmpty(label);
+    }
+    try {
+      const fmt = this.formatter;
+      if (DEV) {
+        this._checkFormatter(fmt);
+        this._checkShape(this._data);
+      }
+      const vm = Ctor.viewModel(this._data === void 0 ? {} : this._data, variant, { ...this.viewContext(), fmt, now: this.now(), label }) || {};
+      if (DEV) this._checkDropped(vm);
+      if (this._shown !== variant) {
+        this._section.innerHTML = templateFor(Ctor, variant);
+        this._refs.clear();
+        this._shown = variant;
+      }
+      this._section.removeAttribute("aria-busy");
+      this._section.setAttribute("aria-label", vm.ariaLabel || label);
+      this.update(vm, variant);
+      this._failed = false;
+    } catch (err) {
+      if (!this._failed) console.error(`tickslate: ${describeElement(this)} could not render its data; see docs/widgets/${this.localName}.md`, err);
+      this._failed = true;
+      this._showError(label, null);
+    }
+  }
+  /** Swap in a non-content view's markup, and write the real label into it. */
+  _show(key, html, label, name, busy) {
+    if (this._shown !== key) {
+      this._section.innerHTML = html;
+      this._refs.clear();
+      this._shown = key;
+    }
+    const slot = this._section.querySelector('[data-k="label"]');
+    if (slot) slot.textContent = label;
+    this._section.setAttribute("aria-label", name);
+    if (busy) this._section.setAttribute("aria-busy", "true");
+    else this._section.removeAttribute("aria-busy");
+  }
+  _showLoading(label, variant) {
+    this._show(`view:loading:${variant}`, skeletonFor(this.constructor, variant), label, label, true);
+  }
+  _showEmpty(label) {
+    const text = escapeHtml(this.constructor.emptyText);
+    this._show("view:empty", `<div class="hd"><span class="lb ell" data-k="label"></span></div><div class="empty"><slot name="empty">${text}</slot></div>`, label, label, false);
+  }
+  _showError(label, message) {
+    const text = message || STRINGS$6.errorDefault;
+    const retry = this.actionEnabled("retry") ? `<button type="button" class="btn retry" data-action="retry">${escapeHtml(STRINGS$6.retry)}</button>` : "";
+    this._show(
+      retry ? "view:error:retry" : "view:error",
+      `<div class="hd"><span class="lb ell" data-k="label"></span></div><div class="err" part="error"><span class="err-msg">${WARN_GLYPH}<span data-k="message"></span></span>${retry}</div>`,
+      label,
+      STRINGS$6.errorRegion.replace("{label}", label).replace("{message}", text),
+      false
+    );
+    this._section.querySelector('[data-k="message"]').textContent = text;
+  }
+}
+TsWidget.catalogKey = null;
+TsWidget.spec = null;
+TsWidget.styles = "";
+TsWidget.dataOptional = false;
+TsWidget.dataShape = null;
+TsWidget.emptyText = STRINGS$6.noData;
+const STRINGS$5 = Object.freeze({ synced: "synced " });
+const TEMPLATE = `
+<div class="hd">
+  <span class="dot live" data-k="dot" hidden></span>
+  <span class="lb ell" data-k="label"></span>
+  <span class="f1"></span>
+  <span class="sm mut n meta" data-k="meta" hidden><span class="pre">${STRINGS$5.synced}</span><span data-k="time"></span></span>
+  <slot name="actions"></slot>
+</div>
+<slot name="value"></slot>
+<div class="body" data-k="body" part="body"><slot></slot></div>
+<slot name="footer"></slot>`;
+const SKELETON = `
+<div class="hd"><span class="lb ell" data-k="label"></span><span class="f1"></span><slot name="actions"></slot></div>
+<slot name="value"></slot>
+<span class="sk grow"></span>
+<slot name="footer"></slot>`;
+function cardSizes(attr) {
+  const wanted = new Set(String(attr || "").split(/\s+/).filter(isSize));
+  const sizes = SIZE_NAMES.filter((name) => wanted.has(name));
+  return sizes.length ? sizes : [...SIZE_NAMES];
+}
+function cardModel(data, variant, ctx) {
+  const d = data && typeof data === "object" ? data : {};
+  const t = toTime(d.asOf !== void 0 ? d.asOf : ctx.asOf);
+  const time = Number.isFinite(t) ? ctx.fmt.time(t) : "";
+  return {
+    label: ctx.label,
+    ariaLabel: ctx.valueText ? `${ctx.label}, ${ctx.valueText}` : ctx.label,
+    live: typeof d.live === "boolean" ? d.live : ctx.live === true,
+    time,
+    scrollable: ctx.scrollable === true
+  };
+}
+const flag = (el, name, on) => on ? el.setAttribute(name, "") : el.removeAttribute(name);
+class TsCard extends TsWidget {
+  static get observedAttributes() {
+    return [...super.observedAttributes, "sizes", "live", "as-of", "scrollable"];
+  }
+  constructor() {
+    super();
+    this._specKey = null;
+    this._spec = null;
+    this._seen = null;
+    this._section.addEventListener("scroll", () => this._fade(), true);
+  }
+  /** From the sizes and label attributes (RFC 0002 §3.1). Cached per attribute pair, as a grid asks often. */
+  get spec() {
+    const sizes = this.getAttribute("sizes");
+    const label = this.getAttribute("label") || "";
+    const key = `${sizes}
+${label}`;
+    if (key !== this._specKey) {
+      this._specKey = key;
+      this._spec = { label, sizes: cardSizes(sizes) };
+    }
+    return this._spec;
+  }
+  static template() {
+    return TEMPLATE;
+  }
+  static skeleton() {
+    return SKELETON;
+  }
+  static viewModel(data, variant, ctx) {
+    return cardModel(data, variant, ctx);
+  }
+  viewContext() {
+    return {
+      live: this.hasAttribute("live"),
+      asOf: this.getAttribute("as-of"),
+      scrollable: this.hasAttribute("scrollable"),
+      valueText: this._slottedText("value")
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this._seen && typeof MutationObserver !== "undefined") {
+      this._seen = new MutationObserver(() => this.requestRender());
+      this._seen.observe(this, { childList: true, subtree: true, characterData: true });
+    }
+    if (!this._resize && typeof ResizeObserver !== "undefined") {
+      this._resize = new ResizeObserver(() => this._fade());
+      this._resize.observe(this);
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._seen) this._seen.disconnect();
+    if (this._resize) this._resize.disconnect();
+    this._seen = null;
+    this._resize = null;
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    if (name === "sizes") this._normaliseSize();
+    super.attributeChangedCallback(name, oldValue, newValue);
+  }
+  /** The base shows the empty view for null data; a card with a body shows the body. */
+  _render() {
+    const held = this._data;
+    if (held === null && this._hasBody()) this._data = void 0;
+    try {
+      super._render();
+    } finally {
+      this._data = held;
+    }
+  }
+  /** Anything slotted into the default slot: an element with no slot name, or text that isn't whitespace. */
+  _hasBody() {
+    for (const node of this.childNodes || []) {
+      if (node.nodeType === 1) {
+        if (!node.getAttribute("slot")) return true;
+      } else if (node.nodeType === 3 && /\S/.test(node.textContent)) return true;
+    }
+    return false;
+  }
+  _slottedText(name) {
+    for (const node of this.childNodes || []) {
+      if (node.nodeType === 1 && node.getAttribute("slot") === name) return (node.textContent || "").trim();
+    }
+    return "";
+  }
+  update(vm) {
+    const text = (k2, s) => {
+      const el = this.$(`[data-k="${k2}"]`);
+      if (el && el.textContent !== s) el.textContent = s;
+    };
+    text("label", vm.label);
+    flag(this.$('[data-k="dot"]'), "hidden", !vm.live);
+    flag(this.$('[data-k="meta"]'), "hidden", !vm.time);
+    text("time", vm.time);
+    const body = this.$('[data-k="body"]');
+    body.setAttribute("class", vm.scrollable ? "body scroll" : "body");
+    if (vm.scrollable) {
+      body.setAttribute("tabindex", "0");
+      body.setAttribute("role", "group");
+      body.setAttribute("aria-label", this.label || this.localName);
+    } else {
+      body.removeAttribute("tabindex");
+      body.removeAttribute("role");
+      body.removeAttribute("aria-label");
+      body.removeAttribute("data-more");
+    }
+    this._fade();
+  }
+  /** Show the fade only while the body has more to scroll to. */
+  _fade() {
+    const body = this.shadowRoot && this.$('[data-k="body"]');
+    if (!body || typeof body.scrollHeight !== "number" || !/\bscroll\b/.test(body.getAttribute("class") || "")) return;
+    flag(body, "data-more", body.scrollTop + body.clientHeight < body.scrollHeight - 1);
+  }
+}
+__publicField(TsCard, "catalogKey", "card");
+__publicField(TsCard, "dataOptional", true);
+__publicField(TsCard, "dataShape", Object.freeze({
+  asOf: Object.freeze({ kind: "time", optional: true }),
+  live: Object.freeze({ kind: "boolean", optional: true })
+}));
+__publicField(TsCard, "styles", `
+[hidden] { display: none; }
+.body { flex: 1; min-height: 0; overflow: hidden; }
+.body.scroll { overflow: auto; scrollbar-width: thin; }
+/* The last 28px fade while there is more below, so a cut-off row reads as
+   more to come; at the end of the list the fade goes, so nothing is dimmed
+   that has nowhere left to scroll. */
+.body.scroll[data-more] {
+  -webkit-mask-image: linear-gradient(to bottom, var(--ts-ink) calc(100% - 28px), transparent);
+  mask-image: linear-gradient(to bottom, var(--ts-ink) calc(100% - 28px), transparent);
+}
+.body.scroll:focus-visible { outline: 2px solid var(--ts-focus, var(--ts-accent)); outline-offset: 2px; }
+/* A canvas or svg is inline by default, and its baseline gap would push a
+   height: 100% chart a few pixels past the body. */
+::slotted(canvas), ::slotted(svg), ::slotted(img), ::slotted(video), ::slotted(iframe) { display: block; }
+slot[name="value"]::slotted(*) {
+  display: block; flex: none; white-space: nowrap; overflow: hidden; unicode-bidi: isolate;
+  font-family: var(--ts-font-num); font-variant-numeric: tabular-nums lining-nums; font-weight: var(--ts-num-weight, 500);
+  font-size: min(34px, 19cqi); line-height: 1; letter-spacing: -.01em;
+}
+slot[name="footer"]::slotted(*) {
+  display: block; flex: none; font-size: 11px; color: var(--ts-muted);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+/* On a tile narrower than 200px the meta says '14:05', so the label keeps its room. */
+@container (max-width: 200px) { .pre { display: none; } }
+`);
+const round$3 = (v) => Math.round(v * 10) / 10;
+const finite = (p) => p && Number.isFinite(p.x) && Number.isFinite(p.y);
+function scale(d0, d1, r0, r1) {
+  if (d0 === d1) return () => (r0 + r1) / 2;
+  const k2 = (r1 - r0) / (d1 - d0);
+  return (v) => r0 + (v - d0) * k2;
+}
+const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+function extent(points, key) {
+  let lo = Infinity;
+  let hi = -Infinity;
+  for (const p of points) {
+    lo = Math.min(lo, p[key]);
+    hi = Math.max(hi, p[key]);
+  }
+  return [lo, hi];
+}
+function linePath(points, x, y) {
+  let d = "";
+  for (const p of points) {
+    if (!finite(p)) continue;
+    d += `${d ? " L" : "M"}${round$3(x(p.x))} ${round$3(y(p.y))}`;
+  }
+  return d;
+}
+function linePaths(points, { width, height, pad = 4, xDomain, yDomain, includeZero = true } = {}) {
+  const pts = (points || []).filter(finite);
+  const [x0, x1] = xDomain || (pts.length ? extent(pts, "x") : [0, 1]);
+  let [y0, y1] = yDomain || (pts.length ? extent(pts, "y") : [0, 1]);
+  if (includeZero) {
+    y0 = Math.min(y0, 0);
+    y1 = Math.max(y1, 0);
+  }
+  const x = scale(x0, x1, pad, width - pad);
+  const y = scale(y0, y1, height - pad, pad);
+  const zeroY = round$3(clamp(y(0), pad, height - pad));
+  if (!pts.length) return { line: "", area: "", zeroY, x, y };
+  let line;
+  let firstX;
+  let lastX;
+  if (pts.length === 1) {
+    firstX = round$3(pad);
+    lastX = round$3(width - pad);
+    const py = round$3(y(pts[0].y));
+    line = `M${firstX} ${py} L${lastX} ${py}`;
+  } else {
+    line = linePath(pts, x, y);
+    firstX = round$3(x(pts[0].x));
+    lastX = round$3(x(pts[pts.length - 1].x));
+  }
+  const area = `${line} L${lastX} ${zeroY} L${firstX} ${zeroY} Z`;
+  return { line, area, zeroY, x, y };
+}
+function bandPath(lower, upper, x, y) {
+  const top = (upper || []).filter(finite);
+  const bottom = (lower || []).filter(finite);
+  if (!top.length || !bottom.length) return "";
+  const forward = linePath(top, x, y);
+  let back = "";
+  for (let i = bottom.length - 1; i >= 0; i--) back += ` L${round$3(x(bottom[i].x))} ${round$3(y(bottom[i].y))}`;
+  return `${forward}${back} Z`;
+}
+function seriesDomain(series, { includeZero = true } = {}) {
+  let x0 = Infinity;
+  let x1 = -Infinity;
+  let y0 = Infinity;
+  let y1 = -Infinity;
+  for (const points of series || []) {
+    for (const p of points || []) {
+      if (!finite(p)) continue;
+      x0 = Math.min(x0, p.x);
+      x1 = Math.max(x1, p.x);
+      y0 = Math.min(y0, p.y);
+      y1 = Math.max(y1, p.y);
+    }
+  }
+  if (x0 === Infinity) return { x: [0, 1], y: [0, 1] };
+  if (includeZero) {
+    y0 = Math.min(y0, 0);
+    y1 = Math.max(y1, 0);
+  }
+  return { x: [x0, x1], y: [y0, y1] };
+}
+function areaPaths(points, { width, height, pad = 4, xDomain, yDomain }) {
+  const { line, area, zeroY } = linePaths(points, { width, height, pad, xDomain, yDomain, includeZero: false });
+  return { line, area, zeroY };
+}
+const STRINGS$4 = Object.freeze({
+  empty: "No data yet",
+  target: "Target",
+  synced: "synced ",
+  up: "up",
+  down: "down",
+  unchanged: "no change",
+  trend: "trend, from",
+  to: "to"
+});
+const HEADLINE_CHARS$2 = Object.freeze({ S: 10 });
+const SPARK_BOX = Object.freeze({ width: 240, height: 80 });
+const PAD$2 = 4;
+const MINUS$1 = "−";
+const UP = "▲";
+const DOWN = "▼";
+const round$2 = (v) => Math.round(v * 10) / 10;
+const isObj$1 = (v) => v !== null && typeof v === "object";
+const str$1 = (v) => typeof v === "string" ? v : "";
+function seriesPoints(series, scale2) {
+  if (!Array.isArray(series)) return { pts: [], dropped: 0 };
+  const timed = [];
+  const plain = [];
+  let dropped = 0;
+  for (const item of series) {
+    if (isObj$1(item) && !(typeof item.toNumber === "function")) {
+      const t = toTime(item.t);
+      const v = toNumber(item.v) / scale2;
+      if (Number.isFinite(t) && Number.isFinite(v)) timed.push({ x: t, y: v });
+      else dropped++;
+    } else {
+      const v = toNumber(item) / scale2;
+      if (Number.isFinite(v)) plain.push({ x: plain.length, y: v });
+      else dropped++;
+    }
+  }
+  if (timed.length) return { pts: timed.sort((a, b) => a.x - b.x), dropped: dropped + plain.length };
+  return { pts: plain, dropped };
+}
+function metricModel(data, variant, ctx) {
+  const fmt = ctx.fmt;
+  const d = isObj$1(data) ? data : {};
+  const format = ["money", "percent", "duration"].includes(d.format) ? d.format : "number";
+  const decimals = Number.isInteger(d.decimals) && d.decimals >= 0 && d.decimals <= 20 ? d.decimals : void 0;
+  const unit = str$1(d.unit);
+  const compact = d.compact === true;
+  const scale2 = format === "percent" && d.percentPoints === true ? 100 : 1;
+  const plus = (s, n) => n > 0 && /[1-9]/.test(s) && s[0] !== "+" ? `+${s}` : s;
+  const show = (n, sign2, compactForm) => {
+    const o = { sign: sign2, decimals, compact: compactForm };
+    switch (format) {
+      case "money":
+        return fmt.money(n, o);
+      case "percent":
+        return fmt.percent(n, o);
+      case "duration": {
+        const s = fmt.duration(Math.abs(n));
+        return Number.isFinite(n) && n < 0 ? `${MINUS$1}${s}` : sign2 === "always" ? plus(s, n) : s;
+      }
+      default: {
+        const s = unit ? fmt.unit(n, unit, o) : fmt.number(n, { ...o, sign: "negative" });
+        return sign2 === "always" ? plus(s, n) : s;
+      }
+    }
+  };
+  const value = toNumber(d.value) / scale2;
+  const known = Number.isFinite(value);
+  let headline = "—";
+  let spoken = "";
+  if (known) {
+    spoken = show(value, "negative", compact);
+    headline = spoken;
+    if (variant === "S" && !compact) {
+      if (format === "money" || format === "percent" || format === "number" && !unit) {
+        headline = fmt.fit(value, HEADLINE_CHARS$2.S, { style: format, decimals, sign: "negative" });
+        spoken = show(value, "negative", false);
+      } else if (headline.length > HEADLINE_CHARS$2.S) {
+        const short = show(value, "negative", true);
+        if (short.length < headline.length) headline = short;
+      }
+    }
+  }
+  const previous = toNumber(d.previous) / scale2;
+  const givenAbs = toNumber(d.delta) / scale2;
+  let abs = Number.isFinite(givenAbs) ? givenAbs : known && Number.isFinite(previous) ? value - previous : NaN;
+  let pct = toNumber(d.deltaPct);
+  if (!Number.isFinite(pct)) {
+    pct = Number.isFinite(abs) && Number.isFinite(previous) && previous !== 0 ? abs / Math.abs(previous) : NaN;
+  }
+  let delta2 = "";
+  let spokenDelta = "";
+  if (Number.isFinite(pct)) {
+    const dp = Math.abs(pct) >= 0.1 || pct === 0 ? 0 : 1;
+    delta2 = fmt.percent(pct, { sign: "always", decimals: dp });
+    spokenDelta = fmt.percent(Math.abs(pct), { sign: "negative", decimals: dp });
+  } else if (Number.isFinite(abs)) {
+    delta2 = show(abs, "always", compact);
+    spokenDelta = show(Math.abs(abs), "negative", compact);
+  }
+  const rise = delta2.startsWith("+");
+  const fall = delta2.startsWith(MINUS$1);
+  const arrow = rise ? UP : fall ? DOWN : "";
+  let tone2 = "mut";
+  const goodWhen = d.goodWhen === "down" || d.goodWhen === "neither" ? d.goodWhen : "up";
+  if (goodWhen !== "neither" && (rise || fall)) tone2 = rise === (goodWhen === "up") ? "pos" : "neg";
+  const compare = str$1(d.compareLabel);
+  const label = ctx.label;
+  let ariaLabel = known ? `${label}, ${spoken}` : label;
+  if (known && delta2) {
+    const how = rise ? `${STRINGS$4.up} ${spokenDelta}` : fall ? `${STRINGS$4.down} ${spokenDelta}` : STRINGS$4.unchanged;
+    ariaLabel += `, ${how}${compare ? ` ${compare}` : ""}`;
+  }
+  const vm = {
+    ariaLabel,
+    label,
+    live: d.live === true,
+    time: "",
+    value: headline,
+    delta: delta2,
+    arrow,
+    tone: tone2,
+    compare,
+    line: "",
+    area: "",
+    sparkLabel: "",
+    targetPct: "",
+    targetWidth: 0,
+    caption: "",
+    dropped: 0
+  };
+  const asOf = toTime(d.asOf);
+  if (Number.isFinite(asOf)) vm.time = fmt.time(asOf);
+  if (variant === "Wide" || variant === "M") {
+    const { pts, dropped } = seriesPoints(d.series, scale2);
+    vm.dropped = dropped;
+    if (pts.length >= 2) {
+      const { line, x, y } = linePaths(pts, { ...SPARK_BOX, pad: PAD$2, includeZero: false });
+      const floor = SPARK_BOX.height - PAD$2;
+      vm.line = line;
+      vm.area = `${line} L${round$2(x(pts[pts.length - 1].x))} ${floor} L${round$2(x(pts[0].x))} ${floor} Z`;
+      vm.sparkLabel = `${label} ${STRINGS$4.trend} ${show(pts[0].y, "negative", compact)} ${STRINGS$4.to} ${show(pts[pts.length - 1].y, "negative", compact)}`;
+    }
+  }
+  if (variant === "M") {
+    vm.caption = str$1(d.caption);
+    const target = toNumber(d.target) / scale2;
+    if (known && Number.isFinite(target) && target > 0) {
+      const ratio = value / target;
+      vm.targetPct = fmt.percent(ratio, { sign: "negative", decimals: 0 });
+      vm.targetWidth = Math.round(Math.min(1, Math.max(0, ratio)) * 1e3) / 1e3;
+    }
+  }
+  return vm;
+}
+const delta = `<span class="delta" data-k="deltabox" hidden><span class="n" data-k="change"><span aria-hidden="true" data-k="arrow"></span> <span class="nv" data-k="delta"></span></span><span class="mut ell" data-k="compare"></span></span>`;
+const dot$2 = '<span class="dot live" data-k="dot" hidden></span>';
+const head$2 = `<div class="hd">${dot$2}<span class="lb ell" data-k="label"></span><span class="f1"></span><span class="sm mut n meta" data-k="meta" hidden><span class="pre">${STRINGS$4.synced}</span><span data-k="time"></span></span></div>`;
+const spark = (cls) => `
+<div class="${cls}"><svg viewBox="0 0 ${SPARK_BOX.width} ${SPARK_BOX.height}" preserveAspectRatio="none" role="img" data-k="spark" hidden>
+  <path class="sa" data-k="area"></path><path class="sl" data-k="line"></path>
+</svg></div>`;
+const TEMPLATES$2 = {
+  S: `${head$2}
+<span class="big nv" data-k="value"></span>
+<span class="f1"></span>
+${delta}`,
+  Wide: `
+<div class="cols">
+  <div class="col lhs">${head$2}<span class="xbig nv" data-k="value"></span>${delta}</div>
+  ${spark("rhs")}
+</div>`,
+  M: `${head$2}
+<div class="rowb wrap"><span class="xbig nv" data-k="value"></span>${delta}</div>
+${spark("plot")}
+<div class="target" data-k="target" hidden>
+  <div class="rowb"><span class="lb f1">${STRINGS$4.target}</span><span class="sm n" data-k="tpct"></span></div>
+  <div class="tbar" aria-hidden="true"><svg viewBox="0 0 100 6" preserveAspectRatio="none"><rect class="fill" data-k="fill" x="0" y="0" width="0" height="6"></rect></svg></div>
+</div>
+<span class="sm mut ell" data-k="caption"></span>`
+};
+const SKELETONS$4 = {
+  S: `<div class="hd"><span class="lb ell" data-k="label"></span></div>${sk(60, 30)}<span class="f1"></span>${sk(70, 11)}`,
+  Wide: `<div class="cols">
+  <div class="col lhs"><div class="hd"><span class="lb ell" data-k="label"></span></div>${sk(70, 44)}${sk(85, 11)}</div>
+  <div class="rhs"><span class="sk grow"></span></div>
+</div>`,
+  M: `<div class="hd"><span class="lb ell" data-k="label"></span></div>
+<div class="rowb wrap">${sk(35, 44)}${sk(40, 11)}</div>
+<div class="plot"><span class="sk grow"></span></div>
+<div class="target"><div class="rowb">${sk(20, 9)}<span class="f1"></span>${sk(30, 11)}</div>${sk(100, 6)}</div>
+${sk(65, 11)}`
+};
+class TsMetric extends TsWidget {
+  static template(variant) {
+    return TEMPLATES$2[variant] || TEMPLATES$2.Wide;
+  }
+  static skeleton(variant) {
+    return SKELETONS$4[variant] || SKELETONS$4.Wide;
+  }
+  static metricModel(data, variant, ctx) {
+    return metricModel(data, variant, ctx);
+  }
+  static viewModel(data, variant, ctx) {
+    return metricModel(data, variant, ctx);
+  }
+  update(vm, variant) {
+    const text = (k2, s) => {
+      const el = this.$(`[data-k="${k2}"]`);
+      if (el && el.textContent !== s) el.textContent = s;
+      return el;
+    };
+    const attr = (el, name, v) => {
+      if (el && el.getAttribute(name) !== v) el.setAttribute(name, v);
+    };
+    this.$('[data-k="dot"]').toggleAttribute("hidden", !vm.live);
+    text("label", vm.label);
+    this.$('[data-k="meta"]').toggleAttribute("hidden", !vm.time);
+    text("time", vm.time);
+    text("value", vm.value);
+    const box = this.$('[data-k="deltabox"]');
+    box.toggleAttribute("hidden", !vm.delta);
+    text("arrow", vm.arrow);
+    attr(this.$('[data-k="change"]'), "class", `n ${vm.tone}`);
+    text("delta", vm.delta);
+    text("compare", vm.compare);
+    if (variant === "S") return;
+    const svg = this.$('[data-k="spark"]');
+    svg.toggleAttribute("hidden", !vm.line);
+    attr(svg, "class", vm.tone);
+    attr(svg, "aria-label", vm.sparkLabel);
+    attr(this.$('[data-k="line"]'), "d", vm.line);
+    attr(this.$('[data-k="area"]'), "d", vm.area);
+    if (variant !== "M") return;
+    this.$('[data-k="target"]').toggleAttribute("hidden", !vm.targetPct);
+    text("tpct", vm.targetPct);
+    attr(this.$('[data-k="fill"]'), "width", String(Math.round(vm.targetWidth * 100 * 10) / 10));
+    text("caption", vm.caption);
+  }
+}
+__publicField(TsMetric, "catalogKey", "metric");
+__publicField(TsMetric, "emptyText", STRINGS$4.empty);
+// value is the one required key: a tile without it has nothing to say, and
+// naming it is what lets a wrong-shape object be explained (RFC 0002 §2.7).
+__publicField(TsMetric, "dataShape", {
+  value: "numeric",
+  format: { kind: "string", optional: true },
+  decimals: { kind: "number", optional: true },
+  unit: { kind: "string", optional: true },
+  compact: { kind: "boolean", optional: true },
+  percentPoints: { kind: "boolean", optional: true },
+  previous: { kind: "numeric", optional: true },
+  delta: { kind: "numeric", optional: true },
+  deltaPct: { kind: "numeric", optional: true },
+  compareLabel: { kind: "string", optional: true },
+  goodWhen: { kind: "string", optional: true },
+  series: { kind: "array", optional: true },
+  target: { kind: "numeric", optional: true },
+  caption: { kind: "string", optional: true },
+  asOf: { kind: "time", optional: true },
+  live: { kind: "boolean", optional: true }
+});
+__publicField(TsMetric, "styles", `
+[hidden] { display: none; }
+/* Figures keep their sign beside their digits in right-to-left pages, and a
+   value too wide for its slot clips rather than running into its neighbour. */
+.nv { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: clip; unicode-bidi: isolate; }
+.n { unicode-bidi: isolate; }
+/* On a tile narrower than 200px the meta says '14:05', so the label keeps its room. */
+.meta { flex: none; white-space: nowrap; }
+@container (max-width: 200px) { .pre { display: none; } }
+.delta { display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; font-size: 12px; }
+.delta .n { font-weight: var(--ts-num-weight-small, 500); flex: none; }
+.wrap { flex-wrap: wrap; gap: 2px 20px; }
+.cols { flex: 1; display: flex; gap: 24px; min-height: 0; }
+.lhs { flex: 1.1; min-width: 0; justify-content: space-between; }
+.rhs { flex: 1; min-width: 0; position: relative; }
+@container (max-width: 420px) { .cols { gap: 12px; } .lhs { flex: 1.3; } }
+.plot { flex: 1; min-height: 0; position: relative; }
+.rhs svg, .plot svg { position: absolute; inset: 0; width: 100%; height: 100%; direction: ltr; }
+.sl { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
+.sa { fill: currentColor; fill-opacity: .12; stroke: none; }
+svg.pos { color: var(--ts-profit); }
+svg.neg { color: var(--ts-loss); }
+svg.mut { color: var(--ts-muted); }
+.target { display: flex; flex-direction: column; gap: 6px; }
+.tbar { height: 6px; border-radius: 3px; background: var(--ts-surface-2); overflow: hidden; }
+.tbar svg { display: block; width: 100%; height: 100%; }
+.fill { fill: var(--ts-accent); }
+`);
+const STRINGS$3 = Object.freeze({
+  empty: "No data yet",
+  synced: "synced ",
+  last: "last",
+  noData: "no data",
+  series: "Series"
+});
+const MAX_SERIES = 4;
+const BOX = Object.freeze({ width: 400, height: 100 });
+const PAD$1 = 3;
+const TICK_STEPS = 3;
+const DASH$2 = "—";
+const MINUS = "−";
+const DAY_MS = 864e5;
+const round$1 = (v) => Math.round(v * 10) / 10;
+const isObj = (v) => v !== null && typeof v === "object";
+const str = (v) => typeof v === "string" ? v : "";
+function yColumns(y) {
+  const list = Array.isArray(y) ? y : y === void 0 || y === null ? [] : [y];
+  const out = [];
+  for (const item of list) {
+    if (typeof item === "string" && item) out.push({ key: item, name: item, kind: "line" });
+    else if (isObj(item) && typeof item.key === "string" && item.key) {
+      out.push({ key: item.key, name: str(item.name) || item.key, kind: item.kind === "area" ? "area" : "line" });
+    }
+  }
+  return out;
+}
+const byX = (a, b) => a.x - b.x;
+function readSeries(d, readX) {
+  const out = [];
+  let dropped = 0;
+  if (Array.isArray(d.series)) {
+    d.series.forEach((s, i) => {
+      const item = isObj(s) ? s : {};
+      const points = [];
+      if (Array.isArray(item.points)) {
+        for (const p of item.points) {
+          const x = isObj(p) ? readX(p.x) : NaN;
+          const y = isObj(p) ? toNumber(p.y) : NaN;
+          if (Number.isFinite(x) && Number.isFinite(y)) points.push({ x, y });
+          else dropped++;
+        }
+      }
+      out.push({ name: str(item.name) || `${STRINGS$3.series} ${i + 1}`, kind: item.kind === "area" ? "area" : "line", points: points.sort(byX) });
+    });
+  } else if (Array.isArray(d.rows)) {
+    const cols = yColumns(d.y);
+    const xKey = str(d.x);
+    const lists = cols.map(() => []);
+    for (const row of d.rows) {
+      const x = isObj(row) && xKey ? readX(row[xKey]) : NaN;
+      if (!Number.isFinite(x)) {
+        dropped++;
+        continue;
+      }
+      cols.forEach((col, i) => {
+        const y = toNumber(row[col.key]);
+        if (Number.isFinite(y)) lists[i].push({ x, y });
+        else dropped++;
+      });
+    }
+    cols.forEach((col, i) => out.push({ name: col.name, kind: col.kind, points: lists[i].sort(byX) }));
+  }
+  return { all: out, dropped };
+}
+const dayFormats = /* @__PURE__ */ new Map();
+function dayFormat(fmt, withYear) {
+  const key = `${fmt.locale}|${fmt.timeZone}|${withYear}`;
+  let f = dayFormats.get(key);
+  if (!f) {
+    const opts = withYear ? { day: "numeric", month: "short", year: "numeric" } : { day: "numeric", month: "short" };
+    if (fmt.timeZone) opts.timeZone = fmt.timeZone;
+    dayFormats.set(key, f = new Intl.DateTimeFormat(fmt.locale, opts));
+  }
+  return f;
+}
+function timeLabeller(fmt, x0, x1) {
+  const span = x1 - x0;
+  if (span < DAY_MS) return (t) => fmt.time(t);
+  const f = dayFormat(fmt, span >= 365 * DAY_MS);
+  return (t) => f.format(t);
+}
+function niceDomain(lo, hi, steps = TICK_STEPS) {
+  const span = hi - lo || Math.abs(hi) || 1;
+  const raw = span / steps;
+  const clean = (v) => Number(v.toPrecision(12));
+  for (let e = Math.floor(Math.log10(raw)); e < Math.floor(Math.log10(raw)) + 6; e++) {
+    for (const m of [1, 2, 2.5, 3, 4, 5]) {
+      const step = clean(m * 10 ** e);
+      if (step < raw) continue;
+      const start = clean(Math.floor(lo / step + 1e-9) * step);
+      if (start + steps * step >= hi - step * 1e-9) {
+        const ticks = [];
+        for (let i = 0; i <= steps; i++) ticks.push(clean(start + i * step));
+        return { lo: ticks[0], hi: ticks[steps], step, ticks };
+      }
+    }
+  }
+  return { lo, hi, step: raw, ticks: [lo, lo + raw, lo + 2 * raw, hi] };
+}
+function places(n) {
+  const s = String(Number(n.toPrecision(12)));
+  if (s.includes("e")) return 4;
+  const dot2 = s.indexOf(".");
+  return dot2 < 0 ? 0 : Math.min(4, s.length - dot2 - 1);
+}
+function chartModel(data, variant, ctx) {
+  const fmt = ctx.fmt;
+  const d = isObj(data) && !Array.isArray(data) ? data : {};
+  const format = ["money", "percent", "duration"].includes(d.format) ? d.format : "number";
+  const decimals = Number.isInteger(d.decimals) && d.decimals >= 0 && d.decimals <= 20 ? d.decimals : void 0;
+  const unit = str(d.unit);
+  const timeAxis = d.xType !== "number";
+  const { all, dropped } = readSeries(d, timeAxis ? toTime : toNumber);
+  const series = [];
+  for (let i = 0; i < all.length && i < MAX_SERIES; i++) series.push(all[i]);
+  const show = (n) => {
+    const o = { sign: "negative", decimals };
+    switch (format) {
+      case "money":
+        return fmt.money(n, o);
+      case "percent":
+        return fmt.percent(n, o);
+      case "duration": {
+        const s = fmt.duration(Math.abs(n));
+        return Number.isFinite(n) && n < 0 ? `${MINUS}${s}` : s;
+      }
+      default:
+        return unit ? fmt.unit(n, unit, { decimals }) : fmt.number(n, o);
+    }
+  };
+  const tick = (n, step2) => {
+    const dp = (s) => s < 1 ? places(s) : void 0;
+    switch (format) {
+      case "money":
+        return fmt.money(n, { sign: "negative", compact: true, decimals: dp(step2) });
+      case "percent":
+        return fmt.percent(n, { sign: "negative", decimals: Math.min(3, places(step2 * 100)) });
+      case "duration": {
+        const s = fmt.duration(Math.abs(n));
+        return n < 0 ? `${MINUS}${s}` : s;
+      }
+      default:
+        return unit ? fmt.unit(n, unit, { compact: true, decimals: dp(step2) }) : fmt.number(n, { sign: "negative", compact: true, decimals: dp(step2) });
+    }
+  };
+  const hasArea = series.some((s) => s.kind === "area");
+  const dom = seriesDomain(series.map((s) => s.points), { includeZero: hasArea });
+  const [x0, x1] = dom.x;
+  const hasPoints = series.some((s) => s.points.length > 0);
+  const ticked = variant === "M" || variant === "L" || variant === "XL";
+  let [y0, y1] = dom.y;
+  let ticks = [];
+  let step = 0;
+  if (hasPoints && ticked) {
+    const nice = niceDomain(y0, y1);
+    y0 = nice.lo;
+    y1 = nice.hi;
+    step = nice.step;
+    ticks = nice.ticks;
+  } else if (hasPoints) {
+    const span = y1 - y0 || 1;
+    y1 += span * 0.12;
+    if (!hasArea) y0 -= span * 0.12;
+  }
+  const x = scale(x0, x1, PAD$1, BOX.width - PAD$1);
+  const y = scale(y0, y1, BOX.height - PAD$1, PAD$1);
+  const box = { width: BOX.width, height: BOX.height, pad: PAD$1, xDomain: [x0, x1], yDomain: [y0, y1] };
+  const hasZero = hasPoints && y0 <= 0 && y1 >= 0;
+  const zeroY = round$1(Math.min(BOX.height - PAD$1, Math.max(PAD$1, y(0))));
+  const outSeries = series.map((s) => {
+    const pts = s.points;
+    const n = pts.length;
+    if (!n) return { name: s.name, kind: s.kind, line: "", area: "", dot: "", last: DASH$2, empty: true };
+    const lastPt = pts[n - 1];
+    const last = show(lastPt.y);
+    if (n === 1 && x1 > x0) {
+      const px2 = round$1(x(lastPt.x));
+      return { name: s.name, kind: s.kind, line: "", area: "", dot: `M${px2} ${round$1(y(lastPt.y))}h0`, last, empty: false };
+    }
+    const { line, area } = areaPaths(pts, box);
+    const dotX = n === 1 ? round$1(BOX.width - PAD$1) : round$1(x(lastPt.x));
+    return { name: s.name, kind: s.kind, line, area: s.kind === "area" ? area : "", dot: `M${dotX} ${round$1(y(lastPt.y))}h0`, last, empty: false };
+  });
+  const axis = { start: "", middle: "", end: "" };
+  if (hasPoints) {
+    const label = timeAxis ? timeLabeller(fmt, x0, x1) : (v) => fmt.number(v, { sign: "negative" });
+    axis.start = label(x0);
+    axis.middle = x1 > x0 ? label(x0 + (x1 - x0) / 2) : "";
+    axis.end = x1 > x0 ? label(x1) : "";
+  }
+  let grid = "";
+  const labels = [];
+  if (ticks.length) {
+    for (let i = TICK_STEPS; i >= 0; i--) {
+      labels.push(tick(ticks[i], step));
+      if (ticks[i] === 0) continue;
+      const gy = round$1(PAD$1 + (TICK_STEPS - i) * (BOX.height - 2 * PAD$1) / TICK_STEPS);
+      grid += `${grid ? " " : ""}M0 ${gy}H${BOX.width}`;
+    }
+  }
+  const summary = outSeries.length ? outSeries.map((s) => `${s.name}, ${s.empty ? STRINGS$3.noData : `${STRINGS$3.last} ${s.last}`}`).join("; ") : `${ctx.label}, ${STRINGS$3.noData}`;
+  const vm = {
+    ariaLabel: summary,
+    label: ctx.label,
+    live: d.live === true,
+    time: "",
+    series: outSeries,
+    legend: outSeries.map((s, i) => ({ name: s.name, index: i + 1 })),
+    axis,
+    zeroY,
+    zero: hasZero,
+    zeroPath: hasZero ? `M0 ${zeroY}H${BOX.width}` : "",
+    grid,
+    ticks: labels,
+    dropped,
+    extra: Math.max(0, all.length - MAX_SERIES)
+  };
+  const asOf = toTime(d.asOf);
+  if (Number.isFinite(asOf)) vm.time = fmt.time(asOf);
+  return vm;
+}
+const SLOTS = [1, 2, 3, 4];
+const dot$1 = '<span class="dot live" data-k="dot" hidden></span>';
+const meta = `<span class="sm mut n meta" data-k="meta" hidden><span class="pre">${STRINGS$3.synced}</span><span data-k="time"></span></span>`;
+const head$1 = (wide) => `<div class="hd">${dot$1}<span class="lb ell" data-k="label"></span>${wide ? '<span class="sname sm" data-k="first" hidden><span class="sw c-1" data-k="sw1" aria-hidden="true"></span><span class="ell" data-k="n1"></span></span>' : ""}<span class="f1"></span>${meta}</div>`;
+const marks = (cls, prefix) => SLOTS.map((i) => `<path class="${cls} c-${i}" data-k="${prefix}${i}"></path>`).join("");
+const plot = (ticked) => `<div class="prow"><div class="plot"><svg viewBox="0 0 ${BOX.width} ${BOX.height}" preserveAspectRatio="none" role="img" data-k="svg">${ticked ? '<path class="gl" data-k="grid"></path>' : ""}<path class="zl" data-k="zero"></path>${marks("sa", "a")}${marks("sl", "l")}${marks("sd", "d")}</svg></div>${ticked ? `<div class="yax n" aria-hidden="true"><div class="yin">${[0, 1, 2, 3].map((i) => `<span data-k="y${i}"></span>`).join("")}</div></div>` : ""}</div>`;
+const xax = (gutter) => `<div class="xax n${gutter ? " gut" : ""}" aria-hidden="true"><span data-k="x0"></span><span data-k="x1"></span><span data-k="x2"></span></div>`;
+const chart = (ticked) => `<div class="chartcol">${plot(ticked)}${xax(ticked)}</div>`;
+const legendItem = (i) => `<span class="li" data-k="lg${i}" hidden><span class="sw c-${i}" data-k="sw${i}" aria-hidden="true"></span><span class="ell" data-k="n${i}"></span><span class="n sm" data-k="v${i}"></span></span>`;
+const railItem = (i) => `<div class="ri" data-k="lg${i}" hidden><span class="li"><span class="sw c-${i}" data-k="sw${i}" aria-hidden="true"></span><span class="ell" data-k="n${i}"></span></span><span class="n md" data-k="v${i}"></span></div>`;
+const TEMPLATES$1 = {
+  Wide: `${head$1(true)}${chart(false)}`,
+  M: `${head$1(false)}<div class="legend">${SLOTS.map(legendItem).join("")}</div>${chart(true)}`,
+  L: `${head$1(false)}<div class="crow">${chart(true)}<div class="rail">${SLOTS.map(railItem).join("")}</div></div>`
+};
+TEMPLATES$1.XL = TEMPLATES$1.L;
+const skAxis = '<div class="xax"><span class="sk wx h9"></span><span></span><span class="sk wx h9"></span></div>';
+const skHead = '<div class="hd"><span class="lb ell" data-k="label"></span></div>';
+const skRail = SLOTS.map(() => `<div class="ri">${sk(60, 10)}${sk(40, 16)}</div>`).join("");
+const SKELETONS$3 = {
+  Wide: `${skHead}<div class="chartcol"><span class="sk grow"></span>${skAxis}</div>`,
+  M: `${skHead}<div class="legend">${sk(30, 10)}${sk(25, 10)}</div><div class="chartcol"><span class="sk grow"></span>${skAxis}</div>`,
+  L: `${skHead}<div class="crow"><div class="chartcol"><span class="sk grow"></span>${skAxis}</div><div class="rail">${skRail}</div></div>`
+};
+SKELETONS$3.XL = SKELETONS$3.L;
+class TsChart extends TsWidget {
+  static template(variant) {
+    return TEMPLATES$1[variant] || TEMPLATES$1.M;
+  }
+  static skeleton(variant) {
+    return SKELETONS$3[variant] || SKELETONS$3.M;
+  }
+  static chartModel(data, variant, ctx) {
+    return chartModel(data, variant, ctx);
+  }
+  // The result is spoken once, as docs/ACCESSIBILITY.md asks of a chart: the
+  // region is named by its label alone and the svg's role=img carries the
+  // summary. Folding the summary into the region name too made a screen reader
+  // read it twice.
+  static viewModel(data, variant, ctx) {
+    const vm = chartModel(data, variant, ctx);
+    return { ...vm, chartLabel: vm.ariaLabel, ariaLabel: ctx.label };
+  }
+  update(vm, variant) {
+    const text = (k2, s) => {
+      const el = this.$(`[data-k="${k2}"]`);
+      if (el && el.textContent !== s) el.textContent = s;
+    };
+    const attr = (k2, name, v) => {
+      const el = this.$(`[data-k="${k2}"]`);
+      if (el && el.getAttribute(name) !== v) el.setAttribute(name, v);
+    };
+    const hide = (k2, on) => {
+      const el = this.$(`[data-k="${k2}"]`);
+      if (el) el.toggleAttribute("hidden", on);
+    };
+    if (vm.extra > 0) warnOnce(`series-cap:${this._uid}`, `${describeElement(this)} draws at most ${MAX_SERIES} series; ${MAX_SERIES + vm.extra} were given.`);
+    hide("dot", !vm.live);
+    text("label", vm.label);
+    hide("meta", !vm.time);
+    text("time", vm.time);
+    attr("svg", "aria-label", vm.chartLabel === void 0 ? vm.ariaLabel : vm.chartLabel);
+    for (const i of SLOTS) {
+      const s = vm.series[i - 1];
+      attr(`a${i}`, "d", s ? s.area : "");
+      attr(`l${i}`, "d", s ? s.line : "");
+      attr(`d${i}`, "d", s ? s.dot : "");
+      hide(`lg${i}`, !s);
+      if (variant === "Wide" && i === 1) hide("first", !s);
+      if (!s) continue;
+      attr(`sw${i}`, "class", `sw c-${i}${s.kind === "area" ? " area" : ""}`);
+      text(`n${i}`, s.name);
+      text(`v${i}`, s.last);
+    }
+    attr("zero", "d", vm.zeroPath);
+    attr("grid", "d", vm.grid);
+    for (let i = 0; i < 4; i++) text(`y${i}`, vm.ticks[i] || "");
+    text("x0", vm.axis.start);
+    text("x1", vm.axis.middle);
+    text("x2", vm.axis.end);
+  }
+}
+__publicField(TsChart, "catalogKey", "chart");
+__publicField(TsChart, "emptyText", STRINGS$3.empty);
+// Both forms are optional here because either alone is enough; naming the
+// series items' points is what lets a wrong-shape one be explained.
+__publicField(TsChart, "dataShape", {
+  series: { kind: "array", optional: true, of: { name: { kind: "string", optional: true }, points: "array" } },
+  rows: { kind: "array", optional: true },
+  x: { kind: "string", optional: true },
+  xType: { kind: "string", optional: true },
+  format: { kind: "string", optional: true },
+  decimals: { kind: "number", optional: true },
+  unit: { kind: "string", optional: true },
+  goodWhen: { kind: "string", optional: true },
+  asOf: { kind: "time", optional: true },
+  live: { kind: "boolean", optional: true }
+});
+__publicField(TsChart, "styles", `
+[hidden] { display: none !important; }
+.n { unicode-bidi: isolate; }
+.meta { flex: none; white-space: nowrap; }
+@container (max-width: 200px) { .pre { display: none; } }
+.chartcol { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
+.prow { flex: 1; min-height: 0; display: flex; gap: 8px; }
+.plot { position: relative; flex: 1; min-width: 0; min-height: 0; }
+.plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; direction: ltr; }
+.yax { position: relative; width: 34px; flex: none; font-size: 10px; color: var(--ts-muted); }
+.yin { position: absolute; inset-inline: 0; inset-block: 3%; display: flex; flex-direction: column; justify-content: space-between; }
+.yin span { height: 0; display: flex; align-items: center; justify-content: flex-end; line-height: 1; white-space: nowrap; }
+.xax { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; font-size: 11px; color: var(--ts-muted); min-height: 14px; }
+.xax > :last-child { justify-self: end; }
+.xax.gut { padding-inline-end: 42px; }
+.c-1 { --c: var(--ts-series-1); }
+.c-2 { --c: var(--ts-series-2); }
+.c-3 { --c: var(--ts-series-3); }
+.c-4 { --c: var(--ts-series-4); }
+.sl { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
+.sa { fill: color-mix(in srgb, var(--c) var(--ts-fill, 12%), transparent); stroke: none; }
+.sd { fill: none; stroke: var(--c); stroke-width: 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
+.gl { fill: none; stroke: var(--ts-line); stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
+.zl { fill: none; stroke: var(--ts-axis); stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
+.sw { width: 12px; height: 3px; border-radius: 2px; flex: none; background: var(--c); }
+.sw.area { width: 10px; height: 10px; border-radius: 2px; background: color-mix(in srgb, var(--c) 30%, transparent); box-shadow: inset 0 2px 0 var(--c); }
+.sname { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--ts-muted); }
+.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 11px; }
+.li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
+.legend .n { color: var(--ts-muted); }
+.crow { flex: 1; min-height: 0; display: flex; gap: 20px; }
+.rail { width: 190px; flex: none; display: flex; flex-direction: column; justify-content: center; gap: 14px; border-inline-start: 1px solid var(--ts-line); padding-inline-start: 20px; }
+.ri { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 11px; }
+@container (max-width: 460px) {
+  .crow { flex-direction: column; gap: 10px; }
+  .rail { width: auto; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 8px 16px; border-inline-start: 0; padding-inline-start: 0; }
+}
+`);
+const STRINGS$2 = Object.freeze({ empty: "No trades today", shortLabel: "Today", realised: "Realised", unrealised: "Unrealised", fees: "Fees" });
+const HEADLINE_CHARS$1 = Object.freeze({ S: 10, Wide: 11, M: 14 });
+const CHART_BOX = Object.freeze({ width: 375, height: 100 });
+const PAD = 4;
+const DASH$1 = "—";
+const tone = (v) => {
+  const n = toNumber(v);
+  return n > 0 ? "pos" : n < 0 ? "neg" : "";
+};
+const count = (v, fmt) => {
+  const n = toNumber(v);
+  return Number.isFinite(n) && n >= 0 ? fmt.number(n, { decimals: 0 }) : null;
+};
+const joined = (parts2) => parts2.filter(Boolean).join(" · ");
+function readings(intraday) {
+  if (!Array.isArray(intraday)) return { pts: [], dropped: 0 };
+  const out = [];
+  for (const r of intraday) {
+    const t = toTime(r && r.t);
+    const v = toNumber(r && r.v);
+    if (Number.isFinite(t) && Number.isFinite(v)) out.push({ x: t, y: v });
+  }
+  return { pts: out.sort((a, b) => a.x - b.x), dropped: intraday.length - out.length };
+}
+function valueAt(pts, t) {
+  for (let i = 1; i < pts.length; i++) {
+    const a = pts[i - 1];
+    const b = pts[i];
+    if (t <= b.x) return b.x === a.x ? b.y : a.y + (t - a.x) / (b.x - a.x) * (b.y - a.y);
+  }
+  return pts[pts.length - 1].y;
+}
+function domainOf(window2, pts) {
+  const from = toTime(window2 && window2.from);
+  const to = toTime(window2 && window2.to);
+  if (Number.isFinite(from) && Number.isFinite(to) && to >= from) return [from, to];
+  return pts.length ? [pts[0].x, pts[pts.length - 1].x] : null;
+}
+function midTick([from, to], fmt) {
+  const mid = (from + to) / 2;
+  const minuteOfDay = (t) => {
+    const m = /^(\d{1,2}):(\d{2})/.exec(fmt.time(t));
+    return m ? Number(m[1]) * 60 + Number(m[2]) : NaN;
+  };
+  for (const step of [30, 15]) {
+    const ms = step * 6e4;
+    const m = minuteOfDay(mid);
+    if (!Number.isFinite(m)) break;
+    const below = mid - (m % step * 6e4 + (mid % 6e4 + 6e4) % 6e4);
+    const best = [below, below + ms].filter((t) => t > from && t < to).sort((a, b) => Math.abs(a - mid) - Math.abs(b - mid))[0];
+    if (best !== void 0) return best;
+  }
+  return mid;
+}
+function summaryOf(pts, fmt) {
+  if (!pts.length) return "";
+  const last = pts[pts.length - 1];
+  let lo = pts[0];
+  let hi = pts[0];
+  for (const p of pts) {
+    if (p.y < lo.y) lo = p;
+    if (p.y > hi.y) hi = p;
+  }
+  const at = (p) => p.y === last.y ? "now" : `at ${fmt.time(p.x)}`;
+  return joined([`low ${fmt.money(lo.y, { decimals: 0 })} ${at(lo)}`, `high ${hi.y === last.y ? "" : `${fmt.money(hi.y, { decimals: 0 })} `}${at(hi)}`]);
+}
+function chartOf(data, pts, fmt) {
+  const domain = domainOf(data.window, pts);
+  const mid = domain ? midTick(domain, fmt) : NaN;
+  const ticks = domain ? [domain[0], mid, domain[1]].map((t) => fmt.time(t)) : ["", "", ""];
+  const span = domain ? domain[1] - domain[0] : 0;
+  const frac = span > 0 ? (mid - domain[0]) / span : 0.5;
+  const midAt = Math.round(Math.min(86, Math.max(14, (PAD + frac * (CHART_BOX.width - 2 * PAD)) / CHART_BOX.width * 100)) * 10) / 10;
+  if (pts.length < 2) {
+    return { empty: true, message: "No intraday data yet", ariaLabel: "Intraday P&L: no data yet", ticks, midAt, line: "", area: "", zeroY: 0, lastX: 0, marks: [] };
+  }
+  const { line, area, zeroY, x, y } = linePaths(pts, { ...CHART_BOX, pad: PAD, xDomain: domain });
+  const first = pts[0];
+  const last = pts[pts.length - 1];
+  let low = first;
+  for (const p of pts) if (p.y < low.y) low = p;
+  const marks2 = [];
+  let dropped = 0;
+  for (const m of Array.isArray(data.marks) ? data.marks : []) {
+    const t = toTime(m && m.t);
+    if (!Number.isFinite(t)) {
+      dropped++;
+      continue;
+    }
+    if (t < first.x || t > last.x) continue;
+    const kind = m.kind === "exit" ? "exit" : "entry";
+    const px2 = x(t);
+    if (px2 < 0 || px2 > CHART_BOX.width) continue;
+    const name = m.label ? String(m.label) : kind === "exit" ? "Exit" : "Entry";
+    marks2.push({
+      kind,
+      left: Math.round(px2 / CHART_BOX.width * 1e3) / 10,
+      top: Math.round(y(valueAt(pts, t)) / CHART_BOX.height * 1e3) / 10,
+      title: `${name} · ${fmt.time(t)}`
+    });
+  }
+  return {
+    empty: false,
+    message: "",
+    ariaLabel: `Intraday P&L: low ${fmt.money(low.y, { decimals: 0 })}, now ${fmt.money(last.y)}`,
+    ticks,
+    midAt,
+    line,
+    area,
+    zeroY,
+    lastX: Math.round(x(last.x) * 10) / 10,
+    marks: marks2,
+    droppedMarks: dropped
+  };
+}
+function todayPnlModel(data, variant, ctx) {
+  const fmt = ctx.fmt;
+  const d = data || {};
+  const net = toNumber(d.net);
+  const asOf = toTime(d.asOf);
+  const time = Number.isFinite(asOf) ? fmt.time(asOf) : "";
+  const closed = count(d.closedCount, fmt);
+  const open = count(d.openCount, fmt);
+  const counts = joined([closed !== null && `${closed} closed`, open !== null && `${open} open`]);
+  const fees = toNumber(d.fees);
+  const feesText = Number.isFinite(fees) ? fmt.money(-Math.abs(fees)) : DASH$1;
+  const feesPlain = Number.isFinite(fees) ? fmt.money(Math.abs(fees), { sign: "negative" }) : null;
+  const vm = {
+    ariaLabel: Number.isFinite(net) ? `${ctx.label}, ${fmt.money(net)}` : ctx.label,
+    live: d.live === true,
+    label: variant === "S" ? "Today" : ctx.label,
+    time,
+    net: fmt.fit(d.net, HEADLINE_CHARS$1[variant] || HEADLINE_CHARS$1.Wide),
+    netTone: tone(d.net),
+    realized: fmt.money(d.realized),
+    realizedTone: tone(d.realized),
+    unrealized: fmt.money(d.unrealized),
+    unrealizedTone: tone(d.unrealized),
+    fees: feesText,
+    // Rows the tile couldn't read. Only the M variant draws the series, so
+    // only it can say; the others have nothing to drop.
+    dropped: 0
+  };
+  if (variant === "S") {
+    vm.footer = joined([counts, feesPlain && `fees ${feesPlain}`]);
+  } else if (variant === "Wide") {
+    vm.note = joined(["net of fees", time]);
+  } else if (variant === "M") {
+    const { pts, dropped } = readings(d.intraday);
+    vm.counts = counts;
+    vm.summary = summaryOf(pts, fmt);
+    vm.chart = chartOf(d, pts, fmt);
+    vm.dropped = dropped + (vm.chart.droppedMarks || 0);
+  }
+  return vm;
+}
+const dot = '<span class="dot live" data-k="dot" hidden></span>';
+const TEMPLATES = {
+  S: `
+<div class="hd">${dot}<span class="lb ell" data-k="label"></span><span class="f1"></span><span class="sm mut n" data-k="time"></span></div>
+<span class="big nv" data-k="net"></span>
+<span class="f1"></span>
+<span class="sm mut ell" data-k="footer"></span>`,
+  Wide: `
+<div class="cols">
+  <div class="col lhs">
+    <div class="hd">${dot}<span class="lb ell" data-k="label"></span></div>
+    <span class="xbig nv" data-k="net"></span>
+    <span class="sm mut" data-k="note"></span>
+  </div>
+  <div class="col rhs">
+    <div class="rowb"><span class="lb f1">${STRINGS$2.realised}</span><span class="n" data-k="realized"></span></div>
+    <div class="rowb"><span class="lb f1">${STRINGS$2.unrealised}</span><span class="n" data-k="unrealized"></span></div>
+    <div class="rowb"><span class="lb f1">${STRINGS$2.fees}</span><span class="n mut" data-k="fees"></span></div>
+  </div>
+</div>`,
+  M: `
+<div class="hd">${dot}<span class="lb ell" data-k="label"></span><span class="f1"></span><span class="sm mut" data-k="counts"></span></div>
+<div class="rowb base"><span class="xbig nv" data-k="net"></span><span class="sm mut" data-k="summary"></span></div>
+<div class="chart" part="chart">
+  <svg viewBox="0 0 ${CHART_BOX.width} ${CHART_BOX.height}" preserveAspectRatio="none" role="img" data-k="svg">
+    <defs>
+      <clipPath id="up"><rect x="0" y="0" width="${CHART_BOX.width}" data-k="clip-up"></rect></clipPath>
+      <clipPath id="dn"><rect x="0" width="${CHART_BOX.width}" data-k="clip-dn"></rect></clipPath>
+    </defs>
+    <line class="lz" x1="0" x2="${CHART_BOX.width}" data-k="zero"></line>
+    <line class="lz" y1="0" y2="${CHART_BOX.height}" data-k="now"></line>
+    <path class="ap" clip-path="url(#up)" data-k="area-up"></path>
+    <path class="an" clip-path="url(#dn)" data-k="area-dn"></path>
+    <path class="lp" clip-path="url(#up)" data-k="line-up"></path>
+    <path class="ln" clip-path="url(#dn)" data-k="line-dn"></path>
+  </svg>
+  <div class="marks" data-k="marks"></div>
+  <div class="nodata sm" data-k="nodata" hidden></div>
+</div>
+<div class="axis sm mut n"><span data-k="t0"></span><span class="mid" data-k="t1"></span><span data-k="t2"></span></div>
+<div class="g3 sep trio">
+  <div class="col"><span class="lb">${STRINGS$2.realised}</span><span class="n md" data-k="realized"></span></div>
+  <div class="col"><span class="lb">${STRINGS$2.unrealised}</span><span class="n md" data-k="unrealized"></span></div>
+  <div class="col"><span class="lb">${STRINGS$2.fees}</span><span class="n md mut" data-k="fees"></span></div>
+</div>`
+};
+const SKELETONS$2 = {
+  S: `<div class="hd"><span class="lb ell">${STRINGS$2.shortLabel}</span></div>${sk(65, 30)}<span class="f1"></span>${sk(80, 11)}`,
+  Wide: `<div class="cols">
+  <div class="col lhs"><div class="hd"><span class="lb ell" data-k="label"></span></div>${sk(75, 44)}${sk(60, 11)}</div>
+  <div class="col rhs">${`<div class="rowb">${sk(40, 9)}<span class="f1"></span>${sk(35, 13)}</div>`.repeat(3)}</div>
+</div>`,
+  M: `<div class="hd"><span class="lb ell" data-k="label"></span></div>
+<div class="rowb base">${sk(40, 44)}${sk(30, 11)}</div>
+<span class="sk grow"></span>
+<div class="axis">${sk("x", 9)}${sk("x", 9)}${sk("x", 9)}</div>
+<div class="g3 sep trio">${`<div class="col">${sk(60, 9)}${sk(75, 16)}</div>`.repeat(3)}</div>`
+};
+class TsTodayPnl extends TsWidget {
+  static template(variant) {
+    return TEMPLATES[variant] || TEMPLATES.Wide;
+  }
+  static skeleton(variant) {
+    return SKELETONS$2[variant] || SKELETONS$2.Wide;
+  }
+  static viewModel(data, variant, ctx) {
+    return todayPnlModel(data, variant, ctx);
+  }
+  update(vm, variant) {
+    const text = (k2, s) => {
+      const el = this.$(`[data-k="${k2}"]`);
+      if (el && el.textContent !== s) el.textContent = s;
+      return el;
+    };
+    const toned = (k2, base, s, t) => {
+      const el = text(k2, s);
+      if (el) el.className = t ? `${base} ${t}` : base;
+    };
+    this.$('[data-k="dot"]').toggleAttribute("hidden", !vm.live);
+    text("label", vm.label);
+    if (variant === "S") {
+      text("time", vm.time);
+      toned("net", "big nv", vm.net, vm.netTone);
+      text("footer", vm.footer);
+      return;
+    }
+    toned("net", "xbig nv", vm.net, vm.netTone);
+    toned("realized", variant === "M" ? "n md" : "n", vm.realized, vm.realizedTone);
+    toned("unrealized", variant === "M" ? "n md" : "n", vm.unrealized, vm.unrealizedTone);
+    text("fees", vm.fees);
+    if (variant === "Wide") {
+      text("note", vm.note);
+      return;
+    }
+    text("counts", vm.counts);
+    text("summary", vm.summary);
+    this._updateChart(vm.chart);
+    text("t0", vm.chart.ticks[0]);
+    text("t1", vm.chart.ticks[1]).style.left = `${vm.chart.midAt}%`;
+    text("t2", vm.chart.ticks[2]);
+  }
+  _updateChart(c) {
+    const svg = this.$('[data-k="svg"]');
+    svg.setAttribute("aria-label", c.ariaLabel);
+    svg.toggleAttribute("hidden", c.empty);
+    const nodata = this.$('[data-k="nodata"]');
+    nodata.textContent = c.message;
+    nodata.toggleAttribute("hidden", !c.empty);
+    const set = (k2, attrs) => {
+      const el = this.$(`[data-k="${k2}"]`);
+      for (const name in attrs) el.setAttribute(name, attrs[name]);
+    };
+    set("clip-up", { height: c.zeroY });
+    set("clip-dn", { y: c.zeroY, height: CHART_BOX.height - c.zeroY });
+    set("zero", { y1: c.zeroY, y2: c.zeroY });
+    set("now", { x1: c.lastX, x2: c.lastX });
+    set("area-up", { d: c.area });
+    set("area-dn", { d: c.area });
+    set("line-up", { d: c.line });
+    set("line-dn", { d: c.line });
+    this.$('[data-k="now"]').toggleAttribute("hidden", c.empty);
+    this.$('[data-k="zero"]').toggleAttribute("hidden", c.empty);
+    const box = this.$('[data-k="marks"]');
+    const key = JSON.stringify(c.marks);
+    if (box._key === key) return;
+    box._key = key;
+    box.replaceChildren(
+      ...c.marks.map((m) => {
+        const el = document.createElement("span");
+        el.className = `mk ${m.kind}`;
+        el.style.left = `${m.left}%`;
+        el.style.top = `${m.top}%`;
+        el.title = m.title;
+        el.setAttribute("role", "img");
+        el.setAttribute("aria-label", m.title);
+        return el;
+      })
+    );
+  }
+}
+__publicField(TsTodayPnl, "catalogKey", "todayPnl");
+__publicField(TsTodayPnl, "emptyText", STRINGS$2.empty);
+// The headline figures are required: a tile without them has nothing to say,
+// and naming them is what lets a wrong-shape object be explained (RFC 0002 §2.7).
+__publicField(TsTodayPnl, "dataShape", {
+  net: "numeric",
+  realized: "numeric",
+  unrealized: "numeric",
+  fees: "numeric",
+  closedCount: { kind: "number", optional: true },
+  openCount: { kind: "number", optional: true },
+  intraday: { kind: "array", optional: true, of: { t: "time", v: "numeric" } },
+  marks: { kind: "array", optional: true, of: { t: "time", kind: "string" } },
+  window: { kind: "object", optional: true, of: { from: "time", to: "time" } },
+  asOf: { kind: "time", optional: true },
+  live: { kind: "boolean", optional: true }
+});
+__publicField(TsTodayPnl, "styles", `
+[hidden] { display: none; }
+/* Clip rather than overflow: a headline too wide for its slot must never
+   run into the column beside it. fit() and the tile's scaled type make
+   that rare; this makes it harmless. */
+.nv { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: clip; }
+.cols { flex: 1; display: flex; gap: 24px; align-items: stretch; min-height: 0; }
+.lhs { flex: 1.1; min-width: 0; justify-content: space-between; }
+.rhs { flex: 1; min-width: 0; justify-content: center; gap: 10px; }
+/* Narrow tile (a 2-column phone): the three figures stack label over value
+   and shrink to their content, so the headline gets the rest of the width.
+   The note under the headline stays; it sits below the number, not beside it. */
+@container (max-width: 420px) {
+  .cols { gap: 12px; }
+  .lhs { flex: 1 1 0; }
+  .rhs { flex: 0 0 auto; gap: 6px; }
+  .rhs .rowb { flex-direction: column; align-items: flex-end; gap: 0; }
+}
+.base { gap: 2px 20px; flex-wrap: wrap; }
+.chart { position: relative; flex: 1; min-height: 0; }
+.chart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
+.marks { position: absolute; inset: 0; pointer-events: none; }
+.mk {
+  position: absolute; box-sizing: content-box; width: 8px; height: 8px; margin: -4px 0 0 -4px;
+  border-radius: 50%; border: 2px solid var(--ts-surface); pointer-events: auto;
+}
+.mk.entry { background: var(--ts-accent); }
+.mk.exit { background: var(--ts-ink); }
+.nodata { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ts-muted); }
+.nodata[hidden] { display: none; }
+.axis { position: relative; display: flex; justify-content: space-between; min-height: 1.4em; }
+.axis .mid { position: absolute; top: 0; transform: translateX(-50%); }
+.trio { padding-top: 10px; }
+`);
+const RANGES = ["1W", "1M", "3M", "YTD", "All"];
+const HEADLINE_CHARS = { Wide: 10, M: 12, XL: 12 };
+const DIMS = { Wide: [400, 100], M: [600, 160], XL: [900, 220] };
+const DASH = "—";
+const STRINGS$1 = Object.freeze({ empty: "No trading days yet" });
+function normalizeRange(range) {
+  if (typeof range !== "string") return "All";
+  const wanted = range.trim().toUpperCase();
+  return RANGES.find((r) => r.toUpperCase() === wanted) || "All";
+}
+const parts = (iso) => [Number(iso.slice(0, 4)), Number(iso.slice(5, 7)), Number(iso.slice(8, 10))];
+const two = (n) => String(n).padStart(2, "0");
+function shiftDays(iso, n) {
+  const [y, m, d] = parts(iso);
+  return new Date(Date.UTC(y, m - 1, d) + n * 864e5).toISOString().slice(0, 10);
+}
+function shiftMonths(iso, n) {
+  const [y, m, d] = parts(iso);
+  const t = y * 12 + (m - 1) - n;
+  const ny = Math.floor(t / 12);
+  const nm = t % 12 + 1;
+  const last = new Date(Date.UTC(ny, nm, 0)).getUTCDate();
+  return `${String(ny).padStart(4, "0")}-${two(nm)}-${two(Math.min(d, last))}`;
+}
+function rangeStart(latest, range) {
+  switch (normalizeRange(range)) {
+    case "1W":
+      return shiftDays(latest, -6);
+    case "1M":
+      return shiftMonths(latest, 1);
+    case "3M":
+      return shiftMonths(latest, 3);
+    case "YTD":
+      return `${latest.slice(0, 4)}-01-01`;
+    default:
+      return "";
+  }
+}
+function usable(days, timeZone) {
+  if (!Array.isArray(days)) return [];
+  const out = [];
+  for (const d of days) {
+    if (!d || !Number.isFinite(toNumber(d.pnl))) continue;
+    const date = toDay(d.date, timeZone);
+    if (date !== null) out.push(date === d.date ? d : { ...d, date });
+  }
+  return out;
+}
+function filterRange(days, range, timeZone = "UTC") {
+  const rows = usable(days, timeZone);
+  const r = normalizeRange(range);
+  if (r === "All" || !rows.length) return rows;
+  let latest = rows[0].date;
+  for (const d of rows) if (d.date > latest) latest = d.date;
+  const from = rangeStart(latest, r);
+  return rows.filter((d) => d.date >= from);
+}
+const monthFormats = /* @__PURE__ */ new Map();
+function monthName(fmt, iso) {
+  const key = String(fmt.locale);
+  let f = monthFormats.get(key);
+  if (!f) monthFormats.set(key, f = new Intl.DateTimeFormat(fmt.locale, { month: "short", timeZone: "UTC" }));
+  const [y, m, d] = parts(iso);
+  return f.format(Date.UTC(y, m - 1, d));
+}
+const sign = (v) => v > 1e-9 ? 1 : v < -1e-9 ? -1 : 0;
+const colour = (v) => sign(v) > 0 ? "pos" : sign(v) < 0 ? "neg" : "";
+const plural = (n, word, shown = n) => `${shown} ${word}${n === 1 ? "" : "s"}`;
+function equityCurveModel(data, variant, ctx) {
+  const { fmt } = ctx;
+  const label = ctx.label || WIDGETS.equityCurve.label;
+  const d = data && typeof data === "object" ? data : {};
+  const range = normalizeRange(ctx.range);
+  const v = DIMS[variant] ? variant : "M";
+  const [width, height] = DIMS[v];
+  const timeZone = fmt.timeZone || "UTC";
+  const all = usable(d.days, timeZone);
+  const rows = filterRange(all, range, timeZone);
+  const wholeSeries = rows.length === all.length;
+  const series = equitySeries(rows, { timeZone });
+  const stats = equityStats(rows, { timeZone });
+  const n = series.length;
+  const empty = n === 0;
+  const givenTrades = toNumber(d.trades);
+  const dayTrades = rows.some((r) => typeof r.trades === "number" && Number.isFinite(r.trades));
+  const trades = wholeSeries && Number.isFinite(givenTrades) ? givenTrades : dayTrades ? stats.trades : null;
+  const givenFees = toNumber(d.fees);
+  const fees = wholeSeries && Number.isFinite(givenFees) ? fmt.money(givenFees, { sign: "negative" }) : "";
+  const tradesText = trades === null ? "" : plural(trades, "trade", fmt.number(trades, { decimals: 0 }));
+  const net = fmt.money(stats.net);
+  const peak = fmt.money(stats.peak);
+  const maxDrawdown = fmt.money(-stats.maxDrawdown);
+  let lowest = n ? Infinity : 0;
+  for (const s of series) lowest = Math.min(lowest, s.equity);
+  const dayWord = plural(n, "day");
+  const tradingDays = plural(n, "trading day");
+  const chartLabel = empty ? `${label}: no trading days in this range` : `${label}: peak ${peak}, lowest ${fmt.money(lowest)}, ends at ${net}`;
+  const points = series.map((s, i) => ({ x: i, y: s.equity }));
+  const geo = linePaths(points, { width, height });
+  let peakLine = "";
+  let band = "";
+  if (v === "XL" && n > 1) {
+    const peaks = series.map((s, i) => ({ x: i, y: s.peak }));
+    peakLine = linePath(peaks, geo.x, geo.y);
+    band = bandPath(points, peaks, geo.x, geo.y);
+  }
+  const names = empty ? [] : [series[0], series[Math.floor((n - 1) / 2)], series[n - 1]].map((s) => monthName(fmt, s.date));
+  let axis;
+  if (v === "XL") {
+    const [a, b, c] = empty ? ["", "", ""] : names;
+    const mid = b === a || b === c ? "" : b;
+    axis = [a, mid, c === a && !mid ? "" : c];
+  } else {
+    axis = empty ? ["", ""] : [names[0], names[2] === names[0] ? "" : names[2]];
+  }
+  return {
+    variant: v,
+    range,
+    // Rows the series couldn't use: no readable date or no finite P&L.
+    dropped: Array.isArray(d.days) ? d.days.length - all.length : 0,
+    ranges: RANGES.map((value) => ({ value, on: value === range })),
+    live: d.live === true,
+    empty,
+    // The short word fits Wide's 170px column; a host's own label is used as given.
+    label: v === "Wide" ? `${label === WIDGETS.equityCurve.label ? "Equity" : label} · ${dayWord}` : label,
+    headline: fmt.fit(stats.net, HEADLINE_CHARS[v]),
+    net,
+    netClass: colour(stats.net),
+    peak,
+    peakClass: colour(stats.peak),
+    peakNote: `peak ${peak}`,
+    maxDrawdown,
+    maxDrawdownClass: colour(-stats.maxDrawdown),
+    tradingDays: n,
+    sub: `over ${tradingDays}`,
+    daysLine: tradesText ? `${n} · ${tradesText}` : String(n),
+    netOfFees: fees !== "",
+    third: fees ? { label: "Fees", value: fees } : { label: "Trades", value: trades === null ? DASH : fmt.number(trades, { decimals: 0 }) },
+    axis,
+    chart: { width, height, line: geo.line, area: geo.area, zeroY: geo.zeroY, peakLine, band },
+    chartLabel,
+    ariaLabel: empty ? `${label}, no trading days in this range` : `${label}, ${net} over ${tradingDays}`
+  };
+}
+const k = (name) => `[data-k="${name}"]`;
+function chartMarkup(v) {
+  const [w, h] = DIMS[v];
+  const xl = v === "XL";
+  return `<div class="plot">
+<svg data-k="svg" viewBox="0 0 ${w} ${h}" preserveAspectRatio="none" role="img" aria-label="">
+<defs><clipPath id="cu"><rect data-k="clipUp" x="0" y="0" width="${w}" height="0"></rect></clipPath><clipPath id="cd"><rect data-k="clipDn" x="0" y="0" width="${w}" height="0"></rect></clipPath></defs>
+${xl ? '<path class="dd" data-k="band" d=""></path>' : ""}
+<line class="lz" data-k="zero" x1="0" x2="${w}" y1="0" y2="0"></line>
+${xl ? '<path class="lz" data-k="peakLine" fill="none" d=""></path>' : '<path class="ap" data-k="areaUp" d="" clip-path="url(#cu)"></path><path class="an" data-k="areaDn" d="" clip-path="url(#cd)"></path>'}
+<path class="lp" data-k="lineUp" d="" clip-path="url(#cu)"></path><path class="ln" data-k="lineDn" d="" clip-path="url(#cd)"></path>
+</svg>
+<div class="empty" data-k="empty" hidden>No trading days in this range</div>
+</div>`;
+}
+function rangeButtons() {
+  const buttons = RANGES.map((r) => `<button type="button" class="btn" data-range="${r}" aria-pressed="false">${r}</button>`).join("");
+  return `<div role="group" aria-label="Range" class="row rng">${buttons}</div>`;
+}
+const plotBlock = '<div class="plot"><span class="sk"></span></div>';
+const stat = (a = 60, b = 75) => `<div class="col">${sk(a, 9)}${sk(b, 16)}</div>`;
+const head = '<div class="hd"><span class="lb" data-k="label"></span></div>';
+const SKELETONS$1 = {
+  Wide: `<div class="rowl"><div class="col side"><span class="lb" data-k="label"></span>${sk(70, 30)}${sk(80, 11)}</div>${plotBlock}</div>`,
+  M: `${head}<div class="rowb">${sk(40, 30)}${sk(25, 11)}</div>${plotBlock}<div class="row">${sk("x", 9)}<span class="f1"></span>${sk("x", 9)}</div><div class="g3 sep stats">${stat()}${stat()}${stat()}</div>`,
+  XL: `<div class="rowl xl"><div class="chartcol">${head}${plotBlock}<div class="row">${sk("x", 9)}<span class="f1"></span>${sk("x", 9)}<span class="f1"></span>${sk("x", 9)}</div></div><div class="col sep rail">${stat(50, 70).repeat(4)}</div></div>`
+};
+class TsEquityCurve extends TsWidget {
+  static get observedAttributes() {
+    return [...super.observedAttributes, "range"];
+  }
+  static template(variant) {
+    if (variant === "Wide") {
+      return `<div class="rowl">
+<div class="col side"><span class="lb" data-k="label"></span><span class="big" data-k="net"></span><span class="sm mut" data-k="peakNote"></span></div>
+${chartMarkup("Wide")}
+</div>`;
+    }
+    if (variant === "XL") {
+      return `<div class="rowl xl">
+<div class="chartcol">
+<div class="hd"><span class="lb" data-k="label"></span><span class="f1"></span>${rangeButtons()}</div>
+${chartMarkup("XL")}
+<div class="row sm mut"><span data-k="ax0"></span><span class="f1"></span><span data-k="ax1"></span><span class="f1"></span><span data-k="ax2"></span></div>
+</div>
+<div class="col sep rail">
+<div class="col"><span class="lb">Net</span><span class="big" data-k="net"></span></div>
+<div class="col"><span class="lb">Peak</span><span class="n md" data-k="peak"></span></div>
+<div class="col"><span class="lb">Max drawdown</span><span class="n md" data-k="maxDrawdown"></span><span class="sm mut">shaded on the chart</span></div>
+<div class="col"><span class="lb">Trading days</span><span class="n md" data-k="daysLine"></span></div>
+</div>
+</div>`;
+    }
+    return `<div class="hd"><span class="lb" data-k="label"></span><span class="dot live" data-k="live" hidden></span><span class="f1"></span><span class="sm mut" data-k="fees" hidden>net of fees</span></div>
+<div class="rowb"><span class="big" data-k="net"></span><span class="sm mut" data-k="sub"></span></div>
+${chartMarkup("M")}
+<div class="row sm mut"><span data-k="ax0"></span><span class="f1"></span><span data-k="ax1"></span></div>
+<div class="g3 sep stats">
+<div class="col"><span class="lb">Peak</span><span class="n md" data-k="peak"></span></div>
+<div class="col"><span class="lb">Max drawdown</span><span class="n md" data-k="maxDrawdown"></span></div>
+<div class="col"><span class="lb" data-k="thirdLabel"></span><span class="n md" data-k="thirdValue"></span></div>
+</div>`;
+  }
+  static skeleton(variant) {
+    return SKELETONS$1[variant] || SKELETONS$1.M;
+  }
+  // The range is the one thing the pure model needs beyond the data and formatter.
+  viewContext() {
+    return { range: this.range };
+  }
+  static viewModel(data, variant, ctx) {
+    return equityCurveModel(data, variant, ctx);
+  }
+  get range() {
+    return normalizeRange(this.getAttribute("range"));
+  }
+  set range(value) {
+    if (value === null || value === void 0 || value === "") this.removeAttribute("range");
+    else this.setAttribute("range", value);
+    this.requestRender();
+  }
+  constructor() {
+    super();
+    this._section.addEventListener("click", (e) => {
+      const button = e.target && e.target.closest ? e.target.closest("button[data-range]") : null;
+      if (!button) return;
+      const value = button.getAttribute("data-range");
+      if (value === this.range) return;
+      const previous = this.range;
+      this.range = value;
+      if (!this.emit("range", { value })) this.range = previous;
+    });
+  }
+  connectedCallback() {
+    this.upgrade("range");
+    super.connectedCallback();
+  }
+  update(vm, variant) {
+    const text = (key, value) => {
+      const el = this.$(k(key));
+      if (el && el.textContent !== value) el.textContent = value;
+    };
+    const attr = (key, name, value) => {
+      const el = this.$(k(key));
+      if (el) el.setAttribute(name, value);
+    };
+    const cls = (key, base, extra) => attr(key, "class", extra ? `${base} ${extra}` : base);
+    text("label", vm.label);
+    text("net", vm.headline);
+    cls("net", "big", vm.netClass);
+    if (variant === "Wide") text("peakNote", vm.peakNote);
+    if (variant !== "Wide") {
+      text("peak", vm.peak);
+      cls("peak", "n md", vm.peakClass);
+      text("maxDrawdown", vm.maxDrawdown);
+      cls("maxDrawdown", "n md", vm.maxDrawdownClass);
+    }
+    if (variant === "M") {
+      text("sub", vm.sub);
+      const net = this.$(k("fees"));
+      if (net) net.toggleAttribute("hidden", !vm.netOfFees);
+      text("thirdLabel", vm.third.label);
+      text("thirdValue", vm.third.value);
+      const live = this.$(k("live"));
+      if (live) live.toggleAttribute("hidden", !vm.live);
+    }
+    if (variant === "XL") {
+      text("daysLine", vm.daysLine);
+      for (const r of vm.ranges) {
+        const button = this.$(`button[data-range="${r.value}"]`);
+        if (!button) continue;
+        button.setAttribute("class", r.on ? "btn on" : "btn");
+        button.setAttribute("aria-pressed", r.on ? "true" : "false");
+      }
+    }
+    vm.axis.forEach((name, i) => text(`ax${i}`, name));
+    const c = vm.chart;
+    attr("svg", "aria-label", vm.chartLabel);
+    this.$(k("svg")).toggleAttribute("hidden", vm.empty);
+    this.$(k("empty")).toggleAttribute("hidden", !vm.empty);
+    attr("zero", "y1", c.zeroY);
+    attr("zero", "y2", c.zeroY);
+    attr("clipUp", "height", c.zeroY);
+    attr("clipDn", "y", c.zeroY);
+    attr("clipDn", "height", c.height - c.zeroY);
+    attr("lineUp", "d", c.line);
+    attr("lineDn", "d", c.line);
+    if (variant === "XL") {
+      attr("band", "d", c.band);
+      attr("peakLine", "d", c.peakLine);
+    } else {
+      attr("areaUp", "d", c.area);
+      attr("areaDn", "d", c.area);
+    }
+  }
+}
+__publicField(TsEquityCurve, "catalogKey", "equityCurve");
+__publicField(TsEquityCurve, "emptyText", STRINGS$1.empty);
+__publicField(TsEquityCurve, "dataShape", {
+  days: { kind: "array", of: { date: "time", pnl: "numeric" } },
+  fees: { kind: "numeric", optional: true },
+  trades: { kind: "number", optional: true },
+  asOf: { kind: "time", optional: true },
+  live: { kind: "boolean", optional: true }
+});
+__publicField(TsEquityCurve, "styles", `
+[hidden] { display: none !important; }
+.rowl { flex: 1; min-height: 0; display: flex; flex-direction: row; align-items: stretch; gap: 20px; }
+.rowl.xl { gap: 24px; }
+.plot { position: relative; flex: 1; min-height: 0; min-width: 0; }
+.plot svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
+.plot .empty { position: absolute; inset: 0; font-size: 12px; }
+.plot .sk { position: absolute; inset: 0; width: auto; }
+.dd { fill: color-mix(in srgb, var(--ts-loss) 22%, transparent); }
+.side { width: 170px; flex: none; justify-content: space-between; }
+.chartcol { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
+.rng { gap: 4px; }
+.rail { width: 220px; flex: none; gap: 16px; }
+.rail.sep { border-top: 0; border-left: 1px solid var(--ts-line); padding-left: 24px; }
+.stats { padding-top: 10px; }
+`);
+const DAY = 864e5;
+const MINUTE = 6e4;
+const MAX_TICKS = 2e3;
+const THIN_WINDOW = 60 * MINUTE;
+const MIN_TICK_GAP = 6;
+const MAX_TIMEFRAMES = 2;
+const GLYPHS = ["│", "┃"];
+const envCache = /* @__PURE__ */ new Map();
+function zoneEnv(timeZone, base) {
+  const key = `${base.locale}|${base.currency}|${timeZone}`;
+  let env = envCache.get(key);
+  if (!env) {
+    if (envCache.size > 20) envCache.clear();
+    const fmt = createFormatter({ locale: base.locale, currency: base.currency, timeZone });
+    const nameFmt = new Intl.DateTimeFormat(fmt.locale, { timeZone: fmt.timeZone, timeZoneName: "short" });
+    const dayFmt = new Intl.DateTimeFormat(fmt.locale, { timeZone: fmt.timeZone, weekday: "short" });
+    env = {
+      fmt,
+      // The short name can change with daylight saving, so it is read per instant.
+      name(t) {
+        const part = nameFmt.formatToParts(t).find((p) => p.type === "timeZoneName");
+        return part ? part.value : "";
+      },
+      weekday: (t) => dayFmt.format(t)
+    };
+    envCache.set(key, env);
+  }
+  return env;
+}
+const round = (v, places2) => {
+  const k2 = 10 ** places2;
+  return Math.round(v * k2) / k2;
+};
+const words = (env, ms) => env.fmt.duration(ms, { style: "words" });
+function validCalendar(c) {
+  return !!c && ["state", "session", "hours", "candleClose"].every((m) => typeof c[m] === "function");
+}
+function lookup(calendar, id) {
+  if (!validCalendar(calendar)) return { error: "No calendar" };
+  try {
+    return { spec: calendar.session(id) };
+  } catch (err) {
+    if (err instanceof RangeError) return { error: `Unknown session ${id}` };
+    throw err;
+  }
+}
+function laneState(calendar, id, spec, now) {
+  const st = calendar.state(id, now);
+  let win = null;
+  if (st.open) win = { open: st.startedAt, close: st.closesAt };
+  else if (st.opensAt !== null) win = calendar.hours(id, localDate(st.opensAt, spec.timeZone));
+  return {
+    open: st.open,
+    win,
+    opensAt: st.opensAt,
+    closesAt: st.closesAt,
+    progress: st.open ? round(st.progress * 100, 2) : 0,
+    // More than a day away, a weekday says more than a duration does.
+    far: !st.open && st.opensAt !== null && st.opensAt - now > DAY
+  };
+}
+const tickCache = /* @__PURE__ */ new Map();
+function tickItems(win, tfs) {
+  const key = `${win.open}|${win.close}|${tfs.join(",")}`;
+  let ticks = tickCache.get(key);
+  if (!ticks) {
+    if (tickCache.size > 32) tickCache.clear();
+    const items = [];
+    const length = win.close - win.open;
+    const steps = tfs.map((tf) => round(tf * MINUTE / length * 100, 3));
+    tfs.forEach((tf, k2) => {
+      const step = tf * MINUTE;
+      if (length / step > MAX_TICKS) return;
+      for (let off = step; off < length; off += step) items.push({ l: round(off / length * 100, 3), k: k2, at: win.open + off });
+    });
+    ticks = { key, items, steps };
+    tickCache.set(key, ticks);
+  }
+  return ticks;
+}
+function visibleTicks(lane, now, railPx) {
+  const ticks = lane.ticks;
+  const thickOk = ticks.steps.length > 1 && ticks.steps[1] / 100 * railPx >= MIN_TICK_GAP;
+  const items = [];
+  let lo = -1;
+  let hi = -1;
+  ticks.items.forEach((t, i) => {
+    if (t.k === 0) {
+      if (lane.open && t.at > now && t.at <= now + THIN_WINDOW) {
+        if (lo < 0) lo = i;
+        hi = i;
+        items.push(t);
+      }
+    } else if (thickOk) items.push(t);
+  });
+  return { key: `${ticks.key}|${lo}|${hi}|${thickOk ? 1 : 0}`, items };
+}
+const validTimeframe = (t) => typeof t === "number" && Number.isFinite(t) && t > 0;
+function sanitiseTimeframes(list) {
+  if (!Array.isArray(list)) return [];
+  return list.filter(validTimeframe).slice(0, MAX_TIMEFRAMES);
+}
+function timeframeText(tf) {
+  return tf >= 60 && tf % 60 === 0 ? `${tf / 60}h` : `${tf}m`;
+}
+function opensText(env, st, withTime) {
+  if (st.far) return withTime ? `opens ${env.weekday(st.opensAt)} ${env.fmt.time(st.opensAt)}` : `opens ${env.weekday(st.opensAt)}`;
+  return `opens ${env.fmt.time(st.opensAt)}`;
+}
+function ariaFor(name, env, st) {
+  if (st.open) return `${name} open, closes ${env.fmt.time(st.closesAt)}`;
+  if (st.opensAt === null) return `${name} closed, no session scheduled`;
+  return `${name} closed, ${opensText(env, st, true)}`;
+}
+function sessionClockModel(data, variant, ctx) {
+  const d = data && typeof data === "object" ? data : {};
+  const given = Array.isArray(d.sessions) ? d.sessions : [];
+  const ids = given.filter((s) => typeof s === "string");
+  const now = ctx.now;
+  const first = ids.length ? lookup(d.calendar, ids[0]) : { error: "No sessions" };
+  const env = zoneEnv(first.spec ? first.spec.timeZone : ctx.fmt.timeZone, ctx.fmt);
+  const vm = variant === "Banner" ? banner(d, ids, first, env, now, ctx) : small(d, ids, first, env, now, ctx);
+  const badTimeframes = variant === "Banner" && Array.isArray(d.timeframes) ? d.timeframes.filter((t) => !validTimeframe(t)).length : 0;
+  vm.dropped = given.length - ids.length + badTimeframes;
+  return vm;
+}
+function small(d, ids, first, env, now, ctx) {
+  const zone = env.name(now);
+  const time = env.fmt.time(now);
+  if (first.error) {
+    return {
+      variant: "S",
+      live: false,
+      title: ctx.label || "Session clock",
+      titleShort: ctx.label || "Session clock",
+      session: ids.length ? ids[0] : "",
+      time,
+      zone,
+      progress: 0,
+      from: "",
+      to: "",
+      middle: first.error,
+      middleShort: first.error,
+      ariaLabel: `${ctx.label}: ${first.error}`
+    };
+  }
+  const id = ids[0];
+  const spec = first.spec;
+  const st = laneState(d.calendar, id, spec, now);
+  let middle;
+  let middleShort;
+  if (st.open) {
+    middleShort = words(env, st.closesAt - now);
+    middle = `${middleShort} to close`;
+  } else if (st.opensAt === null) {
+    middle = "no session scheduled";
+    middleShort = "no session";
+  } else if (st.far) {
+    middle = opensText(env, st, true);
+    middleShort = `${env.weekday(st.opensAt)} ${env.fmt.time(st.opensAt)}`;
+  } else {
+    middleShort = words(env, st.opensAt - now);
+    middle = `opens in ${middleShort}`;
+  }
+  return {
+    variant: "S",
+    live: st.open,
+    title: st.open ? "Market open" : "Market closed",
+    titleShort: st.open ? "Open" : "Closed",
+    session: spec.label,
+    time,
+    zone,
+    progress: st.progress,
+    from: st.win ? env.fmt.time(st.win.open) : "",
+    to: st.win ? env.fmt.time(st.win.close) : "",
+    middle,
+    middleShort,
+    ariaLabel: `${ctx.label}: ${ariaFor(spec.label, env, st)}`
+  };
+}
+function banner(d, ids, first, env, now, ctx) {
+  const tfs = sanitiseTimeframes(d.timeframes);
+  const lanes = [];
+  const spoken = [];
+  let nextAt = null;
+  ids.forEach((id, i) => {
+    const found = i === 0 ? first : lookup(d.calendar, id);
+    if (found.error) {
+      lanes.push({ id, name: id, error: found.error, open: false, hours: "", progress: 0, right: "", ticks: { key: "", items: [], steps: [] }, next: null });
+      spoken.push(found.error);
+      return;
+    }
+    const spec = found.spec;
+    const st = laneState(d.calendar, id, spec, now);
+    let next = null;
+    if (st.open && tfs.length) {
+      const closes = tfs.map((tf) => d.calendar.candleClose(id, now, tf)).filter((t) => t !== null);
+      if (closes.length) {
+        let at = Infinity;
+        for (const t of closes) at = Math.min(at, t);
+        next = round((at - st.win.open) / (st.win.close - st.win.open) * 100, 2);
+        if (nextAt === null || at < nextAt) nextAt = at;
+      }
+    }
+    let right;
+    if (st.open) right = `${words(env, st.closesAt - now)} left`;
+    else right = st.opensAt === null ? "no session" : opensText(env, st, false);
+    lanes.push({
+      id,
+      name: spec.label,
+      error: null,
+      open: st.open,
+      hours: st.win ? `${env.fmt.time(st.win.open)}–${env.fmt.time(st.win.close)}` : "",
+      progress: st.progress,
+      right,
+      ticks: st.win ? tickItems(st.win, tfs) : { key: "", items: [], steps: [] },
+      next
+    });
+    spoken.push(ariaFor(spec.label, env, st));
+  });
+  const zone = env.name(now);
+  return {
+    variant: "Banner",
+    now,
+    live: lanes.some((l) => l.open),
+    title: "Sessions",
+    clock: `${env.fmt.time(now, { seconds: true })} ${zone}`.trim(),
+    legend: tfs.map((tf, i) => ({ mark: GLYPHS[i], text: `${timeframeText(tf)} close${i === 0 ? ", next hour" : ""}` })),
+    nextClose: nextAt === null ? "" : `next close in ${env.fmt.duration(nextAt - now)}`,
+    lanes,
+    ariaLabel: `${ctx.label}: ${spoken.length ? spoken.join("; ") : "No sessions"}`
+  };
+}
+const setText = (el, value) => {
+  if (el && el.textContent !== value) el.textContent = value;
+};
+const LANE_HTML = '<div class="lane"><div class="lcol"><span class="lname sm ell"></span><span class="lhours xs mut n ell"></span></div><div class="lt"><div class="rail"></div><div class="lf"></div><div class="tks"></div><div class="mk"></div><span class="msg xs mut ell" hidden></span></div><span class="lr n sm mut"></span></div>';
+const STRINGS = Object.freeze({ empty: "No sessions set up" });
+const LABEL_HEAD = '<div class="hd"><span class="lb title" data-k="label"></span>';
+const SKELETON_LANE = `<div class="lane"><div class="lcol">${sk(80, 11)}${sk(60, 9)}</div><div class="f1">${sk(100, 4)}</div><div class="lr">${sk(70, 10)}</div></div>`;
+const SKELETONS = {
+  S: `${LABEL_HEAD}</div><div class="rowb">${sk(45, 30)}${sk(25, 11)}</div><span class="f1"></span>${sk(100, 6)}<div class="row">${sk(15, 9)}<span class="f1"></span>${sk(15, 9)}</div>`,
+  Banner: `${LABEL_HEAD}<span class="f1"></span>${sk(20, 9)}</div><div class="lanes">${SKELETON_LANE.repeat(2)}</div>`
+};
+class TsSessionClock extends TsWidget {
+  static template(variant) {
+    if (variant === "Banner") {
+      return '<div class="hd"><span class="dot live"></span><span class="lb title"></span><span class="n sm clock ell"></span><span class="f1"></span><span class="legend xs mut"><span class="lg0"></span><span class="lg1"></span></span><span class="nx xs"></span></div><div class="lanes"></div>';
+    }
+    return '<div class="hd"><span class="dot live"></span><span class="lb title"><span class="tf"></span><span class="ts"></span></span><span class="f1"></span><span class="xs mut sess ell"></span></div><div class="rowb"><span class="big time"></span><span class="sm mut zone"></span></div><span class="f1"></span><div class="trk"><div class="fill"></div></div><div class="row xs mut ft"><span class="n from"></span><span class="f1"></span><span class="mid ell"><span class="mf"></span><span class="ms"></span></span><span class="f1"></span><span class="n to"></span></div>';
+  }
+  static skeleton(variant) {
+    return SKELETONS[variant] || SKELETONS.S;
+  }
+  static viewModel(data, variant, ctx) {
+    return sessionClockModel(data, variant, ctx);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.every(1e3);
+  }
+  update(vm, variant) {
+    if (variant === "Banner") this._updateBanner(vm);
+    else this._updateSmall(vm);
+  }
+  _updateSmall(vm) {
+    this.$(".dot").hidden = !vm.live;
+    setText(this.$(".tf"), vm.title);
+    setText(this.$(".ts"), vm.titleShort);
+    setText(this.$(".sess"), vm.session);
+    setText(this.$(".time"), vm.time);
+    setText(this.$(".zone"), vm.zone);
+    this.$(".fill").style.width = `${vm.progress}%`;
+    setText(this.$(".from"), vm.from);
+    setText(this.$(".mf"), vm.middle);
+    setText(this.$(".ms"), vm.middleShort);
+    const mid = this.$(".mid");
+    if (mid.title !== vm.middle) mid.title = vm.middle;
+    setText(this.$(".to"), vm.to);
+  }
+  _updateBanner(vm) {
+    this.$(".dot").hidden = !vm.live;
+    setText(this.$(".title"), vm.title);
+    setText(this.$(".clock"), vm.clock);
+    this.$(".legend").hidden = vm.legend.length === 0;
+    for (let i = 0; i < 2; i++) {
+      const item = vm.legend[i];
+      const el = this.$(`.lg${i}`);
+      el.hidden = !item;
+      setText(el, item ? `${item.mark} ${item.text}` : "");
+    }
+    const nx = this.$(".nx");
+    nx.hidden = !vm.nextClose;
+    setText(nx, vm.nextClose ? `▮ ${vm.nextClose}` : "");
+    const rows = this._laneRows(vm.lanes);
+    const widths = rows.map((row) => row.track.clientWidth);
+    vm.lanes.forEach((lane, i) => {
+      const row = rows[i];
+      setText(row.name, lane.name);
+      setText(row.hours, lane.error ? "" : lane.hours);
+      setText(row.right, lane.right);
+      row.msg.hidden = !lane.error;
+      setText(row.msg, lane.error || "");
+      row.rail.hidden = !!lane.error;
+      row.fill.hidden = !!lane.error;
+      row.fill.style.width = `${lane.progress}%`;
+      const ticks = visibleTicks(lane, vm.now, widths[i]);
+      if (row.tickKey !== ticks.key) {
+        row.ticks.innerHTML = ticks.items.map((t) => `<i class="tk${t.k ? " b" : ""}" style="left:${t.l}%"></i>`).join("");
+        row.tickKey = ticks.key;
+      }
+      row.mark.hidden = lane.next === null;
+      if (lane.next !== null) row.mark.style.left = `${lane.next}%`;
+    });
+  }
+  /** The lane rows, rebuilt only when the list of sessions or the container they live in changes. */
+  _laneRows(lanes) {
+    const host = this.$(".lanes");
+    const key = lanes.map((l) => l.id).join("\n");
+    const cur = this._lanes;
+    if (cur && cur.host === host && cur.key === key) return cur.rows;
+    host.innerHTML = lanes.map(() => LANE_HTML).join("");
+    const rows = Array.from(host.querySelectorAll(".lane")).map((el) => ({
+      name: el.querySelector(".lname"),
+      hours: el.querySelector(".lhours"),
+      right: el.querySelector(".lr"),
+      rail: el.querySelector(".rail"),
+      fill: el.querySelector(".lf"),
+      track: el.querySelector(".lt"),
+      ticks: el.querySelector(".tks"),
+      mark: el.querySelector(".mk"),
+      msg: el.querySelector(".msg"),
+      tickKey: null
+    }));
+    this._lanes = { host, key, rows };
+    return rows;
+  }
+}
+__publicField(TsSessionClock, "catalogKey", "sessionClock");
+__publicField(TsSessionClock, "emptyText", STRINGS.empty);
+__publicField(TsSessionClock, "dataShape", {
+  calendar: "object",
+  sessions: { kind: "array", of: "string" },
+  timeframes: { kind: "array", optional: true, of: "number" }
+});
+__publicField(TsSessionClock, "styles", `
+[hidden] { display: none !important; }
+.trk { position: relative; height: 6px; border-radius: 99px; background: var(--ts-surface-2); overflow: hidden; flex: none; }
+.fill, .lf { position: absolute; left: 0; width: 0; background: var(--ts-accent); border-radius: 99px; }
+.fill { top: 0; bottom: 0; }
+.ft { gap: 6px; }
+.ft .n { flex: none; }
+.mid { text-align: center; }
+.title { white-space: nowrap; flex: none; }
+.ts, .ms { display: none; }
+.legend { display: flex; gap: 10px; white-space: nowrap; }
+.nx { font-weight: 600; white-space: nowrap; }
+.lanes { display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; justify-content: center; }
+.lane { display: flex; align-items: center; gap: 14px; }
+.lcol { width: 110px; flex: none; display: flex; flex-direction: column; gap: 1px; }
+.lname { font-weight: 600; }
+.lt { position: relative; flex: 1; min-width: 0; height: 26px; }
+.rail, .lf { position: absolute; top: 11px; height: 4px; border-radius: 99px; }
+.rail { left: 0; right: 0; background: var(--ts-surface-2); }
+.tks { position: absolute; inset: 0; pointer-events: none; }
+.tk { position: absolute; top: 8px; width: 1px; height: 10px; background: var(--ts-muted); }
+.tk.b { top: 5px; height: 16px; background: var(--ts-ink); }
+.mk { position: absolute; top: 2px; left: 0; width: 6px; height: 22px; margin-left: -3px; border-radius: 2px; box-shadow: inset 0 0 0 2px var(--ts-ink); }
+.msg { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: center; }
+.lr { width: 90px; flex: none; text-align: right; white-space: nowrap; }
+@container (max-width: 480px) { .legend { display: none; } }
+@container (max-width: 400px) { .lane { gap: 10px; } .lcol { width: 84px; } .lr { width: 72px; } }
+/* A phone-width S (~170px): short words so nothing wraps or truncates. */
+@container (max-width: 220px) { .tf, .mf { display: none; } .ts, .ms { display: inline; } }
+`);
+const isDevice = (d) => d === "desktop" || d === "phone";
+const deviceOfColumns = (columns) => columns > 0 ? columns === 2 ? "phone" : "desktop" : null;
+function normaliseDefaults(defaults) {
+  var _a, _b, _c;
+  if (defaults == null) return { desktop: null, phone: null };
+  const twoDevices = typeof defaults === "object" && !Array.isArray(defaults) && !("profiles" in defaults) && "desktop" in defaults;
+  if (!twoDevices) return { desktop: defaults, phone: defaults };
+  return { desktop: (_a = defaults.desktop) != null ? _a : null, phone: (_c = (_b = defaults.phone) != null ? _b : defaults.desktop) != null ? _c : null };
+}
+function defaultStorage() {
+  try {
+    return globalThis.localStorage || null;
+  } catch (e) {
+    return null;
+  }
+}
+function persistLayout(grid, options = {}) {
+  const { key, defaults } = options;
+  if (typeof key !== "string" || !key) throw new TypeError("persistLayout needs a non-empty `key`");
+  const storage = "storage" in options ? options.storage : defaultStorage();
+  const fallback = normaliseDefaults(defaults);
+  let device = null;
+  let disposed = false;
+  const keyFor = (d) => `${key}:${d}`;
+  function applyDefaults(d) {
+    if (fallback[d] == null) return;
+    grid.layout = readLayout(fallback[d], { unknown: "keep", device: d }).layout;
+  }
+  function load(d) {
+    let raw = null;
+    if (storage) {
+      try {
+        const text = storage.getItem(keyFor(d));
+        if (text != null) raw = JSON.parse(text);
+      } catch (e) {
+        raw = null;
+      }
+    }
+    if (raw == null) return applyDefaults(d);
+    grid.layout = readLayout(raw, { unknown: "keep", device: d }).layout;
+  }
+  function switchTo(d) {
+    if (!isDevice(d) || d === device) return;
+    device = d;
+    load(d);
+  }
+  function onColumns(event) {
+    if (disposed || event.target !== grid) return;
+    const detail = event.detail || {};
+    switchTo(isDevice(detail.device) ? detail.device : deviceOfColumns(detail.columns));
+  }
+  function onChange(event) {
+    if (disposed || event.target !== grid || !storage || !device) return;
+    const layout = event.detail && event.detail.layout;
+    if (!layout) return;
+    try {
+      storage.setItem(keyFor(device), JSON.stringify(layout));
+    } catch (e) {
+    }
+  }
+  grid.addEventListener("ts-columns-change", onColumns);
+  grid.addEventListener("ts-layout-change", onChange);
+  const measured = deviceOfColumns(grid.columns);
+  if (measured) switchTo(measured);
+  return {
+    reset(which) {
+      if (disposed) return;
+      const d = isDevice(which) ? which : device;
+      if (!d) return;
+      if (storage) {
+        try {
+          storage.removeItem(keyFor(d));
+        } catch (e) {
+        }
+      }
+      if (d === device) applyDefaults(d);
+    },
+    dispose() {
+      disposed = true;
+      grid.removeEventListener("ts-columns-change", onColumns);
+      grid.removeEventListener("ts-layout-change", onChange);
+    }
+  };
+}
+function define(tag, ctor) {
+  if (typeof customElements === "undefined") return;
+  ctor.tickslateVersion = version;
+  const owner = customElements.get(tag);
+  if (!owner) {
+    customElements.define(tag, ctor);
+    return;
+  }
+  if (owner === ctor) return;
+  {
+    const by = owner.tickslateVersion ? `Tickslate ${owner.tickslateVersion}` : "a non-Tickslate element";
+    warnOnce(`define:${tag}`, `<${tag}> is already defined by ${by}, so this copy (${version}) was not registered.`);
+  }
+}
+define("ts-grid", TsGrid);
+define("ts-card", TsCard);
+define("ts-metric", TsMetric);
+define("ts-chart", TsChart);
+define("ts-today-pnl", TsTodayPnl);
+define("ts-equity-curve", TsEquityCurve);
+define("ts-session-clock", TsSessionClock);
+export {
+  TsCard,
+  TsChart,
+  TsEquityCurve,
+  TsGrid,
+  TsMetric,
+  TsSessionClock,
+  TsTodayPnl,
+  TsWidget,
+  persistLayout,
+  version2 as version
+};
+//# sourceMappingURL=elements.dev.js.map