@hlang-org/editor-ui 0.2.2 → 0.3.0

package/lib/index.d.mts

@@ -1,6 +1,6 @@
 import { NodeKind, EditorNode, PortDescriptor, EditorCore, NodeId, Diagnostic, ParamValue, NodeDescriptor, ParamBag, Endpoint, IConnectionValidator, Point, IExecutionHandle } from '@hlang-org/editor-core';
-import { CSSProperties, ReactNode, ReactElement, MouseEvent, RefObject } from 'react';
-import { NodeProps, EdgeProps, NodeTypes, EdgeTypes, OnConnectStart, OnConnectEnd } from '@xyflow/react';
+import { CSSProperties, ReactNode, ReactElement, RefObject } from 'react';
+import { NodeProps, EdgeProps, NodeTypes, EdgeTypes, OnConnectStartParams } from '@xyflow/react';
 import { HlangRFNode, HlangRFEdge } from '@hlang-org/editor-react';
 
 /**
@@ -11,7 +11,7 @@ import { HlangRFNode, HlangRFEdge } from '@hlang-org/editor-react';
  */
 
 /** The full set of token custom-property names (without the leading `--`). */
-declare const TOKEN_NAMES: readonly ["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"];
+declare const TOKEN_NAMES: readonly ["hl-void", "hl-void-2", "hl-surface", "hl-surface-2", "hl-line", "hl-line-strong", "hl-silver", "hl-silver-hi", "hl-silver-lo", "hl-glass", "hl-glass-2", "hl-glass-blur", "hl-glass-sat", "hl-glass-edge", "hl-glass-edge-hi", "hl-spark", "hl-r", "hl-t", "hl-w", "hl-error", "hl-warning", "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", "hl-activity", "hl-cost"];
 /** A token name (without `--`), e.g. `'hl-silver'`. */
 type TokenName = (typeof TOKEN_NAMES)[number];
 /** `var(--<name>)` reference string for a token. */
@@ -623,7 +623,7 @@ interface ConnectableResult {
  * the candidate node does not exist yet — legality here is purely a property of
  * the two ports.
  */
-declare function connectableCandidates(query: string, descriptors: readonly NodeDescriptor[], pending: PendingConnection, validator: IConnectionValidator): readonly ConnectableResult[];
+declare function connectableCandidates(query: string, descriptors: readonly NodeDescriptor[], pending: PendingConnection, validator: Pick<IConnectionValidator, 'canLink'>): readonly ConnectableResult[];
 
 /**
  * `useNodeSearch` — palette state + commit logic for creating nodes by search.
@@ -715,12 +715,28 @@ interface NodeSearchTriggerOptions {
     /** Monotonic clock in ms. Defaults to `performance.now`. */
     readonly now?: () => number;
 }
-/** Handlers to spread onto the `<ReactFlow>` element. */
+/** Where a pointer is, as mouse events (DOM and React) report it. */
+interface PointerPosition {
+    readonly clientX: number;
+    readonly clientY: number;
+}
+/** Where touches ended, as touch events report it. */
+interface TouchPositions {
+    readonly changedTouches: ArrayLike<PointerPosition>;
+}
+/** How a connection drag ended: on a node, or (`toNode: null`) in empty space. */
+interface ConnectionEnd {
+    readonly toNode: object | null;
+}
+/**
+ * Handlers to spread onto the `<ReactFlow>` element. Each declares only what it
+ * reads, so React Flow's full events and states fit them.
+ */
 interface NodeSearchTriggers {
-    readonly onConnectStart: OnConnectStart;
-    readonly onConnectEnd: OnConnectEnd;
+    readonly onConnectStart: (event: unknown, params: OnConnectStartParams) => void;
+    readonly onConnectEnd: (event: PointerPosition | TouchPositions, connectionState: ConnectionEnd) => void;
     /** Attach to `<ReactFlow onPaneClick>`; a rapid second click opens the palette. */
-    onPaneClick(event: MouseEvent): void;
+    readonly onPaneClick: (event: PointerPosition) => void;
 }
 declare function useNodeSearchTriggers(core: EditorCore, search: NodeSearchController, options?: NodeSearchTriggerOptions): NodeSearchTriggers;
 
@@ -877,7 +893,8 @@ declare function useToast(): ToastApi;
  *     so only the components whose state actually flips re-render.
  *   - Edge "flowing" state is computed from an injected edge index, not by
  *     reaching into another layer's model at paint time.
- *   - A single rAF loop advances decay and notifies only changed ids.
+ *   - A single rAF loop advances decay and notifies only changed ids, once per
+ *     frame however many signals arrived in it.
  */
 /** Live state of a node during execution. */
 type NodeLiveState = 'idle' | 'active' | 'error';
