process-graph 1.0.5 → 1.1.0

package/dist/ui.d.ts

@@ -0,0 +1,235 @@
+import { F as Status } from "./index-CCfe0csl.js";
+import { G as IdSpace } from "./index-CmZOswkx.js";
+import { g as SequenceDiagram$1 } from "./index-CoA6vXqe.js";
+import { f as LaneProps, h as TransitionItemProps, l as LegendProps, o as FilterPanelProps, r as DetailPanelProps, v as ElementCardProps } from "./index-DricKcyl.js";
+import { ReactElement, ReactNode } from "react";
+//#region ../../ui/graph/ui/dist/theme.css.d.ts
+/**
+ * The theme contract: one CSS custom property per value of `ThemeValues`, read by every style in this package. A consumer restyles the components by assigning these properties, with its own `createTheme(vars, values)` class or `assignVars`, without forking them.
+ */
+export declare const vars: {
+  colour: {
+    background: `var(--${string})`;
+    surface: `var(--${string})`;
+    text: `var(--${string})`;
+    muted: `var(--${string})`;
+    border: `var(--${string})`;
+    accent: `var(--${string})`;
+    focus: `var(--${string})`;
+    critical: `var(--${string})`;
+    handoff: `var(--${string})`;
+    status: {
+      done: `var(--${string})`;
+      ready: `var(--${string})`;
+      blocked: `var(--${string})`;
+      skipped: `var(--${string})`;
+      unknown: `var(--${string})`;
+    };
+  };
+  space: {
+    small: `var(--${string})`;
+    medium: `var(--${string})`;
+    large: `var(--${string})`;
+  };
+  radius: {
+    small: `var(--${string})`;
+    medium: `var(--${string})`;
+  };
+  font: {
+    body: `var(--${string})`;
+    mono: `var(--${string})`;
+    sizeSmall: `var(--${string})`;
+    sizeBody: `var(--${string})`;
+    sizeHeading: `var(--${string})`;
+    weightStrong: `var(--${string})`;
+  };
+  stroke: {
+    thin: `var(--${string})`;
+    thick: `var(--${string})`;
+  };
+};
+/** The class that assigns the light theme's values. */
+export declare const lightTheme: string;
+/** The class that assigns the dark theme's values. */
+export declare const darkTheme: string;
+//#endregion
+//#region ../../ui/graph/ui/dist/theme-values.d.ts
+/**
+ * The shape of every theme: each leaf is a value a theme assigns. The theme contract is created from it, and `ThemeValues` derived from it, so the contract and the themes cannot disagree.
+ */
+declare const themeShape: {
+  colour: {
+    /** Behind everything. */
+    background: null;
+    /** Behind a card, a lane or a panel. */
+    surface: null;
+    text: null;
+    /** Secondary text: lane headings, edge labels. */
+    muted: null;
+    border: null;
+    /** Selection and links. */
+    accent: null;
+    /** The focus ring. */
+    focus: null;
+    /** The critical path. */
+    critical: null;
+    /** A transition that passes work between actors. */
+    handoff: null;
+    /** Each status, used as text and as a mark on `surface` and `background`. */
+    status: {
+      done: null;
+      ready: null;
+      blocked: null;
+      skipped: null;
+      unknown: null;
+    };
+  };
+  space: {
+    small: null;
+    medium: null;
+    large: null;
+  };
+  radius: {
+    small: null;
+    medium: null;
+  };
+  font: {
+    body: null;
+    mono: null;
+    sizeSmall: null;
+    sizeBody: null;
+    sizeHeading: null;
+    /** The weight of labels and headings that stand out from body text. */
+    weightStrong: null;
+  };
+  stroke: {
+    /** Borders and ordinary edges. */
+    thin: null;
+    /** The critical path and the selection. */
+    thick: null;
+  };
+};
+/** A tree of the shape's keys with a CSS value at every leaf. */
+type Assigned<Shape> = { readonly [Key in keyof Shape]: Shape[Key] extends null ? string : Assigned<Shape[Key]>; };
+/** Every value a theme assigns, as CSS values: one per leaf of `themeShape`, so a theme that leaves one out does not compile. */
+type ThemeValues = Assigned<typeof themeShape>;
+/** The light theme's values. Each status colour reads as text on both `surface` and `background`. */
+export declare const lightValues: ThemeValues;
+/** The dark theme's values. Each status colour reads as text on both `surface` and `background`. */
+export declare const darkValues: ThemeValues;
+//#endregion
+//#region ../../ui/graph/ui/dist/base.css.d.ts
+/** The element a theme class goes on: the page colours and type every component inherits. */
+export declare const surfaceRoot: string;
+/** Present to assistive technology, absent from the page: the text alternative of a drawing. */
+export declare const visuallyHidden: string;
+/** The focus ring every focusable part shows when focused from the keyboard. */
+export declare const focusRing: string;
+//#endregion
+//#region ../../ui/graph/ui/dist/components.css.d.ts
+/** A status badge: the status's name in its colour, outlined in the same colour, so it reads by text and by colour. */
+export declare const badge: import("@vanilla-extract/recipes").RuntimeFn<{
+  status: Record<"done" | "unknown" | "skipped" | "ready" | "blocked", import("@vanilla-extract/css").StyleRule>;
+}>;
+/** An element card: a bordered surface whose leading edge carries the status colour, shaped by the element's kind. */
+export declare const card: import("@vanilla-extract/recipes").RuntimeFn<{
+  status: Record<"done" | "unknown" | "skipped" | "ready" | "blocked", import("@vanilla-extract/css").StyleRule>;
+  kind: {
+    activity: {};
+    state: {};
+    decision: {
+      borderStyle: "dashed";
+    };
+    pseudo: {
+      borderRadius: `var(--${string})`;
+    };
+    message: {
+      fontStyle: "italic";
+    };
+  };
+  critical: {
+    true: {
+      boxShadow: `0 0 0 var(--${string}) var(--${string})`;
+    };
+    false: {};
+  };
+}>;
+//#endregion
+//#region ../../ui/graph/ui/dist/components.d.ts
+/** The themes this package ships. */
+type ThemeName = "light" | "dark";
+/** The class that assigns each shipped theme. */
+export declare const themes: Readonly<Record<ThemeName, string>>;
+interface GraphThemeProps {
+  readonly theme: ThemeName;
+  readonly children?: ReactNode;
+}
+/**
+ * Applies a theme to everything inside it: assigns the theme contract's values and sets the page colours and type the components inherit. A consumer with its own theme puts its own `createTheme` class and `surfaceRoot` on an element instead.
+ * @param props - The theme and its content.
+ * @returns A `div` carrying the theme class and `data-theme`.
+ */
+export declare const GraphTheme: (props: GraphThemeProps) => ReactElement;
+interface StatusBadgeProps {
+  readonly status: Status;
+}
+/**
+ * A status badge in the status's colour.
+ * @param props - The status.
+ * @returns The badge.
+ */
+export declare const StatusBadge: (props: StatusBadgeProps) => ReactElement;
+/**
+ * An element card with its status colour, its kind's shape, the critical path ring and the selection outline.
+ * @param props - As for the headless `ElementCard`, without class names.
+ * @returns The card.
+ */
+export declare const ElementCard: <I extends IdSpace>(props: Omit<ElementCardProps<I>, "classNames">) => ReactElement;
+/**
+ * A transition, coloured as a hand-off or on the critical path.
+ * @param props - As for the headless `TransitionItem`, without class names.
+ * @returns An `li`.
+ */
+export declare const TransitionItem: (props: Omit<TransitionItemProps, "classNames">) => ReactElement;
+/**
+ * A bordered swimlane with a small heading.
+ * @param props - As for the headless `Lane`, without class names.
+ * @returns The lane.
+ */
+export declare const Lane: (props: Omit<LaneProps, "classNames">) => ReactElement;
+/**
+ * A legend with a coloured swatch per status.
+ * @param props - As for the headless `Legend`, without class names.
+ * @returns The legend.
+ */
+export declare const Legend: (props: Omit<LegendProps, "classNames">) => ReactElement;
+/**
+ * A filter panel of bordered checkbox groups.
+ * @param props - As for the headless `FilterPanel`, without class names.
+ * @returns The form.
+ */
+export declare const FilterPanel: (props: Omit<FilterPanelProps, "classNames">) => ReactElement;
+/**
+ * A detail panel on a raised surface.
+ * @param props - As for the headless `DetailPanel`, without class names.
+ * @returns The panel.
+ */
+export declare const DetailPanel: <I extends IdSpace>(props: Omit<DetailPanelProps<I>, "classNames">) => ReactElement;
+//#endregion
+//#region ../../ui/graph/ui/dist/sequence-diagram.d.ts
+interface SequenceDiagramProps<I extends IdSpace> {
+  /** The diagram from `toSequence`. */
+  readonly diagram: SequenceDiagram$1<I>;
+  /** The name a lifeline is drawn with. */
+  readonly labelOf: (actor: I["actor"]) => string;
+  /** The diagram's caption, which also names it for assistive technology. */
+  readonly title: string;
+}
+/**
+ * A sequence diagram drawn as SVG: a lifeline per actor in order of first appearance, a message per row as an arrow between lifelines (a loop for a self-message, dashed for a reply, an open head for an asynchronous message), and each fragment as a frame with its operator and operand guards. React Flow has no lifeline layout, so the arrangement is fixed by the diagram's own order. The drawing is hidden from assistive technology, which reads the same steps from a visually hidden list instead.
+ * @param props - The diagram, the lifelines' names and a caption.
+ * @returns A `figure` holding the caption, the drawing and its text alternative.
+ */
+export declare const SequenceDiagram: <I extends IdSpace>(props: SequenceDiagramProps<I>) => ReactElement;
+//#endregion
+export type { GraphThemeProps, SequenceDiagramProps, StatusBadgeProps, ThemeName, ThemeValues };

