sfn-diagram-react 0.7.0 → 1.0.0

package/README.md

@@ -15,14 +15,15 @@ npm install sfn-diagram-react sfn-diagram
 pnpm add sfn-diagram-react sfn-diagram
 ```
 
-`react` and `sfn-diagram` are peer dependencies. `sfn-diagram >= 1.7.0` is required — earlier versions don't have the options this package forwards (`collapse`, `catchHandling`, `showVariables`, `generateHtml`, `edgeOverrides`' qualified-id form, and `layout`/`theme` on the Mermaid path).
+`react` and `sfn-diagram` are peer dependencies. `sfn-diagram-react` 1.x needs `sfn-diagram` 2, because `format="html"` renders through the `sfn-diagram/html` subpath that 2.0 introduced. Like core, it ships ES modules only and needs Node >= 22.12, where `require()` still loads it. Upgrading from 1.x? See [Migrating to 2.0](https://sfn.yusufaf.dev/upgrading-to-v2/), which also covers Jest's `transformIgnorePatterns`.
 
 ## Usage
 
 ```tsx
+import type { AslDefinition } from 'sfn-diagram'
 import { SfnDiagram } from 'sfn-diagram-react'
 
-const definition = {
+const definition: AslDefinition = {
     StartAt: 'Hello',
     States: {
         Hello: { Type: 'Pass', Next: 'World' },
@@ -42,13 +43,21 @@ export function Diagram() {
 }
 ```
 
-`definition` accepts either an ASL object or a JSON string.
+`definition` accepts an `AslDefinition` object or a JSON string. An unannotated object
+in a variable widens `Type` to `string`, so annotate it
+(`const definition: AslDefinition = {...}`). A definition imported from a `.json` file
+is widened the same way: pass it as a string (`JSON.stringify(json)` or the raw file
+text), or cast it with `as unknown as AslDefinition`. A direct `as AslDefinition` fails
+for a Parallel whose branches name different states.
 
 ### Execution overlay
 
 Pass an execution's `history` to overlay a real run onto the diagram: states are
-coloured by outcome (succeeded / failed / caught / not-reached), the taken path is
-emphasized, and per-state duration and retry counts are annotated.
+coloured by outcome (succeeded / failed / caught / aborted / not-reached), the taken
+path is emphasized, and per-state duration and retry counts are annotated. An aborted
+state was entered but abandoned before it finished: another branch's or iteration's
+failure stopped it, AWS aborted its container, or it was still open when the execution
+was stopped.
 
 ```tsx
 // historyJson: output of `aws stepfunctions get-execution-history`, as a JSON string
@@ -58,16 +67,14 @@ emphasized, and per-state duration and retry counts are annotated.
 `history` accepts a `GetExecutionHistory` events array, the raw command output, or a
 JSON string of either. In the browser, pass the JSON string.
 
-`history` and `before` (diff mode, below) cannot be combined — core has no API for
-overlaying an execution onto a diff. Combining them calls `onError` and renders `null`,
-the same way any other invalid input is handled.
+`history` and `before` (diff mode, below) cannot be combined — core's SVG and Mermaid
+functions can't overlay an execution onto a diff. Its interactive viewer can
+(`generateHtml` takes both), but this package doesn't wire that up yet. Combining them
+calls `onError` and renders `null`, the same way any other invalid input is handled.
 
 **`format="mermaid"` combined with `history` honours the same options as plain
 `format="mermaid"`** — `catchHandling`, `collapse`, `showVariables`, `layout` and
-`theme` — with sfn-diagram 1.10 or later. Earlier versions of core's Mermaid
-execution-overlay function (`generateMermaidExecution`) accept only the ASL definition,
-`history`, `layout`, and `theme`, and ignore the rest. The SVG execution overlay
-honours every option.
+`theme`. The SVG execution overlay honours every option.
 
 ### Interactive viewer (`format="html"`)
 
@@ -84,8 +91,8 @@ Consequences worth knowing:
 - `onStateClick` does not fire from inside it — clicks inside a sandboxed iframe never
   reach the parent document's event handlers.
 - `history` cannot be combined with `format="html"` yet — core's `generateHtml` accepts
-  `history` and `diff` overlays since sfn-diagram 1.8, but this hook does not wire them
-  up. Combining them calls `onError` and renders `null`.
+  `history` and `diff` overlays, but this package does not wire them up yet. Combining
+  them calls `onError` and renders `null`.
 
 ```tsx
 <SfnDiagram definition={definition} format="html" style={{ height: 600, width: '100%' }} />
@@ -105,13 +112,15 @@ coloured (green / yellow / red) instead of the machine's normal styling.
 ```
 
 - `before` accepts an ASL object or a JSON string, same as `definition`.
-- `before` cannot be combined with `history` or `format="html"` — core has no diff API
-  for either combination. Combining them calls `onError` and renders `null`.
+- `before` cannot be combined with `history` (see
+  [Execution overlay](#execution-overlay)) or with `format="html"`. Core's
+  `generateHtml` takes a diff, but this package doesn't pass one to it yet. Combining
+  them calls `onError` and renders `null`.
 - The **SVG diff** (`generateDiff`) honours every diagram option this package forwards
   (`collapse`, `catchHandling`, `showIcons`, and the rest).
-- The **Mermaid diff** ignores every prop except the two definitions (`layout`, `theme`,
-  `collapse`, …) in `format="mermaid"` diff mode: this package doesn't forward them to
-  `generateMermaidDiff` yet (#393), although core accepts them since sfn-diagram 1.10.
+- The **Mermaid diff** ignores every diagram prop (`layout`, `theme`, `collapse`, …):
+  core's `generateMermaidDiff` accepts them, but this package doesn't forward them yet
+  (#393).
 
 ### `onStateClick`
 
@@ -148,15 +157,24 @@ There is no programmatic zoom/pan control — core doesn't expose the interactiv
 viewer's controller from a public subpath yet, so a meaningful pan/zoom handle needs a
 core change first.
 
+### Several diagrams on one page
+
+Each `<SfnDiagram>` (and each `useSfnDiagram` call) prefixes its SVG marker ids with a
+value from React's `useId()`. Within one React root, two diagrams, even of the same
+definition, never pick up each other's arrowheads, and server-rendered markup keeps the
+same ids after hydration. When a page hydrates several roots, give each root its own
+`identifierPrefix`, as React requires for `useId`.
+
 ### `useSfnDiagram`
 
 For the raw output — the SVG/HTML string, Mermaid code, dimensions, and metadata —
 without mounting anything, use the hook `<SfnDiagram>` is built on:
 
 ```tsx
+import type { AslDefinition } from 'sfn-diagram'
 import { useSfnDiagram } from 'sfn-diagram-react'
 
-function DownloadSvgButton({ definition }: { definition: object }) {
+function DownloadSvgButton({ definition }: { definition: AslDefinition }) {
     const result = useSfnDiagram({ definition })
     if (result.type !== 'svg') return null
 
@@ -178,31 +196,29 @@ ones (`className`, `onError`, `onStateClick`, `style`, `title`). Errors are retu
 
 | Prop | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
-| `before` | `object \| string` | — | svg, mermaid | The *original* side of a diff; `definition` becomes the *after* side. See [Diff mode](#diff-mode). |
+| `before` | `AslDefinition \| string` | — | svg, mermaid | The *original* side of a diff; `definition` becomes the *after* side. See [Diff mode](#diff-mode). |
 | `catchHandling` | `'hide' \| 'show'` | `'show'` | svg, mermaid¹ | `'hide'` drops Catch error edges and handler-only nodes. |
 | `className` | `string` | — | all | Applied to the wrapper element (`div`, `pre`, or `iframe`). |
 | `collapse` | `string[] \| boolean` | — | svg, mermaid¹ | Collapse Parallel/Map containers into a placeholder node. `true` collapses every container; an array collapses only the named ones. |
-| `definition` | `object \| string` | — (required) | all | ASL definition as an object or JSON string. |
+| `definition` | `AslDefinition \| string` | — (required) | all | ASL definition as an object or JSON string. |
 | `edgeOverrides` | `Record<string, EdgeStyleOverride>` | — | svg only | Per-edge style overrides keyed by `GraphEdge.id` (preferred, e.g. `Route->Work#choice#1`) or the legacy bare `${from}->${to}` (broad-matches every edge between that pair). |
-| `edgeStyle` | `'straight' \| 'curved' \| 'orthogonal'` | `'curved'` | svg, mermaid¹ | Edge path rendering style. |
+| `edgeStyle` | `'straight' \| 'curved' \| 'orthogonal'` | `'curved'` | svg only | Edge path rendering style. |
 | `format` | `'svg' \| 'mermaid' \| 'html'` | `'svg'` | — | Output format. See [Interactive viewer](#interactive-viewer-formathtml) for `'html'`. |
 | `history` | `HistoryEvent[] \| GetExecutionHistoryCommandOutput \| string` | — | svg, mermaid | Execution history; when set, renders an execution overlay. See [Execution overlay](#execution-overlay). |
 | `iconPosition` | `'left' \| 'top' \| 'right'` | `'left'` | svg only | Position of AWS service icons relative to the node label. |
 | `iconSize` | `number` | `24` | svg only | Size of AWS service icons in pixels. |
-| `layout` | `'TB' \| 'LR' \| 'RL' \| 'BT'` | `'TB'` | svg, mermaid | Graph layout direction. |
+| `layout` | `'TB' \| 'LR' \| 'RL' \| 'BT'` | `'TB'` | svg, mermaid¹ | Graph layout direction. |
 | `nodeOverrides` | `Record<string, Partial<NodeStyle>>` | — | svg only | Per-node style overrides keyed by graph node id. |
 | `onError` | `(error: Error) => void` | — | all | Called when the definition fails to parse/render. |
 | `onStateClick` | `(params: { event, stateId }) => void` | — | svg only | See [`onStateClick`](#onstateclick). |
 | `showIcons` | `boolean` | `false` | svg only | Whether to display AWS service icons on Task state nodes. |
 | `showVariables` | `boolean` | `true` | svg, mermaid¹ | Whether to annotate nodes with the variables they assign via ASL `Assign`. |
 | `style` | `React.CSSProperties` | — | all | Applied to the wrapper element. |
-| `theme` | `'light' \| 'dark' \| CustomTheme` | `'light'` | svg, mermaid | Diagram theme. |
+| `theme` | `'light' \| 'dark' \| CustomTheme` | `'light'` | svg, mermaid¹ | Diagram theme. |
 | `title` | `string` | `'Step Functions diagram'` | html only | Accessible title for the rendered iframe. |
 
-¹ Ignored when `format="mermaid"` is combined with `history` on sfn-diagram before 1.10 —
-see [Execution overlay](#execution-overlay). Applies normally to plain `format="mermaid"`
-(no `history`). `format="mermaid"` diff mode (the `before` prop) is a separate
-carve-out with its own rule — see [Diff mode](#diff-mode).
+¹ Not applied in `format="mermaid"` diff mode (the `before` prop) — see
+[Diff mode](#diff-mode).
 
 When the definition is invalid the component renders `null` and (if provided) calls
 `onError`.

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 
-import { DiagramOptions, DiffOutput, ExecutionHistoryInput, ExecutionOutput, HtmlOutput, MermaidDiffOutput, MermaidExecutionOutput, MermaidOutput, SvgOutput } from "sfn-diagram";
+import { AslDefinition, DiagramOptions, DiffOutput, ExecutionHistoryInput, ExecutionOutput, HtmlOutput, MermaidDiffOutput, MermaidExecutionOutput, MermaidOutput, SvgOutput } from "sfn-diagram";
 interface UseSfnDiagramParams extends Pick<DiagramOptions, 'catchHandling' | 'collapse' | 'edgeOverrides' | 'edgeStyle' | 'iconPosition' | 'iconSize' | 'layout' | 'nodeOverrides' | 'showIcons' | 'showVariables' | 'theme'> {
   /**
    * When set, `definition` is treated as the *after* side of a diff and `before`
@@ -7,15 +7,15 @@ interface UseSfnDiagramParams extends Pick<DiagramOptions, 'catchHandling' | 'co
    * removed states rather than the plain machine. Accepts an ASL object or a
    * JSON string. Cannot be combined with `history` (core's SVG and Mermaid diff
    * functions take no history) or with `format="html"` (core's `generateHtml`
-   * accepts a diff since sfn-diagram 1.8, but this hook does not wire it up yet).
+   * accepts a diff, but this hook does not wire it up yet).
    *
    * The Mermaid diff ignores every option in this type's `Pick<DiagramOptions, ...>`
    * list - `layout`, `theme`, and the rest: this hook doesn't forward them to
-   * `generateMermaidDiff` yet (#393), although core accepts them since sfn-diagram
-   * 1.10. The SVG diff honours them.
+   * `generateMermaidDiff` yet (#393), although core's `generateMermaidDiff` accepts
+   * them. The SVG diff honours them.
    */
-  before?: object | string;
-  definition: object | string;
+  before?: AslDefinition | string;
+  definition: AslDefinition | string;
   /**
    * Output format. `'svg'` and `'mermaid'` render static markup; `'html'` renders
    * the interactive pan/zoom/search viewer as a self-contained HTML document.
@@ -62,6 +62,9 @@ type SfnDiagramResult = {
  * than mounted markup - for example, building a data URI for `<img src>`, a
  * download button, or a custom render target.
  *
+ * SVG marker ids are prefixed per hook instance from `useId()`, so diagrams on one
+ * page don't share them and server-rendered ids match the client's.
+ *
  * @param params - The same option-bearing props `<SfnDiagram>` accepts, minus
  * the presentational ones (`className`, `onError`, `onStateClick`, `style`,
  * `title`).
@@ -70,7 +73,7 @@ type SfnDiagramResult = {
  *
  * @example
  * ```tsx
- * function DownloadSvgButton({ definition }: { definition: object }) {
+ * function DownloadSvgButton({ definition }: { definition: AslDefinition }) {
  *     const result = useSfnDiagram({ definition })
  *     if (result.type !== 'svg') return null
  *

package/dist/index.js

@@ -1,7 +1,29 @@
 'use client'
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from "react";
-import { generateDiff, generateExecution, generateHtml, generateMermaid, generateMermaidDiff, generateMermaidExecution, generateSvg } from "sfn-diagram";
+import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef } from "react";
+import { generateDiff, generateExecution, generateMermaid, generateMermaidDiff, generateMermaidExecution, generateSvg } from "sfn-diagram";
+import { generateHtml } from "sfn-diagram/html";
 import { jsx } from "react/jsx-runtime";
+// src/idPrefix.ts
+/**
+* Turns a `useId()` value into a core `DiagramOptions.idPrefix`, so each diagram's
+* SVG marker ids are its own and match between the server render and hydration.
+*
+* React 18 ids look like `:r0:`, React 19 ids like `_r_0_`, and both embed the
+* root's `identifierPrefix`, which the caller picks and may contain characters core
+* rejects. Every character outside `[A-Za-z0-9_.-]` becomes `_`, `:` included, so
+* the ids stay valid in a standalone SVG file too. The `sfn-` start keeps the
+* prefix a valid XML name, and the trailing `-` separates it from core's id.
+*
+* @param params - The React id to convert.
+* @returns The prefix core prepends to each marker id.
+*
+* @example
+* toIdPrefix({ reactId: ':r0:' }) // 'sfn-_r0_-'
+*/
+function toIdPrefix(params) {
+	const { reactId } = params;
+	return `sfn-${reactId.replace(/[^A-Za-z0-9_.-]/g, "_")}-`;
+}
 // src/useSfnDiagram.ts
 function toAslString(params) {
 	const { definition } = params;
@@ -21,6 +43,9 @@ function omitUndefinedValues(options) {
 * than mounted markup - for example, building a data URI for `<img src>`, a
 * download button, or a custom render target.
 *
+* SVG marker ids are prefixed per hook instance from `useId()`, so diagrams on one
+* page don't share them and server-rendered ids match the client's.
+*
 * @param params - The same option-bearing props `<SfnDiagram>` accepts, minus
 * the presentational ones (`className`, `onError`, `onStateClick`, `style`,
 * `title`).
@@ -29,7 +54,7 @@ function omitUndefinedValues(options) {
 *
 * @example
 * ```tsx
-* function DownloadSvgButton({ definition }: { definition: object }) {
+* function DownloadSvgButton({ definition }: { definition: AslDefinition }) {
 *     const result = useSfnDiagram({ definition })
 *     if (result.type !== 'svg') return null
 *
@@ -40,6 +65,7 @@ function omitUndefinedValues(options) {
 */
 function useSfnDiagram(params) {
 	const { before, catchHandling, collapse, definition, edgeOverrides, edgeStyle, format = "svg", history, iconPosition, iconSize, layout = "TB", nodeOverrides, showIcons, showVariables, theme = "light" } = params;
+	const idPrefix = toIdPrefix({ reactId: useId() });
 	const asl = useMemo(() => toAslString({ definition }), [definition]);
 	const beforeAsl = useMemo(() => before === void 0 ? void 0 : toAslString({ definition: before }), [before]);
 	return useMemo(() => {
@@ -57,6 +83,10 @@ function useSfnDiagram(params) {
 				showVariables,
 				theme
 			});
+			const svgOptions = {
+				...diagramOptions,
+				idPrefix
+			};
 			if (beforeAsl !== void 0) {
 				if (history) throw new Error("history and before cannot be combined");
 				if (format === "html") throw new Error("before and format=\"html\" cannot be combined");
@@ -74,7 +104,7 @@ function useSfnDiagram(params) {
 				const output = generateDiff({
 					after: asl,
 					before: beforeAsl,
-					...diagramOptions
+					...svgOptions
 				});
 				return {
 					height: output.height,
@@ -116,10 +146,10 @@ function useSfnDiagram(params) {
 			const output = history ? generateExecution({
 				aslDefinition: asl,
 				history,
-				...diagramOptions
+				...svgOptions
 			}) : generateSvg({
 				aslDefinition: asl,
-				...diagramOptions
+				...svgOptions
 			});
 			return {
 				height: output.height,
@@ -145,6 +175,7 @@ function useSfnDiagram(params) {
 		history,
 		iconPosition,
 		iconSize,
+		idPrefix,
 		layout,
 		nodeOverrides,
 		showIcons,

package/package.json

@@ -1,29 +1,22 @@
 {
     "name": "sfn-diagram-react",
-    "version": "0.7.0",
+    "version": "1.0.0",
     "description": "React component for AWS Step Functions ASL diagrams",
     "type": "module",
     "sideEffects": false,
-    "main": "./dist/index.cjs",
     "module": "./dist/index.js",
     "types": "./dist/index.d.ts",
     "exports": {
         ".": {
-            "import": {
-                "types": "./dist/index.d.ts",
-                "default": "./dist/index.js"
-            },
-            "require": {
-                "types": "./dist/index.d.cts",
-                "default": "./dist/index.cjs"
-            }
+            "types": "./dist/index.d.ts",
+            "default": "./dist/index.js"
         }
     },
     "files": [
         "dist"
     ],
     "engines": {
-        "node": ">=20"
+        "node": ">=22.12.0"
     },
     "scripts": {
         "build": "tsdown",
@@ -34,7 +27,7 @@
         "prepublishOnly": "pnpm run build && pnpm run validate",
         "validate": "pnpm run validate:publint && pnpm run validate:types",
         "validate:publint": "publint",
-        "validate:types": "attw --pack ."
+        "validate:types": "attw --pack . --profile node16 --ignore-rules cjs-resolves-to-esm"
     },
     "keywords": [
         "aws",
@@ -64,7 +57,7 @@
     "homepage": "https://sfn.yusufaf.dev/ecosystem/react/",
     "peerDependencies": {
         "react": "^18.0.0 || ^19.0.0",
-        "sfn-diagram": "^1.7.0"
+        "sfn-diagram": "^2.0.0"
     },
     "devDependencies": {
         "@arethetypeswrong/cli": "^0.18.5",

package/dist/index.cjs

@@ -1,198 +0,0 @@
-'use client'
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-let react = require("react");
-let sfn_diagram = require("sfn-diagram");
-let react_jsx_runtime = require("react/jsx-runtime");
-// src/useSfnDiagram.ts
-function toAslString(params) {
-	const { definition } = params;
-	return typeof definition === "string" ? definition : JSON.stringify(definition);
-}
-function omitUndefinedValues(options) {
-	const result = {};
-	for (const key of Object.keys(options)) if (options[key] !== void 0) result[key] = options[key];
-	return result;
-}
-/**
-* Generate a Step Functions diagram and return the raw output - SVG or HTML
-* markup, Mermaid code, dimensions, and metadata - without rendering it.
-*
-* This is the same generation logic `<SfnDiagram>` runs internally, exposed
-* directly for a consumer who needs the underlying string or metadata rather
-* than mounted markup - for example, building a data URI for `<img src>`, a
-* download button, or a custom render target.
-*
-* @param params - The same option-bearing props `<SfnDiagram>` accepts, minus
-* the presentational ones (`className`, `onError`, `onStateClick`, `style`,
-* `title`).
-* @returns A {@link SfnDiagramResult} discriminated union. Errors are returned
-* as `{ type: 'error', error }` rather than thrown.
-*
-* @example
-* ```tsx
-* function DownloadSvgButton({ definition }: { definition: object }) {
-*     const result = useSfnDiagram({ definition })
-*     if (result.type !== 'svg') return null
-*
-*     const href = `data:image/svg+xml;base64,${btoa(result.svg)}`
-*     return <a download="diagram.svg" href={href}>Download SVG</a>
-* }
-* ```
-*/
-function useSfnDiagram(params) {
-	const { before, catchHandling, collapse, definition, edgeOverrides, edgeStyle, format = "svg", history, iconPosition, iconSize, layout = "TB", nodeOverrides, showIcons, showVariables, theme = "light" } = params;
-	const asl = (0, react.useMemo)(() => toAslString({ definition }), [definition]);
-	const beforeAsl = (0, react.useMemo)(() => before === void 0 ? void 0 : toAslString({ definition: before }), [before]);
-	return (0, react.useMemo)(() => {
-		try {
-			const diagramOptions = omitUndefinedValues({
-				catchHandling,
-				collapse,
-				edgeOverrides,
-				edgeStyle,
-				iconPosition,
-				iconSize,
-				layout,
-				nodeOverrides,
-				showIcons,
-				showVariables,
-				theme
-			});
-			if (beforeAsl !== void 0) {
-				if (history) throw new Error("history and before cannot be combined");
-				if (format === "html") throw new Error("before and format=\"html\" cannot be combined");
-				if (format === "mermaid") {
-					const output = (0, sfn_diagram.generateMermaidDiff)({
-						after: asl,
-						before: beforeAsl
-					});
-					return {
-						code: output.code,
-						metadata: output.metadata,
-						type: "mermaid"
-					};
-				}
-				const output = (0, sfn_diagram.generateDiff)({
-					after: asl,
-					before: beforeAsl,
-					...diagramOptions
-				});
-				return {
-					height: output.height,
-					metadata: output.metadata,
-					svg: output.svg,
-					type: "svg",
-					width: output.width
-				};
-			}
-			if (format === "html") {
-				if (history) throw new Error("history and format=\"html\" cannot be combined");
-				const output = (0, sfn_diagram.generateHtml)({
-					aslDefinition: asl,
-					...diagramOptions
-				});
-				return {
-					height: output.height,
-					html: output.html,
-					metadata: output.metadata,
-					type: "html",
-					width: output.width
-				};
-			}
-			if (format === "mermaid") {
-				const output = history ? (0, sfn_diagram.generateMermaidExecution)({
-					aslDefinition: asl,
-					history,
-					...diagramOptions
-				}) : (0, sfn_diagram.generateMermaid)({
-					aslDefinition: asl,
-					...diagramOptions
-				});
-				return {
-					code: output.code,
-					metadata: output.metadata,
-					type: "mermaid"
-				};
-			}
-			const output = history ? (0, sfn_diagram.generateExecution)({
-				aslDefinition: asl,
-				history,
-				...diagramOptions
-			}) : (0, sfn_diagram.generateSvg)({
-				aslDefinition: asl,
-				...diagramOptions
-			});
-			return {
-				height: output.height,
-				metadata: output.metadata,
-				svg: output.svg,
-				type: "svg",
-				width: output.width
-			};
-		} catch (err) {
-			return {
-				error: err instanceof Error ? err : new Error(String(err)),
-				type: "error"
-			};
-		}
-	}, [
-		asl,
-		beforeAsl,
-		catchHandling,
-		collapse,
-		edgeOverrides,
-		edgeStyle,
-		format,
-		history,
-		iconPosition,
-		iconSize,
-		layout,
-		nodeOverrides,
-		showIcons,
-		showVariables,
-		theme
-	]);
-}
-// src/SfnDiagram.tsx
-const SfnDiagram = (0, react.forwardRef)(function SfnDiagram({ className, onError, onStateClick, style, title = "Step Functions diagram", ...diagramParams }, ref) {
-	const result = useSfnDiagram(diagramParams);
-	(0, react.useImperativeHandle)(ref, () => ({ getSvg: () => result.type === "svg" ? result.svg : null }), [result]);
-	const handleStateClick = (0, react.useCallback)((event) => {
-		const stateId = (event.target instanceof Element ? event.target : null)?.closest("[data-state-id]")?.getAttribute("data-state-id");
-		if (stateId) onStateClick?.({
-			event,
-			stateId
-		});
-	}, [onStateClick]);
-	const reportedResult = (0, react.useRef)(null);
-	(0, react.useEffect)(() => {
-		if (result.type !== "error") {
-			reportedResult.current = null;
-			return;
-		}
-		if (reportedResult.current === result) return;
-		reportedResult.current = result;
-		onError?.(result.error);
-	}, [onError, result]);
-	if (result.type === "error") return null;
-	if (result.type === "mermaid") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
-		className,
-		style,
-		children: result.code
-	});
-	if (result.type === "html") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("iframe", {
-		className,
-		sandbox: "allow-downloads allow-scripts",
-		srcDoc: result.html,
-		style,
-		title
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className,
-		dangerouslySetInnerHTML: { __html: result.svg },
-		onClick: onStateClick ? handleStateClick : void 0,
-		style
-	});
-});
-exports.SfnDiagram = SfnDiagram;
-exports.useSfnDiagram = useSfnDiagram;

package/dist/index.d.cts

@@ -1,121 +0,0 @@
-
-import { DiagramOptions, DiffOutput, ExecutionHistoryInput, ExecutionOutput, HtmlOutput, MermaidDiffOutput, MermaidExecutionOutput, MermaidOutput, SvgOutput } from "sfn-diagram";
-interface UseSfnDiagramParams extends Pick<DiagramOptions, 'catchHandling' | 'collapse' | 'edgeOverrides' | 'edgeStyle' | 'iconPosition' | 'iconSize' | 'layout' | 'nodeOverrides' | 'showIcons' | 'showVariables' | 'theme'> {
-  /**
-   * When set, `definition` is treated as the *after* side of a diff and `before`
-   * as the *original* side: the rendered diagram highlights added, modified, and
-   * removed states rather than the plain machine. Accepts an ASL object or a
-   * JSON string. Cannot be combined with `history` (core's SVG and Mermaid diff
-   * functions take no history) or with `format="html"` (core's `generateHtml`
-   * accepts a diff since sfn-diagram 1.8, but this hook does not wire it up yet).
-   *
-   * The Mermaid diff ignores every option in this type's `Pick<DiagramOptions, ...>`
-   * list - `layout`, `theme`, and the rest: this hook doesn't forward them to
-   * `generateMermaidDiff` yet (#393), although core accepts them since sfn-diagram
-   * 1.10. The SVG diff honours them.
-   */
-  before?: object | string;
-  definition: object | string;
-  /**
-   * Output format. `'svg'` and `'mermaid'` render static markup; `'html'` renders
-   * the interactive pan/zoom/search viewer as a self-contained HTML document.
-   * Cannot be combined with `history`.
-   * @default 'svg'
-   */
-  format?: 'html' | 'mermaid' | 'svg';
-  /**
-   * Optional execution history. When provided, the diagram is rendered as an
-   * execution overlay: states are coloured by outcome, the taken path is
-   * emphasized, and per-state duration / retry counts are annotated.
-   * Accepts a GetExecutionHistory events array, the raw command output, or a
-   * JSON string of either. Cannot be combined with `format="html"`.
-   */
-  history?: ExecutionHistoryInput;
-}
-/** Result of {@link useSfnDiagram} - the raw output of whichever core function the params select. */
-type SfnDiagramResult = {
-  error: Error;
-  type: 'error';
-} | {
-  height: number;
-  html: string;
-  metadata: HtmlOutput['metadata'];
-  type: 'html';
-  width: number;
-} | {
-  code: string;
-  metadata: MermaidDiffOutput['metadata'] | MermaidExecutionOutput['metadata'] | MermaidOutput['metadata'];
-  type: 'mermaid';
-} | {
-  height: number;
-  metadata: DiffOutput['metadata'] | ExecutionOutput['metadata'] | SvgOutput['metadata'];
-  svg: string;
-  type: 'svg';
-  width: number;
-};
-/**
- * Generate a Step Functions diagram and return the raw output - SVG or HTML
- * markup, Mermaid code, dimensions, and metadata - without rendering it.
- *
- * This is the same generation logic `<SfnDiagram>` runs internally, exposed
- * directly for a consumer who needs the underlying string or metadata rather
- * than mounted markup - for example, building a data URI for `<img src>`, a
- * download button, or a custom render target.
- *
- * @param params - The same option-bearing props `<SfnDiagram>` accepts, minus
- * the presentational ones (`className`, `onError`, `onStateClick`, `style`,
- * `title`).
- * @returns A {@link SfnDiagramResult} discriminated union. Errors are returned
- * as `{ type: 'error', error }` rather than thrown.
- *
- * @example
- * ```tsx
- * function DownloadSvgButton({ definition }: { definition: object }) {
- *     const result = useSfnDiagram({ definition })
- *     if (result.type !== 'svg') return null
- *
- *     const href = `data:image/svg+xml;base64,${btoa(result.svg)}`
- *     return <a download="diagram.svg" href={href}>Download SVG</a>
- * }
- * ```
- */
-export declare function useSfnDiagram(params: UseSfnDiagramParams): SfnDiagramResult;
-interface SfnDiagramProps extends UseSfnDiagramParams {
-  className?: string;
-  onError?: (error: Error) => void;
-  /**
-   * Called when a state node is clicked. SVG format only - a click inside the
-   * sandboxed `format="html"` iframe does not reach this handler, and Mermaid
-   * output has no clickable elements. `stateId` is the graph node id, which
-   * equals the state name for every state whose name is unique across the
-   * machine; for a nested state whose name repeats elsewhere in the machine the
-   * id is qualified by its scope, so read it off the rendered `data-state-id`
-   * rather than assuming the bare name.
-   */
-  onStateClick?: (params: OnStateClickParams) => void;
-  style?: React.CSSProperties;
-  /**
-   * Accessible title for the rendered iframe when `format` is `'html'`. Ignored
-   * for every other format. Set this when a page renders more than one diagram
-   * so screen readers can distinguish between them.
-   * @default 'Step Functions diagram'
-   */
-  title?: string;
-}
-/** Parameters passed to {@link SfnDiagramProps.onStateClick}. */
-interface OnStateClickParams {
-  event: React.MouseEvent<HTMLDivElement>;
-  stateId: string;
-}
-/**
- * Imperative handle exposed via `ref` on {@link SfnDiagram}. There is no
- * programmatic zoom/pan control - core has no public API for it yet (the
- * interactive viewer's controller is not exported from a public subpath) -
- * this handle only surfaces the rendered markup.
- */
-interface SfnDiagramHandle {
-  /** The rendered SVG markup for `format="svg"`, or `null` for every other format (including an errored render). */
-  getSvg(): string | null;
-}
-export declare const SfnDiagram: import("react").ForwardRefExoticComponent<SfnDiagramProps & import("react").RefAttributes<SfnDiagramHandle>>;
-export type { OnStateClickParams, SfnDiagramHandle, SfnDiagramProps, SfnDiagramResult, UseSfnDiagramParams };