@mindlogic-ai/logician-ui 3.1.0 → 3.2.0-alpha.0

package/dist/components/Workflow/canvas/Canvas/Canvas.styles.js

@@ -0,0 +1,96 @@
+"use client";
+'use strict';
+
+var react = require('@xyflow/react');
+
+/**
+ * Edge defaults. Stroke comes from a theme token (slate.700) via CSS var
+ * since React Flow takes SVG-style props, not Chakra ones. The label
+ * itself is rendered through the `labeled` custom edge so its
+ * typography uses the design system's semantic `Subtext` primitive —
+ * see `LabeledEdge.tsx`. The arrowhead makes each edge's direction
+ * self-describing rather than implied by left→right placement alone.
+ */
+const defaultEdgeOptions = {
+    type: 'labeled',
+    style: {
+        stroke: 'var(--chakra-colors-slate-700)',
+        strokeWidth: 1.5,
+    },
+    markerEnd: {
+        type: react.MarkerType.ArrowClosed,
+        color: 'var(--chakra-colors-slate-700)',
+        width: 18,
+        height: 18,
+    },
+};
+/**
+ * Selection outline for edges. React Flow toggles `.selected` on the
+ * edge group; we layer an outline on the path so the user gets visual
+ * feedback before pressing Delete. Scoped via the Canvas wrapper's
+ * `css` prop rather than a global stylesheet.
+ */
+const canvasSelectionCss = {
+    // Ports paint as 8px dots (see PORT_STYLE) but that's a pixel-hunt drag
+    // target; a pseudo-element participates in its parent's hit-testing, so this
+    // pads every handle's grab area to ~24px without changing the visual dot.
+    '& .react-flow__handle::after': {
+        content: '""',
+        position: 'absolute',
+        inset: '-8px',
+    },
+    // Hover feedback: thicken/darken the path so an edge reads as grabbable
+    // before it's selected. Listed before the `.selected` rule (equal
+    // specificity) so selection styling wins when an edge is both.
+    '& .react-flow__edge:hover .react-flow__edge-path': {
+        stroke: 'var(--chakra-colors-slate-900)',
+        strokeWidth: 2,
+    },
+    '& .react-flow__edge.selected .react-flow__edge-path': {
+        stroke: 'var(--chakra-colors-primary-main)',
+        strokeWidth: 2.5,
+        filter: 'drop-shadow(0 0 4px var(--chakra-colors-primary-lighter))',
+    },
+    '& .react-flow__edge.selected .react-flow__edge-interaction': {
+        stroke: 'var(--chakra-colors-primary-main)',
+    },
+    // React Flow's stock zoom/lock controls are fixed white — point its theme
+    // vars at our tokens so the cluster follows the color mode (light values match
+    // the stock look). A solid surface (rather than transparent buttons) keeps the
+    // icons legible as the canvas pans content beneath the cluster, and matches the
+    // minimap panel in the opposite corner. Frame it like the node cards — md
+    // radius + slate.200 border + shadow — so it reads as a deliberate floating
+    // toolbar; the border carries the definition in dark mode where the stock
+    // shadow is invisible on the dark canvas. `overflow: hidden` clips the stacked
+    // buttons to the rounded corners (tooltips portal out, so they aren't clipped).
+    '& .react-flow__controls': {
+        '--xy-controls-button-background-color': 'var(--chakra-colors-bg-surface)',
+        '--xy-controls-button-background-color-hover': 'var(--chakra-colors-slate-100)',
+        '--xy-controls-button-color': 'var(--chakra-colors-slate-1200)',
+        '--xy-controls-button-color-hover': 'var(--chakra-colors-slate-1500)',
+        '--xy-controls-button-border-color': 'var(--chakra-colors-slate-200)',
+        '--xy-controls-box-shadow': 'var(--chakra-shadows-sm)',
+        borderRadius: 'var(--chakra-radii-md)',
+        border: '1px solid var(--chakra-colors-slate-200)',
+        overflow: 'hidden',
+    },
+    // Our control glyphs (lucide Plus/Minus + Tabler arrows/lock/maximize/sitemap)
+    // are stroke-based — `fill="none"`, `stroke="currentColor"`. React Flow's stock
+    // CSS forces `fill: currentColor` on control-button SVGs (its own icons are
+    // solid), which fills these outline icons into blobs (the lock rendered as a
+    // solid lozenge) and, via its `:disabled svg { fill-opacity: .4 }` companion,
+    // painted a translucent gray inside the disabled undo/redo arrows. Restore the
+    // intended stroke-only rendering.
+    '& .react-flow__controls-button svg': {
+        fill: 'none',
+    },
+    // With fill removed, RF's fill-opacity disabled cue is a no-op — dim the whole
+    // glyph instead so disabled undo/redo still read as inactive.
+    '& .react-flow__controls-button:disabled svg': {
+        opacity: 0.4,
+    },
+};
+
+exports.canvasSelectionCss = canvasSelectionCss;
+exports.defaultEdgeOptions = defaultEdgeOptions;
+//# sourceMappingURL=Canvas.styles.js.map

