@misoto22/design 0.6.0 → 0.7.0

package/dist/agent/index.md

@@ -1,4 +1,4 @@
-# @misoto22/design 0.6.0
+# @misoto22/design 0.7.0
 
 > Monochrome design system: portable CSS tokens and accessible React 19
 > primitives. Components ship compiled — import them, do not copy them.
@@ -129,3 +129,17 @@ re-pointed in a stylesheet.
 - **Histogram** — The shape of one distribution.
 - **WaterfallChart** — How a total got from one figure to another.
 - **Facet** — The same chart once per group, on one shared scale.
+
+### Diagrams
+
+- **ArchitectureFigure** — A component map: services, datastores, trust boundaries, and what talks to what.
+- **WorkflowFigure** — A process in lanes and phases, with the main path drawn heavier than its branches.
+- **SequenceFigure** — A call chain over time: who asks whom, in what order, and what comes back.
+- **DataflowFigure** — A pipeline: where data comes from, what happens to it, and who ends up with it.
+- **LifecycleFigure** — A state machine: what something can be, and what moves it between states.
+- **DiagramCanvas** — A frame that a picture larger than it can be panned and zoomed inside.
+- **DiagramToolbar** — A bar of actions belonging to the surface underneath them.
+- **DiagramExportMenu** — Taking the figure off the page: PNG, JPEG, WebP, SVG and a 1200×630 share card.
+- **DiagramInspector** — What the reader just picked, written out beside the picture.
+- **DiagramMinimap** — Where you are in something bigger than the window.
+- **DiagramLegend** — The key: which drawn form means which kind of thing.

package/dist/charts/index.d.ts

@@ -31,11 +31,12 @@ export { SONIFY_DEFAULTS, SonifyController, SonifyOptions, SonifyPoint, SonifySe
 export { ChartSonifyButton, ChartSonifyButtonProps, Sonify, SonifyAlign, SonifyProps, UseSonifyOptions, UseSonifyResult, chartSonifySeries, useChartSonifySeries, useSonify } from './lib/sonify-control.js';
 export { ChartControls, ChartControlsProps, ChartExportFormat, ChartToolbar, ChartToolbarProps, Toolbar, ToolbarProps } from './lib/toolbar.js';
 export { ChartZoom, ChartZoomOptions, ChartZoomSurface, ChartZoomSurfaceProps, clampWindow, panWindow, useChartZoom, zoomWindow } from './lib/zoom.js';
-export { ChartPngOptions, chartToCsv, chartToPng, downloadBlob, exportFilename } from './lib/export.js';
+export { ChartPngOptions, chartToCsv, chartToPng, exportFilename } from './lib/export.js';
 export { ANNOTATION_LAYER, Annotation, AnnotationProps, AnnotationWeight, ReferenceBand, ReferenceBandProps, ReferenceLine, ReferenceLineProps } from './lib/annotations.js';
 export { ValueLabelMode, Values, ValuesProps } from './lib/values.js';
 export { ChartEmpty, ChartEmptyProps } from './lib/empty.js';
 export { NumberFormatOptions, NumberStyle, defaultTick, formatNumber } from './lib/format.js';
+export { downloadBlob } from '../lib/svg-export.js';
 import 'react';
 import 'recharts';
 import 'recharts/types/component/DefaultTooltipContent';

package/dist/charts/lib/export.d.ts

@@ -1,6 +1,22 @@
 import { ChartColumn } from './figure.js';
+export { downloadBlob } from '../../lib/svg-export.js';
 import 'react';
 
+/**
+ * Taking a chart off the page: a PNG of the plot, or a CSV of its rows.
+ *
+ * The general half — walking a live tree to inline its resolved paint,
+ * serialising a standalone SVG document, rasterising one through a canvas — is
+ * not chart-shaped at all, and lives in `src/lib/svg-export.ts` shared with the
+ * diagrams entry. What is left here is what only a Recharts chart knows: which
+ * `<svg>` in the subtree is the plot, what a row of chart data looks like as a
+ * CSV record, and that the ground behind an exported plot is `--chart-surface`.
+ *
+ * Nothing here touches the DOM at module scope. Every browser API is reached
+ * for inside a function body, so this module is safe to import from a server
+ * component and only fails when a consumer actually asks for a file on a
+ * server, which is a call that cannot succeed anywhere.
+ */
 interface ChartPngOptions {
     /**
      * Printed above the plot in the exported image. Pass the figure's title: a
@@ -21,46 +37,27 @@ interface ChartPngOptions {
 /**
  * The chart's `<svg>`, rasterised to a PNG blob.
  *
- * ## The problem this function exists to solve
- *
- * Serialising the `<svg>` and handing it to an `<img>` puts it in a document
- * of its own. That document has none of the page's stylesheets, so every
- * `var(--color-desktop-0)`, `var(--chart-fill)` and `var(--ink)` in the markup
- * resolves to nothing — and a paint that resolves to nothing is not a fallback
- * colour, it is an invisible mark. Serialise a chart naively and you get an
- * empty rectangle with axes on it.
- *
- * ## The solution
+ * Three chart-specific decisions and nothing else. `serializeSvg` does the
+ * work, and its comment carries the reason a naive `XMLSerializer` export of a
+ * themed chart comes out as an empty rectangle with axes on it.
  *
- * Walk the live tree and the clone in step, and on every node write
- * `getComputedStyle`'s answer for the painted properties into an inline
- * `style`. Computed values have already had `var()` substituted by the engine,
- * so `fill: var(--color-desktop-0)` arrives as `fill: rgb(16, 16, 16)` — and,
- * because the walk reads the LIVE element, it reads it under whichever theme
- * is currently applied. Light and dark come out right for free, with no theme
- * argument anywhere in this file.
- *
- * `<stop>` elements are walked too, which is the half that is easy to miss: a
- * series is painted `fill="url(#…-colors-desktop)"`, the url survives
- * serialisation because the gradient is inside the same `<svg>`, and it is the
- * gradient's STOPS that carry the custom properties.
+ * 1. WHICH `<svg>` — the plot, not the first one in the subtree. See
+ *    `findPlotSvg`.
+ * 2. WHAT GROUND — `--chart-surface`, resolved against the live element, which
+ *    is what makes a dark-mode export come out dark rather than transparent.
+ * 3. WHAT INK AND FACE for the caption — `--ink` and the element's own
+ *    resolved family, so the exported title matches the page it came from.
  *
  * ## What this cannot capture, honestly
  *
  * - **Anything drawn in HTML.** The legend, the tooltip, the brush strip and
  *   the hidden data table are DOM, not SVG. The PNG is the plot.
- * - **Web fonts.** The isolated document cannot fetch the page's `@font-face`
- *   sources, so text is rasterised in whatever the resolved family stack finds
- *   locally. Type metrics will differ from the screen.
- * - **Cross-origin images.** A chart with an external `<image>` in it taints
- *   the canvas and `toBlob` throws; there is no way around it from script.
- * - **The exact rendering.** This is the browser's SVG rasteriser re-drawing
- *   the markup, not a screenshot. Antialiasing, `backdrop-filter` and any
- *   effect a page stylesheet applied from outside the `<svg>` are not in it.
+ * - **Web fonts, cross-origin images, and the exact rendering.** See
+ *   `serializeSvg` and `rasterize`.
  *
  * @example
  * const blob = await chartToPng(plotRef.current, { title: 'Visitors per month' })
- * downloadBlob(blob, 'visitors-per-month.png')
+ * downloadBlob(blob, exportFilename('Visitors per month', 'png'))
  */
 declare function chartToPng(element: HTMLElement | SVGSVGElement, options?: ChartPngOptions): Promise<Blob>;
 /**
@@ -83,21 +80,14 @@ declare function chartToPng(element: HTMLElement | SVGSVGElement, options?: Char
  * downloadBlob(new Blob([csv], { type: 'text/csv;charset=utf-8' }), 'visitors.csv')
  */
 declare function chartToCsv(rows: Record<string, unknown>[], columns: ChartColumn[]): string;
-/**
- * Hands a blob to the browser as a download.
- *
- * Throws rather than no-oping without a `document`: a download is something a
- * person just asked for, and a silent return would look to them like a click
- * that did nothing.
- */
-declare function downloadBlob(blob: Blob, filename: string): void;
+
 /**
  * A figure's title as a filename.
  *
- * Lowercase, ASCII-safe and hyphenated, because a downloaded file crosses into
- * shells, zip archives and Windows paths where a title's spaces and slashes
- * are someone else's problem.
+ * The shared slugger, with `chart` rather than `figure` as the fallback for a
+ * title that slugs to nothing — an export from this entry is a chart, and the
+ * name a reader finds in their downloads folder should say so.
  */
 declare function exportFilename(title: string, extension: string): string;
 
-export { type ChartPngOptions, chartToCsv, chartToPng, downloadBlob, exportFilename };
+export { type ChartPngOptions, chartToCsv, chartToPng, exportFilename };

package/dist/charts/lib/export.js

@@ -1,154 +1,28 @@
-const SVG_NS = "http://www.w3.org/2000/svg";
-const PAINTED_PROPERTIES = [
-  "display",
-  "visibility",
-  "opacity",
-  "color",
-  "fill",
-  "fill-opacity",
-  "fill-rule",
-  "stroke",
-  "stroke-opacity",
-  "stroke-width",
-  "stroke-linecap",
-  "stroke-linejoin",
-  "stroke-dasharray",
-  "stroke-dashoffset",
-  "stop-color",
-  "stop-opacity",
-  "flood-color",
-  "flood-opacity",
-  "mask",
-  "filter",
-  "clip-path",
-  "clip-rule",
-  "paint-order",
-  "mix-blend-mode",
-  "shape-rendering",
-  "text-anchor",
-  "dominant-baseline",
-  "font-family",
-  "font-size",
-  "font-style",
-  "font-weight",
-  "letter-spacing",
-  "text-transform"
-];
+import {
+  downloadBlob,
+  exportFilename as figureFilename,
+  rasterize,
+  readToken,
+  serializeSvg
+} from "../../lib/svg-export.js";
 async function chartToPng(element, options = {}) {
   const { title, scale = 2, background, padding = 16 } = options;
   const svg = findPlotSvg(element);
   if (!svg) throw new Error("chartToPng: found no <svg> to export inside the element it was given");
-  const box = svg.getBoundingClientRect();
-  const width = Math.ceil(box.width);
-  const height = Math.ceil(box.height);
-  if (width === 0 || height === 0) {
-    throw new Error("chartToPng: the chart has no measured size yet \u2014 export it after it renders");
-  }
-  const clone = svg.cloneNode(true);
-  inlinePaint(svg, clone);
-  clone.setAttribute("width", String(width));
-  clone.setAttribute("height", String(height));
-  const titleBand = title ? 30 : 0;
-  const totalWidth = width + padding * 2;
-  const totalHeight = height + padding * 2 + titleBand;
-  const page = document.createElementNS(SVG_NS, "svg");
-  page.setAttribute("xmlns", SVG_NS);
-  page.setAttribute("width", String(totalWidth));
-  page.setAttribute("height", String(totalHeight));
-  page.setAttribute("viewBox", `0 0 ${totalWidth} ${totalHeight}`);
-  const plate = document.createElementNS(SVG_NS, "rect");
-  plate.setAttribute("width", String(totalWidth));
-  plate.setAttribute("height", String(totalHeight));
-  plate.setAttribute("fill", background ?? readToken(element, "--chart-surface", "#ffffff"));
-  page.append(plate);
-  if (title) {
-    const caption = document.createElementNS(SVG_NS, "text");
-    caption.setAttribute("x", String(padding));
-    caption.setAttribute("y", String(padding + 14));
-    caption.setAttribute("fill", readToken(element, "--ink", "#101010"));
-    caption.setAttribute("font-size", "13");
-    caption.setAttribute("font-weight", "500");
-    caption.setAttribute("font-family", getComputedStyle(element).fontFamily || "sans-serif");
-    caption.textContent = title;
-    page.append(caption);
-  }
-  const group = document.createElementNS(SVG_NS, "g");
-  group.setAttribute("transform", `translate(${padding}, ${padding + titleBand})`);
-  group.append(clone);
-  page.append(group);
-  const markup = new XMLSerializer().serializeToString(page);
-  const url = URL.createObjectURL(
-    new Blob([`<?xml version="1.0" encoding="UTF-8"?>
-${markup}`], {
-      type: "image/svg+xml;charset=utf-8"
-    })
-  );
-  try {
-    const image = await loadImage(url);
-    const canvas = document.createElement("canvas");
-    canvas.width = Math.ceil(totalWidth * scale);
-    canvas.height = Math.ceil(totalHeight * scale);
-    const context = canvas.getContext("2d");
-    if (!context) throw new Error("chartToPng: this browser gave back no 2D canvas context");
-    context.drawImage(image, 0, 0, canvas.width, canvas.height);
-    return await canvasToBlob(canvas);
-  } finally {
-    URL.revokeObjectURL(url);
-  }
+  const markup = serializeSvg(svg, {
+    padding,
+    background: background ?? readToken(element, "--chart-surface", "#ffffff"),
+    title,
+    titleColor: readToken(element, "--ink", "#101010"),
+    titleFont: getComputedStyle(element).fontFamily || "sans-serif"
+  });
+  return rasterize(markup, "png", { scale });
 }
 function findPlotSvg(element) {
   if (element.tagName.toLowerCase() === "svg") return element;
   const scope = element.querySelector('[data-slot="chart"]') ?? element;
   return scope.querySelector("svg.recharts-surface") ?? scope.querySelector("svg");
 }
-function inlinePaint(live, clone) {
-  const computed = getComputedStyle(live);
-  let css = "";
-  for (const property of PAINTED_PROPERTIES) {
-    const value = computed.getPropertyValue(property);
-    if (value) css += `${property}:${value};`;
-  }
-  if (css) clone.setAttribute("style", css);
-  const children = live.children;
-  const clones = clone.children;
-  for (let index = 0; index < children.length; index += 1) {
-    const liveChild = children[index];
-    const cloneChild = clones[index];
-    if (liveChild && cloneChild) inlinePaint(liveChild, cloneChild);
-  }
-}
-function readToken(element, name, fallback) {
-  const value = getComputedStyle(element).getPropertyValue(name).trim();
-  return value && !value.includes("var(") ? value : fallback;
-}
-function loadImage(url) {
-  return new Promise((resolve, reject) => {
-    const image = new Image();
-    image.addEventListener("load", () => resolve(image));
-    image.addEventListener(
-      "error",
-      () => reject(new Error("chartToPng: the browser refused to decode the serialised chart"))
-    );
-    image.src = url;
-  });
-}
-function canvasToBlob(canvas) {
-  return new Promise((resolve, reject) => {
-    try {
-      canvas.toBlob((blob) => {
-        if (blob) resolve(blob);
-        else reject(new Error("chartToPng: the canvas produced no PNG data"));
-      }, "image/png");
-    } catch (cause) {
-      reject(
-        new Error(
-          "chartToPng: the canvas is tainted, which means the chart contains a cross-origin image",
-          { cause }
-        )
-      );
-    }
-  });
-}
 const UTF8_BOM = "\uFEFF";
 function chartToCsv(rows, columns) {
   if (columns.length === 0) return UTF8_BOM;
@@ -176,24 +50,8 @@ function cellText(value) {
   if (value instanceof Date) return value.toISOString();
   return "";
 }
-function downloadBlob(blob, filename) {
-  if (typeof document === "undefined") {
-    throw new Error("downloadBlob: needs a browser document \u2014 call it from an event handler");
-  }
-  const url = URL.createObjectURL(blob);
-  const anchor = document.createElement("a");
-  anchor.href = url;
-  anchor.download = filename;
-  anchor.rel = "noopener";
-  anchor.style.display = "none";
-  document.body.append(anchor);
-  anchor.click();
-  anchor.remove();
-  setTimeout(() => URL.revokeObjectURL(url), 0);
-}
 function exportFilename(title, extension) {
-  const slug = title.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
-  return `${slug || "chart"}.${extension}`;
+  return figureFilename(title, extension, "chart");
 }
 export {
   chartToCsv,

package/dist/charts/lib/export.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/charts/lib/export.ts"],"sourcesContent":["import type { ChartColumn } from './figure'\n\n/**\n * Taking a chart off the page: a PNG of the plot, or a CSV of its rows.\n *\n * Nothing here touches the DOM at module scope. Every browser API — `document`,\n * `canvas`, `URL.createObjectURL` — is reached for inside a function body, so\n * this module is safe to import from a server component and only fails when a\n * consumer actually asks for a file on a server, which is a call that cannot\n * succeed anywhere.\n */\n\nconst SVG_NS = 'http://www.w3.org/2000/svg'\n\n/**\n * The properties copied from the live DOM onto the serialised clone.\n *\n * Paint, geometry-adjacent paint, and type. Layout is deliberately absent: an\n * SVG's geometry is in its attributes, which the clone already carries, and\n * copying computed `width`/`height`/`transform` onto every node would fight\n * them.\n */\nconst PAINTED_PROPERTIES = [\n  'display',\n  'visibility',\n  'opacity',\n  'color',\n  'fill',\n  'fill-opacity',\n  'fill-rule',\n  'stroke',\n  'stroke-opacity',\n  'stroke-width',\n  'stroke-linecap',\n  'stroke-linejoin',\n  'stroke-dasharray',\n  'stroke-dashoffset',\n  'stop-color',\n  'stop-opacity',\n  'flood-color',\n  'flood-opacity',\n  'mask',\n  'filter',\n  'clip-path',\n  'clip-rule',\n  'paint-order',\n  'mix-blend-mode',\n  'shape-rendering',\n  'text-anchor',\n  'dominant-baseline',\n  'font-family',\n  'font-size',\n  'font-style',\n  'font-weight',\n  'letter-spacing',\n  'text-transform',\n] as const\n\nexport interface ChartPngOptions {\n  /**\n   * Printed above the plot in the exported image. Pass the figure's title: a\n   * PNG travels into a slide deck with none of the page's context around it,\n   * and an unnamed plot in a deck is a plot nobody can cite.\n   */\n  title?: string\n  /** Multiplier on the on-screen size. 2 is a retina-sharp export. */\n  scale?: number\n  /**\n   * Painted behind the plot. Defaults to the resolved `--chart-surface`, which\n   * is what makes a dark-mode export come out dark rather than transparent.\n   */\n  background?: string\n  /** Space around the plot, in CSS pixels. */\n  padding?: number\n}\n\n/**\n * The chart's `<svg>`, rasterised to a PNG blob.\n *\n * ## The problem this function exists to solve\n *\n * Serialising the `<svg>` and handing it to an `<img>` puts it in a document\n * of its own. That document has none of the page's stylesheets, so every\n * `var(--color-desktop-0)`, `var(--chart-fill)` and `var(--ink)` in the markup\n * resolves to nothing — and a paint that resolves to nothing is not a fallback\n * colour, it is an invisible mark. Serialise a chart naively and you get an\n * empty rectangle with axes on it.\n *\n * ## The solution\n *\n * Walk the live tree and the clone in step, and on every node write\n * `getComputedStyle`'s answer for the painted properties into an inline\n * `style`. Computed values have already had `var()` substituted by the engine,\n * so `fill: var(--color-desktop-0)` arrives as `fill: rgb(16, 16, 16)` — and,\n * because the walk reads the LIVE element, it reads it under whichever theme\n * is currently applied. Light and dark come out right for free, with no theme\n * argument anywhere in this file.\n *\n * `<stop>` elements are walked too, which is the half that is easy to miss: a\n * series is painted `fill=\"url(#…-colors-desktop)\"`, the url survives\n * serialisation because the gradient is inside the same `<svg>`, and it is the\n * gradient's STOPS that carry the custom properties.\n *\n * ## What this cannot capture, honestly\n *\n * - **Anything drawn in HTML.** The legend, the tooltip, the brush strip and\n *   the hidden data table are DOM, not SVG. The PNG is the plot.\n * - **Web fonts.** The isolated document cannot fetch the page's `@font-face`\n *   sources, so text is rasterised in whatever the resolved family stack finds\n *   locally. Type metrics will differ from the screen.\n * - **Cross-origin images.** A chart with an external `<image>` in it taints\n *   the canvas and `toBlob` throws; there is no way around it from script.\n * - **The exact rendering.** This is the browser's SVG rasteriser re-drawing\n *   the markup, not a screenshot. Antialiasing, `backdrop-filter` and any\n *   effect a page stylesheet applied from outside the `<svg>` are not in it.\n *\n * @example\n * const blob = await chartToPng(plotRef.current, { title: 'Visitors per month' })\n * downloadBlob(blob, 'visitors-per-month.png')\n */\nexport async function chartToPng(\n  element: HTMLElement | SVGSVGElement,\n  options: ChartPngOptions = {},\n): Promise<Blob> {\n  const { title, scale = 2, background, padding = 16 } = options\n\n  const svg = findPlotSvg(element)\n  if (!svg) throw new Error('chartToPng: found no <svg> to export inside the element it was given')\n\n  const box = svg.getBoundingClientRect()\n  const width = Math.ceil(box.width)\n  const height = Math.ceil(box.height)\n  if (width === 0 || height === 0) {\n    // A chart that has not been measured yet has no size to export. Silently\n    // producing a 0×0 PNG would look like a broken download rather than a\n    // too-early call.\n    throw new Error('chartToPng: the chart has no measured size yet — export it after it renders')\n  }\n\n  const clone = svg.cloneNode(true) as SVGSVGElement\n  inlinePaint(svg, clone)\n  clone.setAttribute('width', String(width))\n  clone.setAttribute('height', String(height))\n\n  const titleBand = title ? 30 : 0\n  const totalWidth = width + padding * 2\n  const totalHeight = height + padding * 2 + titleBand\n\n  const page = document.createElementNS(SVG_NS, 'svg')\n  page.setAttribute('xmlns', SVG_NS)\n  page.setAttribute('width', String(totalWidth))\n  page.setAttribute('height', String(totalHeight))\n  page.setAttribute('viewBox', `0 0 ${totalWidth} ${totalHeight}`)\n\n  const plate = document.createElementNS(SVG_NS, 'rect')\n  plate.setAttribute('width', String(totalWidth))\n  plate.setAttribute('height', String(totalHeight))\n  plate.setAttribute('fill', background ?? readToken(element, '--chart-surface', '#ffffff'))\n  page.append(plate)\n\n  if (title) {\n    const caption = document.createElementNS(SVG_NS, 'text')\n    caption.setAttribute('x', String(padding))\n    caption.setAttribute('y', String(padding + 14))\n    caption.setAttribute('fill', readToken(element, '--ink', '#101010'))\n    caption.setAttribute('font-size', '13')\n    caption.setAttribute('font-weight', '500')\n    caption.setAttribute('font-family', getComputedStyle(element).fontFamily || 'sans-serif')\n    caption.textContent = title\n    page.append(caption)\n  }\n\n  const group = document.createElementNS(SVG_NS, 'g')\n  group.setAttribute('transform', `translate(${padding}, ${padding + titleBand})`)\n  group.append(clone)\n  page.append(group)\n\n  const markup = new XMLSerializer().serializeToString(page)\n  const url = URL.createObjectURL(\n    new Blob([`<?xml version=\"1.0\" encoding=\"UTF-8\"?>\\n${markup}`], {\n      type: 'image/svg+xml;charset=utf-8',\n    }),\n  )\n\n  try {\n    const image = await loadImage(url)\n    const canvas = document.createElement('canvas')\n    canvas.width = Math.ceil(totalWidth * scale)\n    canvas.height = Math.ceil(totalHeight * scale)\n\n    const context = canvas.getContext('2d')\n    if (!context) throw new Error('chartToPng: this browser gave back no 2D canvas context')\n    context.drawImage(image, 0, 0, canvas.width, canvas.height)\n\n    return await canvasToBlob(canvas)\n  } finally {\n    URL.revokeObjectURL(url)\n  }\n}\n\n/**\n * The plot's `<svg>`, not the first `<svg>` in the subtree.\n *\n * The distinction matters because the toolbar sits inside the same wrapper and\n * every icon in it is an `<svg>`. Narrowing to the measured chart box first is\n * what stops an export of a chart from being a picture of a magnifying glass.\n */\nfunction findPlotSvg(element: HTMLElement | SVGSVGElement): SVGSVGElement | null {\n  if (element.tagName.toLowerCase() === 'svg') return element as SVGSVGElement\n  const scope = element.querySelector('[data-slot=\"chart\"]') ?? element\n  return scope.querySelector<SVGSVGElement>('svg.recharts-surface') ?? scope.querySelector('svg')\n}\n\n/** Copies the resolved paint of every node in `live` onto the matching node in `clone`. */\nfunction inlinePaint(live: Element, clone: Element): void {\n  const computed = getComputedStyle(live)\n  let css = ''\n  for (const property of PAINTED_PROPERTIES) {\n    const value = computed.getPropertyValue(property)\n    if (value) css += `${property}:${value};`\n  }\n  if (css) clone.setAttribute('style', css)\n\n  // The clone is a faithful deep copy, so child lists line up by index.\n  const children = live.children\n  const clones = clone.children\n  for (let index = 0; index < children.length; index += 1) {\n    const liveChild = children[index]\n    const cloneChild = clones[index]\n    if (liveChild && cloneChild) inlinePaint(liveChild, cloneChild)\n  }\n}\n\n/**\n * A custom property, resolved against the live element.\n *\n * `var()` inside a custom property is substituted at computed-value time, so\n * `--chart-surface: var(--paper)` reads back as a colour. The guard is for the\n * case where it did not — an unregistered name, or a value the engine left as\n * a token stream — because writing `var(--paper)` into a serialised SVG paints\n * nothing at all.\n */\nfunction readToken(element: Element, name: string, fallback: string): string {\n  const value = getComputedStyle(element).getPropertyValue(name).trim()\n  return value && !value.includes('var(') ? value : fallback\n}\n\nfunction loadImage(url: string): Promise<HTMLImageElement> {\n  return new Promise((resolve, reject) => {\n    const image = new Image()\n    image.addEventListener('load', () => resolve(image))\n    image.addEventListener('error', () =>\n      reject(new Error('chartToPng: the browser refused to decode the serialised chart')),\n    )\n    image.src = url\n  })\n}\n\nfunction canvasToBlob(canvas: HTMLCanvasElement): Promise<Blob> {\n  return new Promise((resolve, reject) => {\n    try {\n      canvas.toBlob((blob) => {\n        if (blob) resolve(blob)\n        else reject(new Error('chartToPng: the canvas produced no PNG data'))\n      }, 'image/png')\n    } catch (cause) {\n      // A cross-origin image anywhere in the plot taints the canvas and this\n      // throws SecurityError. Nothing in script can untaint it, so the honest\n      // move is to say which failure it was.\n      reject(\n        new Error(\n          'chartToPng: the canvas is tainted, which means the chart contains a cross-origin image',\n          { cause },\n        ),\n      )\n    }\n  })\n}\n\n/**\n * A UTF-8 byte order mark.\n *\n * Excel does not sniff encodings. Handed a CSV with no BOM it decodes the file\n * with the machine's legacy code page, so \"Müller\", \"東京\" and \"€\" arrive as\n * mojibake on most Windows installs — and the reader's conclusion is that the\n * export is broken, not that the encoding was guessed. The BOM is the only\n * in-band signal Excel honours, and every other tool skips it silently.\n */\nconst UTF8_BOM = '\\uFEFF'\n\n/**\n * The chart's rows as RFC 4180 CSV.\n *\n * Quotes a field only when it needs quoting — a comma, a double quote, or a\n * line break in it — doubles any quote inside, and separates records with CRLF\n * as the RFC requires rather than with the `\\n` a Unix habit would reach for.\n *\n * Numbers are written unformatted on purpose. `1,234` would need quoting and\n * would then land in the spreadsheet as text, which is the one thing a numeric\n * export must not do; formatting belongs to the chart, not to the file.\n *\n * A column's `label` is a `ReactNode`, so only a string or a number can be a\n * header. Anything else falls back to the column's key, which is a worse\n * header than the label but a better one than an empty cell.\n *\n * @example\n * const csv = chartToCsv(data, [{ key: 'desktop', label: 'Desktop' }])\n * downloadBlob(new Blob([csv], { type: 'text/csv;charset=utf-8' }), 'visitors.csv')\n */\nexport function chartToCsv(rows: Record<string, unknown>[], columns: ChartColumn[]): string {\n  if (columns.length === 0) return UTF8_BOM\n\n  const lines = [columns.map((column) => csvField(headerText(column))).join(',')]\n\n  for (const row of rows) {\n    lines.push(columns.map((column) => csvField(cellText(row[column.key]))).join(','))\n  }\n\n  // The RFC makes the last CRLF optional; writing it matches what a\n  // spreadsheet emits and keeps the file from ending mid-record in a terminal.\n  return `${UTF8_BOM}${lines.join('\\r\\n')}\\r\\n`\n}\n\n/** One field, quoted only when the RFC says it has to be. */\nfunction csvField(value: string): string {\n  if (!/[\",\\r\\n]/.test(value)) return value\n  return `\"${value.replace(/\"/g, '\"\"')}\"`\n}\n\n/** A column's header text, falling back to its key when the label is markup. */\nfunction headerText(column: ChartColumn): string {\n  const { label } = column\n  if (typeof label === 'string') return label\n  if (typeof label === 'number') return String(label)\n  return column.key\n}\n\n/** A cell value as text. Anything that is not a primitive reads as empty. */\nfunction cellText(value: unknown): string {\n  if (value === null || value === undefined) return ''\n  if (typeof value === 'number') return Number.isFinite(value) ? String(value) : ''\n  if (typeof value === 'string' || typeof value === 'boolean') return String(value)\n  if (value instanceof Date) return value.toISOString()\n  return ''\n}\n\n/**\n * Hands a blob to the browser as a download.\n *\n * Throws rather than no-oping without a `document`: a download is something a\n * person just asked for, and a silent return would look to them like a click\n * that did nothing.\n */\nexport function downloadBlob(blob: Blob, filename: string): void {\n  if (typeof document === 'undefined') {\n    throw new Error('downloadBlob: needs a browser document — call it from an event handler')\n  }\n\n  const url = URL.createObjectURL(blob)\n  const anchor = document.createElement('a')\n  anchor.href = url\n  anchor.download = filename\n  anchor.rel = 'noopener'\n  anchor.style.display = 'none'\n  document.body.append(anchor)\n  anchor.click()\n  anchor.remove()\n\n  // Revoking in the same tick cancels the download in Safari; one turn of the\n  // event loop is enough for the navigation to have started.\n  setTimeout(() => URL.revokeObjectURL(url), 0)\n}\n\n/**\n * A figure's title as a filename.\n *\n * Lowercase, ASCII-safe and hyphenated, because a downloaded file crosses into\n * shells, zip archives and Windows paths where a title's spaces and slashes\n * are someone else's problem.\n */\nexport function exportFilename(title: string, extension: string): string {\n  const slug = title\n    .toLowerCase()\n    .replace(/[^a-z0-9]+/g, '-')\n    .replace(/^-+|-+$/g, '')\n  return `${slug || 'chart'}.${extension}`\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/charts/lib/export.ts"],"sourcesContent":["import type { ChartColumn } from './figure'\nimport {\n  downloadBlob,\n  exportFilename as figureFilename,\n  rasterize,\n  readToken,\n  serializeSvg,\n} from '../../lib/svg-export'\n\n/**\n * Taking a chart off the page: a PNG of the plot, or a CSV of its rows.\n *\n * The general half — walking a live tree to inline its resolved paint,\n * serialising a standalone SVG document, rasterising one through a canvas — is\n * not chart-shaped at all, and lives in `src/lib/svg-export.ts` shared with the\n * diagrams entry. What is left here is what only a Recharts chart knows: which\n * `<svg>` in the subtree is the plot, what a row of chart data looks like as a\n * CSV record, and that the ground behind an exported plot is `--chart-surface`.\n *\n * Nothing here touches the DOM at module scope. Every browser API is reached\n * for inside a function body, so this module is safe to import from a server\n * component and only fails when a consumer actually asks for a file on a\n * server, which is a call that cannot succeed anywhere.\n */\n\nexport interface ChartPngOptions {\n  /**\n   * Printed above the plot in the exported image. Pass the figure's title: a\n   * PNG travels into a slide deck with none of the page's context around it,\n   * and an unnamed plot in a deck is a plot nobody can cite.\n   */\n  title?: string\n  /** Multiplier on the on-screen size. 2 is a retina-sharp export. */\n  scale?: number\n  /**\n   * Painted behind the plot. Defaults to the resolved `--chart-surface`, which\n   * is what makes a dark-mode export come out dark rather than transparent.\n   */\n  background?: string\n  /** Space around the plot, in CSS pixels. */\n  padding?: number\n}\n\n/**\n * The chart's `<svg>`, rasterised to a PNG blob.\n *\n * Three chart-specific decisions and nothing else. `serializeSvg` does the\n * work, and its comment carries the reason a naive `XMLSerializer` export of a\n * themed chart comes out as an empty rectangle with axes on it.\n *\n * 1. WHICH `<svg>` — the plot, not the first one in the subtree. See\n *    `findPlotSvg`.\n * 2. WHAT GROUND — `--chart-surface`, resolved against the live element, which\n *    is what makes a dark-mode export come out dark rather than transparent.\n * 3. WHAT INK AND FACE for the caption — `--ink` and the element's own\n *    resolved family, so the exported title matches the page it came from.\n *\n * ## What this cannot capture, honestly\n *\n * - **Anything drawn in HTML.** The legend, the tooltip, the brush strip and\n *   the hidden data table are DOM, not SVG. The PNG is the plot.\n * - **Web fonts, cross-origin images, and the exact rendering.** See\n *   `serializeSvg` and `rasterize`.\n *\n * @example\n * const blob = await chartToPng(plotRef.current, { title: 'Visitors per month' })\n * downloadBlob(blob, exportFilename('Visitors per month', 'png'))\n */\nexport async function chartToPng(\n  element: HTMLElement | SVGSVGElement,\n  options: ChartPngOptions = {},\n): Promise<Blob> {\n  const { title, scale = 2, background, padding = 16 } = options\n\n  const svg = findPlotSvg(element)\n  if (!svg) throw new Error('chartToPng: found no <svg> to export inside the element it was given')\n\n  const markup = serializeSvg(svg, {\n    padding,\n    background: background ?? readToken(element, '--chart-surface', '#ffffff'),\n    title,\n    titleColor: readToken(element, '--ink', '#101010'),\n    titleFont: getComputedStyle(element).fontFamily || 'sans-serif',\n  })\n\n  return rasterize(markup, 'png', { scale })\n}\n\n/**\n * The plot's `<svg>`, not the first `<svg>` in the subtree.\n *\n * Two narrowings, and both are load-bearing. The toolbar sits outside the plot\n * wrapper and every control in it is an `<svg>`, so the scope comes first;\n * INSIDE the wrapper the legend draws its own swatches, so `.recharts-surface`\n * comes second. Either one missing exports a picture of an icon, which looks\n * like a working download until somebody opens the file.\n */\nfunction findPlotSvg(element: HTMLElement | SVGSVGElement): SVGSVGElement | null {\n  if (element.tagName.toLowerCase() === 'svg') return element as SVGSVGElement\n  const scope = element.querySelector('[data-slot=\"chart\"]') ?? element\n  return scope.querySelector<SVGSVGElement>('svg.recharts-surface') ?? scope.querySelector('svg')\n}\n\n/**\n * A UTF-8 byte order mark.\n *\n * Excel does not sniff encodings. Handed a CSV with no BOM it decodes the file\n * with the machine's legacy code page, so \"Müller\", \"東京\" and \"€\" arrive as\n * mojibake on most Windows installs — and the reader's conclusion is that the\n * export is broken, not that the encoding was guessed. The BOM is the only\n * in-band signal Excel honours, and every other tool skips it silently.\n */\nconst UTF8_BOM = '\\uFEFF'\n\n/**\n * The chart's rows as RFC 4180 CSV.\n *\n * Quotes a field only when it needs quoting — a comma, a double quote, or a\n * line break in it — doubles any quote inside, and separates records with CRLF\n * as the RFC requires rather than with the `\\n` a Unix habit would reach for.\n *\n * Numbers are written unformatted on purpose. `1,234` would need quoting and\n * would then land in the spreadsheet as text, which is the one thing a numeric\n * export must not do; formatting belongs to the chart, not to the file.\n *\n * A column's `label` is a `ReactNode`, so only a string or a number can be a\n * header. Anything else falls back to the column's key, which is a worse\n * header than the label but a better one than an empty cell.\n *\n * @example\n * const csv = chartToCsv(data, [{ key: 'desktop', label: 'Desktop' }])\n * downloadBlob(new Blob([csv], { type: 'text/csv;charset=utf-8' }), 'visitors.csv')\n */\nexport function chartToCsv(rows: Record<string, unknown>[], columns: ChartColumn[]): string {\n  if (columns.length === 0) return UTF8_BOM\n\n  const lines = [columns.map((column) => csvField(headerText(column))).join(',')]\n\n  for (const row of rows) {\n    lines.push(columns.map((column) => csvField(cellText(row[column.key]))).join(','))\n  }\n\n  // The RFC makes the last CRLF optional; writing it matches what a\n  // spreadsheet emits and keeps the file from ending mid-record in a terminal.\n  return `${UTF8_BOM}${lines.join('\\r\\n')}\\r\\n`\n}\n\n/** One field, quoted only when the RFC says it has to be. */\nfunction csvField(value: string): string {\n  if (!/[\",\\r\\n]/.test(value)) return value\n  return `\"${value.replace(/\"/g, '\"\"')}\"`\n}\n\n/** A column's header text, falling back to its key when the label is markup. */\nfunction headerText(column: ChartColumn): string {\n  const { label } = column\n  if (typeof label === 'string') return label\n  if (typeof label === 'number') return String(label)\n  return column.key\n}\n\n/** A cell value as text. Anything that is not a primitive reads as empty. */\nfunction cellText(value: unknown): string {\n  if (value === null || value === undefined) return ''\n  if (typeof value === 'number') return Number.isFinite(value) ? String(value) : ''\n  if (typeof value === 'string' || typeof value === 'boolean') return String(value)\n  if (value instanceof Date) return value.toISOString()\n  return ''\n}\n\nexport { downloadBlob }\n\n/**\n * A figure's title as a filename.\n *\n * The shared slugger, with `chart` rather than `figure` as the fallback for a\n * title that slugs to nothing — an export from this entry is a chart, and the\n * name a reader finds in their downloads folder should say so.\n */\nexport function exportFilename(title: string, extension: string): string {\n  return figureFilename(title, extension, 'chart')\n}\n"],"mappings":"AACA;AAAA,EACE;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,OACK;AA6DP,eAAsB,WACpB,SACA,UAA2B,CAAC,GACb;AACf,QAAM,EAAE,OAAO,QAAQ,GAAG,YAAY,UAAU,GAAG,IAAI;AAEvD,QAAM,MAAM,YAAY,OAAO;AAC/B,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,sEAAsE;AAEhG,QAAM,SAAS,aAAa,KAAK;AAAA,IAC/B;AAAA,IACA,YAAY,cAAc,UAAU,SAAS,mBAAmB,SAAS;AAAA,IACzE;AAAA,IACA,YAAY,UAAU,SAAS,SAAS,SAAS;AAAA,IACjD,WAAW,iBAAiB,OAAO,EAAE,cAAc;AAAA,EACrD,CAAC;AAED,SAAO,UAAU,QAAQ,OAAO,EAAE,MAAM,CAAC;AAC3C;AAWA,SAAS,YAAY,SAA4D;AAC/E,MAAI,QAAQ,QAAQ,YAAY,MAAM,MAAO,QAAO;AACpD,QAAM,QAAQ,QAAQ,cAAc,qBAAqB,KAAK;AAC9D,SAAO,MAAM,cAA6B,sBAAsB,KAAK,MAAM,cAAc,KAAK;AAChG;AAWA,MAAM,WAAW;AAqBV,SAAS,WAAW,MAAiC,SAAgC;AAC1F,MAAI,QAAQ,WAAW,EAAG,QAAO;AAEjC,QAAM,QAAQ,CAAC,QAAQ,IAAI,CAAC,WAAW,SAAS,WAAW,MAAM,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC;AAE9E,aAAW,OAAO,MAAM;AACtB,UAAM,KAAK,QAAQ,IAAI,CAAC,WAAW,SAAS,SAAS,IAAI,OAAO,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC;AAAA,EACnF;AAIA,SAAO,GAAG,QAAQ,GAAG,MAAM,KAAK,MAAM,CAAC;AAAA;AACzC;AAGA,SAAS,SAAS,OAAuB;AACvC,MAAI,CAAC,WAAW,KAAK,KAAK,EAAG,QAAO;AACpC,SAAO,IAAI,MAAM,QAAQ,MAAM,IAAI,CAAC;AACtC;AAGA,SAAS,WAAW,QAA6B;AAC/C,QAAM,EAAE,MAAM,IAAI;AAClB,MAAI,OAAO,UAAU,SAAU,QAAO;AACtC,MAAI,OAAO,UAAU,SAAU,QAAO,OAAO,KAAK;AAClD,SAAO,OAAO;AAChB;AAGA,SAAS,SAAS,OAAwB;AACxC,MAAI,UAAU,QAAQ,UAAU,OAAW,QAAO;AAClD,MAAI,OAAO,UAAU,SAAU,QAAO,OAAO,SAAS,KAAK,IAAI,OAAO,KAAK,IAAI;AAC/E,MAAI,OAAO,UAAU,YAAY,OAAO,UAAU,UAAW,QAAO,OAAO,KAAK;AAChF,MAAI,iBAAiB,KAAM,QAAO,MAAM,YAAY;AACpD,SAAO;AACT;AAWO,SAAS,eAAe,OAAe,WAA2B;AACvE,SAAO,eAAe,OAAO,WAAW,OAAO;AACjD;","names":[]}

package/dist/diagrams/ArchitectureFigure/ArchitectureFigure.d.ts

@@ -0,0 +1,49 @@
+import * as react from 'react';
+import { FigureChrome } from '../lib/frame.js';
+import { ArchitectureSpec } from '../spec.js';
+import '../lib/geometry.js';
+
+interface ArchitectureFigureProps extends FigureChrome {
+    spec: ArchitectureSpec;
+}
+/**
+ * A component map: services, datastores, boundaries, and what talks to what.
+ *
+ * Takes the same JSON an archify `architecture` specification carries —
+ * `components`, `boundaries`, `connections` — and draws it in this system's own
+ * terms: paper plates on a hairline, one reversed plate for the component the
+ * diagram is about, and seven drawn sigils where archify uses seven hues.
+ *
+ * IT RENDERS ON A SERVER because every position is already in the
+ * specification. A component gives a `row` and a `col` into a grid whose cell
+ * size is either declared or defaulted, or it gives an absolute `pos` — nothing
+ * here is solved for, relaxed, or measured. So the markup is a pure function of
+ * the input, it is identical on the server and in the browser, and there is no
+ * layout shift on hydration because there is no layout to do.
+ *
+ * BOUNDARIES ARE DRAWN FIRST, AND DRAWN DIFFERENTLY. A `region` is where
+ * something RUNS — a VPC, a zone, a cluster — and is a solid frame. A
+ * `security-group` is what may REACH it, and is dashed. That is not decoration:
+ * an infrastructure diagram is very often read for exactly one of those two
+ * questions, and a reader should be able to tell which line answers which
+ * without reading either label.
+ *
+ * @example
+ * <ArchitectureFigure
+ *   spec={{
+ *     meta: { title: 'Request path' },
+ *     components: [
+ *       { id: 'cdn', type: 'cloud', label: 'CloudFront', row: 0, col: 0 },
+ *       { id: 'api', type: 'backend', label: 'FastAPI', sublabel: 'ECS', row: 0, col: 1 },
+ *       { id: 'db', type: 'database', label: 'Postgres', row: 0, col: 2 },
+ *     ],
+ *     connections: [
+ *       { from: 'cdn', to: 'api', label: 'HTTPS' },
+ *       { from: 'api', to: 'db', label: 'SQL' },
+ *     ],
+ *   }}
+ * />
+ */
+declare function ArchitectureFigure({ spec, className, legend, cards, heading, activeIds, onSelectNode, }: ArchitectureFigureProps): react.JSX.Element;
+
+export { ArchitectureFigure, type ArchitectureFigureProps, ArchitectureFigure as default };

package/dist/diagrams/ArchitectureFigure/ArchitectureFigure.js

@@ -0,0 +1,135 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId, useMemo } from "react";
+import { DiagramFrame } from "../lib/frame.js";
+import { inflate, TYPE, union, wrapText } from "../lib/geometry.js";
+import { kindLegend, resolveLegend } from "../lib/legend.js";
+import { BandFrame, NodePlate, PLATE, plateHeight } from "../lib/marks.js";
+import { renderWires, wiresFor } from "../lib/wires.js";
+const KINDS = [
+  "frontend",
+  "backend",
+  "database",
+  "cloud",
+  "security",
+  "messagebus",
+  "external"
+];
+const GRID = { origin: [40, 48], cols: 4, cellW: 184, cellH: 72, gapX: 64, gapY: 76 };
+function ArchitectureFigure({
+  spec,
+  className,
+  legend = "auto",
+  cards = true,
+  heading = true,
+  activeIds,
+  onSelectNode
+}) {
+  const uid = useId().replace(/:/g, "");
+  const model = useMemo(() => buildModel(spec, uid, activeIds, onSelectNode), [spec, uid, activeIds, onSelectNode]);
+  return /* @__PURE__ */ jsx(
+    DiagramFrame,
+    {
+      meta: spec.meta,
+      model,
+      cards: spec.cards,
+      showCards: cards,
+      heading,
+      legend,
+      className,
+      activeIds,
+      onSelectNode
+    }
+  );
+}
+function buildModel(spec, uid, activeIds, onSelectNode) {
+  const layout = { ...GRID, ...spec.layout };
+  const [originX, originY] = layout.origin;
+  const boxes = /* @__PURE__ */ new Map();
+  const placed = spec.components.map((component) => {
+    const labelWidth = component.size?.[0] ?? component.width ?? GRID.cellW;
+    const lines = wrapText(component.label, TYPE.label, labelWidth - PLATE.padX * 2, 2);
+    const height = plateHeight(
+      lines.length,
+      Boolean(component.sublabel),
+      Boolean(component.type || component.tag),
+      component.size?.[1] ?? component.height ?? 0
+    );
+    const x = component.pos ? component.pos[0] : originX + (component.col ?? 0) * (layout.cellW + layout.gapX);
+    const y = component.pos ? component.pos[1] : originY + (component.row ?? 0) * (layout.cellH + layout.gapY);
+    const box = { x, y, w: labelWidth, h: height };
+    boxes.set(component.id, box);
+    return { component, box };
+  });
+  const boundaries = (spec.boundaries ?? []).map((boundary) => {
+    const wrapped = boundary.wraps.map((id) => boxes.get(id)).filter((box) => Boolean(box));
+    const extent2 = union(wrapped);
+    return { boundary, box: extent2 ? inflate(extent2, boundary.pad ?? 28) : null };
+  });
+  const absolute = new Set(
+    spec.components.filter((component) => component.pos).map((component) => component.id)
+  );
+  const wires = wiresFor(spec.connections, boxes, (connection) => ({
+    keepWaypoints: absolute.has(connection.from) && absolute.has(connection.to)
+  }));
+  const { paths, labels } = renderWires(wires, uid);
+  const drawn = [...boxes.values(), ...boundaries.map((entry) => entry.box).filter((box) => Boolean(box))];
+  const extent = inflate(union(drawn) ?? { x: 0, y: 0, w: 400, h: 200 }, 22);
+  const active = activeIds && activeIds.length > 0 ? new Set(activeIds) : null;
+  const artwork = /* @__PURE__ */ jsxs(Fragment, { children: [
+    boundaries.map(
+      ({ boundary, box }, index) => box ? /* @__PURE__ */ jsx(
+        BandFrame,
+        {
+          box,
+          label: boundary.label,
+          dashed: boundary.kind === "security-group"
+        },
+        `${boundary.label}-${index}`
+      ) : null
+    ),
+    paths,
+    placed.map(({ component, box }) => /* @__PURE__ */ jsx(
+      NodePlate,
+      {
+        nodeId: component.id,
+        box,
+        label: component.label,
+        sublabel: component.sublabel,
+        tag: component.tag,
+        kind: component.type,
+        active: active?.has(component.id),
+        dimmed: active ? !active.has(component.id) : false,
+        onSelect: onSelectNode ? () => onSelectNode(component.id) : void 0
+      },
+      component.id
+    )),
+    labels
+  ] });
+  const used = [...new Set(spec.components.map((component) => component.type))];
+  return {
+    extent,
+    artwork,
+    nodes: spec.components.map((component) => ({
+      id: component.id,
+      label: component.label,
+      sublabel: component.sublabel,
+      kind: component.type
+    })),
+    edges: (spec.connections ?? []).map((connection) => ({
+      from: connection.from,
+      to: connection.to,
+      label: connection.label
+    })),
+    legend: kindLegend(
+      resolveLegend(used, spec.meta.legend?.mode, KINDS, spec.meta.legend?.entries),
+      spec.meta.legend?.entries
+    )
+  };
+}
+var ArchitectureFigure_default = ArchitectureFigure;
+export {
+  ArchitectureFigure,
+  ArchitectureFigure_default as default
+};
+//# sourceMappingURL=ArchitectureFigure.js.map

package/dist/diagrams/ArchitectureFigure/ArchitectureFigure.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/diagrams/ArchitectureFigure/ArchitectureFigure.tsx"],"sourcesContent":["'use client'\n\nimport { useId, useMemo } from 'react'\nimport { DiagramFrame, type FigureChrome, type FigureModel } from '../lib/frame'\nimport { inflate, TYPE, union, wrapText, type Box } from '../lib/geometry'\nimport { kindLegend, resolveLegend } from '../lib/legend'\nimport { BandFrame, NodePlate, PLATE, plateHeight } from '../lib/marks'\nimport { renderWires, wiresFor } from '../lib/wires'\nimport type { ArchitectureSpec, NodeKind } from '../spec'\n\nconst KINDS: NodeKind[] = [\n  'frontend',\n  'backend',\n  'database',\n  'cloud',\n  'security',\n  'messagebus',\n  'external',\n]\n\n/** What a cell is, when the specification does not say. */\nconst GRID = { origin: [40, 48] as [number, number], cols: 4, cellW: 184, cellH: 72, gapX: 64, gapY: 76 }\n\nexport interface ArchitectureFigureProps extends FigureChrome {\n  spec: ArchitectureSpec\n}\n\n/**\n * A component map: services, datastores, boundaries, and what talks to what.\n *\n * Takes the same JSON an archify `architecture` specification carries —\n * `components`, `boundaries`, `connections` — and draws it in this system's own\n * terms: paper plates on a hairline, one reversed plate for the component the\n * diagram is about, and seven drawn sigils where archify uses seven hues.\n *\n * IT RENDERS ON A SERVER because every position is already in the\n * specification. A component gives a `row` and a `col` into a grid whose cell\n * size is either declared or defaulted, or it gives an absolute `pos` — nothing\n * here is solved for, relaxed, or measured. So the markup is a pure function of\n * the input, it is identical on the server and in the browser, and there is no\n * layout shift on hydration because there is no layout to do.\n *\n * BOUNDARIES ARE DRAWN FIRST, AND DRAWN DIFFERENTLY. A `region` is where\n * something RUNS — a VPC, a zone, a cluster — and is a solid frame. A\n * `security-group` is what may REACH it, and is dashed. That is not decoration:\n * an infrastructure diagram is very often read for exactly one of those two\n * questions, and a reader should be able to tell which line answers which\n * without reading either label.\n *\n * @example\n * <ArchitectureFigure\n *   spec={{\n *     meta: { title: 'Request path' },\n *     components: [\n *       { id: 'cdn', type: 'cloud', label: 'CloudFront', row: 0, col: 0 },\n *       { id: 'api', type: 'backend', label: 'FastAPI', sublabel: 'ECS', row: 0, col: 1 },\n *       { id: 'db', type: 'database', label: 'Postgres', row: 0, col: 2 },\n *     ],\n *     connections: [\n *       { from: 'cdn', to: 'api', label: 'HTTPS' },\n *       { from: 'api', to: 'db', label: 'SQL' },\n *     ],\n *   }}\n * />\n */\nexport function ArchitectureFigure({\n  spec,\n  className,\n  legend = 'auto',\n  cards = true,\n  heading = true,\n  activeIds,\n  onSelectNode,\n}: ArchitectureFigureProps) {\n  const uid = useId().replace(/:/g, '')\n  const model = useMemo(() => buildModel(spec, uid, activeIds, onSelectNode), [spec, uid, activeIds, onSelectNode])\n\n  return (\n    <DiagramFrame\n      meta={spec.meta}\n      model={model}\n      cards={spec.cards}\n      showCards={cards}\n      heading={heading}\n      legend={legend}\n      className={className}\n      activeIds={activeIds}\n      onSelectNode={onSelectNode}\n    />\n  )\n}\n\nfunction buildModel(\n  spec: ArchitectureSpec,\n  uid: string,\n  activeIds: string[] | undefined,\n  onSelectNode: ((id: string) => void) | undefined,\n): FigureModel {\n  const layout = { ...GRID, ...spec.layout }\n  const [originX, originY] = layout.origin\n\n  const boxes = new Map<string, Box>()\n  const placed = spec.components.map((component) => {\n    const labelWidth = component.size?.[0] ?? component.width ?? GRID.cellW\n    const lines = wrapText(component.label, TYPE.label, labelWidth - PLATE.padX * 2, 2)\n    const height = plateHeight(\n      lines.length,\n      Boolean(component.sublabel),\n      Boolean(component.type || component.tag),\n      component.size?.[1] ?? component.height ?? 0,\n    )\n\n    const x = component.pos ? component.pos[0] : originX + (component.col ?? 0) * (layout.cellW + layout.gapX)\n    const y = component.pos ? component.pos[1] : originY + (component.row ?? 0) * (layout.cellH + layout.gapY)\n\n    const box: Box = { x, y, w: labelWidth, h: height }\n    boxes.set(component.id, box)\n    return { component, box }\n  })\n\n  const boundaries = (spec.boundaries ?? []).map((boundary) => {\n    const wrapped = boundary.wraps.map((id) => boxes.get(id)).filter((box): box is Box => Boolean(box))\n    const extent = union(wrapped)\n    return { boundary, box: extent ? inflate(extent, boundary.pad ?? 28) : null }\n  })\n\n  // A waypoint is only meaningful when both ends were placed absolutely — see\n  // `Wire.keepWaypoints`. In this diagram type that is common, which is why an\n  // archify architecture specification's hand-tuned routes survive the move.\n  const absolute = new Set(\n    spec.components.filter((component) => component.pos).map((component) => component.id),\n  )\n  const wires = wiresFor(spec.connections, boxes, (connection) => ({\n    keepWaypoints: absolute.has(connection.from) && absolute.has(connection.to),\n  }))\n  const { paths, labels } = renderWires(wires, uid)\n\n  const drawn = [...boxes.values(), ...boundaries.map((entry) => entry.box).filter((box): box is Box => Boolean(box))]\n  const extent = inflate(union(drawn) ?? { x: 0, y: 0, w: 400, h: 200 }, 22)\n\n  const active = activeIds && activeIds.length > 0 ? new Set(activeIds) : null\n\n  const artwork = (\n    <>\n      {boundaries.map(({ boundary, box }, index) =>\n        box ? (\n          <BandFrame\n            key={`${boundary.label}-${index}`}\n            box={box}\n            label={boundary.label}\n            dashed={boundary.kind === 'security-group'}\n          />\n        ) : null,\n      )}\n      {paths}\n      {placed.map(({ component, box }) => (\n        <NodePlate\n          key={component.id}\n          nodeId={component.id}\n          box={box}\n          label={component.label}\n          sublabel={component.sublabel}\n          tag={component.tag}\n          kind={component.type}\n          active={active?.has(component.id)}\n          dimmed={active ? !active.has(component.id) : false}\n          onSelect={onSelectNode ? () => onSelectNode(component.id) : undefined}\n        />\n      ))}\n      {labels}\n    </>\n  )\n\n  const used = [...new Set(spec.components.map((component) => component.type))]\n\n  return {\n    extent,\n    artwork,\n    nodes: spec.components.map((component) => ({\n      id: component.id,\n      label: component.label,\n      sublabel: component.sublabel,\n      kind: component.type,\n    })),\n    edges: (spec.connections ?? []).map((connection) => ({\n      from: connection.from,\n      to: connection.to,\n      label: connection.label,\n    })),\n    legend: kindLegend(\n      resolveLegend(used, spec.meta.legend?.mode, KINDS, spec.meta.legend?.entries),\n      spec.meta.legend?.entries,\n    ),\n  }\n}\n\nexport default ArchitectureFigure\n"],"mappings":"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","names":["extent"]}