@statelyai/layout 0.1.3 → 0.3.0

package/dist/types-CT2akdK0.d.mts

@@ -0,0 +1,133 @@
+import { EntityRect, Graph, GraphDiff, Point } from "@statelyai/graph";
+
+//#region src/routing/types.d.ts
+type RoutePoint = Readonly<Point>;
+type RouteSegment = {
+  readonly kind: "line";
+  readonly to: RoutePoint;
+} | {
+  readonly kind: "quadratic";
+  readonly control: RoutePoint;
+  readonly to: RoutePoint;
+} | {
+  readonly kind: "cubic";
+  readonly control1: RoutePoint;
+  readonly control2: RoutePoint;
+  readonly to: RoutePoint;
+} | {
+  readonly kind: "arc";
+  readonly rx: number;
+  readonly ry: number;
+  readonly rotation: number;
+  readonly largeArc: boolean;
+  readonly sweep: boolean;
+  readonly to: RoutePoint;
+};
+interface RoutePath {
+  readonly start: RoutePoint;
+  readonly segments: readonly RouteSegment[];
+}
+type RouteEndpoint = {
+  readonly kind: "node";
+  readonly nodeId: string;
+  readonly port?: string;
+} | {
+  readonly kind: "label";
+  readonly edgeId: string;
+} | {
+  readonly kind: "junction";
+  readonly id: string;
+};
+interface RouteSection {
+  readonly id: string;
+  readonly from: RouteEndpoint;
+  readonly to: RouteEndpoint;
+  readonly path: RoutePath;
+  /** Same ID denotes a shared trunk; render it once. */
+  readonly sharedId?: string;
+}
+type RoutingDiagnosticCode = "MISSING_GEOMETRY" | "MISSING_PORT" | "ROUTE_CONFLICT" | "ROUTE_BLOCKED" | "SEARCH_BUDGET" | "CONSTRAINT_VIOLATION";
+interface RoutingDiagnostic {
+  readonly code: RoutingDiagnosticCode;
+  readonly edgeId: string;
+  readonly message: string;
+}
+interface Route {
+  readonly edgeId: string;
+  readonly sections: readonly RouteSection[];
+  readonly status: "routed" | "fallback";
+  readonly diagnostics: readonly RoutingDiagnostic[];
+}
+type RoutePatch = {
+  readonly op: "set";
+  readonly edgeId: string;
+  readonly route: Route;
+} | {
+  readonly op: "delete";
+  readonly edgeId: string;
+};
+type RouteStyle = "straight" | "bezier" | "orthogonal" | "polyline" | "octilinear" | "curved" | "organic" | "parallel" | "self-loop" | "fan" | "bus" | "bundle";
+type RouteSide = "left" | "right" | "top" | "bottom";
+interface RouteAttachment {
+  /** Node-local attachment rectangle, independent of its outer obstacle bounds. */
+  readonly bounds: RouteBounds;
+  readonly facing?: "inward" | "outward";
+}
+interface EdgeRoutingSettings {
+  readonly sourceAttachment?: RouteAttachment;
+  readonly targetAttachment?: RouteAttachment;
+  readonly sourceSide?: RouteSide;
+  readonly targetSide?: RouteSide;
+  readonly waypoints?: readonly RoutePoint[];
+  /** Explicit shared routing group. Native binary edges describe branches of a net. */
+  readonly group?: string;
+}
+interface RoutingSettings {
+  /** Native compound geometry is parent-relative; adapters may supply resolved world geometry. */
+  readonly coordinateSpace?: "parent" | "world";
+  readonly clearance?: number;
+  readonly radius?: number;
+  readonly edgeSpacing?: number;
+  readonly bendPenalty?: number;
+  /** Soft cost per crossing; finite costs keep detours proportionate. Default 80. */
+  readonly crossingPenalty?: number;
+  /** Cost per unit of parallel overlap within edgeSpacing. Default 8. */
+  readonly overlapPenalty?: number;
+  readonly maxSearchNodes?: number;
+  readonly organicIterations?: number;
+  readonly edges?: Readonly<Record<string, EdgeRoutingSettings>>;
+}
+interface RoutingMetrics {
+  readonly routedEdges: number;
+  readonly reusedEdges: number;
+  readonly affectedEdges: number;
+  readonly searchNodes: number;
+  readonly obstacleCandidates: number;
+}
+/** Immutable value. Retain it per canvas; the private state uses structural sharing. */
+interface RoutingSnapshot {
+  readonly strategy: string;
+  readonly revision: number;
+  readonly routes: ReadonlyMap<string, Route>;
+  readonly metrics: RoutingMetrics;
+}
+interface RoutingUpdate {
+  readonly snapshot: RoutingSnapshot;
+  readonly patches: readonly RoutePatch[];
+  /** Compare identity before accepting an asynchronous result. */
+  readonly base: RoutingSnapshot;
+}
+type RoutingGraph = Graph<unknown, unknown, unknown, unknown>;
+interface RoutingStrategy {
+  readonly id: string;
+  route(graph: RoutingGraph, settings?: RoutingSettings): RoutingSnapshot | Promise<RoutingSnapshot>;
+  update(graph: RoutingGraph, previous: RoutingSnapshot, diff: GraphDiff<unknown, unknown>, settings?: RoutingSettings): RoutingUpdate | Promise<RoutingUpdate>;
+}
+interface NativeRoutingStrategy extends RoutingStrategy {
+  readonly id: RouteStyle;
+  route(graph: RoutingGraph, settings?: RoutingSettings): RoutingSnapshot;
+  update(graph: RoutingGraph, previous: RoutingSnapshot, diff: GraphDiff<unknown, unknown>, settings?: RoutingSettings): RoutingUpdate;
+}
+type RouteBounds = Readonly<EntityRect>;
+//#endregion
+export { RoutingMetrics as _, RouteBounds as a, RoutingStrategy as b, RoutePath as c, RouteSegment as d, RouteSide as f, RoutingGraph as g, RoutingDiagnosticCode as h, RouteAttachment as i, RoutePoint as l, RoutingDiagnostic as m, NativeRoutingStrategy as n, RouteEndpoint as o, RouteStyle as p, Route as r, RoutePatch as s, EdgeRoutingSettings as t, RouteSection as u, RoutingSettings as v, RoutingUpdate as x, RoutingSnapshot as y };

