create-imagine 0.1.0

package/templates/blank/vite.config.ts

@@ -0,0 +1,82 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+import type { Plugin } from 'vite';
+import path from 'node:path';
+import fs from 'node:fs/promises';
+import { fileURLToPath } from 'node:url';
+import { emptyPropsFile, PROJECT_ID_RE, validatePropsFileV1 } from './src/core/manifest';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+function imaginePropsApi(): Plugin {
+  return {
+    name: 'imagine-props-api',
+    apply: 'serve',
+    configureServer(server) {
+      server.middlewares.use((req, res, next) => {
+        void (async () => {
+          const url = new URL(req.url ?? '/', 'http://localhost');
+          if (url.pathname !== '/__imagine/props') return next();
+
+          const projectId = url.searchParams.get('projectId') ?? '';
+          if (!PROJECT_ID_RE.test(projectId)) {
+            res.statusCode = 400;
+            res.setHeader('content-type', 'application/json; charset=utf-8');
+            res.end(JSON.stringify({ error: 'Invalid projectId' }));
+            return;
+          }
+
+          const filePath = path.resolve(__dirname, 'projects', projectId, 'props.json');
+
+          if (req.method === 'GET') {
+            const body = await fs
+              .readFile(filePath, 'utf8')
+              .then((raw) => validatePropsFileV1(JSON.parse(raw)))
+              .catch(() => emptyPropsFile());
+
+            res.statusCode = 200;
+            res.setHeader('content-type', 'application/json; charset=utf-8');
+            res.end(JSON.stringify(body));
+            return;
+          }
+
+          if (req.method === 'POST') {
+            const chunks: Buffer[] = [];
+            await new Promise<void>((resolve, reject) => {
+              req.on('data', (c) => chunks.push(c as Buffer));
+              req.on('end', () => resolve());
+              req.on('error', reject);
+            });
+
+            const raw = Buffer.concat(chunks).toString('utf8');
+            const json = JSON.parse(raw);
+            const validated = validatePropsFileV1(json);
+
+            await fs.mkdir(path.dirname(filePath), { recursive: true });
+            await fs.writeFile(filePath, JSON.stringify(validated, null, 2) + '\n', 'utf8');
+
+            res.statusCode = 204;
+            res.end();
+            return;
+          }
+
+          res.statusCode = 405;
+          res.end('Method not allowed');
+        })().catch(next);
+      });
+    }
+  };
+}
+
+export default defineConfig({
+  server: {
+    port: 5173,
+    strictPort: true
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src')
+    }
+  },
+  plugins: [react(), imaginePropsApi()]
+});

package/templates/blank/vitest.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    environment: 'node'
+  }
+});
+

package/templates/example/README.md

