@misoto22/design 0.6.1 → 0.7.0

package/dist/tokens.json

@@ -879,6 +879,88 @@
     "category": "layer",
     "light": "var(--z-scrim)"
   },
+  "diagram-surface": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--paper)",
+    "comment": "─── Diagrams ─────────────────────────────────────────────────────────── The figures in `@misoto22/design/diagrams`, which draw in SVG and therefore cannot read a custom property from a presentation attribute — every one of these reaches a mark through a style rule. Named separately from the page's own rules rather than pointed straight at --rule-2 because a figure is a PICTURE inside a document: its hairline has to hold up against a 1200-wide raster export and a greyscale print, where the page's own hairline is chosen to disappear. Keeping the two apart is what lets a figure be tuned without touching a table. Nothing here is a hue. The seven kinds of node are separated by drawn sigils, and the only colour a figure spends is --success / --danger on a terminal lifecycle state — the same two the rest of the system reserves for state and refuses to spend on brand."
+  },
+  "diagram-node": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--paper)"
+  },
+  "diagram-node-2": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--paper-2)"
+  },
+  "diagram-band": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--stone)"
+  },
+  "diagram-chip": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--paper-2)"
+  },
+  "diagram-rule": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--rule-2)"
+  },
+  "diagram-rule-hard": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--ink-3-aa)"
+  },
+  "diagram-line": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--ink-2)"
+  },
+  "diagram-line-strong": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--ink)"
+  },
+  "diagram-line-soft": {
+    "layer": "semantic",
+    "category": "colour",
+    "light": "var(--ink-3-aa)"
+  },
+  "diagram-sigil": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--ink-3-aa)"
+  },
+  "diagram-ink": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--ink)"
+  },
+  "diagram-ink-2": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--ink-2)"
+  },
+  "diagram-ink-3": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--ink-3-aa)"
+  },
+  "diagram-plate": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--accent)",
+    "comment": "The reversed plate, and its type. A figure gets ONE of these — the node the diagram is about — for the same reason a page gets one Card variant=\"plate\"."
+  },
+  "diagram-plate-ink": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--accent-foreground)"
+  },
   "page-pad": {
     "layer": "semantic",
     "category": "space",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@misoto22/design",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "private": false,
   "description": "Monochrome design system — CSS tokens and accessible React primitives",
   "license": "MIT",
@@ -28,6 +28,10 @@
       "types": "./dist/charts/index.d.ts",
       "import": "./dist/charts/index.js"
     },
+    "./diagrams": {
+      "types": "./dist/diagrams/index.d.ts",
+      "import": "./dist/diagrams/index.js"
+    },
     "./styles.css": "./dist/styles.css",
     "./tokens.css": "./dist/tokens.css",
     "./semantic.css": "./dist/semantic.css",

package/skills/misoto22-design/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: misoto22-design
-description: Builds UI with @misoto22/design — a monochrome design system of CSS tokens and 72 accessible React primitives, charts included. Use when a project imports '@misoto22/design' or '@misoto22/design/charts', sets data-mode / data-surface / data-radius / data-density, or uses cn(), CONTROL_BASE, or isInvalid. Also applies when adding a component, theming, plotting data, or fixing a form, table, dialog, or toast in such a project.
+description: Builds UI with @misoto22/design — a monochrome design system of CSS tokens and 83 accessible React primitives, charts and diagrams included. Use when a project imports '@misoto22/design', '@misoto22/design/charts' or '@misoto22/design/diagrams', sets data-mode / data-surface / data-radius / data-density, or uses cn(), CONTROL_BASE, or isInvalid. Also applies when adding a component, theming, plotting data, drawing an architecture, workflow, sequence, data-flow or lifecycle diagram, or fixing a form, table, dialog, or toast in such a project.
 allowed-tools: Bash(npx misoto22-design *), Bash(pnpm exec misoto22-design *), Bash(bunx misoto22-design *)
 ---
 
@@ -14,16 +14,19 @@ import { Button, Field, Input } from '@misoto22/design'
 import '@misoto22/design/styles.css'
 ```
 
-## Two entry points
+## Three entry points
 
-The root entry has no dependencies a consumer has to install. Everything that
-plots data lives behind a second specifier, because it needs a rendering engine
-and an animation runtime that nothing else in the package does:
+The root entry has no dependencies a consumer has to install. Two groups live
+behind their own specifier instead, each for weight the root should not carry:
 
 ```tsx
 import { AreaChart, BarList, BigNumber } from '@misoto22/design/charts'
+import { ArchitectureFigure, DiagramCanvas } from '@misoto22/design/diagrams'
 ```
 
+Charts need a rendering engine and an animation runtime that nothing else in
+the package does:
+
 ```bash
 pnpm add recharts motion      # optional peers, only for the charts entry
 ```
@@ -39,6 +42,16 @@ Some of the charts need no engine at all — `Heatmap` is a `<table>`,
 HTML — but they ship from the charts entry all the same, so the boundary stays
 one line rather than a list to memorise.
 
+Diagrams need no peer at all; they carry an orthogonal routing engine instead,
+which has no business in a bundle that renders a Badge. Reach for that entry
+when the task is to DRAW a system rather than to build a screen:
+`ArchitectureFigure` for what talks to what, `WorkflowFigure` for a process in
+lanes, `SequenceFigure` for a call chain over time, `DataflowFigure` for a
+pipeline, `LifecycleFigure` for a state machine. Each takes a typed JSON
+specification and renders on a server. `Diagram` is a different thing and stays
+on the root: a nesting CSS diagram for an article, not an SVG figure with
+routed edges.
+
 One more, for surfaces that cannot read a custom property — an OpenGraph card, a
 `theme-color`, a canvas:
 
@@ -66,8 +79,9 @@ npx misoto22-design docs Button
 
 Run that before writing against a component you have not used in this session.
 The median component is ~500 tokens and the largest is ~1,300, against far more
-for all seventy-two. It is generated from the installed source, so it cannot be
-out of date the way the website can.
+for all eighty-three. It is generated from the installed source, so it cannot be
+out of date the way the website can — and each file names the specifier it
+ships from on its `Import:` line, which is the half that matters below.
 
 It also resolves parts and types, not just components: `docs CardBody`,
 `docs TH` and `docs ButtonVariant` all land on the right file. When an import