@visualli/core 0.1.6 → 0.2.0

package/src/generated/geometry/blob.ts

@@ -0,0 +1,99 @@
+// Generated from visualli.ai design-system/components/src/blob.ts — do not edit here.
+import { BLOB_SHAPES } from './blobShapes';
+export { BLOB_SHAPES };
+
+/** Which outline ideas take. Every idea, at every depth, has the same shape (`idea`, the shape of the map's centre);
+ *  depth shows through the depth trail, rings, the layer tint and the step-inside motion. The other authored shapes
+ *  stay in BLOB_SHAPES for explicit use (`Node shape`); `varyByLevel: true` brings back one shape per level. */
+export const SHAPE: { idea: number; varyByLevel: boolean } = { idea: 0, varyByLevel: false };
+
+/** Shape for a layer level: SHAPE.idea for every level. With SHAPE.varyByLevel, level 0 is SHAPE.idea and consecutive
+ *  levels never repeat. */
+export function shapeForLevel(level: number): number {
+  if (!SHAPE.varyByLevel) return SHAPE.idea;
+  const n = BLOB_SHAPES.length;
+  let cur = SHAPE.idea;
+  for (let i = 1; i <= level; i++) {
+    const r = Math.floor(Math.abs(Math.sin((i + 1) * 12.9898) * 43758.5453));
+    cur = (cur + (r % (n - 1)) + 1) % n;
+  }
+  return cur;
+}
+
+/** SVG path of a node outline centered on (cx, cy): midpoint-quadratic smoothing through the authored points. */
+export function blobPath(shape: number, rx: number, ry: number, cx = 0, cy = 0): string {
+  const pts = BLOB_SHAPES[((shape % BLOB_SHAPES.length) + BLOB_SHAPES.length) % BLOB_SHAPES.length].map(([x, y]) => [cx + x * rx, cy + y * ry]);
+  const mid = (a: number[], b: number[]) => [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2];
+  const f = (n: number) => n.toFixed(2);
+  const start = mid(pts[pts.length - 1], pts[0]);
+  let d = `M${f(start[0])} ${f(start[1])}`;
+  for (let i = 0; i < pts.length; i++) {
+    const p = pts[i], m = mid(p, pts[(i + 1) % pts.length]);
+    d += `Q${f(p[0])} ${f(p[1])} ${f(m[0])} ${f(m[1])}`;
+  }
+  return d + 'Z';
+}
+
+/** The path calls drawBlob makes: satisfied by a CanvasRenderingContext2D and by Konva's Context (sceneFunc / hitFunc). */
+export type PathContext = { beginPath(): void; moveTo(x: number, y: number): void; quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void; closePath(): void };
+
+/** Canvas twin of blobPath — call fill()/stroke() after (in Konva: ctx.fillStrokeShape(shape)). */
+export function drawBlob(ctx: PathContext, shape: number, rx: number, ry: number, cx = 0, cy = 0) {
+  const pts = BLOB_SHAPES[((shape % BLOB_SHAPES.length) + BLOB_SHAPES.length) % BLOB_SHAPES.length].map(([x, y]) => [cx + x * rx, cy + y * ry]);
+  const mid = (a: number[], b: number[]) => [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2];
+  const s = mid(pts[pts.length - 1], pts[0]);
+  ctx.beginPath();
+  ctx.moveTo(s[0], s[1]);
+  pts.forEach((p, i) => { const m = mid(p, pts[(i + 1) % pts.length]); ctx.quadraticCurveTo(p[0], p[1], m[0], m[1]); });
+  ctx.closePath();
+}
+
+/** Distance from the center to the smoothed outline (blobPath) in direction `angle` (radians, SVG y-down).
+ *  Connectors use it to start and end just outside the outline an idea actually has, not a stand-in ellipse. */
+export function blobRadius(shape: number, rx: number, ry: number, angle: number): number {
+  const pts = BLOB_SHAPES[((shape % BLOB_SHAPES.length) + BLOB_SHAPES.length) % BLOB_SHAPES.length].map(([x, y]) => [x * rx, y * ry]);
+  const mid = (a: number[], b: number[]) => [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2];
+  // Sample the midpoint-quadratic curve into a polygon, then cast a ray from the center.
+  const poly: number[][] = [];
+  for (let i = 0; i < pts.length; i++) {
+    const p0 = mid(pts[(i - 1 + pts.length) % pts.length], pts[i]), c = pts[i], p1 = mid(pts[i], pts[(i + 1) % pts.length]);
+    for (let k = 0; k < 8; k++) { const t = k / 8, u = 1 - t; poly.push([u * u * p0[0] + 2 * u * t * c[0] + t * t * p1[0], u * u * p0[1] + 2 * u * t * c[1] + t * t * p1[1]]); }
+  }
+  const dx = Math.cos(angle), dy = Math.sin(angle);
+  let best = 0;
+  for (let i = 0; i < poly.length; i++) {
+    const [ax, ay] = poly[i], [bx, by] = poly[(i + 1) % poly.length], ex = bx - ax, ey = by - ay;
+    const den = dx * ey - dy * ex;
+    if (Math.abs(den) < 1e-9) continue;
+    const r = (ax * ey - ay * ex) / den, q = (ax * dy - ay * dx) / den;
+    if (r > 0 && q >= 0 && q <= 1) best = Math.max(best, r);
+  }
+  return best || Math.max(rx, ry);
+}
+
+/** Ring recipe: index 0 is the innermost ring. A node shows min(childLayers, 3) rings. */
+export const RINGS = [
+  { scale: 1.1, opacity: 0.5, rotate: -5, width: 2, dash: '' },
+  { scale: 1.2, opacity: 0.4, rotate: -10, width: 1, dash: '' },
+  { scale: 1.3, opacity: 0.3, rotate: -15, width: 3, dash: '6 4' },
+];
+
+/** Connector geometry: a cubic that bows perpendicular to the chord, flatter as distance grows. */
+export function edgePath(a: { x: number; y: number }, b: { x: number; y: number }, bow = 1) {
+  const dx = b.x - a.x, dy = b.y - a.y, d = Math.hypot(dx, dy) || 1;
+  const arc = Math.min(45, 45 / (1 + Math.max(0, (d - 200) / 400))) * bow;
+  const nx = -dy / d, ny = dx / d;
+  const mx = (a.x + b.x) / 2 + nx * arc, my = (a.y + b.y) / 2 + ny * arc;
+  const c1 = { x: a.x + (mx - a.x) * 0.66 + 0, y: a.y + (my - a.y) * 0.66 };
+  const c2 = { x: b.x + (mx - b.x) * 0.66, y: b.y + (my - b.y) * 0.66 };
+  const ang = Math.atan2(b.y - c2.y, b.x - c2.x);
+  return { d: `M${a.x.toFixed(1)} ${a.y.toFixed(1)}C${c1.x.toFixed(1)} ${c1.y.toFixed(1)} ${c2.x.toFixed(1)} ${c2.y.toFixed(1)} ${b.x.toFixed(1)} ${b.y.toFixed(1)}`, angle: ang, mid: { x: mx, y: my } };
+}
+
+/** Open V arrowhead at point p, pointing along angle. */
+export function arrowPath(p: { x: number; y: number }, angle: number, len = 11) {
+  const s = Math.PI / 5.5;
+  const a1 = { x: p.x - len * Math.cos(angle - s), y: p.y - len * Math.sin(angle - s) };
+  const a2 = { x: p.x - len * Math.cos(angle + s), y: p.y - len * Math.sin(angle + s) };
+  return `M${a1.x.toFixed(1)} ${a1.y.toFixed(1)}L${p.x.toFixed(1)} ${p.y.toFixed(1)}L${a2.x.toFixed(1)} ${a2.y.toFixed(1)}`;
+}