package/dist/types-uxPlGRof.d.cts

@@ -0,0 +1,133 @@
+import { EntityRect, Graph, GraphDiff, Point } from "@statelyai/graph";
+
+//#region src/routing/types.d.ts
+type RoutePoint = Readonly<Point>;
+type RouteSegment = {
+  readonly kind: "line";
+  readonly to: RoutePoint;
+} | {
+  readonly kind: "quadratic";
+  readonly control: RoutePoint;
+  readonly to: RoutePoint;
+} | {
+  readonly kind: "cubic";
+  readonly control1: RoutePoint;
+  readonly control2: RoutePoint;
+  readonly to: RoutePoint;
+} | {
+  readonly kind: "arc";
+  readonly rx: number;
+  readonly ry: number;
+  readonly rotation: number;
+  readonly largeArc: boolean;
+  readonly sweep: boolean;
+  readonly to: RoutePoint;
+};
+interface RoutePath {
+  readonly start: RoutePoint;
+  readonly segments: readonly RouteSegment[];
+}
+type RouteEndpoint = {
+  readonly kind: "node";
+  readonly nodeId: string;
+  readonly port?: string;
+} | {
+  readonly kind: "label";
+  readonly edgeId: string;
+} | {
+  readonly kind: "junction";
+  readonly id: string;
+};
+interface RouteSection {
+  readonly id: string;
+  readonly from: RouteEndpoint;
+  readonly to: RouteEndpoint;
+  readonly path: RoutePath;
+  /** Same ID denotes a shared trunk; render it once. */
+  readonly sharedId?: string;
+}
+type RoutingDiagnosticCode = "MISSING_GEOMETRY" | "MISSING_PORT" | "ROUTE_CONFLICT" | "ROUTE_BLOCKED" | "SEARCH_BUDGET" | "CONSTRAINT_VIOLATION";
+interface RoutingDiagnostic {
+  readonly code: RoutingDiagnosticCode;
+  readonly edgeId: string;
+  readonly message: string;
+}
+interface Route {
+  readonly edgeId: string;
+  readonly sections: readonly RouteSection[];
+  readonly status: "routed" | "fallback";
+  readonly diagnostics: readonly RoutingDiagnostic[];
+}
+type RoutePatch = {
+  readonly op: "set";
+  readonly edgeId: string;
+  readonly route: Route;
+} | {
+  readonly op: "delete";
+  readonly edgeId: string;
+};
+type RouteStyle = "straight" | "bezier" | "orthogonal" | "polyline" | "octilinear" | "curved" | "organic" | "parallel" | "self-loop" | "fan" | "bus" | "bundle";
+type RouteSide = "left" | "right" | "top" | "bottom";
+interface RouteAttachment {
+  /** Node-local attachment rectangle, independent of its outer obstacle bounds. */
+  readonly bounds: RouteBounds;
+  readonly facing?: "inward" | "outward";
+}
+interface EdgeRoutingSettings {
+  readonly sourceAttachment?: RouteAttachment;
+  readonly targetAttachment?: RouteAttachment;
+  readonly sourceSide?: RouteSide;
+  readonly targetSide?: RouteSide;
+  readonly waypoints?: readonly RoutePoint[];
+  /** Explicit shared routing group. Native binary edges describe branches of a net. */
+  readonly group?: string;
+}
+interface RoutingSettings {
+  /** Native compound geometry is parent-relative; adapters may supply resolved world geometry. */
+  readonly coordinateSpace?: "parent" | "world";
+  readonly clearance?: number;
+  readonly radius?: number;
+  readonly edgeSpacing?: number;
+  readonly bendPenalty?: number;
+  /** Soft cost per crossing; finite costs keep detours proportionate. Default 80. */
+  readonly crossingPenalty?: number;
+  /** Cost per unit of parallel overlap within edgeSpacing. Default 8. */
+  readonly overlapPenalty?: number;
+  readonly maxSearchNodes?: number;
+  readonly organicIterations?: number;
+  readonly edges?: Readonly<Record<string, EdgeRoutingSettings>>;
+}
+interface RoutingMetrics {
+  readonly routedEdges: number;
+  readonly reusedEdges: number;
+  readonly affectedEdges: number;
+  readonly searchNodes: number;
+  readonly obstacleCandidates: number;
+}
+/** Immutable value. Retain it per canvas; the private state uses structural sharing. */
+interface RoutingSnapshot {
+  readonly strategy: string;
+  readonly revision: number;
+  readonly routes: ReadonlyMap<string, Route>;
+  readonly metrics: RoutingMetrics;
+}
+interface RoutingUpdate {
+  readonly snapshot: RoutingSnapshot;
+  readonly patches: readonly RoutePatch[];
+  /** Compare identity before accepting an asynchronous result. */
+  readonly base: RoutingSnapshot;
+}
+type RoutingGraph = Graph<unknown, unknown, unknown, unknown>;
+interface RoutingStrategy {
+  readonly id: string;
+  route(graph: RoutingGraph, settings?: RoutingSettings): RoutingSnapshot | Promise<RoutingSnapshot>;
+  update(graph: RoutingGraph, previous: RoutingSnapshot, diff: GraphDiff<unknown, unknown>, settings?: RoutingSettings): RoutingUpdate | Promise<RoutingUpdate>;
+}
+interface NativeRoutingStrategy extends RoutingStrategy {
+  readonly id: RouteStyle;
+  route(graph: RoutingGraph, settings?: RoutingSettings): RoutingSnapshot;
+  update(graph: RoutingGraph, previous: RoutingSnapshot, diff: GraphDiff<unknown, unknown>, settings?: RoutingSettings): RoutingUpdate;
+}
+type RouteBounds = Readonly<EntityRect>;
+//#endregion
+export { RoutingMetrics as _, RouteBounds as a, RoutingStrategy as b, RoutePath as c, RouteSegment as d, RouteSide as f, RoutingGraph as g, RoutingDiagnosticCode as h, RouteAttachment as i, RoutePoint as l, RoutingDiagnostic as m, NativeRoutingStrategy as n, RouteEndpoint as o, RouteStyle as p, Route as r, RoutePatch as s, EdgeRoutingSettings as t, RouteSection as u, RoutingSettings as v, RoutingUpdate as x, RoutingSnapshot as y };