@@ -931,6 +948,12 @@ declare class LiveSignalStore {
     /** Whether an edge is currently flowing. */
     isEdgeFlowing(edgeId: string): boolean;
     private subscribe;
+    /**
+     * Arms the frame loop if it is not running. Signals only record state; the
+     * next frame notifies, so a burst of signals costs one pass over the
+     * subscribers per frame, not one per signal, and every change shows within a
+     * frame.
+     */
     private ensureLoop;
     private stopLoop;
     /**
@@ -981,4 +1004,4 @@ declare function useNodeLiveState(nodeId: string): NodeLiveState;
 declare function useEdgeFlowing(edgeId: string): boolean;
 
 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 };
-export type { AssetGridProps, AssetItem, AssetNodeChromeProps, CanvasChromeProps, CanvasDockProps, CanvasMode, CheatsheetProps, ConnectableResult, ContextMenuItem, DiagnosticBadgeProps, EdgeIndexEntry, EditorHotkeysOptions, EditorShellProps, EditorUIThemeProviderProps, EmptyStateProps, FuzzyCandidate, FuzzyMatch, FuzzyResult, HlangFlowTypes, InspectorPanelProps, LiveSignalProviderProps, LiveSignalStoreDeps, NodeBodySlotProps, NodeCandidate, NodeChromeProps, NodeContextMenuController, NodeContextMenuProps, NodeContextMenuState, NodeInteraction, NodeInteractionProviderProps, NodeLiveState, NodeParamsHandle, NodeSearchController, NodeSearchProps, NodeSearchResult, NodeSearchResultView, NodeSearchState, NodeSearchTriggerOptions, NodeSearchTriggers, OutlineTreeProps, ParamField, ParamFieldBase, ParamFormProps, PendingConnection, PillNodeChromeProps, PortRowProps, PositionPanelProps, PreviewPanelProps, RailTab, RailTabsProps, RunButtonProps, ShortcutGroup, ShortcutRow, ThemeOverride, ToastApi, ToastProviderProps, TokenName, ToolClusterProps, ToolItem, ToolbarProps, UndoRedoProps };
+export type { AssetGridProps, AssetItem, AssetNodeChromeProps, CanvasChromeProps, CanvasDockProps, CanvasMode, CheatsheetProps, ConnectableResult, ConnectionEnd, ContextMenuItem, DiagnosticBadgeProps, EdgeIndexEntry, EditorHotkeysOptions, EditorShellProps, EditorUIThemeProviderProps, EmptyStateProps, FuzzyCandidate, FuzzyMatch, FuzzyResult, HlangFlowTypes, InspectorPanelProps, LiveSignalProviderProps, LiveSignalStoreDeps, NodeBodySlotProps, NodeCandidate, NodeChromeProps, NodeContextMenuController, NodeContextMenuProps, NodeContextMenuState, NodeInteraction, NodeInteractionProviderProps, NodeLiveState, NodeParamsHandle, NodeSearchController, NodeSearchProps, NodeSearchResult, NodeSearchResultView, NodeSearchState, NodeSearchTriggerOptions, NodeSearchTriggers, OutlineTreeProps, ParamField, ParamFieldBase, ParamFormProps, PendingConnection, PillNodeChromeProps, PointerPosition, PortRowProps, PositionPanelProps, PreviewPanelProps, RailTab, RailTabsProps, RunButtonProps, ShortcutGroup, ShortcutRow, ThemeOverride, ToastApi, ToastProviderProps, TokenName, ToolClusterProps, ToolItem, ToolbarProps, TouchPositions, UndoRedoProps };

package/lib/index.d.ts

@@ -1,6 +1,6 @@
 import { NodeKind, EditorNode, PortDescriptor, EditorCore, NodeId, Diagnostic, ParamValue, NodeDescriptor, ParamBag, Endpoint, IConnectionValidator, Point, IExecutionHandle } from '@hlang-org/editor-core';
-import { CSSProperties, ReactNode, ReactElement, MouseEvent, RefObject } from 'react';
-import { NodeProps, EdgeProps, NodeTypes, EdgeTypes, OnConnectStart, OnConnectEnd } from '@xyflow/react';
+import { CSSProperties, ReactNode, ReactElement, RefObject } from 'react';
+import { NodeProps, EdgeProps, NodeTypes, EdgeTypes, OnConnectStartParams } from '@xyflow/react';
 import { HlangRFNode, HlangRFEdge } from '@hlang-org/editor-react';
 
 /**
@@ -11,7 +11,7 @@ import { HlangRFNode, HlangRFEdge } from '@hlang-org/editor-react';
  */
 
 /** The full set of token custom-property names (without the leading `--`). */
-declare const TOKEN_NAMES: readonly ["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"];
+declare const TOKEN_NAMES: readonly ["hl-void", "hl-void-2", "hl-surface", "hl-surface-2", "hl-line", "hl-line-strong", "hl-silver", "hl-silver-hi", "hl-silver-lo", "hl-glass", "hl-glass-2", "hl-glass-blur", "hl-glass-sat", "hl-glass-edge", "hl-glass-edge-hi", "hl-spark", "hl-r", "hl-t", "hl-w", "hl-error", "hl-warning", "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", "hl-activity", "hl-cost"];
 /** A token name (without `--`), e.g. `'hl-silver'`. */
 type TokenName = (typeof TOKEN_NAMES)[number];
 /** `var(--<name>)` reference string for a token. */
@@ -623,7 +623,7 @@ interface ConnectableResult {
  * the candidate node does not exist yet — legality here is purely a property of
  * the two ports.
  */
-declare function connectableCandidates(query: string, descriptors: readonly NodeDescriptor[], pending: PendingConnection, validator: IConnectionValidator): readonly ConnectableResult[];
+declare function connectableCandidates(query: string, descriptors: readonly NodeDescriptor[], pending: PendingConnection, validator: Pick<IConnectionValidator, 'canLink'>): readonly ConnectableResult[];
 
 /**
  * `useNodeSearch` — palette state + commit logic for creating nodes by search.
@@ -715,12 +715,28 @@ interface NodeSearchTriggerOptions {
     /** Monotonic clock in ms. Defaults to `performance.now`. */
     readonly now?: () => number;
 }
-/** Handlers to spread onto the `<ReactFlow>` element. */
+/** Where a pointer is, as mouse events (DOM and React) report it. */
+interface PointerPosition {
+    readonly clientX: number;
+    readonly clientY: number;
+}
+/** Where touches ended, as touch events report it. */
+interface TouchPositions {
+    readonly changedTouches: ArrayLike<PointerPosition>;
+}
+/** How a connection drag ended: on a node, or (`toNode: null`) in empty space. */
+interface ConnectionEnd {
+    readonly toNode: object | null;
+}
+/**
+ * Handlers to spread onto the `<ReactFlow>` element. Each declares only what it
+ * reads, so React Flow's full events and states fit them.
+ */
 interface NodeSearchTriggers {
-    readonly onConnectStart: OnConnectStart;
-    readonly onConnectEnd: OnConnectEnd;
+    readonly onConnectStart: (event: unknown, params: OnConnectStartParams) => void;
+    readonly onConnectEnd: (event: PointerPosition | TouchPositions, connectionState: ConnectionEnd) => void;
     /** Attach to `<ReactFlow onPaneClick>`; a rapid second click opens the palette. */
-    onPaneClick(event: MouseEvent): void;
+    readonly onPaneClick: (event: PointerPosition) => void;
 }
 declare function useNodeSearchTriggers(core: EditorCore, search: NodeSearchController, options?: NodeSearchTriggerOptions): NodeSearchTriggers;
 
@@ -877,7 +893,8 @@ declare function useToast(): ToastApi;
  *     so only the components whose state actually flips re-render.
  *   - Edge "flowing" state is computed from an injected edge index, not by
  *     reaching into another layer's model at paint time.
- *   - A single rAF loop advances decay and notifies only changed ids.
+ *   - A single rAF loop advances decay and notifies only changed ids, once per
+ *     frame however many signals arrived in it.
  */
 /** Live state of a node during execution. */
 type NodeLiveState = 'idle' | 'active' | 'error';
@@ -931,6 +948,12 @@ declare class LiveSignalStore {
     /** Whether an edge is currently flowing. */
     isEdgeFlowing(edgeId: string): boolean;
     private subscribe;
+    /**
+     * Arms the frame loop if it is not running. Signals only record state; the
+     * next frame notifies, so a burst of signals costs one pass over the
+     * subscribers per frame, not one per signal, and every change shows within a
+     * frame.
+     */
     private ensureLoop;
     private stopLoop;
     /**
@@ -981,4 +1004,4 @@ declare function useNodeLiveState(nodeId: string): NodeLiveState;
 declare function useEdgeFlowing(edgeId: string): boolean;
 
 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 };
-export type { AssetGridProps, AssetItem, AssetNodeChromeProps, CanvasChromeProps, CanvasDockProps, CanvasMode, CheatsheetProps, ConnectableResult, ContextMenuItem, DiagnosticBadgeProps, EdgeIndexEntry, EditorHotkeysOptions, EditorShellProps, EditorUIThemeProviderProps, EmptyStateProps, FuzzyCandidate, FuzzyMatch, FuzzyResult, HlangFlowTypes, InspectorPanelProps, LiveSignalProviderProps, LiveSignalStoreDeps, NodeBodySlotProps, NodeCandidate, NodeChromeProps, NodeContextMenuController, NodeContextMenuProps, NodeContextMenuState, NodeInteraction, NodeInteractionProviderProps, NodeLiveState, NodeParamsHandle, NodeSearchController, NodeSearchProps, NodeSearchResult, NodeSearchResultView, NodeSearchState, NodeSearchTriggerOptions, NodeSearchTriggers, OutlineTreeProps, ParamField, ParamFieldBase, ParamFormProps, PendingConnection, PillNodeChromeProps, PortRowProps, PositionPanelProps, PreviewPanelProps, RailTab, RailTabsProps, RunButtonProps, ShortcutGroup, ShortcutRow, ThemeOverride, ToastApi, ToastProviderProps, TokenName, ToolClusterProps, ToolItem, ToolbarProps, UndoRedoProps };
+export type { AssetGridProps, AssetItem, AssetNodeChromeProps, CanvasChromeProps, CanvasDockProps, CanvasMode, CheatsheetProps, ConnectableResult, ConnectionEnd, ContextMenuItem, DiagnosticBadgeProps, EdgeIndexEntry, EditorHotkeysOptions, EditorShellProps, EditorUIThemeProviderProps, EmptyStateProps, FuzzyCandidate, FuzzyMatch, FuzzyResult, HlangFlowTypes, InspectorPanelProps, LiveSignalProviderProps, LiveSignalStoreDeps, NodeBodySlotProps, NodeCandidate, NodeChromeProps, NodeContextMenuController, NodeContextMenuProps, NodeContextMenuState, NodeInteraction, NodeInteractionProviderProps, NodeLiveState, NodeParamsHandle, NodeSearchController, NodeSearchProps, NodeSearchResult, NodeSearchResultView, NodeSearchState, NodeSearchTriggerOptions, NodeSearchTriggers, OutlineTreeProps, ParamField, ParamFieldBase, ParamFormProps, PendingConnection, PillNodeChromeProps, PointerPosition, PortRowProps, PositionPanelProps, PreviewPanelProps, RailTab, RailTabsProps, RunButtonProps, ShortcutGroup, ShortcutRow, ThemeOverride, ToastApi, ToastProviderProps, TokenName, ToolClusterProps, ToolItem, ToolbarProps, TouchPositions, UndoRedoProps };

package/lib/index.js

@@ -92,11 +92,18 @@ var TOKEN_NAMES = [
   "hl-silver",
   "hl-silver-hi",
   "hl-silver-lo",
+  "hl-glass",
+  "hl-glass-2",
+  "hl-glass-blur",
+  "hl-glass-sat",
+  "hl-glass-edge",
+  "hl-glass-edge-hi",
   "hl-spark",
   "hl-r",
   "hl-t",
   "hl-w",
   "hl-error",
+  "hl-warning",
   "hl-ink",
   "hl-ink-2",
   "hl-ink-3",
@@ -109,7 +116,9 @@ var TOKEN_NAMES = [
   "hl-shadow-node",
   "hl-shadow-glass",
   "hl-glow-silver",
-  "hl-ease"
+  "hl-ease",
+  "hl-activity",
+  "hl-cost"
 ];
 function tokenVar(name) {
   return `var(--${name})`;
@@ -300,9 +309,14 @@ var LiveSignalStore = class {
       }
     };
   }
+  /**
+   * Arms the frame loop if it is not running. Signals only record state; the
+   * next frame notifies, so a burst of signals costs one pass over the
+   * subscribers per frame, not one per signal, and every change shows within a
+   * frame.
+   */
   ensureLoop() {
     if (this.running) {
-      this.flushNotifications();
       return;
     }
     this.running = true;
@@ -690,10 +704,8 @@ function HlangNode({ data, selected }) {
 var import_react5 = require("@xyflow/react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function useSourceRole(sourceId) {
-  var _a, _b;
   const node = (0, import_react5.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;
+  const role = node == null ? void 0 : node.data.editorNode.params.role;
   return typeof role === "string" && role.length > 0 ? role : void 0;
 }
 function FlowEdge(props) {
@@ -1330,7 +1342,8 @@ function OutlineTree({ core, onFocus }) {
         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;
+        const { imageUrl } = node.params;
+        const thumbnail = typeof imageUrl === "string" && imageUrl.length > 0 ? imageUrl : void 0;
         return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
           "div",
           {
@@ -1342,11 +1355,11 @@ function OutlineTree({ core, onFocus }) {
                   {
                     className: `hl-outline-icon hl-kind-${node.kind.toLowerCase()}`,
                     "aria-hidden": true,
-                    children: hasImage ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                    children: thumbnail !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                       "img",
                       {
                         className: "hl-outline-thumb",
-                        src: node.params.imageUrl,
+                        src: thumbnail,
                         alt: ""
                       }
                     ) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(NodeIcon, { code: node.code, kind: node.kind, size: 13 })