@duro-app/diagrams 0.31.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Frederic Rousseau
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/component-meta.d.ts

@@ -0,0 +1,15 @@
+export interface ComponentMeta {
+    description: string;
+    whenToUse: string[];
+    whenNotToUse: string[];
+    anatomy?: {
+        required: string[];
+        optional?: string[];
+    };
+    relatedTo?: Array<{
+        component: string;
+        relationship: string;
+    }>;
+    example: string;
+}
+//# sourceMappingURL=component-meta.d.ts.map

package/dist/component-meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-meta.d.ts","sourceRoot":"","sources":["../src/component-meta.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC5B,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,EAAE,CAAA;IACnB,YAAY,EAAE,MAAM,EAAE,CAAA;IACtB,OAAO,CAAC,EAAE;QAAC,QAAQ,EAAE,MAAM,EAAE,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAA;KAAC,CAAA;IACnD,SAAS,CAAC,EAAE,KAAK,CAAC;QAAC,SAAS,EAAE,MAAM,CAAC;QAAC,YAAY,EAAE,MAAM,CAAA;KAAC,CAAC,CAAA;IAC5D,OAAO,EAAE,MAAM,CAAA;CAChB"}

package/dist/components/Arrow/Arrow.d.ts

@@ -0,0 +1,24 @@
+import { Point } from '../types';
+export interface ArrowProps {
+    from: Point;
+    to: Point;
+    /**
+     * `none` (default) draws a straight line.
+     * `L` draws a 2-segment bend: horizontal-then-vertical or vertical-then-horizontal.
+     * `Z` draws a 3-segment dogleg so the middle leg is detached from both endpoints —
+     * useful for branching/converging arrows that should not run along the source or
+     * target box's edge.
+     * `axis` controls the orientation of the middle leg.
+     * - axis='v' (default): leg order is V-H or V-H-V (middle leg horizontal).
+     * - axis='h': leg order is H-V or H-V-H (middle leg vertical).
+     */
+    bend?: 'none' | 'L' | 'Z';
+    axis?: 'v' | 'h';
+    /**
+     * For `Z` bends, the position of the middle leg as a fraction (0..1) between
+     * `from` and `to` along the primary axis. Defaults to 0.5 (centered).
+     */
+    mid?: number;
+}
+export declare function Arrow({ from, to, bend, axis, mid }: ArrowProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Arrow.d.ts.map

package/dist/components/Arrow/Arrow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Arrow.d.ts","sourceRoot":"","sources":["../../../src/components/Arrow/Arrow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,KAAK,EAAC,MAAM,UAAU,CAAA;AAEnC,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,KAAK,CAAA;IACX,EAAE,EAAE,KAAK,CAAA;IACT;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,GAAG,GAAG,GAAG,CAAA;IACzB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAA;IAChB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED,wBAAgB,KAAK,CAAC,EAAC,IAAI,EAAE,EAAE,EAAE,IAAa,EAAE,IAAU,EAAE,GAAS,EAAC,EAAE,UAAU,2CAuBjF"}

package/dist/components/Arrow/Arrow.meta.d.ts

@@ -0,0 +1,3 @@
+import { ComponentMeta } from '../../component-meta';
+export declare const meta: ComponentMeta;
+//# sourceMappingURL=Arrow.meta.d.ts.map

package/dist/components/Arrow/Arrow.meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Arrow.meta.d.ts","sourceRoot":"","sources":["../../../src/components/Arrow/Arrow.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,sBAAsB,CAAA;AAEvD,eAAO,MAAM,IAAI,EAAE,aAalB,CAAA"}

package/dist/components/Diagram/Diagram.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export interface DiagramProps {
+    width: number;
+    height: number;
+    title: string;
+    desc?: string;
+    viewBox?: string;
+    children: ReactNode;
+}
+export declare function Diagram({ width, height, title, desc, viewBox, children }: DiagramProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Diagram.d.ts.map

package/dist/components/Diagram/Diagram.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Diagram.d.ts","sourceRoot":"","sources":["../../../src/components/Diagram/Diagram.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAA;AAEpC,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,wBAAgB,OAAO,CAAC,EAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAC,EAAE,YAAY,2CAmCpF"}

package/dist/components/Diagram/Diagram.meta.d.ts

@@ -0,0 +1,3 @@
+import { ComponentMeta } from '../../component-meta';
+export declare const meta: ComponentMeta;
+//# sourceMappingURL=Diagram.meta.d.ts.map

package/dist/components/Diagram/Diagram.meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Diagram.meta.d.ts","sourceRoot":"","sources":["../../../src/components/Diagram/Diagram.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,sBAAsB,CAAA;AAEvD,eAAO,MAAM,IAAI,EAAE,aAkBlB,CAAA"}

package/dist/components/Diagram/Diagram.stories.d.ts

@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Diagram } from './Diagram';
+declare const meta: Meta<typeof Diagram>;
+export default meta;
+type Story = StoryObj<typeof Diagram>;
+/**
+ * One swatch row per ramp. Each row shows a Node with both title and subtitle
+ * so all four colour stops (fill, stroke, title, subtitle) are exercised. Wrap
+ * the story in a different ThemeProvider via the toolbar background switcher
+ * to verify dark / light / high-contrast all flip cleanly.
+ */
+export declare const RampSwatches: Story;
+/**
+ * The chat's worked example: an idempotent Vault PKI certificate-issuance flow.
+ * Exercises Diagram + Node + Arrow (straight + L-bend) + Leader + Text in one piece.
+ *
+ * Layout, with the box centres marked:
+ *
+ *                 Start            (240,20)–(440,76)
+ *                   |
+ *               Lookup metadata    (240,120)–(440,192)
+ *                   |
+ *              decision split (no diamond — colour split + L-bends carry meaning)
+ *              /             \
+ *   Cached?  Y                N  Cached?
+ *      |                          |
+ *   Return cached cert         Issue new certificate     (then back to bottom row)
+ *   (40,240)–(280,312)         (400,240)–(640,312)
+ *      \                          /
+ *               End               (240,360)–(440,416)
+ */
+export declare const VaultPkiFlow: Story;
+//# sourceMappingURL=Diagram.stories.d.ts.map

package/dist/components/Diagram/Diagram.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Diagram.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Diagram/Diagram.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAA;AAEpD,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAA;AAOjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAG9B,CAAA;AACD,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAA;AAErC;;;;;GAKG;AACH,eAAO,MAAM,YAAY,EAAE,KA2B1B,CAAA;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,YAAY,EAAE,KAkE1B,CAAA"}

package/dist/components/Leader/Leader.d.ts

@@ -0,0 +1,7 @@
+import { Point } from '../types';
+export interface LeaderProps {
+    from: Point;
+    to: Point;
+}
+export declare function Leader({ from, to }: LeaderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Leader.d.ts.map

package/dist/components/Leader/Leader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Leader.d.ts","sourceRoot":"","sources":["../../../src/components/Leader/Leader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,KAAK,EAAC,MAAM,UAAU,CAAA;AAEnC,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,KAAK,CAAA;IACX,EAAE,EAAE,KAAK,CAAA;CACV;AAED,wBAAgB,MAAM,CAAC,EAAC,IAAI,EAAE,EAAE,EAAC,EAAE,WAAW,2CAI7C"}

package/dist/components/Leader/Leader.meta.d.ts

@@ -0,0 +1,3 @@
+import { ComponentMeta } from '../../component-meta';
+export declare const meta: ComponentMeta;
+//# sourceMappingURL=Leader.meta.d.ts.map

package/dist/components/Leader/Leader.meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Leader.meta.d.ts","sourceRoot":"","sources":["../../../src/components/Leader/Leader.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,sBAAsB,CAAA;AAEvD,eAAO,MAAM,IAAI,EAAE,aAUlB,CAAA"}

package/dist/components/Node/Node.d.ts

@@ -0,0 +1,13 @@
+import { Ramp } from '../types';
+export interface NodeProps {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    ramp: Ramp;
+    title: string;
+    subtitle?: string;
+    rx?: number;
+}
+export declare function Node({ x, y, w, h, ramp, title, subtitle, rx }: NodeProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Node.d.ts.map

package/dist/components/Node/Node.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Node.d.ts","sourceRoot":"","sources":["../../../src/components/Node/Node.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,UAAU,CAAA;AAElC,MAAM,WAAW,SAAS;IACxB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,IAAI,EAAE,IAAI,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ;AAED,wBAAgB,IAAI,CAAC,EAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAM,EAAC,EAAE,SAAS,2CAkB1E"}

package/dist/components/Node/Node.meta.d.ts

@@ -0,0 +1,3 @@
+import { ComponentMeta } from '../../component-meta';
+export declare const meta: ComponentMeta;
+//# sourceMappingURL=Node.meta.d.ts.map

package/dist/components/Node/Node.meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Node.meta.d.ts","sourceRoot":"","sources":["../../../src/components/Node/Node.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,sBAAsB,CAAA;AAEvD,eAAO,MAAM,IAAI,EAAE,aAkBlB,CAAA"}

package/dist/components/Text/Text.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+export type TextVariant = 't' | 'ts' | 'th';
+export type TextAnchor = 'start' | 'middle' | 'end';
+export interface TextProps {
+    x: number;
+    y: number;
+    variant?: TextVariant;
+    anchor?: TextAnchor;
+    children: ReactNode;
+}
+export declare function Text({ x, y, variant, anchor, children }: TextProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Text.d.ts.map

package/dist/components/Text/Text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAA;AAEpC,MAAM,MAAM,WAAW,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,CAAA;AAC3C,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;AAEnD,MAAM,WAAW,SAAS;IACxB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,wBAAgB,IAAI,CAAC,EAAC,CAAC,EAAE,CAAC,EAAE,OAAa,EAAE,MAAgB,EAAE,QAAQ,EAAC,EAAE,SAAS,2CAMhF"}

package/dist/components/Text/Text.meta.d.ts

@@ -0,0 +1,3 @@
+import { ComponentMeta } from '../../component-meta';
+export declare const meta: ComponentMeta;
+//# sourceMappingURL=Text.meta.d.ts.map

package/dist/components/Text/Text.meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.meta.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,sBAAsB,CAAA;AAEvD,eAAO,MAAM,IAAI,EAAE,aAWlB,CAAA"}

package/dist/components/types.d.ts

@@ -0,0 +1,4 @@
+export type Ramp = 'purple' | 'teal' | 'coral' | 'pink' | 'gray' | 'blue' | 'green' | 'amber' | 'red';
+export declare const RAMPS: readonly Ramp[];
+export type Point = readonly [number, number];
+//# sourceMappingURL=types.d.ts.map

package/dist/components/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/components/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,IAAI,GACZ,QAAQ,GACR,MAAM,GACN,OAAO,GACP,MAAM,GACN,MAAM,GACN,MAAM,GACN,OAAO,GACP,OAAO,GACP,KAAK,CAAA;AAET,eAAO,MAAM,KAAK,EAAE,SAAS,IAAI,EAUvB,CAAA;AAEV,MAAM,MAAM,KAAK,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA"}

package/dist/index.css

@@ -0,0 +1 @@
+:where(:root,[data-theme=dark]){--duro-diagram-purple-fill: #5b21b6;--duro-diagram-purple-stroke: #ddd6fe;--duro-diagram-purple-title: #ede9fe;--duro-diagram-purple-subtitle: #ddd6fe;--duro-diagram-teal-fill: #115e59;--duro-diagram-teal-stroke: #99f6e4;--duro-diagram-teal-title: #ccfbf1;--duro-diagram-teal-subtitle: #99f6e4;--duro-diagram-coral-fill: #9f1239;--duro-diagram-coral-stroke: #fecdd3;--duro-diagram-coral-title: #ffe4e6;--duro-diagram-coral-subtitle: #fecdd3;--duro-diagram-pink-fill: #9d174d;--duro-diagram-pink-stroke: #fbcfe8;--duro-diagram-pink-title: #fce7f3;--duro-diagram-pink-subtitle: #fbcfe8;--duro-diagram-gray-fill: #262626;--duro-diagram-gray-stroke: #d4d4d4;--duro-diagram-gray-title: #e5e5e5;--duro-diagram-gray-subtitle: #d4d4d4;--duro-diagram-blue-fill: #1e3a8a;--duro-diagram-blue-stroke: #bfdbfe;--duro-diagram-blue-title: #dbeafe;--duro-diagram-blue-subtitle: #bfdbfe;--duro-diagram-green-fill: #166534;--duro-diagram-green-stroke: #bbf7d0;--duro-diagram-green-title: #dcfce7;--duro-diagram-green-subtitle: #bbf7d0;--duro-diagram-amber-fill: #92400e;--duro-diagram-amber-stroke: #fde68a;--duro-diagram-amber-title: #fef3c7;--duro-diagram-amber-subtitle: #fde68a;--duro-diagram-red-fill: #991b1b;--duro-diagram-red-stroke: #fecaca;--duro-diagram-red-title: #fee2e2;--duro-diagram-red-subtitle: #fecaca;--duro-diagram-arrow-stroke: #6b6b6b;--duro-diagram-leader-stroke: #4a4a4a;--duro-diagram-box-fill: transparent;--duro-diagram-box-stroke: #333333;--duro-diagram-text: #e5e5e5;--duro-diagram-text-muted: #b0b0b0}[data-theme=light]{--duro-diagram-purple-fill: #f5f3ff;--duro-diagram-purple-stroke: #7c3aed;--duro-diagram-purple-title: #5b21b6;--duro-diagram-purple-subtitle: #7c3aed;--duro-diagram-teal-fill: #f0fdfa;--duro-diagram-teal-stroke: #0d9488;--duro-diagram-teal-title: #115e59;--duro-diagram-teal-subtitle: #0d9488;--duro-diagram-coral-fill: #fff1f2;--duro-diagram-coral-stroke: #e11d48;--duro-diagram-coral-title: #9f1239;--duro-diagram-coral-subtitle: #e11d48;--duro-diagram-pink-fill: #fdf2f8;--duro-diagram-pink-stroke: #db2777;--duro-diagram-pink-title: #9d174d;--duro-diagram-pink-subtitle: #db2777;--duro-diagram-gray-fill: #f5f5f5;--duro-diagram-gray-stroke: #525252;--duro-diagram-gray-title: #262626;--duro-diagram-gray-subtitle: #525252;--duro-diagram-blue-fill: #eff6ff;--duro-diagram-blue-stroke: #2563eb;--duro-diagram-blue-title: #1e3a8a;--duro-diagram-blue-subtitle: #2563eb;--duro-diagram-green-fill: #f0fdf4;--duro-diagram-green-stroke: #16a34a;--duro-diagram-green-title: #166534;--duro-diagram-green-subtitle: #16a34a;--duro-diagram-amber-fill: #fffbeb;--duro-diagram-amber-stroke: #d97706;--duro-diagram-amber-title: #92400e;--duro-diagram-amber-subtitle: #d97706;--duro-diagram-red-fill: #fef2f2;--duro-diagram-red-stroke: #dc2626;--duro-diagram-red-title: #991b1b;--duro-diagram-red-subtitle: #dc2626;--duro-diagram-arrow-stroke: #888888;--duro-diagram-leader-stroke: #c0c0c0;--duro-diagram-box-fill: transparent;--duro-diagram-box-stroke: #d4d4d4;--duro-diagram-text: #1a1a1a;--duro-diagram-text-muted: #4a4a4a}[data-theme=high-contrast]{--duro-diagram-purple-fill: #4c1d95;--duro-diagram-purple-stroke: #ede9fe;--duro-diagram-purple-title: #f5f3ff;--duro-diagram-purple-subtitle: #ede9fe;--duro-diagram-teal-fill: #134e4a;--duro-diagram-teal-stroke: #ccfbf1;--duro-diagram-teal-title: #f0fdfa;--duro-diagram-teal-subtitle: #ccfbf1;--duro-diagram-coral-fill: #881337;--duro-diagram-coral-stroke: #ffe4e6;--duro-diagram-coral-title: #fff1f2;--duro-diagram-coral-subtitle: #ffe4e6;--duro-diagram-pink-fill: #831843;--duro-diagram-pink-stroke: #fce7f3;--duro-diagram-pink-title: #fdf2f8;--duro-diagram-pink-subtitle: #fce7f3;--duro-diagram-gray-fill: #171717;--duro-diagram-gray-stroke: #e5e5e5;--duro-diagram-gray-title: #f5f5f5;--duro-diagram-gray-subtitle: #e5e5e5;--duro-diagram-blue-fill: #1e1b4b;--duro-diagram-blue-stroke: #dbeafe;--duro-diagram-blue-title: #eff6ff;--duro-diagram-blue-subtitle: #dbeafe;--duro-diagram-green-fill: #14532d;--duro-diagram-green-stroke: #dcfce7;--duro-diagram-green-title: #f0fdf4;--duro-diagram-green-subtitle: #dcfce7;--duro-diagram-amber-fill: #78350f;--duro-diagram-amber-stroke: #fef3c7;--duro-diagram-amber-title: #fffbeb;--duro-diagram-amber-subtitle: #fef3c7;--duro-diagram-red-fill: #7f1d1d;--duro-diagram-red-stroke: #fee2e2;--duro-diagram-red-title: #fef2f2;--duro-diagram-red-subtitle: #fee2e2;--duro-diagram-arrow-stroke: #ffffff;--duro-diagram-leader-stroke: #888888;--duro-diagram-box-fill: transparent;--duro-diagram-box-stroke: #555555;--duro-diagram-text: #ffffff;--duro-diagram-text-muted: #b0b0b0}.duro-diagram .t{font:400 14px/1.4 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;fill:var(--duro-diagram-text);stroke:none}.duro-diagram .ts{font:400 12px/1.4 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;fill:var(--duro-diagram-text-muted);stroke:none}.duro-diagram .th{font:500 14px/1.4 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;fill:var(--duro-diagram-text);stroke:none}.duro-diagram .box{fill:var(--duro-diagram-box-fill);stroke:var(--duro-diagram-box-stroke);stroke-width:.5}.duro-diagram .arr{stroke:var(--duro-diagram-arrow-stroke);stroke-width:1.5;fill:none}.duro-diagram .leader{stroke:var(--duro-diagram-leader-stroke);stroke-width:.5;stroke-dasharray:3 3;fill:none}.duro-diagram .c-purple>rect{fill:var(--duro-diagram-purple-fill);stroke:var(--duro-diagram-purple-stroke)}.duro-diagram .c-purple>.th{fill:var(--duro-diagram-purple-title)}.duro-diagram .c-purple>.ts{fill:var(--duro-diagram-purple-subtitle)}.duro-diagram .c-teal>rect{fill:var(--duro-diagram-teal-fill);stroke:var(--duro-diagram-teal-stroke)}.duro-diagram .c-teal>.th{fill:var(--duro-diagram-teal-title)}.duro-diagram .c-teal>.ts{fill:var(--duro-diagram-teal-subtitle)}.duro-diagram .c-coral>rect{fill:var(--duro-diagram-coral-fill);stroke:var(--duro-diagram-coral-stroke)}.duro-diagram .c-coral>.th{fill:var(--duro-diagram-coral-title)}.duro-diagram .c-coral>.ts{fill:var(--duro-diagram-coral-subtitle)}.duro-diagram .c-pink>rect{fill:var(--duro-diagram-pink-fill);stroke:var(--duro-diagram-pink-stroke)}.duro-diagram .c-pink>.th{fill:var(--duro-diagram-pink-title)}.duro-diagram .c-pink>.ts{fill:var(--duro-diagram-pink-subtitle)}.duro-diagram .c-gray>rect{fill:var(--duro-diagram-gray-fill);stroke:var(--duro-diagram-gray-stroke)}.duro-diagram .c-gray>.th{fill:var(--duro-diagram-gray-title)}.duro-diagram .c-gray>.ts{fill:var(--duro-diagram-gray-subtitle)}.duro-diagram .c-blue>rect{fill:var(--duro-diagram-blue-fill);stroke:var(--duro-diagram-blue-stroke)}.duro-diagram .c-blue>.th{fill:var(--duro-diagram-blue-title)}.duro-diagram .c-blue>.ts{fill:var(--duro-diagram-blue-subtitle)}.duro-diagram .c-green>rect{fill:var(--duro-diagram-green-fill);stroke:var(--duro-diagram-green-stroke)}.duro-diagram .c-green>.th{fill:var(--duro-diagram-green-title)}.duro-diagram .c-green>.ts{fill:var(--duro-diagram-green-subtitle)}.duro-diagram .c-amber>rect{fill:var(--duro-diagram-amber-fill);stroke:var(--duro-diagram-amber-stroke)}.duro-diagram .c-amber>.th{fill:var(--duro-diagram-amber-title)}.duro-diagram .c-amber>.ts{fill:var(--duro-diagram-amber-subtitle)}.duro-diagram .c-red>rect{fill:var(--duro-diagram-red-fill);stroke:var(--duro-diagram-red-stroke)}.duro-diagram .c-red>.th{fill:var(--duro-diagram-red-title)}.duro-diagram .c-red>.ts{fill:var(--duro-diagram-red-subtitle)}

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { Diagram, type DiagramProps } from './components/Diagram/Diagram';
+export { Node, type NodeProps } from './components/Node/Node';
+export { Arrow, type ArrowProps } from './components/Arrow/Arrow';
+export { Leader, type LeaderProps } from './components/Leader/Leader';
+export { Text, type TextProps, type TextVariant, type TextAnchor } from './components/Text/Text';
+export { RAMPS, type Ramp, type Point } from './components/types';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAA;AAErB,OAAO,EAAC,OAAO,EAAE,KAAK,YAAY,EAAC,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAC,IAAI,EAAE,KAAK,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAC3D,OAAO,EAAC,KAAK,EAAE,KAAK,UAAU,EAAC,MAAM,0BAA0B,CAAA;AAC/D,OAAO,EAAC,MAAM,EAAE,KAAK,WAAW,EAAC,MAAM,4BAA4B,CAAA;AACnE,OAAO,EAAC,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,WAAW,EAAE,KAAK,UAAU,EAAC,MAAM,wBAAwB,CAAA;AAC9F,OAAO,EAAC,KAAK,EAAE,KAAK,IAAI,EAAE,KAAK,KAAK,EAAC,MAAM,oBAAoB,CAAA"}

package/dist/index.js

@@ -0,0 +1,93 @@
+import { jsxs as u, jsx as n } from "react/jsx-runtime";
+function $({ width: o, height: t, title: a, desc: e, viewBox: l, children: r }) {
+  return /* @__PURE__ */ u(
+    "svg",
+    {
+      role: "img",
+      className: "duro-diagram",
+      viewBox: l ?? `0 0 ${o} ${t}`,
+      width: "100%",
+      style: { maxWidth: o, height: "auto", display: "block" },
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ n("title", { children: a }),
+        e ? /* @__PURE__ */ n("desc", { children: e }) : null,
+        /* @__PURE__ */ n("defs", { children: /* @__PURE__ */ n(
+          "marker",
+          {
+            id: "duro-arrow",
+            viewBox: "0 0 10 10",
+            refX: 8,
+            refY: 5,
+            markerWidth: 6,
+            markerHeight: 6,
+            orient: "auto-start-reverse",
+            children: /* @__PURE__ */ n(
+              "path",
+              {
+                d: "M2 1L8 5L2 9",
+                fill: "none",
+                stroke: "context-stroke",
+                strokeWidth: 1.5,
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          }
+        ) }),
+        r
+      ]
+    }
+  );
+}
+function x({ x: o, y: t, w: a, h: e, ramp: l, title: r, subtitle: i, rx: c = 8 }) {
+  const s = o + a / 2, d = i ? t + e / 2 - 9 : t + e / 2, m = t + e / 2 + 9;
+  return /* @__PURE__ */ u("g", { className: `node c-${l}`, children: [
+    /* @__PURE__ */ n("rect", { x: o, y: t, width: a, height: e, rx: c, strokeWidth: 0.5 }),
+    /* @__PURE__ */ n("text", { className: "th", x: s, y: d, textAnchor: "middle", dominantBaseline: "central", children: r }),
+    i ? /* @__PURE__ */ n("text", { className: "ts", x: s, y: m, textAnchor: "middle", dominantBaseline: "central", children: i }) : null
+  ] });
+}
+function f({ from: o, to: t, bend: a = "none", axis: e = "v", mid: l = 0.5 }) {
+  const [r, i] = o, [c, s] = t;
+  if (a === "none")
+    return /* @__PURE__ */ n("line", { className: "arr", x1: r, y1: i, x2: c, y2: s, markerEnd: "url(#duro-arrow)" });
+  let d;
+  if (a === "L")
+    d = e === "v" ? `M ${r} ${i} V ${s} H ${c}` : `M ${r} ${i} H ${c} V ${s}`;
+  else if (e === "v") {
+    const m = i + (s - i) * l;
+    d = `M ${r} ${i} V ${m} H ${c} V ${s}`;
+  } else {
+    const m = r + (c - r) * l;
+    d = `M ${r} ${i} H ${m} V ${s} H ${c}`;
+  }
+  return /* @__PURE__ */ n("path", { className: "arr", d, fill: "none", markerEnd: "url(#duro-arrow)" });
+}
+function k({ from: o, to: t }) {
+  const [a, e] = o, [l, r] = t;
+  return /* @__PURE__ */ n("line", { className: "leader", x1: a, y1: e, x2: l, y2: r });
+}
+function g({ x: o, y: t, variant: a = "t", anchor: e = "start", children: l }) {
+  return /* @__PURE__ */ n("text", { className: a, x: o, y: t, textAnchor: e, dominantBaseline: "central", children: l });
+}
+const p = [
+  "purple",
+  "teal",
+  "coral",
+  "pink",
+  "gray",
+  "blue",
+  "green",
+  "amber",
+  "red"
+];
+export {
+  f as Arrow,
+  $ as Diagram,
+  k as Leader,
+  x as Node,
+  p as RAMPS,
+  g as Text
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/components/Diagram/Diagram.tsx","../src/components/Node/Node.tsx","../src/components/Arrow/Arrow.tsx","../src/components/Leader/Leader.tsx","../src/components/Text/Text.tsx","../src/components/types.ts"],"sourcesContent":["import type {ReactNode} from 'react'\n\nexport interface DiagramProps {\n  width: number\n  height: number\n  title: string\n  desc?: string\n  viewBox?: string\n  children: ReactNode\n}\n\nexport function Diagram({width, height, title, desc, viewBox, children}: DiagramProps) {\n  return (\n    <svg\n      role=\"img\"\n      className=\"duro-diagram\"\n      viewBox={viewBox ?? `0 0 ${width} ${height}`}\n      width=\"100%\"\n      style={{maxWidth: width, height: 'auto', display: 'block'}}\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>{title}</title>\n      {desc ? <desc>{desc}</desc> : null}\n      <defs>\n        <marker\n          id=\"duro-arrow\"\n          viewBox=\"0 0 10 10\"\n          refX={8}\n          refY={5}\n          markerWidth={6}\n          markerHeight={6}\n          orient=\"auto-start-reverse\"\n        >\n          <path\n            d=\"M2 1L8 5L2 9\"\n            fill=\"none\"\n            stroke=\"context-stroke\"\n            strokeWidth={1.5}\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </marker>\n      </defs>\n      {children}\n    </svg>\n  )\n}\n","import type {Ramp} from '../types'\n\nexport interface NodeProps {\n  x: number\n  y: number\n  w: number\n  h: number\n  ramp: Ramp\n  title: string\n  subtitle?: string\n  rx?: number\n}\n\nexport function Node({x, y, w, h, ramp, title, subtitle, rx = 8}: NodeProps) {\n  const cx = x + w / 2\n  const titleY = subtitle ? y + h / 2 - 9 : y + h / 2\n  const subtitleY = y + h / 2 + 9\n\n  return (\n    <g className={`node c-${ramp}`}>\n      <rect x={x} y={y} width={w} height={h} rx={rx} strokeWidth={0.5} />\n      <text className=\"th\" x={cx} y={titleY} textAnchor=\"middle\" dominantBaseline=\"central\">\n        {title}\n      </text>\n      {subtitle ? (\n        <text className=\"ts\" x={cx} y={subtitleY} textAnchor=\"middle\" dominantBaseline=\"central\">\n          {subtitle}\n        </text>\n      ) : null}\n    </g>\n  )\n}\n","import type {Point} from '../types'\n\nexport interface ArrowProps {\n  from: Point\n  to: Point\n  /**\n   * `none` (default) draws a straight line.\n   * `L` draws a 2-segment bend: horizontal-then-vertical or vertical-then-horizontal.\n   * `Z` draws a 3-segment dogleg so the middle leg is detached from both endpoints —\n   * useful for branching/converging arrows that should not run along the source or\n   * target box's edge.\n   * `axis` controls the orientation of the middle leg.\n   * - axis='v' (default): leg order is V-H or V-H-V (middle leg horizontal).\n   * - axis='h': leg order is H-V or H-V-H (middle leg vertical).\n   */\n  bend?: 'none' | 'L' | 'Z'\n  axis?: 'v' | 'h'\n  /**\n   * For `Z` bends, the position of the middle leg as a fraction (0..1) between\n   * `from` and `to` along the primary axis. Defaults to 0.5 (centered).\n   */\n  mid?: number\n}\n\nexport function Arrow({from, to, bend = 'none', axis = 'v', mid = 0.5}: ArrowProps) {\n  const [x1, y1] = from\n  const [x2, y2] = to\n\n  if (bend === 'none') {\n    return <line className=\"arr\" x1={x1} y1={y1} x2={x2} y2={y2} markerEnd=\"url(#duro-arrow)\" />\n  }\n\n  let d: string\n  if (bend === 'L') {\n    d = axis === 'v' ? `M ${x1} ${y1} V ${y2} H ${x2}` : `M ${x1} ${y1} H ${x2} V ${y2}`\n  } else {\n    // Z-bend: 3 segments with the middle leg detached from both endpoints.\n    if (axis === 'v') {\n      const midY = y1 + (y2 - y1) * mid\n      d = `M ${x1} ${y1} V ${midY} H ${x2} V ${y2}`\n    } else {\n      const midX = x1 + (x2 - x1) * mid\n      d = `M ${x1} ${y1} H ${midX} V ${y2} H ${x2}`\n    }\n  }\n\n  return <path className=\"arr\" d={d} fill=\"none\" markerEnd=\"url(#duro-arrow)\" />\n}\n","import type {Point} from '../types'\n\nexport interface LeaderProps {\n  from: Point\n  to: Point\n}\n\nexport function Leader({from, to}: LeaderProps) {\n  const [x1, y1] = from\n  const [x2, y2] = to\n  return <line className=\"leader\" x1={x1} y1={y1} x2={x2} y2={y2} />\n}\n","import type {ReactNode} from 'react'\n\nexport type TextVariant = 't' | 'ts' | 'th'\nexport type TextAnchor = 'start' | 'middle' | 'end'\n\nexport interface TextProps {\n  x: number\n  y: number\n  variant?: TextVariant\n  anchor?: TextAnchor\n  children: ReactNode\n}\n\nexport function Text({x, y, variant = 't', anchor = 'start', children}: TextProps) {\n  return (\n    <text className={variant} x={x} y={y} textAnchor={anchor} dominantBaseline=\"central\">\n      {children}\n    </text>\n  )\n}\n","export type Ramp =\n  | 'purple'\n  | 'teal'\n  | 'coral'\n  | 'pink'\n  | 'gray'\n  | 'blue'\n  | 'green'\n  | 'amber'\n  | 'red'\n\nexport const RAMPS: readonly Ramp[] = [\n  'purple',\n  'teal',\n  'coral',\n  'pink',\n  'gray',\n  'blue',\n  'green',\n  'amber',\n  'red',\n] as const\n\nexport type Point = readonly [number, number]\n"],"names":["Diagram","width","height","title","desc","viewBox","children","jsxs","jsx","Node","x","y","w","h","ramp","subtitle","rx","cx","titleY","subtitleY","Arrow","from","to","bend","axis","mid","x1","y1","x2","y2","midY","midX","Leader","Text","variant","anchor","RAMPS"],"mappings":"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"}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@duro-app/diagrams",
+  "version": "0.31.0",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/fredericrous/duro-design-system",
+    "directory": "packages/diagrams"
+  },
+  "homepage": "https://github.com/fredericrous/duro-design-system",
+  "bugs": {
+    "url": "https://github.com/fredericrous/duro-design-system/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./dist/index.css": "./dist/index.css",
+    "./styles.css": "./dist/index.css"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@babel/preset-typescript": "^7.28.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0",
+    "vite-plugin-babel": "^1.5.0",
+    "vite-plugin-dts": "^4.0.0"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/component-meta.ts

@@ -0,0 +1,8 @@
+export interface ComponentMeta {
+  description: string
+  whenToUse: string[]
+  whenNotToUse: string[]
+  anatomy?: {required: string[]; optional?: string[]}
+  relatedTo?: Array<{component: string; relationship: string}>
+  example: string
+}

package/src/components/Arrow/Arrow.meta.ts

@@ -0,0 +1,16 @@
+import type {ComponentMeta} from '../../component-meta'
+
+export const meta: ComponentMeta = {
+  description:
+    'Connector line between two points, with an arrowhead at the end. Supports straight lines and right-angle (L) bends. The arrowhead inherits the line colour via stroke="context-stroke".',
+  whenToUse: [
+    'Linking nodes in a flowchart or architecture diagram',
+    'Indicating directionality (the arrowhead points to `to`)',
+  ],
+  whenNotToUse: [
+    'Dashed callouts to labels — use Leader',
+    'Two-headed/undirected edges — out of scope in v1; render two arrows or a line + custom marker',
+  ],
+  example: `<Arrow from={[340, 76]} to={[340, 120]} />
+<Arrow from={[280, 246]} to={[170, 300]} bend="L" />`,
+}

package/src/components/Arrow/Arrow.tsx

@@ -0,0 +1,48 @@
+import type {Point} from '../types'
+
+export interface ArrowProps {
+  from: Point
+  to: Point
+  /**
+   * `none` (default) draws a straight line.
+   * `L` draws a 2-segment bend: horizontal-then-vertical or vertical-then-horizontal.
+   * `Z` draws a 3-segment dogleg so the middle leg is detached from both endpoints —
+   * useful for branching/converging arrows that should not run along the source or
+   * target box's edge.
+   * `axis` controls the orientation of the middle leg.
+   * - axis='v' (default): leg order is V-H or V-H-V (middle leg horizontal).
+   * - axis='h': leg order is H-V or H-V-H (middle leg vertical).
+   */
+  bend?: 'none' | 'L' | 'Z'
+  axis?: 'v' | 'h'
+  /**
+   * For `Z` bends, the position of the middle leg as a fraction (0..1) between
+   * `from` and `to` along the primary axis. Defaults to 0.5 (centered).
+   */
+  mid?: number
+}
+
+export function Arrow({from, to, bend = 'none', axis = 'v', mid = 0.5}: ArrowProps) {
+  const [x1, y1] = from
+  const [x2, y2] = to
+
+  if (bend === 'none') {
+    return <line className="arr" x1={x1} y1={y1} x2={x2} y2={y2} markerEnd="url(#duro-arrow)" />
+  }
+
+  let d: string
+  if (bend === 'L') {
+    d = axis === 'v' ? `M ${x1} ${y1} V ${y2} H ${x2}` : `M ${x1} ${y1} H ${x2} V ${y2}`
+  } else {
+    // Z-bend: 3 segments with the middle leg detached from both endpoints.
+    if (axis === 'v') {
+      const midY = y1 + (y2 - y1) * mid
+      d = `M ${x1} ${y1} V ${midY} H ${x2} V ${y2}`
+    } else {
+      const midX = x1 + (x2 - x1) * mid
+      d = `M ${x1} ${y1} H ${midX} V ${y2} H ${x2}`
+    }
+  }
+
+  return <path className="arr" d={d} fill="none" markerEnd="url(#duro-arrow)" />
+}

package/src/components/Diagram/Diagram.meta.ts

@@ -0,0 +1,21 @@
+import type {ComponentMeta} from '../../component-meta'
+
+export const meta: ComponentMeta = {
+  description:
+    'Root SVG canvas for a static diagram. Provides accessibility (role=img, title, desc), the shared arrow marker definition, and the .duro-diagram scope class that all child node/connector classes resolve under. Authoring is coordinate-explicit; pair with Node, Arrow, Leader, Text.',
+  whenToUse: [
+    'Hand-authored flowcharts and architecture diagrams rendered inline',
+    'Static, non-interactive visualisations with controlled coordinates',
+    'Diagrams that must theme alongside the rest of the UI (light/dark/high-contrast via ThemeProvider)',
+  ],
+  whenNotToUse: [
+    'Auto-laid-out graphs — pick a layout engine (dagre, elkjs) and adapt downstream',
+    'Interactive editors with drag/drop or live data — out of scope',
+    'Charts (bar, line, pie) — use a charting library',
+  ],
+  example: `<Diagram width={680} height={320} title="Vault PKI flow">
+  <Node x={240} y={20} w={200} h={56} ramp="gray" title="Start" />
+  <Node x={240} y={120} w={200} h={72} ramp="blue" title="Lookup metadata" />
+  <Arrow from={[340, 76]} to={[340, 120]} />
+</Diagram>`,
+}

package/src/components/Diagram/Diagram.stories.tsx

@@ -0,0 +1,137 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect} from 'storybook/test'
+import {Diagram} from './Diagram'
+import {Node} from '../Node/Node'
+import {Arrow} from '../Arrow/Arrow'
+import {Leader} from '../Leader/Leader'
+import {Text} from '../Text/Text'
+import {RAMPS} from '../types'
+
+const meta: Meta<typeof Diagram> = {
+  title: 'Diagrams/Diagram',
+  component: Diagram,
+}
+export default meta
+type Story = StoryObj<typeof Diagram>
+
+/**
+ * One swatch row per ramp. Each row shows a Node with both title and subtitle
+ * so all four colour stops (fill, stroke, title, subtitle) are exercised. Wrap
+ * the story in a different ThemeProvider via the toolbar background switcher
+ * to verify dark / light / high-contrast all flip cleanly.
+ */
+export const RampSwatches: Story = {
+  args: {
+    width: 680,
+    height: RAMPS.length * 70 + 40,
+    title: 'All ramps',
+    desc: 'Every ramp rendered as a Node with title + subtitle to exercise all four colour stops.',
+    children: (
+      <>
+        {RAMPS.map((ramp, i) => (
+          <Node
+            key={ramp}
+            x={40}
+            y={20 + i * 70}
+            w={600}
+            h={56}
+            ramp={ramp}
+            title={`Ramp: ${ramp}`}
+            subtitle="Title and subtitle, fill and stroke"
+          />
+        ))}
+      </>
+    ),
+  },
+  play: async ({canvas}) => {
+    await expect(canvas.getByText('Ramp: blue')).toBeInTheDocument()
+    await expect(canvas.getByText('Ramp: red')).toBeInTheDocument()
+  },
+}
+
+/**
+ * The chat's worked example: an idempotent Vault PKI certificate-issuance flow.
+ * Exercises Diagram + Node + Arrow (straight + L-bend) + Leader + Text in one piece.
+ *
+ * Layout, with the box centres marked:
+ *
+ *                 Start            (240,20)–(440,76)
+ *                   |
+ *               Lookup metadata    (240,120)–(440,192)
+ *                   |
+ *              decision split (no diamond — colour split + L-bends carry meaning)
+ *              /             \
+ *   Cached?  Y                N  Cached?
+ *      |                          |
+ *   Return cached cert         Issue new certificate     (then back to bottom row)
+ *   (40,240)–(280,312)         (400,240)–(640,312)
+ *      \                          /
+ *               End               (240,360)–(440,416)
+ */
+export const VaultPkiFlow: Story = {
+  args: {
+    width: 680,
+    height: 440,
+    title: 'Vault PKI idempotent issuance flow',
+    desc:
+      'Start → look up KV metadata → branch: cached cert is returned, otherwise a new ' +
+      'cert is issued and metadata is updated. Both branches converge on End.',
+    children: (
+      <>
+        <Node x={240} y={20} w={200} h={56} ramp="gray" title="Start" />
+        <Arrow from={[340, 76]} to={[340, 120]} />
+
+        <Node
+          x={240}
+          y={120}
+          w={200}
+          h={72}
+          ramp="blue"
+          title="Lookup metadata"
+          subtitle="Read KV at secret/pki/<cn>"
+        />
+
+        <Arrow from={[340, 192]} to={[140, 240]} bend="Z" />
+        <Arrow from={[340, 192]} to={[520, 240]} bend="Z" />
+
+        <Node
+          x={40}
+          y={240}
+          w={200}
+          h={72}
+          ramp="teal"
+          title="Return cached cert"
+          subtitle="Skip issuance"
+        />
+
+        <Node
+          x={420}
+          y={240}
+          w={220}
+          h={72}
+          ramp="coral"
+          title="Issue new certificate"
+          subtitle="POST pki/issue/<role>"
+        />
+
+        <Arrow from={[140, 312]} to={[340, 360]} bend="Z" />
+        <Arrow from={[530, 312]} to={[340, 360]} bend="Z" />
+
+        <Node x={240} y={360} w={200} h={56} ramp="gray" title="End" />
+
+        {/* Edge label on the right branch arrow's horizontal leg (y=216, x=340..520).
+            Centered on the midpoint, offset 8px above so it doesn't sit on the line. */}
+        <Text x={430} y={208} variant="ts" anchor="middle">
+          Coral encodes a write
+        </Text>
+      </>
+    ),
+  },
+  play: async ({canvas}) => {
+    await expect(canvas.getByText('Start')).toBeInTheDocument()
+    await expect(canvas.getByText('Lookup metadata')).toBeInTheDocument()
+    await expect(canvas.getByText('Return cached cert')).toBeInTheDocument()
+    await expect(canvas.getByText('Issue new certificate')).toBeInTheDocument()
+    await expect(canvas.getByText('End')).toBeInTheDocument()
+  },
+}

package/src/components/Diagram/Diagram.tsx

@@ -0,0 +1,47 @@
+import type {ReactNode} from 'react'
+
+export interface DiagramProps {
+  width: number
+  height: number
+  title: string
+  desc?: string
+  viewBox?: string
+  children: ReactNode
+}
+
+export function Diagram({width, height, title, desc, viewBox, children}: DiagramProps) {
+  return (
+    <svg
+      role="img"
+      className="duro-diagram"
+      viewBox={viewBox ?? `0 0 ${width} ${height}`}
+      width="100%"
+      style={{maxWidth: width, height: 'auto', display: 'block'}}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title>{title}</title>
+      {desc ? <desc>{desc}</desc> : null}
+      <defs>
+        <marker
+          id="duro-arrow"
+          viewBox="0 0 10 10"
+          refX={8}
+          refY={5}
+          markerWidth={6}
+          markerHeight={6}
+          orient="auto-start-reverse"
+        >
+          <path
+            d="M2 1L8 5L2 9"
+            fill="none"
+            stroke="context-stroke"
+            strokeWidth={1.5}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </marker>
+      </defs>
+      {children}
+    </svg>
+  )
+}

package/src/components/Leader/Leader.meta.ts

@@ -0,0 +1,13 @@
+import type {ComponentMeta} from '../../component-meta'
+
+export const meta: ComponentMeta = {
+  description:
+    'A dashed, thin line for callout/annotation leaders. No arrowhead. Use to point a label at a node or region without implying flow.',
+  whenToUse: [
+    'Connecting an annotation Text to its referenced shape',
+    'Visually grouping a label with a region of the diagram',
+  ],
+  whenNotToUse: ['Indicating directional flow — use Arrow'],
+  example: `<Leader from={[300, 100]} to={[420, 80]} />
+<Text x={425} y={80} variant="ts" anchor="start">Annotation</Text>`,
+}

package/src/components/Leader/Leader.tsx

@@ -0,0 +1,12 @@
+import type {Point} from '../types'
+
+export interface LeaderProps {
+  from: Point
+  to: Point
+}
+
+export function Leader({from, to}: LeaderProps) {
+  const [x1, y1] = from
+  const [x2, y2] = to
+  return <line className="leader" x1={x1} y1={y1} x2={x2} y2={y2} />
+}

package/src/components/Node/Node.meta.ts

@@ -0,0 +1,21 @@
+import type {ComponentMeta} from '../../component-meta'
+
+export const meta: ComponentMeta = {
+  description:
+    'A rounded rectangle node with a title and optional subtitle. Coloured via a ramp prop; fill, stroke, and text colours flip automatically with the active theme.',
+  whenToUse: [
+    'Steps in a flowchart',
+    'Components in an architecture diagram',
+    'Boxes representing services, modules, or resources',
+  ],
+  whenNotToUse: [
+    'Free-floating text — use Text',
+    'Container shapes without semantic content — use a plain <rect className="box">',
+  ],
+  example: `<Node
+  x={100} y={20} w={200} h={56}
+  ramp="blue"
+  title="Lookup metadata"
+  subtitle="O(1) cache check"
+/>`,
+}

package/src/components/Node/Node.tsx

@@ -0,0 +1,32 @@
+import type {Ramp} from '../types'
+
+export interface NodeProps {
+  x: number
+  y: number
+  w: number
+  h: number
+  ramp: Ramp
+  title: string
+  subtitle?: string
+  rx?: number
+}
+
+export function Node({x, y, w, h, ramp, title, subtitle, rx = 8}: NodeProps) {
+  const cx = x + w / 2
+  const titleY = subtitle ? y + h / 2 - 9 : y + h / 2
+  const subtitleY = y + h / 2 + 9
+
+  return (
+    <g className={`node c-${ramp}`}>
+      <rect x={x} y={y} width={w} height={h} rx={rx} strokeWidth={0.5} />
+      <text className="th" x={cx} y={titleY} textAnchor="middle" dominantBaseline="central">
+        {title}
+      </text>
+      {subtitle ? (
+        <text className="ts" x={cx} y={subtitleY} textAnchor="middle" dominantBaseline="central">
+          {subtitle}
+        </text>
+      ) : null}
+    </g>
+  )
+}

package/src/components/Text/Text.meta.ts

@@ -0,0 +1,14 @@
+import type {ComponentMeta} from '../../component-meta'
+
+export const meta: ComponentMeta = {
+  description:
+    'Free-floating text inside a Diagram. Three variants — `t` (body 14px), `ts` (subtitle 12px muted), `th` (title 14px medium). Baseline is centred; descenders sit on the visual line.',
+  whenToUse: [
+    'Annotations and callouts pointing to nodes',
+    'Section headers within a diagram',
+    'Standalone labels not attached to a Node',
+  ],
+  whenNotToUse: ['Titles inside a Node — Node already renders its own title/subtitle'],
+  example: `<Text x={20} y={20} variant="th">System overview</Text>
+<Text x={20} y={40} variant="ts">As of 2026-05</Text>`,
+}

package/src/components/Text/Text.tsx

@@ -0,0 +1,20 @@
+import type {ReactNode} from 'react'
+
+export type TextVariant = 't' | 'ts' | 'th'
+export type TextAnchor = 'start' | 'middle' | 'end'
+
+export interface TextProps {
+  x: number
+  y: number
+  variant?: TextVariant
+  anchor?: TextAnchor
+  children: ReactNode
+}
+
+export function Text({x, y, variant = 't', anchor = 'start', children}: TextProps) {
+  return (
+    <text className={variant} x={x} y={y} textAnchor={anchor} dominantBaseline="central">
+      {children}
+    </text>
+  )
+}

package/src/components/types.ts

@@ -0,0 +1,24 @@
+export type Ramp =
+  | 'purple'
+  | 'teal'
+  | 'coral'
+  | 'pink'
+  | 'gray'
+  | 'blue'
+  | 'green'
+  | 'amber'
+  | 'red'
+
+export const RAMPS: readonly Ramp[] = [
+  'purple',
+  'teal',
+  'coral',
+  'pink',
+  'gray',
+  'blue',
+  'green',
+  'amber',
+  'red',
+] as const
+
+export type Point = readonly [number, number]

package/src/index.ts

@@ -0,0 +1,8 @@
+import './styles.css'
+
+export {Diagram, type DiagramProps} from './components/Diagram/Diagram'
+export {Node, type NodeProps} from './components/Node/Node'
+export {Arrow, type ArrowProps} from './components/Arrow/Arrow'
+export {Leader, type LeaderProps} from './components/Leader/Leader'
+export {Text, type TextProps, type TextVariant, type TextAnchor} from './components/Text/Text'
+export {RAMPS, type Ramp, type Point} from './components/types'

package/src/styles.css

@@ -0,0 +1,359 @@
+/*
+ * @duro-app/diagrams — design system for static SVG diagrams.
+ *
+ * Single source of truth for the 9 colour ramps × 7 stops. Light/dark/high-contrast
+ * themes pick stops from this table. All selectors are scoped under `.duro-diagram`
+ * so the package never bleeds class names like `.t`/`.box`/`.arr`/`.c-blue` into a
+ * host page. Themes are driven by the `data-theme` attribute set by ThemeProvider.
+ *
+ * Ramp reference (the 7 stops per ramp):
+ *
+ *            50        100       200       600       700       800       900
+ *   purple   #f5f3ff   #ede9fe   #ddd6fe   #7c3aed   #6d28d9   #5b21b6   #4c1d95
+ *   teal     #f0fdfa   #ccfbf1   #99f6e4   #0d9488   #0f766e   #115e59   #134e4a
+ *   coral    #fff1f2   #ffe4e6   #fecdd3   #e11d48   #be123c   #9f1239   #881337
+ *   pink     #fdf2f8   #fce7f3   #fbcfe8   #db2777   #be185d   #9d174d   #831843
+ *   gray     #f5f5f5   #e5e5e5   #d4d4d4   #525252   #404040   #262626   #171717
+ *   blue     #eff6ff   #dbeafe   #bfdbfe   #2563eb   #1d4ed8   #1e3a8a   #1e1b4b
+ *   green    #f0fdf4   #dcfce7   #bbf7d0   #16a34a   #15803d   #166534   #14532d
+ *   amber    #fffbeb   #fef3c7   #fde68a   #d97706   #b45309   #92400e   #78350f
+ *   red      #fef2f2   #fee2e2   #fecaca   #dc2626   #b91c1c   #991b1b   #7f1d1d
+ *
+ * Per-theme stop selection:
+ *   light:           Fill = 50,  Stroke = 600, Title = 800, Subtitle = 600
+ *   dark:            Fill = 800, Stroke = 200, Title = 100, Subtitle = 200
+ *   high-contrast:   Fill = 900, Stroke = 100, Title = 50,  Subtitle = 100
+ */
+
+/* ============================================================
+ * Theme variables
+ * ============================================================ */
+
+/* Default = dark. Applies when there is no [data-theme] ancestor or it is 'dark'. */
+:where(:root, [data-theme='dark']) {
+  --duro-diagram-purple-fill: #5b21b6;
+  --duro-diagram-purple-stroke: #ddd6fe;
+  --duro-diagram-purple-title: #ede9fe;
+  --duro-diagram-purple-subtitle: #ddd6fe;
+
+  --duro-diagram-teal-fill: #115e59;
+  --duro-diagram-teal-stroke: #99f6e4;
+  --duro-diagram-teal-title: #ccfbf1;
+  --duro-diagram-teal-subtitle: #99f6e4;
+
+  --duro-diagram-coral-fill: #9f1239;
+  --duro-diagram-coral-stroke: #fecdd3;
+  --duro-diagram-coral-title: #ffe4e6;
+  --duro-diagram-coral-subtitle: #fecdd3;
+
+  --duro-diagram-pink-fill: #9d174d;
+  --duro-diagram-pink-stroke: #fbcfe8;
+  --duro-diagram-pink-title: #fce7f3;
+  --duro-diagram-pink-subtitle: #fbcfe8;
+
+  --duro-diagram-gray-fill: #262626;
+  --duro-diagram-gray-stroke: #d4d4d4;
+  --duro-diagram-gray-title: #e5e5e5;
+  --duro-diagram-gray-subtitle: #d4d4d4;
+
+  --duro-diagram-blue-fill: #1e3a8a;
+  --duro-diagram-blue-stroke: #bfdbfe;
+  --duro-diagram-blue-title: #dbeafe;
+  --duro-diagram-blue-subtitle: #bfdbfe;
+
+  --duro-diagram-green-fill: #166534;
+  --duro-diagram-green-stroke: #bbf7d0;
+  --duro-diagram-green-title: #dcfce7;
+  --duro-diagram-green-subtitle: #bbf7d0;
+
+  --duro-diagram-amber-fill: #92400e;
+  --duro-diagram-amber-stroke: #fde68a;
+  --duro-diagram-amber-title: #fef3c7;
+  --duro-diagram-amber-subtitle: #fde68a;
+
+  --duro-diagram-red-fill: #991b1b;
+  --duro-diagram-red-stroke: #fecaca;
+  --duro-diagram-red-title: #fee2e2;
+  --duro-diagram-red-subtitle: #fecaca;
+
+  --duro-diagram-arrow-stroke: #6b6b6b;
+  --duro-diagram-leader-stroke: #4a4a4a;
+  --duro-diagram-box-fill: transparent;
+  --duro-diagram-box-stroke: #333333;
+  --duro-diagram-text: #e5e5e5;
+  --duro-diagram-text-muted: #b0b0b0;
+}
+
+[data-theme='light'] {
+  --duro-diagram-purple-fill: #f5f3ff;
+  --duro-diagram-purple-stroke: #7c3aed;
+  --duro-diagram-purple-title: #5b21b6;
+  --duro-diagram-purple-subtitle: #7c3aed;
+
+  --duro-diagram-teal-fill: #f0fdfa;
+  --duro-diagram-teal-stroke: #0d9488;
+  --duro-diagram-teal-title: #115e59;
+  --duro-diagram-teal-subtitle: #0d9488;
+
+  --duro-diagram-coral-fill: #fff1f2;
+  --duro-diagram-coral-stroke: #e11d48;
+  --duro-diagram-coral-title: #9f1239;
+  --duro-diagram-coral-subtitle: #e11d48;
+
+  --duro-diagram-pink-fill: #fdf2f8;
+  --duro-diagram-pink-stroke: #db2777;
+  --duro-diagram-pink-title: #9d174d;
+  --duro-diagram-pink-subtitle: #db2777;
+
+  --duro-diagram-gray-fill: #f5f5f5;
+  --duro-diagram-gray-stroke: #525252;
+  --duro-diagram-gray-title: #262626;
+  --duro-diagram-gray-subtitle: #525252;
+
+  --duro-diagram-blue-fill: #eff6ff;
+  --duro-diagram-blue-stroke: #2563eb;
+  --duro-diagram-blue-title: #1e3a8a;
+  --duro-diagram-blue-subtitle: #2563eb;
+
+  --duro-diagram-green-fill: #f0fdf4;
+  --duro-diagram-green-stroke: #16a34a;
+  --duro-diagram-green-title: #166534;
+  --duro-diagram-green-subtitle: #16a34a;
+
+  --duro-diagram-amber-fill: #fffbeb;
+  --duro-diagram-amber-stroke: #d97706;
+  --duro-diagram-amber-title: #92400e;
+  --duro-diagram-amber-subtitle: #d97706;
+
+  --duro-diagram-red-fill: #fef2f2;
+  --duro-diagram-red-stroke: #dc2626;
+  --duro-diagram-red-title: #991b1b;
+  --duro-diagram-red-subtitle: #dc2626;
+
+  --duro-diagram-arrow-stroke: #888888;
+  --duro-diagram-leader-stroke: #c0c0c0;
+  --duro-diagram-box-fill: transparent;
+  --duro-diagram-box-stroke: #d4d4d4;
+  --duro-diagram-text: #1a1a1a;
+  --duro-diagram-text-muted: #4a4a4a;
+}
+
+[data-theme='high-contrast'] {
+  --duro-diagram-purple-fill: #4c1d95;
+  --duro-diagram-purple-stroke: #ede9fe;
+  --duro-diagram-purple-title: #f5f3ff;
+  --duro-diagram-purple-subtitle: #ede9fe;
+
+  --duro-diagram-teal-fill: #134e4a;
+  --duro-diagram-teal-stroke: #ccfbf1;
+  --duro-diagram-teal-title: #f0fdfa;
+  --duro-diagram-teal-subtitle: #ccfbf1;
+
+  --duro-diagram-coral-fill: #881337;
+  --duro-diagram-coral-stroke: #ffe4e6;
+  --duro-diagram-coral-title: #fff1f2;
+  --duro-diagram-coral-subtitle: #ffe4e6;
+
+  --duro-diagram-pink-fill: #831843;
+  --duro-diagram-pink-stroke: #fce7f3;
+  --duro-diagram-pink-title: #fdf2f8;
+  --duro-diagram-pink-subtitle: #fce7f3;
+
+  --duro-diagram-gray-fill: #171717;
+  --duro-diagram-gray-stroke: #e5e5e5;
+  --duro-diagram-gray-title: #f5f5f5;
+  --duro-diagram-gray-subtitle: #e5e5e5;
+
+  --duro-diagram-blue-fill: #1e1b4b;
+  --duro-diagram-blue-stroke: #dbeafe;
+  --duro-diagram-blue-title: #eff6ff;
+  --duro-diagram-blue-subtitle: #dbeafe;
+
+  --duro-diagram-green-fill: #14532d;
+  --duro-diagram-green-stroke: #dcfce7;
+  --duro-diagram-green-title: #f0fdf4;
+  --duro-diagram-green-subtitle: #dcfce7;
+
+  --duro-diagram-amber-fill: #78350f;
+  --duro-diagram-amber-stroke: #fef3c7;
+  --duro-diagram-amber-title: #fffbeb;
+  --duro-diagram-amber-subtitle: #fef3c7;
+
+  --duro-diagram-red-fill: #7f1d1d;
+  --duro-diagram-red-stroke: #fee2e2;
+  --duro-diagram-red-title: #fef2f2;
+  --duro-diagram-red-subtitle: #fee2e2;
+
+  --duro-diagram-arrow-stroke: #ffffff;
+  --duro-diagram-leader-stroke: #888888;
+  --duro-diagram-box-fill: transparent;
+  --duro-diagram-box-stroke: #555555;
+  --duro-diagram-text: #ffffff;
+  --duro-diagram-text-muted: #b0b0b0;
+}
+
+/* ============================================================
+ * Typography (scoped under .duro-diagram)
+ * ============================================================ */
+
+.duro-diagram .t {
+  font:
+    400 14px/1.4 -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    sans-serif;
+  fill: var(--duro-diagram-text);
+  stroke: none;
+}
+
+.duro-diagram .ts {
+  font:
+    400 12px/1.4 -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    sans-serif;
+  fill: var(--duro-diagram-text-muted);
+  stroke: none;
+}
+
+.duro-diagram .th {
+  font:
+    500 14px/1.4 -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    sans-serif;
+  fill: var(--duro-diagram-text);
+  stroke: none;
+}
+
+/* ============================================================
+ * Structural classes
+ * ============================================================ */
+
+.duro-diagram .box {
+  fill: var(--duro-diagram-box-fill);
+  stroke: var(--duro-diagram-box-stroke);
+  stroke-width: 0.5;
+}
+
+.duro-diagram .arr {
+  stroke: var(--duro-diagram-arrow-stroke);
+  stroke-width: 1.5;
+  fill: none;
+}
+
+.duro-diagram .leader {
+  stroke: var(--duro-diagram-leader-stroke);
+  stroke-width: 0.5;
+  stroke-dasharray: 3 3;
+  fill: none;
+}
+
+/* `.node` is a structural wrapper. Colour is applied via the `.c-{ramp}` sibling
+ * class on the same <g> — see ramp rules below. */
+
+/* ============================================================
+ * Ramps — fill/stroke on the <rect>, text colour on .th/.ts children
+ * ============================================================ */
+
+.duro-diagram .c-purple > rect {
+  fill: var(--duro-diagram-purple-fill);
+  stroke: var(--duro-diagram-purple-stroke);
+}
+.duro-diagram .c-purple > .th {
+  fill: var(--duro-diagram-purple-title);
+}
+.duro-diagram .c-purple > .ts {
+  fill: var(--duro-diagram-purple-subtitle);
+}
+
+.duro-diagram .c-teal > rect {
+  fill: var(--duro-diagram-teal-fill);
+  stroke: var(--duro-diagram-teal-stroke);
+}
+.duro-diagram .c-teal > .th {
+  fill: var(--duro-diagram-teal-title);
+}
+.duro-diagram .c-teal > .ts {
+  fill: var(--duro-diagram-teal-subtitle);
+}
+
+.duro-diagram .c-coral > rect {
+  fill: var(--duro-diagram-coral-fill);
+  stroke: var(--duro-diagram-coral-stroke);
+}
+.duro-diagram .c-coral > .th {
+  fill: var(--duro-diagram-coral-title);
+}
+.duro-diagram .c-coral > .ts {
+  fill: var(--duro-diagram-coral-subtitle);
+}
+
+.duro-diagram .c-pink > rect {
+  fill: var(--duro-diagram-pink-fill);
+  stroke: var(--duro-diagram-pink-stroke);
+}
+.duro-diagram .c-pink > .th {
+  fill: var(--duro-diagram-pink-title);
+}
+.duro-diagram .c-pink > .ts {
+  fill: var(--duro-diagram-pink-subtitle);
+}
+
+.duro-diagram .c-gray > rect {
+  fill: var(--duro-diagram-gray-fill);
+  stroke: var(--duro-diagram-gray-stroke);
+}
+.duro-diagram .c-gray > .th {
+  fill: var(--duro-diagram-gray-title);
+}
+.duro-diagram .c-gray > .ts {
+  fill: var(--duro-diagram-gray-subtitle);
+}
+
+.duro-diagram .c-blue > rect {
+  fill: var(--duro-diagram-blue-fill);
+  stroke: var(--duro-diagram-blue-stroke);
+}
+.duro-diagram .c-blue > .th {
+  fill: var(--duro-diagram-blue-title);
+}
+.duro-diagram .c-blue > .ts {
+  fill: var(--duro-diagram-blue-subtitle);
+}
+
+.duro-diagram .c-green > rect {
+  fill: var(--duro-diagram-green-fill);
+  stroke: var(--duro-diagram-green-stroke);
+}
+.duro-diagram .c-green > .th {
+  fill: var(--duro-diagram-green-title);
+}
+.duro-diagram .c-green > .ts {
+  fill: var(--duro-diagram-green-subtitle);
+}
+
+.duro-diagram .c-amber > rect {
+  fill: var(--duro-diagram-amber-fill);
+  stroke: var(--duro-diagram-amber-stroke);
+}
+.duro-diagram .c-amber > .th {
+  fill: var(--duro-diagram-amber-title);
+}
+.duro-diagram .c-amber > .ts {
+  fill: var(--duro-diagram-amber-subtitle);
+}
+
+.duro-diagram .c-red > rect {
+  fill: var(--duro-diagram-red-fill);
+  stroke: var(--duro-diagram-red-stroke);
+}
+.duro-diagram .c-red > .th {
+  fill: var(--duro-diagram-red-title);
+}
+.duro-diagram .c-red > .ts {
+  fill: var(--duro-diagram-red-subtitle);
+}