// Behaviour the registry-wide rule tests cannot see: what each element does
// when it is actually used.

import test from "node:test";
import assert from "node:assert/strict";

import { setupDom, teardownDom, fire } from "./_dom.js";

let composer;
test.before(async () => {
  setupDom();
  ({ composer } = await import("../composer.js"));
});
test.after(() => teardownDom());

const mount = (handle) => { document.body.appendChild(handle.node); return handle; };

// --- buttons ---------------------------------------------------------------

test("a button reports clicks and can be made busy", () => {
  let clicks = 0;
  const b = mount(composer.button.md({ label: "Go", onClick: () => { clicks += 1; } }));
  b.node.click();
  assert.equal(clicks, 1);

  b.setBusy(true);
  assert.equal(b.node.disabled, true);
  assert.equal(b.node.getAttribute("aria-busy"), "true");
  b.node.click();
  assert.equal(clicks, 1, "a busy button does not fire again");

  b.setBusy(false);
  assert.equal(b.node.disabled, false);
});

test("an unknown tone is refused rather than rendered plain", () => {
  assert.throws(() => composer.button.md({ label: "x", tone: "sparkly" }), RangeError);
});

test("an icon button without a label is refused", () => {
  // Otherwise a toolbar of glyphs is unusable by screen reader and unlabelled
  // on hover, and nobody notices until someone needs it.
  assert.throws(() => composer.iconButton.md({ icon: "x" }), TypeError);
});

test("buttonGroup picks one, or several when multi", () => {
  const seen = [];
  const g = mount(composer.buttonGroup.md({
    value: "a", onChange: (v) => seen.push(v),
    items: [{ value: "a", label: "A" }, { value: "b", label: "B" }],
  }));
  g.node.querySelectorAll("button")[1].click();
  assert.equal(g.value, "b");
  assert.deepEqual(seen, ["b"]);
  assert.equal(g.node.querySelectorAll("button")[1].getAttribute("aria-checked"), "true");

  const m = mount(composer.buttonGroup.md({
    multi: true, value: ["a"],
    items: [{ value: "a", label: "A" }, { value: "b", label: "B" }],
  }));
  m.node.querySelectorAll("button")[1].click();
  assert.deepEqual(m.value.sort(), ["a", "b"]);
  m.node.querySelectorAll("button")[0].click();
  assert.deepEqual(m.value, ["b"], "clicking an active one turns it off");
});

// --- choice ----------------------------------------------------------------

test("checkbox reads and writes its state", () => {
  let last = null;
  const c = mount(composer.checkbox.default({ label: "On", checked: false, onChange: (v) => { last = v; } }));
  const input = c.node.querySelector("input");
  input.click();
  assert.equal(c.value, true);
  assert.equal(last, true);
  c.setValue(false);
  assert.equal(input.checked, false);
});

test("a bare checkbox carries its label as the accessible name", () => {
  const c = composer.checkbox.default({ label: "Enabled" });
  assert.equal(c.node.querySelector("input").getAttribute("aria-label"), "Enabled");
});

test("a checkbox row is labelled by its visible text, not by aria-label", () => {
  // Duplicating it would override what the user can see with a copy that can
  // drift from it.
  const c = composer.checkboxRow.default({ label: "Sync", hint: "Locks timing" });
  const input = c.node.querySelector("input");
  assert.equal(input.getAttribute("aria-label"), null);
  const face = c.node.querySelector("label.cx-check-face");
  assert.equal(face.getAttribute("for"), input.id,
    "the label points at the input rather than wrapping it");
  assert.equal(face.contains(input), false);
  assert.ok(input.getAttribute("aria-describedby"), "the hint is wired as the description");
});

test("checklist collects several values", () => {
  const c = mount(composer.checklist.default({
    values: ["a"], items: [{ value: "a", label: "A" }, { value: "b", label: "B" }],
  }));
  c.node.querySelectorAll("input")[1].click();
  assert.deepEqual(c.value.sort(), ["a", "b"]);
  c.setValue(["b"]);
  assert.deepEqual(c.value, ["b"]);
});

test("radioGroup keeps exactly one", () => {
  const r = mount(composer.radioGroup.default({
    value: "a", options: [{ value: "a", label: "A" }, { value: "b", label: "B" }],
  }));
  const inputs = r.node.querySelectorAll("input");
  inputs[1].click();
  assert.equal(r.value, "b");
  assert.equal(inputs[0].checked, false);
});