package/dist/ui.js

@@ -0,0 +1,2 @@
+import { _ as surfaceRoot, a as Lane, b as visuallyHidden, c as StatusBadge, d as card, f as darkTheme, g as lightValues, h as lightTheme, i as GraphTheme, l as TransitionItem, m as focusRing, n as ElementCard, o as Legend, p as darkValues, r as FilterPanel, s as SequenceDiagram, t as DetailPanel, u as badge, v as themes, y as vars } from "./dist-BpCBmnMl.js";
+export { DetailPanel, ElementCard, FilterPanel, GraphTheme, Lane, Legend, SequenceDiagram, StatusBadge, TransitionItem, badge, card, darkTheme, darkValues, focusRing, lightTheme, lightValues, surfaceRoot, themes, vars, visuallyHidden };

package/dist/validate-DF3mQZww.js

@@ -0,0 +1,125 @@
+//#region ../../core/graph/schema/dist/validate.js
+const duplicates = (ids) => {
+	const seen = /* @__PURE__ */ new Set();
+	const repeated = /* @__PURE__ */ new Set();
+	for (const id of ids) {
+		if (seen.has(id)) repeated.add(id);
+		seen.add(id);
+	}
+	return [...repeated];
+};
+/**
+* Runtime validation. Authored models are already reference-safe at compile time. This is for models loaded from JSON, where identifiers are plain strings, and for the rules the type system cannot state: unique identifiers, one initial pseudo-state per scope, and entity subjects for state machine projections.
+*/
+const validate = (model) => {
+	const issues = [];
+	const participantIds = new Set(model.participants.map((p) => p.id));
+	const eventIds = new Set(model.events.map((e) => e.id));
+	const actionIds = new Set(model.actions.map((a) => a.id));
+	const elementIds = new Set(model.elements.map((e) => e.id));
+	const artefactIds = new Set(model.artefacts.map((a) => a.id));
+	const transitionIds = new Set(model.transitions.map((t) => t.id));
+	const spaces = [
+		["participant", model.participants.map((p) => p.id)],
+		["event", model.events.map((e) => e.id)],
+		["action", model.actions.map((a) => a.id)],
+		["artefact", model.artefacts.map((a) => a.id)],
+		["element", model.elements.map((e) => e.id)],
+		["transition", model.transitions.map((t) => t.id)],
+		["fragment", model.fragments.map((f) => f.id)]
+	];
+	for (const [space, ids] of spaces) for (const id of duplicates(ids)) issues.push({
+		code: "duplicate-id",
+		message: `Duplicate ${space} id "${id}"`
+	});
+	const require = (known, id, where) => {
+		if (id !== void 0 && !known.has(id)) issues.push({
+			code: "unknown-reference",
+			message: `${where} refers to unknown id "${id}"`
+		});
+	};
+	const kindOf = new Map(model.participants.map((p) => [p.id, p.kind]));
+	/** An actor must be declared, and must not be an entity. */
+	const requireActor = (id, where) => {
+		require(participantIds, id, where);
+		if (id !== void 0 && kindOf.get(id) === "entity") issues.push({
+			code: "actor-is-entity",
+			message: `${where} refers to entity "${id}", which cannot act`
+		});
+	};
+	for (const element of model.elements) switch (element.kind) {
+		case "activity":
+			requireActor(element.actor, `activity "${element.id}" actor`);
+			require(actionIds, element.action, `activity "${element.id}" action`);
+			for (const id of element.affects ?? []) {
+				const where = `activity "${element.id}" affects`;
+				require(participantIds, id, where);
+				if (participantIds.has(id) && kindOf.get(id) !== "entity") issues.push({
+					code: "affects-not-entity",
+					message: `${where} "${id}", which is not an entity`
+				});
+			}
+			for (const id of element.consumes ?? []) require(artefactIds, id, `activity "${element.id}" consumes`);
+			for (const id of element.produces ?? []) require(artefactIds, id, `activity "${element.id}" produces`);
+			break;
+		case "decision":
+			requireActor(element.actor, `decision "${element.id}" actor`);
+			break;
+		case "state":
+			require(elementIds, element.parent, `state "${element.id}" parent`);
+			require(actionIds, element.entry, `state "${element.id}" entry`);
+			require(actionIds, element.exit, `state "${element.id}" exit`);
+			break;
+		case "pseudo":
+			require(elementIds, element.parent, `pseudo "${element.id}" parent`);
+			break;
+		case "message":
+			requireActor(element.from, `message "${element.id}" from`);
+			requireActor(element.to, `message "${element.id}" to`);
+			require(eventIds, element.event, `message "${element.id}" event`);
+	}
+	for (const transition of model.transitions) {
+		const where = `transition "${transition.id}"`;
+		require(elementIds, transition.source, `${where} source`);
+		require(elementIds, transition.target, `${where} target`);
+		require(eventIds, transition.trigger, `${where} trigger`);
+		require(actionIds, transition.effect, `${where} effect`);
+	}
+	for (const fragment of model.fragments) for (const operand of fragment.operands) for (const id of operand.body) require(elementIds, id, `fragment "${fragment.id}" body`);
+	const producers = /* @__PURE__ */ new Map();
+	for (const element of model.elements) if (element.kind === "activity") for (const id of new Set(element.produces ?? [])) producers.set(id, [...producers.get(id) ?? [], element.id]);
+	for (const [artefact, activities] of producers) if (activities.length > 1) issues.push({
+		code: "multiple-producers",
+		message: `Artefact "${artefact}" is produced by more than one activity: ${activities.join(", ")}`
+	});
+	const sources = model.elements.flatMap((element) => element.kind === "activity" && element.source !== void 0 ? [element.source] : []);
+	for (const source of duplicates(sources)) issues.push({
+		code: "duplicate-source",
+		message: `Duplicate activity source "${source}"`
+	});
+	const initialsByScope = /* @__PURE__ */ new Map();
+	for (const element of model.elements) if (element.kind === "pseudo" && element.role === "initial") {
+		const scope = element.parent ?? "";
+		initialsByScope.set(scope, (initialsByScope.get(scope) ?? 0) + 1);
+	}
+	for (const [scope, count] of initialsByScope) if (count > 1) {
+		const label = scope === "" ? "the top level" : `"${scope}"`;
+		issues.push({
+			code: "multiple-initial",
+			message: `${label} has ${count} initial pseudo-states`
+		});
+	}
+	for (const projection of model.projections) {
+		if (projection.notation === "stateMachine") {
+			require(participantIds, projection.subject, `projection "${projection.id}" subject`);
+			if (kindOf.get(projection.subject) !== "entity") issues.push({
+				code: "subject-not-entity",
+				message: `projection "${projection.id}" subject "${projection.subject}" is not an entity`
+			});
+		}
+		if (projection.notation === "sequence") for (const id of projection.scenario) require(transitionIds, id, `projection "${projection.id}" scenario`);
+	}
+	return issues;
+};
+//#endregion
+export { validate as t };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "process-graph",
-  "version": "1.0.5",
-  "description": "A process and dependency graph model with projections into flowcharts, swimlanes, state machines and sequence diagrams, and reasoning over a run: one install for the model, projection, domain and DAG packages.",
+  "version": "1.1.0",
+  "description": "A process and dependency graph model with projections into flowcharts, swimlanes, state machines and sequence diagrams, reasoning over a run, layout, the GitHub issues source, the SQLite store for Node and the browser, and the process-graph command line, each behind its own subpath.",
   "type": "module",
   "repository": {
     "type": "git",
@@ -12,10 +12,59 @@
   "bugs": {
     "url": "https://github.com/ExaDev/process-graph/issues"
   },
+  "bin": {
+    "process-graph": "./dist/bin.js"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
+    },
+    "./layout": {
+      "types": "./dist/layout.d.ts",
+      "import": "./dist/layout.js"
+    },
+    "./source/github": {
+      "types": "./dist/source/github.d.ts",
+      "import": "./dist/source/github.js"
+    },
+    "./source/github/node": {
+      "types": "./dist/source/github/node.d.ts",
+      "import": "./dist/source/github/node.js"
+    },
+    "./store": {
+      "types": "./dist/store.d.ts",
+      "import": "./dist/store.js"
+    },
+    "./store/node": {
+      "types": "./dist/store/node.d.ts",
+      "import": "./dist/store/node.js"
+    },
+    "./store/wasm": {
+      "types": "./dist/store/wasm.d.ts",
+      "import": "./dist/store/wasm.js"
+    },
+    "./store/wasm/worker": {
+      "types": "./dist/store/wasm/worker.d.ts",
+      "import": "./dist/store/wasm/worker.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js"
+    },
+    "./ui": {
+      "types": "./dist/ui.d.ts",
+      "import": "./dist/ui.js"
+    },
+    "./react-flow": {
+      "types": "./dist/react-flow.d.ts",
+      "import": "./dist/react-flow.js"
+    },
+    "./ui/style.css": "./dist/ui/style.css",
+    "./react-flow/style.css": "./dist/react-flow/style.css",
+    "./cli": {
+      "types": "./dist/cli.d.ts",
+      "import": "./dist/cli.js"
     }
   },
   "types": "./dist/index.d.ts",