@@ -0,0 +1,96 @@
+# Imagine
+
+React → scientific figures (PNG + SVG) with a live Studio and a Playwright renderer.
+
+## Quickstart
+
+```bash
+npm install
+npm run dev
+```
+
+Open the Studio at http://localhost:5173
+
+## Projects
+
+Figures are organized into projects under `projects/<id>/`.
+
+The Studio home shows projects. Clicking a project shows:
+- a preview gallery (static images from `public/`)
+- the live React-generated figures for that project
+
+```bash
+npm run list
+```
+
+List one project’s figures:
+
+```bash
+npm run list -- --project example
+```
+
+## Render exports
+
+```bash
+npm run render -- --project example
+```
+
+By default outputs are written to `out/<projectId>/`:
+- `out/<projectId>/<figure>--<variant>.png`
+- `out/<projectId>/<figure>--<variant>.svg`
+- `out/<projectId>/manifest.json`
+
+### Render options
+
+```bash
+# Only one figure
+npm run render -- --project example --fig line-chart
+
+# Only one variant
+npm run render -- --project example --fig hello-world --variant transparent
+
+# Dev-mode rendering (requires `npm run dev` already running)
+npm run render:dev -- --project example
+```
+
+Common flags:
+- `--project <id>`
+- `--fig <id>` (repeatable or comma-separated)
+- `--variant <id>` (repeatable or comma-separated)
+- `--formats png,svg`
+- `--out <dir>`
+- `--mode build|dev`
+- `--url http://localhost:5173` (dev mode)
+- `--no-props` (ignore Studio-saved overrides)
+
+## Text editing (Studio Controls)
+
+When you edit figure text in Studio, it saves overrides into:
+- `projects/<projectId>/props.json`
+
+`npm run render` automatically uses those overrides (unless `--no-props`).
+
+## Create a new project
+
+1. Copy `projects/example/` to `projects/<your-id>/`
+2. Update `projects/<your-id>/project.ts` and `projects/<your-id>/manifest.ts`
+3. Restart `npm run dev` (project discovery is build-time)
+
+## Create a new figure (inside a project)
+
+1. Add a new file in `projects/<projectId>/figures/` that default-exports a React component whose root is an `<svg>`.
+2. Register it in `projects/<projectId>/manifest.ts` with an `id`, `title`, `moduleKey`, and at least one variant.
+3. Optionally add preview images under `public/projects/<projectId>/previews/` and reference them from `projects/<projectId>/project.ts`.
+
+Notes:
+- `moduleKey` must match the figure filename (without `.tsx`). Example: `projects/example/figures/line-chart.tsx` → `moduleKey: "line-chart"`.
+- Sizes can be specified as pixels or paper-friendly `mm + dpi` (converted to px for rendering).
+- MathJax is loaded on-demand from CDN by default. Override with `VITE_MATHJAX_URL` if needed.
+
+## Generate example previews
+
+```bash
+npm run render:previews
+```
+
+This writes PNGs to `public/projects/example/previews/`.

package/templates/example/gitignore

@@ -0,0 +1,6 @@
+node_modules
+dist
+out
+.DS_Store
+*.log
+

package/templates/example/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Imagine Studio</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+

package/templates/example/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "imagine-project",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "list": "tsx scripts/list.ts",
+    "render": "tsx scripts/render.ts",
+    "render:dev": "tsx scripts/render.ts --mode dev",
+    "render:previews": "tsx scripts/render.ts --project example --variant default --formats png --no-props --no-manifest --out public/projects/example/previews",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "d3-array": "^3.2.4",
+    "d3-format": "^3.1.0",
+    "d3-scale": "^4.0.2",
+    "d3-shape": "^3.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.28.0"
+  },
+  "devDependencies": {
+    "@types/d3-array": "^3.2.2",
+    "@types/d3-format": "^3.0.4",
+    "@types/d3-scale": "^4.0.9",
+    "@types/d3-shape": "^3.1.8",
+    "@types/node": "^22.10.7",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "playwright": "^1.49.1",
+    "tsx": "^4.19.2",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.6",
+    "vitest": "^2.1.8"
+  }
+}

package/templates/example/projects/example/figures/ai-agent-architecture.tsx

@@ -0,0 +1,133 @@
+import { Figure } from '@/framework/Figure';
+import type { FigureComponentBaseProps } from '@/framework/types';
+import { Box, Callout, Label, Arrow } from '@/framework/diagrams/primitives';
+import { theme } from '@/framework/theme';
+
+function DashedArrow({
+  x1,
+  y1,
+  x2,
+  y2,
+  stroke = theme.colors.axis,
+  strokeWidth = theme.strokes.thick
+}: {
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+  stroke?: string;
+  strokeWidth?: number;
+}) {
+  return (
+    <line
+      x1={x1}
+      y1={y1}
+      x2={x2}
+      y2={y2}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      strokeDasharray="6,4"
+      markerEnd="none"
+    />
+  );
+}
+
+export default function AIAgentArchitectureFigure({
+  width,
+  height,
+  background,
+  title = 'AI Agent Architecture',
+  subtitle = 'Multi-agent system with tool use and memory',
+  userInput = 'User Input',
+  orchestrator = 'Orchestrator',
+  memory = 'Memory / Context',
+  llm = 'LLM / Model',
+  tools1 = 'Tool A',
+  tools2 = 'Tool B',
+  tools3 = 'Tool C',
+  output = 'Response',
+  notes = 'Components communicate via function calling'
+}: FigureComponentBaseProps & {
+  title?: string;
+  subtitle?: string;
+  userInput?: string;
+  orchestrator?: string;
+  memory?: string;
+  llm?: string;
+  tools1?: string;
+  tools2?: string;
+  tools3?: string;
+  output?: string;
+  notes?: string;
+}) {
+  const startY = 100;
+  const boxW = 160;
+  const boxH = 70;
+  const mainBoxH = 90;
+  const gapX = 60;
+  const gapY = 80;
+
+  const centerX = 500;
+  const xOrchestrator = centerX - boxW / 2;
+  const xMemory = centerX - boxW / 2;
+  const xLLM = centerX - boxW / 2;
+  const xOutput = centerX - boxW / 2;
+
+  const yUser = startY;
+  const yOrchestrator = yUser + mainBoxH + gapY;
+  const yMemory = yOrchestrator + mainBoxH + gapY - 20;
+  const yLLM = yOrchestrator;
+  const yTools = yOrchestrator;
+  const yOutput = yMemory + boxH + gapY;
+
+  const xToolsStart = xOrchestrator + boxW + gapX + 40;
+  const xTools1 = xToolsStart;
+  const xTools2 = xToolsStart;
+  const xTools3 = xToolsStart;
+  const yTools1 = yTools - 50;
+  const yTools2 = yTools + 10;
+  const yTools3 = yTools + 70;
+
+  return (
+    <Figure width={width} height={height} background={background} title="AI Agent Architecture">
+      <text x={70} y={44} fontSize={18} fontWeight={800} fill={theme.colors.text}>
+        {title}
+      </text>
+      <Label x={70} y={76} text={subtitle} fontSize={13} fill={theme.colors.subtleText} />
+
+      <Box x={centerX - boxW / 2} y={yUser} width={boxW} height={boxH} label={userInput} fill={theme.colors.panel} stroke={theme.colors.blue} />
+
+      <Box x={xOrchestrator} y={yOrchestrator} width={boxW} height={mainBoxH} label={orchestrator} fill={theme.colors.panel} stroke={theme.colors.teal} />
+
+      <Arrow x1={centerX} y1={yUser + boxH} x2={centerX} y2={yOrchestrator} />
+
+      <Box x={xLLM} y={yLLM} width={boxW} height={mainBoxH} label={llm} fill={theme.colors.panel} stroke={theme.colors.orange} />
+
+      <Arrow x1={xOrchestrator + boxW} y1={yOrchestrator + mainBoxH / 2} x2={xLLM} y2={yLLM + mainBoxH / 2} />
+      <DashedArrow x1={xLLM} y1={yLLM + mainBoxH / 2} x2={xOrchestrator + boxW} y2={yOrchestrator + mainBoxH / 2} stroke={theme.colors.subtleText} />
+
+      <Box x={xTools1} y={yTools1} width={boxW - 20} height={50} label={tools1} fill="#F3F4F6" stroke="#9CA3AF" />
+      <Box x={xTools2} y={yTools2} width={boxW - 20} height={50} label={tools2} fill="#F3F4F6" stroke="#9CA3AF" />
+      <Box x={xTools3} y={yTools3} width={boxW - 20} height={50} label={tools3} fill="#F3F4F6" stroke="#9CA3AF" />
+
+      <Arrow x1={xLLM + boxW} y1={yLLM + 25} x2={xTools1} y2={yTools1 + 25} />
+      <Arrow x1={xLLM + boxW} y1={yLLM + mainBoxH / 2} x2={xTools2} y2={yTools2 + 25} />
+      <Arrow x1={xLLM + boxW} y1={yLLM + mainBoxH - 25} x2={xTools3} y2={yTools3 + 25} />
+
+      <DashedArrow x1={xTools1} y1={yTools1 + 25} x2={xLLM + boxW} y2={yLLM + 25} stroke={theme.colors.subtleText} />
+      <DashedArrow x1={xTools2} y1={yTools2 + 25} x2={xLLM + boxW} y2={yLLM + mainBoxH / 2} stroke={theme.colors.subtleText} />
+      <DashedArrow x1={xTools3} y1={yTools3 + 25} x2={xLLM + boxW} y2={yLLM + mainBoxH - 25} stroke={theme.colors.subtleText} />
+
+      <Box x={xMemory} y={yMemory} width={boxW} height={boxH} label={memory} fill={theme.colors.panel} stroke={theme.colors.red} />
+
+      <Arrow x1={xOrchestrator + boxW / 2} y1={yOrchestrator + mainBoxH} x2={xMemory + boxW / 2} y2={yMemory} />
+      <DashedArrow x1={xMemory + boxW / 2} y1={yMemory + boxH} x2={xOrchestrator + boxW / 2} y2={yOrchestrator + mainBoxH} stroke={theme.colors.subtleText} />
+
+      <Box x={xOutput} y={yOutput} width={boxW} height={boxH} label={output} fill={theme.colors.panel} stroke={theme.colors.teal} />
+
+      <Arrow x1={centerX} y1={yMemory + boxH} x2={centerX} y2={yOutput} />
+
+      <Callout x={70} y={yOutput + boxH + 30} width={boxW + 100} height={44} text={notes} />
+    </Figure>
+  );
+}

package/templates/example/projects/example/figures/equation.tsx

@@ -0,0 +1,29 @@
+import { Figure } from '@/framework/Figure';
+import type { FigureComponentBaseProps } from '@/framework/types';
+import { theme } from '@/framework/theme';
+import { MathSvg } from '@/framework/math/MathSvg';
+
+export default function EquationFigure({
+  width,
+  height,
+  background,
+  title = 'Example: equation (MathJax SVG)',
+  subtitle = 'Uses MathJax tex2svg (pure SVG; no foreignObject)',
+  tex = String.raw`E=mc^2`
+}: FigureComponentBaseProps & { title?: string; subtitle?: string; tex?: string }) {
+  return (
+    <Figure width={width} height={height} background={background} title="Equation">
+      <text x={40} y={54} fontSize={18} fontWeight={800} fill={theme.colors.text}>
+        {title}
+      </text>
+      <text x={40} y={84} fontSize={13} fill={theme.colors.subtleText}>
+        {subtitle}
+      </text>
+
+      <g transform={`translate(40, 120)`}>
+        <rect x={0} y={0} width={width - 80} height={height - 160} rx={theme.radii.md} fill={theme.colors.panel} />
+        <MathSvg tex={tex} x={24} y={40} scale={1.1} />
+      </g>
+    </Figure>
+  );
+}

package/templates/example/projects/example/figures/hello-world.tsx

@@ -0,0 +1,45 @@
+import { Figure } from '@/framework/Figure';
+import type { FigureComponentBaseProps } from '@/framework/types';
+import { theme } from '@/framework/theme';
+
+export default function HelloWorldFigure({
+  width,
+  height,
+  background,
+  heading = 'Imagine',
+  subtitle = 'React components → scientific figures (PNG + SVG)',
+  tipHeading = 'Tips',
+  tip1 = 'Edit the figure component and watch this update live.',
+  tip2 = 'Use the Controls panel to adjust text, then export via `npm run render`.'
+}: FigureComponentBaseProps & {
+  heading?: string;
+  subtitle?: string;
+  tipHeading?: string;
+  tip1?: string;
+  tip2?: string;
+}) {
+  return (
+    <Figure width={width} height={height} background={background} title="Hello world">
+      <g>
+        <text x={40} y={70} fontSize={34} fontWeight={700} fill={theme.colors.text}>
+          {heading}
+        </text>
+        <text x={40} y={110} fontSize={16} fill={theme.colors.subtleText}>
+          {subtitle}
+        </text>
+
+        <rect x={40} y={150} width={width - 80} height={height - 190} rx={theme.radii.md} fill={theme.colors.panel} />
+
+        <text x={70} y={210} fontSize={16} fill={theme.colors.text} fontWeight={600}>
+          {tipHeading}
+        </text>
+        <text x={70} y={245} fontSize={14} fill={theme.colors.text}>
+          • {tip1}
+        </text>
+        <text x={70} y={270} fontSize={14} fill={theme.colors.text}>
+          • {tip2}
+        </text>
+      </g>
+    </Figure>
+  );
+}

