@misoto22/design 0.6.1 → 0.8.0

package/dist/diagrams/lib/frame.d.ts

@@ -0,0 +1,138 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { LegendMode, DiagramCard, DiagramMeta } from '../spec.js';
+import { Box } from './geometry.js';
+
+/**
+ * What a figure hands the frame around it.
+ *
+ * Five renderers produce this one shape, which is what lets the title, the
+ * accessible summary, the key and the conclusion cards be written once. A
+ * renderer's only job is placing marks; everything a reader needs AROUND the
+ * picture is the same question in all five cases.
+ */
+interface FigureModel {
+    /** The extent the artwork was drawn into. */
+    extent: Box;
+    artwork: ReactNode;
+    /** Every drawn box, for the summary list. */
+    nodes: FigureNode[];
+    /** Every drawn line, for the summary list. */
+    edges: {
+        from: string;
+        to: string;
+        label?: string;
+    }[];
+    /** The kinds actually used, and how each is drawn. */
+    legend: {
+        key: string;
+        label: string;
+        sample: ReactNode;
+    }[];
+    /**
+     * The figure's second axis, as a PARTITION of the nodes above.
+     *
+     * A workflow's lanes and a data flow's stages are not decoration around the
+     * boxes — they are the other half of every box's position, and a summary that
+     * lists the boxes alone has published one dimension of a two-dimensional
+     * picture. Giving the list this structure says it once, in the place a screen
+     * reader already walks, rather than repeating "in the CI lane" on every row.
+     *
+     * A node may appear in at most one band: the list is the keyboard's only
+     * route to a selection, and a node in two bands is two controls that do the
+     * same thing. Anything left out of every band is published after them.
+     */
+    bands?: FigureBand[];
+    /**
+     * What the picture says that is neither a box nor a line.
+     *
+     * Boundaries, phase captions, segment captions, activation bars: each is a
+     * real statement drawn inside an `aria-hidden` `<svg>`, and each is a
+     * sentence rather than a row, so each figure writes its own.
+     */
+    notes?: string[];
+}
+/** One drawn box, as the summary publishes it. */
+interface FigureNode {
+    id: string;
+    label: string;
+    sublabel?: string;
+    kind?: string;
+    /** A short phrase the picture prints on the box: a step number. */
+    detail?: string;
+}
+/** One band of a figure's second axis: a lane, a stage. */
+interface FigureBand {
+    /** What KIND of band this is — "Lane", "Stage" — since the label is a name. */
+    kind: string;
+    label: string;
+    /** The nodes inside it, in the order the figure draws them. */
+    ids: string[];
+}
+interface FigureChrome {
+    className?: string;
+    /** Prints the key under the figure. `auto` shows only the kinds in use. */
+    legend?: LegendMode;
+    /** Prints the conclusion cards under the figure. Defaults to true. */
+    cards?: boolean;
+    /** Prints the title and subtitle over the figure. Defaults to true. */
+    heading?: boolean;
+    /** Node ids currently lit. Everything else is dimmed. */
+    activeIds?: string[];
+    /**
+     * Called when a reader picks a node.
+     *
+     * Giving this turns the summary list from a description into a control: the
+     * same list a screen reader reads becomes the keyboard's route to selection,
+     * and the plates in the picture become the pointer's route to the same thing.
+     */
+    onSelectNode?: (id: string) => void;
+}
+/**
+ * The shell every figure sits in: a heading, the picture, a key, the cards, and
+ * the part that makes the picture mean anything to a reader who cannot see it.
+ *
+ * ## The accessibility decision, stated rather than implied
+ *
+ * The `<svg>` carries `role="img"` and a label, which makes its whole subtree
+ * presentational. That is the honest description of what it is — a picture —
+ * and it is what stops a screen reader from walking two hundred `<text>`
+ * elements in drawing order, which is neither reading order nor useful.
+ *
+ * The diagram's CONTENT is then published beside it as an ordinary list: every
+ * node with what kind of thing it is, and every relationship as "A → B: over
+ * HTTPS". That list is where the meaning lives for anyone not looking at the
+ * picture, and it is why this component takes a model rather than markup — a
+ * frame handed a finished `<svg>` could not have written it.
+ *
+ * The list carries the figure's SECOND AXIS as its own structure. A workflow's
+ * lanes and a data flow's stages are half of where every box sits, and they are
+ * drawn inside the presentational `<svg>` — so a flat list of boxes published
+ * one dimension of a two-dimensional picture and called it the content. Nodes
+ * are grouped by their band, and the statements that group nothing — a
+ * boundary, a phase caption, an activation bar — follow as sentences.
+ *
+ * The list is visually hidden by default and NOT hidden from assistive
+ * technology, which is the opposite of what `aria-hidden` would do and the
+ * whole point.
+ */
+declare function DiagramFrame({ meta, model, cards, className, legend, showCards, heading, activeIds, onSelectNode, }: {
+    meta: DiagramMeta;
+    model: FigureModel;
+    cards?: DiagramCard[];
+    showCards?: boolean;
+} & Omit<FigureChrome, 'cards'>): react.JSX.Element;
+/**
+ * The conclusion cards under a figure.
+ *
+ * Archify keys these by hue — cyan, emerald, rose. Here the key selects a MARK:
+ * a filled square, a ring, a bar, a diagonal. Seven cards in a row stay seven
+ * distinguishable cards on paper-white, and the same row survives being
+ * printed.
+ */
+declare function CardGrid({ cards, className }: {
+    cards: DiagramCard[];
+    className?: string;
+}): react.JSX.Element;
+
+export { CardGrid, DiagramFrame, type FigureBand, type FigureChrome, type FigureModel, type FigureNode };

package/dist/diagrams/lib/frame.js