package/src/generated/geometry/blobShapes.ts

@@ -0,0 +1,4 @@
+// Generated from visualli.ai design-system/components/src/blobShapes.ts — do not edit here.
+// The six hand-authored Visualli node outlines, in normalized units (rx = ry = 1).
+// Copied verbatim from the web app (features/canvas/config/blobShapes.ts). Shape 0 is the root shape.
+export const BLOB_SHAPES: number[][][] = [[[1.12,0.0],[0.86,0.56],[0.46,0.94],[-0.08,1.06],[-0.68,0.82],[-0.96,0.08],[-0.55,-0.82],[0.04,-1.02],[0.72,-0.8],[1.08,-0.38]],[[-0.489,-0.625],[-0.384,-0.716],[-0.285,-0.792],[-0.189,-0.855],[-0.09,-0.903],[0.014,-0.932],[0.129,-0.94],[0.255,-0.924],[0.412,-0.876],[0.516,-0.832],[0.612,-0.78],[0.695,-0.725],[0.767,-0.666],[0.83,-0.606],[0.885,-0.546],[0.933,-0.486],[0.979,-0.425],[1.006,-0.385],[1.034,-0.334],[1.058,-0.276],[1.078,-0.209],[1.092,-0.133],[1.101,-0.046],[1.102,0.052],[1.094,0.173],[1.083,0.244],[1.063,0.324],[1.034,0.401],[0.996,0.477],[0.948,0.549],[0.889,0.617],[0.82,0.681],[0.735,0.741],[0.658,0.783],[0.569,0.822],[0.474,0.855],[0.372,0.882],[0.265,0.904],[0.156,0.92],[0.046,0.931],[-0.069,0.938],[-0.155,0.935],[-0.25,0.919],[-0.346,0.89],[-0.443,0.851],[-0.539,0.8],[-0.633,0.738],[-0.723,0.667],[-0.808,0.585],[-0.882,0.501],[-0.944,0.421],[-0.994,0.343],[-1.034,0.267],[-1.064,0.192],[-1.085,0.12],[-1.097,0.042],[-1.102,0.001],[-1.09,-0.243],[-1.05,-0.365],[-0.99,-0.441],[-0.911,-0.479],[-0.819,-0.499],[-0.715,-0.517],[-0.605,-0.551]],[[0.003,-0.97],[0.163,-0.984],[0.286,-1.028],[0.389,-1.096],[0.488,-1.174],[0.597,-1.21],[0.728,-1.165],[0.867,-1.036],[0.996,-0.839],[1.098,-0.59],[1.158,-0.304],[1.153,0.012],[1.08,0.336],[0.944,0.639],[0.756,0.889],[0.484,1.072],[0.339,1.079],[0.219,1.051],[0.131,0.994],[0.059,0.939],[0.008,0.915],[-0.105,0.931],[-0.176,0.965],[-0.249,1.005],[-0.345,1.039],[-0.497,1.055],[-0.672,1.032],[-0.817,0.952],[-0.945,0.81],[-1.054,0.6],[-1.16,0.302],[-1.187,-0.011],[-1.165,-0.326],[-1.097,-0.599],[-0.991,-0.838],[-0.852,-0.912],[-0.695,-0.958],[-0.53,-0.988],[-0.357,-0.992],[-0.18,-0.983]],[[-0.734,-1.127],[-0.656,-1.146],[-0.567,-1.142],[-0.468,-1.115],[-0.358,-1.079],[-0.238,-1.034],[-0.107,-0.989],[0.035,-0.953],[0.188,-0.929],[0.325,-0.916],[0.484,-0.896],[0.65,-0.854],[0.811,-0.77],[0.955,-0.631],[1.068,-0.422],[1.138,-0.126],[1.152,0.272],[1.121,0.451],[1.046,0.602],[0.928,0.727],[0.767,0.833],[0.565,0.925],[0.323,1.001],[0.042,1.075],[-0.277,1.142],[-0.368,1.147],[-0.475,1.136],[-0.589,1.104],[-0.704,1.05],[-0.815,0.973],[-0.913,0.871],[-0.993,0.746],[-1.048,0.593],[-1.109,0.298],[-1.145,0.018],[-1.154,-0.243],[-1.135,-0.482],[-1.085,-0.695],[-1.003,-0.874],[-0.886,-1.02]],[[-0.734,1.127],[-0.656,1.146],[-0.567,1.142],[-0.468,1.115],[-0.358,1.079],[-0.238,1.034],[-0.107,0.989],[0.035,0.953],[0.188,0.929],[0.325,0.916],[0.484,0.896],[0.65,0.854],[0.811,0.77],[0.955,0.631],[1.068,0.422],[1.138,0.126],[1.152,-0.272],[1.121,-0.451],[1.046,-0.602],[0.928,-0.727],[0.767,-0.833],[0.565,-0.925],[0.323,-1.001],[0.042,-1.075],[-0.277,-1.142],[-0.368,-1.147],[-0.475,-1.136],[-0.589,-1.104],[-0.704,-1.05],[-0.815,-0.973],[-0.913,-0.871],[-0.993,-0.746],[-1.048,-0.593],[-1.109,-0.298],[-1.145,-0.018],[-1.154,0.243],[-1.135,0.482],[-1.085,0.695],[-1.003,0.874],[-0.886,1.02]],[[0.001,-1.006],[0.134,-1.001],[0.262,-1.024],[0.382,-1.073],[0.498,-1.107],[0.614,-1.105],[0.733,-1.049],[0.85,-0.932],[0.953,-0.755],[1.03,-0.529],[1.067,-0.265],[1.054,0.018],[0.986,0.3],[0.868,0.557],[0.715,0.766],[0.55,0.909],[0.396,0.984],[0.262,1.005],[0.148,1.003],[0.037,1.008],[-0.083,1.04],[-0.22,1.118],[-0.36,1.192],[-0.5,1.234],[-0.65,1.175],[-0.81,1.045],[-0.99,0.855],[-1.14,0.61],[-1.24,0.33],[-1.27,0.04],[-1.275,-0.25],[-1.225,-0.5],[-1.08,-0.72],[-0.89,-0.92],[-0.734,-1.053],[-0.614,-1.112],[-0.498,-1.127],[-0.381,-1.11],[-0.261,-1.095],[-0.133,-1.058],[0.001,-1.01],[0.134,-1.001]]];