package/templates/example/projects/example/figures/line-chart.tsx

@@ -0,0 +1,80 @@
+import { Figure } from '@/framework/Figure';
+import type { FigureComponentBaseProps } from '@/framework/types';
+import { theme } from '@/framework/theme';
+import type { Point } from '@/framework/charts/scales';
+import { extentX, extentY, linearScale } from '@/framework/charts/scales';
+import { AxisBottom, AxisLeft } from '@/framework/charts/Axes';
+import { GridLines } from '@/framework/charts/GridLines';
+import { LineSeries, ScatterSeries } from '@/framework/charts/Series';
+import { Legend } from '@/framework/charts/Legend';
+
+const dataA: Point[] = [
+  { x: 0, y: 0.2 },
+  { x: 1, y: 0.9 },
+  { x: 2, y: 1.3 },
+  { x: 3, y: 1.8 },
+  { x: 4, y: 2.2 },
+  { x: 5, y: 2.4 }
+];
+
+const dataB: Point[] = [
+  { x: 0, y: 0.4 },
+  { x: 1, y: 0.7 },
+  { x: 2, y: 1.1 },
+  { x: 3, y: 1.5 },
+  { x: 4, y: 1.9 },
+  { x: 5, y: 2.15 }
+];
+
+export default function LineChartFigure({
+  width,
+  height,
+  background,
+  title = 'Example: signal over time',
+  xLabel = 'Time (a.u.)',
+  yLabel = 'Response',
+  seriesALabel = 'Condition A',
+  seriesBLabel = 'Condition B'
+}: FigureComponentBaseProps & {
+  title?: string;
+  xLabel?: string;
+  yLabel?: string;
+  seriesALabel?: string;
+  seriesBLabel?: string;
+}) {
+  const margin = { left: 70, top: 40, right: 20, bottom: 60 };
+  const plotW = width - margin.left - margin.right;
+  const plotH = height - margin.top - margin.bottom;
+  const all = [...dataA, ...dataB];
+  const xScale = linearScale(extentX(all), [0, plotW]);
+  const yScale = linearScale(extentY(all), [plotH, 0]);
+
+  return (
+    <Figure width={width} height={height} background={background} title="Line chart">
+      <text x={margin.left} y={22} fontSize={14} fill={theme.colors.text} fontWeight={700}>
+        {title}
+      </text>
+
+      <g transform={`translate(${margin.left}, ${margin.top})`}>
+        <rect x={0} y={0} width={plotW} height={plotH} fill="transparent" />
+        <GridLines x={0} y={0} width={plotW} height={plotH} xScale={xScale} yScale={yScale} />
+        <LineSeries xScale={xScale} yScale={yScale} data={dataA} stroke={theme.colors.blue} />
+        <ScatterSeries xScale={xScale} yScale={yScale} data={dataA} fill={theme.colors.blue} />
+        <LineSeries xScale={xScale} yScale={yScale} data={dataB} stroke={theme.colors.teal} />
+        <ScatterSeries xScale={xScale} yScale={yScale} data={dataB} fill={theme.colors.teal} />
+      </g>
+
+      <AxisLeft x={margin.left} y={margin.top} scale={yScale} label={yLabel} />
+      <AxisBottom x={margin.left} y={height - margin.bottom} scale={xScale} label={xLabel} />
+
+      <Legend
+        x={width - 210}
+        y={48}
+        items={[
+          { label: seriesALabel, color: theme.colors.blue },
+          { label: seriesBLabel, color: theme.colors.teal }
+        ]}
+      />
+    </Figure>
+  );
+}

package/templates/example/projects/example/figures/multi-panel.tsx

@@ -0,0 +1,51 @@
+import { Figure } from '@/framework/Figure';
+import type { FigureComponentBaseProps } from '@/framework/types';
+import { theme } from '@/framework/theme';
+import { PanelGrid } from '@/framework/layout/PanelGrid';
+import { Box, Label } from '@/framework/diagrams/primitives';
+
+export default function MultiPanelFigure({
+  width,
+  height,
+  background,
+  title = 'Example: multi-panel figure',
+  subtitle = 'Use PanelGrid to compose sub-panels (a, b, c…)',
+  panelA = 'Panel: raw',
+  panelB = 'Panel: processed',
+  panelC = 'Panel: ablation',
+  panelD = 'Panel: summary'
+}: FigureComponentBaseProps & {
+  title?: string;
+  subtitle?: string;
+  panelA?: string;
+  panelB?: string;
+  panelC?: string;
+  panelD?: string;
+}) {
+  const panelW = 440;
+  const panelH = 210;
+
+  return (
+    <Figure width={width} height={height} background={background} title="Multi-panel layout">
+      <text x={70} y={44} fontSize={18} fontWeight={800} fill={theme.colors.text}>
+        {title}
+      </text>
+      <Label x={70} y={76} text={subtitle} fontSize={13} fill={theme.colors.subtleText} />
+
+      <PanelGrid x={40} y={90} width={width - 80} height={height - 120} rows={2} cols={2}>
+        <g>
+          <Box x={0} y={0} width={panelW} height={panelH} label={panelA} fill="#EEF2FF" stroke="#6366F1" />
+        </g>
+        <g>
+          <Box x={0} y={0} width={panelW} height={panelH} label={panelB} fill="#ECFDF5" stroke="#10B981" />
+        </g>
+        <g>
+          <Box x={0} y={0} width={panelW} height={panelH} label={panelC} fill="#FFFBEB" stroke="#F59E0B" />
+        </g>
+        <g>
+          <Box x={0} y={0} width={panelW} height={panelH} label={panelD} fill="#FEF2F2" stroke="#EF4444" />
+        </g>
+      </PanelGrid>
+    </Figure>
+  );
+}

package/templates/example/projects/example/figures/pipeline-diagram.tsx

@@ -0,0 +1,51 @@
+import { Figure } from '@/framework/Figure';
+import type { FigureComponentBaseProps } from '@/framework/types';
+import { Box, Callout, Label, Arrow } from '@/framework/diagrams/primitives';
+import { theme } from '@/framework/theme';
+
+export default function PipelineDiagramFigure({
+  width,
+  height,
+  background,
+  title = 'Example: analysis pipeline',
+  subtitle = 'Pure-SVG boxes/arrows + theme tokens',
+  step1 = 'Ingest',
+  step2 = 'Process',
+  step3 = 'Publish',
+  callout = 'Edit labels in Controls'
+}: FigureComponentBaseProps & {
+  title?: string;
+  subtitle?: string;
+  step1?: string;
+  step2?: string;
+  step3?: string;
+  callout?: string;
+}) {
+  const y = 120;
+  const boxW = 220;
+  const boxH = 86;
+  const gap = 70;
+  const startX = 70;
+
+  const x1 = startX;
+  const x2 = x1 + boxW + gap;
+  const x3 = x2 + boxW + gap;
+
+  return (
+    <Figure width={width} height={height} background={background} title="Pipeline diagram">
+      <text x={70} y={44} fontSize={18} fontWeight={800} fill={theme.colors.text}>
+        {title}
+      </text>
+      <Label x={70} y={76} text={subtitle} fontSize={13} fill={theme.colors.subtleText} />
+
+      <Box x={x1} y={y} width={boxW} height={boxH} label={step1} />
+      <Box x={x2} y={y} width={boxW} height={boxH} label={step2} />
+      <Box x={x3} y={y} width={boxW} height={boxH} label={step3} />
+
+      <Arrow x1={x1 + boxW} y1={y + boxH / 2} x2={x2} y2={y + boxH / 2} />
+      <Arrow x1={x2 + boxW} y1={y + boxH / 2} x2={x3} y2={y + boxH / 2} />
+
+      <Callout x={x2 - 10} y={y + boxH + 40} width={boxW + 20} height={44} text={callout} />
+    </Figure>
+  );
+}