test("segmented selects and reflects aria-checked", () => {
  const s = mount(composer.segmented.md({
    value: "t2v", options: [{ value: "t2v", label: "T" }, { value: "i2v", label: "I" }],
  }));
  const buttons = s.node.querySelectorAll("button");
  buttons[1].click();
  assert.equal(s.value, "i2v");
  assert.equal(buttons[1].getAttribute("aria-checked"), "true");
  assert.equal(buttons[0].getAttribute("aria-checked"), "false");
});

test("select round-trips its value", () => {
  const s = mount(composer.select.md({
    value: "b", options: [{ value: "a", label: "A" }, { value: "b", label: "B" }],
  }));
  assert.equal(s.value, "b");
  s.setValue("a");
  assert.equal(s.value, "a");
});

test("toggle is a switch, not a checkbox, to assistive tech", () => {
  const t = mount(composer.toggle.default({ label: "Second pass", checked: true }));
  assert.equal(t.node.querySelector("input").getAttribute("role"), "switch");
  assert.equal(t.value, true);
});

// --- input -----------------------------------------------------------------

test("onCommit fires on Enter and blur, not on every keystroke", () => {
  // A settings value that updates per keystroke writes nine intermediate values
  // while you type "0.65".
  const commits = [];
  const inputs = [];
  const i = mount(composer.input.md({
    onInput: (v) => inputs.push(v),
    onCommit: (v) => commits.push(v),
  }));
  i.node.value = "roof";
  fire(i.node, "input");
  assert.deepEqual(inputs, ["roof"]);
  assert.deepEqual(commits, []);

  i.node.dispatchEvent(new window.KeyboardEvent("keydown", { key: "Enter", bubbles: true, cancelable: true }));
  assert.deepEqual(commits, ["roof"]);

  fire(i.node, "blur");
  assert.deepEqual(commits, ["roof"], "an unchanged value does not commit twice");
});

test("number clamps on commit, not while typing", () => {
  // Clamping mid-keystroke makes a leading "-" or "0." impossible to type.
  let last = null;
  const n = mount(composer.number.md({ value: 3, min: 1, max: 10, onChange: (v) => { last = v; } }));
  const input = n.node.querySelector("input") || n.node;
  input.value = "99";
  fire(input, "input");
  assert.equal(input.value, "99", "not clamped yet");
  fire(input, "blur");
  assert.equal(last, 10);
});

test("number applies its precision", () => {
  let last = null;
  const n = mount(composer.number.md({ value: 1, min: 0, max: 10, precision: 1, onChange: (v) => { last = v; } }));
  const input = n.node.querySelector("input") || n.node;
  input.value = "3.14159";
  fire(input, "blur");
  assert.equal(last, 3.1);
});

test("stepper steps without float drift", () => {
  const s = mount(composer.stepper.md({ value: 0.1, min: 0, max: 1, step: 0.2 }));
  s.node.querySelectorAll("button")[1].click();
  assert.equal(s.value, 0.3, "0.1 + 0.2 must not surface as 0.30000000000000004");
});

test("stepper respects its bounds", () => {
  const s = mount(composer.stepper.md({ value: 1, min: 0, max: 1, step: 1 }));
  s.node.querySelectorAll("button")[1].click();
  assert.equal(s.value, 1);
});

test("filterList filters on label and hint, and reports a pick", () => {
  let picked = null;
  const f = mount(composer.filterList.md({
    onChange: (id) => { picked = id; },
    items: [
      { id: "a", label: "bong_tangent", hint: "validated" },
      { id: "b", label: "karras", hint: "2.3 era" },
    ],
  }));
  const search = f.node.querySelector("input");
  search.value = "valid";
  fire(search, "input");
  assert.equal(f.node.querySelectorAll(".cx-filter-row").length, 1, "matches on hint too");

  f.node.querySelector(".cx-filter-row").click();
  assert.equal(picked, "a");
});

test("filterList filters on keywords too, though it never draws them", () => {
  const f = mount(composer.filterList.md({
    items: [
      { id: "a", label: "Models and pipeline", hint: "What the run is made of.", keywords: "loaders" },
      { id: "b", label: "Updates" },
    ],
  }));
  const search = f.node.querySelector("input");
  search.value = "loaders";
  fire(search, "input");
  const rows = f.node.querySelectorAll(".cx-filter-row");
  assert.equal(rows.length, 1, "a section findable only by a keyword must still be found");
  assert.equal(f.node.textContent.includes("loaders"), false, "keywords are for search, not display");
});