package/dist/worker-client-BNjwT1AJ.mjs

@@ -0,0 +1,92 @@
+//#region src/elkjs/worker-client.ts
+var PromisedWorker = class {
+	#worker;
+	#resolvers = /* @__PURE__ */ new Map();
+	#id = 0;
+	#failure;
+	constructor(worker) {
+		this.#worker = worker;
+		worker.onmessage = (event) => {
+			const resolver = this.#resolvers.get(event.data.id);
+			if (!resolver) return;
+			this.#resolvers.delete(event.data.id);
+			if (event.data.error !== void 0) resolver.reject(event.data.error);
+			else resolver.resolve(event.data.data);
+		};
+		worker.onerror = (event) => this.#rejectAll(event.error ?? event.message);
+		worker.onmessageerror = (event) => this.#rejectAll(event.data);
+	}
+	postMessage(message) {
+		if (this.#failure) return Promise.reject(this.#failure);
+		const id = this.#id++;
+		return new Promise((resolve, reject) => {
+			this.#resolvers.set(id, {
+				resolve,
+				reject
+			});
+			this.#worker.postMessage({
+				...message,
+				id
+			});
+		});
+	}
+	terminate() {
+		this.#worker.terminate();
+	}
+	#rejectAll(reason) {
+		const error = reason instanceof Error ? reason : new Error(String(reason ?? "Worker failed"));
+		this.#failure = error;
+		for (const resolver of this.#resolvers.values()) resolver.reject(error);
+		this.#resolvers.clear();
+	}
+};
+var WorkerELK = class {
+	#defaultLayoutOptions;
+	#worker;
+	#ready;
+	constructor({ defaultLayoutOptions = {}, algorithms, workerFactory, workerUrl } = {}) {
+		if (workerUrl === void 0 && workerFactory === void 0) throw new Error("Cannot construct an ELK without both 'workerUrl' and 'workerFactory'.");
+		const worker = (workerFactory ?? ((url) => new globalThis.Worker(url)))(workerUrl);
+		if (!worker || typeof worker.postMessage !== "function") throw new TypeError("Created worker does not provide the required 'postMessage' function.");
+		this.#defaultLayoutOptions = defaultLayoutOptions;
+		this.#worker = new PromisedWorker(worker);
+		this.#ready = this.#worker.postMessage({
+			cmd: "register",
+			algorithms
+		});
+	}
+	async layout(graph, args = {}) {
+		if (!graph) throw new Error("Missing mandatory parameter 'graph'.");
+		await this.#ready;
+		return this.#worker.postMessage({
+			cmd: "layout",
+			graph,
+			layoutOptions: {
+				...this.#defaultLayoutOptions,
+				...args.layoutOptions
+			},
+			options: {
+				logging: args.logging ?? false,
+				measureExecutionTime: args.measureExecutionTime ?? false
+			}
+		});
+	}
+	async knownLayoutAlgorithms() {
+		await this.#ready;
+		return this.#worker.postMessage({ cmd: "algorithms" });
+	}
+	async knownLayoutOptions() {
+		await this.#ready;
+		return this.#worker.postMessage({ cmd: "options" });
+	}
+	async knownLayoutCategories() {
+		await this.#ready;
+		return this.#worker.postMessage({ cmd: "categories" });
+	}
+	terminateWorker() {
+		this.#worker.terminate();
+	}
+};
+
+//#endregion
+export { WorkerELK as t };