@@ -27,26 +76,31 @@
     "provenance": true,
     "registry": "https://registry.npmjs.org/"
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "./dist/bin.js",
+    "*.css"
+  ],
   "license": "MIT",
   "scripts": {
     "build": "turbo run _build",
-    "_build": "tsc -b tsconfig.build.json",
+    "_build": "tsdown",
     "lint": "turbo run _lint",
     "_lint": "eslint . --cache --max-warnings 0",
     "_lint:fix": "eslint . --fix --cache --max-warnings 0",
     "typecheck": "turbo run _typecheck _typecheck:attw",
-    "_typecheck": "tsc -p tsconfig.json --noEmit && tsc -p tsconfig.node.json --noEmit",
-    "_typecheck:attw": "attw --pack --profile esm-only",
+    "_typecheck": "tsc -p tsconfig.json --noEmit && tsc -p tsconfig.node.json --noEmit && tsc -p tsconfig.browser.json --noEmit",
+    "_typecheck:attw": "attw --pack --profile esm-only --exclude-entrypoints ./ui/style.css ./react-flow/style.css",
     "test": "turbo run _test",
     "_test": "vitest run --project unit",
     "test:coverage": "turbo run _test:coverage",
     "_test:coverage": "vitest run --project unit --coverage",
+    "test:integration": "turbo run _test:integration",
+    "_test:integration": "vitest run --project browser",
     "test:smoke": "turbo run _test:smoke",
     "_test:smoke": "vitest run --project smoke",
     "test:mutation": "turbo run _test:mutation",
     "_test:mutation": "stryker run stryker.config.ts",
-    "prepublishOnly": "pnpm run lint && pnpm run typecheck && pnpm run test && pnpm run build && publint && attw --pack --profile esm-only"
+    "prepublishOnly": "pnpm run lint && pnpm run typecheck && pnpm run test && pnpm run build && publint && attw --pack --profile esm-only --exclude-entrypoints ./ui/style.css ./react-flow/style.css"
   },
   "keywords": [
     "process-model",
@@ -56,22 +110,103 @@
     "state-machine",
     "sequence-diagram"
   ],