test("filterList gives an icon a coloured chip only from a fixed tone, never from raw item data", () => {
  const f = mount(composer.filterList.md({
    items: [{ id: "a", label: "Node packs", icon: "▣", tone: "good" }],
  }));
  const icon = f.node.querySelector(".cx-filter-icon");
  assert.ok(icon.classList.contains("cx-filter-icon-good"));
});

test("an unknown filterList icon tone is refused rather than rendered as a blank chip", () => {
  assert.throws(() => mount(composer.filterList.md({
    items: [{ id: "a", label: "Node packs", icon: "▣", tone: "sparkly-typo" }],
  })), RangeError);
});

test("filterList says so when nothing matches", () => {
  const f = mount(composer.filterList.md({ items: [{ id: "a", label: "one" }] }));
  const search = f.node.querySelector("input");
  search.value = "zzz";
  fire(search, "input");
  assert.equal(f.node.querySelectorAll(".cx-filter-row").length, 0);
  assert.ok(f.node.querySelector(".cx-filter-empty"), "an empty list must say it is empty");
});

// --- slider ----------------------------------------------------------------

test("slider reports as it moves and commits on release", () => {
  const moves = [];
  const commits = [];
  const s = mount(composer.slider.md({
    value: 0.5, min: 0, max: 1, step: 0.1,
    onChange: (v) => moves.push(v), onCommit: (v) => commits.push(v),
  }));
  const input = s.node.querySelector("input");
  input.value = "0.8";
  fire(input, "input");
  fire(input, "change");
  assert.deepEqual(moves, [0.8]);
  assert.deepEqual(commits, [0.8]);
});

test("the slider paints its fill from the value", () => {
  const s = mount(composer.slider.md({ value: 0.25, min: 0, max: 1, step: 0.05 }));
  assert.equal(s.node.querySelector("input").style.getPropertyValue("--fill"), "25%");
});

test("slider.readout shows the value and its unit", () => {
  const s = mount(composer.slider.readout({ value: 0.65, min: 0, max: 1, step: 0.05, unit: "x", precision: 2 }));
  assert.equal(s.node.querySelector("output").textContent, "0.65x");
  s.setValue(0.3);
  assert.equal(s.node.querySelector("output").textContent, "0.30x");
});

test("slider.macro jumps to a preset", () => {
  const s = mount(composer.slider.macro({
    value: 0.2, min: 0, max: 1, step: 0.05,
    presets: [{ label: "Chill", value: 0.2 }, { label: "Chaos", value: 0.9 }],
  }));
  s.node.querySelectorAll(".cx-macro-presets button")[1].click();
  assert.equal(s.value, 0.9);
});

test("range thumbs cannot pass each other", () => {
  // A range whose start is after its end is a state every consumer would then
  // have to defend against.
  const r = mount(composer.range.md({ from: 0.3, to: 0.7, min: 0, max: 1, step: 0.05 }));
  const [lo, hi] = r.node.querySelectorAll("input");
  lo.value = "0.9";
  fire(lo, "input");
  const { from, to } = r.value;
  assert.ok(from <= to, `from ${from} must not exceed to ${to}`);
});

// --- regressions found by the adversarial pass ------------------------------

test("finishing a busy spell does not re-enable a button that was disabled", () => {
  // busy and disabled are independent reasons a button cannot be clicked.
  // Deriving the attribute from the constructor's value meant the later call
  // silently lost to the earlier one.
  const b = mount(composer.button.md({ label: "Save" }));
  b.setDisabled(true);
  b.setBusy(true);
  b.setBusy(false);
  assert.equal(b.node.disabled, true);
  b.setDisabled(false);
  assert.equal(b.node.disabled, false);
});

test("a busy button stays disabled even if setDisabled(false) is called", () => {
  const b = mount(composer.button.md({ label: "Save" }));
  b.setBusy(true);
  b.setDisabled(false);
  assert.equal(b.node.disabled, true);
});

test("clearing a number field keeps the last committed value", () => {
  // A browser normalises invalid text in a number input to "", and Number("")
  // is 0 -- finite, so it sails past an isFinite guard and lands on min,
  // discarding what the user had actually entered.
  const seen = [];
  const n = mount(composer.number.md({ value: 3, min: 1, max: 10, onChange: (v) => seen.push(v) }));
  const input = n.node.querySelector("input") || n.node;

  input.value = "7";
  fire(input, "blur");
  assert.equal(n.value, 7);

  input.value = "";
  fire(input, "blur");
  assert.equal(n.value, 7, "an emptied field is not a zero");
  assert.equal(input.value, "7", "and the field shows what is actually held");
  assert.deepEqual(seen, [7], "nothing changed, so nothing is saved again");
});