package/dist/components/Workflow/canvas/Canvas/Canvas.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Canvas.styles.js","sources":["../../../../../src/components/Workflow/canvas/Canvas/Canvas.styles.ts"],"sourcesContent":[null],"names":["MarkerType"],"mappings":";;;;;AAEA;;;;;;;AAOG;AACI,MAAM,kBAAkB,GAAuB;AACpD,IAAA,IAAI,EAAE,SAAS;AACf,IAAA,KAAK,EAAE;AACL,QAAA,MAAM,EAAE,gCAAgC;AACxC,QAAA,WAAW,EAAE,GAAG;AACjB,KAAA;AACD,IAAA,SAAS,EAAE;QACT,IAAI,EAAEA,gBAAU,CAAC,WAAW;AAC5B,QAAA,KAAK,EAAE,gCAAgC;AACvC,QAAA,KAAK,EAAE,EAAE;AACT,QAAA,MAAM,EAAE,EAAE;AACX,KAAA;;AAGH;;;;;AAKG;AACI,MAAM,kBAAkB,GAAG;;;;AAIhC,IAAA,8BAA8B,EAAE;AAC9B,QAAA,OAAO,EAAE,IAAI;AACb,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,KAAK,EAAE,MAAM;AACd,KAAA;;;;AAID,IAAA,kDAAkD,EAAE;AAClD,QAAA,MAAM,EAAE,gCAAgC;AACxC,QAAA,WAAW,EAAE,CAAC;AACf,KAAA;AACD,IAAA,qDAAqD,EAAE;AACrD,QAAA,MAAM,EAAE,mCAAmC;AAC3C,QAAA,WAAW,EAAE,GAAG;AAChB,QAAA,MAAM,EAAE,2DAA2D;AACpE,KAAA;AACD,IAAA,4DAA4D,EAAE;AAC5D,QAAA,MAAM,EAAE,mCAAmC;AAC5C,KAAA;;;;;;;;;;AAUD,IAAA,yBAAyB,EAAE;AACzB,QAAA,uCAAuC,EAAE,iCAAiC;AAC1E,QAAA,6CAA6C,EAC3C,gCAAgC;AAClC,QAAA,4BAA4B,EAAE,iCAAiC;AAC/D,QAAA,kCAAkC,EAAE,iCAAiC;AACrE,QAAA,mCAAmC,EAAE,gCAAgC;AACrE,QAAA,0BAA0B,EAAE,0BAA0B;AACtD,QAAA,YAAY,EAAE,wBAAwB;AACtC,QAAA,MAAM,EAAE,0CAA0C;AAClD,QAAA,QAAQ,EAAE,QAAQ;AACnB,KAAA;;;;;;;;AAQD,IAAA,oCAAoC,EAAE;AACpC,QAAA,IAAI,EAAE,MAAM;AACb,KAAA;;;AAGD,IAAA,6CAA6C,EAAE;AAC7C,QAAA,OAAO,EAAE,GAAG;AACb,KAAA;;;;;;"}

package/dist/components/Workflow/canvas/Canvas/Canvas.styles.mjs