@@ -0,0 +1,131 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cn } from "../../lib/cn.js";
+import { viewBoxOf } from "./geometry.js";
+import { DiagramLegend } from "../DiagramLegend/DiagramLegend.js";
+import { DiagramDefs } from "./marks.js";
+function DiagramFrame({
+  meta,
+  model,
+  cards,
+  className,
+  legend = "auto",
+  showCards = true,
+  heading = true,
+  activeIds,
+  onSelectNode
+}) {
+  const uid = useId().replace(/:/g, "");
+  const titleId = `${uid}-title`;
+  const descId = `${uid}-desc`;
+  const byId = new Map(model.nodes.map((node) => [node.id, node]));
+  const description = `${model.nodes.length} elements and ${model.edges.length} relationships. ${meta.subtitle ?? ""}`.trim();
+  const showLegend = legend !== "hidden" && model.legend.length > 0;
+  const bands = model.bands ?? [];
+  const banded = new Set(bands.flatMap((band) => band.ids));
+  const loose = bands.length > 0 ? model.nodes.filter((node) => !banded.has(node.id)) : [];
+  const row = (node) => /* @__PURE__ */ jsx("li", { children: onSelectNode ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onSelectNode(node.id), children: summaryLine(node) }) : summaryLine(node) }, node.id);
+  return /* @__PURE__ */ jsxs("figure", { className: cn("m-0 flex flex-col gap-5", className), children: [
+    heading && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsx("h3", { className: "m-0 font-heading text-[length:var(--fs-sub)] font-normal leading-[1.15] tracking-[-0.015em] text-(--ink)", children: meta.title }),
+      meta.subtitle && /* @__PURE__ */ jsx("span", { className: "mono-meta text-(--ink-3-aa)", children: meta.subtitle })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "overflow-x-auto rounded-(--radius-lg) border border-(--rule) bg-(--diagram-surface) p-[clamp(0.75rem,calc(1.6*var(--fluid)),1.25rem)] scroll-slim", children: /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        viewBox: viewBoxOf(model.extent),
+        role: "img",
+        "aria-labelledby": `${titleId} ${descId}`,
+        className: "block h-auto w-full max-w-full font-sans",
+        "data-diagram-artwork": "",
+        children: [
+          /* @__PURE__ */ jsx("title", { id: titleId, children: meta.title }),
+          /* @__PURE__ */ jsx("desc", { id: descId, children: description }),
+          /* @__PURE__ */ jsx(DiagramDefs, { uid }),
+          model.artwork
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "sr-only", children: [
+      /* @__PURE__ */ jsx("p", { children: description }),
+      bands.length > 0 ? /* @__PURE__ */ jsxs("ul", { children: [
+        bands.map((band, index) => /* @__PURE__ */ jsxs("li", { children: [
+          /* @__PURE__ */ jsx("span", { children: `${band.kind}: ${band.label}` }),
+          /* @__PURE__ */ jsx("ul", { children: band.ids.flatMap((id) => {
+            const node = byId.get(id);
+            return node ? [row(node)] : [];
+          }) })
+        ] }, `${band.label}-${index}`)),
+        loose.length > 0 && /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("ul", { children: loose.map(row) }) })
+      ] }) : /* @__PURE__ */ jsx("ul", { children: model.nodes.map(row) }),
+      model.edges.length > 0 && /* @__PURE__ */ jsx("ul", { children: model.edges.map((edge, index) => /* @__PURE__ */ jsxs("li", { children: [
+        byId.get(edge.from)?.label ?? edge.from,
+        " \u2192 ",
+        byId.get(edge.to)?.label ?? edge.to,
+        edge.label ? `: ${edge.label}` : ""
+      ] }, index)) }),
+      model.notes && model.notes.length > 0 && /* @__PURE__ */ jsx("ul", { children: model.notes.map((note, index) => /* @__PURE__ */ jsx("li", { children: note }, index)) })
+    ] }),
+    showLegend && /* @__PURE__ */ jsx(DiagramLegend, { entries: model.legend }),
+    showCards && cards && cards.length > 0 && /* @__PURE__ */ jsx(CardGrid, { cards }),
+    activeIds && activeIds.length > 0 && /* @__PURE__ */ jsx("span", { className: "sr-only", role: "status", children: `${activeIds.length} highlighted` })
+  ] });
+}
+function summaryLine(node) {
+  const parts = [node.label];
+  if (node.kind) parts.push(`(${node.kind})`);
+  if (node.sublabel) parts.push(`\u2014 ${node.sublabel}`);
+  if (node.detail) parts.push(`\u2014 ${node.detail}`);
+  return parts.join(" ");
+}
+function CardGrid({ cards, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "grid gap-3 sm:grid-cols-2 lg:grid-cols-3",
+        className
+      ),
+      children: cards.map((card) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2.5 border-t border-(--ink) pt-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(CardMark, { shape: card.dot }),
+          /* @__PURE__ */ jsx("span", { className: "font-sans text-[13.5px] leading-[1.35] text-(--ink)", children: card.title })
+        ] }),
+        /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-col gap-1.5 p-0", children: card.items.map((item, index) => /* @__PURE__ */ jsx(
+          "li",
+          {
+            className: "text-[12.5px] leading-[1.55] text-(--ink-2) ps-3 -indent-3 before:content-['\u2014'] before:pe-1.5 before:text-(--ink-3-aa)",
+            children: item
+          },
+          index
+        )) })
+      ] }, card.title))
+    }
+  );
+}
+function CardMark({ shape }) {
+  const common = "size-2.5 shrink-0";
+  switch (shape) {
+    case "cyan":
+      return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn(common, "bg-(--ink)") });
+    case "emerald":
+      return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn(common, "rounded-full bg-(--ink)") });
+    case "violet":
+      return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn(common, "rounded-full border border-(--ink)") });
+    case "amber":
+      return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn(common, "border border-(--ink)") });
+    case "rose":
+      return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn(common, "rotate-45 bg-(--ink)") });
+    case "orange":
+      return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn(common, "rotate-45 border border-(--ink)") });
+    case "slate":
+    default:
+      return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("h-1 w-2.5 shrink-0 bg-(--ink-3-aa)") });
+  }
+}
+export {
+  CardGrid,
+  DiagramFrame
+};
+//# sourceMappingURL=frame.js.map