test("a spinner-arrow click commits at once; leaving afterwards does not save it twice", () => {
  // the arrows fire "change" and no blur: committed on blur alone, a redraw put the old value back
  const seen = [];
  const n = mount(composer.number.md({ value: 3, min: 1, max: 10, onChange: (v) => seen.push(v) }));
  const input = n.node.querySelector("input") || n.node;
  input.value = "4";
  fire(input, "change");
  assert.deepEqual(seen, [4]);
  fire(input, "blur");
  assert.deepEqual(seen, [4]);
  input.dispatchEvent(new window.KeyboardEvent("keydown", { key: "ArrowUp", bubbles: true }));
  input.value = "5";
  fire(input, "change");
  assert.deepEqual(seen, [4, 5], "a keyboard arrow commits per press, like the spinner");
});

test("a held spinner commits once, on release", () => {
  // committed mid-hold, the panel's redraw took the field from under the mouse and the hold stopped
  const seen = [];
  const n = mount(composer.number.md({ value: 3, min: 1, max: 10, onChange: (v) => seen.push(v) }));
  const input = n.node.querySelector("input") || n.node;
  fire(input, "pointerdown");
  for (const v of ["4", "5", "6"]) { input.value = v; fire(input, "change"); }
  assert.deepEqual(seen, []);
  window.dispatchEvent(new window.Event("pointerup"));
  assert.deepEqual(seen, [6]);
  fire(input, "pointerdown"); window.dispatchEvent(new window.Event("pointerup"));
  assert.deepEqual(seen, [6], "a click that stepped nothing commits nothing");
});

test("a panel redraw keeps the caret in the field, and an edit not committed yet", () => {
  let value = 3;
  const region = mount(composer.region.stack());
  const draw = () => region.set([composer.number.md({ label: "Steps", value, onChange: (v) => { value = v; draw(); } }),
    composer.number.md({ label: "CFG", value: 7 })]);
  draw();
  const steps = () => region.node.querySelector('input[aria-label="Steps"]');
  steps().focus();
  steps().value = "4"; fire(steps(), "change");
  assert.equal(value, 4);
  assert.equal(document.activeElement, steps(), "the next arrow press lands in the redrawn field");
  steps().value = "5";                       // typed, not committed yet
  draw();                                    // a redraw from elsewhere (a server answer)
  assert.equal(steps().value, "5", "the uncommitted edit survives the redraw");
  assert.equal(document.activeElement, steps());
  value = 9; draw();                         // the value really changed underneath: that wins
  assert.equal(steps().value, "9");
});

test("a held arrow key commits on its first press and once on release, not per repeat; a lost release ends at blur", () => {
  const seen = [];
  const n = mount(composer.number.md({ value: 3, onChange: (v) => seen.push(v) }));
  const input = n.node.querySelector("input") || n.node;
  const step = (v, repeat) => { input.dispatchEvent(new window.KeyboardEvent("keydown", { key: "ArrowUp", repeat, bubbles: true })); input.value = v; fire(input, "change"); };
  step("4", false); step("5", true); step("6", true);
  assert.deepEqual(seen, [4]);
  input.dispatchEvent(new window.KeyboardEvent("keyup", { key: "ArrowUp", bubbles: true }));
  assert.deepEqual(seen, [4, 6]);
  fire(input, "pointerdown");                              // a mouse-up that never arrives
  input.value = "7"; fire(input, "change");
  fire(input, "blur");
  assert.deepEqual(seen, [4, 6, 7]);
  input.value = "8"; fire(input, "change");
  assert.deepEqual(seen, [4, 6, 7, 8], "not stuck afterwards");
});

test("a number field shows the value its owner can use (a length snapped to the model's grid)", () => {
  const seen = [];
  const n = mount(composer.number.md({ value: 39, snap: (v) => Math.round((v - 5) / 17) * 17 + 5, onChange: (v) => seen.push(v) }));
  const input = n.node.querySelector("input") || n.node;
  input.value = "40"; fire(input, "blur");
  assert.equal(input.value, "39");
  assert.deepEqual(seen, [], "39 is what it already was");
  input.value = "50"; fire(input, "blur");
  assert.deepEqual(seen, [56]);
});

