@xenosystem/blocks 0.21.0 → 0.23.0

package/dist/corpus/index.js

@@ -0,0 +1,991 @@
+import {
+  XenoGraphScale,
+  edgePath,
+  fitToBounds,
+  zoomAboutCursor
+} from "../chunk-76V25B3E.js";
+import {
+  MinusGlyph,
+  PlusGlyph
+} from "../chunk-YSMDUREC.js";
+import "../chunk-2KG3PWR4.js";
+
+// src/corpus/shape/panel.ts
+import { createElement } from "react";
+import { createRoot } from "react-dom/client";
+import { bindConfig } from "@xenosystem/block-sdk";
+
+// src/corpus/shape/logic.ts
+var NODE_W = 210;
+var NODE_H = 74;
+var COLUMN_W = 250;
+var COLUMN_GAP = 40;
+var ROW_STEP = 92;
+var FIRST_ROW = 160;
+var LANE_TOP = 40;
+var LANE_CARD_H = 88;
+var LENSES = [
+  { id: "all", label: "Everything", question: "The whole corpus", empty: "This corpus has no claims yet." },
+  { id: "lapsed", label: "False now", question: "What is false right now?", empty: "Nothing is false right now \u2014 every checked claim holds." },
+  { id: "unchecked", label: "Unchecked", question: "What has nothing checking it?", empty: "Everything here is checked." }
+];
+var isLens = (v) => LENSES.some((l) => l.id === v);
+var DEPTHS = [0, 1, 2, 3];
+var isDepth = (v) => typeof v === "number" && DEPTHS.includes(v);
+function inLens(n, lens) {
+  if (lens === "all") return true;
+  if (lens === "lapsed") return n.kind === "tenet" && n.state === "lapsed";
+  if (n.kind === "tenet") return n.state === "unobserved" || n.state === "never-run";
+  return n.kind === "missing" || n.kind === "uncovered" || n.kind === "proposal";
+}
+function neighbourhood(edges, start, depth) {
+  if (!start || depth <= 0) return null;
+  const adj = /* @__PURE__ */ new Map();
+  const link = (a, b) => {
+    const l = adj.get(a);
+    if (l) l.push(b);
+    else adj.set(a, [b]);
+  };
+  for (const e of edges) {
+    link(e.from, e.to);
+    link(e.to, e.from);
+  }
+  const seen = /* @__PURE__ */ new Set([start]);
+  let frontier = [start];
+  for (let d = 0; d < depth && frontier.length; d++) {
+    const next = [];
+    for (const k of frontier) for (const m of adj.get(k) ?? []) if (!seen.has(m)) {
+      seen.add(m);
+      next.push(m);
+    }
+    frontier = next;
+  }
+  return seen;
+}
+function visibleKeys(nodes, edges, lens, selected, depth) {
+  const near = neighbourhood(edges, selected, depth);
+  const out = /* @__PURE__ */ new Set();
+  for (const n of nodes) {
+    if (n.key === selected) {
+      out.add(n.key);
+      continue;
+    }
+    if (near && !near.has(n.key)) continue;
+    if (!near && !inLens(n, lens)) continue;
+    out.add(n.key);
+  }
+  return out;
+}
+var COMPACT_BELOW = 0.5;
+var compactFont = (zoom) => Math.min(12 / Math.max(zoom, 0.01), 44);
+function layout(lanes, nodes) {
+  const boxes = [];
+  const placed = [];
+  let col = 0;
+  for (const lane of lanes) {
+    const mine = nodes.filter((n) => n.lane === lane.id);
+    const span = lane.role === "org" ? 2 : 1;
+    const x = 40 + col * COLUMN_W;
+    const colA = span === 2 ? mine.filter((n) => n.kind === "tenet" || n.kind === "ref" || n.kind === "proposal") : mine;
+    const colB = span === 2 ? mine.filter((n) => !colA.includes(n)) : [];
+    colA.forEach((n, i) => placed.push({ ...n, x, y: FIRST_ROW + i * ROW_STEP }));
+    colB.forEach((n, i) => placed.push({ ...n, x: x + COLUMN_W, y: FIRST_ROW + i * ROW_STEP }));
+    const rows = Math.max(1, colA.length, colB.length);
+    boxes.push({ lane, x, w: NODE_W * span + (span - 1) * COLUMN_GAP, h: FIRST_ROW - 24 + rows * ROW_STEP + 10 });
+    col += span;
+  }
+  const width = 40 + col * COLUMN_W;
+  const height = Math.max(400, ...boxes.map((b) => b.h + 24));
+  return { boxes, placed, width, height };
+}
+function emphasisKey(n) {
+  if (n.kind === "tenet") return n.state === "lapsed" ? "lapsed" : n.state === "held" || n.state === "attested" ? "held" : "unobserved";
+  if (n.kind === "missing") return "unobserved";
+  if (n.kind === "proposal" || n.kind === "uncovered") return "none";
+  if (n.kind === "ref") return "held";
+  return "rule";
+}
+function chipFor(state, opts = {}) {
+  if (opts.attested && (state === "attested" || state === "held")) return { label: "ATTESTED", bg: "var(--cs-accent-soft)", ink: "var(--cs-accent)", ring: "none" };
+  switch (state) {
+    case "lapsed":
+      return { label: "LAPSED", bg: "var(--cs-danger)", ink: "var(--cs-on-danger)", ring: "none" };
+    case "held":
+      return { label: "HELD", bg: "var(--cs-ok-soft)", ink: "var(--cs-ok-ink)", ring: "none" };
+    case "attested":
+      return { label: "ATTESTED", bg: "var(--cs-accent-soft)", ink: "var(--cs-accent)", ring: "none" };
+    case "unobserved":
+    case "never-run":
+      return { label: "UNKNOWN", bg: "transparent", ink: "var(--cs-ink2)", ring: "inset 0 0 0 1px var(--cs-ink3)" };
+    case "none":
+      return { label: "NO CHECK", bg: "var(--cs-warn)", ink: "var(--cs-on-warn)", ring: "none" };
+    case "rule":
+      return { label: opts.binding ? "CHARTER" : "DOCTRINE", bg: "var(--cs-accent-soft)", ink: "var(--cs-accent)", ring: "none" };
+    case "ref":
+      return { label: "REFERENCE", bg: "var(--cs-field)", ink: "var(--cs-ink2)", ring: "none" };
+    case "doc":
+      return { label: "DOCUMENT", bg: "var(--cs-field)", ink: "var(--cs-ink2)", ring: "none" };
+    case "missing":
+      return { label: "INHERITED_UNAVAILABLE", bg: "var(--cs-warn)", ink: "var(--cs-on-warn)", ring: "none" };
+    default:
+      return { label: state.toUpperCase(), bg: "var(--cs-field)", ink: "var(--cs-ink2)", ring: "none" };
+  }
+}
+var cardChip = (n) => chipFor(n.kind === "tenet" ? n.state : n.kind === "uncovered" ? "none" : n.state, { attested: n.attested, binding: n.binding });
+function cellFill(state) {
+  if (state === "lapsed") return { bg: "var(--cs-danger)", ring: "none" };
+  if (state === "held") return { bg: "var(--cs-ok)", ring: "none" };
+  if (state === "attested") return { bg: "var(--cs-accent)", ring: "none" };
+  return { bg: "transparent", ring: "inset 0 0 0 1px var(--cs-ink3)" };
+}
+function cadenceWord(c) {
+  const m = /^(\d+)([hd])$/.exec(c);
+  if (!m) return c;
+  const h = Number(m[1]) * (m[2] === "d" ? 24 : 1);
+  return h === 24 ? "daily" : h === 1 ? "hourly" : h === 168 ? "weekly" : `every ${c}`;
+}
+function kindLabel(n) {
+  if (n.kind === "tenet") return `Tenet \xB7 ${n.attested ? "attested" : n.cadence ? cadenceWord(n.cadence) : "daily"}`;
+  return { ref: "Reference", rule: "Doctrine", doc: "Document", missing: "Chain", uncovered: "Repository", proposal: "Proposal" }[n.kind] ?? n.kind;
+}
+function subLine(n) {
+  if (n.kind !== "tenet") return n.sub ?? "";
+  if (n.state === "unobserved" || n.state === "never-run") return `expect ${n.expect ?? "\u2014"} \xB7 ${n.state === "never-run" ? "never run" : "unknown"}`;
+  if (n.state === "attested") return "a person vouches \xB7 not checked";
+  return `expect ${n.expect ?? "\u2014"} \xB7 ${n.state === "held" ? "holds" : `got ${n.observed ?? "\u2014"}`}`;
+}
+function laneCaption(lane) {
+  const role = lane.role === "org" ? "Org corpus" : lane.role === "uncovered" ? "Unmanaged" : lane.role === "orphan" ? "Product \xB7 orphan" : lane.role === "ancestor" ? "Ancestor" : "Product";
+  const sub = lane.role === "uncovered" ? `${lane.uncovered?.total ?? 0} repositories \xB7 no corpus` : `${(lane.root ?? "").replace(/\\/g, "/").split("/").slice(-3).join("/")}${lane.inherits ? ` \xB7 inherits ${lane.inherits}` : ""}`;
+  return { role, sub };
+}
+var EDGE_STYLE = {
+  ref: ["var(--cs-edge)", "4 4", 1.3, "Reference (fact owned below)"],
+  dep: ["var(--cs-cap)", "", 1.6, "Depends on another corpus"],
+  breach: ["var(--cs-danger)", "5 4", 1.5, "Ancestor asserts a child\u2019s fact"],
+  pointer: ["var(--cs-accent)", "2 3", 1.4, "Rule points to a document"],
+  super: ["var(--cs-ink3)", "2 3", 1.3, "Supersession (recorded)"]
+};
+
+// src/corpus/shape/types.ts
+function isCorpusModel(v) {
+  if (!v || typeof v !== "object") return false;
+  const m = v;
+  if (!Array.isArray(m.lanes) || !Array.isArray(m.nodes) || !Array.isArray(m.edges)) return false;
+  const str = (x) => typeof x === "string" && x.length > 0;
+  return m.lanes.every((l) => !!l && typeof l === "object" && str(l.id) && typeof l.name === "string") && m.nodes.every((n) => !!n && typeof n === "object" && str(n.key) && str(n.lane) && typeof n.label === "string" && typeof n.state === "string" && typeof n.kind === "string") && m.edges.every((e) => !!e && typeof e === "object" && str(e.from) && str(e.to));
+}
+
+// src/corpus/shape/controller.ts
+var SHAPE_ZOOM = { min: 0.2, max: 2 };
+var ALL_ON = { lapsed: true, held: true, unobserved: true, rule: true, none: true };
+var ShapeController = class {
+  host;
+  listeners = /* @__PURE__ */ new Set();
+  s;
+  fitted = false;
+  constructor(options) {
+    this.host = options.host;
+    this.s = {
+      model: null,
+      boxes: [],
+      placed: [],
+      width: 0,
+      height: 0,
+      visible: /* @__PURE__ */ new Set(),
+      shown: [],
+      selected: null,
+      lens: isLens(options.lens) ? options.lens : "all",
+      depth: isDepth(options.depth) ? options.depth : 0,
+      emphasis: { ...ALL_ON },
+      camera: { zoom: 0.5, x: 0, y: 0 },
+      size: { w: 0, h: 0 },
+      compact: true,
+      animate: false,
+      edgeLabels: true,
+      emptyAnswer: null,
+      focusHint: false
+    };
+  }
+  // ── reading ────────────────────────────────────────────────────────────────
+  /** Bound, so `useSyncExternalStore(controller.subscribe, controller.getState)` works as written. */
+  getState = () => this.s;
+  subscribe = (fn) => {
+    this.listeners.add(fn);
+    return () => {
+      this.listeners.delete(fn);
+    };
+  };
+  set(patch) {
+    this.s = { ...this.s, ...patch };
+    this.s = { ...this.s, ...this.derive() };
+    for (const l of this.listeners) l();
+  }
+  derive() {
+    const { model, placed, lens, depth, selected, camera } = this.s;
+    const visible = visibleKeys(placed, model?.edges ?? [], lens, selected && !selected.startsWith("lane:") ? selected : null, depth);
+    const shown = placed.filter((n) => visible.has(n.key));
+    const focusing = depth > 0 && !!selected && !selected.startsWith("lane:");
+    const answers = shown.some((n) => n.key !== selected);
+    const emptyAnswer = model && !focusing && lens !== "all" && !answers ? LENSES.find((l) => l.id === lens).empty : null;
+    return { visible, shown, compact: camera.zoom < COMPACT_BELOW, emptyAnswer, focusHint: depth > 0 && !focusing };
+  }
+  // ── inputs (the host's) ────────────────────────────────────────────────────
+  /** A new picture. Anything that is not a model is ignored: a mis-wire must not blank the canvas. */
+  setModel(value) {
+    if (!isCorpusModel(value)) return;
+    const L = layout(value.lanes, value.nodes);
+    const keys = new Set(L.placed.map((n) => n.key));
+    const sel = this.s.selected;
+    const keep = sel && (keys.has(sel) || sel.startsWith("lane:") && value.lanes.some((l) => `lane:${l.id}` === sel)) ? sel : null;
+    this.set({ model: value, boxes: L.boxes, placed: L.placed, width: L.width, height: L.height, selected: keep });
+    if (!this.fitted && this.s.size.w) {
+      this.fitted = true;
+      this.fit(false);
+    }
+  }
+  /** Selection driven from outside (an inspector, a search). Does not echo back on `selection`. */
+  setSelection(value) {
+    if (value !== null && typeof value !== "string") return;
+    if (value === this.s.selected) return;
+    this.set({ selected: value });
+    this.afterSelect();
+  }
+  /** Emphasis from a host's filter rail. Unknown keys are ignored; missing keys stay on. */
+  setEmphasis(value) {
+    if (!value || typeof value !== "object") return;
+    const next = { ...ALL_ON };
+    for (const k of Object.keys(ALL_ON)) {
+      const v = value[k];
+      if (typeof v === "boolean") next[k] = v;
+    }
+    this.set({ emphasis: next });
+  }
+  // ── the person's actions ───────────────────────────────────────────────────
+  select(key) {
+    if (key === this.s.selected) return;
+    this.set({ selected: key });
+    this.host.emit("selection", key);
+    this.afterSelect();
+  }
+  open(key) {
+    if (this.s.placed.some((n) => n.key === key)) this.host.emit("intent", { kind: "open", key });
+  }
+  setLens(lens) {
+    if (!isLens(lens) || lens === this.s.lens) return;
+    this.set({ lens });
+    this.refit();
+  }
+  setDepth(depth) {
+    if (!isDepth(depth) || depth === this.s.depth) return;
+    this.set({ depth });
+    this.refit();
+  }
+  toggleEdgeLabels() {
+    this.set({ edgeLabels: !this.s.edgeLabels });
+  }
+  /** Arrow keys move the selection spatially: nearest card in that direction, off-axis distance weighed double. */
+  moveSelection(dir) {
+    const [dx, dy] = { right: [1, 0], left: [-1, 0], down: [0, 1], up: [0, -1] }[dir];
+    const from = this.s.placed.find((n) => n.key === this.s.selected);
+    if (!from) {
+      const first = this.s.shown[0] ?? this.s.placed[0];
+      if (first) this.select(first.key);
+      return;
+    }
+    let best = null, bd = Infinity;
+    for (const n of this.s.shown) {
+      if (n.key === from.key) continue;
+      const ox = n.x - from.x, oy = n.y - from.y, prim = ox * dx + oy * dy;
+      if (prim <= 0) continue;
+      const d = prim + Math.abs(dx ? oy : ox) * 2;
+      if (d < bd) {
+        bd = d;
+        best = n;
+      }
+    }
+    if (best) this.select(best.key);
+  }
+  // ── camera ─────────────────────────────────────────────────────────────────
+  resize(w, h) {
+    if (!(w > 0 && h > 0) || w === this.s.size.w && h === this.s.size.h) return;
+    this.set({ size: { w, h } });
+    if (!this.fitted && this.s.model) {
+      this.fitted = true;
+      this.fit(false);
+    }
+  }
+  scale() {
+    return new XenoGraphScale(this.s.camera, { widthPx: this.s.size.w || 1, heightPx: this.s.size.h || 1 });
+  }
+  get viewport() {
+    return this.scale().viewport;
+  }
+  camera(next, animate) {
+    this.set({ camera: next, animate });
+  }
+  /** Zoom about a screen point. Never animated: it follows the wheel. A non-positive or non-finite factor is a no-op (zoomAboutCursor). */
+  zoomAt(px, py, factor) {
+    this.camera(zoomAboutCursor(this.scale(), px, py, factor, SHAPE_ZOOM), false);
+  }
+  zoomBy(factor) {
+    this.zoomAt(this.s.size.w / 2, this.s.size.h / 2, factor);
+  }
+  /** Pan by a screen-pixel delta. */
+  pan(dxPx, dyPx) {
+    const c = this.s.camera;
+    this.camera({ zoom: c.zoom, x: c.x - dxPx / c.zoom, y: c.y - dyPx / c.zoom }, false);
+  }
+  /** Centre the camera on a world point (the minimap). */
+  centreOn(wx, wy) {
+    const c = this.s.camera;
+    this.camera({ zoom: c.zoom, x: wx - this.s.size.w / 2 / c.zoom, y: wy - this.s.size.h / 2 / c.zoom }, true);
+  }
+  /** Fit everything. */
+  fit(animate = true) {
+    if (!this.s.size.w || !this.s.model) return;
+    this.camera(fitToBounds({ x: 20, y: 20, width: this.s.width, height: this.s.height }, this.s.size.w, this.s.size.h, { min: SHAPE_ZOOM.min, max: 1 }, 20), animate);
+  }
+  /** Fit what is SHOWN: a question or focus that leaves its answer off-screen is no answer. */
+  fitShown(animate = true) {
+    const shown = this.s.shown;
+    if (!this.s.size.w || !shown.length) return;
+    const x0 = Math.min(...shown.map((n) => n.x)), y0 = Math.min(...shown.map((n) => n.y));
+    const x1 = Math.max(...shown.map((n) => n.x + NODE_W)), y1 = Math.max(...shown.map((n) => n.y + NODE_H));
+    this.camera(fitToBounds({ x: x0 - 40, y: y0 - 40, width: x1 - x0 + 80, height: y1 - y0 + 80 }, this.s.size.w, this.s.size.h, { min: SHAPE_ZOOM.min, max: 1 }, 20), animate);
+  }
+  /** `F`: fit what answers when narrowed, everything otherwise. */
+  fitNow() {
+    if (this.narrowed()) this.fitShown();
+    else this.fit();
+  }
+  narrowed() {
+    return this.s.lens !== "all" || this.s.depth > 0 && !!this.s.selected && !this.s.selected.startsWith("lane:");
+  }
+  refit() {
+    if (!this.fitted) return;
+    if (this.narrowed()) this.fitShown();
+    else this.fit();
+  }
+  afterSelect() {
+    const sel = this.s.selected;
+    if (!sel || !this.s.size.w) return;
+    if (sel.startsWith("lane:")) {
+      const b = this.s.boxes.find((x) => `lane:${x.lane.id}` === sel);
+      if (b) this.centreOn(b.x + b.w / 2, LANE_TOP + LANE_CARD_H / 2);
+      return;
+    }
+    if (this.s.depth > 0) {
+      this.fitShown();
+      return;
+    }
+    const n = this.s.placed.find((x) => x.key === sel);
+    if (!n) return;
+    const z = Math.max(this.s.camera.zoom, 0.8);
+    this.camera({ zoom: z, x: n.x + NODE_W / 2 - this.s.size.w / 2 / z, y: n.y + NODE_H / 2 - this.s.size.h / 2 / z }, true);
+  }
+  // ── persistence ────────────────────────────────────────────────────────────
+  /** The question and the depth are the viewer's: remembered so they do not reset on every open. */
+  serialize() {
+    return { lens: this.s.lens, depth: this.s.depth, edgeLabels: this.s.edgeLabels };
+  }
+  deserialize(state) {
+    if (!state || typeof state !== "object") return;
+    const o = state;
+    this.set({
+      lens: isLens(o.lens) ? o.lens : this.s.lens,
+      depth: isDepth(o.depth) ? o.depth : this.s.depth,
+      edgeLabels: typeof o.edgeLabels === "boolean" ? o.edgeLabels : this.s.edgeLabels
+    });
+  }
+  dispose() {
+    this.listeners.clear();
+  }
+};
+
+// src/corpus/shape/manifest.ts
+var CORPUS_SHAPE_PANEL_ID = "xeno.corpus.shape";
+var corpusShapeManifest = {
+  id: CORPUS_SHAPE_PANEL_ID,
+  version: "0.1.0",
+  title: "Corpus Shape",
+  icon: "waypoints",
+  description: "The shape of a project\u2019s verified truth: one lane per corpus, a card per claim wearing its last verdict, and the relations between them. Opens on a question (everything, false now, unchecked), focuses 1\u20133 links around a card, and stays readable zoomed out. Draws what the host hands it; never computes a verdict.",
+  defaultSlot: "center",
+  inputs: [
+    {
+      id: "model",
+      name: "Corpus model",
+      type: "object",
+      description: "XenoCorpusModel { lanes, nodes, edges } \u2014 XENO Corpus\u2019s /api/v1/model, or any host\u2019s equivalent. Read-only; a value that is not a model is ignored, so a mis-wire never blanks the canvas.",
+      multiple: false
+    },
+    {
+      id: "selection",
+      name: "Selection",
+      type: "string",
+      description: "A card key, `lane:<id>`, or null \u2014 externally driven, for syncing with an inspector or a search. Not echoed back.",
+      multiple: false
+    },
+    {
+      id: "emphasis",
+      name: "Emphasis",
+      type: "object",
+      description: "XenoCorpusEmphasis { lapsed, held, unobserved, rule, none } \u2014 booleans from a filter rail. Off DIMS a card, never hides it.",
+      multiple: false
+    }
+  ],
+  outputs: [
+    { id: "selection", name: "Selection", type: "string", description: "The card key or `lane:<id>` the person picked, or null." },
+    {
+      id: "intent",
+      name: "Intent",
+      type: "object",
+      description: '{ kind: "open", key } \u2014 the person asked to open a card (double-click, Enter). A request; the host decides what opening means.'
+    }
+  ],
+  commands: [
+    {
+      id: "select",
+      title: "Select",
+      description: "Select a card or lane by key (`lane:<id>` for a lane), or clear with null.",
+      parameters: { key: { type: "string", description: "Card key, lane:<id>, or empty to clear" } }
+    },
+    {
+      id: "set_lens",
+      title: "Ask a question",
+      description: "Show everything, only what is false now, or only what nothing checks. Hides non-answers and fits the view to the answer.",
+      parameters: { lens: { type: "string", description: '"all" | "lapsed" | "unchecked"', required: true } }
+    },
+    {
+      id: "set_depth",
+      title: "Focus depth",
+      description: "Show only what lies within N links of the selection (0 = off, max 3). Outranks the question.",
+      parameters: { depth: { type: "number", description: "0, 1, 2 or 3", required: true } }
+    },
+    { id: "fit", title: "Fit", description: "Fit the answer (or everything) in view.", parameters: {} },
+    {
+      id: "get_summary",
+      title: "Summary",
+      description: "What is on the canvas now: counts of shown cards by state, the question, the depth, the selection and the empty-answer sentence if any.",
+      parameters: {}
+    }
+  ],
+  capabilities: ["storage.local"],
+  config: [
+    { key: "minimap", label: "Minimap", type: "boolean", defaultValue: true, description: "A small overview in the corner that recentres the view on click." },
+    { key: "legend", label: "Legend", type: "boolean", defaultValue: true, description: "What each relation line means, and the edge-label switch." }
+  ],
+  sdk: "^1.0.0"
+};
+
+// src/corpus/shape/react/CorpusShapePanelView.tsx
+import { useEffect, useRef, useSyncExternalStore } from "react";
+import { Column, DrawnSurface, EmptyState, IconButton, SegmentedControl, StatusBar, Text, TextButton, Toolbar, ToolbarGroup } from "@xenosystem/components/chrome";
+
+// src/corpus/shape/declaration.ts
+var LENS_OPTIONS = LENSES.map((l) => ({ value: l.id, label: l.label, title: l.question }));
+var DEPTH_OPTIONS = DEPTHS.map((d) => ({ value: String(d), label: d ? String(d) : "Off", title: d ? `${d} link${d > 1 ? "s" : ""} around the selection` : "No focus" }));
+function corpusShapeViewState(c, _options = {}) {
+  const s = c.getState();
+  const tenets = s.shown.filter((n) => n.kind === "tenet");
+  const lapsed = tenets.filter((n) => n.state === "lapsed").length;
+  const unknown = tenets.filter((n) => n.state === "unobserved" || n.state === "never-run").length;
+  return {
+    empty: !s.model,
+    drawn: !!s.model,
+    lens: s.lens,
+    lenses: LENS_OPTIONS,
+    depth: String(s.depth),
+    depths: DEPTH_OPTIONS,
+    zoomLabel: `${Math.round(s.camera.zoom * 100)}%`,
+    countLabel: s.model ? `${s.shown.length} of ${s.placed.length} cards \xB7 ${lapsed} lapsed \xB7 ${unknown} unknown` : ""
+  };
+}
+function applyCorpusShapeUi(c, intent) {
+  switch (intent.kind) {
+    case "lens":
+      c.setLens(intent.lens);
+      break;
+    case "depth":
+      c.setDepth(Number(intent.depth));
+      break;
+    case "zoomIn":
+      c.zoomBy(1.2);
+      break;
+    case "zoomOut":
+      c.zoomBy(1 / 1.2);
+      break;
+    case "fit":
+      c.fitNow();
+      break;
+  }
+}
+var corpusShapeViewManifest = {
+  ...corpusShapeManifest,
+  capabilities: [],
+  inputs: [{ id: "view", name: "View state", type: "object", description: "The CorpusShapeViewModel the runtime derives from the controller on every draw." }],
+  outputs: [{ id: "ui", name: "UI intent", type: "object", description: "{ kind: lens | depth | zoomIn | zoomOut | fit, \u2026 } \u2014 applied by the runtime to the controller." }],
+  commands: []
+};
+var EMPTY = { empty: true, drawn: false, lens: "all", lenses: LENS_OPTIONS, depth: "0", depths: DEPTH_OPTIONS, zoomLabel: "50%", countLabel: "" };
+var BEHAVIOURS = {
+  "corpus/shapePanelView": (inputs) => inputs.view ?? EMPTY
+};
+var CORPUS_SHAPE_RUNTIME_UNITS = ["corpus/ShapeSurface"];
+var text = (b) => ({ component: "text", props: { text: b } });
+var ui = (kind, fields = {}) => ({ emit: "ui", value: { object: { kind: { value: kind }, ...fields } } });
+var CORPUS_SHAPE_DECLARATION = {
+  format: "xeno.block@1",
+  manifest: corpusShapeViewManifest,
+  behaviour: "corpus/shapePanelView",
+  composition: {
+    component: "chrome/Column",
+    children: [
+      {
+        component: "chrome/Toolbar",
+        props: {
+          left: {
+            node: {
+              component: "chrome/ToolbarGroup",
+              children: [
+                { component: "chrome/SegmentedControl", props: { size: { value: "sm" }, label: { value: "Show" }, options: { input: "view.lenses" }, value: { input: "view.lens" } }, on: { onChange: ui("lens", { lens: { arg: "" } }) } },
+                { component: "chrome/Text", props: { role: { value: "meta" } }, children: [text({ value: "Around selection" })] },
+                { component: "chrome/SegmentedControl", props: { size: { value: "sm" }, label: { value: "Focus depth" }, options: { input: "view.depths" }, value: { input: "view.depth" } }, on: { onChange: ui("depth", { depth: { arg: "" } }) } }
+              ]
+            }
+          },
+          right: {
+            node: {
+              component: "chrome/ToolbarGroup",
+              props: { end: { value: true } },
+              children: [
+                { component: "chrome/IconButton", props: { icon: { node: { component: "icons/Minus" } }, label: { value: "Zoom out" } }, on: { onClick: ui("zoomOut") } },
+                { component: "chrome/Text", props: { role: { value: "number" } }, children: [text({ input: "view.zoomLabel" })] },
+                { component: "chrome/IconButton", props: { icon: { node: { component: "icons/Plus" } }, label: { value: "Zoom in" } }, on: { onClick: ui("zoomIn") } },
+                { component: "chrome/TextButton", children: [text({ value: "Fit" })], on: { onClick: ui("fit") } }
+              ]
+            }
+          }
+        }
+      },
+      { component: "chrome/EmptyState", when: { input: "view.empty" }, props: { title: { value: "No corpus yet" }, hint: { value: "Wire a XENO Corpus model into this panel\u2019s input." } } },
+      { component: "corpus/ShapeSurface", when: { input: "view.drawn" } },
+      { component: "chrome/StatusBar", props: { left: { node: { component: "chrome/Text", props: { role: { value: "number" } }, children: [text({ input: "view.countLabel" })] } } } }
+    ]
+  }
+};
+
+// src/corpus/shape/react/surfaceTokens.ts
+import { status, surface, text as text2 } from "@xenosystem/elements/tokens";
+import { PANEL_COLORS } from "@xenosystem/components/chrome";
+var soft = (c, pct) => `color-mix(in srgb, ${c} ${pct}%, transparent)`;
+var SURFACE_TOKENS = {
+  "--cs-toolbar": `var(--xeno-viewport, ${surface.canvas})`,
+  "--cs-menu": `var(--xeno-panel-header, ${surface.panelHeader})`,
+  "--cs-field": `var(--xeno-control, ${surface.input})`,
+  "--cs-ink": `var(--xeno-text, ${text2.hover})`,
+  "--cs-ink2": `var(--xeno-muted-text, ${text2.active})`,
+  "--cs-ink3": `var(--xeno-muted-text, ${text2.active})`,
+  "--cs-line": PANEL_COLORS.border,
+  "--cs-edge": PANEL_COLORS.focus,
+  "--cs-dot": PANEL_COLORS.soft,
+  "--cs-lane": PANEL_COLORS.wash,
+  "--cs-accent": `var(--xeno-text, ${text2.hover})`,
+  "--cs-accent-soft": PANEL_COLORS.soft,
+  "--cs-cap": `var(--xeno-active, ${text2.active})`,
+  "--cs-ok": status.success,
+  "--cs-ok-soft": soft(status.success, 10),
+  "--cs-ok-ink": PANEL_COLORS.successText,
+  "--cs-warn": status.warning,
+  "--cs-on-warn": surface.page,
+  "--cs-danger": `var(--xeno-danger, ${status.danger})`,
+  "--cs-danger-text": PANEL_COLORS.errorText,
+  "--cs-on-danger": `var(--xeno-text, ${text2.hover})`,
+  "--cs-shadow": `0 0 0 1px ${PANEL_COLORS.soft}`,
+  "--cs-pop": `0 16px 40px ${PANEL_COLORS.well}, 0 0 0 1px ${PANEL_COLORS.border}`,
+  "--cs-mono": "var(--xeno-font-mono, ui-monospace, monospace)"
+};
+
+// src/corpus/shape/react/CorpusShapePanelView.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function CorpusShapePanelView({ controller, ...options }) {
+  useSyncExternalStore(controller.subscribe, controller.getState, controller.getState);
+  const view = corpusShapeViewState(controller, options);
+  const ui2 = (intent) => applyCorpusShapeUi(controller, intent);
+  return /* @__PURE__ */ jsxs(Column, { children: [
+    /* @__PURE__ */ jsx(
+      Toolbar,
+      {
+        left: /* @__PURE__ */ jsxs(ToolbarGroup, { children: [
+          /* @__PURE__ */ jsx(SegmentedControl, { size: "sm", label: "Show", options: view.lenses, value: view.lens, onChange: (lens) => ui2({ kind: "lens", lens }) }),
+          /* @__PURE__ */ jsx(Text, { role: "meta", children: "Around selection" }),
+          /* @__PURE__ */ jsx(SegmentedControl, { size: "sm", label: "Focus depth", options: view.depths, value: view.depth, onChange: (depth) => ui2({ kind: "depth", depth }) })
+        ] }),
+        right: /* @__PURE__ */ jsxs(ToolbarGroup, { end: true, children: [
+          /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(MinusGlyph, {}), label: "Zoom out", onClick: () => ui2({ kind: "zoomOut" }) }),
+          /* @__PURE__ */ jsx(Text, { role: "number", children: view.zoomLabel }),
+          /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(PlusGlyph, {}), label: "Zoom in", onClick: () => ui2({ kind: "zoomIn" }) }),
+          /* @__PURE__ */ jsx(TextButton, { onClick: () => ui2({ kind: "fit" }), children: "Fit" })
+        ] })
+      }
+    ),
+    view.empty ? /* @__PURE__ */ jsx(EmptyState, { title: "No corpus yet", hint: "Wire a XENO Corpus model into this panel\u2019s input." }) : null,
+    view.drawn ? /* @__PURE__ */ jsx(CorpusShapeSurface, { controller, ...options }) : null,
+    /* @__PURE__ */ jsx(StatusBar, { left: /* @__PURE__ */ jsx(Text, { role: "number", children: view.countLabel }) })
+  ] });
+}
+function corpusShapeRuntimeComponents(controller, options = {}) {
+  return { "corpus/ShapeSurface": () => /* @__PURE__ */ jsx(CorpusShapeSurface, { controller, ...options }) };
+}
+var mono = { fontFamily: "var(--cs-mono)" };
+var ellipsis = { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" };
+var chip = { ...mono, fontSize: 9.5, lineHeight: "14px", padding: "0 4px", borderRadius: 2, whiteSpace: "nowrap", flex: "none", letterSpacing: ".02em" };
+var plate = { position: "absolute", borderRadius: 6, background: "var(--cs-menu)", boxShadow: "var(--cs-shadow)" };
+var MINIMAP_W = 180;
+function CorpusShapeSurface({ controller, minimap = true, legend = true }) {
+  const s = useSyncExternalStore(controller.subscribe, controller.getState, controller.getState);
+  const ref = useRef(null);
+  const drag = useRef(null);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const measure = () => {
+      const r = el.getBoundingClientRect();
+      if (r.width > 0 && r.height > 0) controller.resize(r.width, r.height);
+    };
+    measure();
+    const onWheel = (e) => {
+      e.preventDefault();
+      const r = el.getBoundingClientRect();
+      controller.zoomAt(e.clientX - r.left, e.clientY - r.top, Math.exp(-e.deltaY * 15e-4));
+    };
+    el.addEventListener("wheel", onWheel, { passive: false });
+    if (typeof ResizeObserver === "undefined") return () => el.removeEventListener("wheel", onWheel);
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => {
+      ro.disconnect();
+      el.removeEventListener("wheel", onWheel);
+    };
+  }, [controller]);
+  const onKeyDown = (e) => {
+    if (e.ctrlKey || e.metaKey || e.altKey) return;
+    const dir = { ArrowRight: "right", ArrowLeft: "left", ArrowDown: "down", ArrowUp: "up" }[e.key];
+    if (dir) {
+      e.preventDefault();
+      controller.moveSelection(dir);
+      return;
+    }
+    if (e.key === "f" || e.key === "F") {
+      e.preventDefault();
+      controller.fitNow();
+      return;
+    }
+    if (e.key === "Enter" && s.selected && !s.selected.startsWith("lane:")) {
+      e.preventDefault();
+      controller.open(s.selected);
+      return;
+    }
+    if (e.key === "Escape") controller.select(null);
+  };
+  const cam = s.camera;
+  const reduced = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+  const sel = s.selected;
+  const byKey = new Map(s.placed.map((n) => [n.key, n]));
+  const selNode = sel ? byKey.get(sel) ?? null : null;
+  const near = /* @__PURE__ */ new Set();
+  if (selNode) {
+    near.add(selNode.key);
+    for (const e of s.model?.edges ?? []) {
+      if (e.from === selNode.key) near.add(e.to);
+      if (e.to === selNode.key) near.add(e.from);
+    }
+  }
+  const stop = (e) => e.stopPropagation();
+  const mk = MINIMAP_W / Math.max(s.width, 1);
+  const vp = controller.viewport;
+  return /* @__PURE__ */ jsxs(
+    DrawnSurface,
+    {
+      ref,
+      label: "Corpus shape",
+      "data-canvas": "corpus-shape",
+      tabIndex: 0,
+      onKeyDown,
+      onPointerDown: (e) => {
+        if (e.button === 0) {
+          drag.current = { x: e.clientX, y: e.clientY };
+          e.currentTarget.setPointerCapture?.(e.pointerId);
+        }
+      },
+      onPointerMove: (e) => {
+        const d = drag.current;
+        if (!d) return;
+        controller.pan(e.clientX - d.x, e.clientY - d.y);
+        drag.current = { x: e.clientX, y: e.clientY };
+      },
+      onPointerUp: () => {
+        drag.current = null;
+      },
+      style: { ...SURFACE_TOKENS, backgroundColor: "var(--cs-toolbar)", backgroundImage: "radial-gradient(var(--cs-dot) 1px, transparent 1.3px)", backgroundSize: `${22 * cam.zoom}px ${22 * cam.zoom}px`, backgroundPosition: `${-cam.x * cam.zoom}px ${-cam.y * cam.zoom}px`, color: "var(--cs-ink)", cursor: drag.current ? "grabbing" : "grab" },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { position: "absolute", left: 0, top: 0, width: s.width, height: s.height, transformOrigin: "0 0", transform: `translate(${-cam.x * cam.zoom}px, ${-cam.y * cam.zoom}px) scale(${cam.zoom})`, transition: s.animate && !reduced ? "transform .38s cubic-bezier(.2,.7,.2,1)" : "none" }, children: [
+          s.boxes.map((b) => /* @__PURE__ */ jsx("div", { style: { position: "absolute", left: b.x - 14, top: 24, width: b.w + 28, height: b.h, borderRadius: 10, background: b.lane.role === "uncovered" ? "transparent" : "var(--cs-lane)", border: b.lane.role === "uncovered" ? "1.5px dashed var(--cs-line)" : "0", boxSizing: "border-box" } }, `bg-${b.lane.id}`)),
+          /* @__PURE__ */ jsx("svg", { width: s.width, height: s.height, style: { position: "absolute", left: 0, top: 0, overflow: "visible", pointerEvents: "none" }, "aria-hidden": "true", children: (s.model?.edges ?? []).map((e, i) => {
+            const a = byKey.get(e.from), b = byKey.get(e.to);
+            if (!a || !b || !s.visible.has(a.key) || !s.visible.has(b.key)) return null;
+            const [c, dash, sw] = EDGE_STYLE[e.type] ?? EDGE_STYLE.ref;
+            const dim = !!selNode && !(e.from === selNode.key || e.to === selNode.key);
+            const same = a.x === b.x;
+            const from = same ? { x: a.x + NODE_W / 2, y: b.y > a.y ? a.y + NODE_H : a.y } : { x: b.x > a.x ? a.x + NODE_W : a.x, y: a.y + NODE_H / 2 };
+            const to = same ? { x: b.x + NODE_W / 2, y: b.y > a.y ? b.y : b.y + NODE_H } : { x: b.x > a.x ? b.x : b.x + NODE_W, y: b.y + NODE_H / 2 };
+            return /* @__PURE__ */ jsx("path", { d: edgePath(from, to), fill: "none", stroke: c, strokeWidth: dim ? sw : sw + 0.4, strokeDasharray: dash || void 0, opacity: dim ? 0.3 : 1 }, i);
+          }) }),
+          s.boxes.map((b) => {
+            const lane = b.lane, picked = sel === `lane:${lane.id}`, cap = laneCaption(lane);
+            const counts = lane.counts ?? {};
+            const odd = lane.role === "orphan" || lane.role === "uncovered";
+            const flagBg = odd ? "var(--cs-warn)" : counts.lapsed ? "var(--cs-danger)" : counts.unknown ? "transparent" : "var(--cs-ok-soft)";
+            const flagInk = odd ? "var(--cs-on-warn)" : counts.lapsed ? "var(--cs-on-danger)" : counts.unknown ? "var(--cs-ink2)" : "var(--cs-ok-ink)";
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                "aria-pressed": picked,
+                onClick: () => controller.select(`lane:${lane.id}`),
+                onPointerDown: stop,
+                style: { position: "absolute", left: b.x, top: LANE_TOP, width: b.w, height: LANE_CARD_H, display: "flex", flexDirection: "column", gap: 5, padding: "12px 14px", border: 0, borderRadius: 6, background: "var(--cs-menu)", boxShadow: picked ? "0 0 0 2px var(--cs-accent), var(--cs-pop)" : "var(--cs-shadow)", color: "var(--cs-ink)", textAlign: "left", cursor: "pointer", font: "inherit" },
+                children: [
+                  /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: 6, width: "100%" }, children: [
+                    /* @__PURE__ */ jsx("span", { style: { ...mono, fontSize: 10, letterSpacing: ".04em", textTransform: "uppercase", color: "var(--cs-ink3)" }, children: cap.role }),
+                    /* @__PURE__ */ jsx("span", { style: { flex: 1 } }),
+                    lane.flag ? /* @__PURE__ */ jsx("span", { style: { ...chip, background: flagBg, color: flagInk, boxShadow: counts.unknown && !counts.lapsed && !odd ? "inset 0 0 0 1px var(--cs-ink3)" : "none" }, children: lane.flag }) : null
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { style: { fontSize: 14, fontWeight: 600, letterSpacing: "-.01em" }, children: lane.name }),
+                  /* @__PURE__ */ jsx("span", { style: { ...mono, ...ellipsis, fontSize: 10.5, color: "var(--cs-ink3)", maxWidth: "100%" }, children: cap.sub })
+                ]
+              },
+              `lane-${lane.id}`
+            );
+          }),
+          s.shown.map((n) => {
+            const on = s.emphasis[emphasisKey(n)], picked = selNode?.key === n.key;
+            const dim = !on || !!selNode && !near.has(n.key);
+            const unknown = n.kind === "tenet" && (n.state === "unobserved" || n.state === "never-run");
+            const dashed = n.kind === "proposal" || n.kind === "missing" || n.kind === "uncovered";
+            const c = cardChip(n), sub = subLine(n);
+            const common = { type: "button", "aria-pressed": picked, "aria-label": `${n.label} \xB7 ${c.label.toLowerCase()} \xB7 ${sub}`, onClick: () => controller.select(n.key), onDoubleClick: () => controller.open(n.key), onPointerDown: stop };
+            if (s.compact) {
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  ...common,
+                  "data-compact": "true",
+                  title: n.label,
+                  style: { position: "absolute", left: n.x, top: n.y, width: NODE_W, height: NODE_H, display: "flex", alignItems: "center", gap: 8, padding: "0 12px", border: dashed ? "3px dashed var(--cs-edge)" : 0, borderRadius: 8, background: c.bg, boxShadow: picked ? "0 0 0 4px var(--cs-accent)" : c.ring, opacity: dim ? on ? 0.45 : 0.22 : 1, color: c.ink, textAlign: "left", cursor: "pointer", font: "inherit" },
+                  children: /* @__PURE__ */ jsx("span", { style: { ...ellipsis, fontSize: compactFont(cam.zoom), fontWeight: 600, lineHeight: 1.15, maxWidth: "100%" }, children: n.label })
+                },
+                n.key
+              );
+            }
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                ...common,
+                style: { position: "absolute", left: n.x, top: n.y, width: NODE_W, height: NODE_H, display: "flex", flexDirection: "column", gap: 3, padding: "9px 11px", border: dashed ? "1.5px dashed var(--cs-edge)" : unknown ? "1px dashed var(--cs-ink3)" : 0, borderRadius: 6, background: dashed ? "var(--cs-toolbar)" : "var(--cs-menu)", boxShadow: picked ? "0 0 0 2px var(--cs-accent), var(--cs-pop)" : dashed ? "none" : "var(--cs-shadow)", opacity: dim ? on ? 0.45 : 0.22 : 1, color: "var(--cs-ink)", textAlign: "left", cursor: "pointer", font: "inherit" },
+                children: [
+                  /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: 6, width: "100%" }, children: [
+                    /* @__PURE__ */ jsx("span", { style: { ...mono, ...ellipsis, flex: 1, fontSize: 10, letterSpacing: ".04em", textTransform: "uppercase", color: "var(--cs-ink3)" }, children: kindLabel(n) }),
+                    /* @__PURE__ */ jsx("span", { style: { ...chip, background: c.bg, color: c.ink, boxShadow: c.ring }, children: c.label })
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { style: { ...ellipsis, fontSize: 12.5, fontWeight: 500, lineHeight: 1.35, maxWidth: "100%" }, children: n.label }),
+                  /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: 8, width: "100%" }, children: [
+                    /* @__PURE__ */ jsx("span", { style: { ...mono, ...ellipsis, flex: 1, fontSize: 10.5, color: n.state === "lapsed" ? "var(--cs-danger-text)" : "var(--cs-ink3)" }, children: sub }),
+                    n.kind === "tenet" ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { flex: "none", display: "flex", gap: 1.5 }, children: (n.strip ?? []).map((cell, i) => {
+                      const f = cellFill(cell.state);
+                      return /* @__PURE__ */ jsx("span", { style: { width: 5, height: 9, borderRadius: 1, background: f.bg, boxShadow: f.ring } }, i);
+                    }) }) : null
+                  ] })
+                ]
+              },
+              n.key
+            );
+          }),
+          s.edgeLabels && selNode ? (s.model?.edges ?? []).filter((e) => e.from === selNode.key || e.to === selNode.key).map((e, i) => {
+            const a = byKey.get(e.from), b = byKey.get(e.to);
+            if (!a || !b || !s.visible.has(a.key) || !s.visible.has(b.key)) return null;
+            const up = b.y < a.y, mx = b.x + NODE_W / 2, my = a.x === b.x && up ? b.y + NODE_H + 9 : b.y - 9;
+            const c = EDGE_STYLE[e.type]?.[0] ?? "var(--cs-ink2)";
+            return /* @__PURE__ */ jsx("span", { style: { ...mono, position: "absolute", left: mx, top: my, transform: "translate(-50%,-50%)", fontSize: 9.5, lineHeight: "14px", padding: "0 5px", borderRadius: 2, background: "var(--cs-toolbar)", color: c === "var(--cs-edge)" ? "var(--cs-ink2)" : c, boxShadow: "0 0 0 1px var(--cs-line)", whiteSpace: "nowrap", pointerEvents: "none" }, children: e.label }, `l${i}`);
+          }) : null
+        ] }),
+        s.emptyAnswer ? /* @__PURE__ */ jsx("div", { role: "status", style: { ...plate, left: "50%", top: "45%", transform: "translate(-50%,-50%)", padding: "14px 18px", fontSize: 13, color: "var(--cs-ink2)" }, children: s.emptyAnswer }) : null,
+        s.focusHint ? /* @__PURE__ */ jsx("div", { role: "status", style: { ...plate, left: 12, top: 12, padding: "6px 10px", fontSize: 11.5, color: "var(--cs-ink2)" }, children: "Select a card to focus around it" }) : null,
+        legend ? /* @__PURE__ */ jsxs("div", { onPointerDown: stop, style: { ...plate, left: 12, bottom: 12, display: "flex", flexDirection: "column", gap: 6, padding: "10px 12px" }, children: [
+          /* @__PURE__ */ jsx(TextButton, { onClick: () => controller.toggleEdgeLabels(), children: s.edgeLabels ? "Hide edge labels" : "Show edge labels" }),
+          Object.values(EDGE_STYLE).map(([c, dash, , label]) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+            /* @__PURE__ */ jsx("svg", { width: "26", height: "6", "aria-hidden": "true", children: /* @__PURE__ */ jsx("line", { x1: "0", y1: "3", x2: "26", y2: "3", stroke: c, strokeWidth: "1.5", strokeDasharray: dash || void 0 }) }),
+            /* @__PURE__ */ jsx("span", { style: { fontSize: 11.5, color: "var(--cs-ink2)" }, children: label })
+          ] }, label))
+        ] }) : null,
+        minimap && s.size.w >= 600 && s.size.h >= 360 ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "img",
+            "aria-label": "Minimap",
+            onPointerDown: stop,
+            onClick: (e) => {
+              const r = e.currentTarget.getBoundingClientRect();
+              controller.centreOn((e.clientX - r.left) / mk, (e.clientY - r.top) / mk);
+            },
+            style: { ...plate, right: 12, bottom: 12, width: MINIMAP_W, height: 75, overflow: "hidden", cursor: "pointer" },
+            children: [
+              s.boxes.map((b) => /* @__PURE__ */ jsx("span", { style: { position: "absolute", left: b.x * mk, top: LANE_TOP * mk, width: b.w * mk, height: LANE_CARD_H * mk, background: "var(--cs-line)", borderRadius: 1 } }, b.lane.id)),
+              s.shown.map((n) => /* @__PURE__ */ jsx("span", { style: { position: "absolute", left: n.x * mk, top: n.y * mk, width: NODE_W * mk, height: NODE_H * mk, borderRadius: 1, background: n.state === "lapsed" ? "var(--cs-danger)" : n.state === "held" ? "var(--cs-ok)" : n.kind === "tenet" ? "var(--cs-ink3)" : n.kind === "proposal" || n.kind === "missing" || n.kind === "uncovered" ? "var(--cs-warn)" : "var(--cs-field)" } }, n.key)),
+              /* @__PURE__ */ jsx("span", { style: { position: "absolute", left: vp.x * mk, top: vp.y * mk, width: vp.width * mk, height: vp.height * mk, border: "1.5px solid var(--cs-accent)", borderRadius: 2, background: "var(--cs-accent-soft)", pointerEvents: "none" } })
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/corpus/shape/panel.ts
+function createCorpusShapePanel(options = {}) {
+  return {
+    manifest: corpusShapeManifest,
+    activate(host) {
+      const controller = new ShapeController({ host: { emit: (portId, value) => host.emit(portId, value) } });
+      const resolve = (config) => ({
+        minimap: config.minimap !== false,
+        legend: config.legend !== false
+      });
+      let renderConfig = resolve(host.config ?? {});
+      let unrender = null;
+      let root = null;
+      let currentEl = null;
+      const draw = (el) => {
+        unrender?.();
+        if (options.render) {
+          unrender = options.render(el, { controller, config: renderConfig });
+          return;
+        }
+        root = createRoot(el);
+        root.render(createElement(CorpusShapePanelView, { controller, ...renderConfig }));
+        unrender = () => {
+          root?.unmount();
+          root = null;
+        };
+      };
+      const unbindConfig = bindConfig(host, (config) => {
+        renderConfig = resolve(config);
+        if (currentEl) draw(currentEl);
+      });
+      return {
+        render(el) {
+          currentEl = el;
+          draw(el);
+        },
+        // Every input is checked by the controller; a malformed payload is ignored, never thrown.
+        onInput(portId, value) {
+          if (portId === "model") controller.setModel(value);
+          else if (portId === "selection") controller.setSelection(value);
+          else if (portId === "emphasis") controller.setEmphasis(value);
+        },
+        async onCommand(commandId, params) {
+          switch (commandId) {
+            case "select": {
+              const key = typeof params.key === "string" && params.key ? params.key : null;
+              controller.select(key);
+              return true;
+            }
+            case "set_lens":
+              controller.setLens(params.lens);
+              return controller.getState().lens;
+            case "set_depth":
+              controller.setDepth(typeof params.depth === "string" ? Number(params.depth) : params.depth);
+              return controller.getState().depth;
+            case "fit":
+              controller.fitNow();
+              return true;
+            case "get_summary": {
+              const s = controller.getState();
+              const count = (pred) => s.shown.filter(pred).length;
+              return {
+                lens: s.lens,
+                depth: s.depth,
+                selected: s.selected,
+                shown: s.shown.length,
+                total: s.placed.length,
+                lapsed: count((n) => n.kind === "tenet" && n.state === "lapsed"),
+                held: count((n) => n.kind === "tenet" && n.state === "held"),
+                // Unknown is its own number: "not checked" is never folded into "fine".
+                unknown: count((n) => n.kind === "tenet" && (n.state === "unobserved" || n.state === "never-run")),
+                attested: count((n) => n.kind === "tenet" && n.state === "attested"),
+                dimmed: count((n) => !s.emphasis[emphasisKey(n)]),
+                emptyAnswer: s.emptyAnswer
+              };
+            }
+            default:
+              return;
+          }
+        },
+        serialize() {
+          return controller.serialize();
+        },
+        deserialize(state) {
+          controller.deserialize(state);
+        },
+        dispose() {
+          unbindConfig();
+          currentEl = null;
+          unrender?.();
+          unrender = null;
+          controller.dispose();
+        }
+      };
+    }
+  };
+}
+var corpusShapePanel = createCorpusShapePanel();
+export {
+  COMPACT_BELOW,
+  BEHAVIOURS as CORPUS_SHAPE_BEHAVIOURS,
+  CORPUS_SHAPE_DECLARATION,
+  CORPUS_SHAPE_PANEL_ID,
+  CORPUS_SHAPE_RUNTIME_UNITS,
+  CorpusShapePanelView,
+  CorpusShapeSurface,
+  DEPTHS,
+  EDGE_STYLE,
+  LENSES,
+  NODE_H,
+  NODE_W,
+  SHAPE_ZOOM,
+  SURFACE_TOKENS,
+  ShapeController,
+  applyCorpusShapeUi,
+  cardChip,
+  cellFill,
+  chipFor,
+  compactFont,
+  corpusShapeManifest,
+  corpusShapePanel,
+  corpusShapeRuntimeComponents,
+  corpusShapeViewManifest,
+  corpusShapeViewState,
+  createCorpusShapePanel,
+  emphasisKey,
+  inLens,
+  isCorpusModel,
+  isDepth,
+  isLens,
+  kindLabel,
+  laneCaption,
+  layout,
+  neighbourhood,
+  subLine,
+  visibleKeys
+};