@x12i/diagrams 1.0.0 → 1.1.0

package/dist/styles.css

@@ -0,0 +1,1389 @@
+/*
+ * @x12i/diagrams styles.
+ *
+ * Tokens only: no hard-coded colors, lengths or font sizes (a test enforces
+ * this). Requires the kit variables, for example:
+ *
+ *   @import "@x12i/themes/themes.css";
+ *   @import "@x12i/ui/styles.css";
+ *   @import "@x12i/diagrams/styles.css";
+ *
+ * Every selector sits inside :where(), so it has zero specificity and any app
+ * class overrides it. Components expose styling hooks as data attributes
+ * (data-kind, data-status, data-selected, ...). Text layout uses logical
+ * properties, so right-to-left works without extra CSS. The few physical
+ * properties (connection points, the viewport) follow React Flow's left-to-right
+ * coordinate system on purpose.
+ *
+ * This file restates the layout rules React Flow needs, so you do not import
+ * "@xyflow/react/dist/style.css". Its colors and sizes come from kit tokens.
+ */
+
+/* ------------------------------------------------------------ Canvas host */
+
+:where([data-kit="diagram-canvas"]) {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--kit-space-2);
+  inline-size: 100%;
+  min-inline-size: 0;
+  color: var(--kit-color-text-primary);
+  font-family: var(--kit-font-family-sans);
+  font-size: var(--kit-text-body-size);
+  line-height: var(--kit-text-body-line-height);
+}
+
+:where([data-kit="diagram-canvas"]):focus-visible {
+  outline: var(--kit-border-width-focus) solid var(--kit-color-border-focus);
+  outline-offset: var(--kit-space-0-5);
+}
+
+:where([data-kit="diagram-canvas"] > [data-slot="stage"]) {
+  position: relative;
+  box-sizing: border-box;
+  block-size: var(--diagram-height, calc(var(--kit-size-56) * 10));
+  min-block-size: calc(var(--kit-size-56) * 3);
+  overflow: hidden;
+  background-color: var(--kit-color-bg-canvas);
+  border: var(--kit-border-width-default) solid var(--kit-color-border-default);
+  border-radius: var(--kit-radius-panel);
+}
+
+:where([data-kit="diagram-canvas"] [data-slot="empty"]) {
+  position: absolute;
+  inset: 0;
+  z-index: var(--kit-z-sticky);
+  display: grid;
+  place-items: center;
+  margin: 0;
+  padding: var(--kit-space-4);
+  color: var(--kit-color-text-secondary);
+  text-align: center;
+  pointer-events: none;
+}
+
+/* ----------------------------------------------- React Flow layout (restated) */
+
+:where([data-kit="diagram-canvas"] .react-flow) {
+  direction: ltr;
+  --xy-background-color: transparent;
+  --xy-edge-stroke: var(--kit-color-border-strong);
+  --xy-edge-stroke-width: var(--kit-border-width-default);
+  --xy-edge-stroke-selected: var(--kit-color-accent-default);
+  --xy-connectionline-stroke: var(--kit-color-accent-default);
+  --xy-connectionline-stroke-width: var(--kit-border-width-emphasis);
+  --xy-handle-background-color: var(--kit-color-border-strong);
+  --xy-selection-background-color: var(--kit-color-selection);
+  --xy-selection-border: var(--kit-border-width-default) dashed var(--kit-color-accent-default);
+  --xy-resize-background-color: var(--kit-color-accent-default);
+  --xy-background-pattern-color: var(--kit-color-border-default);
+  --xy-minimap-background-color: var(--kit-color-bg-surface);
+  --xy-minimap-mask-background-color: var(--kit-color-scrim);
+  --xy-minimap-node-background-color: var(--kit-color-border-default);
+  --xy-minimap-node-stroke-width: 0;
+  background-color: var(--xy-background-color);
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__background) {
+  background-color: var(--xy-background-color);
+  pointer-events: none;
+  z-index: -1;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__background-pattern) {
+  fill: var(--xy-background-pattern-color);
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__container) {
+  position: absolute;
+  inline-size: 100%;
+  block-size: 100%;
+  top: 0;
+  left: 0;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__pane) {
+  z-index: 1;
+  touch-action: none;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__pane.draggable) {
+  cursor: grab;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__pane.dragging) {
+  cursor: grabbing;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__pane.selection) {
+  cursor: pointer;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__viewport) {
+  transform-origin: 0 0;
+  z-index: 2;
+  pointer-events: none;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__renderer) {
+  z-index: 4;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__selection) {
+  z-index: 6;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__nodesselection) {
+  z-index: 3;
+  transform-origin: left top;
+  pointer-events: none;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__nodesselection-rect) {
+  position: absolute;
+  pointer-events: all;
+  cursor: grab;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__nodesselection-rect),
+:where([data-kit="diagram-canvas"] .react-flow__selection) {
+  background: var(--xy-selection-background-color);
+  border: var(--xy-selection-border);
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__edges) {
+  position: absolute;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__edges svg) {
+  position: absolute;
+  overflow: visible;
+  pointer-events: none;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__edge) {
+  pointer-events: visibleStroke;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__edge.selectable) {
+  cursor: pointer;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__edge.inactive) {
+  pointer-events: none;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__edge-path) {
+  fill: none;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__connection) {
+  pointer-events: none;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__connection-path) {
+  fill: none;
+  stroke: var(--xy-connectionline-stroke);
+  stroke-width: var(--xy-connectionline-stroke-width);
+}
+
+:where([data-kit="diagram-canvas"] svg.react-flow__connectionline) {
+  position: absolute;
+  z-index: 1001;
+  overflow: visible;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__nodes) {
+  pointer-events: none;
+  transform-origin: 0 0;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__node) {
+  position: absolute;
+  box-sizing: border-box;
+  transform-origin: 0 0;
+  pointer-events: all;
+  cursor: default;
+  user-select: none;
+  /* A transparent outline stays visible in forced-colors mode; the visible ring is drawn on the node body. */
+  outline: var(--kit-border-width-focus) solid transparent;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__node.selectable) {
+  cursor: pointer;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__node.draggable) {
+  cursor: grab;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__node.draggable.dragging) {
+  cursor: grabbing;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__edgelabel-renderer),
+:where([data-kit="diagram-canvas"] .react-flow__viewport-portal) {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  user-select: none;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__edgelabel-renderer) {
+  pointer-events: none;
+}
+
+/* Panels (minimap, attribution) */
+
+:where([data-kit="diagram-canvas"] .react-flow__panel) {
+  position: absolute;
+  z-index: 5;
+  margin: var(--kit-space-3);
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__panel.top) {
+  top: 0;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__panel.bottom) {
+  bottom: 0;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__panel.left) {
+  left: 0;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__panel.right) {
+  right: 0;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__panel.top.center),
+:where([data-kit="diagram-canvas"] .react-flow__panel.bottom.center) {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__attribution) {
+  margin: 0;
+  padding-block: var(--kit-space-0-5);
+  padding-inline: var(--kit-space-1);
+  background: var(--kit-color-bg-surface);
+  font-size: var(--kit-text-caption-size);
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__attribution a) {
+  color: var(--kit-color-text-secondary);
+  text-decoration: none;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__pane.selection .react-flow__panel) {
+  pointer-events: none;
+}
+
+/* Minimap */
+
+:where([data-kit="diagram-canvas"] .react-flow__minimap) {
+  overflow: hidden;
+  background: var(--xy-minimap-background-color);
+  border: var(--kit-border-width-default) solid var(--kit-color-border-default);
+  border-radius: var(--kit-radius-control);
+  box-shadow: var(--kit-shadow-raised);
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__minimap-svg) {
+  display: block;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__minimap-mask) {
+  fill: var(--xy-minimap-mask-background-color);
+  fill-rule: evenodd;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__minimap-node) {
+  fill: var(--xy-minimap-node-background-color);
+  stroke-width: var(--xy-minimap-node-stroke-width);
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__minimap-node.success) {
+  fill: var(--kit-color-status-success-border);
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__minimap-node.warning) {
+  fill: var(--kit-color-status-warning-border);
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__minimap-node.danger) {
+  fill: var(--kit-color-status-danger-border);
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__minimap-node.info) {
+  fill: var(--kit-color-status-info-border);
+}
+
+/* ----------------------------------------------------------------- Nodes */
+
+:where([data-kit="diagram-node"]) {
+  --_bg: var(--kit-color-bg-surface);
+  --_fg: var(--kit-color-text-primary);
+  --_bd: var(--kit-color-border-default);
+  --_bw: var(--kit-border-width-default);
+
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 100%;
+  block-size: 100%;
+  padding-block: var(--kit-space-2);
+  padding-inline: var(--kit-space-3);
+  border: var(--_bw) solid var(--_bd);
+  border-radius: var(--kit-radius-8);
+  background-color: var(--_bg);
+  color: var(--_fg);
+  font-size: var(--kit-text-label-size);
+  font-weight: var(--kit-text-label-weight);
+  line-height: var(--kit-text-label-line-height);
+  text-align: center;
+  transition:
+    border-color var(--kit-duration-fast) var(--kit-easing-standard),
+    box-shadow var(--kit-duration-fast) var(--kit-easing-standard);
+}
+
+/* Kinds */
+
+:where([data-kit="diagram-node"][data-kind="start"]),
+:where([data-kit="diagram-node"][data-kind="end"]) {
+  border-radius: var(--kit-radius-pill);
+}
+
+:where([data-kit="diagram-node"][data-kind="start"]) {
+  --_bg: var(--kit-color-bg-inverse);
+  --_fg: var(--kit-color-text-inverse);
+  --_bd: var(--kit-color-bg-inverse);
+}
+
+:where([data-kit="diagram-node"][data-kind="end"]) {
+  --_bd: var(--kit-color-border-strong);
+  --_bw: var(--kit-border-width-emphasis);
+}
+
+:where([data-kit="diagram-node"][data-kind="decision"]) {
+  border: 0;
+  background-color: transparent;
+}
+
+:where([data-kit="diagram-node"][data-kind="decision"] > [data-slot="shape"]) {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  overflow: visible;
+  fill: var(--_bg);
+  stroke: var(--_bd);
+  stroke-width: var(--_bw);
+}
+
+:where([data-kit="diagram-node"][data-kind="decision"] > [data-slot="content"]) {
+  position: relative;
+  padding-inline: 20%;
+}
+
+:where([data-kit="diagram-node"][data-kind="group"]),
+:where([data-kit="diagram-node"][data-kind="subflow"]) {
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: flex-start;
+  padding: 0;
+  /* Edges between children run under the group, so its fill must stay see-through. */
+  background-color: color-mix(in srgb, var(--kit-color-accent-subtle) 35%, transparent);
+  border-style: dashed;
+  border-radius: var(--kit-radius-12);
+  text-align: start;
+}
+
+:where([data-kit="diagram-node"][data-kind="subflow"]) {
+  border-style: solid;
+}
+
+:where([data-kit="diagram-node"][data-kind="note"]) {
+  --_bg: var(--kit-color-status-warning-background);
+  --_fg: var(--kit-color-status-warning-foreground);
+  --_bd: var(--kit-color-status-warning-border);
+  align-items: flex-start;
+  justify-content: flex-start;
+  border-radius: var(--kit-radius-4);
+  text-align: start;
+}
+
+:where([data-kit="diagram-node"][data-kind="image"]),
+:where([data-kit="diagram-node"][data-kind="chart"]),
+:where([data-kit="diagram-node"][data-kind="code"]),
+:where([data-kit="diagram-node"][data-kind="entity"]) {
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: flex-start;
+  gap: var(--kit-space-2);
+  text-align: start;
+}
+
+:where([data-kit="diagram-node"][data-kind="entity"]) {
+  padding: 0;
+  gap: 0;
+}
+
+:where([data-kit="diagram-node"][data-kind="agent"]) {
+  gap: var(--kit-space-2);
+  justify-content: flex-start;
+  text-align: start;
+  border-radius: var(--kit-radius-12);
+}
+
+/* Status colors, the same ones a Badge and a chart use */
+
+:where([data-kit="diagram-node"][data-status="success"]) {
+  --_bg: var(--kit-color-status-success-background);
+  --_fg: var(--kit-color-status-success-foreground);
+  --_bd: var(--kit-color-status-success-border);
+}
+
+:where([data-kit="diagram-node"][data-status="warning"]) {
+  --_bg: var(--kit-color-status-warning-background);
+  --_fg: var(--kit-color-status-warning-foreground);
+  --_bd: var(--kit-color-status-warning-border);
+}
+
+:where([data-kit="diagram-node"][data-status="danger"]) {
+  --_bg: var(--kit-color-status-danger-background);
+  --_fg: var(--kit-color-status-danger-foreground);
+  --_bd: var(--kit-color-status-danger-border);
+}
+
+:where([data-kit="diagram-node"][data-status="info"]) {
+  --_bg: var(--kit-color-status-info-background);
+  --_fg: var(--kit-color-status-info-foreground);
+  --_bd: var(--kit-color-status-info-border);
+}
+
+/* Selection, focus and states */
+
+:where([data-kit="diagram-node"][data-selected]) {
+  --_bd: var(--kit-color-accent-default);
+  --_bw: var(--kit-border-width-emphasis);
+  box-shadow: 0 0 0 var(--kit-space-1) var(--kit-color-selection);
+}
+
+:where([data-kit="diagram-node"][data-kind="decision"][data-selected]) {
+  box-shadow: none;
+}
+
+:where([data-kit="diagram-node"][data-connecting]) {
+  outline: var(--kit-border-width-emphasis) dashed var(--kit-color-accent-default);
+  outline-offset: var(--kit-space-1);
+}
+
+:where([data-kit="diagram-node"][data-locked]) {
+  cursor: not-allowed;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__node:focus-visible > [data-kit="diagram-node"]) {
+  outline: var(--kit-border-width-focus) solid var(--kit-color-border-focus);
+  outline-offset: var(--kit-space-0-5);
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__node:focus-visible > [data-kit="diagram-node"][data-kind="decision"] > [data-slot="shape"]) {
+  stroke: var(--kit-color-border-focus);
+  stroke-width: var(--kit-border-width-focus);
+}
+
+/* Node content */
+
+:where([data-kit="diagram-node"] [data-slot="content"]) {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+:where([data-kit="diagram-node"] [data-slot="label"]) {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+:where([data-kit="diagram-node"] [data-placeholder]) {
+  color: var(--kit-color-text-secondary);
+  font-style: italic;
+}
+
+:where([data-kit="diagram-node"] [data-slot="header"]) {
+  display: flex;
+  align-items: center;
+  gap: var(--kit-space-2);
+  padding-block: var(--kit-space-1);
+  padding-inline: var(--kit-space-2);
+  font-weight: var(--kit-text-label-weight);
+}
+
+:where([data-kit="diagram-node"][data-kind="entity"] > [data-slot="header"]) {
+  padding-block: var(--kit-space-2);
+  padding-inline: var(--kit-space-3);
+  border-block-end: var(--kit-border-width-default) solid var(--_bd);
+  background-color: var(--kit-color-bg-canvas);
+  border-start-start-radius: var(--kit-radius-8);
+  border-start-end-radius: var(--kit-radius-8);
+}
+
+:where([data-kit="diagram-node"] [data-slot="count"]),
+:where([data-kit="diagram-node"] [data-slot="type"]),
+:where([data-kit="diagram-node"] [data-slot="role"]) {
+  color: var(--kit-color-text-secondary);
+  font-size: var(--kit-text-caption-size);
+  font-weight: var(--kit-text-caption-weight);
+}
+
+:where([data-kit="diagram-node"] [data-slot="role"]) {
+  display: block;
+}
+
+:where([data-kit="diagram-node"] [data-slot="fields"]) {
+  flex: 1;
+  min-block-size: 0;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  list-style: none;
+}
+
+:where([data-kit="diagram-node"] [data-slot="fields"] > li) {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--kit-space-3);
+  padding-block: var(--kit-space-0-5);
+  padding-inline: var(--kit-space-3);
+}
+
+:where([data-kit="diagram-node"] [data-slot="fields"] > li[data-key]) {
+  font-weight: var(--kit-font-weight-semibold);
+}
+
+:where([data-kit="diagram-node"] [data-slot="code"]) {
+  flex: 1;
+  min-block-size: 0;
+  margin: 0;
+  padding: var(--kit-space-2);
+  overflow: hidden;
+  border-radius: var(--kit-radius-4);
+  background-color: var(--kit-color-bg-canvas);
+  font-family: var(--kit-font-family-mono);
+  font-size: var(--kit-text-code-size);
+  line-height: var(--kit-text-code-line-height);
+  text-align: start;
+  white-space: pre;
+}
+
+:where([data-kit="diagram-node"] [data-slot="media"]) {
+  display: grid;
+  flex: 1;
+  min-block-size: 0;
+  place-items: center;
+  overflow: hidden;
+  border-radius: var(--kit-radius-4);
+  background-color: var(--kit-color-bg-canvas);
+  color: var(--kit-color-text-secondary);
+}
+
+:where([data-kit="diagram-node"] [data-slot="media"] > img) {
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: contain;
+}
+
+:where([data-kit="diagram-node"] [data-slot="media"] > [data-kit="diagram-icon"]) {
+  inline-size: var(--kit-size-icon-lg);
+  block-size: var(--kit-size-icon-lg);
+}
+
+:where([data-kit="diagram-node"] [data-slot="caption"]) {
+  text-align: center;
+}
+
+:where([data-kit="diagram-node"] [data-slot="chart"]) {
+  flex: 1;
+  inline-size: 100%;
+  min-block-size: 0;
+}
+
+:where([data-kit="diagram-node"] [data-slot="chart"] rect) {
+  fill: var(--kit-color-chart-categorical-1);
+}
+
+:where([data-kit="diagram-node"] [data-slot="avatar"]) {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  inline-size: var(--kit-size-28);
+  block-size: var(--kit-size-28);
+  border-radius: var(--kit-radius-full);
+  background-color: var(--kit-color-accent-default);
+  color: var(--kit-color-accent-on-accent);
+  font-weight: var(--kit-font-weight-semibold);
+}
+
+:where([data-kit="diagram-node"] > [data-slot="status"]) {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: var(--kit-space-2);
+  translate: 0 -50%;
+}
+
+:where([data-kit="diagram-node"] [data-slot="editor"]) {
+  box-sizing: border-box;
+  inline-size: 100%;
+  min-inline-size: 0;
+  margin: 0;
+  padding-block: var(--kit-space-0-5);
+  padding-inline: var(--kit-space-1);
+  border: var(--kit-border-width-default) solid var(--kit-color-border-focus);
+  border-radius: var(--kit-radius-4);
+  background-color: var(--kit-color-bg-surface);
+  color: var(--kit-color-text-primary);
+  font: inherit;
+  text-align: inherit;
+  resize: none;
+}
+
+:where([data-kit="diagram-node"] [data-slot="editor"]):focus-visible,
+:where([data-kit="diagram-edge-label"] [data-slot="editor"]):focus-visible {
+  outline: var(--kit-border-width-focus) solid var(--kit-color-border-focus);
+  outline-offset: var(--kit-space-0-5);
+}
+
+/* A mirrored glyph for right-to-left, such as the group chevron */
+
+:where([data-rtl] [data-mirror]) {
+  display: inline-flex;
+  transform: scaleX(-1);
+}
+
+:where([data-mirror]) {
+  display: inline-flex;
+}
+
+/* Icons */
+
+:where([data-kit="diagram-icon"]) {
+  flex: none;
+  inline-size: var(--kit-size-icon-md);
+  block-size: var(--kit-size-icon-md);
+}
+
+/* --------------------------------------------------------------- Handles */
+
+:where([data-kit="diagram-handle"]) {
+  --_size: var(--kit-size-12);
+  position: absolute;
+  inline-size: var(--_size);
+  block-size: var(--_size);
+  min-inline-size: var(--_size);
+  min-block-size: var(--_size);
+  box-sizing: border-box;
+  border: var(--kit-border-width-default) solid var(--kit-color-bg-surface);
+  border-radius: var(--kit-radius-full);
+  background-color: var(--xy-handle-background-color);
+  pointer-events: none;
+  transition:
+    background-color var(--kit-duration-fast) var(--kit-easing-standard),
+    scale var(--kit-duration-fast) var(--kit-easing-standard);
+}
+
+/* A larger invisible hit area, so a connection point is easy to hit with a finger or a pointer. */
+:where([data-kit="diagram-handle"])::after {
+  content: "";
+  position: absolute;
+  inset: calc(var(--kit-space-2) * -1);
+}
+
+:where([data-kit="diagram-handle"].connectingfrom),
+:where([data-kit="diagram-handle"].connectionindicator) {
+  pointer-events: all;
+}
+
+:where([data-kit="diagram-handle"].connectionindicator) {
+  cursor: crosshair;
+}
+
+:where([data-kit="diagram-handle"].react-flow__handle-top) {
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+:where([data-kit="diagram-handle"].react-flow__handle-bottom) {
+  top: auto;
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, 50%);
+}
+
+:where([data-kit="diagram-handle"].react-flow__handle-left) {
+  top: 50%;
+  left: 0;
+  transform: translate(-50%, -50%);
+}
+
+:where([data-kit="diagram-handle"].react-flow__handle-right) {
+  top: 50%;
+  right: 0;
+  transform: translate(50%, -50%);
+}
+
+:where([data-kit="diagram-node"]:hover > [data-kit="diagram-handle"]),
+:where([data-kit="diagram-node"][data-selected] > [data-kit="diagram-handle"]),
+:where([data-kit="diagram-node"][data-connecting] > [data-kit="diagram-handle"]) {
+  background-color: var(--kit-color-accent-default);
+}
+
+:where([data-kit="diagram-handle"].connectingto.valid),
+:where([data-kit="diagram-handle"].valid) {
+  background-color: var(--kit-color-status-success-border);
+  scale: 1.4;
+}
+
+:where([data-kit="diagram-handle"].connectingto:not(.valid)) {
+  background-color: var(--kit-color-status-danger-border);
+}
+
+:where([data-kit="diagram-canvas"][data-readonly] [data-kit="diagram-handle"]) {
+  display: none;
+}
+
+@media (pointer: coarse) {
+  :where([data-kit="diagram-handle"]) {
+    --_size: var(--kit-size-20);
+  }
+}
+
+/* Resize controls on a selected node */
+
+:where([data-kit="diagram-canvas"] .react-flow__resize-control) {
+  position: absolute;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__resize-control.left),
+:where([data-kit="diagram-canvas"] .react-flow__resize-control.right) {
+  cursor: ew-resize;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__resize-control.top),
+:where([data-kit="diagram-canvas"] .react-flow__resize-control.bottom) {
+  cursor: ns-resize;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__resize-control.top.left),
+:where([data-kit="diagram-canvas"] .react-flow__resize-control.bottom.right) {
+  cursor: nwse-resize;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__resize-control.bottom.left),
+:where([data-kit="diagram-canvas"] .react-flow__resize-control.top.right) {
+  cursor: nesw-resize;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__resize-control.handle) {
+  inline-size: var(--kit-size-12);
+  block-size: var(--kit-size-12);
+  box-sizing: border-box;
+  border: var(--kit-border-width-default) solid var(--kit-color-bg-surface);
+  border-radius: var(--kit-radius-2);
+  background-color: var(--xy-resize-background-color);
+  translate: -50% -50%;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__resize-control.handle.left) {
+  left: 0;
+  top: 50%;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__resize-control.handle.right) {
+  left: 100%;
+  top: 50%;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__resize-control.handle.top) {
+  left: 50%;
+  top: 0;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__resize-control.handle.bottom) {
+  left: 50%;
+  top: 100%;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__resize-control.handle.top.left) {
+  left: 0;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__resize-control.handle.bottom.left) {
+  left: 0;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__resize-control.handle.top.right) {
+  left: 100%;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__resize-control.handle.bottom.right) {
+  left: 100%;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__resize-control.line) {
+  border-color: var(--xy-resize-background-color);
+  border-width: 0;
+  border-style: solid;
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__resize-control.line.left),
+:where([data-kit="diagram-canvas"] .react-flow__resize-control.line.right) {
+  inline-size: var(--kit-border-width-default);
+  block-size: 100%;
+  top: 0;
+  transform: translate(-50%, 0);
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__resize-control.line.left) {
+  left: 0;
+  border-left-width: var(--kit-border-width-default);
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__resize-control.line.right) {
+  left: 100%;
+  border-right-width: var(--kit-border-width-default);
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__resize-control.line.top),
+:where([data-kit="diagram-canvas"] .react-flow__resize-control.line.bottom) {
+  inline-size: 100%;
+  block-size: var(--kit-border-width-default);
+  left: 0;
+  transform: translate(0, -50%);
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__resize-control.line.top) {
+  top: 0;
+  border-top-width: var(--kit-border-width-default);
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__resize-control.line.bottom) {
+  top: 100%;
+  border-bottom-width: var(--kit-border-width-default);
+}
+
+/* ----------------------------------------------------------------- Edges */
+
+:where([data-kit="diagram-edge"]) {
+  fill: none;
+  stroke: var(--kit-color-border-strong);
+  stroke-width: var(--kit-border-width-default);
+  stroke-linecap: round;
+  transition: stroke var(--kit-duration-fast) var(--kit-easing-standard);
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__edge:hover [data-kit="diagram-edge"]) {
+  stroke: var(--kit-color-text-secondary);
+}
+
+:where([data-kit="diagram-edge"][data-tone="success"]) {
+  stroke: var(--kit-color-status-success-border);
+}
+
+:where([data-kit="diagram-edge"][data-tone="warning"]) {
+  stroke: var(--kit-color-status-warning-border);
+}
+
+:where([data-kit="diagram-edge"][data-tone="danger"]) {
+  stroke: var(--kit-color-status-danger-border);
+}
+
+:where([data-kit="diagram-edge"][data-tone="info"]) {
+  stroke: var(--kit-color-status-info-border);
+}
+
+:where([data-kit="diagram-edge"][data-dashed]),
+:where([data-kit="diagram-edge"][data-animated]) {
+  stroke-dasharray: var(--kit-space-2) var(--kit-space-1);
+}
+
+:where([data-kit="diagram-edge"][data-animated]) {
+  animation: kit-diagram-dash var(--kit-duration-slow) linear infinite;
+}
+
+:where([data-kit="diagram-edge"][data-selected]),
+:where([data-kit="diagram-canvas"] .react-flow__edge.selected [data-kit="diagram-edge"]) {
+  stroke: var(--kit-color-accent-default);
+  stroke-width: var(--kit-border-width-emphasis);
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__edge:focus-visible [data-kit="diagram-edge"]) {
+  stroke: var(--kit-color-border-focus);
+  stroke-width: var(--kit-border-width-focus);
+}
+
+:where([data-kit="diagram-canvas"] .react-flow__edge) {
+  outline: var(--kit-border-width-focus) solid transparent;
+}
+
+@keyframes kit-diagram-dash {
+  to {
+    stroke-dashoffset: calc(var(--kit-space-3) * -1);
+  }
+}
+
+/* One arrowhead per tone, defined once per canvas */
+
+:where([data-kit="diagram-markers"]) {
+  position: absolute;
+  inline-size: 0;
+  block-size: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+:where([data-kit="diagram-markers"] marker path) {
+  fill: var(--kit-color-border-strong);
+}
+
+:where([data-kit="diagram-markers"] marker[data-tone="success"] path) {
+  fill: var(--kit-color-status-success-border);
+}
+
+:where([data-kit="diagram-markers"] marker[data-tone="warning"] path) {
+  fill: var(--kit-color-status-warning-border);
+}
+
+:where([data-kit="diagram-markers"] marker[data-tone="danger"] path) {
+  fill: var(--kit-color-status-danger-border);
+}
+
+:where([data-kit="diagram-markers"] marker[data-tone="info"] path) {
+  fill: var(--kit-color-status-info-border);
+}
+
+/* Edge labels */
+
+:where([data-kit="diagram-edge-label"]) {
+  position: absolute;
+  box-sizing: border-box;
+  max-inline-size: calc(var(--kit-size-56) * 4);
+  padding-block: var(--kit-space-0-5);
+  padding-inline: var(--kit-space-2);
+  border: var(--kit-border-width-default) solid var(--kit-color-border-subtle);
+  border-radius: var(--kit-radius-4);
+  background-color: var(--kit-color-bg-surface);
+  color: var(--kit-color-text-secondary);
+  font-size: var(--kit-text-caption-size);
+  line-height: var(--kit-text-caption-line-height);
+  pointer-events: all;
+  cursor: pointer;
+}
+
+:where([data-kit="diagram-edge-label"][data-tone="success"]) {
+  border-color: var(--kit-color-status-success-border);
+}
+
+:where([data-kit="diagram-edge-label"][data-tone="warning"]) {
+  border-color: var(--kit-color-status-warning-border);
+}
+
+:where([data-kit="diagram-edge-label"][data-tone="danger"]) {
+  border-color: var(--kit-color-status-danger-border);
+}
+
+:where([data-kit="diagram-edge-label"][data-tone="info"]) {
+  border-color: var(--kit-color-status-info-border);
+}
+
+:where([data-kit="diagram-edge-label"][data-selected]) {
+  border-color: var(--kit-color-accent-default);
+  color: var(--kit-color-text-primary);
+}
+
+:where([data-kit="diagram-edge-label"] [data-slot="editor"]) {
+  box-sizing: border-box;
+  inline-size: calc(var(--kit-size-56) * 2);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  color: var(--kit-color-text-primary);
+  font: inherit;
+}
+
+/* --------------------------------------------------------------- Toolbar */
+
+:where([data-kit="diagram-toolbar-area"]) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kit-space-2);
+}
+
+:where([data-kit="diagram-toolbar"]) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--kit-space-1);
+  padding: var(--kit-space-1);
+  border: var(--kit-border-width-default) solid var(--kit-color-border-default);
+  border-radius: var(--kit-radius-panel);
+  background-color: var(--kit-color-bg-surface);
+}
+
+:where([data-kit="diagram-toolbar"] > [data-slot="group"]) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kit-space-1);
+}
+
+:where([data-kit="diagram-toolbar"] [data-kit="divider"]) {
+  block-size: var(--kit-size-20);
+  align-self: center;
+}
+
+:where([data-kit="diagram-palette"]) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--kit-space-2);
+  padding: var(--kit-space-2);
+  border: var(--kit-border-width-default) solid var(--kit-color-border-default);
+  border-radius: var(--kit-radius-panel);
+  background-color: var(--kit-color-bg-surface);
+}
+
+:where([data-kit="diagram-palette"] [draggable="true"]) {
+  cursor: grab;
+}
+
+/* ---------------------------------------------------------------- Notice */
+
+:where([data-kit="diagram-notice"]) {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: var(--kit-space-4);
+  z-index: var(--kit-z-toast);
+  display: flex;
+  justify-content: center;
+  padding-inline: var(--kit-space-4);
+  pointer-events: none;
+}
+
+:where([data-kit="diagram-notice"] > [data-slot="message"]) {
+  max-inline-size: 100%;
+  padding-block: var(--kit-space-2);
+  padding-inline: var(--kit-space-3);
+  border: var(--kit-border-width-default) solid var(--kit-color-status-danger-border);
+  border-radius: var(--kit-radius-control);
+  background-color: var(--kit-color-status-danger-background);
+  color: var(--kit-color-status-danger-foreground);
+  box-shadow: var(--kit-shadow-toast);
+  font-size: var(--kit-text-label-size);
+  line-height: var(--kit-text-label-line-height);
+  pointer-events: auto;
+  animation: kit-diagram-notice-in var(--kit-duration-base) var(--kit-easing-enter);
+}
+
+@keyframes kit-diagram-notice-in {
+  from {
+    opacity: 0;
+    translate: 0 var(--kit-space-2);
+  }
+}
+
+/* --------------------------------------------------------------- Outline */
+
+:where([data-kit="diagram-outline"]) {
+  box-sizing: border-box;
+  padding: var(--kit-space-3);
+  border: var(--kit-border-width-default) solid var(--kit-color-border-default);
+  border-radius: var(--kit-radius-panel);
+  background-color: var(--kit-color-bg-surface);
+  color: var(--kit-color-text-primary);
+  font-family: var(--kit-font-family-sans);
+  font-size: var(--kit-text-body-size);
+  line-height: var(--kit-text-body-line-height);
+}
+
+:where([data-kit="diagram-outline"] [data-slot="title"]) {
+  margin-block: 0 var(--kit-space-2);
+  font-size: var(--kit-text-h4-size);
+  font-weight: var(--kit-text-h4-weight);
+  line-height: var(--kit-text-h4-line-height);
+}
+
+:where([data-kit="diagram-outline"] ul) {
+  margin-block: 0;
+  padding-inline: var(--kit-space-5) 0;
+}
+
+:where([data-kit="diagram-outline"] [data-slot="nodes"]),
+:where([data-kit="diagram-outline"] [data-slot="paths"] ul) {
+  display: grid;
+  gap: var(--kit-space-3);
+}
+
+:where([data-kit="diagram-outline"] [data-slot="connections"]) {
+  margin-block-start: var(--kit-space-1);
+  list-style: none;
+  padding-inline: var(--kit-space-3) 0;
+}
+
+:where([data-kit="diagram-outline"] [data-slot="paths"]) {
+  margin-block-start: var(--kit-space-4);
+}
+
+:where([data-kit="diagram-outline"] [data-slot="paths-title"]),
+:where([data-kit="diagram-outline"] [data-slot="contains"]) {
+  margin-block: var(--kit-space-2) var(--kit-space-1);
+  color: var(--kit-color-text-secondary);
+  font-size: var(--kit-text-caption-size);
+  font-weight: var(--kit-font-weight-semibold);
+}
+
+:where([data-kit="diagram-outline"] [data-slot="item"]) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--kit-space-2);
+}
+
+:where([data-kit="diagram-outline"] [data-slot="meta"]),
+:where([data-kit="diagram-outline"] [data-slot="none"]),
+:where([data-kit="diagram-outline"] [data-slot="description"]),
+:where([data-kit="diagram-outline"] [data-slot="edge-label"]),
+:where([data-kit="diagram-outline"] [data-slot="relation"]) {
+  margin-block: 0;
+  color: var(--kit-color-text-secondary);
+  font-size: var(--kit-text-caption-size);
+  line-height: var(--kit-text-caption-line-height);
+}
+
+:where([data-kit="diagram-outline"] [data-slot="link"]),
+:where([data-kit="diagram-outline"] [data-slot="disconnect"]) {
+  min-block-size: var(--kit-size-target-min);
+  margin: 0;
+  padding-block: 0;
+  padding-inline: var(--kit-space-1);
+  border: 0;
+  border-radius: var(--kit-radius-4);
+  background: transparent;
+  color: var(--kit-color-text-link);
+  font: inherit;
+  cursor: pointer;
+}
+
+:where([data-kit="diagram-outline"] [data-slot="link"]) {
+  text-decoration: underline;
+}
+
+:where([data-kit="diagram-outline"] [data-slot="disconnect"]) {
+  min-inline-size: var(--kit-size-target-min);
+  color: var(--kit-color-text-secondary);
+}
+
+:where([data-kit="diagram-outline"] [data-slot="link"]:focus-visible),
+:where([data-kit="diagram-outline"] [data-slot="disconnect"]:focus-visible) {
+  outline: var(--kit-border-width-focus) solid var(--kit-color-border-focus);
+  outline-offset: var(--kit-space-0-5);
+}
+
+:where([data-kit="diagram-outline"] [data-slot="link"]:hover),
+:where([data-kit="diagram-outline"] [data-slot="disconnect"]:hover) {
+  background-color: var(--kit-color-accent-subtle);
+}
+
+/*
+ * "Hidden" outline: out of sight but in the reading order. It appears when
+ * keyboard focus is inside it. The 1px clip is the standard technique,
+ * expressed with the hairline token.
+ */
+:where([data-kit="diagram-outline"][data-reveal="focus"]:not(:focus-within)) {
+  position: absolute;
+  inline-size: var(--kit-border-width-default);
+  block-size: var(--kit-border-width-default);
+  margin: calc(var(--kit-border-width-default) * -1);
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Inside a canvas it opens over the diagram, so the page does not jump. */
+:where([data-kit="diagram-canvas"] > [data-kit="diagram-outline"][data-reveal="focus"]:focus-within) {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
+  z-index: var(--kit-z-dropdown);
+  max-block-size: 70%;
+  overflow: auto;
+  box-shadow: var(--kit-shadow-overlay);
+}
+
+/* --------------------------------------------------------------- Mermaid */
+
+:where([data-kit="mermaid-diagram"]) {
+  display: grid;
+  gap: var(--kit-space-2);
+  margin: 0;
+  color: var(--kit-color-text-primary);
+  font-family: var(--kit-font-family-sans);
+}
+
+:where([data-kit="mermaid-diagram"] [data-slot="canvas"]) {
+  overflow: auto;
+  padding: var(--kit-space-3);
+  border: var(--kit-border-width-default) solid var(--kit-color-border-default);
+  border-radius: var(--kit-radius-panel);
+  background-color: var(--kit-color-bg-surface);
+}
+
+:where([data-kit="mermaid-diagram"] [data-slot="canvas"] > svg) {
+  display: block;
+  max-inline-size: 100%;
+  margin-inline: auto;
+}
+
+:where([data-kit="mermaid-diagram"] [data-slot="status"]) {
+  display: flex;
+  align-items: center;
+  gap: var(--kit-space-2);
+  padding: var(--kit-space-3);
+  color: var(--kit-color-text-secondary);
+}
+
+:where([data-kit="mermaid-diagram"] [data-slot="status"][role="alert"]) {
+  border: var(--kit-border-width-default) solid var(--kit-color-status-danger-border);
+  border-radius: var(--kit-radius-control);
+  background-color: var(--kit-color-status-danger-background);
+  color: var(--kit-color-status-danger-foreground);
+}
+
+:where([data-kit="mermaid-diagram"] [data-slot="description"]) {
+  color: var(--kit-color-text-secondary);
+  font-size: var(--kit-text-caption-size);
+  line-height: var(--kit-text-caption-line-height);
+}
+
+:where([data-kit="mermaid-diagram"] [data-slot="source"]) {
+  display: grid;
+  gap: var(--kit-space-2);
+  justify-items: start;
+}
+
+:where([data-kit="mermaid-diagram"] [data-slot="source"] pre) {
+  box-sizing: border-box;
+  inline-size: 100%;
+  max-block-size: calc(var(--kit-size-56) * 6);
+  margin: 0;
+  padding: var(--kit-space-3);
+  overflow: auto;
+  border: var(--kit-border-width-default) solid var(--kit-color-border-default);
+  border-radius: var(--kit-radius-control);
+  background-color: var(--kit-color-bg-canvas);
+  font-family: var(--kit-font-family-mono);
+  font-size: var(--kit-text-code-size);
+  line-height: var(--kit-text-code-line-height);
+}
+
+:where([data-kit="mermaid-diagram"] [data-slot="source"] pre:focus-visible) {
+  outline: var(--kit-border-width-focus) solid var(--kit-color-border-focus);
+  outline-offset: var(--kit-space-0-5);
+}
+
+/* ---------------------------------------------------------------- Static */
+
+:where(svg[data-kit="diagram-static"]) {
+  display: block;
+  max-inline-size: 100%;
+  block-size: auto;
+  color: var(--kit-color-text-primary);
+}
+
+/* ----------------------------------------------------- Motion and contrast */
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-kit="diagram-node"]),
+  :where([data-kit="diagram-handle"]),
+  :where([data-kit="diagram-edge"]) {
+    transition: none;
+  }
+
+  /* The dashes stay (they carry meaning); only the movement goes. */
+  :where([data-kit="diagram-edge"][data-animated]) {
+    animation: none;
+  }
+
+  :where([data-kit="diagram-notice"] > [data-slot="message"]) {
+    animation: none;
+  }
+}
+
+@media (forced-colors: active) {
+  :where([data-kit="diagram-node"]) {
+    border-color: CanvasText;
+    background-color: Canvas;
+    color: CanvasText;
+    forced-color-adjust: auto;
+  }
+
+  :where([data-kit="diagram-node"][data-kind="decision"] > [data-slot="shape"]) {
+    fill: Canvas;
+    stroke: CanvasText;
+  }
+
+  :where([data-kit="diagram-node"][data-selected]) {
+    border-color: Highlight;
+    outline: var(--kit-border-width-emphasis) solid Highlight;
+  }
+
+  :where([data-kit="diagram-node"][data-kind="decision"][data-selected] > [data-slot="shape"]) {
+    stroke: Highlight;
+  }
+
+  :where([data-kit="diagram-canvas"] .react-flow__node:focus-visible > [data-kit="diagram-node"]) {
+    outline-color: Highlight;
+  }
+
+  :where([data-kit="diagram-handle"]) {
+    background-color: CanvasText;
+    border-color: Canvas;
+  }
+
+  :where([data-kit="diagram-edge"]) {
+    stroke: CanvasText;
+  }
+
+  :where([data-kit="diagram-edge"][data-selected]) {
+    stroke: Highlight;
+  }
+
+  :where([data-kit="diagram-markers"] marker path) {
+    fill: CanvasText;
+  }
+
+  :where([data-kit="diagram-edge-label"]),
+  :where([data-kit="diagram-toolbar"]),
+  :where([data-kit="diagram-palette"]),
+  :where([data-kit="diagram-outline"]),
+  :where([data-kit="diagram-canvas"] > [data-slot="stage"]) {
+    border-color: CanvasText;
+  }
+
+  :where([data-kit="diagram-notice"] > [data-slot="message"]) {
+    border-color: CanvasText;
+    background-color: Canvas;
+    color: CanvasText;
+  }
+
+  :where([data-kit="diagram-canvas"] .react-flow__minimap-node) {
+    fill: CanvasText;
+  }
+}