-  "dependencies": {
-    "@exadev/process-graph-dag": "1.0.2",
-    "@exadev/process-graph-domain": "1.1.0",
-    "@exadev/process-graph-projection": "1.0.3",
-    "@exadev/process-graph-schema": "1.1.0"
-  },
   "devDependencies": {
     "@arethetypeswrong/cli": "0.18.5",
+    "@exadev/process-graph-cli": "1.0.0",
+    "@exadev/process-graph-dag": "1.1.1",
+    "@exadev/process-graph-domain": "1.1.2",
+    "@exadev/process-graph-layout": "1.0.4",
+    "@exadev/process-graph-projection": "1.1.1",
+    "@exadev/process-graph-react": "1.1.0",
+    "@exadev/process-graph-react-flow": "1.1.0",
+    "@exadev/process-graph-schema": "1.1.1",
+    "@exadev/process-graph-source-contract": "1.1.1",
+    "@exadev/process-graph-source-github-issues": "1.1.1",
+    "@exadev/process-graph-sqlite-node": "1.0.5",
+    "@exadev/process-graph-sqlite-wasm": "1.0.4",
+    "@exadev/process-graph-store-contract": "1.1.1",
+    "@exadev/process-graph-store-sqlite": "1.1.1",
+    "@exadev/process-graph-ui": "1.0.2",
+    "@orpc/client": "2.0.0-beta.41",
+    "@orpc/contract": "2.0.0-beta.41",
+    "@orpc/server": "2.0.0-beta.41",
+    "@sqlite.org/sqlite-wasm": "3.53.4-build2",
     "@stryker-mutator/core": "10.0.0",
     "@stryker-mutator/typescript-checker": "10.0.0",
     "@stryker-mutator/vitest-runner": "10.0.0",
     "@types/node": "26.6.4",
+    "@types/react": "19.3.0",
+    "@vanilla-extract/css": "1.21.2",
+    "@vanilla-extract/recipes": "0.5.7",
+    "@vitest/browser-playwright": "5.0.3",
     "@vitest/coverage-v8": "5.0.3",
+    "@xyflow/react": "12.12.0",
+    "commander": "15.0.0",
+    "drizzle-orm": "1.0.0-rc.4",
+    "elkjs": "0.12.0",
     "eslint": "10.12.0",
+    "playwright": "1.63.0",
     "publint": "0.3.25",
+    "react": "19.3.0",
+    "react-dom": "19.3.0",
+    "tsdown": "0.23.0",
     "typescript": "6.0.3",
     "vitest": "5.0.3"
+  },
+  "dependencies": {
+    "trilean": "1.7.2",
+    "zod": "4.6.5"
+  },
+  "peerDependencies": {
+    "@orpc/client": "2.0.0-beta.41",
+    "@orpc/contract": "2.0.0-beta.41",
+    "@orpc/server": "2.0.0-beta.41",
+    "@sqlite.org/sqlite-wasm": "3.53.4-build2",
+    "@vanilla-extract/css": "1.21.2",
+    "@vanilla-extract/recipes": "0.5.7",
+    "@xyflow/react": "12.12.0",
+    "commander": "15.0.0",
+    "drizzle-orm": "1.0.0-rc.4",
+    "elkjs": "0.12.0",
+    "react": "19.3.0",
+    "react-dom": "19.3.0"
+  },
+  "peerDependenciesMeta": {
+    "@orpc/client": {
+      "optional": true
+    },
+    "@orpc/contract": {
+      "optional": true
+    },
+    "@orpc/server": {
+      "optional": true
+    },
+    "@sqlite.org/sqlite-wasm": {
+      "optional": true
+    },
+    "@vanilla-extract/css": {
+      "optional": true
+    },
+    "@vanilla-extract/recipes": {
+      "optional": true
+    },
+    "@xyflow/react": {
+      "optional": true
+    },
+    "commander": {
+      "optional": true
+    },
+    "drizzle-orm": {
+      "optional": true
+    },
+    "elkjs": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
   }
 }