@misoto22/design 0.6.1 → 0.7.0

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

@@ -0,0 +1,207 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { NodeKind, Variant, LifecycleStateKind } from '../spec.js';
+import { Box } from './geometry.js';
+
+/** What each kind is called on a plate's eyebrow. Short, because it is a kicker. */
+declare const KIND_WORD: Record<NodeKind, string>;
+/**
+ * The marker definitions every figure needs.
+ *
+ * Rendered once per figure. The ids are namespaced by the figure's own id
+ * because two diagrams on one page would otherwise share one `<defs>`, and the
+ * second figure's arrowheads would silently take the first figure's paint —
+ * SVG ids are document-global, and a duplicate is resolved to whichever came
+ * first rather than to the nearest one.
+ */
+declare function DiagramDefs({ uid }: {
+    uid: string;
+}): react.JSX.Element;
+/**
+ * The 14×14 mark that says what kind of thing a node is.
+ *
+ * Drawn on a 14-unit grid at a 1.35 stroke. Both numbers went up from the first
+ * pass and both had to: at 12 units and a 1.2 stroke the seven forms were a few
+ * grey pixels apart at reading size, which is not a distinction — it is a
+ * smudge. Every path is closed geometry rather than an icon font, because a
+ * figure has to serialise into a standalone file and a font the exported
+ * document cannot fetch renders as a box.
+ */
+declare function Sigil({ kind, x, y, reversed, }: {
+    kind: NodeKind;
+    x: number;
+    y: number;
+    reversed?: boolean;
+}): react.JSX.Element;
+/**
+ * A plate's internal vertical rhythm, in user units from its top edge.
+ *
+ * Written out as one object rather than computed inline in three renderers,
+ * because these numbers ARE the plate: change one and the card stops looking
+ * like a card. The eyebrow sits high and tight, the name is the only thing set
+ * at reading size, and the sublabel hangs under it in the meta voice.
+ */
+declare const PLATE: {
+    readonly padX: 15;
+    readonly eyebrow: 19;
+    readonly label: 39;
+    readonly sub: 53;
+    readonly lineStep: 17;
+    /** Where the eyebrow lands when there is none — the label moves up into it. */
+    readonly riseWithoutEyebrow: 16;
+};
+/**
+ * How tall a plate has to be to hold what it was given.
+ *
+ * A declared height is a FLOOR, not a ceiling. When a specification asks for a
+ * 60-unit box and then puts two lines of name and a qualifier in it, honouring
+ * the 60 prints the qualifier through the bottom rule — which reads as a
+ * rendering fault rather than as a box asked to hold too much. Growing is
+ * visible and correct; clipping is invisible and wrong.
+ */
+declare function plateHeight(labelLines: number, hasSub: boolean, hasEyebrow: boolean, floor?: number): number;
+interface NodePlateProps {
+    box: Box;
+    label: string;
+    sublabel?: string;
+    tag?: string;
+    kind?: NodeKind;
+    variant?: Variant;
+    /** Printed in the trailing corner in mono — a step number. */
+    step?: string;
+    /** Paints the plate on the recessed ground rather than on paper. */
+    muted?: boolean;
+    /** Lit by a guided chapter or a reader's focus. */
+    active?: boolean;
+    /** Dimmed because something else is lit. */
+    dimmed?: boolean;
+    onSelect?: () => void;
+    /** A stable hook the viewer chrome and the tests both address nodes by. */
+    nodeId?: string;
+}
+/**
+ * One box, with everything that can be printed inside it.
+ *
+ * Three registers, top to bottom, and each is a different voice on purpose: a
+ * mono kicker naming the KIND, the name at reading size in the interface face,
+ * and the qualifier back in mono. That is the same ladder a record on a page
+ * uses — the diagram is not inventing a second typography for itself.
+ *
+ * WHAT IT IS NOT is a button, and that is deliberate. The `<svg>` around it
+ * carries `role="img"`, which makes everything inside it presentational to
+ * assistive technology — so a `role="button"` here would announce a control a
+ * screen reader can never reach. The keyboard route to the same selection is
+ * the figure's own summary list, which is a real `<ul>` of real `<button>`s
+ * sitting beside the picture. `onSelect` here is the POINTER path to that same
+ * action, and nothing else.
+ */
+declare function NodePlate({ box, label, sublabel, tag, kind, variant, step, muted, active, dimmed, onSelect, nodeId, }: NodePlateProps): react.JSX.Element;
+/**
+ * A mono chip: a version, a region, a protocol, a data classification.
+ *
+ * A rule and a word, with no fill under it. The filled chip this replaced put a
+ * third ground inside a plate that already sat on a figure that sat on the
+ * page, and three grounds deep is where a diagram stops reading as structure
+ * and starts reading as packaging.
+ */
+declare function Chip({ x, y, text, align, reversed, }: {
+    x: number;
+    y: number;
+    text: string;
+    align?: 'start' | 'middle' | 'end';
+    reversed?: boolean;
+}): react.JSX.Element;
+/**
+ * How a line is painted: the colour as a class, the geometry as attributes.
+ *
+ * THE SPLIT IS NOT ARBITRARY, and getting it wrong cost an afternoon. Tailwind
+ * generates a rule only for a class name it can find as a LITERAL in the
+ * source. A width built at runtime — `` `[stroke-width:${weight}]` `` — is a
+ * class that never gets a rule, so the browser falls back to SVG's default
+ * 1px, silently, on exactly the lines a figure most needs to be heavier. The
+ * main path came out the same weight as a side branch and nothing said so.
+ *
+ * Colour still goes through a class, because a paint has to resolve a custom
+ * property and `stroke="var(--x)"` is not valid as an attribute. Width and dash
+ * pattern are plain numbers, so they go through presentation attributes where
+ * no build step has to have predicted them — and `getComputedStyle` reports an
+ * attribute exactly as it reports a rule, so the export still picks them up.
+ */
+declare function edgeClasses(variant?: Variant | 'return'): string;
+/** A line's width and dash pattern, as presentation attributes. */
+declare function edgeStroke(variant?: Variant | 'return', weight?: number): {
+    strokeWidth: number;
+    strokeDasharray?: string;
+};
+/** Which arrowhead a line ends in. */
+declare function edgeMarker(variant?: Variant | 'return'): 'arrow' | 'arrow-strong' | 'arrow-open';
+interface EdgeLabelProps {
+    x: number;
+    y: number;
+    axis: 'x' | 'y';
+    text: string;
+    /** A mono chip printed under the wording — a data classification. */
+    chip?: string;
+    /** A second, quieter line — a condition, a timeout, a retry count. */
+    note?: string;
+}
+/**
+ * A relationship's wording, on a mask that punches the line out from under it.
+ *
+ * The mask is not decoration. A label drawn straight onto a line is unreadable
+ * at every size, and the two repairs a renderer can make are moving the label
+ * or hiding the line behind it. Moving it changes which segment the wording
+ * belongs to, which is a semantic change; masking is the one that leaves the
+ * meaning alone.
+ *
+ * Set in mono rather than in the interface face. The wording on a line is an
+ * ANNOTATION on the picture, not a second rank of content — and at the sans
+ * face it competed with the names on the plates, which is the one comparison it
+ * must lose.
+ */
+declare function EdgeLabel({ x, y, axis, text, chip, note }: EdgeLabelProps): react.JSX.Element;
+/**
+ * A labelled frame around a set of boxes: a region, a security group, a phase,
+ * a process group.
+ *
+ * A FRAME IS A RULE AND NOT A GROUND. Archify washes its regions with a tint,
+ * which this system cannot copy for two reasons: a second ground inside a paper
+ * figure reads as packaging rather than as structure — the same argument the
+ * containment `Diagram` primitive makes about nested boxes — and every
+ * relationship label crossing the wash would then need to know which of two
+ * grounds its mask is punching through, which is a question a label cannot
+ * answer. `muted` therefore washes only where a band IS the ground it labels: a
+ * workflow's exception lane, which nothing routes across.
+ *
+ * The label sits ABOVE the top rule rather than inside the frame or on it.
+ * Inside, it costs a line of vertical space in every frame whether or not the
+ * frame had one to spare. ON the rule — which is where it started — it has to
+ * punch a mask through the frame, and that mask then competes for the same few
+ * units of clear ground as any relationship label routed along the frame's own
+ * edge: two captions, two white plates, one on top of the other. Above the
+ * rule it needs no mask, leaves the frame unbroken, and reads as a caption for
+ * the frame rather than as its first child.
+ */
+declare function BandFrame({ box, label, dashed, muted, }: {
+    box: Box;
+    label?: string;
+    dashed?: boolean;
+    muted?: boolean;
+}): react.JSX.Element;
+/**
+ * The plate shape for a lifecycle state.
+ *
+ * This is the one place the system spends colour, and it spends exactly the two
+ * tokens it reserves for state: `--success` on a terminal success, `--danger`
+ * on a terminal failure. Every other kind is carried by shape — a filled cap
+ * for a start, a diamond for a decision, a dashed frame for a wait, a cut
+ * corner for something outside the system — so a greyscale print loses the two
+ * outcomes' hue and keeps all six other distinctions.
+ */
+declare function StatePlate({ box, kind, children, }: {
+    box: Box;
+    kind: LifecycleStateKind;
+    children?: ReactNode;
+}): react.JSX.Element;
+
+export { BandFrame, Chip, DiagramDefs, EdgeLabel, type EdgeLabelProps, KIND_WORD, NodePlate, type NodePlateProps, PLATE, Sigil, StatePlate, edgeClasses, edgeMarker, edgeStroke, plateHeight };

