@icen.ai/ui 0.8.1 → 0.9.0

package/dist/behaviors/charts.mjs

@@ -1525,10 +1525,803 @@ function renderChart(el, raw) {
     }
   };
 }
+var GRAPH_CHART_TYPE = "graph";
+var MAP_CHART_TYPE = "map";
+function buildLayoutState(nodes, edges, width, height) {
+  const ids = [];
+  const index = /* @__PURE__ */ new Map();
+  for (const node of nodes) {
+    const id = String(node?.id ?? "").trim();
+    if (!id || index.has(id)) continue;
+    index.set(id, ids.length);
+    ids.push(id);
+  }
+  const pairs = [];
+  for (const edge of edges) {
+    const a = index.get(String(edge?.source ?? "").trim());
+    const b = index.get(String(edge?.target ?? "").trim());
+    if (a == null || b == null || a === b) continue;
+    pairs.push([a, b]);
+  }
+  const n = ids.length;
+  return {
+    ids,
+    index,
+    x: new Float64Array(n),
+    y: new Float64Array(n),
+    pairs,
+    width,
+    height,
+    k: n > 0 ? Math.sqrt(width * height / n) : 1
+  };
+}
+function relaxLayout(state, rounds, pinned = -1, tempScale = 1) {
+  const { x, y, pairs, width, height, k } = state;
+  const n = x.length;
+  if (n <= 1 || rounds <= 0) return;
+  const cx = width / 2;
+  const cy = height / 2;
+  const gravity = 0.015;
+  const tempStart = Math.min(width, height) / 6 * tempScale;
+  const dx = new Float64Array(n);
+  const dy = new Float64Array(n);
+  for (let round = 0; round < rounds; round++) {
+    dx.fill(0);
+    dy.fill(0);
+    const temp = Math.max(0.5, tempStart * (1 - round / rounds));
+    for (let i = 0; i < n; i++) {
+      for (let j = i + 1; j < n; j++) {
+        let vx = x[j] - x[i];
+        let vy = y[j] - y[i];
+        let d2 = vx * vx + vy * vy;
+        if (d2 < 0.01) {
+          vx = 0.5 + (j - i) % 7 * 0.25;
+          vy = (i * 3 + j) % 5 * 0.3 - 0.6;
+          d2 = vx * vx + vy * vy;
+        }
+        const d = Math.sqrt(d2);
+        const f = k * k / d;
+        const ux = vx / d * f;
+        const uy = vy / d * f;
+        dx[i] -= ux;
+        dy[i] -= uy;
+        dx[j] += ux;
+        dy[j] += uy;
+      }
+    }
+    for (const [a, b] of pairs) {
+      let vx = x[b] - x[a];
+      let vy = y[b] - y[a];
+      let d = Math.sqrt(vx * vx + vy * vy);
+      if (d < 0.01) {
+        vx = 1;
+        vy = 0;
+        d = 1;
+      }
+      const f = Math.min(d * d / k, k * 3);
+      const ux = vx / d * f;
+      const uy = vy / d * f;
+      dx[a] += ux;
+      dy[a] += uy;
+      dx[b] -= ux;
+      dy[b] -= uy;
+    }
+    for (let i = 0; i < n; i++) {
+      if (i === pinned) continue;
+      dx[i] += (cx - x[i]) * gravity;
+      dy[i] += (cy - y[i]) * gravity;
+      const dm = Math.sqrt(dx[i] * dx[i] + dy[i] * dy[i]);
+      if (dm <= 0) continue;
+      const v = Math.min(dm, temp) / dm;
+      x[i] = Math.min(width, Math.max(0, x[i] + dx[i] * v));
+      y[i] = Math.min(height, Math.max(0, y[i] + dy[i] * v));
+    }
+  }
+}
+function fitLayout(state, margin) {
+  const { x, y, width, height } = state;
+  const n = x.length;
+  if (n === 0) return;
+  let minX = Infinity;
+  let maxX = -Infinity;
+  let minY = Infinity;
+  let maxY = -Infinity;
+  for (let i = 0; i < n; i++) {
+    if (x[i] < minX) minX = x[i];
+    if (x[i] > maxX) maxX = x[i];
+    if (y[i] < minY) minY = y[i];
+    if (y[i] > maxY) maxY = y[i];
+  }
+  const spanX = Math.max(1e-6, maxX - minX);
+  const spanY = Math.max(1e-6, maxY - minY);
+  const scale = Math.min((width - margin * 2) / spanX, (height - margin * 2) / spanY, 4);
+  const offX = (width - spanX * scale) / 2 - minX * scale;
+  const offY = (height - spanY * scale) / 2 - minY * scale;
+  for (let i = 0; i < n; i++) {
+    x[i] = x[i] * scale + offX;
+    y[i] = y[i] * scale + offY;
+  }
+}
+function initRingLayout(state, seed = 0) {
+  const { ids, index, x, y, width, height } = state;
+  const n = ids.length;
+  if (n === 0) return;
+  if (n === 1) {
+    x[0] = width / 2;
+    y[0] = height / 2;
+    return;
+  }
+  const order = [...ids].sort();
+  const radius = Math.min(width, height) / 2 * 0.76;
+  const deg = (seed % 360 + 360) % 360;
+  const seedAngle = deg * Math.PI / 180;
+  for (let rank = 0; rank < n; rank++) {
+    const i = index.get(order[rank] ?? "") ?? -1;
+    if (i < 0) continue;
+    const angle = seedAngle - Math.PI / 2 + rank * 2 * Math.PI / n;
+    x[i] = width / 2 + radius * Math.cos(angle);
+    y[i] = height / 2 + radius * Math.sin(angle);
+  }
+}
+function layoutGraph(nodes, edges, opts) {
+  const width = Math.max(16, opts?.width ?? 320);
+  const height = Math.max(16, opts?.height ?? 200);
+  const state = buildLayoutState(nodes, edges, width, height);
+  if (state.ids.length === 0) return /* @__PURE__ */ new Map();
+  initRingLayout(state, opts?.seed ?? 0);
+  relaxLayout(state, Math.max(1, Math.round(opts?.iterations ?? 300)));
+  fitLayout(state, Math.max(8, Math.min(width, height) * 0.08));
+  const out = /* @__PURE__ */ new Map();
+  state.ids.forEach((id, i) => out.set(id, { x: state.x[i], y: state.y[i] }));
+  return out;
+}
+var datumMarkInfo = /* @__PURE__ */ new WeakMap();
+var datumEventControl = /* @__PURE__ */ new WeakMap();
+function dispatchDatumEvent(root, type, mark, phase, pointer) {
+  const numOr = (v) => v == null ? void 0 : Number(v);
+  const detail = {
+    type,
+    phase,
+    chart: chartDelegateMeta.get(root)?.type() ?? "vbar",
+    index: numOr(mark.getAttribute("data-chart-index")),
+    seriesIndex: numOr(mark.getAttribute("data-chart-series")),
+    seriesName: mark.getAttribute("data-chart-series-name") ?? void 0,
+    label: mark.getAttribute("data-chart-label") ?? void 0,
+    value: numOr(mark.getAttribute("data-chart-value")),
+    target: mark,
+    pointerX: pointer?.x,
+    pointerY: pointer?.y,
+    datum: datumMarkInfo.get(mark)?.datum
+  };
+  emitIcen(root, `icen:chart-${type}`, detail);
+}
+function bindDatumEvents(root) {
+  const existing = datumEventControl.get(root);
+  if (existing) return existing;
+  const tipEnabled = () => chartDelegateMeta.get(root)?.tooltip() ?? true;
+  const markOf = (e) => {
+    const t = e.target;
+    return t instanceof Element ? t.closest("[data-chart-mark]") : null;
+  };
+  let hoverMark = null;
+  let suppressClick = false;
+  const bindings = [];
+  const on = (type, fn) => {
+    const listener = (evt) => fn(evt);
+    root.addEventListener(type, listener);
+    bindings.push([type, listener]);
+  };
+  const enterMark = (mark, px, py) => {
+    hoverMark = mark;
+    mark.classList.add("is-hover");
+    dispatchDatumEvent(root, "hover", mark, "enter", { x: px, y: py });
+    if (tipEnabled()) {
+      const tip = chartTooltip();
+      tip.textContent = datumMarkInfo.get(mark)?.tip ?? tooltipText(mark);
+      applyTooltipSizing(mark);
+      tip.hidden = false;
+      moveTooltip(px, py);
+    }
+  };
+  const leaveMark = (pointer) => {
+    if (!hoverMark) return;
+    hoverMark.classList.remove("is-hover");
+    dispatchDatumEvent(root, "hover", hoverMark, "leave", pointer);
+    hoverMark = null;
+    chartTooltip().hidden = true;
+  };
+  on("pointerover", (e) => {
+    const mark = markOf(e);
+    if (!mark || mark === hoverMark) return;
+    leaveMark({ x: e.clientX, y: e.clientY });
+    enterMark(mark, e.clientX, e.clientY);
+  });
+  on("pointermove", (e) => {
+    if (!hoverMark) return;
+    dispatchDatumEvent(root, "hover", hoverMark, "move", { x: e.clientX, y: e.clientY });
+    if (tipEnabled()) moveTooltip(e.clientX, e.clientY);
+  });
+  on("pointerout", (e) => {
+    const mark = markOf(e);
+    if (mark && mark === hoverMark) leaveMark({ x: e.clientX, y: e.clientY });
+  });
+  on("pointerleave", () => leaveMark());
+  on("click", (e) => {
+    if (suppressClick) {
+      suppressClick = false;
+      return;
+    }
+    const mark = markOf(e);
+    if (mark) dispatchDatumEvent(root, "click", mark, void 0, { x: e.clientX, y: e.clientY });
+  });
+  on("dblclick", (e) => {
+    const mark = markOf(e);
+    if (mark) dispatchDatumEvent(root, "dblclick", mark, void 0, { x: e.clientX, y: e.clientY });
+  });
+  on("contextmenu", (e) => {
+    const mark = markOf(e);
+    if (!mark) return;
+    e.preventDefault();
+    dispatchDatumEvent(root, "contextmenu", mark, void 0, { x: e.clientX, y: e.clientY });
+  });
+  const control = {
+    unbind() {
+      for (const [type, listener] of bindings) root.removeEventListener(type, listener);
+      bindings.length = 0;
+      if (hoverMark) {
+        hoverMark.classList.remove("is-hover");
+        hoverMark = null;
+      }
+      chartTooltip().hidden = true;
+      datumEventControl.delete(root);
+    },
+    suppressNextClick() {
+      suppressClick = true;
+    }
+  };
+  datumEventControl.set(root, control);
+  return control;
+}
+function buildClusterModel(keys, labels) {
+  const seen = /* @__PURE__ */ new Set();
+  for (const key of keys) {
+    if (typeof key === "string" && key !== "") seen.add(key);
+  }
+  if (seen.size === 0) return null;
+  const list = [...seen].sort();
+  return {
+    keys: list,
+    indexOf: new Map(list.map((k, i) => [k, i])),
+    label: (key) => labels?.[key] ?? key,
+    color: (index) => paletteVar(index + 1)
+  };
+}
+function registerDatumMark(mark, datum, tip) {
+  datumMarkInfo.set(mark, { datum, tip });
+}
+function truncateText(text, max = 8) {
+  const chars = Array.from(text);
+  return chars.length > max ? `${chars.slice(0, max).join("")}\u2026` : text;
+}
+function svgClientPoint(svg, clientX, clientY, viewBoxWidth, viewBoxHeight) {
+  const rect = svg.getBoundingClientRect();
+  const scale = Math.min(rect.width / viewBoxWidth, rect.height / viewBoxHeight);
+  if (!Number.isFinite(scale) || scale <= 0) {
+    return { x: viewBoxWidth / 2, y: viewBoxHeight / 2 };
+  }
+  return {
+    x: (clientX - rect.left - (rect.width - viewBoxWidth * scale) / 2) / scale,
+    y: (clientY - rect.top - (rect.height - viewBoxHeight * scale) / 2) / scale
+  };
+}
+function normalizeGraphSpec(raw) {
+  let src = raw;
+  if (typeof src === "string") {
+    try {
+      src = JSON.parse(src);
+    } catch {
+      src = {};
+    }
+  }
+  if (!src || typeof src !== "object" || Array.isArray(src)) src = {};
+  const s = src;
+  const spec = { ...normalizeChartSpec(s), type: "graph", nodes: [], edges: [] };
+  if (Array.isArray(s.nodes)) {
+    const seen = /* @__PURE__ */ new Set();
+    for (const v of s.nodes) {
+      if (!v || typeof v !== "object" || Array.isArray(v)) continue;
+      const r = v;
+      const id = String(r.id ?? "").trim();
+      if (!id || seen.has(id)) continue;
+      seen.add(id);
+      const node = { id };
+      if (r.label != null) node.label = String(r.label);
+      if (typeof r.cluster === "string" && r.cluster !== "") node.cluster = r.cluster;
+      const weight = toNum(r.weight);
+      if (weight != null) node.weight = weight;
+      if (r.meta && typeof r.meta === "object" && !Array.isArray(r.meta)) {
+        node.meta = { ...r.meta };
+      }
+      spec.nodes.push(node);
+    }
+  }
+  const known = new Set(spec.nodes.map((n) => n.id));
+  if (Array.isArray(s.edges)) {
+    for (const v of s.edges) {
+      if (!v || typeof v !== "object" || Array.isArray(v)) continue;
+      const r = v;
+      const source = String(r.source ?? "").trim();
+      const target = String(r.target ?? "").trim();
+      if (!known.has(source) || !known.has(target) || source === target) continue;
+      const edge = { source, target };
+      const weight = toNum(r.weight);
+      if (weight != null) edge.weight = weight;
+      spec.edges.push(edge);
+    }
+  }
+  if (s.directed === true) spec.directed = true;
+  if (s.clusterLabels && typeof s.clusterLabels === "object" && !Array.isArray(s.clusterLabels)) {
+    const labels = {};
+    for (const [key, value] of Object.entries(s.clusterLabels)) {
+      if (typeof value === "string" && value !== "") labels[key] = value;
+    }
+    spec.clusterLabels = labels;
+  }
+  return spec;
+}
+function normalizeMapSpec(raw) {
+  let src = raw;
+  if (typeof src === "string") {
+    try {
+      src = JSON.parse(src);
+    } catch {
+      src = {};
+    }
+  }
+  if (!src || typeof src !== "object" || Array.isArray(src)) src = {};
+  const s = src;
+  const spec = { ...normalizeChartSpec(s), type: "map", points: [] };
+  if (Array.isArray(s.points)) {
+    const seen = /* @__PURE__ */ new Set();
+    for (const v of s.points) {
+      if (!v || typeof v !== "object" || Array.isArray(v)) continue;
+      const r = v;
+      const id = String(r.id ?? "").trim();
+      if (!id || seen.has(id)) continue;
+      seen.add(id);
+      const point = { id, x: toNum(r.x) ?? 0, y: toNum(r.y) ?? 0 };
+      if (typeof r.cluster === "string" && r.cluster !== "") point.cluster = r.cluster;
+      if (r.label != null) point.label = String(r.label);
+      if (r.meta && typeof r.meta === "object" && !Array.isArray(r.meta)) {
+        point.meta = { ...r.meta };
+      }
+      spec.points.push(point);
+    }
+  }
+  if (s.clusters && typeof s.clusters === "object" && !Array.isArray(s.clusters)) {
+    const labels = {};
+    for (const [key, value] of Object.entries(s.clusters)) {
+      if (typeof value === "string" && value !== "") labels[key] = value;
+    }
+    spec.clusters = labels;
+  }
+  return spec;
+}
+var GRAPH_W = 360;
+var GRAPH_H = 260;
+var GRAPH_PAD = 28;
+var GRAPH_LW = GRAPH_W - GRAPH_PAD * 2;
+var GRAPH_LH = GRAPH_H - GRAPH_PAD * 2;
+var graphMarkerSeq = 0;
+function renderGraph(el, raw) {
+  const noop = () => void 0;
+  let current = normalizeGraphSpec(raw);
+  if (typeof document === "undefined") {
+    return { el, spec: current, update: noop, on: () => noop, destroy: noop };
+  }
+  const legendState = { hidden: null };
+  let layout = null;
+  let svgRef = null;
+  let nodeEls = [];
+  let edgeList = [];
+  let nodeRadii = [];
+  let directed = false;
+  let arrowId = "";
+  const edgeEnds = (from, to) => {
+    const ax = GRAPH_PAD + (layout ? layout.x[from] : 0);
+    const ay = GRAPH_PAD + (layout ? layout.y[from] : 0);
+    const bx = GRAPH_PAD + (layout ? layout.x[to] : 0);
+    const by = GRAPH_PAD + (layout ? layout.y[to] : 0);
+    if (!directed) {
+      return { x1: ax.toFixed(1), y1: ay.toFixed(1), x2: bx.toFixed(1), y2: by.toFixed(1) };
+    }
+    const dx = bx - ax;
+    const dy = by - ay;
+    const d = Math.hypot(dx, dy) || 1;
+    const cut = (nodeRadii[to] ?? 6) + 4;
+    return {
+      x1: ax.toFixed(1),
+      y1: ay.toFixed(1),
+      x2: (bx - dx / d * cut).toFixed(1),
+      y2: (by - dy / d * cut).toFixed(1)
+    };
+  };
+  const paint = (body) => {
+    directed = current.directed === true;
+    layout = null;
+    svgRef = null;
+    nodeEls = [];
+    edgeList = [];
+    arrowId = "";
+    const nodes = current.nodes;
+    if (nodes.length === 0) {
+      nodeRadii = [];
+      renderEmpty(body, current.emptyLabel);
+      return;
+    }
+    const clusters = buildClusterModel(nodes.map((n) => n.cluster), current.clusterLabels);
+    const tone = toneVar(current.tone);
+    const idOf = new Map(nodes.map((n, i) => [n.id, i]));
+    const degree = nodes.map(() => 0);
+    for (const e of current.edges) {
+      const a = idOf.get(e.source);
+      const b = idOf.get(e.target);
+      if (a == null || b == null || a === b) continue;
+      degree[a] += 1;
+      degree[b] += 1;
+    }
+    const weights = nodes.map((n, i) => n.weight ?? degree[i]);
+    let wMin = Infinity;
+    let wMax = -Infinity;
+    for (const w of weights) {
+      if (w < wMin) wMin = w;
+      if (w > wMax) wMax = w;
+    }
+    nodeRadii = weights.map((w) => 6 + (wMax > wMin ? (w - wMin) / (wMax - wMin) : 0.5) * 12);
+    let eMin = Infinity;
+    let eMax = -Infinity;
+    for (const e of current.edges) {
+      if (e.weight == null) continue;
+      if (e.weight < eMin) eMin = e.weight;
+      if (e.weight > eMax) eMax = e.weight;
+    }
+    const edgeWidth = (e) => e.weight == null ? 1 : 0.6 + (eMax > eMin ? (e.weight - eMin) / (eMax - eMin) : 0.5) * 1.9;
+    const wrap = document.createElement("div");
+    wrap.className = "chart-graph";
+    if (current.tone) wrap.style.setProperty("--chart-tone", toneVar(current.tone));
+    const svg = svgEl("svg", { viewBox: `0 0 ${GRAPH_W} ${GRAPH_H}`, role: "img" });
+    svgRef = svg;
+    svg.addEventListener("pointerdown", onNodePointerDown);
+    const defs = svgEl("defs", {});
+    if (directed) {
+      arrowId = `icen-chart-graph-arrow-${++graphMarkerSeq}`;
+      const marker = svgEl("marker", {
+        id: arrowId,
+        viewBox: "0 0 8 8",
+        refX: "7",
+        refY: "4",
+        markerWidth: "6",
+        markerHeight: "6",
+        orient: "auto"
+      });
+      marker.appendChild(svgEl("path", { d: "M0.5,0.8 L7.5,4 L0.5,7.2 Z", fill: "var(--token-text-faint)" }));
+      defs.appendChild(marker);
+    }
+    layout = buildLayoutState(nodes, current.edges, GRAPH_LW, GRAPH_LH);
+    initRingLayout(layout, 0);
+    relaxLayout(layout, 300);
+    fitLayout(layout, 20);
+    const edgeLayer = svgEl("g", { class: "chart-graph-edges" });
+    const nodeLayer = svgEl("g", { class: "chart-graph-nodes" });
+    for (const e of current.edges) {
+      const from = idOf.get(e.source);
+      const to = idOf.get(e.target);
+      if (from == null || to == null || from === to) continue;
+      const line = svgEl("line", {
+        ...edgeEnds(from, to),
+        stroke: "var(--token-line-soft)",
+        "stroke-width": edgeWidth(e).toFixed(2),
+        ...directed ? { "marker-end": `url(#${arrowId})` } : {}
+      });
+      line.classList.add("chart-graph-edge");
+      const fromKey = nodes[from]?.cluster;
+      const toKey = nodes[to]?.cluster;
+      if (fromKey) line.setAttribute("data-edge-cluster-from", fromKey);
+      if (toKey) line.setAttribute("data-edge-cluster-to", toKey);
+      edgeList.push({ el: line, from, to });
+      edgeLayer.appendChild(line);
+    }
+    nodes.forEach((node, i) => {
+      const clusterKey = node.cluster;
+      const ci = clusterKey != null && clusters ? clusters.indexOf.get(clusterKey) : void 0;
+      const clusterName = ci != null && clusters && clusterKey != null ? clusters.label(clusterKey) : void 0;
+      const fill = clusters ? ci != null ? clusters.color(ci) : "var(--token-text-faint)" : tone;
+      const pos = { x: GRAPH_PAD + layout.x[i], y: GRAPH_PAD + layout.y[i] };
+      const g = svgEl("g", {
+        class: "chart-graph-node",
+        transform: `translate(${pos.x.toFixed(1)},${pos.y.toFixed(1)})`
+      });
+      g.setAttribute("data-chart-node-id", node.id);
+      setMarkData(g, {
+        index: i,
+        seriesIndex: ci,
+        seriesName: clusterName,
+        label: node.label ?? node.id,
+        value: weights[i]
+      });
+      const dot = svgEl("circle", {
+        class: "chart-graph-dot",
+        r: (nodeRadii[i] ?? 6).toFixed(1),
+        fill,
+        "fill-opacity": "0.92",
+        stroke: "var(--token-card)",
+        "stroke-width": "1.5"
+      });
+      const hit = svgEl("circle", {
+        class: "chart-graph-hit",
+        r: String(Math.max((nodeRadii[i] ?? 6) + 4, 11)),
+        fill: "transparent",
+        "data-chart-hit": "1"
+      });
+      const labelText = truncateText(node.label ?? node.id);
+      const head = clusterName ? `${clusterName} \xB7 ${labelText}` : labelText;
+      const tip = weights[i] > 0 ? `${head}\uFF1A${weights[i]}` : head;
+      const title = svgEl("title", {});
+      title.textContent = tip;
+      g.append(dot, hit, title);
+      registerDatumMark(g, { id: node.id, label: node.label ?? node.id, cluster: clusterKey, meta: node.meta }, tip);
+      nodeEls.push(g);
+      nodeLayer.appendChild(g);
+    });
+    svg.append(defs, edgeLayer, nodeLayer);
+    wrap.appendChild(svg);
+    body.appendChild(wrap);
+    if (clusters) {
+      const legend = toggleLegend(
+        clusters.keys.map((key, ci) => ({ key, label: clusters.label(key), tone: ci + 1, si: ci })),
+        wrap
+      );
+      body.appendChild(legend);
+      const syncEdges = () => {
+        const hiddenOf = (key) => key != null && legend.querySelector(`[data-chart-key="${CSS.escape(key)}"]`)?.classList.contains("is-off") === true;
+        for (const edge of edgeList) {
+          edge.el.classList.toggle(
+            "is-off",
+            hiddenOf(edge.el.getAttribute("data-edge-cluster-from")) || hiddenOf(edge.el.getAttribute("data-edge-cluster-to"))
+          );
+        }
+      };
+      legend.addEventListener("click", syncEdges);
+      legend.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" || e.key === " ") syncEdges();
+      });
+    }
+  };
+  const paintPositions = () => {
+    if (!layout) return;
+    for (let i = 0; i < nodeEls.length; i++) {
+      nodeEls[i]?.setAttribute(
+        "transform",
+        `translate(${(GRAPH_PAD + layout.x[i]).toFixed(1)},${(GRAPH_PAD + layout.y[i]).toFixed(1)})`
+      );
+    }
+    for (const edge of edgeList) {
+      const ends = edgeEnds(edge.from, edge.to);
+      edge.el.setAttribute("x1", ends.x1);
+      edge.el.setAttribute("y1", ends.y1);
+      edge.el.setAttribute("x2", ends.x2);
+      edge.el.setAttribute("y2", ends.y2);
+    }
+  };
+  let drag = null;
+  const applyDragFrame = () => {
+    if (!drag || !layout || !svgRef) return;
+    const p = svgClientPoint(svgRef, drag.px, drag.py, GRAPH_W, GRAPH_H);
+    const i = drag.i;
+    layout.x[i] = Math.min(GRAPH_LW, Math.max(0, p.x - GRAPH_PAD));
+    layout.y[i] = Math.min(GRAPH_LH, Math.max(0, p.y - GRAPH_PAD));
+    relaxLayout(layout, 20, i, 0.4);
+    paintPositions();
+    drag.raf = 0;
+  };
+  const onDragMove = (e) => {
+    if (!drag) return;
+    if (Math.abs(e.clientX - drag.px) + Math.abs(e.clientY - drag.py) > 2) drag.moved = true;
+    drag.px = e.clientX;
+    drag.py = e.clientY;
+    if (drag.raf === 0) drag.raf = requestAnimationFrame(applyDragFrame);
+  };
+  const endDrag = () => {
+    if (!drag) return;
+    if (drag.raf !== 0) cancelAnimationFrame(drag.raf);
+    nodeEls[drag.i]?.classList.remove("is-drag");
+    svgRef?.classList.remove("is-dragging");
+    if (drag.moved) eventsControl.suppressNextClick();
+    drag = null;
+    window.removeEventListener("pointermove", onDragMove);
+    window.removeEventListener("pointerup", endDrag);
+    window.removeEventListener("pointercancel", endDrag);
+  };
+  const onNodePointerDown = (e) => {
+    if (e.button !== 0 || !layout) return;
+    const target = e.target;
+    const g = target instanceof Element ? target.closest(".chart-graph-node") : null;
+    if (!g) return;
+    const i = layout.index.get(g.getAttribute("data-chart-node-id") ?? "");
+    if (i == null) return;
+    e.preventDefault();
+    endDrag();
+    drag = { i, moved: false, raf: 0, px: e.clientX, py: e.clientY };
+    g.classList.add("is-drag");
+    svgRef?.classList.add("is-dragging");
+    window.addEventListener("pointermove", onDragMove);
+    window.addEventListener("pointerup", endDrag);
+    window.addEventListener("pointercancel", endDrag);
+  };
+  chartDelegateMeta.set(el, { type: () => GRAPH_CHART_TYPE, tooltip: () => current.tooltip !== false });
+  const eventsControl = bindDatumEvents(el);
+  const render = () => {
+    if (drag) endDrag();
+    const clusters = buildClusterModel(current.nodes.map((n) => n.cluster), current.clusterLabels);
+    if (current.legend !== void 0) legendState.hidden = current.legend === false;
+    withChrome(el, current, clusters != null, paint, legendState);
+  };
+  render();
+  return {
+    el,
+    spec: current,
+    update(next) {
+      current = normalizeGraphSpec(next);
+      render();
+    },
+    on(name, listener) {
+      const handler = (event) => {
+        listener(event.detail, event);
+      };
+      el.addEventListener(`icen:chart-${name}`, handler);
+      return () => el.removeEventListener(`icen:chart-${name}`, handler);
+    },
+    destroy() {
+      if (drag) endDrag();
+      el.textContent = "";
+      eventsControl.unbind();
+      chartTooltip().hidden = true;
+    }
+  };
+}
+var MAP_W = 360;
+var MAP_H = 220;
+var MAP_PAD = 14;
+function renderMap(el, raw) {
+  const noop = () => void 0;
+  let current = normalizeMapSpec(raw);
+  if (typeof document === "undefined") {
+    return { el, spec: current, update: noop, on: () => noop, destroy: noop };
+  }
+  const legendState = { hidden: null };
+  const paint = (body) => {
+    const points = current.points.filter((p) => Number.isFinite(p.x) && Number.isFinite(p.y));
+    if (points.length === 0) {
+      renderEmpty(body, current.emptyLabel);
+      return;
+    }
+    const clusters = buildClusterModel(points.map((p) => p.cluster), current.clusters);
+    const tone = toneVar(current.tone);
+    let xMin = Infinity;
+    let xMax = -Infinity;
+    let yMin = Infinity;
+    let yMax = -Infinity;
+    for (const p of points) {
+      if (p.x < xMin) xMin = p.x;
+      if (p.x > xMax) xMax = p.x;
+      if (p.y < yMin) yMin = p.y;
+      if (p.y > yMax) yMax = p.y;
+    }
+    if (xMax === xMin) xMax = xMin + 1;
+    if (yMax === yMin) yMax = yMin + 1;
+    const xAt = (x) => MAP_PAD + (x - xMin) / (xMax - xMin) * (MAP_W - MAP_PAD * 2);
+    const yAt = (y) => MAP_H - MAP_PAD - (y - yMin) / (yMax - yMin) * (MAP_H - MAP_PAD * 2);
+    const wrap = document.createElement("div");
+    wrap.className = "chart-map";
+    if (current.tone) wrap.style.setProperty("--chart-tone", toneVar(current.tone));
+    const svg = svgEl("svg", { viewBox: `0 0 ${MAP_W} ${MAP_H}`, role: "img" });
+    for (let i = 0; i <= 3; i++) {
+      const y = MAP_PAD + i * (MAP_H - MAP_PAD * 2) / 3;
+      svg.appendChild(svgEl("line", {
+        x1: String(MAP_PAD),
+        x2: String(MAP_W - MAP_PAD),
+        y1: String(y),
+        y2: String(y),
+        stroke: "var(--token-line-soft)",
+        "stroke-width": "0.75",
+        "stroke-dasharray": "2 4"
+      }));
+    }
+    for (let i = 0; i <= 4; i++) {
+      const x = MAP_PAD + i * (MAP_W - MAP_PAD * 2) / 4;
+      svg.appendChild(svgEl("line", {
+        x1: String(x),
+        x2: String(x),
+        y1: String(MAP_PAD),
+        y2: String(MAP_H - MAP_PAD),
+        stroke: "var(--token-line-soft)",
+        "stroke-width": "0.75",
+        "stroke-dasharray": "2 4"
+      }));
+    }
+    points.forEach((p, i) => {
+      const ci = p.cluster != null && clusters ? clusters.indexOf.get(p.cluster) : void 0;
+      const clusterName = ci != null && clusters && p.cluster != null ? clusters.label(p.cluster) : void 0;
+      const color = clusters ? ci != null ? clusters.color(ci) : "var(--token-text-faint)" : tone;
+      const label = p.label ?? p.id;
+      const labelText = truncateText(label);
+      const tip = clusterName ? `${clusterName} \xB7 ${labelText}` : labelText;
+      const g = svgEl("g", {
+        class: "chart-map-point",
+        transform: `translate(${xAt(p.x).toFixed(1)},${yAt(p.y).toFixed(1)})`
+      });
+      g.setAttribute("data-chart-point-id", p.id);
+      setMarkData(g, { index: i, seriesIndex: ci, seriesName: clusterName, label });
+      const dot = svgEl("circle", {
+        class: "chart-map-dot",
+        r: "4",
+        fill: color,
+        "fill-opacity": "0.7",
+        stroke: color,
+        "stroke-width": "1"
+      });
+      const hit = svgEl("circle", { class: "chart-map-hit", r: "9", fill: "transparent", "data-chart-hit": "1" });
+      const title = svgEl("title", {});
+      title.textContent = tip;
+      g.append(dot, hit, title);
+      registerDatumMark(g, { id: p.id, label, cluster: p.cluster, meta: p.meta }, tip);
+      svg.appendChild(g);
+    });
+    wrap.appendChild(svg);
+    body.appendChild(wrap);
+    if (clusters) {
+      body.appendChild(
+        toggleLegend(
+          clusters.keys.map((key, ci) => ({ key, label: clusters.label(key), tone: ci + 1, si: ci })),
+          wrap
+        )
+      );
+    }
+  };
+  chartDelegateMeta.set(el, { type: () => MAP_CHART_TYPE, tooltip: () => current.tooltip !== false });
+  const eventsControl = bindDatumEvents(el);
+  const render = () => {
+    const clusters = buildClusterModel(current.points.map((p) => p.cluster), current.clusters);
+    if (current.legend !== void 0) legendState.hidden = current.legend === false;
+    withChrome(el, current, clusters != null, paint, legendState);
+  };
+  render();
+  return {
+    el,
+    spec: current,
+    update(next) {
+      current = normalizeMapSpec(next);
+      render();
+    },
+    on(name, listener) {
+      const handler = (event) => {
+        listener(event.detail, event);
+      };
+      el.addEventListener(`icen:chart-${name}`, handler);
+      return () => el.removeEventListener(`icen:chart-${name}`, handler);
+    },
+    destroy() {
+      el.textContent = "";
+      eventsControl.unbind();
+      chartTooltip().hidden = true;
+    }
+  };
+}
 export {
   bindChartEvents,
   chartFormatValue,
   inferChartType,
+  layoutGraph,
   normalizeChartSpec,
   registerChartTone,
   renderArea,
@@ -1536,9 +2329,11 @@ export {
   renderChart,
   renderDonut,
   renderGauge,
+  renderGraph,
   renderHBar,
   renderHeatmap,
   renderLine,
+  renderMap,
   renderRadar,
   renderScatter,
   renderSparkline,