@datatechsolutions/ui 2.11.31 → 2.11.33

package/dist/{chunk-KMDY6OLI.js → chunk-HSUB5MTJ.js}

@@ -1,10 +1,10 @@
 "use client";
 'use strict';
 
-var chunkKPHTHSHJ_js = require('./chunk-KPHTHSHJ.js');
-var chunkYXN2K77G_js = require('./chunk-YXN2K77G.js');
+var chunkLH2JDCO3_js = require('./chunk-LH2JDCO3.js');
 var chunkP4YYEM4B_js = require('./chunk-P4YYEM4B.js');
 var chunkPWBWP5FJ_js = require('./chunk-PWBWP5FJ.js');
+var chunkYXN2K77G_js = require('./chunk-YXN2K77G.js');
 var react = require('react');
 var react$1 = require('@xyflow/react');
 require('@xyflow/react/dist/style.css');
@@ -30,6 +30,10 @@ var useWorkflowStore = zustand.create((set, get) => ({
   showVariableInspector: false,
   showVersionHistory: false,
   showRunPanel: false,
+  showMinimap: true,
+  showDots: true,
+  showShortcuts: false,
+  cardDisplayMode: "detailed",
   isRunning: false,
   nodeResults: {},
   selectedRunId: null,
@@ -173,6 +177,21 @@ var useWorkflowStore = zustand.create((set, get) => ({
   toggleRunPanel: () => {
     set((state) => ({ showRunPanel: !state.showRunPanel }));
   },
+  toggleMinimap: () => {
+    set((state) => ({ showMinimap: !state.showMinimap }));
+  },
+  toggleDots: () => {
+    set((state) => ({ showDots: !state.showDots }));
+  },
+  toggleShortcuts: () => {
+    set((state) => ({ showShortcuts: !state.showShortcuts }));
+  },
+  closeShortcuts: () => {
+    set({ showShortcuts: false });
+  },
+  toggleCardDisplayMode: () => {
+    set((state) => ({ cardDisplayMode: state.cardDisplayMode === "detailed" ? "compact" : "detailed" }));
+  },
   setIsRunning: (running) => {
     set({ isRunning: running });
   },
@@ -203,6 +222,10 @@ var useWorkflowStore = zustand.create((set, get) => ({
       showVariableInspector: false,
       showVersionHistory: false,
       showRunPanel: false,
+      showMinimap: true,
+      showDots: true,
+      showShortcuts: false,
+      cardDisplayMode: "detailed",
       isRunning: false,
       nodeResults: {},
       selectedRunId: null,
@@ -795,6 +818,8 @@ var DraggableCommandBar = react.memo(function DraggableCommandBar2({
   onControlModeChange,
   showMinimap,
   onToggleMinimap,
+  showDots,
+  onToggleDots,
   cardDisplayMode,
   onToggleCardDisplayMode,
   layoutDirection,
@@ -918,6 +943,16 @@ var DraggableCommandBar = react.memo(function DraggableCommandBar2({
                 children: /* @__PURE__ */ jsxRuntime.jsx(outline.MapIcon, { className: "h-4 w-4" })
               }
             ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onToggleDots,
+                title: tWorkflow("toggleDots"),
+                className: showDots ? activeButtonClassName : inactiveButtonClassName,
+                children: /* @__PURE__ */ jsxRuntime.jsx(outline.EllipsisHorizontalIcon, { className: "h-4 w-4" })
+              }
+            ),
             /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
@@ -994,7 +1029,9 @@ var DraggableCommandBar = react.memo(function DraggableCommandBar2({
                         { keys: "\u21E7 5", label: tWorkflow("shortcutZoom50") },
                         { keys: "Esc", label: tWorkflow("shortcutDeselect") },
                         { keys: "\u232B", label: tWorkflow("shortcutDelete") },
-                        { keys: "L", label: tWorkflow("layoutMode") }
+                        { keys: "L", label: tWorkflow("layoutMode") },
+                        { keys: "G", label: tWorkflow("toggleDots") },
+                        { keys: "M", label: tWorkflow("toggleMinimap") }
                       ].map((shortcut) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
                         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] text-gray-600 dark:text-gray-300", children: shortcut.label }),
                         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center gap-0.5", children: shortcut.keys.split(" ").map((key) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -1601,11 +1638,12 @@ var AgentToolFlowNode = react.memo(function AgentToolFlowNode2({ id, data, selec
               event.stopPropagation();
             },
             children: /* @__PURE__ */ jsxRuntime.jsx(
-              chunkKPHTHSHJ_js.ToggleSwitch,
+              chunkLH2JDCO3_js.ToggleSwitch,
               {
                 checked: Boolean(agentTool.enabled),
                 onChange: () => data.onToggle?.(agentTool),
                 size: "sm",
+                color: "blue",
                 label: `${agentTool.name} enabled`
               }
             )
@@ -1708,11 +1746,12 @@ var ToolFlowNode = react.memo(function ToolFlowNode2({ id, data, selected }) {
                   event.preventDefault();
                 },
                 children: /* @__PURE__ */ jsxRuntime.jsx(
-                  chunkKPHTHSHJ_js.ToggleSwitch,
+                  chunkLH2JDCO3_js.ToggleSwitch,
                   {
                     checked: Boolean(tool.enabled),
                     onChange: () => onToggle(tool),
                     size: "sm",
+                    color: "blue",
                     label: `${tool.name} enabled`
                   }
                 )
@@ -1859,11 +1898,12 @@ var RuleFlowNode = react.memo(function RuleFlowNode2({ id, data, selected }) {
                   event.preventDefault();
                 },
                 children: /* @__PURE__ */ jsxRuntime.jsx(
-                  chunkKPHTHSHJ_js.ToggleSwitch,
+                  chunkLH2JDCO3_js.ToggleSwitch,
                   {
                     checked: Boolean(rule.enabled),
                     onChange: () => onToggle(rule),
                     size: "sm",
+                    color: "violet",
                     label: `${rule.name} enabled`
                   }
                 )
@@ -3150,8 +3190,8 @@ function ConfigFormActions({
   saveDisabled = false
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2 border-t border-gray-200 pt-4 dark:border-gray-700", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(chunkKPHTHSHJ_js.Button, { type: "button", outline: true, onClick: onCancel, children: cancelLabel }),
-    /* @__PURE__ */ jsxRuntime.jsx(chunkKPHTHSHJ_js.Button, { type: "button", onClick: onSave, disabled: saveDisabled, children: saveLabel })
+    /* @__PURE__ */ jsxRuntime.jsx(chunkLH2JDCO3_js.Button, { type: "button", outline: true, onClick: onCancel, children: cancelLabel }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunkLH2JDCO3_js.Button, { type: "button", onClick: onSave, disabled: saveDisabled, children: saveLabel })
   ] });
 }
 var COLOR_CLASSES = {
@@ -3398,7 +3438,7 @@ function IfElseNodeConfigForm({ config, onSave, onCancel }) {
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 flex items-center justify-between", children: [
         /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: t("conditionsLabel") }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkKPHTHSHJ_js.Button,
+          chunkLH2JDCO3_js.Button,
           {
             type: "button",
             onClick: handleAddCondition,
@@ -3409,7 +3449,7 @@ function IfElseNodeConfigForm({ config, onSave, onCancel }) {
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: conditions.map((condition, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2 rounded-lg border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-800/50", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid flex-1 grid-cols-3 gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
-            chunkKPHTHSHJ_js.FormInput,
+            chunkLH2JDCO3_js.FormInput,
             {
               type: "text",
               label: t("variableLabel"),
@@ -3420,7 +3460,7 @@ function IfElseNodeConfigForm({ config, onSave, onCancel }) {
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
-            chunkKPHTHSHJ_js.FormSelect,
+            chunkLH2JDCO3_js.FormSelect,
             {
               label: t("operatorLabel"),
               value: condition.operator,
@@ -3430,7 +3470,7 @@ function IfElseNodeConfigForm({ config, onSave, onCancel }) {
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
-            chunkKPHTHSHJ_js.FormInput,
+            chunkLH2JDCO3_js.FormInput,
             {
               type: "text",
               label: t("valueLabel"),
@@ -3442,7 +3482,7 @@ function IfElseNodeConfigForm({ config, onSave, onCancel }) {
           ) })
         ] }),
         conditions.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
-          chunkKPHTHSHJ_js.IconButton,
+          chunkLH2JDCO3_js.IconButton,
           {
             onClick: () => handleRemoveCondition(index),
             icon: /* @__PURE__ */ jsxRuntime.jsx(outline.TrashIcon, { className: "h-4 w-4" }),
@@ -3597,7 +3637,7 @@ function HttpRequestNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkKPHTHSHJ_js.FormSelect,
+      chunkLH2JDCO3_js.FormSelect,
       {
         label: t("methodLabel"),
         value: method,
@@ -3606,7 +3646,7 @@ function HttpRequestNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkKPHTHSHJ_js.FormInput,
+      chunkLH2JDCO3_js.FormInput,
       {
         type: "text",
         label: t("urlLabel"),
@@ -3619,7 +3659,7 @@ function HttpRequestNodeConfigForm({ config, onSave, onCancel }) {
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
         /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: t("headersLabel") }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkKPHTHSHJ_js.Button,
+          chunkLH2JDCO3_js.Button,
           {
             type: "button",
             onClick: handleAddHeader,
@@ -3629,7 +3669,7 @@ function HttpRequestNodeConfigForm({ config, onSave, onCancel }) {
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: headerEntries.map((entry, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkKPHTHSHJ_js.FormInput,
+          chunkLH2JDCO3_js.FormInput,
           {
             type: "text",
             value: entry.key,
@@ -3639,7 +3679,7 @@ function HttpRequestNodeConfigForm({ config, onSave, onCancel }) {
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkKPHTHSHJ_js.FormInput,
+          chunkLH2JDCO3_js.FormInput,
           {
             type: "text",
             value: entry.value,
@@ -3649,7 +3689,7 @@ function HttpRequestNodeConfigForm({ config, onSave, onCancel }) {
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkKPHTHSHJ_js.IconButton,
+          chunkLH2JDCO3_js.IconButton,
           {
             onClick: () => handleRemoveHeader(index),
             icon: /* @__PURE__ */ jsxRuntime.jsx(outline.TrashIcon, { className: "h-4 w-4" }),
@@ -3661,7 +3701,7 @@ function HttpRequestNodeConfigForm({ config, onSave, onCancel }) {
       ] }, index)) })
     ] }),
     method !== "GET" && /* @__PURE__ */ jsxRuntime.jsx(
-      chunkKPHTHSHJ_js.FormTextarea,
+      chunkLH2JDCO3_js.FormTextarea,
       {
         label: t("bodyLabel"),
         value: body,
@@ -3672,7 +3712,7 @@ function HttpRequestNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkKPHTHSHJ_js.FormInput,
+      chunkLH2JDCO3_js.FormInput,
       {
         type: "number",
         label: t("timeoutLabel"),
@@ -3703,7 +3743,7 @@ function TemplateTransformNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkKPHTHSHJ_js.FormTextarea,
+      chunkLH2JDCO3_js.FormTextarea,
       {
         label: t("templateLabel"),
         value: template,
@@ -3714,7 +3754,7 @@ function TemplateTransformNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkKPHTHSHJ_js.FormInput,
+      chunkLH2JDCO3_js.FormInput,
       {
         type: "text",
         label: t("outputVariableLabel"),
@@ -3743,7 +3783,7 @@ function IterationNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkKPHTHSHJ_js.FormInput,
+      chunkLH2JDCO3_js.FormInput,
       {
         type: "text",
         label: t("iteratorVariableLabel"),
@@ -3753,7 +3793,7 @@ function IterationNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkKPHTHSHJ_js.FormInput,
+      chunkLH2JDCO3_js.FormInput,
       {
         type: "number",
         label: t("maxIterationsLabel"),
@@ -3784,7 +3824,7 @@ function KnowledgeBaseNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkKPHTHSHJ_js.FormInput,
+      chunkLH2JDCO3_js.FormInput,
       {
         type: "text",
         label: t("sourceIdLabel"),
@@ -3794,7 +3834,7 @@ function KnowledgeBaseNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkKPHTHSHJ_js.FormInput,
+      chunkLH2JDCO3_js.FormInput,
       {
         type: "number",
         label: t("topKLabel"),
@@ -3805,7 +3845,7 @@ function KnowledgeBaseNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkKPHTHSHJ_js.FormInput,
+      chunkLH2JDCO3_js.FormInput,
       {
         type: "number",
         label: t("similarityThresholdLabel"),
@@ -3836,7 +3876,7 @@ function AnswerNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkKPHTHSHJ_js.FormTextarea,
+      chunkLH2JDCO3_js.FormTextarea,
       {
         label: t("outputTemplateLabel"),
         hint: t("outputTemplateHelp"),
@@ -4270,7 +4310,7 @@ function VariableAggregatorNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkKPHTHSHJ_js.FormInput,
+      chunkLH2JDCO3_js.FormInput,
       {
         type: "text",
         label: t("outputVariableLabel"),
@@ -4280,7 +4320,7 @@ function VariableAggregatorNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkKPHTHSHJ_js.FormSelect,
+      chunkLH2JDCO3_js.FormSelect,
       {
         label: t("aggregationModeLabel"),
         value: aggregationMode,
@@ -4313,7 +4353,7 @@ function DocumentExtractorNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkKPHTHSHJ_js.FormSelect,
+      chunkLH2JDCO3_js.FormSelect,
       {
         label: t("extractionModeLabel"),
         value: extractionMode,
@@ -4322,7 +4362,7 @@ function DocumentExtractorNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkKPHTHSHJ_js.FormInput,
+      chunkLH2JDCO3_js.FormInput,
       {
         type: "text",
         label: t("outputVariableLabel"),
@@ -4499,7 +4539,7 @@ function IterationStartNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkKPHTHSHJ_js.FormInput,
+      chunkLH2JDCO3_js.FormInput,
       {
         type: "text",
         label: t("iteratorVariableLabel"),
@@ -4509,7 +4549,7 @@ function IterationStartNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkKPHTHSHJ_js.FormInput,
+      chunkLH2JDCO3_js.FormInput,
       {
         type: "text",
         label: t("itemVariableLabel"),
@@ -4519,7 +4559,7 @@ function IterationStartNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkKPHTHSHJ_js.FormInput,
+      chunkLH2JDCO3_js.FormInput,
       {
         type: "text",
         label: t("indexVariableLabel"),
@@ -5113,7 +5153,7 @@ function GroupNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkKPHTHSHJ_js.FormInput,
+      chunkLH2JDCO3_js.FormInput,
       {
         type: "text",
         label: translations("labelField"),
@@ -5123,7 +5163,7 @@ function GroupNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkKPHTHSHJ_js.FormTextarea,
+      chunkLH2JDCO3_js.FormTextarea,
       {
         label: translations("descriptionField"),
         value: description,
@@ -5281,7 +5321,7 @@ function ModelProviderNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkKPHTHSHJ_js.FormInput,
+      chunkLH2JDCO3_js.FormInput,
       {
         type: "text",
         label: t("nameLabel"),
@@ -5291,7 +5331,7 @@ function ModelProviderNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkKPHTHSHJ_js.FormSelect,
+      chunkLH2JDCO3_js.FormSelect,
       {
         label: t("providerTypeLabel"),
         value: providerType,
@@ -5300,7 +5340,7 @@ function ModelProviderNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     showRegion && /* @__PURE__ */ jsxRuntime.jsx(
-      chunkKPHTHSHJ_js.FormSelect,
+      chunkLH2JDCO3_js.FormSelect,
       {
         label: t("regionLabel"),
         value: region,
@@ -5309,7 +5349,7 @@ function ModelProviderNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     showEndpoint && /* @__PURE__ */ jsxRuntime.jsx(
-      chunkKPHTHSHJ_js.FormInput,
+      chunkLH2JDCO3_js.FormInput,
       {
         type: "text",
         label: t("endpointLabel"),
@@ -5319,7 +5359,7 @@ function ModelProviderNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     showApiKey && /* @__PURE__ */ jsxRuntime.jsx(
-      chunkKPHTHSHJ_js.FormInput,
+      chunkLH2JDCO3_js.FormInput,
       {
         type: "password",
         label: t("apiKeyLabel"),
@@ -5329,7 +5369,7 @@ function ModelProviderNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     showCredentialRef && /* @__PURE__ */ jsxRuntime.jsx(
-      chunkKPHTHSHJ_js.FormInput,
+      chunkLH2JDCO3_js.FormInput,
       {
         type: "text",
         label: t("credentialRefLabel"),
@@ -5473,7 +5513,7 @@ function LogicNodeModal({ onSave, entities = [], datasources = [], onLoadTables,
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkKPHTHSHJ_js.GlassModal,
+    chunkLH2JDCO3_js.GlassModal,
     {
       open,
       onClose: closeModal,
@@ -5533,7 +5573,7 @@ function NodeContextMenu({ position, targetId, onClose, onEdit, onDuplicate, onC
     }
   ];
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkKPHTHSHJ_js.ContextMenu,
+    chunkLH2JDCO3_js.ContextMenu,
     {
       position,
       onClose,
@@ -5590,7 +5630,7 @@ function PanelContextMenu({ position, onClose, onPaste, onSelectAll, onFitView,
     }
   ];
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkKPHTHSHJ_js.ContextMenu,
+    chunkLH2JDCO3_js.ContextMenu,
     {
       position,
       onClose,
@@ -5737,7 +5777,7 @@ function SelectionContextMenu({
     }
   ];
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkKPHTHSHJ_js.ContextMenu,
+    chunkLH2JDCO3_js.ContextMenu,
     {
       position,
       onClose,
@@ -5953,10 +5993,16 @@ function WorkflowCanvasInner({
   const canRedo = useWorkflowStore((state) => state.future.length > 0);
   const controlMode = useWorkflowStore((state) => state.controlMode);
   const setControlMode = useWorkflowStore((state) => state.setControlMode);
-  const [showMinimap, setShowMinimap] = react.useState(true);
-  const [showShortcuts, setShowShortcuts] = react.useState(false);
-  const [cardDisplayMode, setCardDisplayMode] = react.useState("detailed");
+  const showMinimap = useWorkflowStore((s) => s.showMinimap);
+  const showDots = useWorkflowStore((s) => s.showDots);
+  const showShortcuts = useWorkflowStore((s) => s.showShortcuts);
+  const cardDisplayMode = useWorkflowStore((s) => s.cardDisplayMode);
   const layoutDirection = useWorkflowStore((s) => s.layoutDirection);
+  const toggleMinimap = useWorkflowStore((s) => s.toggleMinimap);
+  const toggleDots = useWorkflowStore((s) => s.toggleDots);
+  const toggleShortcuts = useWorkflowStore((s) => s.toggleShortcuts);
+  const closeShortcuts = useWorkflowStore((s) => s.closeShortcuts);
+  const toggleCardDisplayMode = useWorkflowStore((s) => s.toggleCardDisplayMode);
   const setLayoutDirection = useWorkflowStore((s) => s.setLayoutDirection);
   const [editingLogicNodeId, setEditingLogicNodeId] = react.useState(null);
   const handleEditLogicNode = react.useCallback((nodeId) => {
@@ -6731,6 +6777,14 @@ function WorkflowCanvasInner({
           setControlMode("hand");
           return;
         }
+        if (event.key.toLowerCase() === "g") {
+          toggleDots();
+          return;
+        }
+        if (event.key.toLowerCase() === "m") {
+          toggleMinimap();
+          return;
+        }
         if (event.shiftKey && event.key === "!") {
           event.preventDefault();
           zoomTo(1);
@@ -7296,7 +7350,7 @@ function WorkflowCanvasInner({
           deleteKeyCode: ["Backspace", "Delete"],
           connectionLineStyle: { stroke: GRAPH_ACTIVE_EDGE_COLOR, strokeWidth: 2 },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
+            showDots && /* @__PURE__ */ jsxRuntime.jsx(
               Background,
               {
                 variant: react$1.BackgroundVariant.Dots,
@@ -7332,14 +7386,16 @@ function WorkflowCanvasInner({
           controlMode,
           onControlModeChange: setControlMode,
           showMinimap,
-          onToggleMinimap: () => setShowMinimap((previous) => !previous),
+          onToggleMinimap: toggleMinimap,
+          showDots,
+          onToggleDots: toggleDots,
           cardDisplayMode,
-          onToggleCardDisplayMode: () => setCardDisplayMode((previous) => previous === "detailed" ? "compact" : "detailed"),
+          onToggleCardDisplayMode: toggleCardDisplayMode,
           layoutDirection,
           onLayoutDirectionChange: handleLayoutDirectionChange,
           showShortcuts,
-          onToggleShortcuts: () => setShowShortcuts((previous) => !previous),
-          onCloseShortcuts: () => setShowShortcuts(false),
+          onToggleShortcuts: toggleShortcuts,
+          onCloseShortcuts: closeShortcuts,
           tWorkflow
         }
       ),
@@ -7610,5 +7666,5 @@ exports.useModalStore = useModalStore;
 exports.useWorkflowBuilderClient = useWorkflowBuilderClient;
 exports.useWorkflowBuilderClientOptional = useWorkflowBuilderClientOptional;
 exports.useWorkflowStore = useWorkflowStore;
-//# sourceMappingURL=chunk-KMDY6OLI.js.map
-//# sourceMappingURL=chunk-KMDY6OLI.js.map
+//# sourceMappingURL=chunk-HSUB5MTJ.js.map
+//# sourceMappingURL=chunk-HSUB5MTJ.js.map