@@ -0,0 +1,93 @@
+"use client";
+import { MarkerType } from '@xyflow/react';
+
+/**
+ * Edge defaults. Stroke comes from a theme token (slate.700) via CSS var
+ * since React Flow takes SVG-style props, not Chakra ones. The label
+ * itself is rendered through the `labeled` custom edge so its
+ * typography uses the design system's semantic `Subtext` primitive —
+ * see `LabeledEdge.tsx`. The arrowhead makes each edge's direction
+ * self-describing rather than implied by left→right placement alone.
+ */
+const defaultEdgeOptions = {
+    type: 'labeled',
+    style: {
+        stroke: 'var(--chakra-colors-slate-700)',
+        strokeWidth: 1.5,
+    },
+    markerEnd: {
+        type: MarkerType.ArrowClosed,
+        color: 'var(--chakra-colors-slate-700)',
+        width: 18,
+        height: 18,
+    },
+};
+/**
+ * Selection outline for edges. React Flow toggles `.selected` on the
+ * edge group; we layer an outline on the path so the user gets visual
+ * feedback before pressing Delete. Scoped via the Canvas wrapper's
+ * `css` prop rather than a global stylesheet.
+ */
+const canvasSelectionCss = {
+    // Ports paint as 8px dots (see PORT_STYLE) but that's a pixel-hunt drag
+    // target; a pseudo-element participates in its parent's hit-testing, so this
+    // pads every handle's grab area to ~24px without changing the visual dot.
+    '& .react-flow__handle::after': {
+        content: '""',
+        position: 'absolute',
+        inset: '-8px',
+    },
+    // Hover feedback: thicken/darken the path so an edge reads as grabbable
+    // before it's selected. Listed before the `.selected` rule (equal
+    // specificity) so selection styling wins when an edge is both.
+    '& .react-flow__edge:hover .react-flow__edge-path': {
+        stroke: 'var(--chakra-colors-slate-900)',
+        strokeWidth: 2,
+    },
+    '& .react-flow__edge.selected .react-flow__edge-path': {
+        stroke: 'var(--chakra-colors-primary-main)',
+        strokeWidth: 2.5,
+        filter: 'drop-shadow(0 0 4px var(--chakra-colors-primary-lighter))',
+    },
+    '& .react-flow__edge.selected .react-flow__edge-interaction': {
+        stroke: 'var(--chakra-colors-primary-main)',
+    },
+    // React Flow's stock zoom/lock controls are fixed white — point its theme
+    // vars at our tokens so the cluster follows the color mode (light values match
+    // the stock look). A solid surface (rather than transparent buttons) keeps the
+    // icons legible as the canvas pans content beneath the cluster, and matches the
+    // minimap panel in the opposite corner. Frame it like the node cards — md
+    // radius + slate.200 border + shadow — so it reads as a deliberate floating
+    // toolbar; the border carries the definition in dark mode where the stock
+    // shadow is invisible on the dark canvas. `overflow: hidden` clips the stacked
+    // buttons to the rounded corners (tooltips portal out, so they aren't clipped).
+    '& .react-flow__controls': {
+        '--xy-controls-button-background-color': 'var(--chakra-colors-bg-surface)',
+        '--xy-controls-button-background-color-hover': 'var(--chakra-colors-slate-100)',
+        '--xy-controls-button-color': 'var(--chakra-colors-slate-1200)',
+        '--xy-controls-button-color-hover': 'var(--chakra-colors-slate-1500)',
+        '--xy-controls-button-border-color': 'var(--chakra-colors-slate-200)',
+        '--xy-controls-box-shadow': 'var(--chakra-shadows-sm)',
+        borderRadius: 'var(--chakra-radii-md)',
+        border: '1px solid var(--chakra-colors-slate-200)',
+        overflow: 'hidden',
+    },
+    // Our control glyphs (lucide Plus/Minus + Tabler arrows/lock/maximize/sitemap)
+    // are stroke-based — `fill="none"`, `stroke="currentColor"`. React Flow's stock
+    // CSS forces `fill: currentColor` on control-button SVGs (its own icons are
+    // solid), which fills these outline icons into blobs (the lock rendered as a
+    // solid lozenge) and, via its `:disabled svg { fill-opacity: .4 }` companion,
+    // painted a translucent gray inside the disabled undo/redo arrows. Restore the
+    // intended stroke-only rendering.
+    '& .react-flow__controls-button svg': {
+        fill: 'none',
+    },
+    // With fill removed, RF's fill-opacity disabled cue is a no-op — dim the whole
+    // glyph instead so disabled undo/redo still read as inactive.
+    '& .react-flow__controls-button:disabled svg': {
+        opacity: 0.4,
+    },
+};
+
+export { canvasSelectionCss, defaultEdgeOptions };
+//# sourceMappingURL=Canvas.styles.mjs.map

package/dist/components/Workflow/canvas/Canvas/Canvas.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Canvas.styles.mjs","sources":["../../../../../src/components/Workflow/canvas/Canvas/Canvas.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAEA;;;;;;;AAOG;AACI,MAAM,kBAAkB,GAAuB;AACpD,IAAA,IAAI,EAAE,SAAS;AACf,IAAA,KAAK,EAAE;AACL,QAAA,MAAM,EAAE,gCAAgC;AACxC,QAAA,WAAW,EAAE,GAAG;AACjB,KAAA;AACD,IAAA,SAAS,EAAE;QACT,IAAI,EAAE,UAAU,CAAC,WAAW;AAC5B,QAAA,KAAK,EAAE,gCAAgC;AACvC,QAAA,KAAK,EAAE,EAAE;AACT,QAAA,MAAM,EAAE,EAAE;AACX,KAAA;;AAGH;;;;;AAKG;AACI,MAAM,kBAAkB,GAAG;;;;AAIhC,IAAA,8BAA8B,EAAE;AAC9B,QAAA,OAAO,EAAE,IAAI;AACb,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,KAAK,EAAE,MAAM;AACd,KAAA;;;;AAID,IAAA,kDAAkD,EAAE;AAClD,QAAA,MAAM,EAAE,gCAAgC;AACxC,QAAA,WAAW,EAAE,CAAC;AACf,KAAA;AACD,IAAA,qDAAqD,EAAE;AACrD,QAAA,MAAM,EAAE,mCAAmC;AAC3C,QAAA,WAAW,EAAE,GAAG;AAChB,QAAA,MAAM,EAAE,2DAA2D;AACpE,KAAA;AACD,IAAA,4DAA4D,EAAE;AAC5D,QAAA,MAAM,EAAE,mCAAmC;AAC5C,KAAA;;;;;;;;;;AAUD,IAAA,yBAAyB,EAAE;AACzB,QAAA,uCAAuC,EAAE,iCAAiC;AAC1E,QAAA,6CAA6C,EAC3C,gCAAgC;AAClC,QAAA,4BAA4B,EAAE,iCAAiC;AAC/D,QAAA,kCAAkC,EAAE,iCAAiC;AACrE,QAAA,mCAAmC,EAAE,gCAAgC;AACrE,QAAA,0BAA0B,EAAE,0BAA0B;AACtD,QAAA,YAAY,EAAE,wBAAwB;AACtC,QAAA,MAAM,EAAE,0CAA0C;AAClD,QAAA,QAAQ,EAAE,QAAQ;AACnB,KAAA;;;;;;;;AAQD,IAAA,oCAAoC,EAAE;AACpC,QAAA,IAAI,EAAE,MAAM;AACb,KAAA;;;AAGD,IAAA,6CAA6C,EAAE;AAC7C,QAAA,OAAO,EAAE,GAAG;AACb,KAAA;;;;;"}

