@pixerate/editor 0.164.0 → 0.166.0

package/dist/{chunk-EVXQNQND.js → chunk-XZB3TJ6K.js}

@@ -253,6 +253,12 @@ var ToolRegistryView = class {
       return set.tools.some((t) => this.enabledTools.has(t)) ? "some" : "none";
     };
     const listedCount = () => this.listed(this.catalogue()).length;
+    const styleOf = async (set) => {
+      const domain = set.skill?.replace(/^pixerate-/, "");
+      if (!discovery.styles || !domain || !discovery.styles.domains.some((d) => d.id === domain)) return void 0;
+      const style = await discovery.styles.resolve(domain);
+      return style.skills.length ? { domain, skills: style.skills.length, layers: [...new Set(style.skills.map((s) => s.layer))] } : void 0;
+    };
     const tools = [
       {
         name: "list_toolsets",
@@ -260,16 +266,18 @@ var ToolRegistryView = class {
         description: "Lists the groups of editor tools available here (one per open editor or feature): name, title, what it covers, its agent skill, how many tools it has and whether they are in your tool list (`enabled`: all, some or none). Start here, then call search_tools or enable_tools.",
         annotations: READ_ONLY,
         inputSchema: { type: "object", properties: {}, additionalProperties: false },
-        handler: () => {
+        handler: async () => {
           const cat = this.catalogue();
+          const styles = await Promise.all(cat.sets.map(styleOf));
           return {
-            toolsets: cat.sets.map((set) => ({
+            toolsets: cat.sets.map((set, i) => ({
               name: set.name,
               ...set.title ? { title: set.title } : {},
               ...set.description ? { description: set.description } : {},
               ...set.skill ? { skill: set.skill } : {},
               tools: set.tools.length,
-              enabled: enabledState(set)
+              enabled: enabledState(set),
+              ...styles[i] ? { style: styles[i] } : {}
             })),
             ...skills.length > 0 ? { skills: skills.map((s) => s.name) } : {}
           };
@@ -312,9 +320,12 @@ var ToolRegistryView = class {
         description: "Adds tools to your tool list: single tools by name (from search_tools) and/or whole toolsets (from list_toolsets). Returns the names added and how many tools are listed now. Prefer single tools over large toolsets. Unknown names fail and change nothing.",
         annotations: LISTING,
         inputSchema: SELECTION_SCHEMA,
-        handler: (args) => {
+        handler: async (args) => {
           const added = this.enableTools(args);
-          return { added, listed: listedCount() };
+          const sets = this.catalogue().sets.filter((set) => set.tools.some((t) => added.includes(t)));
+          const domains = (await Promise.all(sets.map(styleOf))).filter((s) => s !== void 0).map((s) => s.domain);
+          const style = [...new Set(domains)].map((d) => `House style applies: call get_style with domain "${d}" before making changes.`);
+          return { added, listed: listedCount(), ...style.length ? { style } : {} };
         }
       },
       {

package/dist/chunk-YBAPT7NL.js

@@ -0,0 +1,153 @@
+import {
+  contrastLevel,
+  contrastRatio,
+  linearSrgbToDisplayP3,
+  linearToSrgb,
+  oklabToOklch,
+  oklabToRgb,
+  oklchToOklab,
+  parseColor,
+  rgbToHsl,
+  rgbToOklab,
+  srgbToLinear
+} from "./chunk-MHLU6GRJ.js";
+
+// src/color/gamut.ts
+var clamp01 = (v) => Math.min(1, Math.max(0, v));
+function inSrgbGamut(c, epsilon = 1e-5) {
+  return c.r >= -epsilon && c.r <= 1 + epsilon && c.g >= -epsilon && c.g <= 1 + epsilon && c.b >= -epsilon && c.b <= 1 + epsilon;
+}
+function deltaEOK(a, b) {
+  const la = rgbToOklab(a);
+  const lb = rgbToOklab(b);
+  return Math.hypot(la.l - lb.l, la.a - lb.a, la.b - lb.b);
+}
+function toSrgbGamut(c) {
+  const lch = oklabToOklch(rgbToOklab(c));
+  if (lch.l >= 1) return { r: 1, g: 1, b: 1, a: c.a };
+  if (lch.l <= 0) return { r: 0, g: 0, b: 0, a: c.a };
+  if (inSrgbGamut(c)) {
+    return { r: clamp01(c.r), g: clamp01(c.g), b: clamp01(c.b), a: c.a };
+  }
+  let low = 0;
+  let high = lch.c;
+  let clippedCandidate = { r: clamp01(c.r), g: clamp01(c.g), b: clamp01(c.b), a: c.a };
+  const JND = 0.02;
+  const EPS = 1e-4;
+  for (let i = 0; i < 30; i++) {
+    const mid = (low + high) / 2;
+    const candidate = oklabToRgb(oklchToOklab({ l: lch.l, c: mid, h: lch.h, alpha: c.a }));
+    const clipped = {
+      r: clamp01(candidate.r),
+      g: clamp01(candidate.g),
+      b: clamp01(candidate.b),
+      a: c.a
+    };
+    clippedCandidate = clipped;
+    const dE = deltaEOK(candidate, clipped);
+    if (dE < JND) {
+      if (JND - dE < EPS) {
+        return clipped;
+      }
+      low = mid;
+    } else {
+      high = mid;
+    }
+    if (high - low < 1e-4) {
+      break;
+    }
+  }
+  return clippedCandidate;
+}
+
+// src/color/format.ts
+var clamp012 = (v) => Math.min(1, Math.max(0, v));
+var byte = (v) => Math.round(clamp012(v) * 255);
+var hex2 = (n) => n.toString(16).padStart(2, "0");
+var round2 = (n) => (Math.round(n * 100) / 100).toString();
+function formatHex(c) {
+  const mapped = toSrgbGamut(c);
+  const head = `#${hex2(byte(mapped.r))}${hex2(byte(mapped.g))}${hex2(byte(mapped.b))}`;
+  const alpha = byte(mapped.a);
+  return alpha === 255 ? head : head + hex2(alpha);
+}
+function formatColor(c, format) {
+  switch (format) {
+    case "hex":
+      return formatHex(c);
+    case "rgb": {
+      const inGamut = toSrgbGamut(c);
+      const r = byte(inGamut.r);
+      const g = byte(inGamut.g);
+      const b = byte(inGamut.b);
+      return c.a < 1 ? `rgb(${r} ${g} ${b} / ${round2(c.a)})` : `rgb(${r} ${g} ${b})`;
+    }
+    case "hsl": {
+      const hsl = rgbToHsl(toSrgbGamut(c));
+      const h = (Math.round(hsl.h * 100) / 100).toString();
+      const s = (Math.round(hsl.s * 1e4) / 100).toString();
+      const l = (Math.round(hsl.l * 1e4) / 100).toString();
+      return c.a < 1 ? `hsl(${h} ${s}% ${l}% / ${round2(c.a)})` : `hsl(${h} ${s}% ${l}%)`;
+    }
+    case "oklch": {
+      const lch = oklabToOklch(rgbToOklab(c));
+      const l = (lch.l * 100).toFixed(2);
+      const ch = lch.c.toFixed(4);
+      const h = lch.h.toFixed(2);
+      return c.a < 1 ? `oklch(${l}% ${ch} ${h} / ${round2(c.a)})` : `oklch(${l}% ${ch} ${h})`;
+    }
+    case "oklab": {
+      const lab = rgbToOklab(c);
+      const l = (lab.l * 100).toFixed(2);
+      const a = lab.a.toFixed(4);
+      const b = lab.b.toFixed(4);
+      return c.a < 1 ? `oklab(${l}% ${a} ${b} / ${round2(c.a)})` : `oklab(${l}% ${a} ${b})`;
+    }
+    case "p3": {
+      const linSrgb = {
+        r: srgbToLinear(c.r),
+        g: srgbToLinear(c.g),
+        b: srgbToLinear(c.b),
+        a: c.a
+      };
+      const linP3 = linearSrgbToDisplayP3(linSrgb);
+      const r = linearToSrgb(linP3.r).toFixed(4);
+      const g = linearToSrgb(linP3.g).toFixed(4);
+      const b = linearToSrgb(linP3.b).toFixed(4);
+      return c.a < 1 ? `color(display-p3 ${r} ${g} ${b} / ${round2(c.a)})` : `color(display-p3 ${r} ${g} ${b})`;
+    }
+  }
+}
+function normalizeColor(input) {
+  const parsed = parseColor(input);
+  return parsed ? formatHex(parsed) : null;
+}
+
+// src/color/suggest.ts
+function suggestAccessibleForeground(foreground, background, options = {}) {
+  const large = options.large ?? false;
+  const lch = oklabToOklch(rgbToOklab(foreground));
+  const asHex = (l) => parseColor(formatHex(toSrgbGamut(oklabToRgb(oklchToOklab({ ...lch, l })))));
+  for (let d = 0.01; d <= 1; d += 0.01) {
+    const downCand = asHex(Math.max(0, lch.l - d));
+    const upCand = asHex(Math.min(1, lch.l + d));
+    const downRatio = contrastRatio(downCand, background);
+    const upRatio = contrastRatio(upCand, background);
+    const downPass = contrastLevel(downRatio, { large }) !== "fail";
+    const upPass = contrastLevel(upRatio, { large }) !== "fail";
+    if (downPass && upPass) return formatHex(downRatio >= upRatio ? downCand : upCand);
+    if (downPass) return formatHex(downCand);
+    if (upPass) return formatHex(upCand);
+  }
+  return void 0;
+}
+
+export {
+  inSrgbGamut,
+  deltaEOK,
+  toSrgbGamut,
+  formatHex,
+  formatColor,
+  normalizeColor,
+  suggestAccessibleForeground
+};

package/dist/{chunk-SZA42R4N.js → chunk-YUFTVNLX.js}

@@ -1,5 +1,10 @@
+import {
+  parseSankey,
+  parseTreemap
+} from "./chunk-KGRZMHZB.js";
 import {
   chartMovingAverage,
+  chartRaceRanking,
   chartSupportsTrendlines,
   fitChartTrendline,
   formatChartNumber,
@@ -7,20 +12,23 @@ import {
   r2,
   sameChartSelection,
   summarizeChartSeries
-} from "./chunk-Z4P2RBMJ.js";
+} from "./chunk-ITANXMZD.js";
 import {
   CHART_TYPE_LABELS,
   DEFAULT_CHART_PALETTE,
   DEFAULT_CHART_THEME,
   chartDataFromTable,
   chartFamily,
+  chartLinksFromTable,
   chartSeriesColor,
   chartSliceColor,
   chartSpecColorsByCategory,
   chartTreeDepth,
   chartTreeFromRows,
+  chartTreeFromSeries,
   chartTreeFromTable,
   chartTreeToRows,
+  chartTreeTotal,
   checkChartColors,
   cloneChartSeries,
   cloneChartSpec,
@@ -28,6 +36,7 @@ import {
   defaultChartAxis,
   describeChartErrorBars,
   findChartTreeNode,
+  normalizeChartLinks,
   normalizeChartReferenceBand,
   normalizeChartReferenceLine,
   normalizeChartSpec,
@@ -36,7 +45,7 @@ import {
   parseChartValue,
   shadeChartColor,
   uniqueChartSeriesId
-} from "./chunk-3NEZJCBY.js";
+} from "./chunk-FR432ROA.js";
 import {
   parseCsv,
   parseTsv
@@ -71,9 +80,14 @@ function splitOutside(text, sep) {
   out.push(cur);
   return out;
 }
+var csvField = (text) => /[",\n]|^\s|\s$/.test(text) ? `"${text.replace(/"/g, '""')}"` : text;
+var treemapName = (name) => !name.includes('"') ? `"${name}"` : !name.includes("'") ? `'${name}'` : `"${name.replace(/"/g, "'")}"`;
+var yamlText = (text) => /^[\w][\w .,!?()/&+-]*$/.test(text) && !/:\s/.test(text) ? text : JSON.stringify(text);
 function chartMermaidFamily(spec) {
   const family = chartFamily(spec);
-  if (family === "pie" || family === "funnel" || family === "treemap" || family === "parliament" || family === "sunburst") return "pie";
+  if (family === "sankey" && spec.links?.length) return "sankey";
+  if (family === "treemap" || family === "sunburst") return "treemap";
+  if (family === "pie" || family === "funnel" || family === "parliament") return "pie";
   if (family === "radar") return "radar";
   return "xychart";
 }
@@ -114,7 +128,27 @@ function chartToMermaid(spec, options = {}) {
   const visible = spec.series.filter((s) => !s.hidden);
   const lines = [];
   const v = (x) => x === null || !Number.isFinite(x) ? "0" : num(x);
-  if (family === "pie") {
+  const front = [];
+  if (family === "sankey") {
+    if (spec.title) front.push("---", `title: ${yamlText(spec.title)}`, "---");
+    lines.push("sankey-beta");
+    for (const l of spec.links) lines.push(`${csvField(l.source)},${csvField(l.target)},${num(l.value)}`);
+  } else if (family === "treemap") {
+    lines.push("treemap-beta");
+    if (spec.title) lines.push(`title ${spec.title}`);
+    const first = visible[0] ?? spec.series[0];
+    const tree = spec.tree.length ? spec.tree : chartTreeFromSeries(spec.categories, first?.values ?? []);
+    const write = (nodes, depth) => {
+      for (const n of nodes) {
+        const pad = ind.repeat(depth);
+        if (n.children) {
+          lines.push(`${pad}${treemapName(n.name)}`);
+          write(n.children, depth + 1);
+        } else lines.push(`${pad}${treemapName(n.name)}: ${num(n.value ?? 0)}`);
+      }
+    };
+    write(tree, 1);
+  } else if (family === "pie") {
     const s = visible[0] ?? spec.series[0];
     lines.push(`pie${spec.dataLabels ? " showData" : ""}`);
     if (spec.title) lines.push(`${ind}title ${spec.title}`);
@@ -160,13 +194,13 @@ function chartToMermaid(spec, options = {}) {
       lines.push(`${ind}${kind} ${quote(s.name)} [${s.values.map(v).join(", ")}]`);
     }
   }
-  let text = `${lines.join("\n")}
+  let text = `${[...front, ...lines].join("\n")}
 `;
   if (options.meta !== false) {
     const meta = metaFor(spec, text);
     if (meta) {
       const [header, ...rest] = lines;
-      text = `${[header, `${CHART_MERMAID_META_PREFIX}${JSON.stringify({ v: 1, ...meta })}`, ...rest].join("\n")}
+      text = `${[...front, header, `${CHART_MERMAID_META_PREFIX}${JSON.stringify({ v: 1, ...meta })}`, ...rest].join("\n")}
 `;
     }
   }
@@ -229,7 +263,9 @@ function chartFromMermaid(text, options = {}) {
       showData = !!m[1];
       if (m[2]) frontTitle = m[2].trim();
     } else if (/^radar(?:-beta)?\s*$/i.test(t)) family = "radar";
-    else issues.push({ path: "header", line: i + 1, message: `Line ${i + 1}: expected a chart header (xychart-beta, pie or radar-beta), got "${t.slice(0, 40)}".` });
+    else if (/^sankey(?:-beta)?\s*$/i.test(t)) family = "sankey";
+    else if (/^treemap(?:-beta)?\s*$/i.test(t)) family = "treemap";
+    else issues.push({ path: "header", line: i + 1, message: `Line ${i + 1}: expected a chart header (xychart-beta, pie, radar-beta, sankey-beta or treemap-beta), got "${t.slice(0, 40)}".` });
     headerLine = i;
     break;
   }
@@ -245,6 +281,7 @@ function chartFromMermaid(text, options = {}) {
   let graticule = "circle";
   const counts = { bar: 0, line: 0 };
   const lineIssue = (i, message) => issues.push({ path: `line ${i + 1}`, line: i + 1, message: `Line ${i + 1}: ${message}` });
+  const whole = family === "sankey" || family === "treemap";
   for (let i = headerLine + 1; family && i < all.length; i++) {
     const raw = all[i];
     const t = raw.trim();
@@ -260,7 +297,7 @@ function chartFromMermaid(text, options = {}) {
       }
       continue;
     }
-    if (t.startsWith("%%")) continue;
+    if (t.startsWith("%%") || whole) continue;
     const isLast = i === all.length - 1 || all.slice(i + 1).every((l) => !l.trim());
     let m;
     if (m = /^title\s+(.+)$/i.exec(t)) {
@@ -362,7 +399,8 @@ function chartFromMermaid(text, options = {}) {
     if (!(partial && isLast)) lineIssue(i, `could not read "${t.slice(0, 60)}"; it was skipped.`);
   }
   let input;
-  if (family === "pie") {
+  if (whole) input = readWholeMermaid(family, all, headerLine, partial, title, issues);
+  else if (family === "pie") {
     input = {
       type: "pie",
       title,
@@ -398,18 +436,54 @@ function chartFromMermaid(text, options = {}) {
     }
   }
   const { spec, issues: specIssues } = normalizeChartSpec(input);
-  if (!family && !partial && !issues.length) issues.push({ path: "header", message: "The text is empty: expected a chart header (xychart-beta, pie or radar-beta)." });
+  if (!family && !partial && !issues.length) issues.push({ path: "header", message: "The text is empty: expected a chart header (xychart-beta, pie, radar-beta, sankey-beta or treemap-beta)." });
   return { spec, issues: [...issues, ...specIssues], family, hasMeta: !!meta };
 }
+function readWholeMermaid(family, all, headerLine, partial, title, issues) {
+  const body = all.slice(headerLine).map((l) => l.trim().startsWith(CHART_MERMAID_META_PREFIX.trim()) ? "%%" : l);
+  const parse = (lines) => family === "sankey" ? parseSankey(lines.join("\n")) : parseTreemap(lines.join("\n"));
+  let read = parse(body);
+  if ("error" in read && partial && body.length > 1) read = parse(body.slice(0, -1));
+  const lineOf = (n) => n === void 0 ? void 0 : n + headerLine;
+  if ("error" in read) {
+    const line = lineOf(read.line);
+    if (!(partial && body.length <= 2)) issues.push({ path: family, ...line ? { line } : {}, message: line ? `Line ${line}: ${read.error}` : read.error });
+    return { type: family === "sankey" ? "sankey" : "treemap", title };
+  }
+  if (family === "sankey") {
+    const data2 = read.data;
+    return { type: "sankey", title, links: data2.links, sankeyNodes: data2.nodes, series: [{ id: "series-1", name: "Values", values: [] }] };
+  }
+  const data = read.data;
+  let items = data.items;
+  let name = data.title ?? title;
+  if (items.length === 1 && items[0].children?.length) {
+    name ||= items[0].name;
+    items = items[0].children;
+  }
+  const toNode = (item) => item.children?.length ? { name: item.name, children: item.children.map(toNode) } : { name: item.name, value: item.value ?? 0 };
+  const tree = items.map(toNode);
+  const leaf = (n) => !n.children;
+  const flatOrOneLevel = tree.every(leaf) || tree.every((n) => n.children?.every(leaf));
+  return { type: flatOrOneLevel ? "treemap" : "sunburst", title: name, tree, categories: tree.map((n) => n.name), series: [{ id: "series-1", name: "Values", values: tree.map(chartTreeTotal) }] };
+}
 function findMermaidCharts(text) {
   const lines = text.replace(/^/, "").split(/\r?\n/);
   const found = [];
   const familyOf = (body) => {
-    const header = body.split(/\r?\n/).find((l) => l.trim() && !l.trim().startsWith("%%") && l.trim() !== "---");
+    let rows = body.split(/\r?\n/);
+    const firstRow = rows.findIndex((l) => l.trim());
+    if (rows[firstRow]?.trim() === "---") {
+      const end = rows.findIndex((l, i) => i > firstRow && l.trim() === "---");
+      if (end > 0) rows = rows.slice(end + 1);
+    }
+    const header = rows.find((l) => l.trim() && !l.trim().startsWith("%%"));
     if (!header) return null;
     if (/^\s*xychart(-beta)?\b/.test(header)) return "xychart";
     if (/^\s*pie\b/.test(header)) return "pie";
     if (/^\s*radar(-beta)?\b/.test(header)) return "radar";
+    if (/^\s*sankey(-beta)?\s*$/.test(header)) return "sankey";
+    if (/^\s*treemap(-beta)?\s*$/.test(header)) return "treemap";
     return null;
   };
   for (let i = 0; i < lines.length; i++) {
@@ -476,6 +550,21 @@ function describeChart(spec, series = spec.series.filter((s) => !s.hidden).map((
     }
     return parts.join(" ");
   }
+  if (family === "barrace") {
+    const n = spec.categories.length;
+    const first = chartRaceRanking(spec, 0)[0];
+    const last = chartRaceRanking(spec, n - 1)[0];
+    const lead = (e, at) => e ? `${e.name} leads at ${at} with ${fmt(e.value)}` : "";
+    return `${head} of ${series.length} names over ${n} time points (${spec.categories[0]} to ${spec.categories[n - 1]}), showing the top ${Math.min(spec.raceTopN, series.length)}. ${lead(first, spec.categories[0])}; ${lead(last, spec.categories[n - 1])}.`;
+  }
+  if (family === "sankey") {
+    if (!spec.links.length) return `${head} with no flows yet.`;
+    const total = spec.links.reduce((t, l) => t + l.value, 0);
+    const largest = [...spec.links].sort((a, b) => b.value - a.value)[0];
+    const sources = spec.sankeyNodes.filter((n) => !spec.links.some((l) => l.target === n));
+    const sinks = spec.sankeyNodes.filter((n) => !spec.links.some((l) => l.source === n));
+    return `${head} of ${spec.links.length} flows between ${spec.sankeyNodes.length} nodes, from ${sources.join(", ")} to ${sinks.join(", ")}. The largest flow is ${largest.source} \u2192 ${largest.target} (${fmt(largest.value)}); all flows add up to ${fmt(total)}.`;
+  }
   if (family === "parliament") {
     const s = spec.series.find((x) => !x.hidden);
     const seats = spec.categories.map((c, i) => ({ c, n: Math.max(0, Math.round(s.values[i] ?? 0)) }));
@@ -695,6 +784,17 @@ function sameChartJson(a, b) {
   if (keys.length !== Object.keys(bo).filter((k) => bo[k] !== void 0).length) return false;
   return keys.every((k) => Object.prototype.hasOwnProperty.call(bo, k) && sameChartJson(ao[k], bo[k]));
 }
+var defaultRaceTicker = {
+  now: () => typeof performance !== "undefined" ? performance.now() : Date.now(),
+  next: (step) => {
+    if (typeof requestAnimationFrame === "function") {
+      const id2 = requestAnimationFrame(() => step());
+      return () => cancelAnimationFrame(id2);
+    }
+    const id = setTimeout(step, 16);
+    return () => clearTimeout(id);
+  }
+};
 var fail = (message, issues) => ({ ok: false, message, ...issues ? { issues } : {} });
 var ChartController = class {
   history;
@@ -707,12 +807,16 @@ var ChartController = class {
   revision = 0;
   applying = false;
   onChange;
+  raceTicker;
+  raceFrame = null;
+  raceStop = null;
   listeners = /* @__PURE__ */ new Set();
   unsubscribeHistory;
   state;
   constructor(options = {}) {
     this.history = options.history ?? new HistoryManager();
     this.onChange = options.onChange;
+    this.raceTicker = options.raceTicker ?? defaultRaceTicker;
     const { spec, issues } = normalizeChartSpec(options.spec ?? {});
     this.spec = spec;
     this.issues = issues;
@@ -762,6 +866,8 @@ var ChartController = class {
       canRedo: h.canRedo,
       undoLabel: h.undoName,
       redoLabel: h.redoName,
+      raceFrame: this.raceFrame === null ? null : Math.min(this.raceFrame, Math.max(0, this.spec.categories.length - 1)),
+      racePlaying: this.raceStop !== null,
       revision: this.revision
     };
   }
@@ -910,7 +1016,7 @@ var ChartController = class {
    * to the categories; all-or-nothing like `update`.
    */
   setData(data, options = {}) {
-    const clear = (data.categories || data.series) && this.spec.tree.length ? { tree: [] } : {};
+    const clear = (data.categories || data.series) && (this.spec.tree.length || this.spec.links.length) ? { tree: [], links: [] } : {};
     return this.update({ ...data.categories ? { categories: data.categories } : {}, ...data.series ? { series: data.series } : {}, ...clear }, { label: options.label ?? "Edit chart data" });
   }
   /**
@@ -1153,7 +1259,7 @@ var ChartController = class {
       const old = byName.get(s.name);
       return { ...s, ...old?.color ? { color: old.color } : {}, ...old?.type ? { type: old.type } : {}, ...old ? { id: old.id } : {} };
     });
-    const { spec } = normalizeChartSpec({ ...this.spec, categories: data.categories, series, tree: [] });
+    const { spec } = normalizeChartSpec({ ...this.spec, categories: data.categories, series, tree: [], links: [] });
     this.commit("Import data", spec);
     if (data.issues.length) {
       this.issues = data.issues;
@@ -1170,8 +1276,12 @@ var ChartController = class {
   // -------------------------------------------------------------------------
   // Grouped data (tree)
   // -------------------------------------------------------------------------
-  /** A refusal while the data is a tree (cell edits would be overwritten by its totals), else null. */
+  /** A refusal while the data is a tree or flows (cell edits would be overwritten by their totals), else null. */
   treeLocked() {
+    if (this.spec.links.length)
+      return this.reject(
+        "This chart's data is flows (links): its categories are the nodes and its values how much passes through each. Change it with setLinks / the flow edits (set_chart_links, add_chart_link, update_chart_link, remove_chart_link), or replace it with new data."
+      );
     if (!this.spec.tree.length) return null;
     return this.reject(
       "This chart's data is grouped (a tree): its categories and values are the top-level groups and their totals. Change it with setTree / the tree node edits (set_chart_tree, add_chart_tree_node, update_chart_tree_node, remove_chart_tree_node), or replace it with new data."
@@ -1182,7 +1292,7 @@ var ChartController = class {
     const issues = [];
     const next = normalizeChartTree(tree, issues);
     if (issues.length) return this.reject(issues.map((i) => i.message).join(" "), issues);
-    return this.update({ tree: next }, { label: options.label ?? (next.length ? "Replace grouped data" : "Ungroup data") });
+    return this.update({ tree: next, links: [] }, { label: options.label ?? (next.length ? "Replace grouped data" : "Ungroup data") });
   }
   /**
    * Replaces the grouped data from rows of names and a value (group, …, item, value), as the
@@ -1208,7 +1318,7 @@ var ChartController = class {
     const next = chartTreeFromTable(rows, options, issues);
     if (issues.length) return this.reject(issues.map((i) => i.message).join(" "), issues);
     if (!next.length) return this.reject('There is no grouped data to import: expected rows of names followed by a value, e.g. "Europe,France,40".');
-    return this.update({ tree: next }, { label: "Import grouped data" });
+    return this.update({ tree: next, links: [] }, { label: "Import grouped data" });
   }
   nodeAt(path) {
     const node = findChartTreeNode(this.spec.tree, path);
@@ -1281,6 +1391,56 @@ var ChartController = class {
     return this.update({ tree }, { label: `Delete "${node.name}"` });
   }
   // -------------------------------------------------------------------------
+  // Flows (links)
+  // -------------------------------------------------------------------------
+  /**
+   * Replaces the flows (and, when given, the node order). An empty list goes back to the
+   * table, keeping how much passed through each node as values. One undo step, all-or-nothing.
+   */
+  setLinks(links, options = {}) {
+    const issues = [];
+    const next = normalizeChartLinks(links, issues);
+    if (issues.length) return this.reject(issues.map((i) => i.message).join(" "), issues);
+    const used = new Set(next.flatMap((l) => [l.source, l.target]));
+    const sankeyNodes = options.nodes ? [...options.nodes] : this.spec.sankeyNodes.filter((n) => used.has(n));
+    return this.update({ links: next, tree: [], sankeyNodes }, { label: options.label ?? (next.length ? "Replace flows" : "Remove flows") });
+  }
+  /** Replaces the data with flows from a table of source, target and value columns. */
+  importLinksTable(rows, options = {}) {
+    const raw = chartLinksFromTable(rows, options);
+    if (!raw.length) return this.reject('There are no flows to import: expected rows of source, target and value, e.g. "Website,Signup,120".');
+    return this.setLinks(raw, { label: "Import flows" });
+  }
+  badLink(index) {
+    const n = this.spec.links.length;
+    return fail(`There is no flow ${index}; ${n ? `expected 0 to ${n - 1}` : "the chart has none yet"}.`);
+  }
+  /** Adds a flow and returns its index. */
+  addLink(link) {
+    const result = this.setLinks([...this.spec.links, link], { label: `Add flow ${String(link?.source ?? "")} \u2192 ${String(link?.target ?? "")}` });
+    if (!result.ok) return result;
+    return { ok: true, index: this.spec.links.length - 1 };
+  }
+  /** Changes a flow's source, target, value or colour (`color: null` goes back to the default). */
+  updateLink(index, patch) {
+    const current = this.spec.links[index];
+    if (!current) return this.badLink(index);
+    const merged = { ...current, ...patch };
+    if (patch.color === null) delete merged.color;
+    return this.setLinks(
+      this.spec.links.map((l, i) => i === index ? merged : l),
+      { label: "Change flow" }
+    );
+  }
+  removeLink(index) {
+    const current = this.spec.links[index];
+    if (!current) return this.badLink(index);
+    return this.setLinks(
+      this.spec.links.filter((_, i) => i !== index),
+      { label: `Delete flow ${current.source} \u2192 ${current.target}` }
+    );
+  }
+  // -------------------------------------------------------------------------
   // Annotations
   // -------------------------------------------------------------------------
   /** Sets the note written under the chart ("" removes it). */
@@ -1516,6 +1676,55 @@ var ChartController = class {
   // -------------------------------------------------------------------------
   // Selection and gestures
   // -------------------------------------------------------------------------
+  /**
+   * Shows a bar race at a moment: a category index, fractional between time points (`null`:
+   * the last one). View state like the selection, so not an undo step. Stops playback.
+   */
+  setRaceFrame(frame) {
+    const n = this.spec.categories.length;
+    if (frame !== null && !(Number.isFinite(frame) && frame >= 0 && frame <= Math.max(0, n - 1)))
+      return fail(n ? `The race has time points 0 to ${n - 1}${n > 1 ? ` ("${this.spec.categories[0]}" to "${this.spec.categories[n - 1]}")` : ""}; got ${frame}.` : "The chart has no time points (categories) yet.");
+    this.stopRace();
+    if (frame === this.raceFrame) return { ok: true };
+    this.raceFrame = frame;
+    this.notify(false);
+    return { ok: true };
+  }
+  /**
+   * Plays the bar race from the moment shown (from the start when it is at the end), moving
+   * one time point every `msPerStep` (default 1000) until the last. Not an undo step.
+   */
+  playRace(options = {}) {
+    const last = this.spec.categories.length - 1;
+    if (last < 1) return fail("A race needs at least two time points (categories) to play.");
+    this.stopRace();
+    const per = Math.max(50, options.msPerStep ?? 1e3);
+    const from = this.raceFrame === null || this.raceFrame >= last ? 0 : this.raceFrame;
+    const start = this.raceTicker.now();
+    const step = () => {
+      const at = Math.min(last, from + (this.raceTicker.now() - start) / per);
+      this.raceFrame = at;
+      if (at >= last) {
+        this.raceStop = null;
+        this.raceFrame = null;
+      } else this.raceStop = this.raceTicker.next(step);
+      this.notify(false);
+    };
+    this.raceFrame = from;
+    this.raceStop = this.raceTicker.next(step);
+    this.notify(false);
+    return { ok: true };
+  }
+  /** Pauses bar race playback where it is. */
+  pauseRace() {
+    if (!this.raceStop) return;
+    this.stopRace();
+    this.notify(false);
+  }
+  stopRace() {
+    this.raceStop?.();
+    this.raceStop = null;
+  }
   /** Selects a chart element (view state; not an undo step). */
   select(selection) {
     const next = this.validSelection(selection, this.spec);
@@ -1638,6 +1847,7 @@ var ChartController = class {
   }
   /** Stops listening to the history (reconnected by the next `subscribe`). */
   destroy() {
+    this.stopRace();
     this.unsubscribeHistory?.();
     this.unsubscribeHistory = void 0;
     this.listeners.clear();
@@ -1673,8 +1883,12 @@ function updateLabel(patch) {
     parliamentArc: "Change hemicycle sweep",
     parliamentMajority: "Change majority",
     parliamentLabel: "Edit seat caption",
+    raceTopN: "Change bars shown",
     sunburstLabel: "Edit centre caption",
     tree: "Replace grouped data",
+    links: "Replace flows",
+    sankeyNodes: "Reorder nodes",
+    sankeyLinkColor: "Change flow colours",
     radarTicks: "Change radar rings",
     radarGraticule: "Change radar grid",
     legend: "Change legend",