package/dist/diagrams/lib/marks.js

@@ -0,0 +1,480 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { round, TYPE, textWidth, wrapText } from "./geometry.js";
+const PLATE_RADIUS = "[rx:var(--radius-sm)] [ry:var(--radius-sm)]";
+const KIND_WORD = {
+  frontend: "CLIENT",
+  backend: "SERVICE",
+  database: "DATA",
+  cloud: "CLOUD",
+  security: "POLICY",
+  messagebus: "QUEUE",
+  external: "EXTERNAL"
+};
+function DiagramDefs({ uid }) {
+  return /* @__PURE__ */ jsxs("defs", { children: [
+    /* @__PURE__ */ jsx(
+      "marker",
+      {
+        id: `${uid}-arrow`,
+        markerWidth: "11",
+        markerHeight: "11",
+        refX: "9.5",
+        refY: "5.5",
+        orient: "auto-start-reverse",
+        markerUnits: "userSpaceOnUse",
+        children: /* @__PURE__ */ jsx("path", { d: "M 0.6 1.4 L 10 5.5 L 0.6 9.6 Z", className: "fill-(--diagram-line)" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "marker",
+      {
+        id: `${uid}-arrow-strong`,
+        markerWidth: "12",
+        markerHeight: "12",
+        refX: "10.5",
+        refY: "6",
+        orient: "auto-start-reverse",
+        markerUnits: "userSpaceOnUse",
+        children: /* @__PURE__ */ jsx("path", { d: "M 0.6 1.6 L 11 6 L 0.6 10.4 Z", className: "fill-(--diagram-line-strong)" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "marker",
+      {
+        id: `${uid}-arrow-open`,
+        markerWidth: "11",
+        markerHeight: "11",
+        refX: "9.5",
+        refY: "5.5",
+        orient: "auto-start-reverse",
+        markerUnits: "userSpaceOnUse",
+        children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M 1 1.6 L 9.6 5.5 L 1 9.4",
+            fill: "none",
+            strokeWidth: "1.4",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            className: "stroke-(--diagram-line-soft)"
+          }
+        )
+      }
+    )
+  ] });
+}
+function Sigil({
+  kind,
+  x,
+  y,
+  reversed
+}) {
+  const stroke = cn(
+    "fill-none [stroke-width:1.35] [stroke-linejoin:round] [stroke-linecap:round]",
+    reversed ? "stroke-(--diagram-plate-ink)" : "stroke-(--diagram-sigil)"
+  );
+  return /* @__PURE__ */ jsxs("g", { transform: `translate(${round(x)}, ${round(y)})`, "aria-hidden": "true", children: [
+    kind === "frontend" && /* @__PURE__ */ jsxs("g", { className: stroke, children: [
+      /* @__PURE__ */ jsx("rect", { x: "0.8", y: "2", width: "12.4", height: "10", rx: "1.6" }),
+      /* @__PURE__ */ jsx("path", { d: "M 0.8 5.2 H 13.2" }),
+      /* @__PURE__ */ jsx("path", { d: "M 3 3.6 H 4" })
+    ] }),
+    kind === "backend" && /* @__PURE__ */ jsxs("g", { className: stroke, children: [
+      /* @__PURE__ */ jsx("rect", { x: "0.8", y: "1.8", width: "12.4", height: "4.4", rx: "1.2" }),
+      /* @__PURE__ */ jsx("rect", { x: "0.8", y: "7.8", width: "12.4", height: "4.4", rx: "1.2" }),
+      /* @__PURE__ */ jsx("path", { d: "M 3 4 H 4.2" }),
+      /* @__PURE__ */ jsx("path", { d: "M 3 10 H 4.2" })
+    ] }),
+    kind === "database" && /* @__PURE__ */ jsxs("g", { className: stroke, children: [
+      /* @__PURE__ */ jsx("ellipse", { cx: "7", cy: "3.4", rx: "6", ry: "2.4" }),
+      /* @__PURE__ */ jsx("path", { d: "M 1 3.4 V 10.6 A 6 2.4 0 0 0 13 10.6 V 3.4" }),
+      /* @__PURE__ */ jsx("path", { d: "M 1 7 A 6 2.4 0 0 0 13 7" })
+    ] }),
+    kind === "cloud" && /* @__PURE__ */ jsx("g", { className: stroke, children: /* @__PURE__ */ jsx("path", { d: "M 3.4 10.8 A 2.9 2.9 0 0 1 3.5 5 A 3.8 3.8 0 0 1 10.5 4.2 A 3.2 3.2 0 0 1 11 10.8 Z" }) }),
+    kind === "security" && /* @__PURE__ */ jsxs("g", { className: stroke, children: [
+      /* @__PURE__ */ jsx("path", { d: "M 7 1 L 12.5 3.1 V 7 C 12.5 10 10 12.1 7 13 C 4 12.1 1.5 10 1.5 7 V 3.1 Z" }),
+      /* @__PURE__ */ jsx("path", { d: "M 4.7 7 L 6.4 8.7 L 9.4 5.3" })
+    ] }),
+    kind === "messagebus" && /* @__PURE__ */ jsxs("g", { className: stroke, children: [
+      /* @__PURE__ */ jsx("path", { d: "M 0.9 2.8 H 13.1" }),
+      /* @__PURE__ */ jsx("path", { d: "M 0.9 11.2 H 13.1" }),
+      /* @__PURE__ */ jsx("path", { d: "M 3.6 5.2 V 8.8" }),
+      /* @__PURE__ */ jsx("path", { d: "M 7 5.2 V 8.8" }),
+      /* @__PURE__ */ jsx("path", { d: "M 10.4 5.2 V 8.8" })
+    ] }),
+    kind === "external" && /* @__PURE__ */ jsxs("g", { className: stroke, children: [
+      /* @__PURE__ */ jsx("path", { d: "M 7.4 1.8 H 1.6 V 12.2 H 12.4 V 6.4" }),
+      /* @__PURE__ */ jsx("path", { d: "M 8.4 5.4 L 13 1" }),
+      /* @__PURE__ */ jsx("path", { d: "M 9.6 0.9 H 13.1 V 4.4" })
+    ] })
+  ] });
+}
+function plateClasses(variant, muted) {
+  switch (variant) {
+    case "emphasis":
+      return "fill-(--diagram-plate) stroke-(--diagram-plate) [stroke-width:1]";
+    case "security":
+      return "fill-(--diagram-node) stroke-(--diagram-rule-hard) [stroke-width:1.3] [stroke-dasharray:5_3]";
+    case "dashed":
+      return "fill-(--diagram-node) stroke-(--diagram-rule) [stroke-width:1] [stroke-dasharray:4_3]";
+    default:
+      return muted ? "fill-(--diagram-node-2) stroke-(--diagram-rule) [stroke-width:1]" : "fill-(--diagram-node) stroke-(--diagram-rule) [stroke-width:1]";
+  }
+}
+const PLATE = {
+  padX: 15,
+  eyebrow: 19,
+  label: 39,
+  sub: 53,
+  lineStep: 17,
+  /** Where the eyebrow lands when there is none — the label moves up into it. */
+  riseWithoutEyebrow: 16
+};
+function plateHeight(labelLines, hasSub, hasEyebrow, floor = 0) {
+  const last = hasSub ? PLATE.sub : PLATE.label;
+  const content = last + (labelLines - 1) * PLATE.lineStep + 16 - (hasEyebrow ? 0 : PLATE.riseWithoutEyebrow);
+  return Math.max(floor, Math.ceil(content));
+}
+function NodePlate({
+  box,
+  label,
+  sublabel,
+  tag,
+  kind,
+  variant,
+  step,
+  muted,
+  active,
+  dimmed,
+  onSelect,
+  nodeId
+}) {
+  const reversed = variant === "emphasis";
+  const lines = wrapText(label, TYPE.label, box.w - PLATE.padX * 2, 2);
+  const eyebrow = tag ?? (kind ? KIND_WORD[kind] : void 0);
+  const hasEyebrow = Boolean(eyebrow || step);
+  const rise = hasEyebrow ? 0 : PLATE.riseWithoutEyebrow;
+  const labelY = box.y + PLATE.label - rise;
+  const subY = box.y + PLATE.sub - rise + (lines.length - 1) * PLATE.lineStep;
+  return /* @__PURE__ */ jsxs(
+    "g",
+    {
+      "data-node": nodeId,
+      "data-active": active ? "" : void 0,
+      className: cn(
+        "transition-opacity duration-(--duration-fast)",
+        dimmed && "opacity-25",
+        onSelect && "cursor-pointer"
+      ),
+      onClick: onSelect,
+      children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: round(box.x),
+            y: round(box.y),
+            width: round(box.w),
+            height: round(box.h),
+            rx: 6,
+            ry: 6,
+            className: cn(PLATE_RADIUS, plateClasses(variant, Boolean(muted)))
+          }
+        ),
+        active && /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: round(box.x) - 3.5,
+            y: round(box.y) - 3.5,
+            width: round(box.w) + 7,
+            height: round(box.h) + 7,
+            rx: 9,
+            ry: 9,
+            fill: "none",
+            className: "stroke-(--accent) [stroke-width:1.5]"
+          }
+        ),
+        kind && /* @__PURE__ */ jsx(
+          Sigil,
+          {
+            kind,
+            x: box.x + PLATE.padX,
+            y: box.y + PLATE.eyebrow - 11,
+            reversed
+          }
+        ),
+        eyebrow && /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: round(box.x + PLATE.padX + (kind ? 20 : 0)),
+            y: round(box.y + PLATE.eyebrow),
+            className: cn(
+              "font-mono [font-size:8.5px] [letter-spacing:0.13em] uppercase",
+              reversed ? "fill-(--diagram-plate-ink) opacity-70" : "fill-(--diagram-ink-3)"
+            ),
+            children: eyebrow
+          }
+        ),
+        step && /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: round(box.x + box.w - PLATE.padX),
+            y: round(box.y + PLATE.eyebrow),
+            textAnchor: "end",
+            className: cn(
+              "font-mono [font-size:9px] [letter-spacing:0.1em]",
+              reversed ? "fill-(--diagram-plate-ink) opacity-65" : "fill-(--diagram-ink-3)"
+            ),
+            children: step
+          }
+        ),
+        lines.map((line, index) => /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: round(box.x + PLATE.padX),
+            y: round(labelY + index * PLATE.lineStep),
+            className: cn(
+              "font-sans [font-size:14px] [letter-spacing:-0.005em]",
+              reversed ? "fill-(--diagram-plate-ink)" : "fill-(--diagram-ink)"
+            ),
+            children: line
+          },
+          index
+        )),
+        sublabel && /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: round(box.x + PLATE.padX),
+            y: round(subY),
+            className: cn(
+              "font-mono [font-size:10px]",
+              reversed ? "fill-(--diagram-plate-ink) opacity-65" : "fill-(--diagram-ink-3)"
+            ),
+            children: sublabel
+          }
+        )
+      ]
+    }
+  );
+}
+function Chip({
+  x,
+  y,
+  text,
+  align = "start",
+  reversed
+}) {
+  const width = textWidth(text, TYPE.chip) + 12;
+  const left = align === "end" ? x - width : align === "middle" ? x - width / 2 : x;
+  return /* @__PURE__ */ jsxs("g", { "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: round(left),
+        y: round(y - 7.5),
+        width: round(width),
+        height: 15,
+        rx: 3,
+        ry: 3,
+        className: cn(
+          "[stroke-width:0.9] fill-(--diagram-surface)",
+          reversed ? "stroke-(--diagram-plate-ink) opacity-40" : "stroke-(--diagram-rule)"
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: round(left + width / 2),
+        y: round(y + 2.8),
+        textAnchor: "middle",
+        className: cn(
+          "font-mono [font-size:9px] [letter-spacing:0.05em]",
+          reversed ? "fill-(--diagram-plate-ink) opacity-70" : "fill-(--diagram-ink-3)"
+        ),
+        children: text
+      }
+    )
+  ] });
+}
+function edgeClasses(variant) {
+  switch (variant) {
+    case "emphasis":
+      return "stroke-(--diagram-line-strong)";
+    case "dashed":
+    case "return":
+      return "stroke-(--diagram-line-soft)";
+    default:
+      return "stroke-(--diagram-line)";
+  }
+}
+function edgeStroke(variant, weight) {
+  switch (variant) {
+    case "emphasis":
+      return { strokeWidth: weight ?? 2.1 };
+    case "security":
+      return { strokeWidth: weight ?? 1.4, strokeDasharray: "7 4" };
+    case "dashed":
+    case "return":
+      return { strokeWidth: weight ?? 1.3, strokeDasharray: "4.5 4" };
+    default:
+      return { strokeWidth: weight ?? 1.4 };
+  }
+}
+function edgeMarker(variant) {
+  if (variant === "emphasis") return "arrow-strong";
+  if (variant === "return") return "arrow-open";
+  return "arrow";
+}
+function EdgeLabel({ x, y, axis, text, chip, note }) {
+  const width = textWidth(text, TYPE.edge) + 10;
+  const noteWidth = note ? textWidth(note, TYPE.chip) + 10 : 0;
+  const cy = y + (axis === "x" ? -10 : 0);
+  return /* @__PURE__ */ jsxs("g", { "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: round(x - width / 2),
+        y: round(cy - 7),
+        width: round(width),
+        height: 14,
+        className: "fill-(--diagram-surface)"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: round(x),
+        y: round(cy + 3.5),
+        textAnchor: "middle",
+        className: "fill-(--diagram-ink-2) font-mono [font-size:10px]",
+        children: text
+      }
+    ),
+    note && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: round(x - noteWidth / 2),
+          y: round(cy + 6),
+          width: round(noteWidth),
+          height: 13,
+          className: "fill-(--diagram-surface)"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: round(x),
+          y: round(cy + 15.5),
+          textAnchor: "middle",
+          className: "fill-(--diagram-ink-3) font-mono [font-size:9px]",
+          children: note
+        }
+      )
+    ] }),
+    chip && /* @__PURE__ */ jsx(Chip, { x, y: cy + (note ? 33 : 20), text: chip, align: "middle" })
+  ] });
+}
+function BandFrame({
+  box,
+  label,
+  dashed,
+  muted
+}) {
+  return /* @__PURE__ */ jsxs("g", { "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: round(box.x),
+        y: round(box.y),
+        width: round(box.w),
+        height: round(box.h),
+        rx: 10,
+        ry: 10,
+        className: cn(
+          "[rx:var(--radius-lg)] [ry:var(--radius-lg)]",
+          muted ? "fill-(--diagram-band)" : "fill-none",
+          dashed ? "stroke-(--diagram-rule-hard) [stroke-width:1.2] [stroke-dasharray:6_4]" : "stroke-(--diagram-rule) [stroke-width:1]"
+        )
+      }
+    ),
+    label && /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: round(box.x + 2),
+        y: round(box.y - 7),
+        className: "fill-(--diagram-ink-3) font-mono [font-size:9px] [letter-spacing:0.14em] uppercase",
+        children: label
+      }
+    )
+  ] });
+}
+function StatePlate({
+  box,
+  kind,
+  children
+}) {
+  const { x, y, w, h } = box;
+  const common = "[stroke-width:1.3]";
+  if (kind === "decision") {
+    const cx = x + w / 2;
+    const cy = y + h / 2;
+    return /* @__PURE__ */ jsxs("g", { children: [
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: `M ${round(cx)} ${round(y)} L ${round(x + w)} ${round(cy)} L ${round(cx)} ${round(y + h)} L ${round(x)} ${round(cy)} Z`,
+          className: cn("fill-(--diagram-node) stroke-(--diagram-rule-hard)", common)
+        }
+      ),
+      children
+    ] });
+  }
+  if (kind === "external") {
+    const cut = 13;
+    return /* @__PURE__ */ jsxs("g", { children: [
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: `M ${round(x)} ${round(y)} H ${round(x + w - cut)} L ${round(x + w)} ${round(y + cut)} V ${round(y + h)} H ${round(x)} Z`,
+          className: cn("fill-(--diagram-node-2) stroke-(--diagram-rule)", common)
+        }
+      ),
+      children
+    ] });
+  }
+  const shape = kind === "start" ? "fill-(--diagram-plate) stroke-(--diagram-plate)" : kind === "success" ? "fill-(--success-wash) stroke-(--success)" : kind === "failure" ? "fill-(--danger-wash) stroke-(--danger)" : kind === "waiting" ? "fill-(--diagram-node) stroke-(--diagram-rule) [stroke-dasharray:5_3]" : kind === "neutral" ? "fill-(--diagram-node-2) stroke-(--diagram-rule)" : "fill-(--diagram-node) stroke-(--diagram-rule-hard)";
+  const radius = kind === "start" ? h / 2 : 6;
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: round(x),
+        y: round(y),
+        width: round(w),
+        height: round(h),
+        rx: radius,
+        ry: radius,
+        className: cn(kind === "start" ? "" : PLATE_RADIUS, shape, common)
+      }
+    ),
+    children
+  ] });
+}
+export {
+  BandFrame,
+  Chip,
+  DiagramDefs,
+  EdgeLabel,
+  KIND_WORD,
+  NodePlate,
+  PLATE,
+  Sigil,
+  StatePlate,
+  edgeClasses,
+  edgeMarker,
+  edgeStroke,
+  plateHeight
+};
+//# sourceMappingURL=marks.js.map