@burdenoff/fluidgrids-fe-sdk 2026.1022.2 → 2026.1022.4

package/dist/{chunk-2HUSQTUK.js → chunk-T3UCFY7J.js}

@@ -1,7 +1,7 @@
 import { deepClone, applyTemplateInputs } from './chunk-GEMNVFPK.js';
 import { Input as Input$1 } from './chunk-IEVSFCFS.js';
-import { Dialog as Dialog$1, DialogContent as DialogContent$1, DialogHeader as DialogHeader$1, DialogTitle as DialogTitle$1, DialogDescription as DialogDescription$1, DialogFooter } from './chunk-7LSGGJ7D.js';
-import { Badge as Badge$1, Button as Button$1 } from './chunk-GDAFKRQO.js';
+import { Dialog as Dialog$1, DialogContent as DialogContent$1, DialogHeader as DialogHeader$1, DialogTitle as DialogTitle$1, DialogDescription as DialogDescription$1, DialogFooter } from './chunk-YXMFRQYV.js';
+import { Badge as Badge$1, Button as Button$1 } from './chunk-BQXVT32O.js';
 import { QuotaExhaustedDialog } from './chunk-SYVLFHWV.js';
 import { getGlobalStoreClient, createGlobalStoreClient, setGlobalStoreClient, resetGlobalStoreClient } from './chunk-PXIFUMLA.js';
 import { GetMyNodeInstallationsDocument, BrowseWorkflowTemplatesDocument, InstallWorkflowNodeDocument, InstallPurchasedNodeDocument, BrowseWorkflowNodesDocument, UninstallWorkflowNodeDocument, CreateStoreOrderDocument, GetNodeInstallableVersionsDocument } from './chunk-WBH2XEWO.js';
@@ -10,7 +10,7 @@ import { cn as cn$1 } from './chunk-JL7CASN5.js';
 import { useWorkflowVersions, useRestoreWorkflowVersion, useActivateWorkflow, useDeleteWorkflow, useLazyWorkflowDefinition, useDeactivateWorkflow } from './chunk-HP3A6BPK.js';
 import { config, getFluidGridsConfig, validateTrustedOrigin, resetFluidGridsExecutionState, setFluidGridsConfig, resetFluidGridsConfig } from './chunk-UZG3ZIQM.js';
 import { fetchAllNodeEndpointConfigs } from './chunk-5TW5JP5R.js';
-import { useFlowStore, isNodeTrigger, useIsValidConnection, isTriggerOperation } from './chunk-EGYJKHAL.js';
+import { useFlowStore, isNodeTrigger, useIsValidConnection, isTriggerOperation } from './chunk-VI2RFS65.js';
 import { NodeManifestDocument, UpdateWorkflowDefinitionDocument, CreateWorkflowDefinitionDocument, CreateWorkflowVersionDocument, ExecuteStepDocument, TriggerWorkflowDocument, RunFromNodeDocument, ExecutionDetailDocument, WorkflowRunDocument, FluidgridsEntityTagsDocument, AvailableFluidgridsTagsDocument, SearchFluidgridsTagsDocument, TagFluidgridsEntityDocument, UntagFluidgridsEntityDocument, ReplaceFluidgridsEntityTagsDocument, CreateFluidgridsTagDocument, WorkspaceRunsQuotaDocument, NodeSchemaIntrospectionDocument, useWorkflowPinnedDataQuery, usePinNodeDataMutation, useUnpinNodeDataMutation, useRunFromNodeEligibilityQuery, EventRegistrationsDocument, WebhookTestListenerDocument, StopWebhookTestListenerDocument, ListenForWebhookTestEventDocument, NodeUsageStatusDocument, RemoveNodeFromWorkflowsDocument } from './chunk-SAZVBFMO.js';
 import { throwIfResultError, isQuotaExhaustedFailure, describeOperationError, openRunQuotaUpgradePrompt, RUNS_QUOTA_NAME, BILLING_PLANS_PATH } from './chunk-4UAWCWS7.js';
 import { useTr, FluidGridsTranslationProvider, ENGLISH_FALLBACK_TRANSLATOR } from './chunk-UULVIT25.js';
