@misoto22/design 0.6.0 → 0.7.0

package/dist/agent/catalog.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.0",
+  "version": "0.7.0",
   "groups": [
     "Actions",
     "Forms",
@@ -9,11 +9,13 @@
     "Display",
     "Surfaces",
     "Data",
-    "Charts"
+    "Charts",
+    "Diagrams"
   ],
   "components": [
     {
       "slug": "button",
+      "entry": "@misoto22/design",
       "name": "Button",
       "group": "Actions",
       "summary": "The system’s action, on the same corner as the field beside it.",
@@ -45,6 +47,7 @@
     },
     {
       "slug": "floating-icon-button",
+      "entry": "@misoto22/design",
       "name": "FloatingIconButton",
       "group": "Actions",
       "summary": "A round action pinned to a screen corner.",
@@ -59,6 +62,7 @@
     },
     {
       "slug": "badge",
+      "entry": "@misoto22/design",
       "name": "Badge",
       "group": "Display",
       "summary": "A count or a state, set in mono so it reads as metadata.",
@@ -74,6 +78,7 @@
     },
     {
       "slug": "tag",
+      "entry": "@misoto22/design",
       "name": "Tag",
       "group": "Display",
       "summary": "A subject label — a topic, a technology, a filter facet.",
@@ -87,6 +92,7 @@
     },
     {
       "slug": "kbd",
+      "entry": "@misoto22/design",
       "name": "Kbd",
       "group": "Display",
       "summary": "A key on a keyboard, set as one.",
@@ -99,6 +105,7 @@
     },
     {
       "slug": "avatar",
+      "entry": "@misoto22/design",
       "name": "Avatar",
       "group": "Display",
       "summary": "A person, as a circle, with initials until the image lands.",
@@ -109,6 +116,7 @@
     },
     {
       "slug": "status-dot",
+      "entry": "@misoto22/design",
       "name": "StatusDot",
       "group": "Display",
       "summary": "The dot beside a status word.",
@@ -122,6 +130,7 @@
     },
     {
       "slug": "steps",
+      "entry": "@misoto22/design",
       "name": "Steps",
       "group": "Display",
       "summary": "A numbered sequence, as a rail — one thing after another, with a rule through them.",
@@ -138,6 +147,7 @@
     },
     {
       "slug": "status-pill",
+      "entry": "@misoto22/design",
       "name": "StatusPill",
       "group": "Display",
       "summary": "A live state, named: a dot plus an uppercase mono label.",
@@ -148,6 +158,7 @@
     },
     {
       "slug": "link-arrow",
+      "entry": "@misoto22/design",
       "name": "LinkArrow",
       "group": "Display",
       "summary": "The mark on a link that leaves the page.",
@@ -158,6 +169,7 @@
     },
     {
       "slug": "separator",
+      "entry": "@misoto22/design",
       "name": "Separator",
       "group": "Display",
       "summary": "A rule, in the three weights a monochrome page needs.",
@@ -168,6 +180,7 @@
     },
     {
       "slug": "diagram",
+      "entry": "@misoto22/design",
       "name": "Diagram",
       "group": "Display",
       "summary": "A flow or architecture figure, drawn out of the system’s own parts.",
@@ -184,6 +197,7 @@
     },
     {
       "slug": "figure-band",
+      "entry": "@misoto22/design",
       "name": "FigureBand",
       "group": "Display",
       "summary": "A row of counted facts, divided by hairlines and nothing else.",
@@ -196,6 +210,7 @@
     },
     {
       "slug": "spinner",
+      "entry": "@misoto22/design",
       "name": "Spinner",
       "group": "Feedback",
       "summary": "The one “working” indicator — a ring, never a shimmer.",
@@ -212,6 +227,7 @@
     },
     {
       "slug": "skeleton",
+      "entry": "@misoto22/design",
       "name": "Skeleton",
       "group": "Feedback",
       "summary": "The shape of the page, before the page.",
@@ -227,6 +243,7 @@
     },
     {
       "slug": "progress",
+      "entry": "@misoto22/design",
       "name": "Progress",
       "group": "Feedback",
       "summary": "A bar that fills, or sweeps when the end is unknown.",
@@ -240,6 +257,7 @@
     },
     {
       "slug": "alert",
+      "entry": "@misoto22/design",
       "name": "Alert",
       "group": "Feedback",
       "summary": "A message about the page, in place.",
@@ -255,6 +273,7 @@
     },
     {
       "slug": "empty-state",
+      "entry": "@misoto22/design",
       "name": "EmptyState",
       "group": "Feedback",
       "summary": "A collection with nothing in it — yet.",
@@ -266,6 +285,7 @@
     },
     {
       "slug": "error-state",
+      "entry": "@misoto22/design",
       "name": "ErrorState",
       "group": "Feedback",
       "summary": "A page that could not be shown.",
@@ -279,6 +299,7 @@
     },
     {
       "slug": "toast",
+      "entry": "@misoto22/design",
       "name": "Toast",
       "group": "Feedback",
       "summary": "A transient confirmation, mounted once near the app root.",
@@ -289,6 +310,7 @@
     },
     {
       "slug": "field",
+      "entry": "@misoto22/design",
       "name": "Field",
       "group": "Forms",
       "summary": "A labelled form row: label, control, and the one message below it.",
@@ -304,6 +326,7 @@
     },
     {
       "slug": "input",
+      "entry": "@misoto22/design",
       "name": "Input",
       "group": "Forms",
       "summary": "A single line of text entry.",
@@ -317,6 +340,7 @@
     },
     {
       "slug": "textarea",
+      "entry": "@misoto22/design",
       "name": "Textarea",
       "group": "Forms",
       "summary": "Multi-line text entry, resizable vertically only.",
@@ -327,6 +351,7 @@
     },
     {
       "slug": "select",
+      "entry": "@misoto22/design",
       "name": "Select",
       "group": "Forms",
       "summary": "A choice from a list, styled the whole way down.",
@@ -381,6 +406,7 @@
     },
     {
       "slug": "native-select",
+      "entry": "@misoto22/design",
       "name": "NativeSelect",
       "group": "Forms",
       "summary": "The platform’s own picker, restyled where it can be.",
@@ -411,6 +437,7 @@
     },
     {
       "slug": "checkbox",
+      "entry": "@misoto22/design",
       "name": "Checkbox",
       "group": "Forms",
       "summary": "A choice that takes effect when the form is submitted.",
@@ -433,6 +460,7 @@
     },
     {
       "slug": "radio-group",
+      "entry": "@misoto22/design",
       "name": "RadioGroup",
       "group": "Forms",
       "summary": "A set of mutually exclusive choices.",
@@ -464,6 +492,7 @@
     },
     {
       "slug": "switch",
+      "entry": "@misoto22/design",
       "name": "Switch",
       "group": "Forms",
       "summary": "A setting that takes effect immediately.",
@@ -483,6 +512,7 @@
     },
     {
       "slug": "dialog",
+      "entry": "@misoto22/design",
       "name": "Dialog",
       "group": "Overlays",
       "summary": "A modal surface: portal, scrim, centred panel.",
@@ -511,6 +541,7 @@
     },
     {
       "slug": "dropdown-menu",
+      "entry": "@misoto22/design",
       "name": "DropdownMenu",
       "group": "Overlays",
       "summary": "A menu of actions.",
@@ -555,6 +586,7 @@
     },
     {
       "slug": "tooltip",
+      "entry": "@misoto22/design",
       "name": "Tooltip",
       "group": "Overlays",
       "summary": "A short label on hover and on focus.",
@@ -584,6 +616,7 @@
     },
     {
       "slug": "tabs",
+      "entry": "@misoto22/design",
       "name": "Tabs",
       "group": "Navigation",
       "summary": "One strip, several panels.",
@@ -619,6 +652,7 @@
     },
     {
       "slug": "accordion",
+      "entry": "@misoto22/design",
       "name": "Accordion",
       "group": "Navigation",
       "summary": "Disclosure rows that open in place.",
@@ -644,6 +678,7 @@
     },
     {
       "slug": "breadcrumb",
+      "entry": "@misoto22/design",
       "name": "Breadcrumb",
       "group": "Navigation",
       "summary": "Where you are, as a path.",
@@ -657,6 +692,7 @@
     },
     {
       "slug": "pagination",
+      "entry": "@misoto22/design",
       "name": "Pagination",
       "group": "Navigation",
       "summary": "Numbered pages, with the middle elided.",
@@ -685,6 +721,7 @@
     },
     {
       "slug": "nav-item",
+      "entry": "@misoto22/design",
       "name": "NavItem",
       "group": "Navigation",
       "summary": "A row in a sidebar.",
@@ -697,6 +734,7 @@
     },
     {
       "slug": "article",
+      "entry": "@misoto22/design",
       "name": "Article",
       "group": "Surfaces",
       "summary": "The long-form reading surface — everything a Markdown pipeline emits, in this system’s type.",
@@ -713,6 +751,7 @@
     },
     {
       "slug": "card",
+      "entry": "@misoto22/design",
       "name": "Card",
       "group": "Surfaces",
       "summary": "A bounded surface, with no shadow under it.",
@@ -724,6 +763,7 @@
     },
     {
       "slug": "table",
+      "entry": "@misoto22/design",
       "name": "Table",
       "group": "Data",
       "summary": "A ruled data table — alignment, sorting and rules all per column.",
@@ -757,6 +797,7 @@
     },
     {
       "slug": "app-shell",
+      "entry": "@misoto22/design",
       "name": "AppShell",
       "group": "Surfaces",
       "summary": "Two columns on a desktop, a drawer on a phone.",
@@ -770,6 +811,7 @@
     },
     {
       "slug": "combobox",
+      "entry": "@misoto22/design",
       "name": "Combobox",
       "group": "Forms",
       "summary": "A select you can type into.",
@@ -814,6 +856,7 @@
     },
     {
       "slug": "date-picker",
+      "entry": "@misoto22/design",
       "name": "DatePicker",
       "group": "Forms",
       "summary": "A date — or a span of them — chosen from a calendar.",
@@ -846,6 +889,7 @@
     },
     {
       "slug": "slider",
+      "entry": "@misoto22/design",
       "name": "Slider",
       "group": "Forms",
       "summary": "A value chosen along a range.",
@@ -883,6 +927,7 @@
     },
     {
       "slug": "toggle-group",
+      "entry": "@misoto22/design",
       "name": "ToggleGroup",
       "group": "Forms",
       "summary": "A segmented control: several options, one strip.",
@@ -919,6 +964,7 @@
     },
     {
       "slug": "popover",
+      "entry": "@misoto22/design",
       "name": "Popover",
       "group": "Overlays",
       "summary": "A panel anchored to a control, holding content you can interact with.",
@@ -956,6 +1002,7 @@
     },
     {
       "slug": "sheet",
+      "entry": "@misoto22/design",
       "name": "Sheet",
       "group": "Overlays",
       "summary": "A panel docked to an edge of the viewport.",
@@ -985,6 +1032,7 @@
     },
     {
       "slug": "context-menu",
+      "entry": "@misoto22/design",
       "name": "ContextMenu",
       "group": "Overlays",
       "summary": "The menu a right-click opens.",
@@ -1017,6 +1065,7 @@
     },
     {
       "slug": "searchable-menu",
+      "entry": "@misoto22/design",
       "name": "SearchableMenu",
       "group": "Overlays",
       "summary": "A menu of actions you can type into.",
@@ -1062,6 +1111,7 @@
     },
     {
       "slug": "command",
+      "entry": "@misoto22/design",
       "name": "Command",
       "group": "Overlays",
       "summary": "A filterable list of actions — the ⌘K surface.",
@@ -1096,6 +1146,7 @@
     },
     {
       "slug": "collapsible",
+      "entry": "@misoto22/design",
       "name": "Collapsible",
       "group": "Navigation",
       "summary": "One thing that opens, on its own.",
@@ -1115,6 +1166,7 @@
     },
     {
       "slug": "calendar",
+      "entry": "@misoto22/design",
       "name": "Calendar",
       "group": "Surfaces",
       "summary": "A month, as a grid of days.",
@@ -1168,6 +1220,7 @@
     },
     {
       "slug": "scroll-area",
+      "entry": "@misoto22/design",
       "name": "ScrollArea",
       "group": "Surfaces",
       "summary": "A box that scrolls, with a scrollbar that looks the same everywhere.",
@@ -1199,6 +1252,7 @@
     },
     {
       "slug": "heatmap",
+      "entry": "@misoto22/design/charts",
       "name": "Heatmap",
       "group": "Data",
       "summary": "A grid of values read by weight.",
@@ -1216,6 +1270,7 @@
     },
     {
       "slug": "sparkline",
+      "entry": "@misoto22/design/charts",
       "name": "Sparkline",
       "group": "Data",
       "summary": "A run of numbers at the size of a word.",
@@ -1233,6 +1288,7 @@
     },
     {
       "slug": "bar-list",
+      "entry": "@misoto22/design/charts",
       "name": "BarList",
       "group": "Data",
       "summary": "A ranked list, with the bar behind the name rather than beside it.",
@@ -1249,6 +1305,7 @@
     },
     {
       "slug": "big-number",
+      "entry": "@misoto22/design/charts",
       "name": "BigNumber",
       "group": "Data",
       "summary": "One number, at the size of a headline.",
@@ -1265,6 +1322,7 @@
     },
     {
       "slug": "bullet-chart",
+      "entry": "@misoto22/design/charts",
       "name": "BulletChart",
       "group": "Data",
       "summary": "A measure, its target, and the bands that say whether it is any good.",
@@ -1282,6 +1340,7 @@
     },
     {
       "slug": "area-chart",
+      "entry": "@misoto22/design/charts",
       "name": "AreaChart",
       "group": "Charts",
       "summary": "A filled series over a continuous axis, where the area means something.",
@@ -1315,6 +1374,7 @@
     },
     {
       "slug": "bar-chart",
+      "entry": "@misoto22/design/charts",
       "name": "BarChart",
       "group": "Charts",
       "summary": "Discrete categories compared by length.",
@@ -1333,6 +1393,7 @@
     },
     {
       "slug": "line-chart",
+      "entry": "@misoto22/design/charts",
       "name": "LineChart",
       "group": "Charts",
       "summary": "Several series compared over a continuous axis.",
@@ -1349,6 +1410,7 @@
     },
     {
       "slug": "composed-chart",
+      "entry": "@misoto22/design/charts",
       "name": "ComposedChart",
       "group": "Charts",
       "summary": "Bars and lines over one axis — the volume, and the rate it moved at.",
@@ -1365,6 +1427,7 @@
     },
     {
       "slug": "pie-chart",
+      "entry": "@misoto22/design/charts",
       "name": "PieChart",
       "group": "Charts",
       "summary": "Parts of one whole.",
@@ -1382,6 +1445,7 @@
     },
     {
       "slug": "radar-chart",
+      "entry": "@misoto22/design/charts",
       "name": "RadarChart",
       "group": "Charts",
       "summary": "A profile across several named dimensions.",
@@ -1397,6 +1461,7 @@
     },
     {
       "slug": "radial-chart",
+      "entry": "@misoto22/design/charts",
       "name": "RadialChart",
       "group": "Charts",
       "summary": "Values on an arc — a gauge, or a few totals against one scale.",
@@ -1413,6 +1478,7 @@
     },
     {
       "slug": "sankey-chart",
+      "entry": "@misoto22/design/charts",
       "name": "SankeyChart",
       "group": "Charts",
       "summary": "Where a quantity goes as it moves through stages.",
@@ -1427,6 +1493,7 @@
     },
     {
       "slug": "scatter-chart",
+      "entry": "@misoto22/design/charts",
       "name": "ScatterChart",
       "group": "Charts",
       "summary": "Two measures against each other, one mark per observation.",
@@ -1444,6 +1511,7 @@
     },
     {
       "slug": "funnel-chart",
+      "entry": "@misoto22/design/charts",
       "name": "FunnelChart",
       "group": "Charts",
       "summary": "Stages that only ever narrow.",
@@ -1460,6 +1528,7 @@
     },
     {
       "slug": "treemap-chart",
+      "entry": "@misoto22/design/charts",
       "name": "TreemapChart",
       "group": "Charts",
       "summary": "Part of a whole, when the whole has too many parts for a pie — and the parts nest.",
@@ -1476,6 +1545,7 @@
     },
     {
       "slug": "box-plot",
+      "entry": "@misoto22/design/charts",
       "name": "BoxPlot",
       "group": "Charts",
       "summary": "The spread of a measurement, per category.",
@@ -1493,6 +1563,7 @@
     },
     {
       "slug": "histogram",
+      "entry": "@misoto22/design/charts",
       "name": "Histogram",
       "group": "Charts",
       "summary": "The shape of one distribution.",
@@ -1510,6 +1581,7 @@
     },
     {
       "slug": "waterfall-chart",
+      "entry": "@misoto22/design/charts",
       "name": "WaterfallChart",
       "group": "Charts",
       "summary": "How a total got from one figure to another.",
@@ -1527,6 +1599,7 @@
     },
     {
       "slug": "facet",
+      "entry": "@misoto22/design/charts",
       "name": "Facet",
       "group": "Charts",
       "summary": "The same chart once per group, on one shared scale.",
@@ -1541,6 +1614,211 @@
         "line-chart",
         "sparkline"
       ]
+    },
+    {
+      "slug": "architecture-figure",
+      "entry": "@misoto22/design/diagrams",
+      "name": "ArchitectureFigure",
+      "group": "Diagrams",
+      "summary": "A component map: services, datastores, trust boundaries, and what talks to what.",
+      "when": "Reach for it when the question is \"what talks to what\". If the question is \"in what order\", that is a workflow or a sequence; if it is \"what is in this arrow\", that is a data flow.",
+      "accessibility": [
+        "The <svg> is role=\"img\" with a name, so a screen reader announces a picture instead of walking two hundred <text> nodes in drawing order.",
+        "The diagram’s content is published beside it as an ordinary list — every node with its kind, every relationship as \"A → B: over HTTPS\". That list is where the meaning lives for anyone not looking at the picture.",
+        "Passing onSelectNode turns that list into real buttons, which is the keyboard’s only route to a selection: the plates inside the picture are presentational by construction."
+      ],
+      "related": [
+        "dataflow-figure",
+        "diagram",
+        "diagram-canvas"
+      ]
+    },
+    {
+      "slug": "workflow-figure",
+      "entry": "@misoto22/design/diagrams",
+      "name": "WorkflowFigure",
+      "group": "Diagrams",
+      "summary": "A process in lanes and phases, with the main path drawn heavier than its branches.",
+      "when": "A runbook, an approval chain, a CI pipeline — anything with an owner per step. mainPath is what turns fourteen boxes into a diagram with a subject.",
+      "accessibility": [
+        "Same contract as every figure: a named picture, with its nodes and relationships published as text beside it.",
+        "The exception lane is the one washed band in the system’s diagrams, and it is still labelled — the wash is not carrying the meaning on its own."
+      ],
+      "related": [
+        "lifecycle-figure",
+        "sequence-figure",
+        "steps"
+      ]
+    },
+    {
+      "slug": "sequence-figure",
+      "entry": "@misoto22/design/diagrams",
+      "name": "SequenceFigure",
+      "group": "Diagrams",
+      "summary": "A call chain over time: who asks whom, in what order, and what comes back.",
+      "when": "The only figure whose vertical axis means something. A message carries an explicit y, so two calls eight units apart happened together and two two hundred apart did not.",
+      "accessibility": [
+        "Return messages are dashed AND take an open arrowhead — two signals, because the reply is what a reader most often needs to pick out of a dense trace.",
+        "The message list beside the picture reads in order, which is the same order the axis is drawn in."
+      ],
+      "related": [
+        "workflow-figure",
+        "architecture-figure"
+      ]
+    },
+    {
+      "slug": "dataflow-figure",
+      "entry": "@misoto22/design/diagrams",
+      "name": "DataflowFigure",
+      "group": "Diagrams",
+      "summary": "A pipeline: where data comes from, what happens to it, and who ends up with it.",
+      "when": "Structurally close to an architecture map, read for a different question. classification gets its own chip because a governance reviewer is looking for exactly that.",
+      "accessibility": [
+        "A flow’s classification is folded into its summary line, so \"clickstream — PII touch\" reaches a reader who cannot see the chip."
+      ],
+      "related": [
+        "architecture-figure",
+        "lifecycle-figure"
+      ]
+    },
+    {
+      "slug": "lifecycle-figure",
+      "entry": "@misoto22/design/diagrams",
+      "name": "LifecycleFigure",
+      "group": "Diagrams",
+      "summary": "A state machine: what something can be, and what moves it between states.",
+      "when": "The one figure that spends colour, and it spends exactly the two tokens the system reserves for state. Every other distinction is shape, so a greyscale print keeps six of the eight.",
+      "accessibility": [
+        "success and failure are the only coloured marks in the package’s diagrams, and each is also a distinct plate shape — colour is never the only carrier.",
+        "The main rail is drawn between consecutive states in the first lane even when the specification does not list those transitions, because they are the diagram’s spine rather than its exceptions."
+      ],
+      "related": [
+        "workflow-figure",
+        "steps"
+      ]
+    },
+    {
+      "slug": "diagram-canvas",
+      "entry": "@misoto22/design/diagrams",
+      "name": "DiagramCanvas",
+      "group": "Diagrams",
+      "summary": "A frame that a picture larger than it can be panned and zoomed inside.",
+      "when": "Any oversized figure — an SVG, an image, a table that will not fold. It knows nothing about nodes, which is what makes it reusable.",
+      "accessibility": [
+        "The frame is a real tab stop, so the keyboard controls can be pressed at all.",
+        "A plain wheel scrolls the page. Zoom needs the platform modifier, so the canvas is never a scroll trap in the middle of an article."
+      ],
+      "keyboard": [
+        {
+          "keys": [
+            "+",
+            "="
+          ],
+          "does": "Zooms in about the centre of the frame."
+        },
+        {
+          "keys": [
+            "-"
+          ],
+          "does": "Zooms out."
+        },
+        {
+          "keys": [
+            "0"
+          ],
+          "does": "Resets the scale and the offset together."
+        },
+        {
+          "keys": [
+            "←",
+            "→",
+            "↑",
+            "↓"
+          ],
+          "does": "Pans. Shift pans further per press."
+        }
+      ],
+      "related": [
+        "diagram-minimap",
+        "architecture-figure",
+        "scroll-area"
+      ]
+    },
+    {
+      "slug": "diagram-toolbar",
+      "entry": "@misoto22/design/diagrams",
+      "name": "DiagramToolbar",
+      "group": "Diagrams",
+      "summary": "A bar of actions belonging to the surface underneath them.",
+      "when": "FloatingIconButton is one pinned action. This is the container for several, so they read as one object rather than as a scatter.",
+      "accessibility": [
+        "role=\"toolbar\" announces a toolbar rather than six unrelated buttons. It does not implement roving focus — Tab visits every control, which is honest for a bar of three."
+      ],
+      "related": [
+        "floating-icon-button",
+        "diagram-export-menu"
+      ]
+    },
+    {
+      "slug": "diagram-export-menu",
+      "entry": "@misoto22/design/diagrams",
+      "name": "DiagramExportMenu",
+      "group": "Diagrams",
+      "summary": "Taking the figure off the page: PNG, JPEG, WebP, SVG and a 1200×630 share card.",
+      "when": "It does the export rather than emitting a format name, because the interesting half — baking custom properties into real colours before serialising — is the half a caller would not know to write.",
+      "accessibility": [
+        "A failed export is reported through onResult rather than swallowed: a click that quietly does nothing is indistinguishable from a broken button."
+      ],
+      "related": [
+        "dropdown-menu",
+        "diagram-toolbar"
+      ]
+    },
+    {
+      "slug": "diagram-inspector",
+      "entry": "@misoto22/design/diagrams",
+      "name": "DiagramInspector",
+      "group": "Diagrams",
+      "summary": "What the reader just picked, written out beside the picture.",
+      "when": "A node holds about eight words before it stops being a node. Everything past those — the port, the owner, the six relationships — belongs here.",
+      "accessibility": [
+        "A labelled region with aria-live=\"polite\", not a dialog: the reader clicked a node, they did not open anything, so focus is never trapped or demanded.",
+        "Relationships are real buttons when they carry onSelect, which is how the graph becomes walkable peer by peer from the keyboard."
+      ],
+      "related": [
+        "card",
+        "diagram-canvas"
+      ]
+    },
+    {
+      "slug": "diagram-minimap",
+      "entry": "@misoto22/design/diagrams",
+      "name": "DiagramMinimap",
+      "group": "Diagrams",
+      "summary": "Where you are in something bigger than the window.",
+      "when": "Pairs with DiagramCanvas. The viewport rectangle is derived from the canvas’s own view, never stored — a map that disagrees with its territory is worse than none.",
+      "accessibility": [
+        "The miniature is aria-hidden. The figure it mirrors already publishes its own summary, and a second copy would read the whole diagram out twice."
+      ],
+      "related": [
+        "diagram-canvas"
+      ]
+    },
+    {
+      "slug": "diagram-legend",
+      "entry": "@misoto22/design/diagrams",
+      "name": "DiagramLegend",
+      "group": "Diagrams",
+      "summary": "The key: which drawn form means which kind of thing.",
+      "when": "Not optional furniture in a monochrome system. When a queue and a cache differ by a sigil rather than a colour, this is the only place a reader is told what the sigil means.",
+      "accessibility": [
+        "A list of pairs rather than a row of spans, so the count is part of what a screen reader says about it.",
+        "kindLegend, variantLegend and stateLegend build the standard sets out of the renderers’ own drawing code, so the key can never drift from the figure."
+      ],
+      "related": [
+        "architecture-figure",
+        "lifecycle-figure"
+      ]
     }
   ],
   "exports": {
@@ -1714,7 +1992,21 @@
     "TreemapExtras": "TreemapChart",
     "WaterfallChart": "WaterfallChart",
     "WaterfallStepType": "WaterfallChart",
-    "WaterfallDirection": "WaterfallChart"
+    "WaterfallDirection": "WaterfallChart",
+    "ArchitectureFigure": "ArchitectureFigure",
+    "DataflowFigure": "DataflowFigure",
+    "DiagramCanvas": "DiagramCanvas",
+    "DiagramExportMenu": "DiagramExportMenu",
+    "exportFigure": "DiagramExportMenu",
+    "ExportFormat": "DiagramExportMenu",
+    "DiagramInspector": "DiagramInspector",
+    "DiagramLegend": "DiagramLegend",
+    "DiagramMinimap": "DiagramMinimap",
+    "DiagramToolbar": "DiagramToolbar",
+    "DiagramToolbarGroup": "DiagramToolbar",
+    "LifecycleFigure": "LifecycleFigure",
+    "SequenceFigure": "SequenceFigure",
+    "WorkflowFigure": "WorkflowFigure"
   },
   "themeAxes": [
     {