package/dist/worker-client-BwGGRD5y.d.mts

@@ -0,0 +1,19 @@
+import { d as ElkLayoutCategoryDescription, f as ElkLayoutOptionDescription, l as ElkLayoutAlgorithmDescription, n as ELKConstructorArguments, p as ElkNode, t as ELK, u as ElkLayoutArguments, v as LaidOutElkNode } from "./public-types-9NCPoqbp.mjs";
+
+//#region src/elkjs/worker-client.d.ts
+declare class WorkerELK implements ELK {
+  #private;
+  constructor({
+    defaultLayoutOptions,
+    algorithms,
+    workerFactory,
+    workerUrl
+  }?: ELKConstructorArguments);
+  layout<T extends ElkNode>(graph: T, args?: ElkLayoutArguments): Promise<LaidOutElkNode<T>>;
+  knownLayoutAlgorithms(): Promise<ElkLayoutAlgorithmDescription[]>;
+  knownLayoutOptions(): Promise<ElkLayoutOptionDescription[]>;
+  knownLayoutCategories(): Promise<ElkLayoutCategoryDescription[]>;
+  terminateWorker(): void;
+}
+//#endregion
+export { WorkerELK as t };

package/dist/worker-client-D4oEvhAl.cjs

@@ -0,0 +1,98 @@
+
+//#region src/elkjs/worker-client.ts
+var PromisedWorker = class {
+	#worker;
+	#resolvers = /* @__PURE__ */ new Map();
+	#id = 0;
+	#failure;
+	constructor(worker) {
+		this.#worker = worker;
+		worker.onmessage = (event) => {
+			const resolver = this.#resolvers.get(event.data.id);
+			if (!resolver) return;
+			this.#resolvers.delete(event.data.id);
+			if (event.data.error !== void 0) resolver.reject(event.data.error);
+			else resolver.resolve(event.data.data);
+		};
+		worker.onerror = (event) => this.#rejectAll(event.error ?? event.message);
+		worker.onmessageerror = (event) => this.#rejectAll(event.data);
+	}
+	postMessage(message) {
+		if (this.#failure) return Promise.reject(this.#failure);
+		const id = this.#id++;
+		return new Promise((resolve, reject) => {
+			this.#resolvers.set(id, {
+				resolve,
+				reject
+			});
+			this.#worker.postMessage({
+				...message,
+				id
+			});
+		});
+	}
+	terminate() {
+		this.#worker.terminate();
+	}
+	#rejectAll(reason) {
+		const error = reason instanceof Error ? reason : new Error(String(reason ?? "Worker failed"));
+		this.#failure = error;
+		for (const resolver of this.#resolvers.values()) resolver.reject(error);
+		this.#resolvers.clear();
+	}
+};
+var WorkerELK = class {
+	#defaultLayoutOptions;
+	#worker;
+	#ready;
+	constructor({ defaultLayoutOptions = {}, algorithms, workerFactory, workerUrl } = {}) {
+		if (workerUrl === void 0 && workerFactory === void 0) throw new Error("Cannot construct an ELK without both 'workerUrl' and 'workerFactory'.");
+		const worker = (workerFactory ?? ((url) => new globalThis.Worker(url)))(workerUrl);
+		if (!worker || typeof worker.postMessage !== "function") throw new TypeError("Created worker does not provide the required 'postMessage' function.");
+		this.#defaultLayoutOptions = defaultLayoutOptions;
+		this.#worker = new PromisedWorker(worker);
+		this.#ready = this.#worker.postMessage({
+			cmd: "register",
+			algorithms
+		});
+	}
+	async layout(graph, args = {}) {
+		if (!graph) throw new Error("Missing mandatory parameter 'graph'.");
+		await this.#ready;
+		return this.#worker.postMessage({
+			cmd: "layout",
+			graph,
+			layoutOptions: {
+				...this.#defaultLayoutOptions,
+				...args.layoutOptions
+			},
+			options: {
+				logging: args.logging ?? false,
+				measureExecutionTime: args.measureExecutionTime ?? false
+			}
+		});
+	}
+	async knownLayoutAlgorithms() {
+		await this.#ready;
+		return this.#worker.postMessage({ cmd: "algorithms" });
+	}
+	async knownLayoutOptions() {
+		await this.#ready;
+		return this.#worker.postMessage({ cmd: "options" });
+	}
+	async knownLayoutCategories() {
+		await this.#ready;
+		return this.#worker.postMessage({ cmd: "categories" });
+	}
+	terminateWorker() {
+		this.#worker.terminate();
+	}
+};
+
+//#endregion
+Object.defineProperty(exports, 'WorkerELK', {
+  enumerable: true,
+  get: function () {
+    return WorkerELK;
+  }
+});