test("a redraw keeps typed text in a text field too, and moves the caret only when it knows which field is which", () => {
  let shown = "old", extra = true;
  const region = mount(composer.region.stack());
  const draw = () => region.set([extra ? composer.input.md({ label: "Name", value: "other" }) : null, composer.input.md({ label: "Name", value: shown, onCommit: (v) => { shown = v; } })]);
  draw();
  const box = () => [...region.node.querySelectorAll('input[aria-label="Name"]')].pop();
  box().focus(); box().value = "old plus typed";
  draw();
  assert.equal(box().value, "old plus typed");
  assert.equal(document.activeElement, box());
  extra = false; draw();                                   // the first "Name" went away: index alone would pick the wrong one
  assert.notEqual(document.activeElement && document.activeElement.getAttribute("aria-label"), "Name");
});

test("snap is told the value it moves from: a rule can depend on the direction", () => {
  const n = mount(composer.number.md({ value: 0.1, step: 0.05, snap: (v, was) => (v > 0 && v < 0.1 ? (v < was ? 0 : 0.1) : v) }));
  const input = n.node.querySelector("input") || n.node;
  input.value = "0.05"; fire(input, "change");
  assert.equal(input.value, "0");
  input.value = "0.05"; fire(input, "change");
  assert.equal(input.value, "0.1");
});

test("a number field ignores unparseable text on commit", () => {
  const n = mount(composer.number.md({ value: 5, min: 0, max: 10 }));
  const input = n.node.querySelector("input") || n.node;
  input.value = "abc";
  fire(input, "blur");
  assert.equal(n.value, 5);
});

test("a list row carries a real control, separate from its reorder arrows", () => {
  // A bare number printed beside up/down arrows reads as a stepper for that
  // number. The weight is edited in a control; the arrows only move the row.
  const weight = composer.number.md({ value: 0.8, min: -2, max: 2, step: 0.05, label: "Weight" });
  const l = mount(composer.list.rows({
    reorder: true,
    items: [{ label: "detail_v3", control: weight }, { label: "motion_lift" }],
  }));
  assert.ok(l.node.querySelector(".cx-list-control input"), "the row has an editable control");

  const moves = [...l.node.querySelectorAll(".cx-list-move")];
  assert.ok(moves.length >= 2);
  for (const m of moves) {
    assert.match(m.getAttribute("aria-label"), /^Move .* (up|down)$/,
      "reorder buttons say they reorder");
  }
});

test("reordering a list reports the new order", () => {
  let order = null;
  const l = mount(composer.list.rows({
    reorder: true, onReorder: (items) => { order = items.map((i) => i.label); },
    items: [{ label: "a" }, { label: "b" }],
  }));
  // the second row's "up" button
  l.node.querySelectorAll(".cx-list-row")[1].querySelector(".cx-list-move").click();
  assert.deepEqual(order, ["b", "a"]);
});

// --- workspace -------------------------------------------------------------

const workspace = (props = {}) => mount(composer.workspace.docked({
  id: `ws-${Math.random().toString(36).slice(2)}`,
  left: composer.hint.default({ text: "assets" }),
  centre: composer.hint.default({ text: "preview" }),
  right: composer.hint.default({ text: "properties" }),
  ...props,
}));

test("a docked panel's toggle is not inside the panel it collapses", () => {
  // The v4 fault, as a test. A collapsed column was marked [hidden], which is
  // display:none, and the control that would have brought it back was inside
  // it -- so the button did nothing at all and said nothing.
  const ws = workspace();
  for (const side of ["left", "right"]) {
    const panel = side === "left" ? ws.left : ws.right;
    const toggle = ws.node.querySelector(`.cx-workspace-rail-${side} button`);
    assert.ok(toggle, `${side} has no toggle`);
    assert.ok(!panel.contains(toggle), `the ${side} toggle is inside the panel it hides`);
  }
});

test("collapsing keeps the panel in the document rather than removing it", () => {
  const ws = workspace();
  ws.close("left");
  assert.equal(ws.isOpen("left"), false);
  assert.ok(ws.node.contains(ws.left), "the panel was removed rather than collapsed");
  assert.ok(!ws.left.hasAttribute("hidden"),
    "[hidden] is display:none, which is what made this unrecoverable in v4");
  assert.ok(ws.left.classList.contains("cx-collapsed"));
});

