@hlang-tech/editor-ui 0.0.0-stage → 0.1.1

package/lib/index.mjs

@@ -0,0 +1,2318 @@
+// src/tokens/tokens.ts
+var TOKEN_NAMES = [
+  "hl-void",
+  "hl-void-2",
+  "hl-surface",
+  "hl-surface-2",
+  "hl-line",
+  "hl-line-strong",
+  "hl-silver",
+  "hl-silver-hi",
+  "hl-silver-lo",
+  "hl-spark",
+  "hl-r",
+  "hl-t",
+  "hl-w",
+  "hl-error",
+  "hl-ink",
+  "hl-ink-2",
+  "hl-ink-3",
+  "hl-font-ui",
+  "hl-font-mono",
+  "hl-r-sm",
+  "hl-r-md",
+  "hl-r-lg",
+  "hl-r-pill",
+  "hl-shadow-node",
+  "hl-shadow-glass",
+  "hl-glow-silver",
+  "hl-ease"
+];
+function tokenVar(name) {
+  return `var(--${name})`;
+}
+var KIND_TOKEN = {
+  R: "var(--hl-r)",
+  T: "var(--hl-t)",
+  W: "var(--hl-w)"
+};
+var KIND_ROLE = {
+  R: "source",
+  T: "transform",
+  W: "sink"
+};
+
+// src/tokens/theme.ts
+function createTheme(overrides) {
+  const style = {};
+  for (const [name, value] of Object.entries(overrides)) {
+    if (value !== void 0) {
+      style[`--${name}`] = value;
+    }
+  }
+  return style;
+}
+
+// src/tokens/ThemeProvider.tsx
+import { jsx } from "react/jsx-runtime";
+function EditorUIThemeProvider({
+  theme,
+  className,
+  style,
+  children
+}) {
+  const themeStyle = theme ? createTheme(theme) : void 0;
+  return /* @__PURE__ */ jsx("div", { className, style: { ...themeStyle, ...style }, children });
+}
+
+// src/nodes/SignalBar.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function SignalBar() {
+  return /* @__PURE__ */ jsx2("div", { className: "hl-signal", "aria-hidden": "true" });
+}
+
+// src/nodes/PortRow.tsx
+import { Handle, Position } from "@xyflow/react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function PortRow({ port }) {
+  const isInput = port.direction === "I";
+  const side = isInput ? "target" : "source";
+  const isLive = port.stream !== "value";
+  const rowClass = `hl-port${port.isError ? " is-error" : ""}`;
+  const handleClass = `hl-handle${isLive ? " is-live" : ""}`;
+  return /* @__PURE__ */ jsxs("li", { className: rowClass, children: [
+    /* @__PURE__ */ jsx3(
+      Handle,
+      {
+        type: side,
+        position: isInput ? Position.Left : Position.Right,
+        id: port.id,
+        className: handleClass,
+        isConnectable: true
+      }
+    ),
+    /* @__PURE__ */ jsx3("span", { className: "hl-port-label", children: port.isError ? "error" : port.name })
+  ] });
+}
+
+// src/nodes/NodeBodySlot.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function NodeBodySlot({ children }) {
+  if (children === void 0 || children === null || children === false) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx4("div", { className: "hl-body", children });
+}
+
+// src/live/LiveSignalContext.tsx
+import { createContext, useContext, useMemo, useSyncExternalStore } from "react";
+
+// src/live/live-signal-store.ts
+var ACTIVE_WINDOW_MS = 700;
+function portKey(nodeId, portId) {
+  return `${nodeId}@${portId}`;
+}
+var defaultDeps = {
+  now: () => typeof performance !== "undefined" ? performance.now() : Date.now(),
+  schedule: (cb) => typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame(cb) : (
+    // `window.setTimeout` returns a numeric handle (the DOM overload),
+    // unlike the Node overload's `Timeout` object — this store deals in
+    // numeric handles because it runs in the browser.
+    window.setTimeout(cb, 16)
+  ),
+  cancel: (h) => typeof cancelAnimationFrame !== "undefined" ? cancelAnimationFrame(h) : window.clearTimeout(h)
+};
+var LiveSignalStore = class {
+  constructor(deps = defaultDeps) {
+    /** nodeId -> last-active timestamp. */
+    this.nodeActiveAt = /* @__PURE__ */ new Map();
+    /** nodeId set that errored during this run. */
+    this.erroredNodes = /* @__PURE__ */ new Set();
+    /** edgeId -> last-flowing timestamp. */
+    this.edgeFlowAt = /* @__PURE__ */ new Map();
+    /** Per-id listeners. */
+    this.nodeListeners = /* @__PURE__ */ new Map();
+    this.edgeListeners = /* @__PURE__ */ new Map();
+    /** Snapshot of last-emitted state per id, so we only notify on real change. */
+    this.lastNodeState = /* @__PURE__ */ new Map();
+    this.lastEdgeFlowing = /* @__PURE__ */ new Map();
+    /** Edges sourced by a given (nodeId@portId), for pulse -> edge mapping. */
+    this.edgesBySourcePort = /* @__PURE__ */ new Map();
+    this.rafHandle = null;
+    this.running = false;
+    this.deps = deps;
+  }
+  /** Provide the current edge index (call whenever edges change). */
+  setEdgeIndex(edges) {
+    const next = /* @__PURE__ */ new Map();
+    for (const edge of edges) {
+      const key = portKey(edge.sourceNodeId, edge.sourcePortId);
+      const list = next.get(key);
+      if (list === void 0) {
+        next.set(key, [edge]);
+      } else {
+        list.push(edge);
+      }
+    }
+    this.edgesBySourcePort = next;
+  }
+  /** Record a node emitting on an output port (drives node + edge activity). */
+  markActivity(nodeId, portId) {
+    const t = this.deps.now();
+    this.nodeActiveAt.set(nodeId, t);
+    const edges = this.edgesBySourcePort.get(portKey(nodeId, portId));
+    if (edges !== void 0) {
+      for (const edge of edges) {
+        this.edgeFlowAt.set(edge.id, t);
+      }
+    }
+    this.ensureLoop();
+  }
+  /** Record a node erroring (sticky for the run). */
+  markError(nodeId) {
+    this.erroredNodes.add(nodeId);
+    this.ensureLoop();
+  }
+  /** Clear all live state (on stop/teardown) and notify everyone. */
+  reset() {
+    this.nodeActiveAt.clear();
+    this.erroredNodes.clear();
+    this.edgeFlowAt.clear();
+    this.stopLoop();
+    this.flushNotifications();
+  }
+  /** Subscribe to a single node's live state. */
+  subscribeNode(nodeId, listener) {
+    return this.subscribe(this.nodeListeners, nodeId, listener);
+  }
+  /** Subscribe to a single edge's flowing state. */
+  subscribeEdge(edgeId, listener) {
+    return this.subscribe(this.edgeListeners, edgeId, listener);
+  }
+  /** Current live state of a node. */
+  getNodeState(nodeId) {
+    if (this.erroredNodes.has(nodeId)) {
+      return "error";
+    }
+    const at = this.nodeActiveAt.get(nodeId);
+    if (at !== void 0 && this.deps.now() - at <= ACTIVE_WINDOW_MS) {
+      return "active";
+    }
+    return "idle";
+  }
+  /** Whether an edge is currently flowing. */
+  isEdgeFlowing(edgeId) {
+    const at = this.edgeFlowAt.get(edgeId);
+    return at !== void 0 && this.deps.now() - at <= ACTIVE_WINDOW_MS;
+  }
+  subscribe(registry, id, listener) {
+    var _a;
+    const set = (_a = registry.get(id)) != null ? _a : /* @__PURE__ */ new Set();
+    set.add(listener);
+    registry.set(id, set);
+    return () => {
+      set.delete(listener);
+      if (set.size === 0) {
+        registry.delete(id);
+      }
+    };
+  }
+  ensureLoop() {
+    if (this.running) {
+      this.flushNotifications();
+      return;
+    }
+    this.running = true;
+    const step = () => {
+      const stillLive = this.flushNotifications();
+      if (stillLive) {
+        this.rafHandle = this.deps.schedule(step);
+      } else {
+        this.running = false;
+        this.rafHandle = null;
+      }
+    };
+    this.rafHandle = this.deps.schedule(step);
+  }
+  stopLoop() {
+    if (this.rafHandle !== null) {
+      this.deps.cancel(this.rafHandle);
+      this.rafHandle = null;
+    }
+    this.running = false;
+  }
+  /**
+   * Recompute every subscribed id's state, notify only those that changed, and
+   * report whether anything is still within its active window (so the loop can
+   * stop when the graph goes quiet).
+   */
+  flushNotifications() {
+    let anyLive = false;
+    for (const [nodeId, listeners] of this.nodeListeners) {
+      const state = this.getNodeState(nodeId);
+      if (state !== "idle") {
+        anyLive = anyLive || state === "active";
+      }
+      if (this.lastNodeState.get(nodeId) !== state) {
+        this.lastNodeState.set(nodeId, state);
+        for (const listener of listeners) {
+          listener();
+        }
+      }
+    }
+    for (const [edgeId, listeners] of this.edgeListeners) {
+      const flowing = this.isEdgeFlowing(edgeId);
+      anyLive = anyLive || flowing;
+      if (this.lastEdgeFlowing.get(edgeId) !== flowing) {
+        this.lastEdgeFlowing.set(edgeId, flowing);
+        for (const listener of listeners) {
+          listener();
+        }
+      }
+    }
+    return anyLive;
+  }
+};
+
+// src/live/LiveSignalContext.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var LiveSignalContext = createContext(null);
+function LiveSignalProvider({ store, children }) {
+  const value = useMemo(() => store != null ? store : new LiveSignalStore(), [store]);
+  return /* @__PURE__ */ jsx5(LiveSignalContext.Provider, { value, children });
+}
+function useLiveSignalStore() {
+  return useContext(LiveSignalContext);
+}
+function useNodeLiveState(nodeId) {
+  const store = useContext(LiveSignalContext);
+  return useSyncExternalStore(
+    (onChange) => store === null ? () => void 0 : store.subscribeNode(nodeId, onChange),
+    () => store === null ? "idle" : store.getNodeState(nodeId),
+    () => "idle"
+  );
+}
+function useEdgeFlowing(edgeId) {
+  const store = useContext(LiveSignalContext);
+  return useSyncExternalStore(
+    (onChange) => store === null ? () => void 0 : store.subscribeEdge(edgeId, onChange),
+    () => store === null ? false : store.isEdgeFlowing(edgeId),
+    () => false
+  );
+}
+
+// src/nodes/AssetNode.tsx
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+function stringParam(node, key) {
+  const v = node.params[key];
+  return typeof v === "string" ? v : void 0;
+}
+function AssetNodeChrome({ node, selected }) {
+  var _a, _b;
+  const imageUrl = (_a = stringParam(node, "imageUrl")) != null ? _a : "";
+  const caption = (_b = stringParam(node, "caption")) != null ? _b : node.name;
+  const role = stringParam(node, "role");
+  const live = useNodeLiveState(node.id);
+  const outputs = node.ports.filter((p) => p.direction === "O" && !p.isError);
+  const className = [
+    "hl-asset",
+    selected ? "is-selected" : "",
+    live === "active" ? "is-active" : "",
+    live === "error" ? "is-live-error" : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs2("div", { className, "data-kind": node.kind, children: [
+    /* @__PURE__ */ jsxs2("div", { className: "hl-asset-frame", children: [
+      imageUrl.length > 0 ? /* @__PURE__ */ jsx6("img", { className: "hl-asset-img", src: imageUrl, alt: caption, draggable: false }) : /* @__PURE__ */ jsx6("div", { className: "hl-asset-placeholder", "aria-hidden": true }),
+      /* @__PURE__ */ jsx6("div", { className: "hl-asset-scrim" }),
+      /* @__PURE__ */ jsxs2("div", { className: "hl-asset-caption", children: [
+        /* @__PURE__ */ jsx6("span", { className: "hl-asset-name", children: caption }),
+        role !== void 0 && /* @__PURE__ */ jsx6("span", { className: "hl-asset-role hl-mono", children: role })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx6("ul", { className: "hl-asset-ports", children: outputs.map((port) => /* @__PURE__ */ jsx6(PortRow, { port }, port.id)) })
+  ] });
+}
+
+// src/nodes/PillNode.tsx
+import { useCallback, useEffect, useRef, useState } from "react";
+
+// src/icons/node-icons.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function svg(size, children) {
+  return /* @__PURE__ */ jsx7(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.6,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children
+    }
+  );
+}
+var BY_CODE = {
+  "image-source": (s) => svg(s, [
+    /* @__PURE__ */ jsx7("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2.5" }, "r"),
+    /* @__PURE__ */ jsx7("circle", { cx: "8.5", cy: "9", r: "1.6" }, "c"),
+    /* @__PURE__ */ jsx7("path", { d: "M4 17l5-5 4 4 3-2 4 4" }, "p")
+  ]),
+  "text-source": (s) => svg(s, [/* @__PURE__ */ jsx7("path", { d: "M5 6h14M12 6v12M9 18h6" }, "p")]),
+  "interval-source": (s) => svg(s, [
+    /* @__PURE__ */ jsx7("circle", { cx: "12", cy: "12", r: "8" }, "c"),
+    /* @__PURE__ */ jsx7("path", { d: "M12 8v4l3 2" }, "h")
+  ]),
+  "range-source": (s) => svg(s, [
+    /* @__PURE__ */ jsx7("path", { d: "M4 12h16" }, "l"),
+    /* @__PURE__ */ jsx7("circle", { cx: "6", cy: "12", r: "2" }, "a"),
+    /* @__PURE__ */ jsx7("circle", { cx: "18", cy: "12", r: "2" }, "b")
+  ]),
+  "constant-source": (s) => svg(s, [/* @__PURE__ */ jsx7("path", { d: "M6 12h12M9 8l-3 4 3 4M15 8l3 4-3 4" }, "p")]),
+  "map-scale": (s) => svg(s, [
+    /* @__PURE__ */ jsx7("path", { d: "M4 20V8l8-4" }, "a"),
+    /* @__PURE__ */ jsx7("path", { d: "M4 8l8 4 8-4M12 12v8" }, "b")
+  ]),
+  uppercase: (s) => svg(s, [/* @__PURE__ */ jsx7("path", { d: "M5 18L9 6l4 12M6.5 14h5M15 10v8M15 10c3 0 3 4 0 4" }, "p")]),
+  "filter-threshold": (s) => svg(s, [/* @__PURE__ */ jsx7("path", { d: "M4 5h16l-6 7v6l-4-2v-4z" }, "p")]),
+  "scan-sum": (s) => svg(s, [/* @__PURE__ */ jsx7("path", { d: "M17 6H7l6 6-6 6h10" }, "p")]),
+  delay: (s) => svg(s, [
+    /* @__PURE__ */ jsx7("circle", { cx: "12", cy: "13", r: "7" }, "c"),
+    /* @__PURE__ */ jsx7("path", { d: "M12 10v3l2 2M9 3h6" }, "h")
+  ]),
+  merge: (s) => svg(s, [/* @__PURE__ */ jsx7("path", { d: "M6 5v4c0 3 3 3 6 3s6 0 6-3V5M12 12v7" }, "p")]),
+  "console-sink": (s) => svg(s, [
+    /* @__PURE__ */ jsx7("rect", { x: "4", y: "5", width: "16", height: "12", rx: "2" }, "r"),
+    /* @__PURE__ */ jsx7("path", { d: "M8 10l2.5 2L8 14M13 14h3" }, "p")
+  ]),
+  "collect-sink": (s) => svg(s, [
+    /* @__PURE__ */ jsx7("path", { d: "M4 7h16M4 12h16M4 17h10" }, "p")
+  ])
+};
+var BY_KIND = {
+  R: (s) => svg(s, [/* @__PURE__ */ jsx7("path", { d: "M8 5l10 7-10 7z" }, "p")]),
+  // source ▷ (play)
+  T: (s) => svg(s, [/* @__PURE__ */ jsx7("path", { d: "M4 8h6l4 8h6M14 8h6M4 16h6" }, "p")]),
+  // transform
+  W: (s) => svg(s, [
+    /* @__PURE__ */ jsx7("path", { d: "M5 4h11l3 3v13H5z" }, "p"),
+    /* @__PURE__ */ jsx7("path", { d: "M9 4v5h6" }, "q")
+  ])
+  // sink (save)
+};
+function NodeIcon({ code, kind, size = 15 }) {
+  var _a;
+  const build = (_a = BY_CODE[code]) != null ? _a : BY_KIND[kind];
+  return build(size);
+}
+function EyeIcon({ size = 14 }) {
+  return svg(size, [
+    /* @__PURE__ */ jsx7("path", { d: "M2 12s3.5-6.5 10-6.5S22 12 22 12s-3.5 6.5-10 6.5S2 12 2 12z" }, "p"),
+    /* @__PURE__ */ jsx7("circle", { cx: "12", cy: "12", r: "2.6" }, "c")
+  ]);
+}
+function EyeOffIcon({ size = 14 }) {
+  return svg(size, [
+    /* @__PURE__ */ jsx7("path", { d: "M2 12s3.5-6.5 10-6.5c1.7 0 3.2.45 4.5 1.1M22 12s-3.5 6.5-10 6.5c-1.7 0-3.2-.45-4.5-1.1" }, "p"),
+    /* @__PURE__ */ jsx7("path", { d: "M9.9 9.9a2.6 2.6 0 003.7 3.7" }, "e"),
+    /* @__PURE__ */ jsx7("path", { d: "M3 3l18 18" }, "s")
+  ]);
+}
+function UnlockIcon({ size = 14 }) {
+  return svg(size, [
+    /* @__PURE__ */ jsx7("rect", { x: "5", y: "11", width: "14", height: "9", rx: "2" }, "r"),
+    /* @__PURE__ */ jsx7("path", { d: "M8 11V7a4 4 0 017.9-1" }, "s")
+  ]);
+}
+function LockIcon({ size = 14 }) {
+  return svg(size, [
+    /* @__PURE__ */ jsx7("rect", { x: "5", y: "11", width: "14", height: "9", rx: "2" }, "r"),
+    /* @__PURE__ */ jsx7("path", { d: "M8 11V7a4 4 0 018 0v4" }, "s")
+  ]);
+}
+function WarningIcon({ size = 13 }) {
+  return svg(size, [
+    /* @__PURE__ */ jsx7("path", { d: "M12 4l9 15H3z" }, "t"),
+    /* @__PURE__ */ jsx7("path", { d: "M12 10v4" }, "b"),
+    /* @__PURE__ */ jsx7("path", { d: "M12 17v.5" }, "d")
+  ]);
+}
+function ErrorIcon({ size = 13 }) {
+  return svg(size, [
+    /* @__PURE__ */ jsx7("circle", { cx: "12", cy: "12", r: "9" }, "c"),
+    /* @__PURE__ */ jsx7("path", { d: "M12 7v6" }, "b"),
+    /* @__PURE__ */ jsx7("path", { d: "M12 16v.5" }, "d")
+  ]);
+}
+
+// src/panels/DiagnosticBadge.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function DiagnosticBadge({ diagnostic, variant, size = 12 }) {
+  return /* @__PURE__ */ jsx8(
+    "span",
+    {
+      className: `${variant} hl-diag-${diagnostic.severity}`,
+      title: diagnostic.message,
+      "aria-label": `${diagnostic.severity}: ${diagnostic.message}`,
+      children: diagnostic.severity === "error" ? /* @__PURE__ */ jsx8(ErrorIcon, { size }) : /* @__PURE__ */ jsx8(WarningIcon, { size })
+    }
+  );
+}
+
+// src/nodes/NodeInteractionContext.tsx
+import { createContext as createContext2, useContext as useContext2 } from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var NoopInteraction = {
+  diagnosticFor: () => void 0,
+  rename: () => void 0
+};
+var NodeInteractionCtx = createContext2(NoopInteraction);
+function NodeInteractionProvider({
+  value,
+  children
+}) {
+  return /* @__PURE__ */ jsx9(NodeInteractionCtx.Provider, { value, children });
+}
+function useNodeInteraction() {
+  return useContext2(NodeInteractionCtx);
+}
+
+// src/nodes/PillNode.tsx
+import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
+var DOUBLE_CLICK_MS = 320;
+function PillNodeChrome({ node, selected }) {
+  const live = useNodeLiveState(node.id);
+  const interaction = useNodeInteraction();
+  const diagnostic = interaction.diagnosticFor(node.id);
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(node.name);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (editing) {
+      setDraft(node.name);
+      requestAnimationFrame(() => {
+        var _a;
+        return (_a = inputRef.current) == null ? void 0 : _a.select();
+      });
+    }
+  }, [editing, node.name]);
+  const commit = useCallback(() => {
+    setEditing(false);
+    interaction.rename(node.id, draft);
+  }, [interaction, node.id, draft]);
+  const onKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        commit();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        setEditing(false);
+      }
+    },
+    [commit]
+  );
+  const lastClick = useRef(0);
+  const onNameClick = useCallback(() => {
+    const now = performance.now();
+    if (now - lastClick.current < DOUBLE_CLICK_MS) {
+      setEditing(true);
+      lastClick.current = 0;
+    } else {
+      lastClick.current = now;
+    }
+  }, []);
+  const inputs = node.ports.filter((p) => p.direction === "I" && !p.isError);
+  const outputs = node.ports.filter((p) => p.direction === "O" && !p.isError);
+  const className = [
+    "hl-pill",
+    `hl-pill-${node.kind.toLowerCase()}`,
+    selected ? "is-selected" : "",
+    live === "active" ? "is-active" : "",
+    live === "error" ? "is-live-error" : "",
+    (diagnostic == null ? void 0 : diagnostic.severity) === "error" ? "has-diag-error" : "",
+    (diagnostic == null ? void 0 : diagnostic.severity) === "warning" ? "has-diag-warning" : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs3("div", { className, "data-kind": node.kind, children: [
+    /* @__PURE__ */ jsx10("span", { className: "hl-pill-dot", "aria-hidden": true, children: /* @__PURE__ */ jsx10(NodeIcon, { code: node.code, kind: node.kind, size: 13 }) }),
+    editing ? /* @__PURE__ */ jsx10(
+      "input",
+      {
+        ref: inputRef,
+        className: "hl-pill-rename nodrag",
+        value: draft,
+        onChange: (e) => setDraft(e.target.value),
+        onKeyDown,
+        onBlur: commit,
+        spellCheck: false,
+        "aria-label": "Rename node"
+      }
+    ) : /* @__PURE__ */ jsx10(
+      "span",
+      {
+        className: "hl-pill-name nodrag",
+        onClick: (e) => {
+          e.stopPropagation();
+          onNameClick();
+        },
+        title: "Double-click to rename",
+        children: node.name
+      }
+    ),
+    diagnostic !== void 0 && /* @__PURE__ */ jsx10(DiagnosticBadge, { diagnostic, variant: "hl-pill-diag", size: 12 }),
+    /* @__PURE__ */ jsx10("span", { className: "hl-pill-status", "aria-hidden": true }),
+    /* @__PURE__ */ jsx10("ul", { className: "hl-pill-ports hl-in", children: inputs.map((port) => /* @__PURE__ */ jsx10(PortRow, { port }, port.id)) }),
+    /* @__PURE__ */ jsx10("ul", { className: "hl-pill-ports hl-out", children: outputs.map((port) => /* @__PURE__ */ jsx10(PortRow, { port }, port.id)) })
+  ] });
+}
+
+// src/nodes/HlangNode.tsx
+import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+function NodeChrome({ node, selected, body }) {
+  const inputs = node.ports.filter((p) => p.direction === "I");
+  const outputs = node.ports.filter((p) => p.direction === "O");
+  const live = useNodeLiveState(node.id);
+  const className = [
+    "hl-node",
+    `hl-${node.kind.toLowerCase()}`,
+    selected ? "is-selected" : "",
+    live === "active" ? "is-active" : "",
+    live === "error" ? "is-live-error" : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs4("div", { className, "data-kind": node.kind, children: [
+    /* @__PURE__ */ jsx11(SignalBar, {}),
+    /* @__PURE__ */ jsxs4("header", { className: "hl-head", children: [
+      /* @__PURE__ */ jsx11("span", { className: "hl-kind", children: node.kind }),
+      /* @__PURE__ */ jsx11("span", { className: "hl-name", children: node.name }),
+      /* @__PURE__ */ jsx11("span", { className: "hl-role", children: KIND_ROLE[node.kind] })
+    ] }),
+    /* @__PURE__ */ jsx11(NodeBodySlot, { node, children: body }),
+    /* @__PURE__ */ jsxs4("div", { className: "hl-ports", children: [
+      /* @__PURE__ */ jsx11("ul", { className: "hl-col hl-in", children: inputs.map((port) => /* @__PURE__ */ jsx11(PortRow, { port }, port.id)) }),
+      /* @__PURE__ */ jsx11("ul", { className: "hl-col hl-out", children: outputs.map((port) => /* @__PURE__ */ jsx11(PortRow, { port }, port.id)) })
+    ] })
+  ] });
+}
+function HlangNode({ data, selected }) {
+  const node = data.editorNode;
+  if (typeof node.params.imageUrl === "string" && node.params.imageUrl.length > 0) {
+    return /* @__PURE__ */ jsx11(AssetNodeChrome, { node, selected });
+  }
+  return /* @__PURE__ */ jsx11(PillNodeChrome, { node, selected });
+}
+
+// src/edges/FlowEdge.tsx
+import { BaseEdge, EdgeLabelRenderer, getBezierPath, useInternalNode } from "@xyflow/react";
+import { Fragment, jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+function useSourceRole(sourceId) {
+  var _a, _b;
+  const node = useInternalNode(sourceId);
+  const editorNode = (_a = node == null ? void 0 : node.data) == null ? void 0 : _a.editorNode;
+  const role = (_b = editorNode == null ? void 0 : editorNode.params) == null ? void 0 : _b.role;
+  return typeof role === "string" && role.length > 0 ? role : void 0;
+}
+function FlowEdge(props) {
+  var _a;
+  const { id, source, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data } = props;
+  const [path] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition
+  });
+  const t = 0.62;
+  const labelX = sourceX + (targetX - sourceX) * t;
+  const labelY = sourceY + (targetY - sourceY) * t;
+  const isError = (_a = data == null ? void 0 : data.isError) != null ? _a : false;
+  const isValue = (data == null ? void 0 : data.stream) === "value";
+  const flowing = useEdgeFlowing(id);
+  const role = useSourceRole(source);
+  const className = [
+    "hl-edge",
+    isError ? "is-error" : "",
+    isValue ? "is-value" : "is-live",
+    flowing ? "is-flowing" : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs5(Fragment, { children: [
+    /* @__PURE__ */ jsxs5("g", { className, children: [
+      /* @__PURE__ */ jsx12(BaseEdge, { id, path, className: "hl-edge-base" }),
+      /* @__PURE__ */ jsx12("path", { d: path, className: "hl-edge-flow" })
+    ] }),
+    role !== void 0 && /* @__PURE__ */ jsx12(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx12(
+      "div",
+      {
+        className: "hl-edge-label hl-mono",
+        style: { transform: `translate(-50%, -50%) translate(${String(labelX)}px, ${String(labelY)}px)` },
+        children: role
+      }
+    ) })
+  ] });
+}
+
+// src/nodes/flow-types.ts
+var nodeComponent = HlangNode;
+var edgeComponent = FlowEdge;
+function createHlangFlowTypes() {
+  return {
+    nodeTypes: { R: nodeComponent, T: nodeComponent, W: nodeComponent },
+    edgeTypes: { default: edgeComponent }
+  };
+}
+
+// src/shell/EditorShell.tsx
+import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+function EditorShell({
+  toolbar,
+  left,
+  right,
+  canvas,
+  footer,
+  leftCollapsed = false,
+  rightCollapsed = false
+}) {
+  const className = [
+    "hl-shell",
+    leftCollapsed ? "hl-left-collapsed" : "",
+    rightCollapsed ? "hl-right-collapsed" : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs6("div", { className, children: [
+    toolbar !== void 0 && /* @__PURE__ */ jsx13("div", { className: "hl-region-toolbar", children: toolbar }),
+    /* @__PURE__ */ jsxs6("div", { className: "hl-region-body", children: [
+      left !== void 0 && !leftCollapsed && /* @__PURE__ */ jsx13("aside", { className: "hl-region-left", children: left }),
+      /* @__PURE__ */ jsx13("main", { className: "hl-region-canvas", children: canvas }),
+      right !== void 0 && !rightCollapsed && /* @__PURE__ */ jsx13("aside", { className: "hl-region-right", children: right })
+    ] }),
+    footer !== void 0 && /* @__PURE__ */ jsx13("div", { className: "hl-region-footer", children: footer })
+  ] });
+}
+
+// src/toolbar/Toolbar.tsx
+import { useHistory } from "@hlang-tech/editor-react";
+import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+function Toolbar({ title, center, actions }) {
+  return /* @__PURE__ */ jsxs7("header", { className: "hl-toolbar", children: [
+    /* @__PURE__ */ jsx14("div", { className: "hl-toolbar-brand", children: title != null ? title : /* @__PURE__ */ jsxs7(Fragment2, { children: [
+      /* @__PURE__ */ jsx14("span", { className: "hl-toolbar-glyph", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx14("span", { className: "hl-toolbar-wordmark", children: "hlang" })
+    ] }) }),
+    center !== void 0 && /* @__PURE__ */ jsx14("div", { className: "hl-toolbar-center", children: center }),
+    /* @__PURE__ */ jsx14("div", { className: "hl-toolbar-actions", children: actions })
+  ] });
+}
+function UndoRedo({ core }) {
+  const history = useHistory(core);
+  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+    /* @__PURE__ */ jsx14(
+      "button",
+      {
+        type: "button",
+        className: "hl-toolbar-btn",
+        onClick: () => history.undo(),
+        disabled: !history.canUndo,
+        title: "Undo (\u2318Z)",
+        children: "Undo"
+      }
+    ),
+    /* @__PURE__ */ jsx14(
+      "button",
+      {
+        type: "button",
+        className: "hl-toolbar-btn",
+        onClick: () => history.redo(),
+        disabled: !history.canRedo,
+        title: "Redo (\u2318\u21E7Z)",
+        children: "Redo"
+      }
+    )
+  ] });
+}
+function RunButton({
+  onRun,
+  running = false,
+  runLabel = "Run",
+  stopLabel = "Stop"
+}) {
+  return /* @__PURE__ */ jsxs7(
+    "button",
+    {
+      type: "button",
+      className: `hl-toolbar-btn hl-toolbar-run${running ? " is-running" : ""}`,
+      onClick: onRun,
+      "aria-pressed": running,
+      children: [
+        /* @__PURE__ */ jsx14(
+          "span",
+          {
+            className: `hl-toolbar-run-icon${running ? " is-stop" : ""}`,
+            "aria-hidden": "true"
+          }
+        ),
+        running ? stopLabel : runLabel
+      ]
+    }
+  );
+}
+function ToolbarStat({ label, value }) {
+  return /* @__PURE__ */ jsx14("span", { className: "hl-toolbar-stat hl-mono", title: label, children: value });
+}
+function ToolbarGhostButton({
+  children,
+  onClick,
+  title
+}) {
+  return /* @__PURE__ */ jsx14("button", { type: "button", className: "hl-toolbar-btn", onClick, title, children });
+}
+
+// src/toolbar/ToolCluster.tsx
+import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+function ToolCluster({ items }) {
+  return /* @__PURE__ */ jsx15("div", { className: "hl-toolcluster", role: "toolbar", "aria-label": "Canvas tools", children: items.map((item) => /* @__PURE__ */ jsxs8("span", { className: "hl-toolcluster-slot", children: [
+    item.separatorBefore === true && /* @__PURE__ */ jsx15("span", { className: "hl-toolcluster-sep", "aria-hidden": true }),
+    /* @__PURE__ */ jsx15(
+      "button",
+      {
+        type: "button",
+        className: "hl-toolcluster-btn" + (item.active === true ? " is-active" : ""),
+        onClick: item.onClick,
+        disabled: item.disabled,
+        title: item.title,
+        "aria-label": item.title,
+        "aria-pressed": item.active,
+        children: item.icon
+      }
+    )
+  ] }, item.id)) });
+}
+
+// src/canvas/CanvasChrome.tsx
+import { Background, BackgroundVariant } from "@xyflow/react";
+import { Fragment as Fragment3, jsx as jsx16 } from "react/jsx-runtime";
+function CanvasChrome({ background = true }) {
+  return /* @__PURE__ */ jsx16(Fragment3, { children: background && /* @__PURE__ */ jsx16(Background, { variant: BackgroundVariant.Dots, gap: 26, size: 1, color: "#242830" }) });
+}
+
+// src/canvas/CanvasDock.tsx
+import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+function CursorIcon() {
+  return /* @__PURE__ */ jsx17("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx17("path", { d: "M5 3l6 16 2-6 6-2z" }) });
+}
+function HandIcon() {
+  return /* @__PURE__ */ jsx17("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx17("path", { d: "M8 12V6a1.5 1.5 0 013 0v5m0-1V5a1.5 1.5 0 013 0v6m0-1V6.5a1.5 1.5 0 013 0V13c0 3.5-2 6-5.5 6H12c-2 0-3-.8-4.2-2.5L5 12.5c-.7-1 .6-2.3 1.6-1.6z" }) });
+}
+function PlusIcon() {
+  return /* @__PURE__ */ jsx17("svg", { width: 17, height: 17, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.7, strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx17("path", { d: "M12 5v14M5 12h14" }) });
+}
+function FitIcon() {
+  return /* @__PURE__ */ jsx17("svg", { width: 15, height: 15, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx17("path", { d: "M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5" }) });
+}
+function UndoIcon() {
+  return /* @__PURE__ */ jsx17("svg", { width: 15, height: 15, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx17("path", { d: "M9 7L4 12l5 5M4 12h11a5 5 0 010 10h-1" }) });
+}
+function RedoIcon() {
+  return /* @__PURE__ */ jsx17("svg", { width: 15, height: 15, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx17("path", { d: "M15 7l5 5-5 5M20 12H9a5 5 0 000 10h1" }) });
+}
+function CanvasDock({
+  zoom,
+  onZoomIn,
+  onZoomOut,
+  onFitView,
+  onAdd,
+  mode,
+  onModeChange,
+  onUndo,
+  onRedo,
+  canUndo,
+  canRedo
+}) {
+  const pct = `${String(Math.round(zoom * 100))}%`;
+  return /* @__PURE__ */ jsxs9("div", { className: "hl-dock", role: "toolbar", "aria-label": "Canvas tools", children: [
+    /* @__PURE__ */ jsx17(
+      "button",
+      {
+        className: "hl-dock-btn",
+        onClick: onUndo,
+        disabled: !canUndo,
+        title: "Undo (\u2318Z)",
+        "aria-label": "Undo",
+        children: /* @__PURE__ */ jsx17(UndoIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsx17(
+      "button",
+      {
+        className: "hl-dock-btn",
+        onClick: onRedo,
+        disabled: !canRedo,
+        title: "Redo (\u2318\u21E7Z)",
+        "aria-label": "Redo",
+        children: /* @__PURE__ */ jsx17(RedoIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsx17("span", { className: "hl-dock-sep", "aria-hidden": true }),
+    /* @__PURE__ */ jsx17(
+      "button",
+      {
+        className: "hl-dock-btn" + (mode === "select" ? " is-active" : ""),
+        onClick: () => onModeChange("select"),
+        title: "Select (V)",
+        "aria-pressed": mode === "select",
+        children: /* @__PURE__ */ jsx17(CursorIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsx17(
+      "button",
+      {
+        className: "hl-dock-btn" + (mode === "pan" ? " is-active" : ""),
+        onClick: () => onModeChange("pan"),
+        title: "Pan (Space)",
+        "aria-pressed": mode === "pan",
+        children: /* @__PURE__ */ jsx17(HandIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsx17("button", { className: "hl-dock-btn hl-dock-add", onClick: onAdd, title: "Add node", children: /* @__PURE__ */ jsx17(PlusIcon, {}) }),
+    /* @__PURE__ */ jsx17("span", { className: "hl-dock-sep", "aria-hidden": true }),
+    /* @__PURE__ */ jsx17("button", { className: "hl-dock-btn", onClick: onZoomOut, title: "Zoom out", "aria-label": "Zoom out", children: /* @__PURE__ */ jsx17("span", { className: "hl-dock-glyph", children: "\u2212" }) }),
+    /* @__PURE__ */ jsx17("button", { className: "hl-dock-zoom hl-mono", onClick: onFitView, title: "Fit view", children: pct }),
+    /* @__PURE__ */ jsx17("button", { className: "hl-dock-btn", onClick: onZoomIn, title: "Zoom in", "aria-label": "Zoom in", children: /* @__PURE__ */ jsx17("span", { className: "hl-dock-glyph", children: "+" }) }),
+    /* @__PURE__ */ jsx17("button", { className: "hl-dock-btn", onClick: onFitView, title: "Fit view", "aria-label": "Fit view", children: /* @__PURE__ */ jsx17(FitIcon, {}) })
+  ] });
+}
+
+// src/canvas/EmptyState.tsx
+import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+function EmptyState({
+  title = "An empty canvas.",
+  hint = "add a source \xB7 wire it to a sink \xB7 run"
+}) {
+  return /* @__PURE__ */ jsxs10("div", { className: "hl-empty", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx18("p", { className: "hl-empty-title", children: title }),
+    /* @__PURE__ */ jsx18("p", { className: "hl-empty-hint", children: hint })
+  ] });
+}
+
+// src/panels/InspectorPanel.tsx
+import { useSelection } from "@hlang-tech/editor-react";
+
+// src/schema/param-field.ts
+function humanizeKey(key) {
+  const spaced = key.replace(/[_-]+/g, " ").replace(/([a-z0-9])([A-Z])/g, "$1 $2").trim();
+  return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+}
+function fieldFor(key, value) {
+  const label = humanizeKey(key);
+  if (typeof value === "boolean") {
+    return { key, label, type: "toggle", value };
+  }
+  if (typeof value === "number") {
+    return { key, label, type: "number", value };
+  }
+  if (typeof value === "string") {
+    const type = value.includes("\n") ? "textarea" : "text";
+    return { key, label, type, value };
+  }
+  return { key, label, type: "custom", fieldType: "json", value };
+}
+function deriveParamSchema(descriptor, node) {
+  const fields = [];
+  for (const key of Object.keys(descriptor.defaultParams)) {
+    const current = key in node.params ? node.params[key] : descriptor.defaultParams[key];
+    fields.push(fieldFor(key, current != null ? current : null));
+  }
+  return fields;
+}
+
+// src/hooks/useNodeParams.ts
+import { useCallback as useCallback2, useMemo as useMemo2, useRef as useRef2, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { UpdateParamsCommand } from "@hlang-tech/editor-core";
+function useNodeParams(core, nodeId) {
+  const versionRef = useRef2(0);
+  const subscribe = useCallback2(
+    (onStoreChange) => {
+      const disposable = core.events.on("nodeChanged", (event) => {
+        if (nodeId !== void 0 && event.node.id === nodeId) {
+          versionRef.current += 1;
+          onStoreChange();
+        }
+      });
+      return () => {
+        disposable.dispose();
+      };
+    },
+    [core, nodeId]
+  );
+  const getSnapshot = useCallback2(() => versionRef.current, []);
+  const version = useSyncExternalStore2(subscribe, getSnapshot, getSnapshot);
+  const setParams = useCallback2(
+    (next) => {
+      if (nodeId === void 0) {
+        return;
+      }
+      core.commands.execute(new UpdateParamsCommand(nodeId, next));
+    },
+    [core, nodeId]
+  );
+  const setParam = useCallback2(
+    (key, value) => {
+      if (nodeId === void 0) {
+        return;
+      }
+      const node = core.model.getNode(nodeId);
+      if (node === void 0) {
+        return;
+      }
+      setParams({ ...node.params, [key]: value });
+    },
+    [core, nodeId, setParams]
+  );
+  return useMemo2(
+    () => ({
+      node: nodeId === void 0 ? void 0 : core.model.getNode(nodeId),
+      setParam,
+      setParams
+    }),
+    // `version` re-reads the node after each nodeChanged for this id.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [core, nodeId, version, setParam, setParams]
+  );
+}
+
+// src/panels/ParamForm.tsx
+import { useState as useState2 } from "react";
+import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+function ParamForm({ fields, onCommit }) {
+  return /* @__PURE__ */ jsx19("div", { className: "hl-form", children: fields.map((field) => /* @__PURE__ */ jsx19(FieldRow, { field, onCommit }, field.key)) });
+}
+function FieldRow({
+  field,
+  onCommit
+}) {
+  return /* @__PURE__ */ jsxs11("label", { className: "hl-field", children: [
+    /* @__PURE__ */ jsx19("span", { className: "hl-field-label", children: field.label }),
+    /* @__PURE__ */ jsx19(FieldControl, { field, onCommit })
+  ] });
+}
+function FieldControl({
+  field,
+  onCommit
+}) {
+  switch (field.type) {
+    case "toggle":
+      return /* @__PURE__ */ jsx19(
+        "button",
+        {
+          type: "button",
+          role: "switch",
+          "aria-checked": field.value,
+          className: `hl-toggle${field.value ? " is-on" : ""}`,
+          disabled: field.disabled,
+          onClick: () => onCommit(field.key, !field.value),
+          children: /* @__PURE__ */ jsx19("span", { className: "hl-toggle-knob" })
+        }
+      );
+    case "number":
+      return /* @__PURE__ */ jsx19(NumberControl, { field, onCommit });
+    case "textarea":
+      return /* @__PURE__ */ jsx19(TextControl, { field, onCommit, multiline: true });
+    case "text":
+      return /* @__PURE__ */ jsx19(TextControl, { field, onCommit });
+    case "custom":
+      return /* @__PURE__ */ jsx19("span", { className: "hl-field-custom hl-mono", title: field.fieldType, children: describeCustom(field.value) });
+  }
+}
+function TextControl({
+  field,
+  onCommit,
+  multiline = false
+}) {
+  const [draft, setDraft] = useState2(field.value);
+  const commit = () => {
+    if (draft !== field.value) {
+      onCommit(field.key, draft);
+    }
+  };
+  const shared = {
+    className: "hl-input",
+    value: draft,
+    disabled: field.disabled,
+    spellCheck: false,
+    onBlur: commit
+  };
+  if (multiline) {
+    return /* @__PURE__ */ jsx19(
+      "textarea",
+      {
+        ...shared,
+        rows: 4,
+        onChange: (e) => setDraft(e.target.value)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx19(
+    "input",
+    {
+      ...shared,
+      type: "text",
+      onChange: (e) => setDraft(e.target.value),
+      onKeyDown: (e) => {
+        if (e.key === "Enter") {
+          e.currentTarget.blur();
+        }
+      }
+    }
+  );
+}
+function NumberControl({
+  field,
+  onCommit
+}) {
+  const [draft, setDraft] = useState2(String(field.value));
+  const commit = () => {
+    const parsed = Number(draft);
+    if (!Number.isNaN(parsed) && parsed !== field.value) {
+      onCommit(field.key, parsed);
+    }
+  };
+  return /* @__PURE__ */ jsx19(
+    "input",
+    {
+      className: "hl-input hl-mono",
+      type: "number",
+      inputMode: "decimal",
+      value: draft,
+      disabled: field.disabled,
+      onChange: (e) => setDraft(e.target.value),
+      onBlur: commit,
+      onKeyDown: (e) => {
+        if (e.key === "Enter") {
+          e.currentTarget.blur();
+        }
+      }
+    }
+  );
+}
+function describeCustom(value) {
+  if (Array.isArray(value)) {
+    return `[${String(value.length)} items]`;
+  }
+  if (value === null) {
+    return "null";
+  }
+  if (typeof value === "object") {
+    return "{\u2026}";
+  }
+  return String(value);
+}
+
+// src/panels/InspectorPanel.tsx
+import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
+function InspectorPanel({ core, emptyState }) {
+  const selection = useSelection(core);
+  const selectedNodes2 = selection.selectedNodes;
+  const singleId = selectedNodes2.length === 1 ? selectedNodes2[0] : void 0;
+  const params = useNodeParams(core, singleId);
+  const node = params.node;
+  if (node === void 0) {
+    return /* @__PURE__ */ jsx20("div", { className: "hl-inspector hl-inspector-empty", children: emptyState != null ? emptyState : /* @__PURE__ */ jsxs12("div", { className: "hl-inspector-blank", children: [
+      /* @__PURE__ */ jsx20("span", { className: "hl-inspector-blank-badge", "aria-hidden": true }),
+      /* @__PURE__ */ jsx20("p", { className: "hl-inspector-blank-title", children: selectedNodes2.length > 1 ? `${String(selectedNodes2.length)} nodes selected` : "Nothing selected" }),
+      /* @__PURE__ */ jsx20("p", { className: "hl-inspector-hint", children: selectedNodes2.length > 1 ? "Select a single node to edit its parameters." : "Pick a node on the canvas or in the outline to inspect and tune it." })
+    ] }) });
+  }
+  const descriptor = core.registry.get(node.code);
+  const fields = descriptor === void 0 ? [] : deriveParamSchema(descriptor, node);
+  const imageUrl = typeof node.params.imageUrl === "string" && node.params.imageUrl.length > 0 ? node.params.imageUrl : void 0;
+  return /* @__PURE__ */ jsxs12("div", { className: "hl-inspector", children: [
+    /* @__PURE__ */ jsx20("div", { className: `hl-inspector-preview hl-${node.kind.toLowerCase()}`, children: imageUrl !== void 0 ? /* @__PURE__ */ jsx20("img", { className: "hl-inspector-preview-img", src: imageUrl, alt: node.name }) : /* @__PURE__ */ jsx20("span", { className: "hl-inspector-preview-badge hl-mono", children: node.kind }) }),
+    /* @__PURE__ */ jsxs12("header", { className: "hl-inspector-head", children: [
+      /* @__PURE__ */ jsx20("span", { className: `hl-inspector-kind hl-${node.kind.toLowerCase()}`, children: node.kind }),
+      /* @__PURE__ */ jsxs12("div", { className: "hl-inspector-titles", children: [
+        /* @__PURE__ */ jsx20("span", { className: "hl-inspector-name", children: node.name }),
+        /* @__PURE__ */ jsxs12("span", { className: "hl-inspector-role hl-mono", children: [
+          node.code,
+          " \xB7 ",
+          KIND_ROLE[node.kind]
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs12("section", { className: "hl-inspector-section", children: [
+      /* @__PURE__ */ jsx20("h3", { className: "hl-inspector-section-title", children: "Parameters" }),
+      fields.length === 0 ? /* @__PURE__ */ jsx20("p", { className: "hl-inspector-hint", children: "This node has no parameters." }) : /* @__PURE__ */ jsx20(
+        ParamForm,
+        {
+          fields,
+          onCommit: (key, value) => params.setParam(key, value)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs12("section", { className: "hl-inspector-section", children: [
+      /* @__PURE__ */ jsx20("h3", { className: "hl-inspector-section-title", children: "Ports" }),
+      /* @__PURE__ */ jsx20("ul", { className: "hl-inspector-ports", children: node.ports.map((port) => /* @__PURE__ */ jsxs12(
+        "li",
+        {
+          className: `hl-inspector-port${port.isError ? " is-error" : ""}`,
+          children: [
+            /* @__PURE__ */ jsx20("span", { className: `hl-port-dot hl-dir-${port.direction.toLowerCase()}` }),
+            /* @__PURE__ */ jsx20("span", { className: "hl-mono", children: port.name }),
+            /* @__PURE__ */ jsx20("span", { className: "hl-inspector-port-dir hl-mono", children: port.direction })
+          ]
+        },
+        port.id
+      )) })
+    ] })
+  ] });
+}
+
+// src/panels/OutlineTree.tsx
+import { useCallback as useCallback3, useEffect as useEffect2, useMemo as useMemo3, useState as useState3 } from "react";
+import { GraphTopology } from "@hlang-tech/editor-core";
+import { useSelection as useSelection2, useViewState, useDiagnostics } from "@hlang-tech/editor-react";
+import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+function useTopologyComponents(core) {
+  const [tick, setTick] = useState3(0);
+  const bump = useCallback3(() => setTick((t) => t + 1), []);
+  useEffect2(() => {
+    const kinds = ["nodeAdded", "nodeRemoved", "nodeChanged", "edgeAdded", "edgeRemoved"];
+    const disposers = kinds.map((k) => core.events.on(k, bump));
+    bump();
+    return () => {
+      for (const d of disposers) {
+        d.dispose();
+      }
+    };
+  }, [core, bump]);
+  return useMemo3(() => {
+    void tick;
+    const topo = new GraphTopology();
+    topo.reset(core.model.getNodes(), core.model.getEdges());
+    return topo.components();
+  }, [core, tick]);
+}
+function OutlineTree({ core, onFocus }) {
+  const components = useTopologyComponents(core);
+  const selection = useSelection2(core);
+  const viewState = useViewState(core);
+  const diagnostics = useDiagnostics(core);
+  const [collapsed, setCollapsed] = useState3(/* @__PURE__ */ new Set());
+  const nodeById = useMemo3(() => {
+    const m = /* @__PURE__ */ new Map();
+    for (const n of core.model.getNodes()) {
+      m.set(n.id, n);
+    }
+    return m;
+  }, [core, components]);
+  const toggleGroup = useCallback3((id) => {
+    setCollapsed((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  }, []);
+  const select = useCallback3(
+    (id) => {
+      selection.selectNodes([id], "replace");
+      onFocus == null ? void 0 : onFocus(id);
+    },
+    [selection, onFocus]
+  );
+  if (components.length === 0) {
+    return /* @__PURE__ */ jsx21("p", { className: "hl-outline-empty hl-mono", children: "no layers yet" });
+  }
+  const groups = [...components].sort((a, b) => b.nodeIds.size - a.nodeIds.size);
+  return /* @__PURE__ */ jsx21("div", { className: "hl-outline", role: "tree", "aria-label": "Outline", children: groups.map((group, gi) => {
+    const members = [...group.nodeIds].map((id) => nodeById.get(id)).filter((n) => n !== void 0);
+    const open = !collapsed.has(group.id);
+    const groupName = `Flow ${String(gi + 1)}`;
+    return /* @__PURE__ */ jsxs13("div", { className: "hl-outline-group", role: "treeitem", "aria-expanded": open, children: [
+      /* @__PURE__ */ jsxs13(
+        "button",
+        {
+          className: "hl-outline-grouphead",
+          onClick: () => toggleGroup(group.id),
+          children: [
+            /* @__PURE__ */ jsx21("span", { className: "hl-outline-caret" + (open ? " is-open" : ""), "aria-hidden": true, children: "\u25B8" }),
+            /* @__PURE__ */ jsx21("span", { className: "hl-outline-groupname", children: groupName }),
+            /* @__PURE__ */ jsx21("span", { className: "hl-outline-count hl-mono", children: group.nodeIds.size })
+          ]
+        }
+      ),
+      open && /* @__PURE__ */ jsx21("ul", { className: "hl-outline-members", children: members.map((node) => {
+        const active = selection.isSelected(node.id);
+        const isHidden = viewState.isHidden(node.id);
+        const isLocked = viewState.isLocked(node.id);
+        const hasImage = typeof node.params.imageUrl === "string" && node.params.imageUrl.length > 0;
+        return /* @__PURE__ */ jsx21("li", { children: /* @__PURE__ */ jsxs13(
+          "div",
+          {
+            className: "hl-outline-row" + (active ? " is-active" : "") + (isHidden ? " is-hidden" : "") + (isLocked ? " is-locked" : ""),
+            children: [
+              /* @__PURE__ */ jsxs13("button", { className: "hl-outline-main", onClick: () => select(node.id), children: [
+                /* @__PURE__ */ jsx21(
+                  "span",
+                  {
+                    className: `hl-outline-icon hl-kind-${node.kind.toLowerCase()}`,
+                    "aria-hidden": true,
+                    children: hasImage ? /* @__PURE__ */ jsx21(
+                      "img",
+                      {
+                        className: "hl-outline-thumb",
+                        src: node.params.imageUrl,
+                        alt: ""
+                      }
+                    ) : /* @__PURE__ */ jsx21(NodeIcon, { code: node.code, kind: node.kind, size: 13 })
+                  }
+                ),
+                /* @__PURE__ */ jsx21("span", { className: "hl-outline-name", children: node.name }),
+                (() => {
+                  const diag = diagnostics.worstOf(node.id);
+                  return diag === void 0 ? null : /* @__PURE__ */ jsx21(DiagnosticBadge, { diagnostic: diag, variant: "hl-outline-diag", size: 11 });
+                })(),
+                isLocked && /* @__PURE__ */ jsx21("span", { className: "hl-outline-badge", "aria-hidden": true, children: /* @__PURE__ */ jsx21(LockIcon, { size: 11 }) }),
+                isHidden && /* @__PURE__ */ jsx21("span", { className: "hl-outline-badge", "aria-hidden": true, children: /* @__PURE__ */ jsx21(EyeOffIcon, { size: 11 }) })
+              ] }),
+              /* @__PURE__ */ jsxs13("span", { className: "hl-outline-controls", children: [
+                /* @__PURE__ */ jsx21(
+                  "button",
+                  {
+                    className: "hl-outline-ctl" + (isHidden ? " is-active-ctl" : ""),
+                    onClick: () => viewState.toggleHidden(node.id),
+                    "aria-label": isHidden ? "Show layer" : "Hide layer",
+                    title: isHidden ? "Show" : "Hide",
+                    children: isHidden ? /* @__PURE__ */ jsx21(EyeOffIcon, {}) : /* @__PURE__ */ jsx21(EyeIcon, {})
+                  }
+                ),
+                /* @__PURE__ */ jsx21(
+                  "button",
+                  {
+                    className: "hl-outline-ctl" + (isLocked ? " is-active-ctl" : ""),
+                    onClick: () => viewState.toggleLocked(node.id),
+                    "aria-label": isLocked ? "Unlock layer" : "Lock layer",
+                    title: isLocked ? "Unlock" : "Lock",
+                    children: isLocked ? /* @__PURE__ */ jsx21(LockIcon, {}) : /* @__PURE__ */ jsx21(UnlockIcon, {})
+                  }
+                )
+              ] })
+            ]
+          }
+        ) }, node.id);
+      }) })
+    ] }, group.id);
+  }) });
+}
+
+// src/panels/PreviewPanel.tsx
+import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+function PreviewPanel({ imageUrl, title = "Preview", status }) {
+  return /* @__PURE__ */ jsxs14("section", { className: "hl-preview", "aria-label": "Preview", children: [
+    /* @__PURE__ */ jsxs14("div", { className: "hl-preview-head", children: [
+      /* @__PURE__ */ jsx22("span", { className: "hl-preview-title", children: title }),
+      status !== void 0 && /* @__PURE__ */ jsx22("span", { className: "hl-preview-status hl-mono", children: status })
+    ] }),
+    /* @__PURE__ */ jsx22("div", { className: "hl-preview-frame", children: imageUrl !== void 0 && imageUrl.length > 0 ? /* @__PURE__ */ jsx22("img", { className: "hl-preview-img", src: imageUrl, alt: title, draggable: false }) : /* @__PURE__ */ jsx22("div", { className: "hl-preview-placeholder hl-mono", children: "no output yet" }) })
+  ] });
+}
+
+// src/panels/RailTabs.tsx
+import { jsx as jsx23 } from "react/jsx-runtime";
+function RailTabs({ tabs, active, onChange }) {
+  return /* @__PURE__ */ jsx23("div", { className: "hl-railtabs", role: "tablist", children: tabs.map((tab) => /* @__PURE__ */ jsx23(
+    "button",
+    {
+      role: "tab",
+      "aria-selected": tab.id === active,
+      className: "hl-railtab" + (tab.id === active ? " is-active" : ""),
+      onClick: () => onChange(tab.id),
+      children: tab.label
+    },
+    tab.id
+  )) });
+}
+
+// src/panels/AssetGrid.tsx
+import { jsx as jsx24 } from "react/jsx-runtime";
+function AssetGrid({ items, onSelect, emptyHint = "No assets yet" }) {
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx24("p", { className: "hl-assetgrid-empty hl-mono", children: emptyHint });
+  }
+  return /* @__PURE__ */ jsx24("div", { className: "hl-assetgrid", children: items.map((item) => {
+    var _a;
+    return /* @__PURE__ */ jsx24(
+      "button",
+      {
+        className: "hl-assetgrid-cell",
+        onClick: () => onSelect == null ? void 0 : onSelect(item.id),
+        title: item.label,
+        children: /* @__PURE__ */ jsx24("img", { className: "hl-assetgrid-img", src: item.url, alt: (_a = item.label) != null ? _a : "", loading: "lazy" })
+      },
+      item.id
+    );
+  }) });
+}
+
+// src/panels/PositionPanel.tsx
+import { useCallback as useCallback4, useEffect as useEffect3, useReducer } from "react";
+import { MoveNodeCommand } from "@hlang-tech/editor-core";
+import { useSelection as useSelection3 } from "@hlang-tech/editor-react";
+import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
+function selectedNodes(core) {
+  const ids = core.selection.getSelectedNodes();
+  const out = [];
+  for (const id of ids) {
+    const n = core.model.getNode(id);
+    if (n !== void 0) {
+      out.push(n);
+    }
+  }
+  return out;
+}
+function PositionPanel({ core, livePosition }) {
+  var _a;
+  useSelection3(core);
+  const [, bump] = useReducer((n) => n + 1, 0);
+  useEffect3(() => {
+    const kinds = ["nodeChanged", "nodeAdded", "nodeRemoved"];
+    const disposers = kinds.map((k) => core.events.on(k, bump));
+    return () => {
+      for (const d of disposers) {
+        d.dispose();
+      }
+    };
+  }, [core]);
+  const nodes = selectedNodes(core);
+  const single = nodes.length === 1 ? nodes[0] : void 0;
+  const shownPos = single !== void 0 ? (_a = livePosition == null ? void 0 : livePosition(single.id)) != null ? _a : single.position : void 0;
+  const moveAll = useCallback4(
+    (fn) => {
+      const targets = selectedNodes(core);
+      if (targets.length === 0) {
+        return;
+      }
+      core.history.transact("Align", () => {
+        for (const n of targets) {
+          core.commands.execute(new MoveNodeCommand(n.id, fn(n)));
+        }
+      });
+    },
+    [core]
+  );
+  const align = useCallback4(
+    (kind) => {
+      const targets = selectedNodes(core);
+      if (targets.length === 0) {
+        return;
+      }
+      const xs = targets.map((n) => n.position.x);
+      const ys = targets.map((n) => n.position.y);
+      const minX = Math.min(...xs);
+      const maxX = Math.max(...xs);
+      const minY = Math.min(...ys);
+      const maxY = Math.max(...ys);
+      const cx = (minX + maxX) / 2;
+      const cy = (minY + maxY) / 2;
+      moveAll((n) => {
+        switch (kind) {
+          case "left":
+            return { x: minX, y: n.position.y };
+          case "hcenter":
+            return { x: cx, y: n.position.y };
+          case "right":
+            return { x: maxX, y: n.position.y };
+          case "top":
+            return { x: n.position.x, y: minY };
+          case "vcenter":
+            return { x: n.position.x, y: cy };
+          case "bottom":
+            return { x: n.position.x, y: maxY };
+        }
+      });
+    },
+    [core, moveAll]
+  );
+  const setCoord = useCallback4(
+    (axis, value) => {
+      if (single === void 0 || Number.isNaN(value)) {
+        return;
+      }
+      const next = axis === "x" ? { x: value, y: single.position.y } : { x: single.position.x, y: value };
+      core.commands.execute(new MoveNodeCommand(single.id, next));
+    },
+    [core, single]
+  );
+  const disabled = nodes.length === 0;
+  const alignButtons = [
+    { kind: "left", label: "Align left", d: "M5 4v16M9 8h8M9 16h5" },
+    { kind: "hcenter", label: "Align centre", d: "M12 4v16M8 9h8M9 15h6" },
+    { kind: "right", label: "Align right", d: "M19 4v16M7 8h8M12 16h3" },
+    { kind: "top", label: "Align top", d: "M4 5h16M8 9v8M16 9v5" },
+    { kind: "vcenter", label: "Align middle", d: "M4 12h16M9 8v8M15 9v6" },
+    { kind: "bottom", label: "Align bottom", d: "M4 19h16M8 7v8M16 12v3" }
+  ];
+  return /* @__PURE__ */ jsxs15("section", { className: "hl-position", children: [
+    /* @__PURE__ */ jsx25("h3", { className: "hl-position-title hl-mono", children: "Position" }),
+    /* @__PURE__ */ jsx25("div", { className: "hl-position-align", role: "group", "aria-label": "Align", children: alignButtons.map((b) => /* @__PURE__ */ jsx25(
+      "button",
+      {
+        className: "hl-position-alignbtn",
+        onClick: () => align(b.kind),
+        disabled,
+        title: b.label,
+        "aria-label": b.label,
+        children: /* @__PURE__ */ jsx25("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx25("path", { d: b.d }) })
+      },
+      b.kind
+    )) }),
+    /* @__PURE__ */ jsxs15("div", { className: "hl-position-coords", children: [
+      /* @__PURE__ */ jsxs15("label", { className: "hl-position-field", children: [
+        /* @__PURE__ */ jsx25(
+          "input",
+          {
+            type: "number",
+            className: "hl-position-input hl-mono",
+            value: shownPos !== void 0 ? Math.round(shownPos.x) : "",
+            disabled: single === void 0,
+            onChange: (e) => setCoord("x", Number(e.target.value)),
+            "aria-label": "X position"
+          }
+        ),
+        /* @__PURE__ */ jsx25("span", { className: "hl-position-axis hl-mono", children: "X" })
+      ] }),
+      /* @__PURE__ */ jsxs15("label", { className: "hl-position-field", children: [
+        /* @__PURE__ */ jsx25(
+          "input",
+          {
+            type: "number",
+            className: "hl-position-input hl-mono",
+            value: shownPos !== void 0 ? Math.round(shownPos.y) : "",
+            disabled: single === void 0,
+            onChange: (e) => setCoord("y", Number(e.target.value)),
+            "aria-label": "Y position"
+          }
+        ),
+        /* @__PURE__ */ jsx25("span", { className: "hl-position-axis hl-mono", children: "Y" })
+      ] })
+    ] })
+  ] });
+}
+
+// src/command-palette/NodeSearch.tsx
+import { useCallback as useCallback5, useEffect as useEffect4, useMemo as useMemo4, useRef as useRef3, useState as useState4 } from "react";
+import { Fragment as Fragment4, jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
+var PANEL_WIDTH = 320;
+var PANEL_MAX_HEIGHT = 360;
+function NodeSearch({ controller }) {
+  const { state } = controller;
+  const [query, setQuery] = useState4("");
+  const [active, setActive] = useState4(0);
+  const inputRef = useRef3(null);
+  const isOpen = state !== void 0;
+  useEffect4(() => {
+    var _a;
+    if (isOpen) {
+      setQuery("");
+      setActive(0);
+      (_a = inputRef.current) == null ? void 0 : _a.focus();
+    }
+  }, [isOpen]);
+  const results = useMemo4(
+    () => state !== void 0 ? controller.results(query) : [],
+    [controller, state, query]
+  );
+  const clampedActive = results.length === 0 ? 0 : Math.min(active, results.length - 1);
+  const choose = useCallback5(
+    (view) => {
+      if (view !== void 0) {
+        controller.commit(view);
+      }
+    },
+    [controller]
+  );
+  const onKeyDown = useCallback5(
+    (event) => {
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          setActive((i) => results.length === 0 ? 0 : (i + 1) % results.length);
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          setActive((i) => results.length === 0 ? 0 : (i - 1 + results.length) % results.length);
+          break;
+        case "Enter":
+          event.preventDefault();
+          choose(results[clampedActive]);
+          break;
+        case "Escape":
+          event.preventDefault();
+          controller.close();
+          break;
+        default:
+          break;
+      }
+    },
+    [results, clampedActive, choose, controller]
+  );
+  if (state === void 0) {
+    return null;
+  }
+  const style = clampToViewport(state.screen.x, state.screen.y);
+  const connectMode = state.pending !== void 0;
+  return /* @__PURE__ */ jsxs16(Fragment4, { children: [
+    /* @__PURE__ */ jsx26(
+      "div",
+      {
+        className: "hl-node-search-scrim",
+        onPointerDown: () => {
+          controller.close();
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs16("div", { className: "hl-node-search", style, role: "dialog", "aria-label": "Create node", children: [
+      /* @__PURE__ */ jsxs16("div", { className: "hl-node-search-field", children: [
+        /* @__PURE__ */ jsx26("span", { className: "hl-node-search-glyph", "aria-hidden": true, children: connectMode ? "\u2933" : "\uFF0B" }),
+        /* @__PURE__ */ jsx26(
+          "input",
+          {
+            ref: inputRef,
+            className: "hl-node-search-input",
+            value: query,
+            placeholder: connectMode ? "connect to\u2026" : "search nodes\u2026",
+            onChange: (e) => {
+              setQuery(e.target.value);
+              setActive(0);
+            },
+            onKeyDown,
+            "aria-label": "Search nodes",
+            autoComplete: "off",
+            spellCheck: false
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs16("ul", { className: "hl-node-search-list", role: "listbox", children: [
+        results.length === 0 && /* @__PURE__ */ jsx26("li", { className: "hl-node-search-empty hl-mono", children: "no matching nodes" }),
+        results.map((view, index) => {
+          const descriptor = view.result.value;
+          const kind = descriptor.kind;
+          return /* @__PURE__ */ jsxs16(
+            "li",
+            {
+              role: "option",
+              "aria-selected": index === clampedActive,
+              className: "hl-node-search-item" + (index === clampedActive ? " is-active" : ""),
+              onPointerEnter: () => setActive(index),
+              onPointerDown: (e) => {
+                e.preventDefault();
+                choose(view);
+              },
+              children: [
+                /* @__PURE__ */ jsx26(
+                  "span",
+                  {
+                    className: `hl-node-search-kind hl-mono hl-kind-${kind.toLowerCase()}`,
+                    children: kind
+                  }
+                ),
+                /* @__PURE__ */ jsx26("span", { className: "hl-node-search-label", children: highlight(descriptor.displayName, view.result.match) }),
+                view.connectPortId !== void 0 && /* @__PURE__ */ jsx26("span", { className: "hl-node-search-port hl-mono", children: view.connectPortId })
+              ]
+            },
+            descriptor.code
+          );
+        })
+      ] })
+    ] })
+  ] });
+}
+function highlight(text, match) {
+  const hit = new Set(match.positions);
+  const chars = Array.from(text);
+  return chars.map(
+    (ch, i) => hit.has(i) ? /* @__PURE__ */ jsx26("mark", { className: "hl-node-search-hit", children: ch }, i) : /* @__PURE__ */ jsx26("span", { children: ch }, i)
+  );
+}
+function clampToViewport(x, y) {
+  const maxLeft = Math.max(8, window.innerWidth - PANEL_WIDTH - 8);
+  const maxTop = Math.max(8, window.innerHeight - PANEL_MAX_HEIGHT - 8);
+  return {
+    left: Math.min(Math.max(8, x), maxLeft),
+    top: Math.min(Math.max(8, y), maxTop)
+  };
+}
+
+// src/command-palette/useNodeSearch.ts
+import { useCallback as useCallback6, useMemo as useMemo5, useState as useState5 } from "react";
+import { AddNodeCommand, ConnectCommand } from "@hlang-tech/editor-core";
+
+// src/command-palette/fuzzy.ts
+function fuzzyScore(query, target) {
+  if (query.length === 0) {
+    return { score: 0, positions: [] };
+  }
+  const q = query.toLowerCase();
+  const t = target.toLowerCase();
+  const positions = [];
+  let score = 0;
+  let qi = 0;
+  let prevMatch = -2;
+  for (let ti = 0; ti < t.length && qi < q.length; ti += 1) {
+    if (t[ti] !== q[qi]) {
+      continue;
+    }
+    positions.push(ti);
+    let point = 1;
+    if (ti === prevMatch + 1) {
+      point += 3;
+    }
+    if (ti === 0 || isBoundary(target, ti)) {
+      point += 2;
+    }
+    point += Math.max(0, 2 - ti * 0.05);
+    score += point;
+    prevMatch = ti;
+    qi += 1;
+  }
+  if (qi < q.length) {
+    return null;
+  }
+  score -= target.length * 0.01;
+  return { score, positions };
+}
+function isBoundary(target, index) {
+  const prev = target[index - 1];
+  const cur = target[index];
+  if (prev === void 0 || cur === void 0) {
+    return false;
+  }
+  const isSep = /[\s\-_./]/.test(prev);
+  const isCamel = prev === prev.toLowerCase() && cur === cur.toUpperCase();
+  return isSep || isCamel;
+}
+function fuzzyRank(query, candidates) {
+  const results = [];
+  for (const candidate of candidates) {
+    const match = fuzzyScore(query, candidate.text);
+    if (match !== null) {
+      results.push({ value: candidate.value, text: candidate.text, match });
+    }
+  }
+  if (query.length === 0) {
+    return results;
+  }
+  return results.sort((a, b) => b.match.score - a.match.score);
+}
+
+// src/command-palette/node-search-model.ts
+function descriptorCandidates(descriptors) {
+  return descriptors.map((descriptor) => ({ text: descriptor.displayName, value: descriptor }));
+}
+function searchNodes(query, descriptors) {
+  return fuzzyRank(query, descriptorCandidates(descriptors));
+}
+function connectableCandidates(query, descriptors, pending, validator) {
+  const ranked = searchNodes(query, descriptors);
+  const out = [];
+  for (const result of ranked) {
+    const port = firstCompletingPort(result.value.ports, pending, validator);
+    if (port !== void 0) {
+      out.push({ candidate: result, connectPortId: port });
+    }
+  }
+  return out;
+}
+function firstCompletingPort(ports, pending, validator) {
+  for (const port of ports) {
+    const ok = pending.direction === "from-source" ? validator.canLink(pending.fromPort, port).ok : validator.canLink(port, pending.fromPort).ok;
+    if (ok) {
+      return port.id;
+    }
+  }
+  return void 0;
+}
+
+// src/command-palette/useNodeSearch.ts
+function useNodeSearch(core) {
+  const [state, setState] = useState5(void 0);
+  const openBlank = useCallback6((screen, flow) => {
+    setState({ screen, flow });
+  }, []);
+  const openFromConnection = useCallback6(
+    (screen, flow, pending) => {
+      setState({ screen, flow, pending });
+    },
+    []
+  );
+  const close = useCallback6(() => {
+    setState(void 0);
+  }, []);
+  const descriptors = core.registry.list();
+  const results = useCallback6(
+    (query) => {
+      if ((state == null ? void 0 : state.pending) !== void 0) {
+        return connectableCandidates(
+          query,
+          descriptors,
+          state.pending,
+          core.validator
+        ).map((entry) => ({ result: entry.candidate, connectPortId: entry.connectPortId }));
+      }
+      return searchNodes(query, descriptors).map((result) => ({ result }));
+    },
+    [state, descriptors, core]
+  );
+  const commit = useCallback6(
+    (view) => {
+      if (state === void 0) {
+        return;
+      }
+      const descriptor = view.result.value;
+      const node = core.registry.createNode(descriptor.code, state.flow);
+      if (state.pending !== void 0 && view.connectPortId !== void 0) {
+        const pending = state.pending;
+        const connectPortId = view.connectPortId;
+        core.history.transact("Create & Connect Node", () => {
+          core.commands.execute(new AddNodeCommand(node));
+          const edgeId = core.idGenerator.nextEdgeId();
+          const newEndpoint = { nodeId: node.id, portId: connectPortId };
+          const [source, target] = pending.direction === "from-source" ? [pending.fromEndpoint, newEndpoint] : [newEndpoint, pending.fromEndpoint];
+          core.commands.execute(new ConnectCommand(edgeId, source, target));
+        });
+      } else {
+        core.commands.execute(new AddNodeCommand(node));
+      }
+      setState(void 0);
+    },
+    [state, core]
+  );
+  return useMemo5(
+    () => ({ state, openBlank, openFromConnection, close, results, commit }),
+    [state, openBlank, openFromConnection, close, results, commit]
+  );
+}
+
+// src/command-palette/useNodeSearchTriggers.ts
+import { useCallback as useCallback7, useRef as useRef4 } from "react";
+import { useReactFlow } from "@xyflow/react";
+var DEFAULT_DOUBLE_CLICK_MS = 350;
+function useNodeSearchTriggers(core, search, options = {}) {
+  var _a, _b;
+  const flow = useReactFlow();
+  const doubleClickMs = (_a = options.doubleClickMs) != null ? _a : DEFAULT_DOUBLE_CLICK_MS;
+  const now = (_b = options.now) != null ? _b : defaultNow;
+  const startRef = useRef4(null);
+  const lastPaneClickRef = useRef4(Number.NEGATIVE_INFINITY);
+  const onConnectStart = useCallback7((_event, params) => {
+    startRef.current = params;
+  }, []);
+  const onConnectEnd = useCallback7(
+    (event, connectionState) => {
+      const start = startRef.current;
+      startRef.current = null;
+      if (connectionState.toNode !== null || start === null) {
+        return;
+      }
+      if (start.nodeId === null || start.handleId === null || start.handleType === null) {
+        return;
+      }
+      const point = pointerOf(event);
+      if (point === null) {
+        return;
+      }
+      const fromPort = resolvePort(core, start.nodeId, start.handleId);
+      if (fromPort === void 0) {
+        return;
+      }
+      const pending = {
+        fromEndpoint: { nodeId: start.nodeId, portId: start.handleId },
+        fromPort,
+        // A drag from a 'source' (output) handle needs a target node; a drag
+        // from a 'target' (input) handle needs a source node.
+        direction: start.handleType === "source" ? "from-source" : "from-target"
+      };
+      search.openFromConnection(
+        point,
+        flow.screenToFlowPosition(point),
+        pending
+      );
+    },
+    [core, flow, search]
+  );
+  const onPaneClick = useCallback7(
+    (event) => {
+      const t = now();
+      const isDouble = t - lastPaneClickRef.current <= doubleClickMs;
+      lastPaneClickRef.current = t;
+      if (!isDouble) {
+        return;
+      }
+      lastPaneClickRef.current = Number.NEGATIVE_INFINITY;
+      const screen = { x: event.clientX, y: event.clientY };
+      search.openBlank(screen, flow.screenToFlowPosition(screen));
+    },
+    [flow, search, doubleClickMs, now]
+  );
+  return { onConnectStart, onConnectEnd, onPaneClick };
+}
+function defaultNow() {
+  return performance.now();
+}
+function resolvePort(core, nodeId, portId) {
+  const node = core.model.getNode(nodeId);
+  return node == null ? void 0 : node.ports.find((port) => port.id === portId);
+}
+function pointerOf(event) {
+  if ("clientX" in event) {
+    return { x: event.clientX, y: event.clientY };
+  }
+  const touch = event.changedTouches[0];
+  return touch ? { x: touch.clientX, y: touch.clientY } : null;
+}
+
+// src/hooks/useEditorHotkeys.ts
+import { useEffect as useEffect5 } from "react";
+import { useClipboard } from "@hlang-tech/editor-react";
+function isEditableTarget(target) {
+  if (!(target instanceof HTMLElement)) {
+    return false;
+  }
+  const tag = target.tagName;
+  return tag === "INPUT" || tag === "TEXTAREA" || target.isContentEditable;
+}
+function useEditorHotkeys(core) {
+  const clipboard = useClipboard(core);
+  useEffect5(() => {
+    const onKeyDown = (event) => {
+      if (isEditableTarget(event.target)) {
+        return;
+      }
+      const mod = event.metaKey || event.ctrlKey;
+      if (mod && !event.altKey) {
+        const key = event.key.toLowerCase();
+        if (key === "z" && !event.shiftKey) {
+          event.preventDefault();
+          core.history.undo();
+          return;
+        }
+        if (key === "z" && event.shiftKey || key === "y") {
+          event.preventDefault();
+          core.history.redo();
+          return;
+        }
+      }
+      if (mod && !event.shiftKey && !event.altKey) {
+        const key = event.key.toLowerCase();
+        if (key === "c") {
+          event.preventDefault();
+          clipboard.copy();
+          return;
+        }
+        if (key === "x") {
+          event.preventDefault();
+          clipboard.cut();
+          return;
+        }
+        if (key === "v") {
+          event.preventDefault();
+          clipboard.paste();
+          return;
+        }
+        if (key === "d") {
+          event.preventDefault();
+          clipboard.duplicate();
+          return;
+        }
+        if (key === "a") {
+          event.preventDefault();
+          core.selection.selectNodes(
+            core.model.getNodes().map((n) => n.id),
+            "replace"
+          );
+          return;
+        }
+      }
+      if (event.key === "Delete" || event.key === "Backspace") {
+        event.preventDefault();
+        clipboard.remove();
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, [core, clipboard]);
+}
+
+// src/context-menu/NodeContextMenu.tsx
+import { useCallback as useCallback8, useEffect as useEffect6, useMemo as useMemo6, useRef as useRef5, useState as useState6 } from "react";
+import { Fragment as Fragment5, jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
+var PANEL_WIDTH2 = 208;
+var ITEM_HEIGHT = 34;
+var VIEWPORT_MARGIN = 8;
+var MENU_VPAD = 12;
+function NodeContextMenu({ controller, items }) {
+  const { state } = controller;
+  const [active, setActive] = useState6(0);
+  const menuRef = useRef5(null);
+  const isOpen = state !== void 0;
+  useEffect6(() => {
+    var _a;
+    if (isOpen) {
+      setActive(0);
+      (_a = menuRef.current) == null ? void 0 : _a.focus();
+    }
+  }, [isOpen]);
+  const rows = useMemo6(
+    () => state !== void 0 ? items(state.nodeId) : [],
+    [items, state]
+  );
+  const enabledIndices = useMemo6(
+    () => rows.map((r, i) => r.disabled ? -1 : i).filter((i) => i >= 0),
+    [rows]
+  );
+  const move = useCallback8(
+    (delta) => {
+      if (enabledIndices.length === 0) {
+        return;
+      }
+      setActive((current) => {
+        var _a;
+        const pos = enabledIndices.indexOf(current);
+        const nextPos = pos === -1 ? 0 : (pos + delta + enabledIndices.length) % enabledIndices.length;
+        return (_a = enabledIndices[nextPos]) != null ? _a : current;
+      });
+    },
+    [enabledIndices]
+  );
+  const choose = useCallback8(
+    (item) => {
+      if (item === void 0 || item.disabled) {
+        return;
+      }
+      item.onSelect();
+      controller.close();
+    },
+    [controller]
+  );
+  const onKeyDown = useCallback8(
+    (event) => {
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          move(1);
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          move(-1);
+          break;
+        case "Enter":
+          event.preventDefault();
+          choose(rows[active]);
+          break;
+        case "Escape":
+          event.preventDefault();
+          controller.close();
+          break;
+        default:
+          break;
+      }
+    },
+    [move, choose, rows, active, controller]
+  );
+  if (state === void 0) {
+    return null;
+  }
+  const style = clampToViewport2(state.screen.x, state.screen.y, rows.length);
+  return /* @__PURE__ */ jsxs17(Fragment5, { children: [
+    /* @__PURE__ */ jsx27(
+      "div",
+      {
+        className: "hl-ctx-scrim",
+        onPointerDown: () => {
+          controller.close();
+        },
+        onContextMenu: (e) => {
+          e.preventDefault();
+          controller.close();
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx27(
+      "div",
+      {
+        ref: menuRef,
+        className: "hl-ctx-menu",
+        style,
+        role: "menu",
+        "aria-label": "Node actions",
+        tabIndex: -1,
+        onKeyDown,
+        children: rows.map((item, index) => /* @__PURE__ */ jsxs17(
+          "button",
+          {
+            type: "button",
+            role: "menuitem",
+            disabled: item.disabled,
+            className: "hl-ctx-item" + (item.danger === true ? " is-danger" : "") + (index === active ? " is-active" : ""),
+            onPointerEnter: () => !item.disabled && setActive(index),
+            onPointerDown: (e) => {
+              e.preventDefault();
+              choose(item);
+            },
+            children: [
+              /* @__PURE__ */ jsx27("span", { className: "hl-ctx-item-icon", "aria-hidden": true, children: item.icon }),
+              /* @__PURE__ */ jsx27("span", { className: "hl-ctx-item-label", children: item.label }),
+              item.shortcut !== void 0 && /* @__PURE__ */ jsx27("span", { className: "hl-ctx-item-key hl-mono", children: item.shortcut })
+            ]
+          },
+          item.id
+        ))
+      }
+    )
+  ] });
+}
+function clampToViewport2(x, y, rowCount) {
+  const height = Math.max(ITEM_HEIGHT, rowCount * ITEM_HEIGHT + MENU_VPAD);
+  const maxLeft = Math.max(VIEWPORT_MARGIN, window.innerWidth - PANEL_WIDTH2 - VIEWPORT_MARGIN);
+  const maxTop = Math.max(VIEWPORT_MARGIN, window.innerHeight - height - VIEWPORT_MARGIN);
+  return {
+    left: Math.min(Math.max(VIEWPORT_MARGIN, x), maxLeft),
+    top: Math.min(Math.max(VIEWPORT_MARGIN, y), maxTop)
+  };
+}
+
+// src/context-menu/useNodeContextMenu.ts
+import { useCallback as useCallback9, useMemo as useMemo7, useState as useState7 } from "react";
+function useNodeContextMenu() {
+  const [state, setState] = useState7(void 0);
+  const openForNode = useCallback9((screen, nodeId) => {
+    setState({ screen, nodeId });
+  }, []);
+  const close = useCallback9(() => {
+    setState(void 0);
+  }, []);
+  return useMemo7(() => ({ state, openForNode, close }), [state, openForNode, close]);
+}
+
+// src/overlays/Cheatsheet.tsx
+import { useEffect as useEffect7, useRef as useRef6 } from "react";
+import { Fragment as Fragment6, jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
+var DEFAULT_GROUPS = [
+  {
+    title: "Edit",
+    rows: [
+      { keys: "\u2318Z", label: "Undo" },
+      { keys: "\u2318\u21E7Z / \u2318Y", label: "Redo" },
+      { keys: "\u2318C", label: "Copy" },
+      { keys: "\u2318X", label: "Cut" },
+      { keys: "\u2318V", label: "Paste (at cursor)" },
+      { keys: "\u2318D", label: "Duplicate" },
+      { keys: "\u232B", label: "Delete" }
+    ]
+  },
+  {
+    title: "Select & navigate",
+    rows: [
+      { keys: "\u2318A", label: "Select all" },
+      { keys: "Drag", label: "Box-select (left drag)" },
+      { keys: "Middle / Right drag", label: "Pan" },
+      { keys: "Space + drag", label: "Pan" },
+      { keys: "Double-click name", label: "Rename node" }
+    ]
+  },
+  {
+    title: "Build",
+    rows: [
+      { keys: "Double-click canvas", label: "Search & create node" },
+      { keys: "Drag port to empty", label: "Create & connect" },
+      { keys: "Drop node on wire", label: "Insert inline (if compatible)" },
+      { keys: "Drag edge end", label: "Reconnect" },
+      { keys: "?", label: "This cheatsheet" }
+    ]
+  }
+];
+function Cheatsheet({ open, onClose, groups = DEFAULT_GROUPS }) {
+  const dialogRef = useRef6(null);
+  useEffect7(() => {
+    var _a;
+    if (!open) {
+      return;
+    }
+    (_a = dialogRef.current) == null ? void 0 : _a.focus();
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+  if (!open) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs18(Fragment6, { children: [
+    /* @__PURE__ */ jsx28("div", { className: "hl-cheat-scrim", onPointerDown: onClose }),
+    /* @__PURE__ */ jsxs18(
+      "div",
+      {
+        ref: dialogRef,
+        className: "hl-cheat",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Keyboard shortcuts",
+        tabIndex: -1,
+        children: [
+          /* @__PURE__ */ jsxs18("div", { className: "hl-cheat-head", children: [
+            /* @__PURE__ */ jsx28("span", { className: "hl-cheat-title", children: "Shortcuts" }),
+            /* @__PURE__ */ jsx28("button", { className: "hl-cheat-close", onClick: onClose, "aria-label": "Close", children: "\u2715" })
+          ] }),
+          /* @__PURE__ */ jsx28("div", { className: "hl-cheat-grid", children: groups.map((group) => /* @__PURE__ */ jsxs18("section", { className: "hl-cheat-group", children: [
+            /* @__PURE__ */ jsx28("h3", { className: "hl-cheat-group-title hl-mono", children: group.title }),
+            /* @__PURE__ */ jsx28("ul", { className: "hl-cheat-rows", children: group.rows.map((row) => /* @__PURE__ */ jsxs18("li", { className: "hl-cheat-row", children: [
+              /* @__PURE__ */ jsx28("span", { className: "hl-cheat-label", children: row.label }),
+              /* @__PURE__ */ jsx28("kbd", { className: "hl-cheat-keys hl-mono", children: row.keys })
+            ] }, row.label)) })
+          ] }, group.title)) })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/overlays/Toast.tsx
+import { createContext as createContext3, useCallback as useCallback10, useContext as useContext3, useMemo as useMemo8, useRef as useRef7, useState as useState8 } from "react";
+import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
+var ToastCtx = createContext3({ show: () => void 0 });
+function ToastProvider({ children, duration = 2200 }) {
+  const [items, setItems] = useState8([]);
+  const seq = useRef7(0);
+  const show = useCallback10(
+    (message) => {
+      seq.current += 1;
+      const id = seq.current;
+      setItems((prev) => [...prev, { id, message }]);
+      setTimeout(() => {
+        setItems((prev) => prev.filter((t) => t.id !== id));
+      }, duration);
+    },
+    [duration]
+  );
+  const api = useMemo8(() => ({ show }), [show]);
+  return /* @__PURE__ */ jsxs19(ToastCtx.Provider, { value: api, children: [
+    children,
+    /* @__PURE__ */ jsx29("div", { className: "hl-toast-stack", "aria-live": "polite", children: items.map((t) => /* @__PURE__ */ jsx29("div", { className: "hl-toast", children: t.message }, t.id)) })
+  ] });
+}
+function useToast() {
+  return useContext3(ToastCtx);
+}
+
+// src/hooks/useLiveSignals.ts
+import { useEffect as useEffect8 } from "react";
+function useLiveSignals(core, handle, explicitStore) {
+  const contextStore = useLiveSignalStore();
+  const store = explicitStore != null ? explicitStore : contextStore;
+  useEffect8(() => {
+    if (store === null) {
+      return;
+    }
+    const syncEdges = () => {
+      const entries = core.model.getEdges().map((edge) => ({
+        id: edge.id,
+        sourceNodeId: edge.source.nodeId,
+        sourcePortId: edge.source.portId,
+        isError: edge.source.portId === "@node/error"
+      }));
+      store.setEdgeIndex(entries);
+    };
+    syncEdges();
+    const added = core.events.on("edgeAdded", syncEdges);
+    const removed = core.events.on("edgeRemoved", syncEdges);
+    return () => {
+      added.dispose();
+      removed.dispose();
+    };
+  }, [core, store]);
+  useEffect8(() => {
+    if (store === null) {
+      return;
+    }
+    if (handle === void 0) {
+      store.reset();
+      return;
+    }
+    const activitySub = handle.onActivity((e) => store.markActivity(e.nodeId, e.portId));
+    const errorSub = handle.onError((e) => store.markError(e.nodeId));
+    return () => {
+      activitySub.dispose();
+      errorSub.dispose();
+      store.reset();
+    };
+  }, [store, handle]);
+}
+export {
+  AssetGrid,
+  AssetNodeChrome,
+  CanvasChrome,
+  CanvasDock,
+  Cheatsheet,
+  DiagnosticBadge,
+  EditorShell,
+  EditorUIThemeProvider,
+  EmptyState,
+  FlowEdge,
+  HlangNode,
+  InspectorPanel,
+  KIND_ROLE,
+  KIND_TOKEN,
+  LiveSignalProvider,
+  LiveSignalStore,
+  NodeBodySlot,
+  NodeChrome,
+  NodeContextMenu,
+  NodeInteractionProvider,
+  NodeSearch,
+  OutlineTree,
+  ParamForm,
+  PillNodeChrome,
+  PortRow,
+  PositionPanel,
+  PreviewPanel,
+  RailTabs,
+  RunButton,
+  SignalBar,
+  TOKEN_NAMES,
+  ToastProvider,
+  ToolCluster,
+  Toolbar,
+  ToolbarGhostButton,
+  ToolbarStat,
+  UndoRedo,
+  connectableCandidates,
+  createHlangFlowTypes,
+  createTheme,
+  deriveParamSchema,
+  descriptorCandidates,
+  fuzzyRank,
+  fuzzyScore,
+  isEditableTarget,
+  searchNodes,
+  tokenVar,
+  useEdgeFlowing,
+  useEditorHotkeys,
+  useLiveSignalStore,
+  useLiveSignals,
+  useNodeContextMenu,
+  useNodeInteraction,
+  useNodeLiveState,
+  useNodeParams,
+  useNodeSearch,
+  useNodeSearchTriggers,
+  useToast
+};
+//# sourceMappingURL=index.mjs.map