package/dist/components/Workflow/canvas/Canvas/CanvasControls.d.ts

@@ -0,0 +1,27 @@
+import type { FitViewOptions } from '@xyflow/react';
+type CanvasControlsProps = {
+    /** Read-only preview hides the authoring-only lock and auto-arrange actions. */
+    readOnly: boolean;
+    /** Tidy the graph left-to-right — owned by the canvas, which has the node
+        measurements the layout needs. */
+    onAutoArrange: () => void;
+    /** Shared fit-view framing so the manual button settles the view the same way
+        the initial mount and re-fits do. */
+    fitViewOptions: FitViewOptions;
+    /** Whether the top-left corner already holds overlay chrome (palette toggle or
+        error banner). When it does, the controls tuck below it; otherwise they sit
+        tight in the corner so they never float under an empty gap. */
+    topLeftChromePresent: boolean;
+};
+/**
+ * The top-left canvas controls. We render every button ourselves — React
+ * Flow's built-in zoom / fit / interactivity buttons are suppressed — so each
+ * carries a localized {@link Tooltip} instead of React Flow's hardcoded English
+ * `title`. We dock the cluster into the top-left overlay corner (rather than
+ * React Flow's default bottom-left) so it doesn't read as orphaned mid-canvas —
+ * most noticeably when the version-history inspector docks on the left.
+ * Placement "right" keeps the tooltip on-canvas.
+ */
+export declare function CanvasControls({ readOnly, onAutoArrange, fitViewOptions, topLeftChromePresent, }: CanvasControlsProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CanvasControls.d.ts.map

package/dist/components/Workflow/canvas/Canvas/CanvasControls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasControls.d.ts","sourceRoot":"","sources":["../../../../../src/components/Workflow/canvas/Canvas/CanvasControls.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAkCpD,KAAK,mBAAmB,GAAG;IACzB,gFAAgF;IAChF,QAAQ,EAAE,OAAO,CAAC;IAClB;yCACqC;IACrC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B;4CACwC;IACxC,cAAc,EAAE,cAAc,CAAC;IAC/B;;sEAEkE;IAClE,oBAAoB,EAAE,OAAO,CAAC;CAC/B,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,aAAa,EACb,cAAc,EACd,oBAAoB,GACrB,EAAE,mBAAmB,2CAgHrB"}

package/dist/components/Workflow/canvas/Canvas/CanvasControls.js

@@ -0,0 +1,70 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('@xyflow/react');
+var index = require('../../../Icon/index.js');
+var Tooltip = require('../../../Tooltip/Tooltip.js');
+var WorkflowContext = require('../../WorkflowContext/WorkflowContext.js');
+
+// Rendered height of the palette toggle the controls tuck under in edit mode;
+// update if the toggle resizes. Combined with the palette's own top gutter
+// (spacing-4) it forms the clearance the controls drop by so they sit just
+// below the toggle instead of overlapping it.
+const PALETTE_TOGGLE_HEIGHT_PX = 52;
+// Edit-mode top offset: clear the palette toggle (its gutter + height). Read-only
+// preview has no chrome, so the controls sit at the plain corner inset instead.
+const TOP_LEFT_OVERLAY_CLEARANCE = `calc(var(--chakra-spacing-4) + ${PALETTE_TOGGLE_HEIGHT_PX}px)`;
+// Corner inset (spacing-3) for the controls when no chrome sits above them.
+const CORNER_INSET = 'var(--chakra-spacing-3)';
+/**
+ * The top-left canvas controls. We render every button ourselves — React
+ * Flow's built-in zoom / fit / interactivity buttons are suppressed — so each
+ * carries a localized {@link Tooltip} instead of React Flow's hardcoded English
+ * `title`. We dock the cluster into the top-left overlay corner (rather than
+ * React Flow's default bottom-left) so it doesn't read as orphaned mid-canvas —
+ * most noticeably when the version-history inspector docks on the left.
+ * Placement "right" keeps the tooltip on-canvas.
+ */
+function CanvasControls({ readOnly, onAutoArrange, fitViewOptions, topLeftChromePresent, }) {
+    const { zoomIn, zoomOut, fitView } = react.useReactFlow();
+    // Context undo/redo route through the Workflow wrapper that also asks the
+    // host to persist a position-only revert — same path the keyboard shortcuts
+    // take, so a button-driven undo of an auto-arrange sticks across reloads.
+    const { undo, redo, canUndo, canRedo } = WorkflowContext.useWorkflow();
+    const translate = WorkflowContext.useWorkflowTranslate();
+    const t = (key) => translate(key);
+    // Mirror React Flow's built-in interactivity lock so our custom buttons drive
+    // the same store state the default lock button would. "Interactive" means
+    // nodes can be dragged, connected, and selected; the lock flips all three.
+    const isInteractive = react.useStore((s) => s.nodesDraggable || s.nodesConnectable || s.elementsSelectable);
+    const store = react.useStoreApi();
+    const onToggleInteractivity = () => store.setState({
+        nodesDraggable: !isInteractive,
+        nodesConnectable: !isInteractive,
+        elementsSelectable: !isInteractive,
+    });
+    const zoomInLabel = t('workflow_zoom_in');
+    const zoomOutLabel = t('workflow_zoom_out');
+    const fitViewLabel = t('workflow_fit_view');
+    const undoLabel = t('workflow_undo');
+    const redoLabel = t('workflow_redo');
+    const autoArrangeLabel = t('workflow_auto_arrange');
+    // The tooltip names the action a click performs: an interactive canvas locks,
+    // a locked canvas unlocks.
+    const interactivityLabel = isInteractive
+        ? t('workflow_lock_canvas')
+        : t('workflow_unlock_canvas');
+    return (jsxRuntime.jsxs(react.Controls, { showZoom: false, showFitView: false, showInteractive: false, 
+        // Dock into the top-left overlay corner. When the corner already holds
+        // chrome (the palette toggle or the error banner) the cluster tucks below
+        // it; otherwise it sits at the corner so it never floats under an empty gap.
+        position: "top-left", style: {
+            top: topLeftChromePresent ? TOP_LEFT_OVERLAY_CLEARANCE : CORNER_INSET,
+            left: CORNER_INSET,
+            margin: 0,
+        }, children: [jsxRuntime.jsx(Tooltip.Tooltip, { content: zoomInLabel, placement: "right", children: jsxRuntime.jsx(react.ControlButton, { onClick: () => zoomIn(), "aria-label": zoomInLabel, children: jsxRuntime.jsx(index.Plus, {}) }) }), jsxRuntime.jsx(Tooltip.Tooltip, { content: zoomOutLabel, placement: "right", children: jsxRuntime.jsx(react.ControlButton, { onClick: () => zoomOut(), "aria-label": zoomOutLabel, children: jsxRuntime.jsx(index.Minus, {}) }) }), jsxRuntime.jsx(Tooltip.Tooltip, { content: fitViewLabel, placement: "right", children: jsxRuntime.jsx(react.ControlButton, { onClick: () => fitView(fitViewOptions), "aria-label": fitViewLabel, children: jsxRuntime.jsx(index.TbMaximize, {}) }) }), readOnly ? null : (jsxRuntime.jsx(Tooltip.Tooltip, { content: undoLabel, placement: "right", children: jsxRuntime.jsx(react.ControlButton, { onClick: undo, disabled: !canUndo, "aria-label": undoLabel, children: jsxRuntime.jsx(index.TbArrowBackUp, {}) }) })), readOnly ? null : (jsxRuntime.jsx(Tooltip.Tooltip, { content: redoLabel, placement: "right", children: jsxRuntime.jsx(react.ControlButton, { onClick: redo, disabled: !canRedo, "aria-label": redoLabel, children: jsxRuntime.jsx(index.TbArrowForwardUp, {}) }) })), readOnly ? null : (jsxRuntime.jsx(Tooltip.Tooltip, { content: interactivityLabel, placement: "right", children: jsxRuntime.jsx(react.ControlButton, { onClick: onToggleInteractivity, "aria-label": interactivityLabel, children: isInteractive ? jsxRuntime.jsx(index.TbLockOpen, {}) : jsxRuntime.jsx(index.TbLock, {}) }) })), readOnly ? null : (jsxRuntime.jsx(Tooltip.Tooltip, { content: autoArrangeLabel, placement: "right", children: jsxRuntime.jsx(react.ControlButton, { onClick: onAutoArrange, "aria-label": autoArrangeLabel, children: jsxRuntime.jsx(index.TbSitemap, {}) }) }))] }));
+}
+
+exports.CanvasControls = CanvasControls;
+//# sourceMappingURL=CanvasControls.js.map

package/dist/components/Workflow/canvas/Canvas/CanvasControls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasControls.js","sources":["../../../../../src/components/Workflow/canvas/Canvas/CanvasControls.tsx"],"sourcesContent":[null],"names":["useReactFlow","useWorkflow","useWorkflowTranslate","useStore","useStoreApi","_jsxs","Controls","_jsx","Tooltip","ControlButton","Plus","Minus","TbMaximize","TbArrowBackUp","TbArrowForwardUp","TbLockOpen","TbLock","TbSitemap"],"mappings":"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"}

package/dist/components/Workflow/canvas/Canvas/CanvasControls.mjs

@@ -0,0 +1,68 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useReactFlow, useStore, useStoreApi, Controls, ControlButton } from '@xyflow/react';
+import { Plus, Minus, TbMaximize, TbArrowBackUp, TbArrowForwardUp, TbLockOpen, TbLock, TbSitemap } from '../../../Icon/index.mjs';
+import { Tooltip } from '../../../Tooltip/Tooltip.mjs';
+import { useWorkflow, useWorkflowTranslate } from '../../WorkflowContext/WorkflowContext.mjs';
+
+// Rendered height of the palette toggle the controls tuck under in edit mode;
+// update if the toggle resizes. Combined with the palette's own top gutter
+// (spacing-4) it forms the clearance the controls drop by so they sit just
+// below the toggle instead of overlapping it.
+const PALETTE_TOGGLE_HEIGHT_PX = 52;
+// Edit-mode top offset: clear the palette toggle (its gutter + height). Read-only
+// preview has no chrome, so the controls sit at the plain corner inset instead.
+const TOP_LEFT_OVERLAY_CLEARANCE = `calc(var(--chakra-spacing-4) + ${PALETTE_TOGGLE_HEIGHT_PX}px)`;
+// Corner inset (spacing-3) for the controls when no chrome sits above them.
+const CORNER_INSET = 'var(--chakra-spacing-3)';
+/**
+ * The top-left canvas controls. We render every button ourselves — React
+ * Flow's built-in zoom / fit / interactivity buttons are suppressed — so each
+ * carries a localized {@link Tooltip} instead of React Flow's hardcoded English
+ * `title`. We dock the cluster into the top-left overlay corner (rather than
+ * React Flow's default bottom-left) so it doesn't read as orphaned mid-canvas —
+ * most noticeably when the version-history inspector docks on the left.
+ * Placement "right" keeps the tooltip on-canvas.
+ */
+function CanvasControls({ readOnly, onAutoArrange, fitViewOptions, topLeftChromePresent, }) {
+    const { zoomIn, zoomOut, fitView } = useReactFlow();
+    // Context undo/redo route through the Workflow wrapper that also asks the
+    // host to persist a position-only revert — same path the keyboard shortcuts
+    // take, so a button-driven undo of an auto-arrange sticks across reloads.
+    const { undo, redo, canUndo, canRedo } = useWorkflow();
+    const translate = useWorkflowTranslate();
+    const t = (key) => translate(key);
+    // Mirror React Flow's built-in interactivity lock so our custom buttons drive
+    // the same store state the default lock button would. "Interactive" means
+    // nodes can be dragged, connected, and selected; the lock flips all three.
+    const isInteractive = useStore((s) => s.nodesDraggable || s.nodesConnectable || s.elementsSelectable);
+    const store = useStoreApi();
+    const onToggleInteractivity = () => store.setState({
+        nodesDraggable: !isInteractive,
+        nodesConnectable: !isInteractive,
+        elementsSelectable: !isInteractive,
+    });
+    const zoomInLabel = t('workflow_zoom_in');
+    const zoomOutLabel = t('workflow_zoom_out');
+    const fitViewLabel = t('workflow_fit_view');
+    const undoLabel = t('workflow_undo');
+    const redoLabel = t('workflow_redo');
+    const autoArrangeLabel = t('workflow_auto_arrange');
+    // The tooltip names the action a click performs: an interactive canvas locks,
+    // a locked canvas unlocks.
+    const interactivityLabel = isInteractive
+        ? t('workflow_lock_canvas')
+        : t('workflow_unlock_canvas');
+    return (jsxs(Controls, { showZoom: false, showFitView: false, showInteractive: false, 
+        // Dock into the top-left overlay corner. When the corner already holds
+        // chrome (the palette toggle or the error banner) the cluster tucks below
+        // it; otherwise it sits at the corner so it never floats under an empty gap.
+        position: "top-left", style: {
+            top: topLeftChromePresent ? TOP_LEFT_OVERLAY_CLEARANCE : CORNER_INSET,
+            left: CORNER_INSET,
+            margin: 0,
+        }, children: [jsx(Tooltip, { content: zoomInLabel, placement: "right", children: jsx(ControlButton, { onClick: () => zoomIn(), "aria-label": zoomInLabel, children: jsx(Plus, {}) }) }), jsx(Tooltip, { content: zoomOutLabel, placement: "right", children: jsx(ControlButton, { onClick: () => zoomOut(), "aria-label": zoomOutLabel, children: jsx(Minus, {}) }) }), jsx(Tooltip, { content: fitViewLabel, placement: "right", children: jsx(ControlButton, { onClick: () => fitView(fitViewOptions), "aria-label": fitViewLabel, children: jsx(TbMaximize, {}) }) }), readOnly ? null : (jsx(Tooltip, { content: undoLabel, placement: "right", children: jsx(ControlButton, { onClick: undo, disabled: !canUndo, "aria-label": undoLabel, children: jsx(TbArrowBackUp, {}) }) })), readOnly ? null : (jsx(Tooltip, { content: redoLabel, placement: "right", children: jsx(ControlButton, { onClick: redo, disabled: !canRedo, "aria-label": redoLabel, children: jsx(TbArrowForwardUp, {}) }) })), readOnly ? null : (jsx(Tooltip, { content: interactivityLabel, placement: "right", children: jsx(ControlButton, { onClick: onToggleInteractivity, "aria-label": interactivityLabel, children: isInteractive ? jsx(TbLockOpen, {}) : jsx(TbLock, {}) }) })), readOnly ? null : (jsx(Tooltip, { content: autoArrangeLabel, placement: "right", children: jsx(ControlButton, { onClick: onAutoArrange, "aria-label": autoArrangeLabel, children: jsx(TbSitemap, {}) }) }))] }));
+}
+
+export { CanvasControls };
+//# sourceMappingURL=CanvasControls.mjs.map