test("a collapsed panel can be reopened from its toggle", () => {
  const ws = workspace();
  const toggle = ws.node.querySelector(".cx-workspace-rail-right button");
  toggle.click();
  assert.equal(ws.isOpen("right"), false);
  assert.equal(toggle.getAttribute("aria-expanded"), "false");
  toggle.click();
  assert.equal(ws.isOpen("right"), true);
  assert.equal(toggle.getAttribute("aria-expanded"), "true");
});

test("the centre keeps its content and the sides keep theirs", () => {
  const ws = workspace();
  assert.match(ws.centre.textContent, /preview/);
  assert.match(ws.left.textContent, /assets/);
  assert.match(ws.right.textContent, /properties/);
});

test("which panels were open is remembered per workspace id", () => {
  const first = workspace({ id: "remembered" });
  first.close("left");
  first.destroy();

  const second = workspace({ id: "remembered" });
  assert.equal(second.isOpen("left"), false, "the closed panel came back open");
  assert.equal(second.isOpen("right"), true);
});

test("a workspace with no panels still renders its centre", () => {
  const ws = mount(composer.workspace.docked({
    id: "bare", centre: composer.hint.default({ text: "only the middle" }),
  }));
  assert.match(ws.centre.textContent, /only the middle/);
  assert.ok(ws.left && ws.right, "the regions exist even when nothing was put in them");
});

test("a captionless tile still has a name", () => {
  // The icons view drops the caption on purpose. Nothing else in the cell says
  // what it is, so without an explicit name the whole bin reads to a screen
  // reader as a row of unlabelled buttons.
  const g = mount(composer.gallery.icons({ items: [{ id: "1", label: "rooftop_dusk_01.mp4" }] }));
  const tile = g.node.querySelector(".cx-cell");
  assert.equal(tile.getAttribute("aria-label"), "rooftop_dusk_01.mp4");
  assert.equal(tile.getAttribute("title"), "rooftop_dusk_01.mp4");
});

test("the three views of a collection agree on what is selected", () => {
  // Grid, list and icons are one bin in three shapes. A view that reported its
  // selection differently would make switching views a way to lose it.
  const items = [{ id: "a", label: "a.png" }, { id: "b", label: "b.png" }];
  for (const view of ["adaptive", "list", "icons"]) {
    const g = mount(composer.gallery[view]({ items, selection: ["b"] }));
    assert.deepEqual(g.value, ["b"], `${view} reported the wrong selection`);
    g.setValue(["a"]);
    assert.deepEqual(g.value, ["a"], `${view} did not take a new selection`);
    const on = [...g.node.querySelectorAll('[aria-selected="true"]')];
    assert.equal(on.length, 1, `${view} drew ${on.length} selected entries`);
    g.destroy();
  }
});

test("a thumbnail that does not load falls back to the glyph", () => {
  // The browser's broken-image icon reads as a damaged file. In a bin of fifty
  // results one server hiccup would look like lost work.
  const g = mount(composer.gallery.adaptive({ id: "broken", items: [{ id: "1", label: "a.png", thumb: "/gone.png" }] }));
  const img = g.node.querySelector("img");
  fire(img, "error");
  assert.equal(g.node.querySelector("img"), null);
  assert.ok(g.node.querySelector(".cx-cell-glyph"), "nothing stood in for the missing picture");
  assert.match(g.node.textContent, /a\.png/, "the name went with it");
});

test("a bin's thumbnails are lazy", () => {
  // A bin holds everything a session produced. Fetching all of it the moment
  // the panel draws is the shape of v4's media-bin stall: the browser opens six
  // connections per origin, and the API is behind the same six.
  const items = [{ id: "1", label: "a.png", thumb: "/view?filename=a.png" }];
  for (const view of ["adaptive", "list", "icons"]) {
    const g = mount(composer.gallery[view]({ items }));
    assert.equal(g.node.querySelector("img").getAttribute("loading"), "lazy",
      `${view} fetches every thumbnail at once`);
    g.destroy();
  }
});

// --- track -------------------------------------------------------------

const CLIPS = [
  { id: "a", label: "Scene 1", start: 0, duration: 4 },
  { id: "b", label: "Scene 2", start: 4, duration: 6 },
  { id: "c", label: "Scene 3", start: 10, duration: 2 },
];