package/dist/worker-client-D4zNyPEI.d.cts

@@ -0,0 +1,19 @@
+import { d as ElkLayoutCategoryDescription, f as ElkLayoutOptionDescription, l as ElkLayoutAlgorithmDescription, n as ELKConstructorArguments, p as ElkNode, t as ELK, u as ElkLayoutArguments, v as LaidOutElkNode } from "./public-types-BcRZoJE3.cjs";
+
+//#region src/elkjs/worker-client.d.ts
+declare class WorkerELK implements ELK {
+  #private;
+  constructor({
+    defaultLayoutOptions,
+    algorithms,
+    workerFactory,
+    workerUrl
+  }?: ELKConstructorArguments);
+  layout<T extends ElkNode>(graph: T, args?: ElkLayoutArguments): Promise<LaidOutElkNode<T>>;
+  knownLayoutAlgorithms(): Promise<ElkLayoutAlgorithmDescription[]>;
+  knownLayoutOptions(): Promise<ElkLayoutOptionDescription[]>;
+  knownLayoutCategories(): Promise<ElkLayoutCategoryDescription[]>;
+  terminateWorker(): void;
+}
+//#endregion
+export { WorkerELK as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statelyai/layout",
-  "version": "0.1.3",
+  "version": "0.3.0",
   "description": "Extensible, graph-native layout algorithms for @statelyai/graph",
   "license": "EPL-2.0 OR GPL-3.0-or-later",
   "repository": {
@@ -15,32 +15,62 @@
   ],
   "type": "module",
   "sideEffects": false,
-  "main": "./dist/index.mjs",
+  "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
   "types": "./src/index.ts",
   "exports": {
     ".": {
       "types": "./src/index.ts",
-      "default": "./dist/index.mjs"
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
     },
     "./elkjs": {
       "types": "./src/elkjs/index.ts",
-      "default": "./dist/elkjs/index.mjs"
+      "import": "./dist/elkjs/index.mjs",
+      "require": "./dist/elkjs/index.cjs"
+    },
+    "./lib/elk-api.js": {
+      "types": "./src/elkjs/worker-api.ts",
+      "import": "./dist/elkjs/worker-api.mjs",
+      "require": "./dist/elkjs/worker-api.cjs"
     },
     "./lib/elk.bundled.js": {
-      "types": "./src/elkjs/index.ts",
-      "default": "./dist/elkjs/index.mjs"
+      "types": "./src/elkjs/main.ts",
+      "import": "./dist/elkjs/main.mjs",
+      "require": "./dist/elkjs/main.cjs"
+    },
+    "./lib/elk-worker.js": {
+      "types": "./src/elkjs/worker.ts",
+      "import": "./dist/elkjs/worker.mjs",
+      "require": "./dist/elkjs/worker.cjs"
+    },
+    "./lib/elk-worker.min.js": {
+      "types": "./src/elkjs/worker.ts",
+      "import": "./dist/elkjs/worker.mjs",
+      "require": "./dist/elkjs/worker.cjs"
+    },
+    "./lib/main.js": {
+      "types": "./src/elkjs/main.ts",
+      "import": "./dist/elkjs/main.mjs",
+      "require": "./dist/elkjs/main.cjs"
     },
     "./layered": {
       "types": "./src/layered/index.ts",
-      "default": "./dist/layered/index.mjs"
+      "import": "./dist/layered/index.mjs",
+      "require": "./dist/layered/index.cjs"
     },
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./routing": {
+      "types": "./src/routing/index.ts",
+      "import": "./dist/routing/index.mjs",
+      "require": "./dist/routing/index.cjs"
+    }
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
+    "@lume/kiwi": "^0.4.4",
     "@statelyai/graph": "^2.1.0"
   },
   "devDependencies": {
@@ -48,6 +78,7 @@
     "@codemirror/lang-javascript": "^6.2.5",
     "@codemirror/lint": "^6.9.7",
     "@statelyai/layout-pre-exterior-label-separation": "npm:@statelyai/layout@0.0.4",
+    "@storybook/react-vite": "^10.6.0",
     "@types/node": "^25.0.3",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.4",
@@ -63,6 +94,7 @@
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "react-resizable-panels": "^4.12.2",
+    "storybook": "^10.6.0",
     "tsdown": "^0.18.1",
     "tsx": "^4.22.4",
     "typescript": "^5.9.3",
@@ -93,7 +125,10 @@
     "test": "vitest",
     "typecheck": "tsc --noEmit",
     "typecheck:repo": "tsc --project tsconfig.repo.json",
-    "verify": "oxfmt --check . && oxlint && tsc --noEmit && tsc --project tsconfig.repo.json && tsc --project demo/tsconfig.json && tsx scripts/generate-elk-layered-options.ts --check && tsx scripts/generate-demo-corpus.ts --check && vitest --run && tsdown && vite build --config demo/vite.config.ts && publint --pack npm && tsx scripts/smoke-package.ts",
-    "validate:package": "publint --pack npm && tsx scripts/smoke-package.ts"
+    "verify": "oxfmt --check . && oxlint && tsc --noEmit && tsc --project tsconfig.repo.json && tsc --project demo/tsconfig.json && tsc --project stories/tsconfig.json && tsx scripts/generate-elk-layered-options.ts --check && tsx scripts/generate-demo-corpus.ts --check && vitest --run && tsdown && vite build --config demo/vite.config.ts && storybook build -o dist-storybook --quiet && publint --pack npm && tsx scripts/smoke-package.ts",
+    "validate:package": "publint --pack npm && tsx scripts/smoke-package.ts",
+    "storybook": "storybook dev -p 6018 --host 127.0.0.1 --no-open",
+    "storybook:build": "storybook build -o dist-storybook",
+    "storybook:typecheck": "tsc --project stories/tsconfig.json"
   }
 }