@oomol-lab/open-flow 0.1.0-beta.49 → 0.1.0-beta.50

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/browser/{flowWorkspace-C8QD_wbp.js → flowWorkspace-CjwpbVBR.js} +30 -32
  2. package/dist/browser/preview.css +70 -70
  3. package/dist/browser/preview.d.ts +1 -1
  4. package/dist/browser/preview.js +32 -34
  5. package/dist/browser/workbench.css +70 -70
  6. package/dist/browser/workbench.js +1 -1
  7. package/package.json +1 -1
package/dist/browser/{flowWorkspace-C8QD_wbp.js → flowWorkspace-CjwpbVBR.js} RENAMED
@@ -49768,27 +49768,27 @@ var fitViewOptions = {
49768
49768
  maxZoom: 1
49769
49769
  };
49770
49770
  var ReactFlowContainer_module_default = {
49771
- container: "ReactFlowContainer_container_c4c2b",
49772
- flow: "ReactFlowContainer_flow_c4c2b",
49773
- contextMenu: "ReactFlowContainer_contextMenu_c4c2b",
49774
- movingLayout: "ReactFlowContainer_movingLayout_c4c2b",
49775
- layoutPending: "ReactFlowContainer_layoutPending_c4c2b",
49776
- dock: "ReactFlowContainer_dock_c4c2b",
49777
- viewDock: "ReactFlowContainer_viewDock_c4c2b",
49778
- expandedViewControls: "ReactFlowContainer_expandedViewControls_c4c2b",
49779
- viewOptionButtons: "ReactFlowContainer_viewOptionButtons_c4c2b",
49780
- compactViewControls: "ReactFlowContainer_compactViewControls_c4c2b",
49781
- createDock: "ReactFlowContainer_createDock_c4c2b",
49782
- zoomValue: "ReactFlowContainer_zoomValue_c4c2b",
49783
- interactiveModeTrigger: "ReactFlowContainer_interactiveModeTrigger_c4c2b",
49784
- interactiveModePanel: "ReactFlowContainer_interactiveModePanel_c4c2b",
49785
- interactiveModeChoices: "ReactFlowContainer_interactiveModeChoices_c4c2b",
49786
- interactiveModeChoice: "ReactFlowContainer_interactiveModeChoice_c4c2b",
49787
- dockActions: "ReactFlowContainer_dockActions_c4c2b",
49788
- miniMap: "ReactFlowContainer_miniMap_c4c2b",
49789
- viewOptions: "ReactFlowContainer_viewOptions_c4c2b",
49790
- viewOptionsClip: "ReactFlowContainer_viewOptionsClip_c4c2b",
49791
- viewSeparator: "ReactFlowContainer_viewSeparator_c4c2b"
49771
+ container: "ReactFlowContainer_container_ebe22",
49772
+ flow: "ReactFlowContainer_flow_ebe22",
49773
+ contextMenu: "ReactFlowContainer_contextMenu_ebe22",
49774
+ movingLayout: "ReactFlowContainer_movingLayout_ebe22",
49775
+ layoutPending: "ReactFlowContainer_layoutPending_ebe22",
49776
+ dock: "ReactFlowContainer_dock_ebe22",
49777
+ viewDock: "ReactFlowContainer_viewDock_ebe22",
49778
+ expandedViewControls: "ReactFlowContainer_expandedViewControls_ebe22",
49779
+ viewOptionButtons: "ReactFlowContainer_viewOptionButtons_ebe22",
49780
+ compactViewControls: "ReactFlowContainer_compactViewControls_ebe22",
49781
+ createDock: "ReactFlowContainer_createDock_ebe22",
49782
+ zoomValue: "ReactFlowContainer_zoomValue_ebe22",
49783
+ interactiveModeTrigger: "ReactFlowContainer_interactiveModeTrigger_ebe22",
49784
+ interactiveModePanel: "ReactFlowContainer_interactiveModePanel_ebe22",
49785
+ interactiveModeChoices: "ReactFlowContainer_interactiveModeChoices_ebe22",
49786
+ interactiveModeChoice: "ReactFlowContainer_interactiveModeChoice_ebe22",
49787
+ dockActions: "ReactFlowContainer_dockActions_ebe22",
49788
+ miniMap: "ReactFlowContainer_miniMap_ebe22",
49789
+ viewOptions: "ReactFlowContainer_viewOptions_ebe22",
49790
+ viewOptionsClip: "ReactFlowContainer_viewOptionsClip_ebe22",
49791
+ viewSeparator: "ReactFlowContainer_viewSeparator_ebe22"
49792
49792
  };
49793
49793
  //#endregion
49794
49794
  //#region src/canvas/browser/base/dragNDrop.ts
@@ -50874,6 +50874,7 @@ var ReactFlowContainerInner = (props) => {
50874
50874
  },
50875
50875
  deleteKeyCode: null,
50876
50876
  zoomActivationKeyCode: null,
50877
+ multiSelectionKeyCode: editable ? void 0 : null,
50877
50878
  zoomOnDoubleClick: false,
50878
50879
  nodeClickDistance: 1,
50879
50880
  selectionMode: SelectionMode.Partial,
@@ -51108,7 +51109,7 @@ function tooShort(from, to) {
51108
51109
  }
51109
51110
  //#endregion
51110
51111
  //#region src/canvas/browser/graph/FlowCanvas/FlowCanvas.tsx