test("a clip's width is proportional to its duration, not equal to its neighbours'", () => {
  // The third clip is 2s at 10px/s = 20px, under the 24px floor -- widened to
  // stay clickable, which is why it is not exactly proportional to the other
  // two the way the first two are to each other.
  const t = mount(composer.track.default({ items: CLIPS, pxPerSecond: 10 }));
  const widths = [...t.node.querySelectorAll(".cx-track-clip")].map((c) => parseFloat(c.style.width));
  assert.deepEqual(widths, [40, 60, 24]);
});

test("a clip under the pixel floor is not squeezed to nothing", () => {
  const t = mount(composer.track.default({
    items: [{ id: "a", label: "Sliver", start: 0, duration: 0.1 }], pxPerSecond: 10,
  }));
  const width = parseFloat(t.node.querySelector(".cx-track-clip").style.width);
  assert.ok(width >= 24, `a 0.1s clip at 10px/s rendered ${width}px wide`);
});

test("the ruler reads real elapsed time, not a tick per clip", () => {
  // Three clips, but the ruler's ticks are seconds -- there is no reason their
  // count should match the clip count in either direction.
  const t = mount(composer.track.default({ items: CLIPS, pxPerSecond: 40 }));
  const ticks = [...t.node.querySelectorAll(".cx-track-tick")].map((n) => n.textContent);
  assert.deepEqual(ticks, ["0:00", "0:02", "0:04", "0:06", "0:08", "0:10", "0:12"]);
});

test("clicking partway into a clip seeks to that exact second, not to the clip's start", () => {
  // A clip covers most of the track's own area -- if a click on one only
  // ever resolved to its START, an exact-second seek would only ever be
  // reachable from the thin ruler strip above it.
  const seen = [];
  const t = mount(composer.track.default({
    items: CLIPS, pxPerSecond: 40, onSeek: (seconds, item) => seen.push([seconds, item && item.id]),
  }));
  // Clip "b" spans 4s-10s -> 160px-400px at 40px/s. 250px is 6.25s into it.
  t.node.querySelector('[data-id="b"]')
    .dispatchEvent(new window.MouseEvent("click", { bubbles: true, clientX: 250 }));
  assert.deepEqual(seen, [[6.25, "b"]]);
});

test("clicking empty track (the ruler, the gap past the clips) seeks by position", () => {
  const seen = [];
  const t = mount(composer.track.default({
    items: CLIPS, pxPerSecond: 10, onSeek: (seconds, item) => seen.push([seconds, item && item.id]),
  }));
  const inner = t.node.querySelector(".cx-track-inner");
  inner.dispatchEvent(new window.MouseEvent("click", { bubbles: true, clientX: 45 }));
  // 45px at 10px/s = 4.5s, which falls inside clip "b" (4s..10s).
  assert.deepEqual(seen, [[4.5, "b"]]);
});

test("a seek past the last clip clamps to the track's own end", () => {
  const seen = [];
  const t = mount(composer.track.default({
    items: CLIPS, pxPerSecond: 10, onSeek: (seconds, item) => seen.push([seconds, item && item.id]),
  }));
  t.node.querySelector(".cx-track-inner")
    .dispatchEvent(new window.MouseEvent("click", { bubbles: true, clientX: 9999 }));
  assert.deepEqual(seen, [[12, "c"]]);
});

test("setPlayhead moves the marker without redrawing the clips", () => {
  const t = mount(composer.track.default({ items: CLIPS, pxPerSecond: 10, playhead: 0 }));
  const before = t.node.querySelector(".cx-track-clip");
  t.setPlayhead(7);
  const head = t.node.querySelector(".cx-track-playhead");
  assert.equal(head.style.insetInlineStart, "70px");
  assert.equal(t.node.querySelector(".cx-track-clip"), before, "the clip row was rebuilt for a playhead move");
});

test("setValue redraws the selected clip without a fresh setItems call", () => {
  const t = mount(composer.track.default({ items: CLIPS, pxPerSecond: 10 }));
  assert.equal(t.node.querySelectorAll('[aria-selected="true"]').length, 0);
  t.setValue(["b"]);
  const on = t.node.querySelector('[aria-selected="true"]');
  assert.equal(on && on.dataset.id, "b");
});