package/src/generated/geometry/color.ts

@@ -0,0 +1,37 @@
+// Generated from visualli.ai design-system/components/src/color.ts — do not edit here.
+/* Which topic an idea is drawn in. A `.visualli` file's `data.color` may name one of the eight topics or be any
+   other color, or be missing. Every renderer resolves it with this rule, so a file looks the same everywhere:
+     a topic name ('teal', 'Harbor ')  → that topic (case and surrounding spaces don't matter);
+     no color                          → the topics in order, by the idea's position among its siblings (so siblings differ);
+     anything else (e.g. '#b7e7f3')    → null: not a topic — drawn as given (customColor): the color as the fill, and
+                                         the fill darkened (CUSTOM.ringShade) as the ring; a custom color doesn't follow themes.
+   No dependencies, so it can travel alone. */
+
+/** The eight topics, in the order missing colors cycle through. */
+export const TOPIC_ORDER = ['teal', 'harbor', 'iris', 'berry', 'coral', 'amber', 'sun', 'stone'] as const;
+export type TopicName = (typeof TOPIC_ORDER)[number];
+
+/** The topic a color names, or null. */
+export function topicFromName(color: string | null | undefined): TopicName | null {
+  if (!color) return null;
+  const c = color.trim().toLowerCase();
+  return (TOPIC_ORDER as readonly string[]).includes(c) ? (c as TopicName) : null;
+}
+
+/** The topic for an idea: its named topic; with no color, the next topic in sibling order; null for any other color. */
+export function topicFor(color: string | null | undefined, siblingIndex: number): TopicName | null {
+  if (!color || !color.trim()) return TOPIC_ORDER[((siblingIndex % TOPIC_ORDER.length) + TOPIC_ORDER.length) % TOPIC_ORDER.length];
+  return topicFromName(color);
+}
+
+/** A custom (non-topic) color: drawn as given, with a darker ring. */
+export const CUSTOM = { /** The ring is the fill with each RGB channel multiplied by this. */ ringShade: 0.78 } as const;
+
+/** Fill and ring for a custom color. `ring` is null when the color isn't a 6-digit hex (use the `edge` token then). */
+export function customColor(color: string): { fill: string; ring: string | null } {
+  const m = /^#?([0-9a-f]{6})$/i.exec((color || '').trim());
+  if (!m) return { fill: color, ring: null };
+  const n = parseInt(m[1], 16), f = CUSTOM.ringShade;
+  const r = Math.round(((n >> 16) & 255) * f), g = Math.round(((n >> 8) & 255) * f), b = Math.round((n & 255) * f);
+  return { fill: color.trim(), ring: '#' + ((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1) };
+}

package/src/generated/geometry/container.ts

@@ -0,0 +1,84 @@
+// Generated from visualli.ai design-system/components/src/container.ts — do not edit here.
+/* Containers: the dashed hull around a group of ideas, and where its name goes.
+   The name is a pill straddling the hull's boundary. Which point of the boundary depends on what's inside and around
+   the container: the spot is chosen by scoring candidates along all four edges against the ideas, the connectors and
+   the names already placed — deterministic, so every renderer (VisualMap, the spec SDK on a canvas, PDF export) puts
+   it in the same place for the same file. Pure functions, no dependencies. World units (the map's coordinates). */
+
+export type Pt = { x: number; y: number };
+export type Box = { x0: number; y0: number; x1: number; y1: number };
+export type Hull = Box & { radius: number };
+export type LabelSide = 'bottom' | 'top' | 'left' | 'right';
+export type LabelPlacement = { x: number; y: number; side: LabelSide; score: number };
+
+/** The hull reaches this far beyond its ideas' centers, and rounds its corners this much. */
+export const HULL = { padX: 150, padY: 125, radius: 48 };
+/** Penalties: an idea or another name under the pill is never fine; a connector through it is bad; order breaks ties. */
+const WEIGHT = { idea: 1000, label: 1000, connector: 60, preference: 1 };
+
+/** Room kept between a member's outline and the hull, for ideas larger than the base size. */
+export const HULL_CLEAR = { x: 50, y: 51 } as const;
+
+/** The hull around a group's ideas: `padX` / `padY` beyond their centres, or more for an idea that has grown to show
+ *  its label (`rx` / `ry`, its half size: then its outline plus HULL_CLEAR). */
+export function containerHull(members: ReadonlyArray<Pt & { rx?: number; ry?: number }>): Hull | null {
+  if (!members.length) return null;
+  let x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
+  for (const m of members) {
+    const px = Math.max(HULL.padX, (m.rx ?? 0) + HULL_CLEAR.x), py = Math.max(HULL.padY, (m.ry ?? 0) + HULL_CLEAR.y);
+    x0 = Math.min(x0, m.x - px); x1 = Math.max(x1, m.x + px); y0 = Math.min(y0, m.y - py); y1 = Math.max(y1, m.y + py);
+  }
+  return { x0, x1, y0, y1, radius: HULL.radius };
+}
+
+/** Candidate spots for a w × h pill, in preference order: bottom center (the default look), top center, the thirds of
+ *  bottom and top, then the sides. Spots keep the whole pill on the straight part of an edge, clear of the corners. */
+export function labelCandidates(hull: Hull, w: number, h: number): { x: number; y: number; side: LabelSide }[] {
+  const { x0, x1, y0, y1, radius } = hull;
+  const cx = (x0 + x1) / 2, cy = (y0 + y1) / 2;
+  const minX = x0 + radius + w / 2, maxX = x1 - radius - w / 2; // horizontal room on top / bottom
+  const minY = y0 + radius + h / 2, maxY = y1 - radius - h / 2; // vertical room on the sides
+  const along = (lo: number, hi: number, f: number) => (lo > hi ? (lo + hi) / 2 : lo + (hi - lo) * f);
+  const out: { x: number; y: number; side: LabelSide }[] = [
+    { x: cx, y: y1, side: 'bottom' }, { x: cx, y: y0, side: 'top' },
+    { x: along(minX, maxX, 0.2), y: y1, side: 'bottom' }, { x: along(minX, maxX, 0.8), y: y1, side: 'bottom' },
+    { x: along(minX, maxX, 0.2), y: y0, side: 'top' }, { x: along(minX, maxX, 0.8), y: y0, side: 'top' },
+    { x: x1, y: cy, side: 'right' }, { x: x0, y: cy, side: 'left' },
+    { x: x1, y: along(minY, maxY, 0.25), side: 'right' }, { x: x1, y: along(minY, maxY, 0.75), side: 'right' },
+    { x: x0, y: along(minY, maxY, 0.25), side: 'left' }, { x: x0, y: along(minY, maxY, 0.75), side: 'left' },
+  ];
+  // The extremes of the top / bottom edges, for wide labels on narrow hulls.
+  out.push({ x: along(minX, maxX, 0), y: y1, side: 'bottom' }, { x: along(minX, maxX, 1), y: y1, side: 'bottom' },
+    { x: along(minX, maxX, 0), y: y0, side: 'top' }, { x: along(minX, maxX, 1), y: y0, side: 'top' });
+  return out;
+}
+
+const overlap = (a: Box, b: Box) => Math.max(0, Math.min(a.x1, b.x1) - Math.max(a.x0, b.x0)) * Math.max(0, Math.min(a.y1, b.y1) - Math.max(a.y0, b.y0));
+
+/** Where a container's name goes. `ideas`: the boxes of every idea on the layer (outermost ring included);
+ *  `connectors`: points sampled along every connector; `labels`: the pills already placed on this layer.
+ *  `gap` keeps a little air between the pill and what it avoids. */
+export function placeContainerLabel(hull: Hull, size: { w: number; h: number }, obstacles: { ideas: Box[]; connectors?: Pt[][]; labels?: Box[] }, gap = 10): LabelPlacement {
+  const { w, h } = size;
+  let best: LabelPlacement | null = null;
+  labelCandidates(hull, w, h).forEach((c, i) => {
+    const box = { x0: c.x - w / 2 - gap, x1: c.x + w / 2 + gap, y0: c.y - h / 2 - gap, y1: c.y + h / 2 + gap };
+    const area = w * h;
+    let score = i * WEIGHT.preference;
+    for (const b of obstacles.ideas) score += (overlap(box, b) / area) * WEIGHT.idea;
+    for (const b of obstacles.labels || []) score += (overlap(box, b) / area) * WEIGHT.label;
+    for (const line of obstacles.connectors || []) if (line.some((p) => p.x > box.x0 && p.x < box.x1 && p.y > box.y0 && p.y < box.y1)) score += WEIGHT.connector;
+    if (!best || score < best.score) best = { x: c.x, y: c.y, side: c.side, score };
+  });
+  return best!;
+}
+
+/** Points along a connector, for `connectors`: the same cubic edgePath draws (control points two-thirds of the way
+ *  from each end to the bowed midpoint `mid`, which edgePath returns). */
+export function connectorSamples(a: Pt, mid: Pt, b: Pt, n = 16): Pt[] {
+  const c1 = { x: a.x + (mid.x - a.x) * 0.66, y: a.y + (mid.y - a.y) * 0.66 }, c2 = { x: b.x + (mid.x - b.x) * 0.66, y: b.y + (mid.y - b.y) * 0.66 };
+  return Array.from({ length: n + 1 }, (_, k) => {
+    const t = k / n, u = 1 - t;
+    return { x: u * u * u * a.x + 3 * u * u * t * c1.x + 3 * u * t * t * c2.x + t * t * t * b.x, y: u * u * u * a.y + 3 * u * u * t * c1.y + 3 * u * t * t * c2.y + t * t * t * b.y };
+  });
+}

package/src/generated/geometry/detail.ts

@@ -0,0 +1,22 @@
+// Generated from visualli.ai design-system/components/src/detail.ts — do not edit here.
+/* Level of detail: what an idea draws at the size it's seen. Far-out views of large maps show ideas as specks; the
+   rings, label and shadow of an idea a few pixels wide can't be seen, and drawing them makes large maps slow. Every
+   renderer follows the same thresholds, so a map simplifies alike everywhere. Sizes are on-screen CSS pixels of the
+   idea's width. No dependencies, so it can travel alone. */
+
+export const DETAIL = {
+  /** Below this on-screen width an idea draws only its body: no rings, label or shadow. */ bodyOnlyBelow: 24,
+  /** Below this it may be drawn as a plain filled speck in its topic fill (no outline) — indistinguishable at this size. */ speckBelow: 12,
+  /** Above this many ideas in view, idea shadows are skipped (the costliest effect to draw). */ shadowsMaxVisible: 150,
+} as const;
+
+export type IdeaDetail = 'full' | 'body' | 'speck';
+
+/** What an idea of this on-screen width draws. A selected, focused or hovered idea always draws in full. */
+export function ideaDetail(screenWidth: number, emphasised = false): IdeaDetail {
+  if (emphasised || screenWidth >= DETAIL.bodyOnlyBelow) return 'full';
+  return screenWidth < DETAIL.speckBelow ? 'speck' : 'body';
+}
+
+/** Whether idea shadows are drawn with this many ideas in view. */
+export function shadowsShown(visibleIdeas: number): boolean { return visibleIdeas <= DETAIL.shadowsMaxVisible; }

package/src/generated/geometry/idea.ts

@@ -0,0 +1,56 @@
+// Generated from visualli.ai design-system/components/src/idea.ts — do not edit here.
+/* An idea's size and its label. An idea grows to show its whole label: it starts at its base width and widens in
+   steps until the label fits in `labelLines` lines; at its widest it grows taller instead, so a label is never cut.
+   Labels (and connector labels) grow a little when the map is zoomed out, so they stay readable. Every renderer sizes
+   ideas with these rules, measuring text with its own font engine (`measure`). No dependencies, so it can travel alone. */
+
+export type IdeaKind = 'root' | 'node' | 'mini';
+
+/** How much labels grow when zoomed out (`scale` = the map's zoom): never smaller than their size, up to these caps.
+ *  Idea labels and container names use `idea`; connector labels `connector`. Below 100% they grow; above, they don't. */
+export const LABEL_GROWTH = { idea: 1.3, connector: 1.6 } as const;
+
+export const IDEA = {
+  /** Width an idea starts at… */ baseWidth: { root: 240, node: 200, mini: 120 },
+  /** …and the widest it gets before it grows taller instead. */ maxWidth: { root: 400, node: 360, mini: 200 },
+  /** Width grows in steps of this. */ step: 20,
+  /** Height = width × aspect (at least `minRy` × 2), more if the label needs it. */ aspect: 0.74, minRy: 64,
+  /** The label's box is the idea's width less this (22 each side). */ labelInset: 44,
+  /** The idea widens until its label fits in this many lines. */ labelLines: 3,
+  /** Label size (before the label scale and zoom growth), weight from the canvas type styles. */ labelSize: { root: 30, node: 22, mini: 15 },
+  labelLineHeight: 1.15,
+  /** The label may fill at most this share of the idea's height. */ labelFillHeight: 0.7,
+} as const;
+
+/** Greedy word wrap of `text` into lines no wider than `maxWidth` (a single word longer than that gets its own line). */
+export function wrapLines(text: string, maxWidth: number, measure: (s: string) => number): string[] {
+  const words = text.split(/\s+/).filter(Boolean);
+  const lines: string[] = [];
+  let cur = '';
+  for (const w of words) {
+    const next = cur ? `${cur} ${w}` : w;
+    if (cur && measure(next) > maxWidth) { lines.push(cur); cur = w; } else cur = next;
+  }
+  if (cur) lines.push(cur);
+  return lines.length ? lines : [''];
+}
+
+/** An idea's size for its label: width, half-width / half-height for the blob, and the label's lines. The label is
+ *  measured at its largest drawn size — its type size × `labelScale` (Comfort: larger text) × LABEL_GROWTH.idea (zoomed
+ *  out) — so it fits at every zoom and the idea never changes size while zooming. `measure(text, px)` returns the
+ *  text's width in px in the label's face at `px`. */
+export function ideaSize(kind: IdeaKind, label: string, measure: (text: string, px: number) => number, labelScale = 1) {
+  const px = IDEA.labelSize[kind] * labelScale * LABEL_GROWTH.idea;
+  const fit = (w: number) => wrapLines(label, w - IDEA.labelInset, (t) => measure(t, px));
+  const base: number = IDEA.baseWidth[kind], max: number = IDEA.maxWidth[kind];
+  let width = base, lines = fit(width);
+  while (lines.length > IDEA.labelLines && width < max) { width = Math.min(max, width + IDEA.step); lines = fit(width); }
+  const rx = width / 2;
+  const ry = Math.max(IDEA.minRy, rx * IDEA.aspect, (lines.length * px * IDEA.labelLineHeight) / 2 / IDEA.labelFillHeight);
+  return { width, height: ry * 2, rx, ry, lines };
+}
+
+export function labelGrowth(scale: number): { idea: number; connector: number } {
+  const inv = 1 / Math.max(scale, 0.0001);
+  return { idea: Math.max(1, Math.min(inv, LABEL_GROWTH.idea)), connector: Math.max(1, Math.min(inv, LABEL_GROWTH.connector)) };
+}

package/src/generated/geometry/interaction.ts

@@ -0,0 +1,122 @@
+// Generated from visualli.ai design-system/components/src/interaction.ts — do not edit here.
+/* How the canvas answers the pointer and the keyboard — the timing and rules behind the peek (an idea's summary)
+   and terms (semantic anchors: an underlined word and its definition card). The look and the pop-in animation live
+   in the CSS (.vi-fact, .vi-anchor, .vi-anchor-card); these are the behaviours, as data, so every renderer (VisualMap,
+   the spec SDK on a canvas) opens and closes them alike. Times in ms. No dependencies, so it can travel alone. */
+
+/** Terms (semantic anchors) in a peek's text. */
+export const TERM = {
+  /** Hovering the term this long opens its definition card… */ hoverOpen: 250,
+  /** …which closes this long after the pointer leaves both the term and the card (moving between them keeps it open). */ hoverClose: 300,
+  /** Only a mouse opens on hover; touch and pen open on tap. */ hoverPointers: ['mouse'] as readonly string[],
+  /** A click, tap, Enter or Space pins the card open (hovering away doesn't close it); pressing again unpins and closes. */ clickPins: true,
+  /** Escape closes the card and returns focus to the term; a press anywhere outside the term and its card closes it. */ escapeCloses: true, pressOutsideCloses: true,
+  /** Opening by click or keyboard moves focus to the card's first link or button. */ focusCardOnOpen: true,
+  /** The card is kept this far inside the viewport's left and right edges. */ viewportMargin: 8,
+  /** The card's link to a source about the term. */ learnMoreLabel: 'Learn more',
+} as const;
+
+/** The peek: an idea's summary card on hover (pointer) or tap (touch). */
+export const PEEK = {
+  /** Hovering an idea opens its peek at once; it stays this long after the pointer leaves the idea (and while the
+   *  pointer is over the peek itself), so the pointer can travel from the idea onto the card. */ hoverClose: 180,
+} as const;
+
+/** The touch peek: a bottom sheet with a grip. */
+export const SHEET = {
+  /** Dragging the grip down this far closes the sheet (or collapses it when expanded); up this far expands it. */ dismissDrag: 80, expandDrag: 40,
+  /** Its height: this share of the map, at most `maxHeight` px; the map pans the chosen idea into the space above it. */ heightRatio: 0.42, maxHeight: 300,
+} as const;
+
+/** Zoom, pan and fit. */
+export const VIEW = {
+  /** Each zoom step multiplies or divides the zoom by this. */ zoomStep: 1.2,
+  /** Zoom limits (the zoom-min / zoom-max tokens; the build checks they agree). */ zoomMin: 0.3, zoomMax: 5,
+  /** Fit to view never enlarges a layer beyond this. */ fitMax: 1.1,
+} as const;
+
+/** Touch gestures on the map (any touch input — phones, tablets and touchscreen laptops alike; it follows the pointer
+ *  in use, not the device, so a mouse or trackpad on the same laptop isn't affected). */
+export const GESTURE = {
+  /** Two fingers pinch to zoom the map's contents — ideas, connectors, containers and their labels — around the
+   *  point between the fingers, within VIEW's limits. Controls, the depth trail, the peek, chat and the page never scale. */ pinchZoom: true,
+  /** Moving both fingers pans the contents. */ twoFingerPan: true,
+  /** The pointers that pinch (PointerEvent.pointerType). */ pointers: ['touch'] as readonly string[],
+  /** Where the map is the page (an app: AppShell, the mobile app), it takes every touch gesture (touch-action: none),
+   *  so the browser never zooms the page. Embedded on a scrolling page (website, docs), one finger still scrolls the
+   *  page (touch-action: pan-x pan-y); two fingers that land together pinch the map. */ appTouchAction: 'none', embeddedTouchAction: 'pan-x pan-y',
+  /** Zoom never navigates: stepping inside and backing out stay explicit (tap an idea / Step inside, the depth trail,
+   *  Escape or Backspace). */ zoomNavigates: false,
+} as const;
+
+/** The zoom after a pinch: the zoom at the start, scaled by how far the fingers spread, within VIEW's limits. */
+export function pinchZoom(startZoom: number, startDistance: number, distance: number): number {
+  const z = startZoom * (distance / Math.max(startDistance, 1));
+  return Math.min(VIEW.zoomMax, Math.max(VIEW.zoomMin, z));
+}
+
+/** Keeps the map point that was under `from` under `to` when the scale changes from `s0` to `s1`: the new
+ *  translation, given the old one (screen = world × s + t). Used to zoom around the fingers. */
+export function zoomAround(t0: { x: number; y: number }, s0: number, s1: number, from: { x: number; y: number }, to: { x: number; y: number }): { x: number; y: number } {
+  const wx = (from.x - t0.x) / s0, wy = (from.y - t0.y) / s0;
+  return { x: to.x - wx * s1, y: to.y - wy * s1 };
+}
+
+/** Framing a layer (fit to view): its ideas with room around them, and its container hulls with room for the name pill. */
+export const FRAME = {
+  /** Room beyond each idea's outline (at least `minPadX` / `minPadY` from its centre). */ clearX: 50, clearY: 46, minPadX: 150, minPadY: 120,
+  /** Room beyond each container hull for its dashed line and the name pill straddling it. */ hullX: 24, hullY: 40,
+} as const;
+export type FrameBox = { x0: number; y0: number; x1: number; y1: number };
+
+/** The box a layer is framed by: every idea (`rx` / `ry` its half size) and every container hull. */
+export function layerBounds(ideas: ReadonlyArray<{ x: number; y: number; rx: number; ry: number }>, hulls: ReadonlyArray<FrameBox> = []): FrameBox {
+  let x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
+  for (const n of ideas) {
+    const px = Math.max(FRAME.minPadX, n.rx + FRAME.clearX), py = Math.max(FRAME.minPadY, n.ry + FRAME.clearY);
+    x0 = Math.min(x0, n.x - px); x1 = Math.max(x1, n.x + px); y0 = Math.min(y0, n.y - py); y1 = Math.max(y1, n.y + py);
+  }
+  for (const h of hulls) { x0 = Math.min(x0, h.x0 - FRAME.hullX); x1 = Math.max(x1, h.x1 + FRAME.hullX); y0 = Math.min(y0, h.y0 - FRAME.hullY); y1 = Math.max(y1, h.y1 + FRAME.hullY); }
+  if (!Number.isFinite(x0)) return { x0: -FRAME.minPadX, y0: -FRAME.minPadY, x1: FRAME.minPadX, y1: FRAME.minPadY };
+  return { x0, y0, x1, y1 };
+}
+
+/** Fit to view: the scale that shows `bounds` in an area of `width` × `height` (never beyond VIEW.fitMax), and the
+ *  world point to centre. */
+export function fitView(bounds: FrameBox, width: number, height: number): { scale: number; center: { x: number; y: number } } {
+  const scale = Math.min(width / Math.max(1, bounds.x1 - bounds.x0), height / Math.max(1, bounds.y1 - bounds.y0), VIEW.fitMax);
+  return { scale, center: { x: (bounds.x0 + bounds.x1) / 2, y: (bounds.y0 + bounds.y1) / 2 } };
+}
+
+/** Where the peek card sits (pointer): beside the idea — right of it if it fits, else left — and level with it. */
+export const PEEK_PLACEMENT = {
+  /** Gap between the idea's outermost ring and the card. */ gap: 16,
+  /** The card's width and the height kept clear below it. */ cardWidth: 300, cardHeight: 220,
+  /** The card is raised this much above the idea's centre. */ raise: 70,
+  /** Kept this far inside the map's edges. */ margin: 12,
+} as const;
+
+/** The peek card's top-left, in map (screen) pixels. `idea`: the idea's centre on screen and its on-screen half
+ *  width with its outermost ring (`half`); `box`: the map's size. */
+export function peekPosition(idea: { x: number; y: number; half: number }, box: { w: number; h: number }, card: { w: number; h: number } = { w: PEEK_PLACEMENT.cardWidth, h: PEEK_PLACEMENT.cardHeight }) {
+  const P = PEEK_PLACEMENT, half = idea.half + P.gap;
+  const right = idea.x + half + card.w < box.w - P.margin;
+  return { left: right ? idea.x + half : Math.max(P.margin, idea.x - half - card.w), top: Math.min(Math.max(P.margin, idea.y - P.raise), box.h - card.h), side: right ? 'right' as const : 'left' as const };
+}
+
+/** The depth trail: each entry shows the idea that was stepped into — its title and a dot in its color (the same
+ *  topic or custom color the idea is drawn in, including the sibling-order topic of an uncolored idea). The first
+ *  entry is the map itself: a `stone` dot and the home glyph only (`rootLabel: 'icon'`) — no text, since a map's title
+ *  usually repeats its centre idea's, which the next entry shows; its accessible name and tooltip are the map's title.
+ *  The dot is the idea shape (shapeForLevel). */
+export const TRAIL = { rootTopic: 'stone', rootLabel: 'icon', homeIconSize: 12, dotBox: 16, dotRadius: 6.4, stroke: 1.25, currentStroke: 1.75 } as const;
+
+/** How an input answers: a mouse hovers (peeks and terms open on hover); touch and pen tap. Null for unknown pointers. */
+export function pointerModeFor(pointerType: string): 'hover' | 'touch' | null {
+  return pointerType === 'mouse' ? 'hover' : pointerType === 'touch' || pointerType === 'pen' ? 'touch' : null;
+}
+
+/** Whether a pointer of this type opens a term on hover (PointerEvent.pointerType). */
+export function hoverOpensTerm(pointerType: string): boolean {
+  return TERM.hoverPointers.includes(pointerType);
+}

package/src/generated/geometry/motion.ts

@@ -0,0 +1,140 @@
+// Generated from visualli.ai design-system/components/src/motion.ts — do not edit here.
+/* The canvas choreography — how a layer arrives, how you step inside and back out, how an idea answers hover.
+   One source for every renderer: VisualMap drives its CSS animations from these values (as CSS variables and
+   animation delays), and a canvas renderer (e.g. the spec SDK on Konva) can run the same timeline from its own loop.
+   Times in ms, scales as factors, easings as cubic-bezier control points. No dependencies, so it can travel alone.
+   The durations and easings equal the motion tokens (duration-*, ease-*, stagger-reveal); the build checks that. */
+
+export type Bezier = readonly [number, number, number, number];
+
+export const EASE = {
+  /** ease-standard — UI and connector drawing. */ standard: [0.4, 0, 0.2, 1] as Bezier,
+  /** ease-zoom — diving into and out of layers. */ zoom: [0.2, 0.8, 0.2, 1] as Bezier,
+  /** ease-bloom — ideas arriving, with a little overshoot. */ bloom: [0.34, 1.4, 0.64, 1] as Bezier,
+};
+
+export const MOTION = {
+  /** A layer arrives: ideas bloom one by one in sibling order, center first, then connectors draw. */
+  reveal: {
+    /** duration-reveal: each idea's bloom. */ duration: 420,
+    /** stagger-reveal: delay between consecutive ideas. */ stagger: 70,
+    /** An idea starts at this scale… */ fromScale: 0.55,
+    /** …and this fraction of the way from its place toward the layer's center. */ fromCenter: 0.5,
+    ease: EASE.bloom,
+    /** Settle time after the last bloom before the map is idle (interactive again). */ tail: 200,
+  },
+  /** Connectors of an arriving layer: they start once the ideas are mostly in. */
+  connector: {
+    /** Lead time before the first connector, on top of the ideas' stagger. */ lead: 240,
+    /** Delay between consecutive connectors. */ stagger: 60,
+    /** A solid connector draws from source to target; a dashed one fades in instead. */ draw: 500,
+    /** The connector group's fade (duration-base). */ fade: 240,
+    ease: EASE.standard,
+  },
+  /** Step inside: the current layer zooms toward the idea and fades; the inner layer then arrives (reveal). */
+  dive: {
+    /** The old layer's zoom, toward the idea's position. */ scale: 3.2,
+    /** duration-zoom. */ duration: 500,
+    /** It fades out after this delay, over `fade`. */ fadeDelay: 150, fade: 160,
+    /** The layers swap (and the reveal starts) this long after the dive starts. */ swapAfter: 320,
+    ease: EASE.zoom,
+  },
+  /** Back out (depth trail): the current layer shrinks toward the center and fades; the outer layer arrives. */
+  surface: {
+    scale: 0.6, duration: 220, fade: 200,
+    swapAfter: 220,
+    ease: EASE.zoom,
+  },
+  /** The arriving layer as a whole settles from slightly small. */
+  settle: { fromScale: 0.94, duration: 260, ease: EASE.standard },
+  /** Hover (pointer) or select: the idea lifts; its rings turn and grow a touch — a nudge, not a wobble. */
+  hover: {
+    lift: 2, ringRotate: -2, ringScale: 1.015,
+    /** duration-base, for both the lift (ease-bloom) and the rings (ease-standard). */ duration: 240,
+    liftEase: EASE.bloom, ringEase: EASE.standard,
+  },
+  /** Reduced motion, or Gradual reveal off: everything appears together with a short fade; dives become cross-fades. */
+  reduced: { fade: 120 },
+  /** Large layers. The stagger is written for a dozen ideas; a layer of hundreds would take minutes to arrive and
+   *  every frame of a bloom repaints the whole layer. Above `staggerSlots` ideas (and connectors), they share that many
+   *  slots, so a layer never takes longer to arrive than `staggerSlots` ideas would. Above `bloomMax` ideas the layer
+   *  fades in together (the reduced fade) and hover lifts snap instead of easing. */
+  largeLayer: { staggerSlots: 30, bloomMax: 150 },
+} as const;
+
+export type Point = { x: number; y: number };
+
+/** Delay before idea `i` (sibling order) starts to bloom. */
+export function revealDelay(i: number): number { return i * MOTION.reveal.stagger; }
+
+/** Delay before connector `i` starts, in a layer of `nodeCount` ideas. */
+export function connectorDelay(i: number, nodeCount: number): number {
+  return MOTION.connector.lead + nodeCount * MOTION.reveal.stagger + i * MOTION.connector.stagger;
+}
+
+/** How long a layer's arrival takes, until the map is idle again. 0 with reduced motion. */
+export function revealTotal(nodeCount: number, reduced = false): number {
+  return reduced ? 0 : MOTION.reveal.duration + nodeCount * MOTION.reveal.stagger + MOTION.reveal.tail;
+}
+
+/** Where an idea starts its bloom, as an offset from its final position: part of the way toward the layer's center. */
+export function bloomOffset(node: Point, center: Point): Point {
+  const k = MOTION.reveal.fromCenter;
+  return { x: (center.x - node.x) * k, y: (center.y - node.y) * k };
+}
+
+/** When the layers swap after Step inside ('in') or Back out ('out'). 0 with reduced motion (a cross-fade). */
+export function swapDelay(dir: 'in' | 'out', reduced = false): number {
+  return reduced ? 0 : dir === 'in' ? MOTION.dive.swapAfter : MOTION.surface.swapAfter;
+}
+
+/** The stagger slot of item `i` of `count` (ideas or connectors): its own index up to `staggerSlots`, then shared. */
+export function revealSlot(i: number, count: number): number {
+  const slots = Math.min(count, MOTION.largeLayer.staggerSlots);
+  return count > slots ? Math.floor((i * slots) / count) : i;
+}
+
+/** Whether a layer of `nodeCount` ideas blooms in one by one (else it fades in together and hover lifts snap). */
+export function layerBlooms(nodeCount: number): boolean { return nodeCount <= MOTION.largeLayer.bloomMax; }
+
+/** A layer's whole arrival, large layers included: when idea `i` and connector `i` start, and when the layer is idle. */
+export function layerReveal(nodeCount: number, connectorCount: number, reduced = false) {
+  const instant = reduced || !layerBlooms(nodeCount);
+  const slots = Math.min(nodeCount, MOTION.largeLayer.staggerSlots);
+  const edgeSlots = Math.min(connectorCount, MOTION.largeLayer.staggerSlots);
+  return {
+    /** Fades in together (reduced motion, Gradual reveal off, or a layer past `bloomMax`). */ instant,
+    ideaDelay: (i: number) => (instant ? 0 : revealDelay(revealSlot(i, nodeCount))),
+    connectorDelay: (i: number) => (instant ? 0 : connectorDelay(revealSlot(i, connectorCount), slots)),
+    /** Until the map is idle again. */
+    total: instant ? (reduced ? 0 : MOTION.reduced.fade) : Math.max(revealTotal(slots), edgeSlots ? connectorDelay(edgeSlots - 1, slots) + MOTION.connector.draw : 0),
+  };
+}
+
+/** CSS form of an easing. */
+export function cssEase(e: Bezier): string { return `cubic-bezier(${e.join(', ')})`; }
+
+/** Evaluate an easing at progress t (0–1), for renderers that animate in their own loop. */
+export function ease(e: Bezier, t: number): number {
+  const [x1, y1, x2, y2] = e;
+  if (t <= 0) return 0; if (t >= 1) return 1;
+  const bx = (u: number) => 3 * x1 * u * (1 - u) ** 2 + 3 * x2 * u * u * (1 - u) + u ** 3;
+  const by = (u: number) => 3 * y1 * u * (1 - u) ** 2 + 3 * y2 * u * u * (1 - u) + u ** 3;
+  let lo = 0, hi = 1, u = t;
+  for (let k = 0; k < 24; k++) { u = (lo + hi) / 2; if (bx(u) < t) lo = u; else hi = u; }
+  return by(u);
+}
+
+/** The CSS variables VisualMap sets on its root, so its stylesheet animates with exactly these values. */
+export function motionVars(): Record<string, string> {
+  const m = MOTION;
+  return {
+    '--vi-bloom-from': String(m.reveal.fromScale),
+    '--vi-line-draw': `${m.connector.draw}ms`,
+    '--vi-dive-scale': String(m.dive.scale), '--vi-dive-fade': `${m.dive.fade}ms`, '--vi-dive-fade-delay': `${m.dive.fadeDelay}ms`,
+    '--vi-surface-scale': String(m.surface.scale), '--vi-surface-dur': `${m.surface.duration}ms`, '--vi-surface-fade': `${m.surface.fade}ms`,
+    '--vi-settle-from': String(m.settle.fromScale), '--vi-settle-dur': `${m.settle.duration}ms`,
+    '--vi-reduced-fade': `${m.reduced.fade}ms`,
+    '--vi-lift': `${m.hover.lift}px`, '--vi-ring-turn': `${m.hover.ringRotate}deg`, '--vi-ring-grow': String(m.hover.ringScale),
+  };
+}

package/src/index.ts

@@ -9,9 +9,26 @@ export * from './parser/index.js';
 export * from './constants/index.js';
 export * from './viewport/index.js';
 export * from './performance/index.js';
-export * from './animations/index.js';
 export * from './spatial/index.js';
 export * from './stores/index.js';
 export * from './utils/navigation.js';
 export * from './rendering/culling.js';
 export * from './config/index.js';
+export * from './theme/index.js';
+
+// The design system's choreography (layer reveal, step inside, back out, hover, reduced motion), verbatim.
+export { MOTION, EASE, revealDelay, connectorDelay, revealTotal, bloomOffset, swapDelay, cssEase, ease as easeBezier, motionVars, revealSlot, layerBlooms, layerReveal } from './generated/geometry/motion.js';
+export type { Bezier } from './generated/geometry/motion.js';
+// Containers: the dashed hull around a group's ideas and where its name goes (a pill on the hull, placed clear of
+// ideas, connectors and other names), verbatim from the design system's geometry/container.ts.
+export { HULL, HULL_CLEAR, containerHull, labelCandidates, placeContainerLabel, connectorSamples } from './generated/geometry/container.js';
+export type { Hull, Box as LabelBox, LabelPlacement, LabelSide, Pt } from './generated/geometry/container.js';
+// How terms, the peek, the touch sheet, zoom, fit and the depth trail behave, and which colour an idea gets: the design
+// system's geometry/interaction.ts and geometry/color.ts, verbatim. (Idea size and label growth, geometry/idea.ts, come
+// through rendering/ideaSize.)
+export { TERM, PEEK, SHEET, VIEW, GESTURE, FRAME, PEEK_PLACEMENT, TRAIL, pointerModeFor, hoverOpensTerm, pinchZoom, zoomAround, layerBounds, fitView, peekPosition } from './generated/geometry/interaction.js';
+export type { FrameBox } from './generated/geometry/interaction.js';
+// Level of detail: what an idea draws at the size it's seen, and when shadows are skipped (geometry/detail.ts, verbatim).
+export { DETAIL, ideaDetail, shadowsShown } from './generated/geometry/detail.js';
+export type { IdeaDetail } from './generated/geometry/detail.js';
+export { TOPIC_ORDER, CUSTOM, topicFor } from './generated/geometry/color.js';