@@ -30,6 +30,7 @@ import { Handle, Position, getBezierPath, MarkerType, useReactFlow, NodeResizer,
 import { nanoid } from 'nanoid';
 import ReactMarkdown from 'react-markdown';
 import { toast } from 'sonner';
+import { nodeCategoryColor, edgeColor, chartSeriesColor, chartSeriesIndex } from '@burdenoff/fe-libs/shared/utils';
 import { useParams, useNavigate, Link } from 'react-router';
 import { useShallow, shallow } from 'zustand/shallow';
 import { InfoCircledIcon } from '@radix-ui/react-icons';
@@ -1267,14 +1268,20 @@ var AdaptiveCardRenderer = forwardRef(function AdaptiveCardRenderer2({ cardData,
       },
       separator: {
         lineThickness: 1,
-        lineColor: "#e5e7eb"
+        lineColor: "var(--color-border-default)"
       },
       containerStyles: {
         default: {
           backgroundColor: "transparent",
           foregroundColors: {
-            default: { default: "#374151", subtle: "#6b7280" },
-            accent: { default: "#3b82f6", subtle: "#60a5fa" }
+            default: {
+              default: "var(--color-text-primary)",
+              subtle: "var(--color-text-muted)"
+            },
+            accent: {
+              default: "var(--color-text-link)",
+              subtle: "var(--color-text-linkHover)"
+            }
           }
         }
       }
@@ -2749,13 +2756,13 @@ var NODE_TYPE_DRAG_DATA_FORMAT = "application/flow-builder.node-type";
 var NODE_OPERATION_DRAG_DATA_FORMAT = "application/flow-builder.node-operation";
 var STICKY_NOTE_TYPE = "sticky-note";
 var STICKY_COLORS = {
-  yellow: "#F2C94C",
-  orange: "#EB8934",
-  blue: "#3B82F6",
-  green: "#10B981",
-  red: "#EF4444",
-  purple: "#8B5CF6",
-  gray: "#9CA3AF"
+  yellow: "var(--color-chart-4)",
+  orange: "var(--color-status-warning-bg)",
+  blue: "var(--color-chart-1)",
+  green: "var(--color-chart-2)",
+  red: "var(--color-chart-5)",
+  purple: "var(--color-chart-3)",
+  gray: "var(--color-chart-axis)"
 };
 var DEFAULT_STICKY_COLOR = "yellow";
 var STICKY_DEFAULT_SIZE = { width: 260, height: 170 };
@@ -2889,7 +2896,7 @@ function StickyNoteNodeComponent({
           ),
           style: { top: -15 },
           onDoubleClick: (e) => e.stopPropagation(),
-          children: showPalette ? /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 px-1 py-0.5", children: Object.entries(STICKY_COLORS).map(([name, hex]) => /* @__PURE__ */ jsx(
+          children: showPalette ? /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 px-1 py-0.5", children: Object.entries(STICKY_COLORS).map(([name, color]) => /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
@@ -2903,7 +2910,7 @@ function StickyNoteNodeComponent({
                 "nodrag size-4 rounded-full border transition-transform hover:scale-125",
                 name === colorKey ? "border-foreground" : "border-transparent"
               ),
-              style: { backgroundColor: hex }
+              style: { backgroundColor: color }
             },
             name
           )) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -3124,44 +3131,26 @@ function NodeTypeIcon({
   }
   return /* @__PURE__ */ jsx(Icon, { icon: icon || fallbackIcon, className });
 }
-var BRAND_ACCENTS = [
-  [/gmail|google/, "#ea4335"],
-  [/slack/, "#611f69"],
-  [/github/, "#334155"],
-  [/gitlab/, "#fc6d26"],
-  [/stripe/, "#635bff"],
-  [/discord/, "#5865f2"],
-  [/notion/, "#111827"],
-  [/telegram/, "#2aabee"],
-  [/whatsapp/, "#25d366"],
-  [/openai/, "#10a37f"],
-  [/anthropic|claude/, "#d97757"],
-  [/twilio/, "#f22f46"],
-  [/sheet|excel/, "#21a366"],
-  [/http|api|webhook|rest/, "#6366f1"],
-  [/db|sql|postgres|mysql|mongo/, "#0ea5e9"]
-];
-var HASH_PALETTE = [
-  "#6366f1",
-  "#0ea5e9",
-  "#10b981",
-  "#f59e0b",
-  "#ef4444",
-  "#a855f7",
-  "#ec4899",
-  "#14b8a6",
-  "#f97316",
-  "#8b5cf6"
+var PROVIDER_ACCENTS = [
+  [/gmail|google/, "var(--color-chart-5)"],
+  [/slack/, "var(--color-chart-3)"],
+  [/github|gitlab/, nodeCategoryColor("utility")],
+  [/stripe/, "var(--color-chart-12)"],
+  [/discord|telegram/, "var(--color-chart-1)"],
+  [/notion/, "var(--color-text-primary)"],
+  [/whatsapp|sheet|excel/, "var(--color-chart-7)"],
+  [/openai|anthropic|claude/, nodeCategoryColor("ai")],
+  [/twilio/, "var(--color-chart-10)"],
+  [/http|api|webhook|rest/, nodeCategoryColor("integration")],
+  [/db|sql|postgres|mysql|mongo/, nodeCategoryColor("data")]
 ];
 function nodeAccent(key) {
   const k = (key || "").toLowerCase();
-  for (const [re, hex] of BRAND_ACCENTS) if (re.test(k)) return hex;
-  let h = 0;
-  for (let i = 0; i < k.length; i++) h = h * 31 + k.charCodeAt(i) >>> 0;
-  return HASH_PALETTE[h % HASH_PALETTE.length];
+  for (const [re, color] of PROVIDER_ACCENTS) if (re.test(k)) return color;
+  return chartSeriesColor(chartSeriesIndex(k));
 }
-function tint(hex, pct = 14) {
-  return `color-mix(in srgb, ${hex} ${pct}%, transparent)`;
+function tint(color, pct = 14) {
+  return `color-mix(in srgb, ${color} ${pct}%, transparent)`;
 }
 function InlineEditableLabel({
   value,
@@ -3236,7 +3225,7 @@ var NodeCard = React2.forwardRef(
     executionStatus = "idle",
     itemCount,
     isTrigger = false,
-    accent = "#3b82f6",
+    accent = nodeCategoryColor("action"),
     onSettings,
     onExecute,
     onDelete,
@@ -3379,7 +3368,7 @@ var NodeCard = React2.forwardRef(
                 borderTop: `3px solid ${accent}`,
                 transition: "transform 0.15s ease, box-shadow 0.15s ease",
                 transform: hovered ? "translateY(-2px)" : "none",
-                boxShadow: hovered ? "0 2px 4px rgba(16,24,40,0.06), 0 16px 34px -12px rgba(16,24,40,0.24)" : void 0
+                boxShadow: hovered ? "var(--shadow-float)" : void 0
               },
               ...props,
               children: [
@@ -3570,7 +3559,7 @@ function CustomHandle({
         width: 14,
         height: 14,
         borderRadius: "50%",
-        background: "var(--card, #fff)",
+        background: "var(--color-node-bg)",
         border: `2.5px solid ${accent}`,
         boxShadow: `0 0 0 3px color-mix(in srgb, ${accent} 12%, transparent)`
       } : void 0,
@@ -3615,8 +3604,8 @@ var TONE_COLORS = {
   success: "var(--color-status-success-text)",
   error: "var(--color-status-error-text)",
   warning: "var(--color-status-warning-text)",
-  info: "#3b82f6",
-  neutral: "var(--muted-foreground, #6b7280)"
+  info: "var(--color-status-info-text)",
+  neutral: "var(--color-text-muted)"
 };
 function HandlePlusStub({
   nodeId,
@@ -3685,8 +3674,8 @@ function HandlePlusStub({
               alignItems: "center",
               justifyContent: "center",
               border: `1.5px solid ${color}`,
-              background: isArmedHere ? color : "var(--card, #fff)",
-              color: isArmedHere ? "var(--card, #fff)" : color,
+              background: isArmedHere ? color : "var(--color-node-bg)",
+              color: isArmedHere ? "var(--color-node-bg)" : color,
               boxShadow: isArmedHere ? `0 0 0 3px color-mix(in srgb, ${color} 22%, transparent)` : `0 0 0 2px color-mix(in srgb, ${color} 10%, transparent)`,
               transition: "transform .12s ease, background .12s ease, color .12s ease"
             },
@@ -5224,7 +5213,7 @@ function SubNodeComponent({
         "button",
         {
           onClick: () => deleteNode(id),
-          className: "absolute -top-1 -right-1 w-4 h-4 rounded-full bg-[var(--color-status-error)] text-white text-[10px] flex items-center justify-center opacity-0 group-hover:opacity-100 hover:bg-[var(--color-status-error)] transition-opacity",
+          className: "absolute -top-1 -right-1 w-4 h-4 rounded-full bg-action-danger-bg text-action-danger-text text-[10px] flex items-center justify-center opacity-0 group-hover:opacity-100 hover:bg-action-danger-bgHover transition-opacity",
           children: "\xD7"
         }
       ),
@@ -5436,7 +5425,9 @@ var getNodeMetadata = (value) => {
     const isLogicNode = /(^|[:/])(if|switch|merge|loop|filter|branch|router|condition|aggregate)/.test(
       (value?.type || "").toLowerCase()
     );
-    const roleAccent = isTrigger ? "#10b981" : isLogicNode ? "#f59e0b" : "#3b82f6";
+    const roleAccent = nodeCategoryColor(
+      isTrigger ? "trigger" : isLogicNode ? "logic" : "action"
+    );
     const outputHandles = resolveOutputHandles(
       data
     );
@@ -6253,7 +6244,7 @@ function useNodeExecution() {
         return { success: false, error: "No result from trigger" };
       } catch (error) {
         console.error("[useNodeExecution] Error triggering workflow:", error);
-        openRunQuotaUpgradePrompt(error, tr);
+        const quotaExhausted = openRunQuotaUpgradePrompt(error, tr);
         const errorMessage = describeOperationError(error);
         const errorRunId = nanoid$1();
         const errorLog = {
@@ -6273,7 +6264,7 @@ function useNodeExecution() {
         addLog(errorLog);
         setNodeStatus(triggerNode.id, "error");
         completeExecution();
-        return { success: false, error: errorMessage };
+        return { success: false, error: errorMessage, quotaExhausted };
       }
     },
     [
@@ -6350,11 +6341,11 @@ function useNodeExecution() {
         return { success: false, error: "No result from runFromNode" };
       } catch (error) {
         console.error("[useNodeExecution] Error running from node:", error);
-        openRunQuotaUpgradePrompt(error, tr);
+        const quotaExhausted = openRunQuotaUpgradePrompt(error, tr);
         const errorMessage = describeOperationError(error);
         setNodeStatus(nodeId, "error");
         completeExecution();
-        return { success: false, error: errorMessage };
+        return { success: false, error: errorMessage, quotaExhausted };
       }
     },
     [
@@ -6863,7 +6854,7 @@ function useRunnerActions() {
 }
 var STYLES = {
   ONLINE: "border-status-success-border bg-status-success-bg-subtle text-status-success-text",
-  OFFLINE: "border-status-neutral-border bg-status-neutral-bg-subtle text-status-neutral-text",
+  OFFLINE: "border-border-default bg-bg-sunken text-text-muted",
   NEVER_CONNECTED: "border-status-warning-border bg-status-warning-bg-subtle text-status-warning-text"
 };
 function RunnerStatusPill({
@@ -7257,9 +7248,9 @@ function useRunsQuota() {
   const isExecuting = useFlowStore((s) => s.execution.isExecuting);
   const request = useRef(0);
   const refresh = useCallback(async () => {
-    const client = getFluidGridsClientSafe();
-    const { workspaceId } = getFluidGridsConfig();
     const id = ++request.current;
+    const client = await waitForFluidGridsClient();
+    const { workspaceId } = getFluidGridsConfig();
     const next = client ? await readRunsQuota(client, workspaceId) : null;
     if (id === request.current) setQuota(next);
   }, []);
@@ -8426,9 +8417,9 @@ function TemplateCard({
             Badge$1,
             {
               variant: "default",
-              className: "bg-gradient-to-r from-yellow-500 to-orange-500 text-white border-0 shadow-lg",
+              className: "bg-status-warning-bg-subtle text-status-warning-text border border-status-warning-border shadow-lg",
               children: [
-                /* @__PURE__ */ jsx(Star, { className: "size-3 mr-1 fill-white" }),
+                /* @__PURE__ */ jsx(Star, { className: "size-3 mr-1 fill-current" }),
                 tr("fluidgrids.builder.templateCard.featuredBadge", "Featured")
               ]
             }
@@ -8437,21 +8428,21 @@ function TemplateCard({
             Badge$1,
             {
               variant: "secondary",
-              className: "bg-green-500 text-white border-0",
+              className: "bg-status-success-bg text-action-primary-text border-0",
               children: tr("fluidgrids.builder.templateCard.freeBadge", "Free")
             }
           ) : /* @__PURE__ */ jsxs(
             Badge$1,
             {
               variant: "default",
-              className: "bg-blue-500 text-white border-0",
+              className: "bg-status-info-bg text-action-primary-text border-0",
               children: [
                 "$",
                 template.price?.toString() || "0"
               ]
             }
           ) }),
-          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" })
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-bg-overlay via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-3", children: [
           /* @__PURE__ */ jsx("h3", { className: "font-semibold text-base line-clamp-1 group-hover:text-primary transition-colors", children: template.name }),
@@ -8465,7 +8456,7 @@ function TemplateCard({
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs text-muted-foreground pt-2 border-t", children: [
             /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: template.rating && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsx(Star, { className: "size-3 fill-yellow-400 text-yellow-400" }),
+              /* @__PURE__ */ jsx(Star, { className: "size-3 fill-status-warning-bg text-status-warning-text" }),
               /* @__PURE__ */ jsx("span", { className: "font-medium", children: template.rating.toFixed(1) }),
               /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground/60", children: [
                 "(",
@@ -8753,7 +8744,13 @@ function NodeListItem({
 }
 function UnavailableNodePropertyPanel() {
   return /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col items-center justify-center p-4 text-center", children: [
-    /* @__PURE__ */ jsx("div", { className: "size-12 flex items-center justify-center rounded-full bg-card", children: /* @__PURE__ */ jsx(Icon, { icon: "mynaui:info-triangle", className: "size-6 text-white" }) }),
+    /* @__PURE__ */ jsx("div", { className: "size-12 flex items-center justify-center rounded-full bg-card", children: /* @__PURE__ */ jsx(
+      Icon,
+      {
+        icon: "mynaui:info-triangle",
+        className: "size-6 text-status-warning-text"
+      }
+    ) }),
     /* @__PURE__ */ jsx("div", { className: "mt-4 text-balance font-medium", children: "Unavailable Properties" }),
     /* @__PURE__ */ jsx("div", { className: "mt-1  text-xs text-card-foreground/40 font-medium leading-normal", children: "Either no properties are available for this node or the node is not selected." }),
     /* @__PURE__ */ jsx("div", { className: "mt-8 w-full text-xs text-card-foreground/40 font-medium italic", children: "Select another node to view its properties." })
@@ -9702,7 +9699,13 @@ function NodePropertyPanel2({ id, type, data }) {
 function IntroductionPropertyPanel() {
   const tr = useTr();
   return /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col items-center justify-center p-4 text-center", children: [
-    /* @__PURE__ */ jsx("div", { className: "size-12 flex items-center justify-center rounded-full bg-primary", children: /* @__PURE__ */ jsx(Icon, { icon: "mynaui:cog-one", className: "size-6 text-white" }) }),
+    /* @__PURE__ */ jsx("div", { className: "size-12 flex items-center justify-center rounded-full bg-primary", children: /* @__PURE__ */ jsx(
+      Icon,
+      {
+        icon: "mynaui:cog-one",
+        className: "size-6 text-primary-foreground"
+      }
+    ) }),
     /* @__PURE__ */ jsx("div", { className: "mt-4 text-balance font-medium", children: tr(
       "fluidgrids.builder.introductionPropertyPanel.title",
       "Node Properties"
@@ -10243,7 +10246,7 @@ function StoreCategoryList({
                 {
                   className: "size-9 shrink-0 rounded-lg flex items-center justify-center",
                   style: {
-                    backgroundColor: "var(--color-status-warning-bgSubtle, color-mix(in oklab, #f59e0b 16%, transparent))"
+                    backgroundColor: "var(--color-status-warning-bgSubtle)"
                   },
                   children: /* @__PURE__ */ jsx(
                     Icon,
@@ -10251,7 +10254,7 @@ function StoreCategoryList({
                       icon: "mynaui:circle-warning",
                       className: "size-5",
                       style: {
-                        color: "var(--color-status-warning-text, #d97706)"
+                        color: "var(--color-status-warning-text)"
                       }
                     }
                   )
@@ -10263,7 +10266,7 @@ function StoreCategoryList({
                   {
                     className: "text-sm font-medium group-hover:text-primary transition-colors",
                     style: {
-                      color: "var(--color-status-warning-text, #d97706)"
+                      color: "var(--color-status-warning-text)"
                     },
                     children: tr(
                       "fluidgrids.builder.storeCategoryList.deprecatedCategoryLabel",
@@ -10409,11 +10412,11 @@ var UninstallNodeDialog = ({
   onCancel
 }) => {
   const tr = useTr();
-  return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50", children: /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg shadow-xl max-w-md w-full mx-4", children: [
+  return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-bg-overlay flex items-center justify-center z-50", children: /* @__PURE__ */ jsxs("div", { className: "bg-bg-surface rounded-lg shadow-xl max-w-md w-full mx-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 border-b", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(Trash2, { className: "w-5 h-5 text-red-600" }),
-        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-900", children: tr(
+        /* @__PURE__ */ jsx(Trash2, { className: "w-5 h-5 text-status-error-text" }),
+        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-text-primary", children: tr(
           "fluidgrids.builder.uninstallNodeDialog.title",
           "Uninstall Node"
         ) })
@@ -10422,7 +10425,7 @@ var UninstallNodeDialog = ({
         "button",
         {
           onClick: onCancel,
-          className: "text-gray-400 hover:text-gray-600 transition-colors",
+          className: "text-text-muted hover:text-text-secondary transition-colors",
           "aria-label": tr(
             "fluidgrids.builder.uninstallNodeDialog.closeAriaLabel",
             "Close dialog"
@@ -10432,20 +10435,20 @@ var UninstallNodeDialog = ({
       )
     ] }),
     /* @__PURE__ */ jsx("div", { className: "p-4", children: loading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center py-8", children: [
-      /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" }),
-      /* @__PURE__ */ jsx("span", { className: "ml-3 text-gray-600", children: tr(
+      /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-status-info-border" }),
+      /* @__PURE__ */ jsx("span", { className: "ml-3 text-text-secondary", children: tr(
         "fluidgrids.builder.uninstallNodeDialog.checkingUsage",
         "Checking node usage..."
       ) })
     ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      isUsed && /* @__PURE__ */ jsxs("div", { className: "mb-4 p-3 bg-amber-50 border border-amber-200 rounded-lg flex gap-3", children: [
-        /* @__PURE__ */ jsx(AlertTriangle, { className: "w-5 h-5 text-amber-600 flex-shrink-0 mt-0.5" }),
+      isUsed && /* @__PURE__ */ jsxs("div", { className: "mb-4 p-3 bg-status-warning-bg-subtle border border-status-warning-border rounded-lg flex gap-3", children: [
+        /* @__PURE__ */ jsx(AlertTriangle, { className: "w-5 h-5 text-status-warning-text flex-shrink-0 mt-0.5" }),
         /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-amber-900", children: tr(
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-status-warning-text", children: tr(
             "fluidgrids.builder.uninstallNodeDialog.inUseWarningTitle",
             "Warning: Node is in use"
           ) }),
-          /* @__PURE__ */ jsxs("p", { className: "text-sm text-amber-700 mt-1", children: [
+          /* @__PURE__ */ jsxs("p", { className: "text-sm text-status-warning-text mt-1", children: [
             "This node is currently used in ",
             workflows.length,
             " workflow",
@@ -10455,13 +10458,13 @@ var UninstallNodeDialog = ({
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-        /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-600", children: [
+        /* @__PURE__ */ jsxs("p", { className: "text-sm text-text-secondary", children: [
           "Are you sure you want to uninstall",
           " ",
-          /* @__PURE__ */ jsx("span", { className: "font-semibold text-gray-900", children: nodeName }),
+          /* @__PURE__ */ jsx("span", { className: "font-semibold text-text-primary", children: nodeName }),
           "?"
         ] }),
-        /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-500 mt-1", children: [
+        /* @__PURE__ */ jsxs("p", { className: "text-xs text-text-muted mt-1", children: [
           tr(
             "fluidgrids.builder.uninstallNodeDialog.nodeTypeLabel",
             "Node Type:"
@@ -10471,13 +10474,13 @@ var UninstallNodeDialog = ({
         ] })
       ] }),
       isUsed && workflows.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-700 mb-2", children: tr(
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-text-secondary mb-2", children: tr(
           "fluidgrids.builder.uninstallNodeDialog.workflowsListHeading",
           "Workflows using this node:"
         ) }),
-        /* @__PURE__ */ jsx("div", { className: "max-h-40 overflow-y-auto border rounded-lg divide-y", children: workflows.map((workflow) => /* @__PURE__ */ jsxs("div", { className: "p-2 hover:bg-gray-50", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-900", children: workflow.name }),
-          /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-500", children: [
+        /* @__PURE__ */ jsx("div", { className: "max-h-40 overflow-y-auto border rounded-lg divide-y", children: workflows.map((workflow) => /* @__PURE__ */ jsxs("div", { className: "p-2 hover:bg-bg-sunken", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-text-primary", children: workflow.name }),
+          /* @__PURE__ */ jsxs("p", { className: "text-xs text-text-muted", children: [
             "ID: ",
             workflow.id,
             " \u2022 Version: ",
@@ -10485,17 +10488,17 @@ var UninstallNodeDialog = ({
           ] })
         ] }, workflow.id)) })
       ] }),
-      !isUsed && /* @__PURE__ */ jsx("div", { className: "mb-4 p-3 bg-green-50 border border-green-200 rounded-lg", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-green-800", children: tr(
+      !isUsed && /* @__PURE__ */ jsx("div", { className: "mb-4 p-3 bg-status-success-bg-subtle border border-status-success-border rounded-lg", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-status-success-text", children: tr(
         "fluidgrids.builder.uninstallNodeDialog.safeToUninstall",
         "This node is not currently used in any workflows. It's safe to uninstall."
       ) }) })
     ] }) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-3 p-4 border-t bg-gray-50", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-3 p-4 border-t bg-bg-sunken", children: [
       /* @__PURE__ */ jsx(
         "button",
         {
           onClick: onCancel,
-          className: "px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors",
+          className: "px-4 py-2 text-sm font-medium text-text-secondary bg-bg-surface border border-border-strong rounded-lg hover:bg-bg-sunken transition-colors",
           disabled: loading,
           children: tr(
             "fluidgrids.builder.uninstallNodeDialog.cancelButton",
@@ -10507,7 +10510,7 @@ var UninstallNodeDialog = ({
         "button",
         {
           onClick: onConfirm,
-          className: `px-4 py-2 text-sm font-medium text-white rounded-lg transition-colors ${isUsed ? "bg-red-600 hover:bg-red-700" : "bg-red-500 hover:bg-red-600"}`,
+          className: "px-4 py-2 text-sm font-medium rounded-lg transition-colors bg-action-danger-bg text-action-danger-text hover:bg-action-danger-bgHover",
           disabled: loading,
           children: isUsed ? tr(
             "fluidgrids.builder.uninstallNodeDialog.confirmAnywayButton",
@@ -11107,7 +11110,7 @@ function StoreNodeDetail({ node, onBack }) {
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-4 text-xs text-muted-foreground mb-4", children: [
         node.rating != null && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
-          /* @__PURE__ */ jsx(Star, { className: "size-3 fill-yellow-400 text-yellow-400" }),
+          /* @__PURE__ */ jsx(Star, { className: "size-3 fill-status-warning-bg text-status-warning-text" }),
           node.rating.toFixed(1),
           /* @__PURE__ */ jsxs("span", { className: "opacity-60", children: [
             "(",
@@ -11409,7 +11412,13 @@ function StoreBrowsePanel() {
   return /* @__PURE__ */ jsxs(SidebarPanelWrapper, { children: [
     /* @__PURE__ */ jsx(AttachModeBanner, {}),
     view.type === "categories" && /* @__PURE__ */ jsxs("div", { className: "px-4 pt-4 pb-2 shrink-0 flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx("div", { className: "size-7 flex items-center justify-center rounded-lg bg-primary", children: /* @__PURE__ */ jsx(Icon, { icon: "mynaui:store", className: "size-4 text-white" }) }),
+      /* @__PURE__ */ jsx("div", { className: "size-7 flex items-center justify-center rounded-lg bg-primary", children: /* @__PURE__ */ jsx(
+        Icon,
+        {
+          icon: "mynaui:store",
+          className: "size-4 text-primary-foreground"
+        }
+      ) }),
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground leading-tight", children: tr("fluidgrids.builder.storeBrowsePanel.title", "Node Store") }),
         /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: tr(
@@ -11536,7 +11545,7 @@ function TemplatesGrid({
   ] });
 }
 var LazyTemplateDetailPanel = lazy(
-  () => import('./TemplateDetailPanel-RZDJEXGG.js').then((m) => ({
+  () => import('./TemplateDetailPanel-PP42MUM2.js').then((m) => ({
     default: m.TemplateDetailPanel
   }))
 );
@@ -11677,7 +11686,7 @@ function TemplatesModal({
   ) });
 }
 var LazyTemplateConfigurationModal = lazy(
-  () => import('./TemplateConfigurationModal-HUHXIL3K.js').then((m) => ({
+  () => import('./TemplateConfigurationModal-SILENYXX.js').then((m) => ({
     default: m.TemplateConfigurationModal
   }))
 );
@@ -12685,25 +12694,43 @@ function getCategoryColor(category) {
 function getCategoryBgColor(category) {
   switch (category.toLowerCase()) {
     case "input":
-      return "rgba(199, 210, 254, 0.3)";
-    // indigo-100 with opacity
+      return "var(--color-node-integration-subtle)";
     case "metadata":
-      return "rgba(253, 230, 138, 0.3)";
-    // amber-100 with opacity
+      return "var(--color-status-warning-bgSubtle)";
     case "context":
-      return "rgba(167, 243, 208, 0.3)";
-    // emerald-100 with opacity
+      return "var(--color-status-success-bgSubtle)";
     case "output":
-      return "rgba(186, 230, 253, 0.3)";
-    // sky-100 with opacity
+      return "var(--color-status-info-bgSubtle)";
     case "config":
-      return "rgba(254, 205, 211, 0.3)";
-    // rose-100 with opacity
+      return "var(--color-status-error-bgSubtle)";
     default:
-      return "rgba(229, 231, 235, 0.3)";
+      return "var(--color-bg-sunken)";
   }
 }
 SchemaNode.displayName = "SchemaNode";
+var MAPPING_COMPATIBILITY_COLORS = {
+  compatible: edgeColor("compatible"),
+  incompatible: edgeColor("incompatible")
+};
+var MAPPING_TYPE_COLORS = {
+  direct: MAPPING_COMPATIBILITY_COLORS.compatible,
+  expression: "var(--color-chart-3)",
+  transform: "var(--color-chart-10)",
+  cast: "var(--color-chart-2)",
+  array: "var(--color-chart-4)",
+  object: "var(--color-chart-12)",
+  context: "var(--color-chart-11)"
+};
+var MAPPING_FALLBACK_COLOR = edgeColor("default");
+function isMappingTypeKey(value) {
+  return Object.prototype.hasOwnProperty.call(MAPPING_TYPE_COLORS, value);
+}
+function mappingTypeColor(mappingType) {
+  return isMappingTypeKey(mappingType) ? MAPPING_TYPE_COLORS[mappingType] : MAPPING_FALLBACK_COLOR;
+}
+function compatibilityColor(isCompatible) {
+  return isCompatible ? MAPPING_COMPATIBILITY_COLORS.compatible : MAPPING_COMPATIBILITY_COLORS.incompatible;
+}
 var MappingEdge = memo(
   ({
     id,
@@ -12728,7 +12755,7 @@ var MappingEdge = memo(
     const mappingType = data?.mappingType || "direct";
     const isCompatible = data?.isCompatible !== false;
     let mappingLabel = "";
-    const mappingColor = getEdgeColor(mappingType, isCompatible) || "#888";
+    const mappingColor = getEdgeColor(mappingType, isCompatible) || MAPPING_FALLBACK_COLOR;
     switch (mappingType) {
       case "direct":
         mappingLabel = "Direct";
@@ -13775,7 +13802,7 @@ function MappingDialogContent({
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: "fixed inset-0 bg-black/50 z-[100001] flex items-center justify-center",
+        className: "fixed inset-0 bg-bg-overlay z-[100001] flex items-center justify-center",
         onClick: () => onOpenChange(false),
         children: /* @__PURE__ */ jsxs(
           "div",
@@ -14607,33 +14634,6 @@ function detectMappingType(value) {
   }
   return "direct";
 }
-function getMappingTypeColor(mappingType) {
-  switch (mappingType) {
-    case "direct":
-      return "#3b82f6";
-    // blue
-    case "expression":
-      return "#8b5cf6";
-    // violet
-    case "transform":
-      return "#ec4899";
-    // pink
-    case "cast":
-      return "#10b981";
-    // emerald
-    case "array":
-      return "#f97316";
-    // orange
-    case "object":
-      return "#6366f1";
-    // indigo
-    case "context":
-      return "#14b8a6";
-    // teal
-    default:
-      return "#6b7280";
-  }
-}
 function VisualMapperContent({
   sourceSchema,
   targetSchema,
@@ -14730,7 +14730,7 @@ function VisualMapperContent({
                     data: {
                       mappingType: "direct",
                       isCompatible,
-                      color: isCompatible ? "#3b82f6" : "#ef4444"
+                      color: compatibilityColor(isCompatible)
                     }
                   });
                   continue;
@@ -14745,7 +14745,7 @@ function VisualMapperContent({
                 data: {
                   mappingType,
                   expression: value,
-                  color: getMappingTypeColor(mappingType)
+                  color: mappingTypeColor(mappingType)
                 }
               });
             }
@@ -14771,7 +14771,7 @@ function VisualMapperContent({
           data: {
             mappingType: "direct",
             isCompatible,
-            color: isCompatible ? "#3b82f6" : "#ef4444"
+            color: compatibilityColor(isCompatible)
           }
         };
         setEdges((eds) => addEdge(newEdge, eds));
@@ -15050,7 +15050,7 @@ function VisualMapperContent({
                         item.icon,
                         {
                           className: "h-4 w-4 mt-0.5",
-                          style: { color: getMappingTypeColor(item.type) }
+                          style: { color: mappingTypeColor(item.type) }
                         }
                       ),
                       /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
@@ -15723,10 +15723,8 @@ var defaultDataConfig = {
       displayName: "Direct Mapping",
       description: "Map a source field directly to a target field using ${output.field} syntax",
       color: {
-        compatible: "#3b82f6",
-        // blue-500
-        incompatible: "#ef4444"
-        // red-500
+        compatible: MAPPING_COMPATIBILITY_COLORS.compatible,
+        incompatible: MAPPING_COMPATIBILITY_COLORS.incompatible
       },
       examples: [
         {
@@ -15755,8 +15753,7 @@ var defaultDataConfig = {
     expression: {
       displayName: "Expression Mapping",
       description: "Create a custom JavaScript expression to transform the data",
-      color: "#8b5cf6",
-      // violet-500
+      color: MAPPING_TYPE_COLORS.expression,
       examples: [
         {
           name: "String concatenation",
@@ -15859,8 +15856,7 @@ var defaultDataConfig = {
     transform: {
       displayName: "Transform Mapping",
       description: "Apply string and data transformation functions",
-      color: "#ec4899",
-      // pink-500
+      color: MAPPING_TYPE_COLORS.transform,
       examples: [
         {
           name: "Uppercase",
@@ -15962,8 +15958,7 @@ var defaultDataConfig = {
     cast: {
       displayName: "Cast Mapping",
       description: "Convert data from one type to another using JavaScript functions",
-      color: "#10b981",
-      // emerald-500
+      color: MAPPING_TYPE_COLORS.cast,
       examples: [
         {
           name: "String to Integer",
@@ -16038,8 +16033,7 @@ var defaultDataConfig = {
     array: {
       displayName: "Array Mapping",
       description: "Transform arrays using map, filter, reduce and other array methods",
-      color: "#f97316",
-      // orange-500
+      color: MAPPING_TYPE_COLORS.array,
       examples: [
         {
           name: "Map - Extract IDs",
@@ -16157,8 +16151,7 @@ var defaultDataConfig = {
     object: {
       displayName: "Object Mapping",
       description: "Transform and manipulate objects",
-      color: "#6366f1",
-      // indigo-500
+      color: MAPPING_TYPE_COLORS.object,
       examples: [
         {
           name: "Get keys",
@@ -16206,8 +16199,7 @@ var defaultDataConfig = {
     context: {
       displayName: "Workflow Context",
       description: "Access workflow execution context and state from previous nodes",
-      color: "#14b8a6",
-      // teal-500
+      color: MAPPING_TYPE_COLORS.context,
       examples: [
         {
           name: "Trigger input",
@@ -18181,10 +18173,8 @@ function CustomDeletableEdge(props) {
           "Map a source field directly to a target field"
         ),
         color: {
-          compatible: "#3b82f6",
-          // blue-500
-          incompatible: "#ef4444"
-          // red-500
+          compatible: MAPPING_COMPATIBILITY_COLORS.compatible,
+          incompatible: MAPPING_COMPATIBILITY_COLORS.incompatible
         }
       },
       expression: {
@@ -18196,8 +18186,7 @@ function CustomDeletableEdge(props) {
           "fluidgrids.builder.edges.customDeletableEdge.mappingExpressionDescription",
           "Create a custom expression to transform the data"
         ),
-        color: "#8b5cf6",
-        // violet-500
+        color: MAPPING_TYPE_COLORS.expression,
         examples: [
           {
             name: "Concatenate strings",
@@ -18273,8 +18262,7 @@ function CustomDeletableEdge(props) {
           "fluidgrids.builder.edges.customDeletableEdge.mappingTransformDescription",
           "Apply a predefined transformation function"
         ),
-        color: "#ec4899",
-        // pink-500
+        color: MAPPING_TYPE_COLORS.transform,
         functions: [
           {
             name: "uppercase",
@@ -18405,8 +18393,7 @@ function CustomDeletableEdge(props) {
           "fluidgrids.builder.edges.customDeletableEdge.mappingCastDescription",
           "Convert data from one type to another"
         ),
-        color: "#10b981",
-        // emerald-500
+        color: MAPPING_TYPE_COLORS.cast,
         types: [
           {
             name: "int",
@@ -18467,8 +18454,7 @@ function CustomDeletableEdge(props) {
           "fluidgrids.builder.edges.customDeletableEdge.mappingArrayDescription",
           "Transform arrays using map, filter, reduce and other array methods"
         ),
-        color: "#f97316",
-        // orange-500
+        color: MAPPING_TYPE_COLORS.array,
         examples: [
           {
             name: "Map - Extract IDs",
@@ -18625,8 +18611,7 @@ function CustomDeletableEdge(props) {
           "fluidgrids.builder.edges.customDeletableEdge.mappingObjectDescription",
           "Transform and manipulate objects"
         ),
-        color: "#6366f1",
-        // indigo-500
+        color: MAPPING_TYPE_COLORS.object,
         examples: [
           {
             name: "Get keys",
@@ -18703,8 +18688,7 @@ function CustomDeletableEdge(props) {
           "fluidgrids.builder.edges.customDeletableEdge.mappingContextDescription",
           "Access workflow execution context and state from previous nodes"
         ),
-        color: "#14b8a6",
-        // teal-500
+        color: MAPPING_TYPE_COLORS.context,
         examples: [
           {
             name: "Trigger input",
@@ -18836,29 +18820,25 @@ function CustomDeletableEdge(props) {
   const getEdgeStyle = () => {
     if (isRunning) {
       return {
-        stroke: "#22c55e",
-        // Green for running
+        stroke: edgeColor("active"),
         strokeWidth: 2,
         strokeDasharray: "5 5"
       };
     }
     if (isSuccess) {
       return {
-        stroke: "#22c55e",
-        // Green for success
+        stroke: edgeColor("success"),
         strokeWidth: 2
       };
     }
     if (isError) {
       return {
-        stroke: "#ef4444",
-        // Red for error
+        stroke: edgeColor("error"),
         strokeWidth: 2
       };
     }
     return {
-      stroke: "var(--color-text-tertiary)",
-      // Theme-aware default color
+      stroke: edgeColor("default"),
       strokeWidth: 2
     };
   };
@@ -18870,7 +18850,9 @@ function CustomDeletableEdge(props) {
   const srcIsLogic = /(if|switch|merge|loop|filter|branch|router|condition|aggregate)/.test(
     srcType
   );
-  const flowAccent = srcIsTrigger ? "#10b981" : srcIsLogic ? "#f59e0b" : "#3b82f6";
+  const flowAccent = nodeCategoryColor(
+    srcIsTrigger ? "trigger" : srcIsLogic ? "logic" : "action"
+  );
   const edgeClassName = [isRunning && "animated-edge edge-glow"].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -18890,10 +18872,12 @@ function CustomDeletableEdge(props) {
       {
         d: edgePath,
         fill: "none",
-        stroke: "#22c55e",
         strokeWidth: 4,
         strokeOpacity: 0.3,
-        style: { pointerEvents: "none" }
+        style: {
+          pointerEvents: "none",
+          stroke: edgeColor(isRunning ? "active" : "success")
+        }
       }
     ),
     /* @__PURE__ */ jsx(
@@ -18912,10 +18896,9 @@ function CustomDeletableEdge(props) {
       {
         d: edgePath,
         fill: "none",
-        stroke: flowAccent,
         strokeWidth: 2,
         strokeDasharray: "6 8",
-        style: { pointerEvents: "none" },
+        style: { pointerEvents: "none", stroke: flowAccent },
         children: /* @__PURE__ */ jsx(
           "animate",
           {
@@ -18932,11 +18915,10 @@ function CustomDeletableEdge(props) {
       {
         d: edgePath,
         fill: "none",
-        stroke: "#22c55e",
         strokeWidth: 2,
         strokeDasharray: "3 7",
         className: "animate-edge-flow",
-        style: { pointerEvents: "none" }
+        style: { pointerEvents: "none", stroke: edgeColor("active") }
       }
     ),
     /* @__PURE__ */ jsxs(EdgeLabelRenderer, { children: [
@@ -19017,7 +18999,7 @@ function CustomDeletableEdge(props) {
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: "fixed inset-0 bg-black/50 z-[99999] flex items-center justify-center",
+            className: "fixed inset-0 bg-bg-overlay z-[99999] flex items-center justify-center",
             onClick: () => setShowModal(false),
             children: /* @__PURE__ */ jsxs(
               "div",
@@ -19099,7 +19081,7 @@ function CustomDeletableEdge(props) {
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: "fixed inset-0 bg-black/50 z-[99999] flex items-center justify-center",
+            className: "fixed inset-0 bg-bg-overlay z-[99999] flex items-center justify-center",
             onClick: () => setConditionShowModal(false),
             children: /* @__PURE__ */ jsxs(
               "div",
@@ -19811,7 +19793,7 @@ function CanvasControls() {
         className: "!rounded-lg !border !border-card-foreground/10 !shadow-lg",
         nodeColor: "var(--color-primary)",
         nodeStrokeColor: "transparent",
-        maskColor: "rgba(0,0,0,0.45)",
+        maskColor: "var(--color-canvas-minimap-mask)",
         zoomable: true,
         pannable: true
       }
@@ -20405,6 +20387,8 @@ var ExecuteWorkflowButton = ({
               dismissible: true
             }
           );
+        } else if ("quotaExhausted" in result && result.quotaExhausted) {
+          setDialogOpen(false);
         } else {
           throw new Error(result.error || "Failed to trigger workflow");
         }
@@ -20583,7 +20567,7 @@ var LogDetailView = ({ log }) => {
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: log.nodeName }),
         /* @__PURE__ */ jsx("span", { className: cn("text-xs capitalize", statusColor), children: log.status === "completed" ? tr("fluidgrids.builder.logsPanel.statusSuccess", "Success") : log.status }),
-        log.duration && /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-500", children: [
+        log.duration && /* @__PURE__ */ jsxs("span", { className: "text-xs text-text-muted", children: [
           "in ",
           (log.duration * 1e3).toFixed(0),
           "ms"
@@ -24879,7 +24863,8 @@ function NodeDetailView() {
               await executeStep(targetId);
             },
             onContinueFromNode: async (sourceRunId, targetId) => {
-              await executeFromNode(sourceRunId, targetId);
+              const result = await executeFromNode(sourceRunId, targetId);
+              if (!result.success && result.quotaExhausted) closeNdv();
             },
             testIdPrefix: "ndv",
             className: "border-t-0 border-b"
@@ -25131,7 +25116,7 @@ function NodeDetailView() {
                       )
                     }
                   ),
-                  nodeLog?.usedPinnedData && /* @__PURE__ */ jsx("span", { className: "rounded bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-amber-600 dark:text-amber-400", children: tr(
+                  nodeLog?.usedPinnedData && /* @__PURE__ */ jsx("span", { className: "rounded bg-status-warning-bg-subtle px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-status-warning-text", children: tr(
                     "fluidgrids.builder.nodeDetailView.pinnedDataUsedBadge",
                     "Pinned"
                   ) }),
@@ -25148,7 +25133,7 @@ function NodeDetailView() {
                       ),
                       className: cn(
                         "flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide transition-colors disabled:opacity-50",
-                        isPinned ? "bg-amber-500/15 text-amber-600 dark:text-amber-400" : "text-muted-foreground hover:text-foreground"
+                        isPinned ? "bg-status-warning-bg-subtle text-status-warning-text" : "text-muted-foreground hover:text-foreground"
                       ),
                       children: [
                         /* @__PURE__ */ jsx(
@@ -26603,7 +26588,7 @@ var ActivateWorkflowButton = ({
       size: "sm",
       className: cn(
         "flex gap-1",
-        isDraft && "bg-green-600 hover:bg-green-700 text-white",
+        isDraft && "bg-status-success-bg hover:bg-status-success-bg/90 text-action-primary-text",
         className
       ),
       children: [
@@ -26639,7 +26624,7 @@ function RunWithViewRuns({
             {
               variant: "default",
               size: "icon",
-              className: "flex items-center justify-center h-8 w-6 rounded-r-lg rounded-l-none border-l border-white/20 bg-[var(--color-status-success-bg)] hover:bg-[var(--color-status-success-bg)]/90",
+              className: "flex items-center justify-center h-8 w-6 rounded-r-lg rounded-l-none border-l border-action-primary-text/20 bg-[var(--color-status-success-bg)] hover:bg-[var(--color-status-success-bg)]/90",
               children: /* @__PURE__ */ jsx(
                 Icon,
                 {
@@ -26881,11 +26866,11 @@ var FlowBuilder = ({ readOnly = false }) => {
             entityId: id,
             className: "ml-2 shrink-0"
           }
-        )
+        ),
+        name !== "" && /* @__PURE__ */ jsx(RunsUsageMeter, { className: "ml-2 shrink-0" })
       ] }),
       name !== "" && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs("div", { className: "hidden shrink-0 lg:inline-flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(RunsUsageMeter, { className: "mr-1" }),
           /* @__PURE__ */ jsx(VersionHistoryPanel, {}),
           /* @__PURE__ */ jsx(SaveFlowButton, {}),
           /* @__PURE__ */ jsx(ActivateWorkflowButton, {}),
@@ -27014,7 +26999,7 @@ var FlowBuilder = ({ readOnly = false }) => {
       {
         className: cn(
           "pointer-events-none absolute inset-0 backdrop-blur-3xl transition-all",
-          "opacity-0 bg-zinc-800/0 backdrop-saturate-100 pointer-events-none"
+          "opacity-0 bg-transparent backdrop-saturate-100 pointer-events-none"
         ),
         children: /* @__PURE__ */ jsx("div", { ref: floatingMenuWrapperRef, className: "relative size-full", children: /* @__PURE__ */ jsx(AddNodeFloatingMenu, { onNodeAdd: handleAddConnectedNode }) })
       }