test("dragging a clip onto another reports the reorder by id, not by position", () => {
  const reordered = [];
  const t = mount(composer.track.default({ items: CLIPS, pxPerSecond: 10, onReorder: (from, to) => reordered.push([from, to]) }));
  const cells = t.node.querySelectorAll(".cx-track-clip");
  const store = {};
  const dt = {
    effectAllowed: null,
    setData: (type, v) => { store[type] = v; },
    getData: (type) => store[type] || "",
    get types() { return Object.keys(store); },
  };
  const fireDrag = (node, type) => {
    const e = new window.Event(type, { bubbles: true, cancelable: true });
    e.dataTransfer = dt;
    node.dispatchEvent(e);
  };
  fireDrag(cells[0], "dragstart");
  fireDrag(cells[2], "drop");
  assert.deepEqual(reordered, [["a", "c"]]);
});

test("an excluded clip is dimmed, a rated one carries its rating", () => {
  const t = mount(composer.track.default({
    items: [
      { id: "a", label: "A", start: 0, duration: 1, excluded: true },
      { id: "b", label: "B", start: 1, duration: 1, rating: "liked" },
    ], pxPerSecond: 10,
  }));
  const [a, b] = t.node.querySelectorAll(".cx-track-clip");
  assert.equal(a.classList.contains("cx-excluded"), true);
  assert.equal(b.getAttribute("data-rating"), "liked");
});

test("Enter is a newline in a textarea, not a commit", () => {
  // A one-line field commits on Enter. A textarea holds the longest thing
  // anyone types here -- the prompt -- and stealing Enter there means a
  // multi-line value cannot be typed at all.
  const committed = [];
  const box = mount(composer.textarea.md({ label: "Prompt", onCommit: (v) => committed.push(v) }));
  box.node.value = "first line";
  const event = new window.KeyboardEvent("keydown", { key: "Enter", bubbles: true, cancelable: true });
  box.node.dispatchEvent(event);

  assert.equal(event.defaultPrevented, false, "Enter was swallowed, so no second line can be typed");
  assert.deepEqual(committed, []);

  fire(box.node, "blur");
  assert.deepEqual(committed, ["first line"], "blur is what commits a textarea");
});

test("a field Chromium blurs mid-redraw (still attached) does not commit then; the redrawn field keeps the edit and commits it", () => {
  for (const kind of ["number", "text"]) {
    let state = kind === "number" ? 100 : "old";
    const region = mount(composer.region.stack());
    const field = () => kind === "number" ? composer.number.md({ label: "F", value: state, onChange: (v) => { state = v; redraw(); } })
      : composer.input.md({ label: "F", value: state, onCommit: (v) => { state = v; redraw(); } });
    const redraw = () => { const kids = [field()]; region.set(kids); };        // children built before the swap, as the inspector does
    redraw();
    const real = region.node.replaceChildren.bind(region.node);
    region.node.replaceChildren = (...kids) => { const f = document.activeElement; if (region.node.contains(f)) { fire(f, "change"); fire(f, "blur"); } real(...kids); };
    const box = () => region.node.querySelector('[aria-label="F"]');
    box().focus(); box().value = kind === "number" ? "150" : "old plus typed";
    redraw();                                                                  // something else redraws the panel
    assert.equal(state, kind === "number" ? 100 : "old", `${kind}: nothing committed mid-swap`);
    assert.equal(box().value, kind === "number" ? "150" : "old plus typed", `${kind}: the redrawn field holds the edit`);
    assert.equal(document.activeElement, box());
    delete region.node.replaceChildren;
    box().dispatchEvent(new window.KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
    assert.equal(state, kind === "number" ? 150 : "old plus typed", `${kind}: and commits it afterwards`);
    region.node.remove();
  }
});

test("a held spinner interrupted by a redraw (with Chromium's blur on removal) still commits on release", () => {
  let state = 15;
  const region = mount(composer.region.stack());
  const redraw = () => { const kids = [composer.number.md({ label: "N", value: state, onChange: (v) => { state = v; redraw(); } })]; region.set(kids); };
  redraw();
  const real = region.node.replaceChildren.bind(region.node);
  region.node.replaceChildren = (...kids) => { const f = document.activeElement; if (region.node.contains(f)) { fire(f, "change"); fire(f, "blur"); } real(...kids); };
  const box = () => region.node.querySelector('[aria-label="N"]');
  box().focus(); fire(box(), "pointerdown");
  box().value = "16"; fire(box(), "change");               // a step while held: not committed yet
  redraw();                                               // something else redraws mid-hold
  delete region.node.replaceChildren;
  window.dispatchEvent(new window.Event("pointerup"));
  assert.equal(state, 16);
  assert.equal(box().value, "16");
  region.node.remove();
});