package/dist/diagrams/lib/frame.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/diagrams/lib/frame.tsx"],"sourcesContent":["'use client'\n\nimport { useId, type ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport type { DiagramCard, DiagramMeta, LegendMode } from '../spec'\nimport { viewBoxOf, type Box } from './geometry'\nimport { DiagramLegend } from '../DiagramLegend/DiagramLegend'\nimport { DiagramDefs } from './marks'\n\n/**\n * What a figure hands the frame around it.\n *\n * Five renderers produce this one shape, which is what lets the title, the\n * accessible summary, the key and the conclusion cards be written once. A\n * renderer's only job is placing marks; everything a reader needs AROUND the\n * picture is the same question in all five cases.\n */\nexport interface FigureModel {\n  /** The extent the artwork was drawn into. */\n  extent: Box\n  artwork: ReactNode\n  /** Every drawn box, for the summary list. */\n  nodes: FigureNode[]\n  /** Every drawn line, for the summary list. */\n  edges: { from: string; to: string; label?: string }[]\n  /** The kinds actually used, and how each is drawn. */\n  legend: { key: string; label: string; sample: ReactNode }[]\n  /**\n   * The figure's second axis, as a PARTITION of the nodes above.\n   *\n   * A workflow's lanes and a data flow's stages are not decoration around the\n   * boxes — they are the other half of every box's position, and a summary that\n   * lists the boxes alone has published one dimension of a two-dimensional\n   * picture. Giving the list this structure says it once, in the place a screen\n   * reader already walks, rather than repeating \"in the CI lane\" on every row.\n   *\n   * A node may appear in at most one band: the list is the keyboard's only\n   * route to a selection, and a node in two bands is two controls that do the\n   * same thing. Anything left out of every band is published after them.\n   */\n  bands?: FigureBand[]\n  /**\n   * What the picture says that is neither a box nor a line.\n   *\n   * Boundaries, phase captions, segment captions, activation bars: each is a\n   * real statement drawn inside an `aria-hidden` `<svg>`, and each is a\n   * sentence rather than a row, so each figure writes its own.\n   */\n  notes?: string[]\n}\n\n/** One drawn box, as the summary publishes it. */\nexport interface FigureNode {\n  id: string\n  label: string\n  sublabel?: string\n  kind?: string\n  /** A short phrase the picture prints on the box: a step number. */\n  detail?: string\n}\n\n/** One band of a figure's second axis: a lane, a stage. */\nexport interface FigureBand {\n  /** What KIND of band this is — \"Lane\", \"Stage\" — since the label is a name. */\n  kind: string\n  label: string\n  /** The nodes inside it, in the order the figure draws them. */\n  ids: string[]\n}\n\nexport interface FigureChrome {\n  className?: string\n  /** Prints the key under the figure. `auto` shows only the kinds in use. */\n  legend?: LegendMode\n  /** Prints the conclusion cards under the figure. Defaults to true. */\n  cards?: boolean\n  /** Prints the title and subtitle over the figure. Defaults to true. */\n  heading?: boolean\n  /** Node ids currently lit. Everything else is dimmed. */\n  activeIds?: string[]\n  /**\n   * Called when a reader picks a node.\n   *\n   * Giving this turns the summary list from a description into a control: the\n   * same list a screen reader reads becomes the keyboard's route to selection,\n   * and the plates in the picture become the pointer's route to the same thing.\n   */\n  onSelectNode?: (id: string) => void\n}\n\n/**\n * The shell every figure sits in: a heading, the picture, a key, the cards, and\n * the part that makes the picture mean anything to a reader who cannot see it.\n *\n * ## The accessibility decision, stated rather than implied\n *\n * The `<svg>` carries `role=\"img\"` and a label, which makes its whole subtree\n * presentational. That is the honest description of what it is — a picture —\n * and it is what stops a screen reader from walking two hundred `<text>`\n * elements in drawing order, which is neither reading order nor useful.\n *\n * The diagram's CONTENT is then published beside it as an ordinary list: every\n * node with what kind of thing it is, and every relationship as \"A → B: over\n * HTTPS\". That list is where the meaning lives for anyone not looking at the\n * picture, and it is why this component takes a model rather than markup — a\n * frame handed a finished `<svg>` could not have written it.\n *\n * The list carries the figure's SECOND AXIS as its own structure. A workflow's\n * lanes and a data flow's stages are half of where every box sits, and they are\n * drawn inside the presentational `<svg>` — so a flat list of boxes published\n * one dimension of a two-dimensional picture and called it the content. Nodes\n * are grouped by their band, and the statements that group nothing — a\n * boundary, a phase caption, an activation bar — follow as sentences.\n *\n * The list is visually hidden by default and NOT hidden from assistive\n * technology, which is the opposite of what `aria-hidden` would do and the\n * whole point.\n */\nexport function DiagramFrame({\n  meta,\n  model,\n  cards,\n  className,\n  legend = 'auto',\n  showCards = true,\n  heading = true,\n  activeIds,\n  onSelectNode,\n}: {\n  meta: DiagramMeta\n  model: FigureModel\n  cards?: DiagramCard[]\n  showCards?: boolean\n} & Omit<FigureChrome, 'cards'>) {\n  const uid = useId().replace(/:/g, '')\n  const titleId = `${uid}-title`\n  const descId = `${uid}-desc`\n\n  const byId = new Map(model.nodes.map((node) => [node.id, node]))\n  const description = `${model.nodes.length} elements and ${model.edges.length} relationships. ${\n    meta.subtitle ?? ''\n  }`.trim()\n\n  const showLegend = legend !== 'hidden' && model.legend.length > 0\n\n  // Bands partition the nodes; anything a figure left out of every band is\n  // still published, after them. A node dropped from the list entirely would be\n  // a node a keyboard cannot reach.\n  const bands = model.bands ?? []\n  const banded = new Set(bands.flatMap((band) => band.ids))\n  const loose = bands.length > 0 ? model.nodes.filter((node) => !banded.has(node.id)) : []\n\n  const row = (node: FigureNode) => (\n    <li key={node.id}>\n      {onSelectNode ? (\n        <button type=\"button\" onClick={() => onSelectNode(node.id)}>\n          {summaryLine(node)}\n        </button>\n      ) : (\n        summaryLine(node)\n      )}\n    </li>\n  )\n\n  return (\n    <figure className={cn('m-0 flex flex-col gap-5', className)}>\n      {/* The title is set in the editorial serif, which is the system's own\n          answer to \"this is a heading\" — and it is what stops a figure from\n          reading as a screenshot dropped into the page. The subtitle stays in\n          the meta voice underneath it. */}\n      {heading && (\n        <div className=\"flex flex-col gap-1.5\">\n          <h3 className=\"m-0 font-heading text-[length:var(--fs-sub)] font-normal leading-[1.15] tracking-[-0.015em] text-(--ink)\">\n            {meta.title}\n          </h3>\n          {meta.subtitle && <span className=\"mono-meta text-(--ink-3-aa)\">{meta.subtitle}</span>}\n        </div>\n      )}\n\n      <div className=\"overflow-x-auto rounded-(--radius-lg) border border-(--rule) bg-(--diagram-surface) p-[clamp(0.75rem,calc(1.6*var(--fluid)),1.25rem)] scroll-slim\">\n        <svg\n          viewBox={viewBoxOf(model.extent)}\n          role=\"img\"\n          aria-labelledby={`${titleId} ${descId}`}\n          className=\"block h-auto w-full max-w-full font-sans\"\n          data-diagram-artwork=\"\"\n        >\n          <title id={titleId}>{meta.title}</title>\n          <desc id={descId}>{description}</desc>\n          <DiagramDefs uid={uid} />\n          {model.artwork}\n        </svg>\n      </div>\n\n      {/* The picture's content, for anyone not looking at the picture. */}\n      <div className=\"sr-only\">\n        <p>{description}</p>\n        {bands.length > 0 ? (\n          <ul>\n            {bands.map((band, index) => (\n              <li key={`${band.label}-${index}`}>\n                <span>{`${band.kind}: ${band.label}`}</span>\n                <ul>\n                  {band.ids.flatMap((id) => {\n                    const node = byId.get(id)\n                    return node ? [row(node)] : []\n                  })}\n                </ul>\n              </li>\n            ))}\n            {loose.length > 0 && (\n              <li>\n                <ul>{loose.map(row)}</ul>\n              </li>\n            )}\n          </ul>\n        ) : (\n          <ul>{model.nodes.map(row)}</ul>\n        )}\n        {model.edges.length > 0 && (\n          <ul>\n            {model.edges.map((edge, index) => (\n              <li key={index}>\n                {(byId.get(edge.from)?.label ?? edge.from)} → {(byId.get(edge.to)?.label ?? edge.to)}\n                {edge.label ? `: ${edge.label}` : ''}\n              </li>\n            ))}\n          </ul>\n        )}\n        {model.notes && model.notes.length > 0 && (\n          <ul>\n            {model.notes.map((note, index) => (\n              <li key={index}>{note}</li>\n            ))}\n          </ul>\n        )}\n      </div>\n\n      {showLegend && <DiagramLegend entries={model.legend} />}\n\n      {showCards && cards && cards.length > 0 && <CardGrid cards={cards} />}\n\n      {activeIds && activeIds.length > 0 && <span className=\"sr-only\" role=\"status\">{`${activeIds.length} highlighted`}</span>}\n    </figure>\n  )\n}\n\nfunction summaryLine(node: FigureNode): string {\n  const parts = [node.label]\n  if (node.kind) parts.push(`(${node.kind})`)\n  if (node.sublabel) parts.push(`— ${node.sublabel}`)\n  if (node.detail) parts.push(`— ${node.detail}`)\n  return parts.join(' ')\n}\n\n/**\n * The conclusion cards under a figure.\n *\n * Archify keys these by hue — cyan, emerald, rose. Here the key selects a MARK:\n * a filled square, a ring, a bar, a diagonal. Seven cards in a row stay seven\n * distinguishable cards on paper-white, and the same row survives being\n * printed.\n */\nexport function CardGrid({ cards, className }: { cards: DiagramCard[]; className?: string }) {\n  return (\n    <div\n      className={cn(\n        'grid gap-3 sm:grid-cols-2 lg:grid-cols-3',\n        className,\n      )}\n    >\n      {cards.map((card) => (\n        <div key={card.title} className=\"flex flex-col gap-2.5 border-t border-(--ink) pt-3\">\n          <div className=\"flex items-center gap-2\">\n            <CardMark shape={card.dot} />\n            <span className=\"font-sans text-[13.5px] leading-[1.35] text-(--ink)\">{card.title}</span>\n          </div>\n          <ul className=\"m-0 flex list-none flex-col gap-1.5 p-0\">\n            {card.items.map((item, index) => (\n              <li\n                key={index}\n                className=\"text-[12.5px] leading-[1.55] text-(--ink-2) ps-3 -indent-3 before:content-['—'] before:pe-1.5 before:text-(--ink-3-aa)\"\n              >\n                {item}\n              </li>\n            ))}\n          </ul>\n        </div>\n      ))}\n    </div>\n  )\n}\n\n/** Seven marks, one per archify dot name, and not one of them a hue. */\nfunction CardMark({ shape }: { shape: DiagramCard['dot'] }) {\n  const common = 'size-2.5 shrink-0'\n  switch (shape) {\n    case 'cyan':\n      return <span aria-hidden className={cn(common, 'bg-(--ink)')} />\n    case 'emerald':\n      return <span aria-hidden className={cn(common, 'rounded-full bg-(--ink)')} />\n    case 'violet':\n      return <span aria-hidden className={cn(common, 'rounded-full border border-(--ink)')} />\n    case 'amber':\n      return <span aria-hidden className={cn(common, 'border border-(--ink)')} />\n    case 'rose':\n      return <span aria-hidden className={cn(common, 'rotate-45 bg-(--ink)')} />\n    case 'orange':\n      return <span aria-hidden className={cn(common, 'rotate-45 border border-(--ink)')} />\n    case 'slate':\n    default:\n      return <span aria-hidden className={cn('h-1 w-2.5 shrink-0 bg-(--ink-3-aa)')} />\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/diagrams/lib/geometry.d.ts

@@ -0,0 +1,114 @@
+/**
+ * The arithmetic every figure shares: boxes, text extents, and the frame that
+ * ends up around them.
+ *
+ * Everything here is a pure function of numbers already in the specification.
+ * That is not a stylistic preference — it is what lets these figures render on
+ * a server. A layout that measured real text would need a DOM, a layout that
+ * relaxed a force graph would need to settle, and neither can produce the same
+ * markup twice. Both would hydrate into a different picture than the one that
+ * was sent, which for a diagram is worse than not rendering at all.
+ */
+/** A rectangle in the figure's user-unit space. */
+interface Box {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+declare const centerOf: (box: Box) => [number, number];
+/** Grows a rectangle by `pad` on every side. */
+declare function inflate(box: Box, pad: number): Box;
+/** The smallest rectangle containing all of them. Returns null for an empty list. */
+declare function union(boxes: Box[]): Box | null;
+/**
+ * How wide a run of text is, without measuring it.
+ *
+ * A real measurement needs a DOM and the loaded face, and this module has
+ * neither by design — so this is an estimate, and the honest thing is to say
+ * what kind. Latin glyphs in the system's sans average close to 0.52em of
+ * advance across ordinary label text; digits and capitals run wider; a CJK
+ * ideograph is a full em by definition, as is a fullwidth punctuation mark.
+ *
+ * The estimate is used for two things and neither needs to be exact: choosing a
+ * box wide enough that a label is not clipped, and deciding where a line's
+ * label mask sits. Both fail gracefully — a box a few units too wide is
+ * invisible, and a mask a few units too wide hides a little more of a line than
+ * it had to.
+ *
+ * It is deliberately NOT used to justify, wrap mid-word, or letter-space
+ * anything. Those need the real face.
+ */
+declare function textWidth(text: string, fontSize: number): number;
+/**
+ * A label broken to fit a width, with a hard cap on how many lines it may take.
+ *
+ * Breaks on spaces for Latin and between characters for CJK, which has no
+ * spaces to break on. A word longer than the whole line is left to overflow
+ * rather than hyphenated: an identifier — `TenantMainMiddleware` — split across
+ * two lines is harder to read than one that runs slightly wide, and the caller
+ * sized the box from `textWidth` anyway.
+ *
+ * The last line is ellipsised when the text does not fit in `maxLines`, because
+ * silently dropping the tail is how a diagram comes to say something it does
+ * not mean.
+ */
+declare function wrapText(text: string, fontSize: number, maxWidth: number, maxLines?: number): string[];
+/**
+ * The type scale inside a figure, in user units.
+ *
+ * Fixed numbers rather than tokens, because these are SVG geometry: a `<text>`
+ * sized in `rem` inside a scaled `viewBox` changes size when the figure is
+ * zoomed, which means a diagram at 200% is a different diagram. The figure
+ * scales as one picture, so its type scales with it.
+ */
+declare const TYPE: {
+    /** A node's name. */
+    readonly label: 13;
+    /** The line under it. */
+    readonly sub: 10.5;
+    /** A mono chip: a tag, a classification, a step number. */
+    readonly chip: 9.5;
+    /** A relationship's own wording. */
+    readonly edge: 10.5;
+    /** A band, lane or stage heading. */
+    readonly band: 10.5;
+};
+/** Default box sizes per diagram type, in user units. */
+declare const BOX: {
+    readonly node: {
+        readonly w: 168;
+        readonly h: 62;
+    };
+    readonly wide: {
+        readonly w: 200;
+        readonly h: 62;
+    };
+    readonly participant: {
+        readonly w: 128;
+        readonly h: 46;
+    };
+};
+/**
+ * How tall a box has to be to hold what it was given.
+ *
+ * A declared height is a FLOOR, not a ceiling. When a specification asks for a
+ * 64-unit box and then puts two lines of label, a sublabel and a tag chip in
+ * it, honouring the 64 prints the tag over the sublabel — which reads as a
+ * rendering fault rather than as a box that was asked to hold too much. Growing
+ * the box is visible and correct; clipping is invisible and wrong.
+ */
+declare function nodeHeight(labelLines: number, hasSub: boolean, hasTag?: boolean, base?: number): number;
+/** `viewBox` as the attribute wants it. */
+declare function viewBoxOf(box: Box): string;
+/**
+ * Coordinates rounded to a tenth.
+ *
+ * SVG happily accepts eighteen decimal places and puts every one of them in the
+ * markup, which on a figure with two hundred line segments is a measurable
+ * share of the document. A tenth of a user unit is well under a device pixel at
+ * any zoom a reader will use.
+ */
+declare function round(value: number): number;
+
+export { BOX, type Box, TYPE, centerOf, inflate, nodeHeight, round, textWidth, union, viewBoxOf, wrapText };

package/dist/diagrams/lib/geometry.js

@@ -0,0 +1,113 @@
+const centerOf = (box) => [box.x + box.w / 2, box.y + box.h / 2];
+function inflate(box, pad) {
+  return { x: box.x - pad, y: box.y - pad, w: box.w + pad * 2, h: box.h + pad * 2 };
+}
+function union(boxes) {
+  if (boxes.length === 0) return null;
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const box of boxes) {
+    if (box.x < minX) minX = box.x;
+    if (box.y < minY) minY = box.y;
+    if (box.x + box.w > maxX) maxX = box.x + box.w;
+    if (box.y + box.h > maxY) maxY = box.y + box.h;
+  }
+  return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+}
+function textWidth(text, fontSize) {
+  let em = 0;
+  for (const character of text) {
+    const code = character.codePointAt(0) ?? 0;
+    if (code > 11903) {
+      em += 1;
+    } else if (character === " ") {
+      em += 0.26;
+    } else if (/[.,:;'`!|iljtIf()[\]{}]/.test(character)) {
+      em += 0.31;
+    } else if (/[A-Z0-9@#%&WM]/.test(character)) {
+      em += 0.62;
+    } else {
+      em += 0.52;
+    }
+  }
+  return em * fontSize;
+}
+function wrapText(text, fontSize, maxWidth, maxLines = 2) {
+  if (textWidth(text, fontSize) <= maxWidth) return [text];
+  const lines = [];
+  let current = "";
+  const tokens = text.match(/[⺀-鿿豈-﫿＀-￯]|[^\s⺀-鿿]+|\s+/g) ?? [text];
+  for (const token of tokens) {
+    const candidate = current + token;
+    if (current !== "" && textWidth(candidate.trimEnd(), fontSize) > maxWidth) {
+      lines.push(current.trimEnd());
+      current = token.trimStart();
+      if (lines.length === maxLines) break;
+    } else {
+      current = candidate;
+    }
+  }
+  if (lines.length < maxLines && current.trim() !== "") lines.push(current.trimEnd());
+  if (lines.length === maxLines) {
+    const placed = lines.join("").replace(/\s+/g, "");
+    const whole = text.replace(/\s+/g, "");
+    if (placed.length < whole.length) {
+      const last = lines[maxLines - 1] ?? "";
+      lines[maxLines - 1] = `${clampToWidth(last, fontSize, maxWidth - textWidth("\u2026", fontSize))}\u2026`;
+    }
+  }
+  return lines;
+}
+function clampToWidth(text, fontSize, maxWidth) {
+  let width = 0;
+  let out = "";
+  for (const character of text) {
+    const next = textWidth(character, fontSize);
+    if (width + next > maxWidth) break;
+    width += next;
+    out += character;
+  }
+  return out.trimEnd();
+}
+const TYPE = {
+  /** A node's name. */
+  label: 13,
+  /** The line under it. */
+  sub: 10.5,
+  /** A mono chip: a tag, a classification, a step number. */
+  chip: 9.5,
+  /** A relationship's own wording. */
+  edge: 10.5,
+  /** A band, lane or stage heading. */
+  band: 10.5
+};
+const BOX = {
+  node: { w: 168, h: 62 },
+  wide: { w: 200, h: 62 },
+  participant: { w: 128, h: 46 }
+};
+function nodeHeight(labelLines, hasSub, hasTag = false, base = BOX.node.h) {
+  const content = 20 + labelLines * (TYPE.label * 1.25) + (hasSub ? TYPE.sub * 1.5 : 0) + (hasTag ? 20 : 0);
+  return Math.max(base, Math.ceil(content));
+}
+function viewBoxOf(box) {
+  return `${round(box.x)} ${round(box.y)} ${round(box.w)} ${round(box.h)}`;
+}
+function round(value) {
+  return Math.round(value * 10) / 10;
+}
+export {
+  BOX,
+  TYPE,
+  centerOf,
+  inflate,
+  nodeHeight,
+  round,
+  textWidth,
+  union,
+  viewBoxOf,
+  wrapText
+};
+//# sourceMappingURL=geometry.js.map

package/dist/diagrams/lib/geometry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/diagrams/lib/geometry.ts"],"sourcesContent":["/**\n * The arithmetic every figure shares: boxes, text extents, and the frame that\n * ends up around them.\n *\n * Everything here is a pure function of numbers already in the specification.\n * That is not a stylistic preference — it is what lets these figures render on\n * a server. A layout that measured real text would need a DOM, a layout that\n * relaxed a force graph would need to settle, and neither can produce the same\n * markup twice. Both would hydrate into a different picture than the one that\n * was sent, which for a diagram is worse than not rendering at all.\n */\n\n/** A rectangle in the figure's user-unit space. */\nexport interface Box {\n  x: number\n  y: number\n  w: number\n  h: number\n}\n\nexport const centerOf = (box: Box): [number, number] => [box.x + box.w / 2, box.y + box.h / 2]\n\n/** Grows a rectangle by `pad` on every side. */\nexport function inflate(box: Box, pad: number): Box {\n  return { x: box.x - pad, y: box.y - pad, w: box.w + pad * 2, h: box.h + pad * 2 }\n}\n\n/** The smallest rectangle containing all of them. Returns null for an empty list. */\nexport function union(boxes: Box[]): Box | null {\n  if (boxes.length === 0) return null\n  let minX = Infinity\n  let minY = Infinity\n  let maxX = -Infinity\n  let maxY = -Infinity\n  for (const box of boxes) {\n    if (box.x < minX) minX = box.x\n    if (box.y < minY) minY = box.y\n    if (box.x + box.w > maxX) maxX = box.x + box.w\n    if (box.y + box.h > maxY) maxY = box.y + box.h\n  }\n  return { x: minX, y: minY, w: maxX - minX, h: maxY - minY }\n}\n\n/**\n * How wide a run of text is, without measuring it.\n *\n * A real measurement needs a DOM and the loaded face, and this module has\n * neither by design — so this is an estimate, and the honest thing is to say\n * what kind. Latin glyphs in the system's sans average close to 0.52em of\n * advance across ordinary label text; digits and capitals run wider; a CJK\n * ideograph is a full em by definition, as is a fullwidth punctuation mark.\n *\n * The estimate is used for two things and neither needs to be exact: choosing a\n * box wide enough that a label is not clipped, and deciding where a line's\n * label mask sits. Both fail gracefully — a box a few units too wide is\n * invisible, and a mask a few units too wide hides a little more of a line than\n * it had to.\n *\n * It is deliberately NOT used to justify, wrap mid-word, or letter-space\n * anything. Those need the real face.\n */\nexport function textWidth(text: string, fontSize: number): number {\n  let em = 0\n  for (const character of text) {\n    const code = character.codePointAt(0) ?? 0\n    if (code > 0x2e7f) {\n      // CJK, kana, hangul, fullwidth forms — one em each.\n      em += 1\n    } else if (character === ' ') {\n      em += 0.26\n    } else if (/[.,:;'`!|iljtIf()[\\]{}]/.test(character)) {\n      em += 0.31\n    } else if (/[A-Z0-9@#%&WM]/.test(character)) {\n      em += 0.62\n    } else {\n      em += 0.52\n    }\n  }\n  return em * fontSize\n}\n\n/**\n * A label broken to fit a width, with a hard cap on how many lines it may take.\n *\n * Breaks on spaces for Latin and between characters for CJK, which has no\n * spaces to break on. A word longer than the whole line is left to overflow\n * rather than hyphenated: an identifier — `TenantMainMiddleware` — split across\n * two lines is harder to read than one that runs slightly wide, and the caller\n * sized the box from `textWidth` anyway.\n *\n * The last line is ellipsised when the text does not fit in `maxLines`, because\n * silently dropping the tail is how a diagram comes to say something it does\n * not mean.\n */\nexport function wrapText(\n  text: string,\n  fontSize: number,\n  maxWidth: number,\n  maxLines = 2,\n): string[] {\n  if (textWidth(text, fontSize) <= maxWidth) return [text]\n\n  const lines: string[] = []\n  let current = ''\n\n  // Latin words stay whole; a CJK run is a sequence of individual break\n  // opportunities, so each ideograph becomes its own token.\n  const tokens = text.match(/[⺀-鿿豈-﫿＀-￯]|[^\\s⺀-鿿]+|\\s+/g) ?? [text]\n\n  for (const token of tokens) {\n    const candidate = current + token\n    if (current !== '' && textWidth(candidate.trimEnd(), fontSize) > maxWidth) {\n      lines.push(current.trimEnd())\n      current = token.trimStart()\n      if (lines.length === maxLines) break\n    } else {\n      current = candidate\n    }\n  }\n\n  if (lines.length < maxLines && current.trim() !== '') lines.push(current.trimEnd())\n\n  if (lines.length === maxLines) {\n    // Anything still unplaced belongs to the last line, which must therefore\n    // admit that it is truncated.\n    const placed = lines.join('').replace(/\\s+/g, '')\n    const whole = text.replace(/\\s+/g, '')\n    if (placed.length < whole.length) {\n      const last = lines[maxLines - 1] ?? ''\n      lines[maxLines - 1] = `${clampToWidth(last, fontSize, maxWidth - textWidth('…', fontSize))}…`\n    }\n  }\n\n  return lines\n}\n\n/** The longest prefix of `text` that fits, character by character. */\nfunction clampToWidth(text: string, fontSize: number, maxWidth: number): string {\n  let width = 0\n  let out = ''\n  for (const character of text) {\n    const next = textWidth(character, fontSize)\n    if (width + next > maxWidth) break\n    width += next\n    out += character\n  }\n  return out.trimEnd()\n}\n\n/**\n * The type scale inside a figure, in user units.\n *\n * Fixed numbers rather than tokens, because these are SVG geometry: a `<text>`\n * sized in `rem` inside a scaled `viewBox` changes size when the figure is\n * zoomed, which means a diagram at 200% is a different diagram. The figure\n * scales as one picture, so its type scales with it.\n */\nexport const TYPE = {\n  /** A node's name. */\n  label: 13,\n  /** The line under it. */\n  sub: 10.5,\n  /** A mono chip: a tag, a classification, a step number. */\n  chip: 9.5,\n  /** A relationship's own wording. */\n  edge: 10.5,\n  /** A band, lane or stage heading. */\n  band: 10.5,\n} as const\n\n/** Default box sizes per diagram type, in user units. */\nexport const BOX = {\n  node: { w: 168, h: 62 },\n  wide: { w: 200, h: 62 },\n  participant: { w: 128, h: 46 },\n} as const\n\n/**\n * How tall a box has to be to hold what it was given.\n *\n * A declared height is a FLOOR, not a ceiling. When a specification asks for a\n * 64-unit box and then puts two lines of label, a sublabel and a tag chip in\n * it, honouring the 64 prints the tag over the sublabel — which reads as a\n * rendering fault rather than as a box that was asked to hold too much. Growing\n * the box is visible and correct; clipping is invisible and wrong.\n */\nexport function nodeHeight(\n  labelLines: number,\n  hasSub: boolean,\n  hasTag = false,\n  base: number = BOX.node.h,\n): number {\n  const content =\n    20 + labelLines * (TYPE.label * 1.25) + (hasSub ? TYPE.sub * 1.5 : 0) + (hasTag ? 20 : 0)\n  return Math.max(base, Math.ceil(content))\n}\n\n/** `viewBox` as the attribute wants it. */\nexport function viewBoxOf(box: Box): string {\n  return `${round(box.x)} ${round(box.y)} ${round(box.w)} ${round(box.h)}`\n}\n\n/**\n * Coordinates rounded to a tenth.\n *\n * SVG happily accepts eighteen decimal places and puts every one of them in the\n * markup, which on a figure with two hundred line segments is a measurable\n * share of the document. A tenth of a user unit is well under a device pixel at\n * any zoom a reader will use.\n */\nexport function round(value: number): number {\n  return Math.round(value * 10) / 10\n}\n"],"mappings":"AAoBO,MAAM,WAAW,CAAC,QAA+B,CAAC,IAAI,IAAI,IAAI,IAAI,GAAG,IAAI,IAAI,IAAI,IAAI,CAAC;AAGtF,SAAS,QAAQ,KAAU,KAAkB;AAClD,SAAO,EAAE,GAAG,IAAI,IAAI,KAAK,GAAG,IAAI,IAAI,KAAK,GAAG,IAAI,IAAI,MAAM,GAAG,GAAG,IAAI,IAAI,MAAM,EAAE;AAClF;AAGO,SAAS,MAAM,OAA0B;AAC9C,MAAI,MAAM,WAAW,EAAG,QAAO;AAC/B,MAAI,OAAO;AACX,MAAI,OAAO;AACX,MAAI,OAAO;AACX,MAAI,OAAO;AACX,aAAW,OAAO,OAAO;AACvB,QAAI,IAAI,IAAI,KAAM,QAAO,IAAI;AAC7B,QAAI,IAAI,IAAI,KAAM,QAAO,IAAI;AAC7B,QAAI,IAAI,IAAI,IAAI,IAAI,KAAM,QAAO,IAAI,IAAI,IAAI;AAC7C,QAAI,IAAI,IAAI,IAAI,IAAI,KAAM,QAAO,IAAI,IAAI,IAAI;AAAA,EAC/C;AACA,SAAO,EAAE,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,MAAM,GAAG,OAAO,KAAK;AAC5D;AAoBO,SAAS,UAAU,MAAc,UAA0B;AAChE,MAAI,KAAK;AACT,aAAW,aAAa,MAAM;AAC5B,UAAM,OAAO,UAAU,YAAY,CAAC,KAAK;AACzC,QAAI,OAAO,OAAQ;AAEjB,YAAM;AAAA,IACR,WAAW,cAAc,KAAK;AAC5B,YAAM;AAAA,IACR,WAAW,0BAA0B,KAAK,SAAS,GAAG;AACpD,YAAM;AAAA,IACR,WAAW,iBAAiB,KAAK,SAAS,GAAG;AAC3C,YAAM;AAAA,IACR,OAAO;AACL,YAAM;AAAA,IACR;AAAA,EACF;AACA,SAAO,KAAK;AACd;AAeO,SAAS,SACd,MACA,UACA,UACA,WAAW,GACD;AACV,MAAI,UAAU,MAAM,QAAQ,KAAK,SAAU,QAAO,CAAC,IAAI;AAEvD,QAAM,QAAkB,CAAC;AACzB,MAAI,UAAU;AAId,QAAM,SAAS,KAAK,MAAM,4BAA4B,KAAK,CAAC,IAAI;AAEhE,aAAW,SAAS,QAAQ;AAC1B,UAAM,YAAY,UAAU;AAC5B,QAAI,YAAY,MAAM,UAAU,UAAU,QAAQ,GAAG,QAAQ,IAAI,UAAU;AACzE,YAAM,KAAK,QAAQ,QAAQ,CAAC;AAC5B,gBAAU,MAAM,UAAU;AAC1B,UAAI,MAAM,WAAW,SAAU;AAAA,IACjC,OAAO;AACL,gBAAU;AAAA,IACZ;AAAA,EACF;AAEA,MAAI,MAAM,SAAS,YAAY,QAAQ,KAAK,MAAM,GAAI,OAAM,KAAK,QAAQ,QAAQ,CAAC;AAElF,MAAI,MAAM,WAAW,UAAU;AAG7B,UAAM,SAAS,MAAM,KAAK,EAAE,EAAE,QAAQ,QAAQ,EAAE;AAChD,UAAM,QAAQ,KAAK,QAAQ,QAAQ,EAAE;AACrC,QAAI,OAAO,SAAS,MAAM,QAAQ;AAChC,YAAM,OAAO,MAAM,WAAW,CAAC,KAAK;AACpC,YAAM,WAAW,CAAC,IAAI,GAAG,aAAa,MAAM,UAAU,WAAW,UAAU,UAAK,QAAQ,CAAC,CAAC;AAAA,IAC5F;AAAA,EACF;AAEA,SAAO;AACT;AAGA,SAAS,aAAa,MAAc,UAAkB,UAA0B;AAC9E,MAAI,QAAQ;AACZ,MAAI,MAAM;AACV,aAAW,aAAa,MAAM;AAC5B,UAAM,OAAO,UAAU,WAAW,QAAQ;AAC1C,QAAI,QAAQ,OAAO,SAAU;AAC7B,aAAS;AACT,WAAO;AAAA,EACT;AACA,SAAO,IAAI,QAAQ;AACrB;AAUO,MAAM,OAAO;AAAA;AAAA,EAElB,OAAO;AAAA;AAAA,EAEP,KAAK;AAAA;AAAA,EAEL,MAAM;AAAA;AAAA,EAEN,MAAM;AAAA;AAAA,EAEN,MAAM;AACR;AAGO,MAAM,MAAM;AAAA,EACjB,MAAM,EAAE,GAAG,KAAK,GAAG,GAAG;AAAA,EACtB,MAAM,EAAE,GAAG,KAAK,GAAG,GAAG;AAAA,EACtB,aAAa,EAAE,GAAG,KAAK,GAAG,GAAG;AAC/B;AAWO,SAAS,WACd,YACA,QACA,SAAS,OACT,OAAe,IAAI,KAAK,GAChB;AACR,QAAM,UACJ,KAAK,cAAc,KAAK,QAAQ,SAAS,SAAS,KAAK,MAAM,MAAM,MAAM,SAAS,KAAK;AACzF,SAAO,KAAK,IAAI,MAAM,KAAK,KAAK,OAAO,CAAC;AAC1C;AAGO,SAAS,UAAU,KAAkB;AAC1C,SAAO,GAAG,MAAM,IAAI,CAAC,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC;AACxE;AAUO,SAAS,MAAM,OAAuB;AAC3C,SAAO,KAAK,MAAM,QAAQ,EAAE,IAAI;AAClC;","names":[]}

package/dist/diagrams/lib/legend.d.ts

@@ -0,0 +1,32 @@
+import { NodeKind, LegendMode, LifecycleStateKind, Variant } from '../spec.js';
+
+type LegendEntry = {
+    key: string;
+    label: string;
+    sample: React.ReactNode;
+};
+/**
+ * Which entries the key shows.
+ *
+ * `auto` — the default and the truthful one — lists only the kinds the figure
+ * actually drew. A key that names seven kinds beside a figure using three is
+ * not more informative; it is four claims the picture does not support.
+ */
+declare function resolveLegend<T extends string>(used: T[], mode?: LegendMode, all?: T[], overrides?: Record<string, {
+    label?: string;
+    visible?: boolean;
+}>): T[];
+/** A key entry for each node kind, drawn with the same sigil the figure uses. */
+declare function kindLegend(kinds: NodeKind[], overrides?: Record<string, {
+    label?: string;
+}>): LegendEntry[];
+/** A key entry for each relationship variant, drawn as the line itself. */
+declare function variantLegend(variants: (Variant | 'return')[], overrides?: Record<string, {
+    label?: string;
+}>): LegendEntry[];
+/** A key entry for each lifecycle state kind, drawn as its plate. */
+declare function stateLegend(kinds: LifecycleStateKind[], overrides?: Record<string, {
+    label?: string;
+}>): LegendEntry[];
+
+export { type LegendEntry, kindLegend, resolveLegend, stateLegend, variantLegend };