@hlang-tech/editor-ui 0.1.1 → 0.2.1

package/README.md

@@ -4,7 +4,7 @@
 
 # @hlang-tech/editor-ui
 
-The Lumen design system for hlang: React components for a node editor built on React Flow and [`@hlang-tech/editor-react`](https://www.npmjs.com/package/@hlang-tech/editor-react). Black and silver surfaces, image and intent nodes, live edges, and the panels around the canvas.
+The Lumen design system for hlang: React components for a node editor built on React Flow and [`@hlang-tech/editor-react`](https://www.npmjs.com/package/@hlang-tech/editor-react). Black and silver surfaces, pill and asset node chrome, live edges, and the panels around the canvas. It is generic: products add their own node types through its extension points.
 
 [![npm](https://img.shields.io/npm/v/@hlang-tech/editor-ui?color=c8ccd4&labelColor=0f1114)](https://www.npmjs.com/package/@hlang-tech/editor-ui)
 [![license](https://img.shields.io/npm/l/@hlang-tech/editor-ui?color=c8ccd4&labelColor=0f1114)](https://github.com/hlang-tech/hlang/blob/main/LICENSE)
@@ -12,7 +12,7 @@ The Lumen design system for hlang: React components for a node editor built on R
 > **Status:** 0.x, in active development. The API can change in any minor release.
 
 <p align="center">
-  <img src="https://raw.githubusercontent.com/hlang-tech/hlang/main/media/lumen-editor.png" alt="The Lumen editor built with editor-ui" width="100%">
+  <img src="https://raw.githubusercontent.com/hlang-tech/hlang/main/media/lumen-editor.png" alt="The Lumen editor built with editor-ui, running a flow of generic stream nodes" width="100%">
 </p>
 
 ## Install

package/lib/canvas/CanvasDock.css

@@ -80,3 +80,30 @@
 .hl-dock-zoom:hover {
   background: rgba(255, 255, 255, 0.07);
 }
+
+/* A narrow canvas (a phone, or an editor embedded in a column) gets a tighter
+   dock. Below 400px the zoom readout is the one fit-view control. */
+@container hl-canvas (max-width: 460px) {
+  .hl-dock {
+    bottom: 12px;
+    gap: 1px;
+    padding: 4px;
+  }
+  .hl-dock-btn {
+    width: 30px;
+    height: 30px;
+  }
+  .hl-dock-zoom {
+    min-width: 42px;
+    height: 30px;
+    padding: 0 6px;
+  }
+  .hl-dock-sep {
+    margin: 0 2px;
+  }
+}
+@container hl-canvas (max-width: 400px) {
+  .hl-dock-fit {
+    display: none;
+  }
+}

package/lib/index.d.mts

@@ -1,5 +1,5 @@
 import { NodeKind, EditorNode, PortDescriptor, EditorCore, NodeId, Diagnostic, ParamValue, NodeDescriptor, ParamBag, Endpoint, IConnectionValidator, Point, IExecutionHandle } from '@hlang-tech/editor-core';
-import { CSSProperties, ReactNode, ReactElement, MouseEvent } from 'react';
+import { CSSProperties, ReactNode, ReactElement, MouseEvent, RefObject } from 'react';
 import { NodeProps, EdgeProps, NodeTypes, EdgeTypes, OnConnectStart, OnConnectEnd } from '@xyflow/react';
 import { HlangRFNode, HlangRFEdge } from '@hlang-tech/editor-react';
 
@@ -735,11 +735,23 @@ declare function useNodeSearchTriggers(core: EditorCore, search: NodeSearchContr
  * service. Every action is a proper command, so it is itself undoable. The
  * listener is on `window` but SUPPRESSED while a text input / textarea /
  * contenteditable is focused, so typing never triggers a canvas action.
+ *
+ * When the editor is one part of a larger page, pass `scope`: shortcuts then
+ * fire only for keystrokes whose target is inside that element, and every other
+ * keystroke (copying page text, Backspace in a page control) is left untouched.
  */
 
 /** True when focus is in an editable field, where shortcuts must NOT fire. */
 declare function isEditableTarget(target: EventTarget | null): boolean;
-declare function useEditorHotkeys(core: EditorCore): void;
+interface EditorHotkeysOptions {
+    /**
+     * The element that owns the shortcuts. When given, only keystrokes whose
+     * target is inside it are handled; while it is not mounted, none are.
+     * Omit it when the editor fills the page.
+     */
+    readonly scope?: RefObject<HTMLElement | null>;
+}
+declare function useEditorHotkeys(core: EditorCore, options?: EditorHotkeysOptions): void;
 
 /**
  * `useNodeContextMenu` — controller for the right-click node menu. Holds only
@@ -968,4 +980,5 @@ declare function useNodeLiveState(nodeId: string): NodeLiveState;
 /** Subscribe to a single edge's flowing state. False when no store is present. */
 declare function useEdgeFlowing(edgeId: string): boolean;
 
-export { AssetGrid, type AssetGridProps, type AssetItem, AssetNodeChrome, type AssetNodeChromeProps, CanvasChrome, type CanvasChromeProps, CanvasDock, type CanvasDockProps, type CanvasMode, Cheatsheet, type CheatsheetProps, type ConnectableResult, type ContextMenuItem, DiagnosticBadge, type DiagnosticBadgeProps, type EdgeIndexEntry, EditorShell, type EditorShellProps, EditorUIThemeProvider, type EditorUIThemeProviderProps, EmptyState, type EmptyStateProps, FlowEdge, type FuzzyCandidate, type FuzzyMatch, type FuzzyResult, type HlangFlowTypes, HlangNode, InspectorPanel, type InspectorPanelProps, KIND_ROLE, KIND_TOKEN, LiveSignalProvider, type LiveSignalProviderProps, LiveSignalStore, type LiveSignalStoreDeps, NodeBodySlot, type NodeBodySlotProps, type NodeCandidate, NodeChrome, type NodeChromeProps, NodeContextMenu, type NodeContextMenuController, type NodeContextMenuProps, type NodeContextMenuState, type NodeInteraction, NodeInteractionProvider, type NodeInteractionProviderProps, type NodeLiveState, type NodeParamsHandle, NodeSearch, type NodeSearchController, type NodeSearchProps, type NodeSearchResult, type NodeSearchResultView, type NodeSearchState, type NodeSearchTriggerOptions, type NodeSearchTriggers, OutlineTree, type OutlineTreeProps, type ParamField, type ParamFieldBase, ParamForm, type ParamFormProps, type PendingConnection, PillNodeChrome, type PillNodeChromeProps, PortRow, type PortRowProps, PositionPanel, type PositionPanelProps, PreviewPanel, type PreviewPanelProps, type RailTab, RailTabs, type RailTabsProps, RunButton, type RunButtonProps, type ShortcutGroup, type ShortcutRow, SignalBar, TOKEN_NAMES, type ThemeOverride, type ToastApi, ToastProvider, type ToastProviderProps, type TokenName, ToolCluster, type ToolClusterProps, type ToolItem, Toolbar, ToolbarGhostButton, type ToolbarProps, ToolbarStat, UndoRedo, type UndoRedoProps, connectableCandidates, createHlangFlowTypes, createTheme, deriveParamSchema, descriptorCandidates, fuzzyRank, fuzzyScore, isEditableTarget, searchNodes, tokenVar, useEdgeFlowing, useEditorHotkeys, useLiveSignalStore, useLiveSignals, useNodeContextMenu, useNodeInteraction, useNodeLiveState, useNodeParams, useNodeSearch, useNodeSearchTriggers, useToast };
+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 };

package/lib/index.d.ts

@@ -1,5 +1,5 @@
 import { NodeKind, EditorNode, PortDescriptor, EditorCore, NodeId, Diagnostic, ParamValue, NodeDescriptor, ParamBag, Endpoint, IConnectionValidator, Point, IExecutionHandle } from '@hlang-tech/editor-core';
-import { CSSProperties, ReactNode, ReactElement, MouseEvent } from 'react';
+import { CSSProperties, ReactNode, ReactElement, MouseEvent, RefObject } from 'react';
 import { NodeProps, EdgeProps, NodeTypes, EdgeTypes, OnConnectStart, OnConnectEnd } from '@xyflow/react';
 import { HlangRFNode, HlangRFEdge } from '@hlang-tech/editor-react';
 
@@ -735,11 +735,23 @@ declare function useNodeSearchTriggers(core: EditorCore, search: NodeSearchContr
  * service. Every action is a proper command, so it is itself undoable. The
  * listener is on `window` but SUPPRESSED while a text input / textarea /
  * contenteditable is focused, so typing never triggers a canvas action.
+ *
+ * When the editor is one part of a larger page, pass `scope`: shortcuts then
+ * fire only for keystrokes whose target is inside that element, and every other
+ * keystroke (copying page text, Backspace in a page control) is left untouched.
  */
 
 /** True when focus is in an editable field, where shortcuts must NOT fire. */
 declare function isEditableTarget(target: EventTarget | null): boolean;
-declare function useEditorHotkeys(core: EditorCore): void;
+interface EditorHotkeysOptions {
+    /**
+     * The element that owns the shortcuts. When given, only keystrokes whose
+     * target is inside it are handled; while it is not mounted, none are.
+     * Omit it when the editor fills the page.
+     */
+    readonly scope?: RefObject<HTMLElement | null>;
+}
+declare function useEditorHotkeys(core: EditorCore, options?: EditorHotkeysOptions): void;
 
 /**
  * `useNodeContextMenu` — controller for the right-click node menu. Holds only
@@ -968,4 +980,5 @@ declare function useNodeLiveState(nodeId: string): NodeLiveState;
 /** Subscribe to a single edge's flowing state. False when no store is present. */
 declare function useEdgeFlowing(edgeId: string): boolean;
 
-export { AssetGrid, type AssetGridProps, type AssetItem, AssetNodeChrome, type AssetNodeChromeProps, CanvasChrome, type CanvasChromeProps, CanvasDock, type CanvasDockProps, type CanvasMode, Cheatsheet, type CheatsheetProps, type ConnectableResult, type ContextMenuItem, DiagnosticBadge, type DiagnosticBadgeProps, type EdgeIndexEntry, EditorShell, type EditorShellProps, EditorUIThemeProvider, type EditorUIThemeProviderProps, EmptyState, type EmptyStateProps, FlowEdge, type FuzzyCandidate, type FuzzyMatch, type FuzzyResult, type HlangFlowTypes, HlangNode, InspectorPanel, type InspectorPanelProps, KIND_ROLE, KIND_TOKEN, LiveSignalProvider, type LiveSignalProviderProps, LiveSignalStore, type LiveSignalStoreDeps, NodeBodySlot, type NodeBodySlotProps, type NodeCandidate, NodeChrome, type NodeChromeProps, NodeContextMenu, type NodeContextMenuController, type NodeContextMenuProps, type NodeContextMenuState, type NodeInteraction, NodeInteractionProvider, type NodeInteractionProviderProps, type NodeLiveState, type NodeParamsHandle, NodeSearch, type NodeSearchController, type NodeSearchProps, type NodeSearchResult, type NodeSearchResultView, type NodeSearchState, type NodeSearchTriggerOptions, type NodeSearchTriggers, OutlineTree, type OutlineTreeProps, type ParamField, type ParamFieldBase, ParamForm, type ParamFormProps, type PendingConnection, PillNodeChrome, type PillNodeChromeProps, PortRow, type PortRowProps, PositionPanel, type PositionPanelProps, PreviewPanel, type PreviewPanelProps, type RailTab, RailTabs, type RailTabsProps, RunButton, type RunButtonProps, type ShortcutGroup, type ShortcutRow, SignalBar, TOKEN_NAMES, type ThemeOverride, type ToastApi, ToastProvider, type ToastProviderProps, type TokenName, ToolCluster, type ToolClusterProps, type ToolItem, Toolbar, ToolbarGhostButton, type ToolbarProps, ToolbarStat, UndoRedo, type UndoRedoProps, connectableCandidates, createHlangFlowTypes, createTheme, deriveParamSchema, descriptorCandidates, fuzzyRank, fuzzyScore, isEditableTarget, searchNodes, tokenVar, useEdgeFlowing, useEditorHotkeys, useLiveSignalStore, useLiveSignals, useNodeContextMenu, useNodeInteraction, useNodeLiveState, useNodeParams, useNodeSearch, useNodeSearchTriggers, useToast };
+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 };

package/lib/index.js

@@ -636,9 +636,8 @@ function PillNodeChrome({ node, selected }) {
     ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "span",
       {
-        className: "hl-pill-name nodrag",
-        onClick: (e) => {
-          e.stopPropagation();
+        className: "hl-pill-name",
+        onClick: () => {
           onNameClick();
         },
         title: "Double-click to rename",
@@ -962,7 +961,7 @@ function CanvasDock({
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { className: "hl-dock-btn", onClick: onZoomOut, title: "Zoom out", "aria-label": "Zoom out", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "hl-dock-glyph", children: "\u2212" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { className: "hl-dock-zoom hl-mono", onClick: onFitView, title: "Fit view", children: pct }),
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { className: "hl-dock-btn", onClick: onZoomIn, title: "Zoom in", "aria-label": "Zoom in", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "hl-dock-glyph", children: "+" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { className: "hl-dock-btn", onClick: onFitView, title: "Fit view", "aria-label": "Fit view", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FitIcon, {}) })
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { className: "hl-dock-btn hl-dock-fit", onClick: onFitView, title: "Fit view", "aria-label": "Fit view", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FitIcon, {}) })
   ] });
 }
 
@@ -1967,11 +1966,19 @@ function isEditableTarget(target) {
   const tag = target.tagName;
   return tag === "INPUT" || tag === "TEXTAREA" || target.isContentEditable;
 }
-function useEditorHotkeys(core) {
+function withinScope(target, scope) {
+  if (scope === void 0) {
+    return true;
+  }
+  const root = scope.current;
+  return root !== null && target instanceof Node && root.contains(target);
+}
+function useEditorHotkeys(core, options = {}) {
   const clipboard = (0, import_editor_react5.useClipboard)(core);
+  const { scope } = options;
   (0, import_react15.useEffect)(() => {
     const onKeyDown = (event) => {
-      if (isEditableTarget(event.target)) {
+      if (!withinScope(event.target, scope) || isEditableTarget(event.target)) {
         return;
       }
       const mod = event.metaKey || event.ctrlKey;
@@ -2028,7 +2035,7 @@ function useEditorHotkeys(core) {
     return () => {
       window.removeEventListener("keydown", onKeyDown);
     };
-  }, [core, clipboard]);
+  }, [core, clipboard, scope]);
 }
 
 // src/context-menu/NodeContextMenu.tsx
@@ -2256,10 +2263,14 @@ function Cheatsheet({ open, onClose, groups = DEFAULT_GROUPS }) {
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "hl-cheat-grid", children: groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("section", { className: "hl-cheat-group", children: [
             /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h3", { className: "hl-cheat-group-title hl-mono", children: group.title }),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ul", { className: "hl-cheat-rows", children: group.rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("li", { className: "hl-cheat-row", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "hl-cheat-label", children: row.label }),
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("kbd", { className: "hl-cheat-keys hl-mono", children: row.keys })
-            ] }, row.label)) })
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ul", { className: "hl-cheat-rows", children: group.rows.map((row) => (
+              // A row is a binding: one action can have several (two ways to pan),
+              // so neither the label nor the keys alone identify it.
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("li", { className: "hl-cheat-row", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "hl-cheat-label", children: row.label }),
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("kbd", { className: "hl-cheat-keys hl-mono", children: row.keys })
+              ] }, `${row.keys}\0${row.label}`)
+            )) })
           ] }, group.title)) })
         ]
       }