package/dist/components/Workflow/canvas/Canvas/CanvasControls.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasControls.mjs","sources":["../../../../../src/components/Workflow/canvas/Canvas/CanvasControls.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/Workflow/canvas/Canvas/LabeledEdge.d.ts

@@ -0,0 +1,10 @@
+import { type EdgeProps } from '@xyflow/react';
+/**
+ * Edge with a logician-ui `Badge` label that rides the connection midpoint.
+ * Clicking the label selects the edge (opens its inspector); hovering the edge
+ * reveals a delete button BESIDE the label (not replacing it), so the label
+ * stays clickable. Labels use `EdgeLabelRenderer` rather than React Flow's SVG
+ * `labelStyle` so they inherit the design system's Badge styling.
+ */
+export declare function LabeledEdge({ id, source, sourceHandleId, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, label, markerEnd, style, }: EdgeProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LabeledEdge.d.ts.map

package/dist/components/Workflow/canvas/Canvas/LabeledEdge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LabeledEdge.d.ts","sourceRoot":"","sources":["../../../../../src/components/Workflow/canvas/Canvas/LabeledEdge.tsx"],"names":[],"mappings":"AAWA,OAAO,EAGL,KAAK,SAAS,EAEf,MAAM,eAAe,CAAC;AAevB;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,MAAM,EACN,cAAc,EACd,OAAO,EACP,OAAO,EACP,OAAO,EACP,OAAO,EACP,cAAc,EACd,cAAc,EACd,KAAK,EACL,SAAS,EACT,KAAK,GACN,EAAE,SAAS,2CAkJX"}

package/dist/components/Workflow/canvas/Canvas/LabeledEdge.js

@@ -0,0 +1,106 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var react$1 = require('@chakra-ui/react');
+var react = require('@xyflow/react');
+var index = require('../../../Icon/index.js');
+var IconButton = require('../../../IconButton/IconButton.js');
+require('../../../IconButton/IconButton.styles.js');
+var WorkflowContext = require('../../WorkflowContext/WorkflowContext.js');
+require('../../../Input/Input.js');
+require('../../../Typography/H1.js');
+require('../../../Typography/H2.js');
+require('../../../Typography/H3.js');
+require('../../../Typography/H4.js');
+require('../../../Typography/H5.js');
+require('../../../Typography/Link.js');
+require('../../../Typography/Subtext.js');
+require('../../../Typography/Subtitle.js');
+require('../../../Typography/Text.js');
+require('../../../Toast/Toaster.js');
+var endpointTitle = require('../EdgeInspector/endpointTitle.js');
+var BranchLabelBadge = require('./BranchLabelBadge.js');
+var edgeLabelVariant = require('./edgeLabelVariant.js');
+
+// Grace period on pointer-leave so moving from the SVG edge to the portaled
+// label (or the delete button beside it) doesn't flicker the affordance off in
+// the gap between layers.
+const HOVER_LEAVE_GRACE_MS = 80;
+/**
+ * Edge with a logician-ui `Badge` label that rides the connection midpoint.
+ * Clicking the label selects the edge (opens its inspector); hovering the edge
+ * reveals a delete button BESIDE the label (not replacing it), so the label
+ * stays clickable. Labels use `EdgeLabelRenderer` rather than React Flow's SVG
+ * `labelStyle` so they inherit the design system's Badge styling.
+ */
+function LabeledEdge({ id, source, sourceHandleId, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, label, markerEnd, style, }) {
+    const { graph, getNodeType, dispatch, readOnly, editor: { selectedEdgeId }, setSelectedNodeId, setSelectedEdgeId, setDrawerTarget, revealInspector, } = WorkflowContext.useWorkflow();
+    const translate = WorkflowContext.useWorkflowTranslate();
+    const [hovered, setHovered] = React.useState(false);
+    const leaveTimer = React.useRef(undefined);
+    const onEnter = React.useCallback(() => {
+        if (leaveTimer.current)
+            clearTimeout(leaveTimer.current);
+        setHovered(true);
+    }, []);
+    const onLeave = React.useCallback(() => {
+        leaveTimer.current = setTimeout(() => setHovered(false), HOVER_LEAVE_GRACE_MS);
+    }, []);
+    React.useEffect(() => () => {
+        if (leaveTimer.current)
+            clearTimeout(leaveTimer.current);
+    }, []);
+    // Clicking the label selects the edge and opens its inspector — mirrors the
+    // canvas `onEdgeClick` so the label is just another way in. Routes through
+    // revealInspector so a label click in test mode also restores the parked
+    // inspector (the badge stops propagation, so it never reaches onEdgeClick).
+    const onSelect = React.useCallback((e) => {
+        e.stopPropagation();
+        setSelectedNodeId(null);
+        setSelectedEdgeId(id);
+        revealInspector({ type: 'edge', id });
+    }, [id, setSelectedNodeId, setSelectedEdgeId, revealInspector]);
+    const onDelete = React.useCallback((e) => {
+        // Don't let the click fall through to edge/pane selection handlers.
+        e.stopPropagation();
+        dispatch({ type: 'deleteEdge', id });
+        // Mirror the keyboard-delete cleanup so the inspector doesn't linger on a
+        // now-removed edge.
+        if (selectedEdgeId === id) {
+            setSelectedEdgeId(null);
+            setDrawerTarget(null);
+        }
+    }, [dispatch, id, selectedEdgeId, setSelectedEdgeId, setDrawerTarget]);
+    const [edgePath, labelX, labelY] = react.getSmoothStepPath({
+        sourceX,
+        sourceY,
+        sourcePosition,
+        targetX,
+        targetY,
+        targetPosition,
+    });
+    // The label's text: an explicit edge label wins; otherwise fall back to the
+    // source handle's label, so semantic exits (Pass / Fail / branch / Else) ride
+    // on the wire without the author having to name every edge.
+    const variant = edgeLabelVariant.getEdgeLabelVariant(sourceHandleId);
+    // Resolve the source handle's label once (not per render): React Flow
+    // re-renders edges constantly during pan/zoom, and `handles()` rebuilds its
+    // outputs array each call.
+    const handleLabel = React.useMemo(() => {
+        const sourceNode = graph.nodes.find((n) => n.id === source);
+        return endpointTitle.findPort(sourceNode, sourceNode ? getNodeType(sourceNode.kind) : undefined, 'outputs', sourceHandleId ?? undefined)?.label;
+    }, [graph.nodes, source, sourceHandleId, getNodeType]);
+    const displayLabel = label ?? handleLabel;
+    // Delete shows only while the name badge itself is hovered (when editable) —
+    // not anywhere on the wire — so it's a deliberate, low-noise affordance. The
+    // edge inspector's delete button (see DrawerShell) covers labelless edges and
+    // anyone who'd rather delete from the sidebar.
+    const showDelete = hovered && !readOnly && Boolean(displayLabel);
+    const wrapperTransform = `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`;
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.BaseEdge, { id: id, path: edgePath, markerEnd: markerEnd, style: style }), showDelete || displayLabel ? (jsxRuntime.jsx(react.EdgeLabelRenderer, { children: jsxRuntime.jsxs(react$1.Box, { position: "absolute", transform: wrapperTransform, pointerEvents: "all", display: "inline-flex", onMouseEnter: onEnter, onMouseLeave: onLeave, children: [displayLabel ? (jsxRuntime.jsx(BranchLabelBadge.BranchLabelBadge, { variant: variant, onClick: onSelect, children: displayLabel })) : null, showDelete ? (jsxRuntime.jsx(react$1.Box, { position: "absolute", left: "100%", top: "50%", transform: "translateY(-50%)", pl: 1, children: jsxRuntime.jsx(IconButton.IconButton, { "aria-label": translate('workflow_edge_delete'), onClick: onDelete, size: "xs", variant: "outline", colorPalette: "danger", bg: "bg.surface", borderRadius: "full", children: jsxRuntime.jsx(index.TbX, { boxSize: "xs" }) }) })) : null] }) })) : null] }));
+}
+
+exports.LabeledEdge = LabeledEdge;
+//# sourceMappingURL=LabeledEdge.js.map

package/dist/components/Workflow/canvas/Canvas/LabeledEdge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LabeledEdge.js","sources":["../../../../../src/components/Workflow/canvas/Canvas/LabeledEdge.tsx"],"sourcesContent":[null],"names":["useWorkflow","useWorkflowTranslate","useState","useRef","useCallback","useEffect","getSmoothStepPath","getEdgeLabelVariant","useMemo","findPort","_jsxs","_Fragment","_jsx","BaseEdge","EdgeLabelRenderer","Box","BranchLabelBadge","IconButton","TbX"],"mappings":"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"}