@multiplatform.one/node-graph 7.7.2

package/src/edges/edgeStyle.spec.ts

@@ -0,0 +1,295 @@
+/**
+ * The four typed edge kinds, design §4.4.
+ *
+ * "Handle different types of edges" is the requirement, and the thing that
+ * makes it real is that a user can TELL THEM APART on a canvas — so the
+ * property below is pairwise distinguishability, not four of everything.
+ *
+ * A contradiction the plan and the design do not agree on, recorded rather
+ * than silently resolved: plan task 1.10 says the four kinds map to "four
+ * distinct path functions and four distinct token strokes", but design §4.4's
+ * own table gives THREE of each — `flow` and `error` share `smoothstep`, and
+ * `data` and `conditional` share `$color8`. The table is the more specific
+ * artifact and it carries a "reads as" column giving each choice a reason, so
+ * the table wins and the counts are asserted at three. Every pair is still
+ * distinguishable, because the pairs that share one column differ in two
+ * others. If Clay wants four of each, that is a design change with two new
+ * choices in it, not a spec edit.
+ */
+
+import { describe, expect, it } from "vitest";
+import { createGraphSchema, defaultRules, validateConnection } from "../model/index";
+import type { GraphDocument } from "../model/index";
+import { builtinEdgeKindNames, builtinEdgeKinds } from "./edgeKinds";
+import type { BuiltinEdgeData, BuiltinEdgeKind } from "./edgeKinds";
+import {
+  edgeAppearances,
+  edgeMarkerEnd,
+  edgeStrokeWidth,
+  edgeStrokeWidths,
+  resolveEdgeStyle,
+  themeTokenName,
+} from "./edgeStyle";
+
+const hex = /#[0-9a-f]{3,8}\b/i;
+
+describe("the table in design §4.4", () => {
+  it("is exactly what the code carries", () => {
+    expect(edgeAppearances).toEqual({
+      flow: { path: "smoothstep", stroke: "$color9", marker: "arrowclosed" },
+      data: { path: "bezier", stroke: "$color8", marker: "arrow" },
+      error: { path: "smoothstep", stroke: "$red9", dash: "6 4", marker: "arrowclosed" },
+      conditional: { path: "step", stroke: "$color8", dash: "2 4", marker: "arrow" },
+    });
+  });
+
+  it("names four kinds and no more", () => {
+    expect(builtinEdgeKindNames).toEqual(["flow", "data", "error", "conditional"]);
+    expect(Object.keys(builtinEdgeKinds).sort()).toEqual([...builtinEdgeKindNames].sort());
+  });
+});
+
+describe("the four kinds are pairwise distinguishable", () => {
+  const fingerprint = (kind: BuiltinEdgeKind) => JSON.stringify(edgeAppearances[kind]);
+
+  it("no two share the whole (path, stroke, dash, marker) tuple", () => {
+    const seen = new Set(builtinEdgeKindNames.map(fingerprint));
+    expect(seen.size).toBe(4);
+  });
+
+  it("the pairs that share one column differ in two others", () => {
+    // flow / error share `smoothstep`, and differ by stroke AND dash.
+    expect(edgeAppearances.flow.path).toBe(edgeAppearances.error.path);
+    expect(edgeAppearances.flow.stroke).not.toBe(edgeAppearances.error.stroke);
+    expect(edgeAppearances.flow.dash).not.toBe(edgeAppearances.error.dash);
+    // data / conditional share `$color8`, and differ by path AND dash.
+    expect(edgeAppearances.data.stroke).toBe(edgeAppearances.conditional.stroke);
+    expect(edgeAppearances.data.path).not.toBe(edgeAppearances.conditional.path);
+    expect(edgeAppearances.data.dash).not.toBe(edgeAppearances.conditional.dash);
+  });
+
+  it("uses three path functions and three strokes, per the table, not four", () => {
+    // Asserted so a later edit toward "four distinct" is a deliberate change to
+    // this line rather than a drift nobody noticed.
+    expect(new Set(builtinEdgeKindNames.map((k) => edgeAppearances[k].path)).size).toBe(3);
+    expect(new Set(builtinEdgeKindNames.map((k) => edgeAppearances[k].stroke)).size).toBe(3);
+  });
+});
+
+describe("no hex anywhere", () => {
+  it("every stroke is a token expression", () => {
+    for (const kind of builtinEdgeKindNames) {
+      const { stroke } = edgeAppearances[kind];
+      expect(stroke, kind).toMatch(/^\$/);
+      expect(stroke, kind).not.toMatch(hex);
+      expect(stroke, kind).not.toContain("color-mix(");
+    }
+  });
+
+  it("holds for the whole appearance table serialized", () => {
+    const serialized = JSON.stringify(edgeAppearances);
+    expect(serialized).not.toMatch(hex);
+    expect(serialized).not.toContain("color-mix(");
+  });
+
+  it("holds for every resolved style, at every knob combination", () => {
+    for (const kind of builtinEdgeKindNames) {
+      for (const borderWidth of ["none", "small", "medium", "large"] as const) {
+        for (const animation of ["none", "quick"] as const) {
+          const style = JSON.stringify(resolveEdgeStyle({ kind, borderWidth, animation }));
+          expect(style, `${kind}/${borderWidth}/${animation}`).not.toMatch(hex);
+        }
+      }
+    }
+  });
+});
+
+describe("the borderWidth knob", () => {
+  it("remaps to 1 / 1.5 / 2 / 3", () => {
+    // An edge is a STROKE, not a border. `borderWidthMap` in the theme is
+    // 0 / 0.5 / 1 / 2 (`public/theme/src/theme/resolveKnobs.ts:90`), and a
+    // 0-width edge erases the graph's primary information. §11 calls this a
+    // remap for exactly that reason, and NOT a floor to hairlineWidth, which
+    // is dividers-only by its own header.
+    expect(edgeStrokeWidths).toEqual({ none: 1, small: 1.5, medium: 2, large: 3 });
+  });
+
+  it("never resolves to 0, at any stop", () => {
+    for (const stop of ["none", "small", "medium", "large"] as const) {
+      expect(edgeStrokeWidth(stop), stop).toBeGreaterThan(0);
+    }
+  });
+
+  it("reaches the resolved style", () => {
+    expect(
+      resolveEdgeStyle({ kind: "flow", borderWidth: "none", animation: "quick" }).strokeWidth,
+    ).toBe(1);
+    expect(
+      resolveEdgeStyle({ kind: "flow", borderWidth: "large", animation: "quick" }).strokeWidth,
+    ).toBe(3);
+  });
+
+  it("moves every edge kind with one flip", () => {
+    // Stroke width is not per kind, by design §4.4's last line.
+    for (const kind of builtinEdgeKindNames) {
+      expect(resolveEdgeStyle({ kind, borderWidth: "large", animation: "quick" }).strokeWidth).toBe(
+        3,
+      );
+    }
+  });
+});
+
+describe("the animation knob", () => {
+  it('stops the dash at "none"', () => {
+    const still = resolveEdgeStyle({ kind: "error", borderWidth: "medium", animation: "none" });
+    expect(still.animation).toBe("none");
+  });
+
+  it("keeps the dash PATTERN, because that is the kind's identity", () => {
+    // Stopping the march is not the same as erasing the dashes. An `error`
+    // edge that stops dashing and also goes solid is indistinguishable from a
+    // `flow` edge with a different colour, and reduced-motion users would lose
+    // a channel rather than an animation.
+    const still = resolveEdgeStyle({ kind: "error", borderWidth: "medium", animation: "none" });
+    expect(still.strokeDasharray).toBe("6 4");
+  });
+
+  it("marches on a dashed kind when the knob is not none", () => {
+    const marching = resolveEdgeStyle({ kind: "error", borderWidth: "medium", animation: "quick" });
+    expect(marching.animation).not.toBe("none");
+    expect(marching.animation).toContain("mp-graph-dash");
+  });
+
+  it('is "none" for an undashed kind whatever the knob says', () => {
+    // There is nothing to march.
+    for (const kind of ["flow", "data"] as const) {
+      expect(
+        resolveEdgeStyle({ kind, borderWidth: "medium", animation: "quick" }).animation,
+        kind,
+      ).toBe("none");
+      expect(
+        resolveEdgeStyle({ kind, borderWidth: "medium", animation: "quick" }).strokeDasharray,
+      ).toBeUndefined();
+    }
+  });
+});
+
+describe("themeTokenName", () => {
+  it("strips the $ so a renderer can look the token up", () => {
+    // Measured, not assumed: with the raw token in the SVG `stroke` the
+    // computed value is `none` — an invalid declaration is dropped, and React
+    // Flow's own `.react-flow__edge-path` rule resolves to nothing because its
+    // `--xy-edge-stroke` is undefined until task 1.7's bridge writes it. The
+    // edges were invisible in the story until this landed.
+    expect(themeTokenName("$color9")).toBe("color9");
+    expect(themeTokenName("$red9")).toBe("red9");
+  });
+
+  it("leaves a value that is already a plain name alone", () => {
+    expect(themeTokenName("currentColor")).toBe("currentColor");
+  });
+
+  it("names a real key for every kind", () => {
+    for (const kind of builtinEdgeKindNames) {
+      expect(themeTokenName(edgeAppearances[kind].stroke), kind).toMatch(/^[a-z][a-zA-Z0-9]*$/);
+    }
+  });
+});
+
+describe("the marker", () => {
+  it("matches the table, and is read where the EDGE is built", () => {
+    // React Flow builds its marker defs from the edges array and hands the
+    // component a resolved `url(#...)`, so `BaseEdge` cannot choose a type.
+    for (const kind of builtinEdgeKindNames) {
+      expect(edgeMarkerEnd({ kind }), kind).toEqual({ type: edgeAppearances[kind].marker });
+    }
+    expect(edgeMarkerEnd({ kind: "flow" })).toEqual({ type: "arrowclosed" });
+    expect(edgeMarkerEnd({ kind: "data" })).toEqual({ type: "arrow" });
+  });
+
+  it("falls back to flow's marker for an unknown kind", () => {
+    expect(edgeMarkerEnd({ kind: "bespoke" })).toEqual({ type: "arrowclosed" });
+    expect(edgeMarkerEnd({ kind: "bespoke", appearance: "data" })).toEqual({ type: "arrow" });
+  });
+});
+
+describe("an unknown kind", () => {
+  it("falls back to flow rather than rendering nothing", () => {
+    // A consumer schema may define a kind with no appearance of its own. An
+    // edge that does not paint is worse than one that paints plainly.
+    expect(
+      resolveEdgeStyle({ kind: "bespoke", borderWidth: "medium", animation: "quick" }),
+    ).toEqual(resolveEdgeStyle({ kind: "flow", borderWidth: "medium", animation: "quick" }));
+  });
+
+  it("honours an explicit appearance name from the kind spec", () => {
+    expect(
+      resolveEdgeStyle({
+        kind: "bespoke",
+        appearance: "error",
+        borderWidth: "medium",
+        animation: "quick",
+      }).stroke,
+    ).toBe("$red9");
+  });
+});
+
+describe("a refused connection", () => {
+  // The `Refused` story shows this message next to the edge that would not be
+  // made, so the code and the wording are part of this task, not the model's.
+  type Nodes = { readonly source: Record<string, never>; readonly sink: Record<string, never> };
+
+  const schema = createGraphSchema<Nodes, BuiltinEdgeData>({
+    id: "edges-story",
+    nodes: {
+      source: {
+        kind: "source",
+        render: () => null,
+        defaultData: {},
+        measure: { width: 172, minHeight: 48 },
+        ports: [{ id: "out", side: "right", direction: "out", dataType: "number" }],
+      },
+      sink: {
+        kind: "sink",
+        render: () => null,
+        defaultData: {},
+        measure: { width: 172, minHeight: 48 },
+        ports: [{ id: "in", side: "left", direction: "in", dataType: "string" }],
+      },
+    },
+    edges: builtinEdgeKinds,
+    rules: defaultRules,
+  });
+
+  const doc: GraphDocument<Nodes, BuiltinEdgeData> = {
+    version: 1,
+    nodes: [
+      { id: "a", kind: "source", position: { x: 0, y: 0 }, data: {} },
+      { id: "b", kind: "sink", position: { x: 260, y: 0 }, data: {} },
+    ],
+    edges: [],
+  };
+
+  it("carries the code and a message a human can read", () => {
+    const verdict = validateConnection({
+      document: doc,
+      schema,
+      source: { node: "a", port: "out" },
+      target: { node: "b", port: "in" },
+    });
+    expect(verdict.ok).toBe(false);
+    if (verdict.ok) return;
+    expect(verdict.code).toBe("data-type-mismatch");
+    expect(verdict.message).toBe("a number output does not fit a string input");
+  });
+
+  it("refuses the reverse direction with its own code", () => {
+    const verdict = validateConnection({
+      document: doc,
+      schema,
+      source: { node: "b", port: "in" },
+      target: { node: "a", port: "out" },
+    });
+    expect(verdict).toEqual(expect.objectContaining({ ok: false, code: "wrong-direction" }));
+  });
+});

package/src/edges/edgeStyle.ts

@@ -0,0 +1,124 @@
+/**
+ * How an edge paints, design §4.4 and §11.
+ *
+ * Pure: knob names in, a style out. No React, no `@xyflow`, no DOM — so the
+ * table can be asserted without mounting anything, which is what makes
+ * `edgeStyle.spec.ts` a cheap test rather than a render.
+ *
+ * Stroke width is NOT per kind (design §4.4's last line): it comes from the
+ * `borderWidth` knob, so one flip moves every edge on the canvas. Task 1.7's
+ * `theme/graphVars.ts` reads `edgeStrokeWidth` from here rather than repeating
+ * the ladder — §11's borderWidth row cites that file, and one ladder in two
+ * places is one ladder that can drift.
+ */
+
+import type { Animation, BorderWidth } from "@multiplatform.one/theme";
+import type { BuiltinEdgeKind } from "./edgeKinds";
+
+export type EdgePathKind = "bezier" | "smoothstep" | "step" | "straight";
+export type EdgeMarker = "arrow" | "arrowclosed";
+
+export interface EdgeAppearance {
+  readonly path: EdgePathKind;
+  /** A token expression. A hex literal here fails `edgeStyle.spec.ts`. */
+  readonly stroke: string;
+  /** SVG `stroke-dasharray`. Absent means a solid line. */
+  readonly dash?: string;
+  readonly marker: EdgeMarker;
+}
+
+/** Design §4.4's table, verbatim. */
+export const edgeAppearances: Readonly<Record<BuiltinEdgeKind, EdgeAppearance>> = {
+  flow: { path: "smoothstep", stroke: "$color9", marker: "arrowclosed" },
+  data: { path: "bezier", stroke: "$color8", marker: "arrow" },
+  error: { path: "smoothstep", stroke: "$red9", dash: "6 4", marker: "arrowclosed" },
+  conditional: { path: "step", stroke: "$color8", dash: "2 4", marker: "arrow" },
+};
+
+/**
+ * §11: an edge is a stroke, not a border, and a 0-width edge erases the graph's
+ * primary information. The theme's own `borderWidthMap` is 0 / 0.5 / 1 / 2
+ * (`public/theme/src/theme/resolveKnobs.ts:90`), so this is a remap, and
+ * deliberately not a floor to `hairlineWidth` — that token is dividers-only by
+ * its own header, and a stroke that stays legible while the canvas zooms out is
+ * not a divider.
+ */
+export const edgeStrokeWidths: Readonly<Record<BorderWidth, number>> = {
+  none: 1,
+  small: 1.5,
+  medium: 2,
+  large: 3,
+};
+
+export function edgeStrokeWidth(borderWidth: BorderWidth): number {
+  return edgeStrokeWidths[borderWidth];
+}
+
+/** The keyframes live in `css/graph.css`, which lands with task 1.7. */
+export const dashAnimation = "mp-graph-dash 0.5s linear infinite";
+
+function isBuiltin(name: string): name is BuiltinEdgeKind {
+  return name in edgeAppearances;
+}
+
+/**
+ * The marker goes on the EDGE OBJECT, not on the rendered path.
+ *
+ * React Flow builds its `<marker>` defs from the edges array and hands the
+ * component an already-resolved `url(#...)` string, so `BaseEdge`'s `markerEnd`
+ * is a string and cannot take a type. Measured against
+ * `@xyflow/react` 12.11.5's `BaseEdgeProps`. So whoever BUILDS the edges — the
+ * controller in task 1.11, or a story — reads the marker from here.
+ */
+export function edgeMarkerEnd(input: { readonly kind: string; readonly appearance?: string }): {
+  readonly type: EdgeMarker;
+} {
+  const named = input.appearance ?? input.kind;
+  return { type: edgeAppearances[isBuiltin(named) ? named : "flow"].marker };
+}
+
+export interface EdgeStyleInput {
+  /** `edge.kind` from the model, not React Flow's `edge.type`. */
+  readonly kind: string;
+  /** `EdgeKindSpec.appearance`, when the kind is not one of the four. */
+  readonly appearance?: string;
+  readonly borderWidth: BorderWidth;
+  readonly animation: Animation;
+}
+
+/**
+ * `"$color9"` -> `"color9"`. The theme key, so a renderer can look the token up
+ * without the appearance table ever holding a resolved colour — which is what
+ * keeps `edgeStyle.spec.ts`'s hex ban meaningful.
+ */
+export function themeTokenName(stroke: string): string {
+  return stroke.startsWith("$") ? stroke.slice(1) : stroke;
+}
+
+export interface EdgeStyle {
+  readonly path: EdgePathKind;
+  readonly stroke: string;
+  readonly strokeWidth: number;
+  readonly strokeDasharray?: string;
+  readonly marker: EdgeMarker;
+  /** A CSS `animation` shorthand. `"none"` when the knob says so. */
+  readonly animation: string;
+}
+
+export function resolveEdgeStyle(input: EdgeStyleInput): EdgeStyle {
+  const named = input.appearance ?? input.kind;
+  // An edge that does not paint is worse than one that paints plainly, so an
+  // unknown kind reads as `flow` rather than disappearing.
+  const appearance = edgeAppearances[isBuiltin(named) ? named : "flow"];
+  return {
+    path: appearance.path,
+    stroke: appearance.stroke,
+    strokeWidth: edgeStrokeWidth(input.borderWidth),
+    strokeDasharray: appearance.dash,
+    marker: appearance.marker,
+    // Stopping the march is not the same as erasing the dashes: the PATTERN is
+    // how a reader tells an error edge from a flow edge, so it survives
+    // `animation: "none"` and a reduced-motion user keeps the channel.
+    animation: appearance.dash !== undefined && input.animation !== "none" ? dashAnimation : "none",
+  };
+}

package/src/index.native.ts

@@ -0,0 +1,147 @@
+/**
+ * Native barrel.
+ *
+ * Deliberately NOT a mirror of `index.ts`. What a native consumer gets is the
+ * host, the fallback and the bridge types — the canvas itself lives inside the
+ * WebView and exporting it here would let a consumer mount React Flow on the
+ * Hermes side, where it cannot run.
+ *
+ * The model half stays on its own condition
+ * (`@multiplatform.one/node-graph/model`) on both platforms, so a screen that
+ * only needs the document shape does not pull in a WebView.
+ *
+ * Only `.native.*` twins exist in this package — never a `.web.*` twin (MPO-192).
+ */
+
+export { NodeGraph } from "./NodeGraph.native";
+export type { NodeGraphProps } from "./NodeGraph.native";
+export { demoControlSchemaId, demoGraphSchemaId } from "./react-flow/fixtures";
+export { NodeGraphNative, readyTimeoutMs } from "./native/NodeGraph.native";
+export type { NodeGraphNativeProps } from "./native/NodeGraph.native";
+export { GraphFallback, graphFallbackDetail } from "./native/GraphFallback.native";
+/**
+ * The toolbar is plain Tamagui and lives on the Hermes side, above the WebView
+ * (design §7.3, §7.6). `useLassoSelect` is deliberately NOT here: it imports
+ * `SelectionMode` from the `@xyflow` boundary, and dragging React Flow onto
+ * Hermes to read one enum is exactly what this barrel exists to prevent. The
+ * mode itself is a string a shell can hold in `useState` and send across the
+ * bridge; only its TYPE crosses, and a type is erased.
+ */
+export { GraphToolbar } from "./native/GraphToolbar";
+export type { GraphToolbarProps } from "./native/GraphToolbar";
+export type { GraphInteractionMode } from "./interaction/useLassoSelect";
+/**
+ * The imperative handle a native SIBLING drives the canvas with (design §9.1).
+ *
+ * This is the milestone-6 surface: `NodeGraph` on native drops children, so a
+ * toolbar, a Tidy button and a perf readout reach the canvas through these
+ * eleven commands and read state back off the wire. Exported here because a
+ * consumer needs the TYPE to declare its ref.
+ */
+export { graphCommandNames } from "./react-flow/graphHandle";
+export type { GraphCommands, GraphCommandSlot, NodeGraphHandle } from "./react-flow/graphHandle";
+export {
+  graphChildrenWarning,
+  resetGraphChildrenWarning,
+  warnOnGraphChildren,
+} from "./native/graphChildren";
+export { DomOnlyStory, hasDomRealm } from "./native/DomOnlyStory";
+export type { DomOnlyStoryProps } from "./native/DomOnlyStory";
+
+export type { GraphFallbackProps, GraphFallbackReason } from "./native/GraphFallback.native";
+
+/**
+ * The DOM entry is NOT re-exported here.
+ *
+ * Design §9.3: the entry is app-owned, and this barrel is imported by native
+ * code. Re-exporting the package's own `'use dom'` module would put a second
+ * DOM bundle into every app that touches the barrel — one nothing renders,
+ * because `NodeGraphNative` refuses to mount an entry that has no config. It
+ * stays reachable at `@multiplatform.one/node-graph/dom` for anyone who wants
+ * to read the reference implementation.
+ *
+ * `NodeGraphDomShell` is absent for a sharper reason: its module body stamps
+ * `__mp_graph_boot` at evaluation, and evaluating it on the Hermes side would
+ * write a boot record for a WebView that does not exist. It lives at
+ * `@multiplatform.one/node-graph/dom-inner`, which only a `'use dom'` file ever
+ * imports. Only its TYPES cross to native.
+ */
+export type {
+  NodeGraphDomHandle,
+  NodeGraphDomOptions,
+  NodeGraphDomProps,
+  NodeGraphDomRealmProps,
+  NodeGraphDomShellProps,
+} from "./dom/NodeGraphDomShell";
+
+export {
+  clearNodeGraphDomEntry,
+  getNodeGraphDomEntry,
+  setNodeGraphDomEntry,
+} from "./native/domEntryRegistry";
+export type { NodeGraphDomEntry } from "./native/domEntryRegistry";
+
+export {
+  bootStageIndex,
+  bootStages,
+  graphReadySettleMs,
+  readBootElapsedMs,
+  readBootRecord,
+  readBootStage,
+  resetBoot,
+  stampBootStage,
+} from "./dom/boot";
+export type { BootRecord, BootStage } from "./dom/boot";
+
+/**
+ * The `ready` payload as design 9.5's record, and the panel that renders it.
+ *
+ * Both are on the NATIVE barrel because native is where they are needed: the
+ * canvas is inside a WebView, so `onReady` is the only way its diagnostics
+ * reach a screen. `LiveGraphDiagnostics` is the story-shaped version of that.
+ */
+export { GraphBootFailure, GraphDiagnostics } from "./diagnostics/GraphDiagnostics";
+export type { GraphDiagnosticsProps } from "./diagnostics/GraphDiagnostics";
+export { graphDiagnosticsFromWire } from "./diagnostics/fromWire";
+export type {
+  GraphDiagnostics as GraphDiagnosticsRecord,
+  GraphFaceDelivery,
+  GraphRenderer,
+  LayoutRunnerKind,
+} from "./diagnostics/types";
+
+export {
+  createGraphEventEmitter,
+  createRevEchoGate,
+  decodeGraphEvent,
+  encodeGraphEvent,
+  graphEventEmission,
+  graphEventKinds,
+  isBenignCanvasError,
+  isGraphEventKind,
+} from "./dom/wire";
+export type {
+  FaceProbeWire,
+  FontFaceWire,
+  GraphDiagnosticsWire,
+  GraphFaceDeliveryWire,
+  GraphErrorPhase,
+  GraphEventEmitter,
+  GraphEventKind,
+  GraphEventThrottle,
+  GraphEventWire,
+  LassoPhaseWire,
+  PerfReportWire,
+  RevEchoGate,
+} from "./dom/wire";
+
+export { KnobEnvelopeProvider } from "./knobs/KnobEnvelopeProvider";
+export { resolveEnvelopeThemeName } from "./knobs/KnobEnvelopeProvider";
+export {
+  knobEnvelopeIdentity,
+  knobEnvelopeSchemaVersion,
+  knobsForEnvelope,
+} from "./knobs/envelope";
+export type { GraphFontRef, KnobEnvelope } from "./knobs/envelope";
+export { useKnobEnvelope } from "./knobs/useKnobEnvelope";
+export type { UseKnobEnvelopeOptions } from "./knobs/useKnobEnvelope";