51111
- var FlowCanvas = ({ flowCanvasStore, onActivateSelection, onSelectionStart, onSelectionEnd, onInspectSelection, inspectorOpen = false, onRequestAddNode, cornerTools, cornerLeading, topLeftTools, bottomRightTools, toolbar, dark, fitView, nodesDraggable, layoutMotion, className, addNodeRequest, addItemRequest, onMoveEnd, onNodeDragStop, onSelectionChange, isValidConnection, onDropAddItem }) => {
51112
+ var FlowCanvas = ({ flowCanvasStore, onActivateSelection, onSelectionStart, onSelectionEnd, onInspectSelection, inspectorOpen = false, onRequestAddNode, cornerTools, cornerLeading, topLeftTools, bottomRightTools, toolbar, dark, dottedBackground, fitView, nodesDraggable, layoutMotion, className, addNodeRequest, addItemRequest, onMoveEnd, onNodeDragStop, onSelectionChange, isValidConnection, onDropAddItem }) => {
51112
51113
  const editable = useVal(flowCanvasStore.$.editable);
51113
51114
  const nodeMiniMapPhase = useVal(flowCanvasStore.$.nodeMiniMapPhase);
51114
51115
  useEffect(flowCanvasStore.setupForceDelete, []);
@@ -51133,7 +51134,7 @@ var FlowCanvas = ({ flowCanvasStore, onActivateSelection, onSelectionStart, onSe
51133
51134
  className,
51134
51135
  i18n: flowCanvasStore.i18n,
51135
51136
  dark,
51136
- dottedBackground: editable,
51137
+ dottedBackground: dottedBackground ?? editable,
51137
51138
  fitView: fitView ?? !editable,
51138
51139
  fitViewOptions,
51139
51140
  layoutMotion,
@@ -51265,6 +51266,7 @@ function FlowCanvasView(props) {
51265
51266
  addNodeRequest: props.addNodeRequest,
51266
51267
  className: props.className,
51267
51268
  dark: props.dark ?? false,
51269
+ dottedBackground: props.dottedBackground,
51268
51270
  fitView: props.fitView ?? false,
51269
51271
  nodesDraggable: props.nodesDraggable ?? props.editable,
51270
51272
  flowCanvasStore: store,
@@ -52076,7 +52078,7 @@ function changeRevisionCanvasSession(session, graphId, change) {
52076
52078
  //#endregion
52077
52079
  //#region src/workbench/browser/runtime/editor/revisionCanvas.tsx
52078
52080
  /** The parent keys this session by snapshot identity. All movement is disposable view state. */
52079
- function RevisionCanvas({ draft, presentation, theme, interactiveMode$, label, striped = true, showHeader = true }) {
52081
+ function RevisionCanvas({ draft, presentation, theme, interactiveMode$, label, background = "striped", showHeader = true }) {
52080
52082
  const root = useRef(null);
52081
52083
  const t = useTranslate();
52082
52084
  const language = useLang();
@@ -52113,10 +52115,6 @@ function RevisionCanvas({ draft, presentation, theme, interactiveMode$, label, s
52113
52115
  };
52114
52116
  const selection = selected.length === 1 ? revision.node(target, selected[0]) : void 0;
52115
52117
  const comment = selected.length === 1 ? model.nodes.find((node) => node.id === selected[0] && node.kind === "comment") : void 0;
52116
- const inspect = (ids) => {
52117
- setSelected(ids);
52118
- setInspectorOpen(true);
52119
- };
52120
52118
  const navigation = target.kind === "subflow" || presentation == null || moved ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
52121
52119
  target.kind === "subflow" && /* @__PURE__ */ jsx(Button$1, {
52122
52120
  size: "xs",
@@ -52164,9 +52162,10 @@ function RevisionCanvas({ draft, presentation, theme, interactiveMode$, label, s
52164
52162
  identity: graphId,
52165
52163
  model,
52166
52164
  editable: false,
52165
+ dottedBackground: background === "dotted",
52167
52166
  nodesDraggable: true,
52168
52167
  fitView: session?.viewport == null,
52169
- className: striped ? "open-flow-canvas-locked" : void 0,
52168
+ className: background === "striped" ? "open-flow-canvas-locked" : void 0,
52170
52169
  dark: theme === "dark",
52171
52170
  language,
52172
52171
  interactiveMode$,
@@ -52182,8 +52181,7 @@ function RevisionCanvas({ draft, presentation, theme, interactiveMode$, label, s
52182
52181
  viewport
52183
52182
  })),
52184
52183
  onSelectionChange: setSelected,
52185
- onActivateSelection: inspect,
52186
- onInspectSelection: () => setInspectorOpen(true),
52184
+ onInspectSelection: () => setInspectorOpen((open) => !open),
52187
52185
  inspectorOpen,
52188
52186
  toolbar: showHeader ? void 0 : navigation,
52189
52187
  cornerTools: /* @__PURE__ */ jsx(WorkbenchInspectorToggle, {
@@ -52221,7 +52219,7 @@ function RevisionCanvas({ draft, presentation, theme, interactiveMode$, label, s
52221
52219
  readOnly: true
52222
52220
  }, comment.id) : /* @__PURE__ */ jsx(FlowNodeList, {
52223
52221
  nodes: selected.length > 1 ? model.nodes.filter((node) => selected.includes(node.id)) : model.nodes,
52224
- onSelect: (id) => inspect([id]),
52222
+ onSelect: (id) => setSelected([id]),
52225
52223
  onFocusNode: (nodeId) => {
52226
52224
  setSelected([nodeId]);
52227
52225
  setFocus({
package/dist/browser/preview.css CHANGED
@@ -10992,163 +10992,163 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
10992
10992
  }
10993
10993
  .open-flow-canvas-node-minimap2 .NodeMinimap_wrapper_e79d7 {
10994
10994
  font-size: calc(0.75rem * var(--open-flow-canvas-scale, 1));
10995
- }.ReactFlowContainer_container_c4c2b {
10995
+ }.ReactFlowContainer_container_ebe22 {
10996
10996
  width: 100%;
10997
10997
  height: 100%;
10998
10998
  position: relative;
10999
10999
  container: open-flow-canvas-controls/inline-size;
11000
11000
  }
11001
11001
 
11002
- .ReactFlowContainer_flow_c4c2b {
11002
+ .ReactFlowContainer_flow_ebe22 {
11003
11003
  position: relative;
11004
11004
  outline: none !important;
11005
11005
  scrollbar-color: rgba(121, 121, 121, 0.4) transparent;
11006
- background-color: var(--flow-bg);
11006
+ --xy-background-color: var(--flow-bg);
11007
11007
  }
11008
- .ReactFlowContainer_flow_c4c2b.react-flow.open-flow-canvas {
11008
+ .ReactFlowContainer_flow_ebe22.react-flow.open-flow-canvas {
11009
11009
  --xy-edge-stroke-width-default: 2;
11010
11010
  }
11011
- .ReactFlowContainer_flow_c4c2b ::-webkit-scrollbar-corner,
11012
- .ReactFlowContainer_flow_c4c2b ::-webkit-resizer {
11011
+ .ReactFlowContainer_flow_ebe22 ::-webkit-scrollbar-corner,
11012
+ .ReactFlowContainer_flow_ebe22 ::-webkit-resizer {
11013
11013
  border: none;
11014
11014
  outline: none;
11015
11015
  background: no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 36 36'%3E%3Ccircle cx='12' cy='24' r='1.5' fill='%23888888' class='clr-i-outline clr-i-outline-path-1'/%3E%3Ccircle cx='18' cy='24' r='1.5' fill='%23888888' class='clr-i-outline clr-i-outline-path-2'/%3E%3Ccircle cx='18' cy='18' r='1.5' fill='%23888888' class='clr-i-outline clr-i-outline-path-3'/%3E%3Ccircle cx='24' cy='12' r='1.5' fill='%23888888' class='clr-i-outline clr-i-outline-path-4'/%3E%3Ccircle cx='24' cy='24' r='1.5' fill='%23888888' class='clr-i-outline clr-i-outline-path-5'/%3E%3Ccircle cx='24' cy='18' r='1.5' fill='%23888888' class='clr-i-outline clr-i-outline-path-6'/%3E%3Cpath fill='none' d='M0 0h36v36H0z'/%3E%3C/svg%3E");
11016
11016
  }
11017
- .ReactFlowContainer_flow_c4c2b > .react-flow__renderer {
11017
+ .ReactFlowContainer_flow_ebe22 > .react-flow__renderer {
11018
11018
  overflow: clip;
11019
11019
  }
11020
- .ReactFlowContainer_flow_c4c2b *,
11021
- .ReactFlowContainer_flow_c4c2b *::before,
11022
- .ReactFlowContainer_flow_c4c2b *::after {
11020
+ .ReactFlowContainer_flow_ebe22 *,
11021
+ .ReactFlowContainer_flow_ebe22 *::before,
11022
+ .ReactFlowContainer_flow_ebe22 *::after {
11023
11023
  box-sizing: border-box;
11024
11024
  }
11025
- .ReactFlowContainer_flow_c4c2b .react-flow__pane.selection,
11026
- .ReactFlowContainer_flow_c4c2b .react-flow__node,
11027
- .ReactFlowContainer_flow_c4c2b .react-flow__edge {
11025
+ .ReactFlowContainer_flow_ebe22 .react-flow__pane.selection,
11026
+ .ReactFlowContainer_flow_ebe22 .react-flow__node,
11027
+ .ReactFlowContainer_flow_ebe22 .react-flow__edge {
11028
11028
  cursor: auto !important;
11029
11029
  }
11030
- .ReactFlowContainer_flow_c4c2b.touchpad .react-flow__pane.draggable .react-flow__node {
11030
+ .ReactFlowContainer_flow_ebe22.touchpad .react-flow__pane.draggable .react-flow__node {
11031
11031
  pointer-events: none !important;
11032
11032
  }
11033
- .ReactFlowContainer_flow_c4c2b .react-flow__controls {
11033
+ .ReactFlowContainer_flow_ebe22 .react-flow__controls {
11034
11034
  width: auto;
11035
11035
  overflow: visible;
11036
11036
  }
11037
- .ReactFlowContainer_flow_c4c2b .react-flow__controls-button path {
11037
+ .ReactFlowContainer_flow_ebe22 .react-flow__controls-button path {
11038
11038
  fill: currentColor;
11039
11039
  }
11040
- .ReactFlowContainer_flow_c4c2b .react-flow__nodesselection-rect:focus,
11041
- .ReactFlowContainer_flow_c4c2b .react-flow__nodesselection-rect:focus-visible,
11042
- .ReactFlowContainer_flow_c4c2b .react-flow__selection:focus,
11043
- .ReactFlowContainer_flow_c4c2b .react-flow__selection:focus-visible {
11040
+ .ReactFlowContainer_flow_ebe22 .react-flow__nodesselection-rect:focus,
11041
+ .ReactFlowContainer_flow_ebe22 .react-flow__nodesselection-rect:focus-visible,
11042
+ .ReactFlowContainer_flow_ebe22 .react-flow__selection:focus,
11043
+ .ReactFlowContainer_flow_ebe22 .react-flow__selection:focus-visible {
11044
11044
  outline: none !important;
11045
11045
  }
11046
- .ReactFlowContainer_flow_c4c2b:has(.ReactFlowContainer_contextMenu_c4c2b) .react-flow__nodesselection-rect {
11046
+ .ReactFlowContainer_flow_ebe22:has(.ReactFlowContainer_contextMenu_ebe22) .react-flow__nodesselection-rect {
11047
11047
  pointer-events: none;
11048
11048
  }
11049
- .ReactFlowContainer_flow_c4c2b .react-flow__viewport > .isolate {
11049
+ .ReactFlowContainer_flow_ebe22 .react-flow__viewport > .isolate {
11050
11050
  pointer-events: all;
11051
11051
  }
11052
- .ReactFlowContainer_flow_c4c2b button > i {
11052
+ .ReactFlowContainer_flow_ebe22 button > i {
11053
11053
  cursor: inherit;
11054
11054
  }
11055
11055
 
11056
- .ReactFlowContainer_movingLayout_c4c2b .react-flow__node {
11056
+ .ReactFlowContainer_movingLayout_ebe22 .react-flow__node {
11057
11057
  transition: transform var(--layout-transition-duration) cubic-bezier(0.22, 1, 0.36, 1);
11058
11058
  }
11059
11059
 
11060
- .ReactFlowContainer_layoutPending_c4c2b .react-flow__viewport {
11060
+ .ReactFlowContainer_layoutPending_ebe22 .react-flow__viewport {
11061
11061
  opacity: 0;
11062
11062
  }
11063
11063
 
11064
11064
  @media (prefers-reduced-motion: reduce) {
11065
- .ReactFlowContainer_movingLayout_c4c2b .react-flow__node {
11065
+ .ReactFlowContainer_movingLayout_ebe22 .react-flow__node {
11066
11066
  transition: none;
11067
11067
  }
11068
- .ReactFlowContainer_flow_c4c2b .react-flow__controls-button {
11068
+ .ReactFlowContainer_flow_ebe22 .react-flow__controls-button {
11069
11069
  transition: none;
11070
11070
  }
11071
11071
  }
11072
- .ReactFlowContainer_contextMenu_c4c2b {
11072
+ .ReactFlowContainer_contextMenu_ebe22 {
11073
11073
  min-width: 176px;
11074
11074
  padding: 6px;
11075
11075
  border-radius: calc(var(--open-flow-radius) + 2px);
11076
11076
  }
11077
- .ReactFlowContainer_contextMenu_c4c2b [data-slot$='menu-item'] {
11077
+ .ReactFlowContainer_contextMenu_ebe22 [data-slot$='menu-item'] {
11078
11078
  min-height: 28px;
11079
11079
  gap: 8px;
11080
11080
  padding: 4px 10px;
11081
11081
  border-radius: var(--open-flow-radius);
11082
11082
  }
11083
- .ReactFlowContainer_contextMenu_c4c2b [data-slot$='menu-item'] > i,
11084
- .ReactFlowContainer_contextMenu_c4c2b [data-slot$='menu-item'] > svg {
11083
+ .ReactFlowContainer_contextMenu_ebe22 [data-slot$='menu-item'] > i,
11084
+ .ReactFlowContainer_contextMenu_ebe22 [data-slot$='menu-item'] > svg {
11085
11085
  flex: 0 0 16px;
11086
11086
  width: 16px;
11087
11087
  height: 16px;
11088
11088
  }
11089
11089
 
11090
- .ReactFlowContainer_dock_c4c2b {
11090
+ .ReactFlowContainer_dock_ebe22 {
11091
11091
  margin-bottom: 22px;
11092
11092
  max-width: calc(100% - 32px);
11093
11093
  }
11094
11094
 
11095
- .ReactFlowContainer_viewDock_c4c2b {
11095
+ .ReactFlowContainer_viewDock_ebe22 {
11096
11096
  z-index: 6;
11097
11097
  }
11098
- .ReactFlowContainer_viewDock_c4c2b > [data-size] {
11098
+ .ReactFlowContainer_viewDock_ebe22 > [data-size] {
11099
11099
  height: 28px;
11100
11100
  width: 28px;
11101
11101
  }
11102
- .ReactFlowContainer_viewDock_c4c2b [data-size] {
11102
+ .ReactFlowContainer_viewDock_ebe22 [data-size] {
11103
11103
  color: var(--ui-muted-foreground);
11104
11104
  }
11105
- .ReactFlowContainer_viewDock_c4c2b [data-size]:is(:hover, :focus-visible) {
11105
+ .ReactFlowContainer_viewDock_ebe22 [data-size]:is(:hover, :focus-visible) {
11106
11106
  color: var(--ui-foreground);
11107
11107
  }
11108
- .ReactFlowContainer_viewDock_c4c2b [data-size] > i {
11108
+ .ReactFlowContainer_viewDock_ebe22 [data-size] > i {
11109
11109
  width: 16px;
11110
11110
  height: 16px;
11111
11111
  flex: none;
11112
11112
  font-size: 16px;
11113
11113
  }
11114
11114
 
11115
- .ReactFlowContainer_expandedViewControls_c4c2b,
11116
- .ReactFlowContainer_viewOptionButtons_c4c2b {
11115
+ .ReactFlowContainer_expandedViewControls_ebe22,
11116
+ .ReactFlowContainer_viewOptionButtons_ebe22 {
11117
11117
  display: flex;
11118
11118
  align-items: center;
11119
11119
  gap: 2px;
11120
11120
  }
11121
- .ReactFlowContainer_expandedViewControls_c4c2b > [data-size],
11122
- .ReactFlowContainer_viewOptionButtons_c4c2b > [data-size] {
11121
+ .ReactFlowContainer_expandedViewControls_ebe22 > [data-size],
11122
+ .ReactFlowContainer_viewOptionButtons_ebe22 > [data-size] {
11123
11123
  height: 28px;
11124
11124
  }
11125
- .ReactFlowContainer_expandedViewControls_c4c2b > [data-size=icon],
11126
- .ReactFlowContainer_viewOptionButtons_c4c2b > [data-size=icon] {
11125
+ .ReactFlowContainer_expandedViewControls_ebe22 > [data-size=icon],
11126
+ .ReactFlowContainer_viewOptionButtons_ebe22 > [data-size=icon] {
11127
11127
  width: 28px;
11128
11128
  }
11129
11129
 
11130
- .ReactFlowContainer_compactViewControls_c4c2b {
11130
+ .ReactFlowContainer_compactViewControls_ebe22 {
11131
11131
  display: none;
11132
11132
  }
11133
- .ReactFlowContainer_compactViewControls_c4c2b [data-size] {
11133
+ .ReactFlowContainer_compactViewControls_ebe22 [data-size] {
11134
11134
  height: 28px;
11135
11135
  font-size: 11px;
11136
11136
  font-variant-numeric: tabular-nums;
11137
11137
  }
11138
11138
 
11139
11139
  @container open-flow-canvas-controls (width <= 900px) {
11140
- .ReactFlowContainer_viewDock_c4c2b[data-readonly=false] .ReactFlowContainer_expandedViewControls_c4c2b {
11140
+ .ReactFlowContainer_viewDock_ebe22[data-readonly=false] .ReactFlowContainer_expandedViewControls_ebe22 {
11141
11141
  display: none;
11142
11142
  }
11143
- .ReactFlowContainer_viewDock_c4c2b[data-readonly=false] .ReactFlowContainer_compactViewControls_c4c2b {
11143
+ .ReactFlowContainer_viewDock_ebe22[data-readonly=false] .ReactFlowContainer_compactViewControls_ebe22 {
11144
11144
  display: block;
11145
11145
  }
11146
11146
  }
11147
- .ReactFlowContainer_createDock_c4c2b {
11147
+ .ReactFlowContainer_createDock_ebe22 {
11148
11148
  gap: 5px;
11149
11149
  }
11150
11150
 
11151
- .ReactFlowContainer_zoomValue_c4c2b {
11151
+ .ReactFlowContainer_zoomValue_ebe22 {
11152
11152
  min-width: 40px;
11153
11153
  padding-inline: 5px;
11154
11154
  color: var(--ui-muted-foreground);
@@ -11156,26 +11156,26 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
11156
11156
  font-variant-numeric: tabular-nums;
11157
11157
  }
11158
11158
 
11159
- .ReactFlowContainer_interactiveModeTrigger_c4c2b > [data-mode-icon] {
11159
+ .ReactFlowContainer_interactiveModeTrigger_ebe22 > [data-mode-icon] {
11160
11160
  width: 16px;
11161
11161
  height: 16px;
11162
11162
  flex: none;
11163
11163
  font-size: 16px;
11164
11164
  }
11165
11165
 
11166
- .ReactFlowContainer_interactiveModePanel_c4c2b.ReactFlowContainer_interactiveModePanel_c4c2b {
11166
+ .ReactFlowContainer_interactiveModePanel_ebe22.ReactFlowContainer_interactiveModePanel_ebe22 {
11167
11167
  width: min(360px, 100cqw - 32px);
11168
11168
  padding: 10px;
11169
11169
  }
11170
11170
 
11171
- .ReactFlowContainer_interactiveModeChoices_c4c2b.ReactFlowContainer_interactiveModeChoices_c4c2b {
11171
+ .ReactFlowContainer_interactiveModeChoices_ebe22.ReactFlowContainer_interactiveModeChoices_ebe22 {
11172
11172
  display: grid;
11173
11173
  width: 100%;
11174
11174
  grid-template-columns: repeat(2, minmax(0, 1fr));
11175
11175
  gap: 8px;
11176
11176
  }
11177
11177
 
11178
- .ReactFlowContainer_interactiveModeChoice_c4c2b.ReactFlowContainer_interactiveModeChoice_c4c2b {
11178
+ .ReactFlowContainer_interactiveModeChoice_ebe22.ReactFlowContainer_interactiveModeChoice_ebe22 {
11179
11179
  width: 100%;
11180
11180
  height: auto;
11181
11181
  min-height: 140px;
@@ -11186,56 +11186,56 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
11186
11186
  text-align: center;
11187
11187
  white-space: normal;
11188
11188
  }
11189
- .ReactFlowContainer_interactiveModeChoice_c4c2b.ReactFlowContainer_interactiveModeChoice_c4c2b[aria-checked=true] {
11189
+ .ReactFlowContainer_interactiveModeChoice_ebe22.ReactFlowContainer_interactiveModeChoice_ebe22[aria-checked=true] {
11190
11190
  border-color: var(--ui-primary);
11191
11191
  background: var(--ui-secondary);
11192
11192
  color: var(--ui-foreground);
11193
11193
  }
11194
- .ReactFlowContainer_interactiveModeChoice_c4c2b.ReactFlowContainer_interactiveModeChoice_c4c2b > i {
11194
+ .ReactFlowContainer_interactiveModeChoice_ebe22.ReactFlowContainer_interactiveModeChoice_ebe22 > i {
11195
11195
  color: var(--ui-muted-foreground);
11196
11196
  width: 28px;
11197
11197
  height: 28px;
11198
11198
  font-size: 28px;
11199
11199
  }
11200
- .ReactFlowContainer_interactiveModeChoice_c4c2b.ReactFlowContainer_interactiveModeChoice_c4c2b:is(:hover, :focus-visible, [aria-checked=true]) > i {
11200
+ .ReactFlowContainer_interactiveModeChoice_ebe22.ReactFlowContainer_interactiveModeChoice_ebe22:is(:hover, :focus-visible, [aria-checked=true]) > i {
11201
11201
  color: var(--ui-foreground);
11202
11202
  }
11203
- .ReactFlowContainer_interactiveModeChoice_c4c2b.ReactFlowContainer_interactiveModeChoice_c4c2b > strong {
11203
+ .ReactFlowContainer_interactiveModeChoice_ebe22.ReactFlowContainer_interactiveModeChoice_ebe22 > strong {
11204
11204
  font-size: 13px;
11205
11205
  font-weight: 500;
11206
11206
  line-height: 1.5;
11207
11207
  }
11208
- .ReactFlowContainer_interactiveModeChoice_c4c2b.ReactFlowContainer_interactiveModeChoice_c4c2b > span {
11208
+ .ReactFlowContainer_interactiveModeChoice_ebe22.ReactFlowContainer_interactiveModeChoice_ebe22 > span {
11209
11209
  color: var(--ui-muted-foreground);
11210
11210
  font-size: 12px;
11211
11211
  font-weight: 400;
11212
11212
  line-height: 1.5;
11213
11213
  }
11214
11214
 
11215
- .ReactFlowContainer_dockActions_c4c2b {
11215
+ .ReactFlowContainer_dockActions_ebe22 {
11216
11216
  display: flex;
11217
11217
  align-items: center;
11218
11218
  gap: 5px;
11219
11219
  }
11220
11220
 
11221
11221
  @container open-flow-workbench (max-width: 720px) {
11222
- .ReactFlowContainer_dock_c4c2b {
11222
+ .ReactFlowContainer_dock_ebe22 {
11223
11223
  padding: 5px;
11224
11224
  margin-bottom: 14px;
11225
11225
  }
11226
- .ReactFlowContainer_dockActions_c4c2b {
11226
+ .ReactFlowContainer_dockActions_ebe22 {
11227
11227
  gap: 3px;
11228
11228
  }
11229
11229
  }
11230
11230
  @container open-flow-workbench (max-width: 560px) {
11231
- .ReactFlowContainer_interactiveModeChoices_c4c2b.ReactFlowContainer_interactiveModeChoices_c4c2b {
11231
+ .ReactFlowContainer_interactiveModeChoices_ebe22.ReactFlowContainer_interactiveModeChoices_ebe22 {
11232
11232
  grid-template-columns: 1fr;
11233
11233
  }
11234
- .ReactFlowContainer_interactiveModeChoice_c4c2b.ReactFlowContainer_interactiveModeChoice_c4c2b {
11234
+ .ReactFlowContainer_interactiveModeChoice_ebe22.ReactFlowContainer_interactiveModeChoice_ebe22 {
11235
11235
  min-height: 120px;
11236
11236
  }
11237
11237
  }
11238
- .ReactFlowContainer_miniMap_c4c2b.react-flow__panel {
11238
+ .ReactFlowContainer_miniMap_ebe22.react-flow__panel {
11239
11239
  bottom: calc(100% + 8px);
11240
11240
  left: 0;
11241
11241
  margin: 0;
@@ -11245,29 +11245,29 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
11245
11245
  border-radius: var(--ui-radius);
11246
11246
  }
11247
11247
 
11248
- .ReactFlowContainer_viewOptions_c4c2b {
11248
+ .ReactFlowContainer_viewOptions_ebe22 {
11249
11249
  display: grid;
11250
11250
  grid-template-columns: 0fr;
11251
11251
  opacity: 0;
11252
11252
  visibility: hidden;
11253
11253
  transition: grid-template-columns 180ms ease, opacity 180ms ease, visibility 180ms;
11254
11254
  }
11255
- .ReactFlowContainer_viewOptions_c4c2b[data-expanded=true] {
11255
+ .ReactFlowContainer_viewOptions_ebe22[data-expanded=true] {
11256
11256
  grid-template-columns: 1fr;
11257
11257
  opacity: 1;
11258
11258
  visibility: visible;
11259
11259
  }
11260
11260
 
11261
- .ReactFlowContainer_viewOptionsClip_c4c2b {
11261
+ .ReactFlowContainer_viewOptionsClip_ebe22 {
11262
11262
  min-width: 0;
11263
11263
  overflow: hidden;
11264
11264
  }
11265
11265
 
11266
- .ReactFlowContainer_viewOptionButtons_c4c2b {
11266
+ .ReactFlowContainer_viewOptionButtons_ebe22 {
11267
11267
  width: max-content;
11268
11268
  }
11269
11269
 
11270
- .ReactFlowContainer_viewSeparator_c4c2b {
11270
+ .ReactFlowContainer_viewSeparator_ebe22 {
11271
11271
  width: 1px;
11272
11272
  height: 16px;
11273
11273
  margin-inline: 4px;
@@ -11275,7 +11275,7 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
11275
11275
  }
11276
11276
 
11277
11277
  @media (prefers-reduced-motion: reduce) {
11278
- .ReactFlowContainer_viewOptions_c4c2b {
11278
+ .ReactFlowContainer_viewOptions_ebe22 {
11279
11279
  transition: none;
11280
11280
  }
11281
11281
  }.open-flow-canvas-root :where(.react-flow__controls, [data-canvas-control-scope]) {
package/dist/browser/preview.d.ts CHANGED
@@ -11,5 +11,5 @@ export interface OpenFlowPreviewProps {
11
11
  readonly label?: string;
12
12
  readonly className?: string;
13
13
  }
14
- /** Offline publication preview. Use a React key to start a new layout/selection session. */
14
+ /** Offline workflow preview. Use a React key to start a new layout/selection session. */
15
15
  export declare function OpenFlowPreview({ draft, presentation, language, theme, label, className }: OpenFlowPreviewProps): ReactElement;
package/dist/browser/preview.js CHANGED
@@ -46055,27 +46055,27 @@ var fitViewOptions = {
46055
46055
  maxZoom: 1
46056
46056
  };
46057
46057
  var ReactFlowContainer_module_default = {
46058
- container: "ReactFlowContainer_container_c4c2b",
46059
- flow: "ReactFlowContainer_flow_c4c2b",
46060
- contextMenu: "ReactFlowContainer_contextMenu_c4c2b",
46061
- movingLayout: "ReactFlowContainer_movingLayout_c4c2b",
46062
- layoutPending: "ReactFlowContainer_layoutPending_c4c2b",
46063
- dock: "ReactFlowContainer_dock_c4c2b",
46064
- viewDock: "ReactFlowContainer_viewDock_c4c2b",
46065
- expandedViewControls: "ReactFlowContainer_expandedViewControls_c4c2b",
46066
- viewOptionButtons: "ReactFlowContainer_viewOptionButtons_c4c2b",
46067
- compactViewControls: "ReactFlowContainer_compactViewControls_c4c2b",
46068
- createDock: "ReactFlowContainer_createDock_c4c2b",
46069
- zoomValue: "ReactFlowContainer_zoomValue_c4c2b",
46070
- interactiveModeTrigger: "ReactFlowContainer_interactiveModeTrigger_c4c2b",
46071
- interactiveModePanel: "ReactFlowContainer_interactiveModePanel_c4c2b",
46072
- interactiveModeChoices: "ReactFlowContainer_interactiveModeChoices_c4c2b",
46073
- interactiveModeChoice: "ReactFlowContainer_interactiveModeChoice_c4c2b",
46074
- dockActions: "ReactFlowContainer_dockActions_c4c2b",
46075
- miniMap: "ReactFlowContainer_miniMap_c4c2b",
46076
- viewOptions: "ReactFlowContainer_viewOptions_c4c2b",
46077
- viewOptionsClip: "ReactFlowContainer_viewOptionsClip_c4c2b",
46078
- viewSeparator: "ReactFlowContainer_viewSeparator_c4c2b"
46058
+ container: "ReactFlowContainer_container_ebe22",
46059
+ flow: "ReactFlowContainer_flow_ebe22",
46060
+ contextMenu: "ReactFlowContainer_contextMenu_ebe22",
46061
+ movingLayout: "ReactFlowContainer_movingLayout_ebe22",
46062
+ layoutPending: "ReactFlowContainer_layoutPending_ebe22",
46063
+ dock: "ReactFlowContainer_dock_ebe22",
46064
+ viewDock: "ReactFlowContainer_viewDock_ebe22",
46065
+ expandedViewControls: "ReactFlowContainer_expandedViewControls_ebe22",
46066
+ viewOptionButtons: "ReactFlowContainer_viewOptionButtons_ebe22",
46067
+ compactViewControls: "ReactFlowContainer_compactViewControls_ebe22",
46068
+ createDock: "ReactFlowContainer_createDock_ebe22",
46069
+ zoomValue: "ReactFlowContainer_zoomValue_ebe22",
46070
+ interactiveModeTrigger: "ReactFlowContainer_interactiveModeTrigger_ebe22",
46071
+ interactiveModePanel: "ReactFlowContainer_interactiveModePanel_ebe22",
46072
+ interactiveModeChoices: "ReactFlowContainer_interactiveModeChoices_ebe22",
46073
+ interactiveModeChoice: "ReactFlowContainer_interactiveModeChoice_ebe22",
46074
+ dockActions: "ReactFlowContainer_dockActions_ebe22",
46075
+ miniMap: "ReactFlowContainer_miniMap_ebe22",
46076
+ viewOptions: "ReactFlowContainer_viewOptions_ebe22",
46077
+ viewOptionsClip: "ReactFlowContainer_viewOptionsClip_ebe22",
46078
+ viewSeparator: "ReactFlowContainer_viewSeparator_ebe22"
46079
46079
  };
46080
46080
  //#endregion
46081
46081
  //#region src/canvas/browser/addItemDrag.ts
@@ -47167,6 +47167,7 @@ var ReactFlowContainerInner = (props) => {
47167
47167
  },
47168
47168
  deleteKeyCode: null,
47169
47169
  zoomActivationKeyCode: null,
47170
+ multiSelectionKeyCode: editable ? void 0 : null,
47170
47171
  zoomOnDoubleClick: false,
47171
47172
  nodeClickDistance: 1,
47172
47173
  selectionMode: SelectionMode.Partial,
@@ -47401,7 +47402,7 @@ function tooShort(from, to) {
47401
47402
  }
47402
47403
  //#endregion
47403
47404
  //#region src/canvas/browser/graph/FlowCanvas/FlowCanvas.tsx
47404
- var FlowCanvas = ({ flowCanvasStore, onActivateSelection, onSelectionStart, onSelectionEnd, onInspectSelection, inspectorOpen = false, onRequestAddNode, cornerTools, cornerLeading, topLeftTools, bottomRightTools, toolbar, dark, fitView, nodesDraggable, layoutMotion, className, addNodeRequest, addItemRequest, onMoveEnd, onNodeDragStop, onSelectionChange, isValidConnection, onDropAddItem }) => {
47405
+ var FlowCanvas = ({ flowCanvasStore, onActivateSelection, onSelectionStart, onSelectionEnd, onInspectSelection, inspectorOpen = false, onRequestAddNode, cornerTools, cornerLeading, topLeftTools, bottomRightTools, toolbar, dark, dottedBackground, fitView, nodesDraggable, layoutMotion, className, addNodeRequest, addItemRequest, onMoveEnd, onNodeDragStop, onSelectionChange, isValidConnection, onDropAddItem }) => {
47405
47406
  const editable = useVal(flowCanvasStore.$.editable);
47406
47407
  const nodeMiniMapPhase = useVal(flowCanvasStore.$.nodeMiniMapPhase);
47407
47408
  useEffect(flowCanvasStore.setupForceDelete, []);
@@ -47426,7 +47427,7 @@ var FlowCanvas = ({ flowCanvasStore, onActivateSelection, onSelectionStart, onSe
47426
47427
  className,
47427
47428
  i18n: flowCanvasStore.i18n,
47428
47429
  dark,
47429
- dottedBackground: editable,
47430
+ dottedBackground: dottedBackground ?? editable,
47430
47431
  fitView: fitView ?? !editable,
47431
47432
  fitViewOptions,
47432
47433
  layoutMotion,
@@ -47558,6 +47559,7 @@ function FlowCanvasView(props) {
47558
47559
  addNodeRequest: props.addNodeRequest,
47559
47560
  className: props.className,
47560
47561
  dark: props.dark ?? false,
47562
+ dottedBackground: props.dottedBackground,
47561
47563
  fitView: props.fitView ?? false,
47562
47564
  nodesDraggable: props.nodesDraggable ?? props.editable,
47563
47565
  flowCanvasStore: store,
@@ -112488,7 +112490,7 @@ function WorkbenchInspectorToggle({ label, open, disabled = false, onToggle }) {
112488
112490
  //#endregion
112489
112491
  //#region src/workbench/browser/runtime/editor/revisionCanvas.tsx
112490
112492
  /** The parent keys this session by snapshot identity. All movement is disposable view state. */
112491
- function RevisionCanvas({ draft, presentation, theme, interactiveMode$, label, striped = true, showHeader = true }) {
112493
+ function RevisionCanvas({ draft, presentation, theme, interactiveMode$, label, background = "striped", showHeader = true }) {
112492
112494
  const root = useRef(null);
112493
112495
  const t = useTranslate();
112494
112496
  const language = useLang();
@@ -112525,10 +112527,6 @@ function RevisionCanvas({ draft, presentation, theme, interactiveMode$, label, s
112525
112527
  };
112526
112528
  const selection = selected.length === 1 ? revision.node(target, selected[0]) : void 0;
112527
112529
  const comment = selected.length === 1 ? model.nodes.find((node) => node.id === selected[0] && node.kind === "comment") : void 0;
112528
- const inspect = (ids) => {
112529
- setSelected(ids);
112530
- setInspectorOpen(true);
112531
- };
112532
112530
  const navigation = target.kind === "subflow" || presentation == null || moved ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
112533
112531
  target.kind === "subflow" && /* @__PURE__ */ jsx(Button$1, {
112534
112532
  size: "xs",
@@ -112576,9 +112574,10 @@ function RevisionCanvas({ draft, presentation, theme, interactiveMode$, label, s
112576
112574
  identity: graphId,
112577
112575
  model,
112578
112576
  editable: false,
112577
+ dottedBackground: background === "dotted",
112579
112578
  nodesDraggable: true,
112580
112579
  fitView: session?.viewport == null,
112581
- className: striped ? "open-flow-canvas-locked" : void 0,
112580
+ className: background === "striped" ? "open-flow-canvas-locked" : void 0,
112582
112581
  dark: theme === "dark",
112583
112582
  language,
112584
112583
  interactiveMode$,
@@ -112594,8 +112593,7 @@ function RevisionCanvas({ draft, presentation, theme, interactiveMode$, label, s
112594
112593
  viewport
112595
112594
  })),
112596
112595
  onSelectionChange: setSelected,
112597
- onActivateSelection: inspect,
112598
- onInspectSelection: () => setInspectorOpen(true),
112596
+ onInspectSelection: () => setInspectorOpen((open) => !open),
112599
112597
  inspectorOpen,
112600
112598
  toolbar: showHeader ? void 0 : navigation,
112601
112599
  cornerTools: /* @__PURE__ */ jsx(WorkbenchInspectorToggle, {
@@ -112633,7 +112631,7 @@ function RevisionCanvas({ draft, presentation, theme, interactiveMode$, label, s
112633
112631
  readOnly: true
112634
112632
  }, comment.id) : /* @__PURE__ */ jsx(FlowNodeList, {
112635
112633
  nodes: selected.length > 1 ? model.nodes.filter((node) => selected.includes(node.id)) : model.nodes,
112636
- onSelect: (id) => inspect([id]),
112634
+ onSelect: (id) => setSelected([id]),
112637
112635
  onFocusNode: (nodeId) => {
112638
112636
  setSelected([nodeId]);
112639
112637
  setFocus({
@@ -112648,7 +112646,7 @@ function RevisionCanvas({ draft, presentation, theme, interactiveMode$, label, s
112648
112646
  }
112649
112647
  //#endregion
112650
112648
  //#region src/workbench/browser/runtime/openFlowPreview.tsx
112651
- /** Offline publication preview. Use a React key to start a new layout/selection session. */
112649
+ /** Offline workflow preview. Use a React key to start a new layout/selection session. */
112652
112650
  function OpenFlowPreview({ draft, presentation, language, theme, label, className }) {
112653
112651
  const [i18n] = useState(() => createI18n(language));
112654
112652
  useEffect(() => {
@@ -112667,7 +112665,7 @@ function OpenFlowPreview({ draft, presentation, language, theme, label, classNam
112667
112665
  presentation,
112668
112666
  theme,
112669
112667
  label,
112670
- striped: false,
112668
+ background: "dotted",
112671
112669
  showHeader: false
112672
112670
  })
112673
112671
  })
package/dist/browser/workbench.css CHANGED
@@ -14830,163 +14830,163 @@ svg.react-flow__connectionline {
14830
14830
  }
14831
14831
  .open-flow-canvas-node-minimap2 .NodeMinimap_wrapper_e79d7 {
14832
14832
  font-size: calc(0.75rem * var(--open-flow-canvas-scale, 1));
14833
- }.ReactFlowContainer_container_c4c2b {
14833
+ }.ReactFlowContainer_container_ebe22 {
14834
14834
  width: 100%;
14835
14835
  height: 100%;
14836
14836
  position: relative;
14837
14837
  container: open-flow-canvas-controls/inline-size;
14838
14838
  }
14839
14839
 
14840
- .ReactFlowContainer_flow_c4c2b {
14840
+ .ReactFlowContainer_flow_ebe22 {
14841
14841
  position: relative;
14842
14842
  outline: none !important;
14843
14843
  scrollbar-color: rgba(121, 121, 121, 0.4) transparent;
14844
- background-color: var(--flow-bg);
14844
+ --xy-background-color: var(--flow-bg);
14845
14845
  }
14846
- .ReactFlowContainer_flow_c4c2b.react-flow.open-flow-canvas {
14846
+ .ReactFlowContainer_flow_ebe22.react-flow.open-flow-canvas {
14847
14847
  --xy-edge-stroke-width-default: 2;
14848
14848
  }
14849
- .ReactFlowContainer_flow_c4c2b ::-webkit-scrollbar-corner,
14850
- .ReactFlowContainer_flow_c4c2b ::-webkit-resizer {
14849
+ .ReactFlowContainer_flow_ebe22 ::-webkit-scrollbar-corner,
14850
+ .ReactFlowContainer_flow_ebe22 ::-webkit-resizer {
14851
14851
  border: none;
14852
14852
  outline: none;
14853
14853
  background: no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 36 36'%3E%3Ccircle cx='12' cy='24' r='1.5' fill='%23888888' class='clr-i-outline clr-i-outline-path-1'/%3E%3Ccircle cx='18' cy='24' r='1.5' fill='%23888888' class='clr-i-outline clr-i-outline-path-2'/%3E%3Ccircle cx='18' cy='18' r='1.5' fill='%23888888' class='clr-i-outline clr-i-outline-path-3'/%3E%3Ccircle cx='24' cy='12' r='1.5' fill='%23888888' class='clr-i-outline clr-i-outline-path-4'/%3E%3Ccircle cx='24' cy='24' r='1.5' fill='%23888888' class='clr-i-outline clr-i-outline-path-5'/%3E%3Ccircle cx='24' cy='18' r='1.5' fill='%23888888' class='clr-i-outline clr-i-outline-path-6'/%3E%3Cpath fill='none' d='M0 0h36v36H0z'/%3E%3C/svg%3E");
14854
14854
  }
14855
- .ReactFlowContainer_flow_c4c2b > .react-flow__renderer {
14855
+ .ReactFlowContainer_flow_ebe22 > .react-flow__renderer {
14856
14856
  overflow: clip;
14857
14857
  }
14858
- .ReactFlowContainer_flow_c4c2b *,
14859
- .ReactFlowContainer_flow_c4c2b *::before,
14860
- .ReactFlowContainer_flow_c4c2b *::after {
14858
+ .ReactFlowContainer_flow_ebe22 *,
14859
+ .ReactFlowContainer_flow_ebe22 *::before,
14860
+ .ReactFlowContainer_flow_ebe22 *::after {
14861
14861
  box-sizing: border-box;
14862
14862
  }
14863
- .ReactFlowContainer_flow_c4c2b .react-flow__pane.selection,
14864
- .ReactFlowContainer_flow_c4c2b .react-flow__node,
14865
- .ReactFlowContainer_flow_c4c2b .react-flow__edge {
14863
+ .ReactFlowContainer_flow_ebe22 .react-flow__pane.selection,
14864
+ .ReactFlowContainer_flow_ebe22 .react-flow__node,
14865
+ .ReactFlowContainer_flow_ebe22 .react-flow__edge {
14866
14866
  cursor: auto !important;
14867
14867
  }
14868
- .ReactFlowContainer_flow_c4c2b.touchpad .react-flow__pane.draggable .react-flow__node {
14868
+ .ReactFlowContainer_flow_ebe22.touchpad .react-flow__pane.draggable .react-flow__node {
14869
14869
  pointer-events: none !important;
14870
14870
  }
14871
- .ReactFlowContainer_flow_c4c2b .react-flow__controls {
14871
+ .ReactFlowContainer_flow_ebe22 .react-flow__controls {
14872
14872
  width: auto;
14873
14873
  overflow: visible;
14874
14874
  }
14875
- .ReactFlowContainer_flow_c4c2b .react-flow__controls-button path {
14875
+ .ReactFlowContainer_flow_ebe22 .react-flow__controls-button path {
14876
14876
  fill: currentColor;
14877
14877
  }
14878
- .ReactFlowContainer_flow_c4c2b .react-flow__nodesselection-rect:focus,
14879
- .ReactFlowContainer_flow_c4c2b .react-flow__nodesselection-rect:focus-visible,
14880
- .ReactFlowContainer_flow_c4c2b .react-flow__selection:focus,
14881
- .ReactFlowContainer_flow_c4c2b .react-flow__selection:focus-visible {
14878
+ .ReactFlowContainer_flow_ebe22 .react-flow__nodesselection-rect:focus,
14879
+ .ReactFlowContainer_flow_ebe22 .react-flow__nodesselection-rect:focus-visible,
14880
+ .ReactFlowContainer_flow_ebe22 .react-flow__selection:focus,
14881
+ .ReactFlowContainer_flow_ebe22 .react-flow__selection:focus-visible {
14882
14882
  outline: none !important;
14883
14883
  }
14884
- .ReactFlowContainer_flow_c4c2b:has(.ReactFlowContainer_contextMenu_c4c2b) .react-flow__nodesselection-rect {
14884
+ .ReactFlowContainer_flow_ebe22:has(.ReactFlowContainer_contextMenu_ebe22) .react-flow__nodesselection-rect {
14885
14885
  pointer-events: none;
14886
14886
  }
14887
- .ReactFlowContainer_flow_c4c2b .react-flow__viewport > .isolate {
14887
+ .ReactFlowContainer_flow_ebe22 .react-flow__viewport > .isolate {
14888
14888
  pointer-events: all;
14889
14889
  }
14890
- .ReactFlowContainer_flow_c4c2b button > i {
14890
+ .ReactFlowContainer_flow_ebe22 button > i {
14891
14891
  cursor: inherit;
14892
14892
  }
14893
14893
 
14894
- .ReactFlowContainer_movingLayout_c4c2b .react-flow__node {
14894
+ .ReactFlowContainer_movingLayout_ebe22 .react-flow__node {
14895
14895
  transition: transform var(--layout-transition-duration) cubic-bezier(0.22, 1, 0.36, 1);
14896
14896
  }
14897
14897
 
14898
- .ReactFlowContainer_layoutPending_c4c2b .react-flow__viewport {
14898
+ .ReactFlowContainer_layoutPending_ebe22 .react-flow__viewport {
14899
14899
  opacity: 0;
14900
14900
  }
14901
14901
 
14902
14902
  @media (prefers-reduced-motion: reduce) {
14903
- .ReactFlowContainer_movingLayout_c4c2b .react-flow__node {
14903
+ .ReactFlowContainer_movingLayout_ebe22 .react-flow__node {
14904
14904
  transition: none;
14905
14905
  }
14906
- .ReactFlowContainer_flow_c4c2b .react-flow__controls-button {
14906
+ .ReactFlowContainer_flow_ebe22 .react-flow__controls-button {
14907
14907
  transition: none;
14908
14908
  }
14909
14909
  }
14910
- .ReactFlowContainer_contextMenu_c4c2b {
14910
+ .ReactFlowContainer_contextMenu_ebe22 {
14911
14911
  min-width: 176px;
14912
14912
  padding: 6px;
14913
14913
  border-radius: calc(var(--open-flow-radius) + 2px);
14914
14914
  }
14915
- .ReactFlowContainer_contextMenu_c4c2b [data-slot$='menu-item'] {
14915
+ .ReactFlowContainer_contextMenu_ebe22 [data-slot$='menu-item'] {
14916
14916
  min-height: 28px;
14917
14917
  gap: 8px;
14918
14918
  padding: 4px 10px;
14919
14919
  border-radius: var(--open-flow-radius);
14920
14920
  }
14921
- .ReactFlowContainer_contextMenu_c4c2b [data-slot$='menu-item'] > i,
14922
- .ReactFlowContainer_contextMenu_c4c2b [data-slot$='menu-item'] > svg {
14921
+ .ReactFlowContainer_contextMenu_ebe22 [data-slot$='menu-item'] > i,
14922
+ .ReactFlowContainer_contextMenu_ebe22 [data-slot$='menu-item'] > svg {
14923
14923
  flex: 0 0 16px;
14924
14924
  width: 16px;
14925
14925
  height: 16px;
14926
14926
  }
14927
14927
 
14928
- .ReactFlowContainer_dock_c4c2b {
14928
+ .ReactFlowContainer_dock_ebe22 {
14929
14929
  margin-bottom: 22px;
14930
14930
  max-width: calc(100% - 32px);
14931
14931
  }
14932
14932
 
14933
- .ReactFlowContainer_viewDock_c4c2b {
14933
+ .ReactFlowContainer_viewDock_ebe22 {
14934
14934
  z-index: 6;
14935
14935
  }
14936
- .ReactFlowContainer_viewDock_c4c2b > [data-size] {
14936
+ .ReactFlowContainer_viewDock_ebe22 > [data-size] {
14937
14937
  height: 28px;
14938
14938
  width: 28px;
14939
14939
  }
14940
- .ReactFlowContainer_viewDock_c4c2b [data-size] {
14940
+ .ReactFlowContainer_viewDock_ebe22 [data-size] {
14941
14941
  color: var(--ui-muted-foreground);
14942
14942
  }
14943
- .ReactFlowContainer_viewDock_c4c2b [data-size]:is(:hover, :focus-visible) {
14943
+ .ReactFlowContainer_viewDock_ebe22 [data-size]:is(:hover, :focus-visible) {
14944
14944
  color: var(--ui-foreground);
14945
14945
  }
14946
- .ReactFlowContainer_viewDock_c4c2b [data-size] > i {
14946
+ .ReactFlowContainer_viewDock_ebe22 [data-size] > i {
14947
14947
  width: 16px;
14948
14948
  height: 16px;
14949
14949
  flex: none;
14950
14950
  font-size: 16px;
14951
14951
  }
14952
14952
 
14953
- .ReactFlowContainer_expandedViewControls_c4c2b,
14954
- .ReactFlowContainer_viewOptionButtons_c4c2b {
14953
+ .ReactFlowContainer_expandedViewControls_ebe22,
14954
+ .ReactFlowContainer_viewOptionButtons_ebe22 {
14955
14955
  display: flex;
14956
14956
  align-items: center;
14957
14957
  gap: 2px;
14958
14958
  }
14959
- .ReactFlowContainer_expandedViewControls_c4c2b > [data-size],
14960
- .ReactFlowContainer_viewOptionButtons_c4c2b > [data-size] {
14959
+ .ReactFlowContainer_expandedViewControls_ebe22 > [data-size],
14960
+ .ReactFlowContainer_viewOptionButtons_ebe22 > [data-size] {
14961
14961
  height: 28px;
14962
14962
  }
14963
- .ReactFlowContainer_expandedViewControls_c4c2b > [data-size=icon],
14964
- .ReactFlowContainer_viewOptionButtons_c4c2b > [data-size=icon] {
14963
+ .ReactFlowContainer_expandedViewControls_ebe22 > [data-size=icon],
14964
+ .ReactFlowContainer_viewOptionButtons_ebe22 > [data-size=icon] {
14965
14965
  width: 28px;
14966
14966
  }
14967
14967
 
14968
- .ReactFlowContainer_compactViewControls_c4c2b {
14968
+ .ReactFlowContainer_compactViewControls_ebe22 {
14969
14969
  display: none;
14970
14970
  }
14971
- .ReactFlowContainer_compactViewControls_c4c2b [data-size] {
14971
+ .ReactFlowContainer_compactViewControls_ebe22 [data-size] {
14972
14972
  height: 28px;
14973
14973
  font-size: 11px;
14974
14974
  font-variant-numeric: tabular-nums;
14975
14975
  }
14976
14976
 
14977
14977
  @container open-flow-canvas-controls (width <= 900px) {
14978
- .ReactFlowContainer_viewDock_c4c2b[data-readonly=false] .ReactFlowContainer_expandedViewControls_c4c2b {
14978
+ .ReactFlowContainer_viewDock_ebe22[data-readonly=false] .ReactFlowContainer_expandedViewControls_ebe22 {
14979
14979
  display: none;
14980
14980
  }
14981
- .ReactFlowContainer_viewDock_c4c2b[data-readonly=false] .ReactFlowContainer_compactViewControls_c4c2b {
14981
+ .ReactFlowContainer_viewDock_ebe22[data-readonly=false] .ReactFlowContainer_compactViewControls_ebe22 {
14982
14982
  display: block;
14983
14983
  }
14984
14984
  }
14985
- .ReactFlowContainer_createDock_c4c2b {
14985
+ .ReactFlowContainer_createDock_ebe22 {
14986
14986
  gap: 5px;
14987
14987
  }
14988
14988
 
14989
- .ReactFlowContainer_zoomValue_c4c2b {
14989
+ .ReactFlowContainer_zoomValue_ebe22 {
14990
14990
  min-width: 40px;
14991
14991
  padding-inline: 5px;
14992
14992
  color: var(--ui-muted-foreground);
@@ -14994,26 +14994,26 @@ svg.react-flow__connectionline {
14994
14994
  font-variant-numeric: tabular-nums;
14995
14995
  }
14996
14996
 
14997
- .ReactFlowContainer_interactiveModeTrigger_c4c2b > [data-mode-icon] {
14997
+ .ReactFlowContainer_interactiveModeTrigger_ebe22 > [data-mode-icon] {
14998
14998
  width: 16px;
14999
14999
  height: 16px;
15000
15000
  flex: none;
15001
15001
  font-size: 16px;
15002
15002
  }
15003
15003
 
15004
- .ReactFlowContainer_interactiveModePanel_c4c2b.ReactFlowContainer_interactiveModePanel_c4c2b {
15004
+ .ReactFlowContainer_interactiveModePanel_ebe22.ReactFlowContainer_interactiveModePanel_ebe22 {
15005
15005
  width: min(360px, 100cqw - 32px);
15006
15006
  padding: 10px;
15007
15007
  }
15008
15008
 
15009
- .ReactFlowContainer_interactiveModeChoices_c4c2b.ReactFlowContainer_interactiveModeChoices_c4c2b {
15009
+ .ReactFlowContainer_interactiveModeChoices_ebe22.ReactFlowContainer_interactiveModeChoices_ebe22 {
15010
15010
  display: grid;
15011
15011
  width: 100%;
15012
15012
  grid-template-columns: repeat(2, minmax(0, 1fr));
15013
15013
  gap: 8px;
15014
15014
  }
15015
15015
 
15016
- .ReactFlowContainer_interactiveModeChoice_c4c2b.ReactFlowContainer_interactiveModeChoice_c4c2b {
15016
+ .ReactFlowContainer_interactiveModeChoice_ebe22.ReactFlowContainer_interactiveModeChoice_ebe22 {
15017
15017
  width: 100%;
15018
15018
  height: auto;
15019
15019
  min-height: 140px;
@@ -15024,56 +15024,56 @@ svg.react-flow__connectionline {
15024
15024
  text-align: center;
15025
15025
  white-space: normal;
15026
15026
  }
15027
- .ReactFlowContainer_interactiveModeChoice_c4c2b.ReactFlowContainer_interactiveModeChoice_c4c2b[aria-checked=true] {
15027
+ .ReactFlowContainer_interactiveModeChoice_ebe22.ReactFlowContainer_interactiveModeChoice_ebe22[aria-checked=true] {
15028
15028
  border-color: var(--ui-primary);
15029
15029
  background: var(--ui-secondary);
15030
15030
  color: var(--ui-foreground);
15031
15031
  }
15032
- .ReactFlowContainer_interactiveModeChoice_c4c2b.ReactFlowContainer_interactiveModeChoice_c4c2b > i {
15032
+ .ReactFlowContainer_interactiveModeChoice_ebe22.ReactFlowContainer_interactiveModeChoice_ebe22 > i {
15033
15033
  color: var(--ui-muted-foreground);
15034
15034
  width: 28px;
15035
15035
  height: 28px;
15036
15036
  font-size: 28px;
15037
15037
  }
15038
- .ReactFlowContainer_interactiveModeChoice_c4c2b.ReactFlowContainer_interactiveModeChoice_c4c2b:is(:hover, :focus-visible, [aria-checked=true]) > i {
15038
+ .ReactFlowContainer_interactiveModeChoice_ebe22.ReactFlowContainer_interactiveModeChoice_ebe22:is(:hover, :focus-visible, [aria-checked=true]) > i {
15039
15039
  color: var(--ui-foreground);
15040
15040
  }
15041
- .ReactFlowContainer_interactiveModeChoice_c4c2b.ReactFlowContainer_interactiveModeChoice_c4c2b > strong {
15041
+ .ReactFlowContainer_interactiveModeChoice_ebe22.ReactFlowContainer_interactiveModeChoice_ebe22 > strong {
15042
15042
  font-size: 13px;
15043
15043
  font-weight: 500;
15044
15044
  line-height: 1.5;
15045
15045
  }
15046
- .ReactFlowContainer_interactiveModeChoice_c4c2b.ReactFlowContainer_interactiveModeChoice_c4c2b > span {
15046
+ .ReactFlowContainer_interactiveModeChoice_ebe22.ReactFlowContainer_interactiveModeChoice_ebe22 > span {
15047
15047
  color: var(--ui-muted-foreground);
15048
15048
  font-size: 12px;
15049
15049
  font-weight: 400;
15050
15050
  line-height: 1.5;
15051
15051
  }
15052
15052
 
15053
- .ReactFlowContainer_dockActions_c4c2b {
15053
+ .ReactFlowContainer_dockActions_ebe22 {
15054
15054
  display: flex;
15055
15055
  align-items: center;
15056
15056
  gap: 5px;
15057
15057
  }
15058
15058
 
15059
15059
  @container open-flow-workbench (max-width: 720px) {
15060
- .ReactFlowContainer_dock_c4c2b {
15060
+ .ReactFlowContainer_dock_ebe22 {
15061
15061
  padding: 5px;
15062
15062
  margin-bottom: 14px;
15063
15063
  }
15064
- .ReactFlowContainer_dockActions_c4c2b {
15064
+ .ReactFlowContainer_dockActions_ebe22 {
15065
15065
  gap: 3px;
15066
15066
  }
15067
15067
  }
15068
15068
  @container open-flow-workbench (max-width: 560px) {
15069
- .ReactFlowContainer_interactiveModeChoices_c4c2b.ReactFlowContainer_interactiveModeChoices_c4c2b {
15069
+ .ReactFlowContainer_interactiveModeChoices_ebe22.ReactFlowContainer_interactiveModeChoices_ebe22 {
15070
15070
  grid-template-columns: 1fr;
15071
15071
  }
15072
- .ReactFlowContainer_interactiveModeChoice_c4c2b.ReactFlowContainer_interactiveModeChoice_c4c2b {
15072
+ .ReactFlowContainer_interactiveModeChoice_ebe22.ReactFlowContainer_interactiveModeChoice_ebe22 {
15073
15073
  min-height: 120px;
15074
15074
  }
15075
15075
  }
15076
- .ReactFlowContainer_miniMap_c4c2b.react-flow__panel {
15076
+ .ReactFlowContainer_miniMap_ebe22.react-flow__panel {
15077
15077
  bottom: calc(100% + 8px);
15078
15078
  left: 0;
15079
15079
  margin: 0;
@@ -15083,29 +15083,29 @@ svg.react-flow__connectionline {
15083
15083
  border-radius: var(--ui-radius);
15084
15084
  }
15085
15085
 
15086
- .ReactFlowContainer_viewOptions_c4c2b {
15086
+ .ReactFlowContainer_viewOptions_ebe22 {
15087
15087
  display: grid;
15088
15088
  grid-template-columns: 0fr;
15089
15089
  opacity: 0;
15090
15090
  visibility: hidden;
15091
15091
  transition: grid-template-columns 180ms ease, opacity 180ms ease, visibility 180ms;
15092
15092
  }
15093
- .ReactFlowContainer_viewOptions_c4c2b[data-expanded=true] {
15093
+ .ReactFlowContainer_viewOptions_ebe22[data-expanded=true] {
15094
15094
  grid-template-columns: 1fr;
15095
15095
  opacity: 1;
15096
15096
  visibility: visible;
15097
15097
  }
15098
15098
 
15099
- .ReactFlowContainer_viewOptionsClip_c4c2b {
15099
+ .ReactFlowContainer_viewOptionsClip_ebe22 {
15100
15100
  min-width: 0;
15101
15101
  overflow: hidden;
15102
15102
  }
15103
15103
 
15104
- .ReactFlowContainer_viewOptionButtons_c4c2b {
15104
+ .ReactFlowContainer_viewOptionButtons_ebe22 {
15105
15105
  width: max-content;
15106
15106
  }
15107
15107
 
15108
- .ReactFlowContainer_viewSeparator_c4c2b {
15108
+ .ReactFlowContainer_viewSeparator_ebe22 {
15109
15109
  width: 1px;
15110
15110
  height: 16px;
15111
15111
  margin-inline: 4px;
@@ -15113,7 +15113,7 @@ svg.react-flow__connectionline {
15113
15113
  }
15114
15114
 
15115
15115
  @media (prefers-reduced-motion: reduce) {
15116
- .ReactFlowContainer_viewOptions_c4c2b {
15116
+ .ReactFlowContainer_viewOptions_ebe22 {
15117
15117
  transition: none;
15118
15118
  }
15119
15119
  }.open-flow-canvas-root :where(.react-flow__controls, [data-canvas-control-scope]) {
package/dist/browser/workbench.js CHANGED
@@ -6118,7 +6118,7 @@ var WorkbenchStore = class {
6118
6118
  };
6119
6119
  //#endregion
6120
6120
  //#region src/workbench/browser/runtime/openFlowWorkbench.tsx
6121
- var FlowWorkspace = lazy(() => import("./flowWorkspace-C8QD_wbp.js"));
6121
+ var FlowWorkspace = lazy(() => import("./flowWorkspace-CjwpbVBR.js"));
6122
6122
  function OpenFlowSessionGate({ action, description, error, onSubmit, onTokenChange, pending = false, title, token, tokenLabel }) {
6123
6123
  const hasToken = token != null && tokenLabel != null && onTokenChange != null;
6124
6124
  const tokenValue = token ?? "";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oomol-lab/open-flow",
3
- "version": "0.1.0-beta.49",
3
+ "version": "0.1.0-beta.50",
4
4
  "description": "TypeScript contracts and Browser runtime for Open Flow.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {