@burdenoff/fluidgrids-fe-sdk 2026.1022.2 → 2026.1022.4

package/dist/{chunk-3XEIMQNT.js → chunk-HIXQIM22.js}

@@ -17,124 +17,124 @@ import { gql } from '@apollo/client';
 var RUN_STATUS_CONFIG = {
   PENDING: {
     label: "Pending",
-    color: "text-gray-600 dark:text-gray-400",
-    bgColor: "bg-gray-50 dark:bg-gray-800",
-    borderColor: "border-gray-200 dark:border-gray-700",
+    color: "text-text-secondary",
+    bgColor: "bg-bg-sunken",
+    borderColor: "border-border-default",
     icon: "mdi:clock-outline"
   },
   RUNNING: {
     label: "Running",
-    color: "text-blue-600 dark:text-blue-400",
-    bgColor: "bg-blue-50 dark:bg-blue-900/20",
-    borderColor: "border-blue-200 dark:border-blue-800",
+    color: "text-status-info-text",
+    bgColor: "bg-status-info-bg-subtle",
+    borderColor: "border-status-info-border",
     icon: "mdi:play-circle-outline"
   },
   COMPLETED: {
     label: "Completed",
-    color: "text-green-600 dark:text-green-400",
-    bgColor: "bg-green-50 dark:bg-green-900/20",
-    borderColor: "border-green-200 dark:border-green-800",
+    color: "text-status-success-text",
+    bgColor: "bg-status-success-bg-subtle",
+    borderColor: "border-status-success-border",
     icon: "mdi:check-circle-outline"
   },
   FAILED: {
     label: "Failed",
-    color: "text-red-600 dark:text-red-400",
-    bgColor: "bg-red-50 dark:bg-red-900/20",
-    borderColor: "border-red-200 dark:border-red-800",
+    color: "text-status-error-text",
+    bgColor: "bg-status-error-bg-subtle",
+    borderColor: "border-status-error-border",
     icon: "mdi:alert-circle-outline"
   },
   CANCELLED: {
     label: "Cancelled",
-    color: "text-orange-600 dark:text-orange-400",
-    bgColor: "bg-orange-50 dark:bg-orange-900/20",
-    borderColor: "border-orange-200 dark:border-orange-800",
+    color: "text-status-warning-text",
+    bgColor: "bg-status-warning-bg-subtle",
+    borderColor: "border-status-warning-border",
     icon: "mdi:cancel"
   },
   WAITING: {
     label: "Waiting",
-    color: "text-purple-600 dark:text-purple-400",
-    bgColor: "bg-purple-50 dark:bg-purple-900/20",
-    borderColor: "border-purple-200 dark:border-purple-800",
+    color: "text-chart-3",
+    bgColor: "bg-chart-3/10",
+    borderColor: "border-chart-3/30",
     icon: "mdi:timer-sand"
   },
   TERMINATED: {
     label: "Terminated",
-    color: "text-gray-600 dark:text-gray-400",
-    bgColor: "bg-gray-50 dark:bg-gray-800",
-    borderColor: "border-gray-300 dark:border-gray-600",
+    color: "text-text-secondary",
+    bgColor: "bg-bg-sunken",
+    borderColor: "border-border-strong",
     icon: "mdi:stop-circle-outline"
   }
 };
 var NODE_STATUS_CONFIG = {
   PENDING: {
     label: "Pending",
-    color: "text-gray-600 dark:text-gray-400",
-    bgColor: "bg-gray-50 dark:bg-gray-800",
-    borderColor: "border-gray-200 dark:border-gray-700",
+    color: "text-text-secondary",
+    bgColor: "bg-bg-sunken",
+    borderColor: "border-border-default",
     icon: "mdi:clock-outline"
   },
   RUNNING: {
     label: "Running",
-    color: "text-blue-600 dark:text-blue-400",
-    bgColor: "bg-blue-50 dark:bg-blue-900/20",
-    borderColor: "border-blue-200 dark:border-blue-800",
+    color: "text-status-info-text",
+    bgColor: "bg-status-info-bg-subtle",
+    borderColor: "border-status-info-border",
     icon: "mdi:play-circle-outline"
   },
   COMPLETED: {
     label: "Completed",
-    color: "text-green-600 dark:text-green-400",
-    bgColor: "bg-green-50 dark:bg-green-900/20",
-    borderColor: "border-green-200 dark:border-green-800",
+    color: "text-status-success-text",
+    bgColor: "bg-status-success-bg-subtle",
+    borderColor: "border-status-success-border",
     icon: "mdi:check-circle-outline"
   },
   FAILED: {
     label: "Failed",
-    color: "text-red-600 dark:text-red-400",
-    bgColor: "bg-red-50 dark:bg-red-900/20",
-    borderColor: "border-red-200 dark:border-red-800",
+    color: "text-status-error-text",
+    bgColor: "bg-status-error-bg-subtle",
+    borderColor: "border-status-error-border",
     icon: "mdi:alert-circle-outline"
   },
   SKIPPED: {
     label: "Skipped",
-    color: "text-gray-500 dark:text-gray-500",
-    bgColor: "bg-gray-100 dark:bg-gray-700",
-    borderColor: "border-gray-200 dark:border-gray-600",
+    color: "text-text-muted",
+    bgColor: "bg-bg-sunken",
+    borderColor: "border-border-default",
     icon: "mdi:skip-next"
   },
   DELAYED: {
     label: "Delayed",
-    color: "text-yellow-600 dark:text-yellow-400",
-    bgColor: "bg-yellow-50 dark:bg-yellow-900/20",
-    borderColor: "border-yellow-200 dark:border-yellow-800",
+    color: "text-status-warning-text",
+    bgColor: "bg-status-warning-bg-subtle",
+    borderColor: "border-status-warning-border",
     icon: "mdi:clock-alert-outline"
   },
   CANCELLED: {
     label: "Cancelled",
-    color: "text-orange-600 dark:text-orange-400",
-    bgColor: "bg-orange-50 dark:bg-orange-900/20",
-    borderColor: "border-orange-200 dark:border-orange-800",
+    color: "text-status-warning-text",
+    bgColor: "bg-status-warning-bg-subtle",
+    borderColor: "border-status-warning-border",
     icon: "mdi:cancel"
   },
   TIMEOUT: {
     label: "Timeout",
-    color: "text-red-600 dark:text-red-400",
-    bgColor: "bg-red-50 dark:bg-red-900/20",
-    borderColor: "border-red-200 dark:border-red-800",
+    color: "text-status-error-text",
+    bgColor: "bg-status-error-bg-subtle",
+    borderColor: "border-status-error-border",
     icon: "mdi:timer-off-outline"
   },
   // A node parked by a Wait node, an external webhook/form resume, or a person (BOFF-7651).
   WAITING: {
     label: "Waiting",
-    color: "text-purple-600 dark:text-purple-400",
-    bgColor: "bg-purple-50 dark:bg-purple-900/20",
-    borderColor: "border-purple-200 dark:border-purple-800",
+    color: "text-chart-3",
+    bgColor: "bg-chart-3/10",
+    borderColor: "border-chart-3/30",
     icon: "mdi:timer-sand"
   },
   WAITING_SUBWORKFLOW: {
     label: "Waiting",
-    color: "text-purple-600 dark:text-purple-400",
-    bgColor: "bg-purple-50 dark:bg-purple-900/20",
-    borderColor: "border-purple-200 dark:border-purple-800",
+    color: "text-chart-3",
+    bgColor: "bg-chart-3/10",
+    borderColor: "border-chart-3/30",
     icon: "mdi:subdirectory-arrow-right"
   }
 };
@@ -1426,16 +1426,16 @@ function formatRelativeTime(dateStr) {
 function getProgressColor(status) {
   switch (status) {
     case "COMPLETED":
-      return "bg-green-500";
+      return "bg-status-success-bg";
     case "FAILED":
     case "TERMINATED":
-      return "bg-red-500";
+      return "bg-status-error-bg";
     case "RUNNING":
-      return "bg-blue-500";
+      return "bg-status-info-bg";
     case "CANCELLED":
-      return "bg-orange-500";
+      return "bg-status-warning-bg";
     default:
-      return "bg-gray-400";
+      return "bg-text-muted";
   }
 }
 function ExecutionCards({
@@ -1534,7 +1534,7 @@ function ExecutionCards({
                 {
                   icon: "mdi:check-circle",
                   width: 12,
-                  className: "text-green-500"
+                  className: "text-status-success-text"
                 }
               ),
               execution.completedNodes ?? 0
@@ -1545,7 +1545,7 @@ function ExecutionCards({
                 {
                   icon: "mdi:alert-circle",
                   width: 12,
-                  className: "text-red-500"
+                  className: "text-status-error-text"
                 }
               ),
               execution.failedNodes ?? 0
@@ -1556,7 +1556,7 @@ function ExecutionCards({
                 {
                   icon: "mdi:skip-next",
                   width: 12,
-                  className: "text-gray-400"
+                  className: "text-text-muted"
                 }
               ),
               execution.skippedNodes ?? 0
@@ -1582,7 +1582,7 @@ function ExecutionCards({
                   e.stopPropagation();
                   onAction("pause", execution);
                 },
-                className: "flex items-center gap-1 text-xs px-2 py-1 rounded bg-background-tertiary hover:bg-yellow-50 dark:hover:bg-yellow-900/20 text-text-secondary hover:text-yellow-600 transition-colors",
+                className: "flex items-center gap-1 text-xs px-2 py-1 rounded bg-background-tertiary hover:bg-status-warning-bg-subtle text-text-secondary hover:text-status-warning-text transition-colors",
                 children: [
                   /* @__PURE__ */ jsx(Icon, { icon: "mdi:pause", width: 12 }),
                   " ",
@@ -1601,7 +1601,7 @@ function ExecutionCards({
                   e.stopPropagation();
                   onAction("cancel", execution);
                 },
-                className: "flex items-center gap-1 text-xs px-2 py-1 rounded bg-background-tertiary hover:bg-red-50 dark:hover:bg-red-900/20 text-text-secondary hover:text-red-600 transition-colors",
+                className: "flex items-center gap-1 text-xs px-2 py-1 rounded bg-background-tertiary hover:bg-status-error-bg-subtle text-text-secondary hover:text-status-error-text transition-colors",
                 children: [
                   /* @__PURE__ */ jsx(Icon, { icon: "mdi:stop", width: 12 }),
                   " ",
@@ -1646,19 +1646,19 @@ function formatDuration2(ms) {
 function getStatusDotColor(status) {
   switch (status) {
     case "COMPLETED":
-      return "bg-green-500";
+      return "bg-status-success-bg";
     case "FAILED":
     case "TERMINATED":
-      return "bg-red-500";
+      return "bg-status-error-bg";
     case "RUNNING":
-      return "bg-blue-500 animate-pulse";
+      return "bg-status-info-bg animate-pulse";
     case "CANCELLED":
-      return "bg-orange-500";
+      return "bg-status-warning-bg";
     case "WAITING":
-      return "bg-purple-500";
+      return "bg-chart-3";
     case "PENDING":
     default:
-      return "bg-gray-400";
+      return "bg-text-muted";
   }
 }
 function groupByDate(executions) {
@@ -1782,7 +1782,7 @@ function ExecutionTimeline({
                             )
                           ] })
                         ] }),
-                        execution.errorMessage && /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-xs text-red-500 dark:text-red-400 truncate max-w-sm", children: execution.errorMessage })
+                        execution.errorMessage && /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-xs text-status-error-text truncate max-w-sm", children: execution.errorMessage })
                       ] }),
                       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
                         /* @__PURE__ */ jsx(
@@ -1800,7 +1800,7 @@ function ExecutionTimeline({
                               e.stopPropagation();
                               onAction("cancel", execution);
                             },
-                            className: "opacity-0 group-hover:opacity-100 p-1 rounded hover:bg-red-50 dark:hover:bg-red-900/20 text-text-tertiary hover:text-red-600 transition-all",
+                            className: "opacity-0 group-hover:opacity-100 p-1 rounded hover:bg-status-error-bg-subtle text-text-tertiary hover:text-status-error-text transition-all",
                             title: tr(
                               "fluidgrids.executions.executionTimeline.cancelTooltip",
                               "Cancel execution"
@@ -1813,7 +1813,7 @@ function ExecutionTimeline({
                     execution.status === "RUNNING" && /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx("div", { className: "h-1 bg-background-tertiary rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
                       "div",
                       {
-                        className: "h-full bg-blue-500 rounded-full transition-all duration-500 animate-pulse",
+                        className: "h-full bg-status-info-bg rounded-full transition-all duration-500 animate-pulse",
                         style: {
                           width: `${Math.min(execution.progress, 100)}%`
                         }
@@ -1986,14 +1986,14 @@ function NodeTimeline({
                         /* @__PURE__ */ jsx("div", { children: formatTime2(node.startTime) }),
                         /* @__PURE__ */ jsx("div", { children: formatDuration3(node.duration) })
                       ] }),
-                      hasChildRun && /* @__PURE__ */ jsxs("span", { className: "px-2 py-0.5 text-xs bg-indigo-100 text-indigo-700 rounded flex items-center gap-1", children: [
+                      hasChildRun && /* @__PURE__ */ jsxs("span", { className: "px-2 py-0.5 text-xs bg-chart-12/10 text-chart-12 rounded flex items-center gap-1", children: [
                         /* @__PURE__ */ jsx(Icon, { icon: "mdi:sitemap", width: 12 }),
                         tr(
                           "fluidgrids.executions.nodeTimeline.subWorkflowBadge",
                           "Sub-workflow"
                         )
                       ] }),
-                      isWaitingSubworkflow && /* @__PURE__ */ jsx("span", { className: "px-2 py-0.5 text-xs bg-purple-100 text-purple-700 rounded animate-pulse", children: tr(
+                      isWaitingSubworkflow && /* @__PURE__ */ jsx("span", { className: "px-2 py-0.5 text-xs bg-chart-3/10 text-chart-3 rounded animate-pulse", children: tr(
                         "fluidgrids.executions.nodeTimeline.waitingBadge",
                         "Waiting..."
                       ) }),
@@ -2023,7 +2023,7 @@ function NodeTimeline({
                     "button",
                     {
                       onClick: () => setSelectedTab("output"),
-                      className: `px-3 py-1.5 text-sm rounded ${selectedTab === "output" ? "bg-action-primary-bg text-white" : "bg-background-tertiary text-text-secondary"}`,
+                      className: `px-3 py-1.5 text-sm rounded ${selectedTab === "output" ? "bg-action-primary-bg text-action-primary-text" : "bg-background-tertiary text-text-secondary"}`,
                       children: tr(
                         "fluidgrids.executions.nodeTimeline.outputTab",
                         "Output"
@@ -2034,7 +2034,7 @@ function NodeTimeline({
                     "button",
                     {
                       onClick: () => setSelectedTab("input"),
-                      className: `px-3 py-1.5 text-sm rounded ${selectedTab === "input" ? "bg-action-primary-bg text-white" : "bg-background-tertiary text-text-secondary"}`,
+                      className: `px-3 py-1.5 text-sm rounded ${selectedTab === "input" ? "bg-action-primary-bg text-action-primary-text" : "bg-background-tertiary text-text-secondary"}`,
                       children: tr(
                         "fluidgrids.executions.nodeTimeline.inputTab",
                         "Input"
@@ -2059,7 +2059,7 @@ function NodeTimeline({
                     "button",
                     {
                       onClick: () => onViewChildRun(node.childRunId),
-                      className: "px-3 py-1.5 text-sm bg-indigo-600 text-white rounded hover:bg-indigo-700 flex items-center gap-1.5",
+                      className: "px-3 py-1.5 text-sm bg-chart-12 text-action-primary-text rounded hover:bg-chart-12/90 flex items-center gap-1.5",
                       children: [
                         /* @__PURE__ */ jsx(Icon, { icon: "mdi:sitemap", width: 16 }),
                         tr(
@@ -2073,7 +2073,7 @@ function NodeTimeline({
                     "button",
                     {
                       onClick: () => onRetryNode(node.nodeId),
-                      className: "px-3 py-1.5 text-sm bg-action-primary-bg text-white rounded hover:bg-action-primary-bg/90 flex items-center gap-1.5",
+                      className: "px-3 py-1.5 text-sm bg-action-primary-bg text-action-primary-text rounded hover:bg-action-primary-bgHover flex items-center gap-1.5",
                       children: [
                         /* @__PURE__ */ jsx(Icon, { icon: "mdi:refresh", width: 16 }),
                         tr(
@@ -2680,7 +2680,7 @@ function Pagination({
               onClick: () => goToPage(pageNum),
               className: `
                       min-w-[32px] h-8 px-2 rounded text-sm font-medium
-                      ${pageNum === page ? "bg-action-primary-bg text-white" : "hover:bg-background-tertiary text-text-secondary"}
+                      ${pageNum === page ? "bg-action-primary-bg text-action-primary-text" : "hover:bg-background-tertiary text-text-secondary"}
                     `,
               children: pageNum
             },

package/dist/{chunk-EU5ANGO4.js → chunk-M7FOQBCR.js}

@@ -1,7 +1,7 @@
 import { isCreateIntent, decideMissingWorkflow } from './chunk-6N27YGMB.js';
-import { useInstalledNodes, buildNodeCheck, refetchStoreNodes, FlowBuilderPage, buildRequiredNodeTypes, mergeStickyNotes } from './chunk-2HUSQTUK.js';
+import { useInstalledNodes, buildNodeCheck, refetchStoreNodes, FlowBuilderPage, buildRequiredNodeTypes, mergeStickyNotes } from './chunk-T3UCFY7J.js';
 import { useLazyWorkflowDefinition, useCreateWorkflow } from './chunk-HP3A6BPK.js';
-import { useFlowStore } from './chunk-EGYJKHAL.js';
+import { useFlowStore } from './chunk-VI2RFS65.js';
 import { useTr } from './chunk-UULVIT25.js';
 import { useNavigate, useParams, useLocation } from 'react-router';
 import { toast } from 'sonner';
@@ -12,7 +12,7 @@ import { ErrorBoundary } from '@burdenoff/fe-libs/shared/components';
 import '@xyflow/react/dist/style.css';
 
 var LazyMissingNodesInstallModal = lazy(
-  () => import('./MissingNodesInstallModal-ODVBW4X4.js').then(
+  () => import('./MissingNodesInstallModal-OSAJLIBE.js').then(
     (m) => ({ default: m.MissingNodesInstallModal })
   )
 );

package/dist/{chunk-6LMWVUD7.js → chunk-P3R3RFAC.js}

@@ -1,4 +1,4 @@
-import { useExecution, buildNodeDisplayMap, useExecutionActions, useAutoRefresh, ExecutionStatusBadge, formatRunVersion, NodeTimeline, RunLogViewer } from './chunk-3XEIMQNT.js';
+import { useExecution, buildNodeDisplayMap, useExecutionActions, useAutoRefresh, ExecutionStatusBadge, formatRunVersion, NodeTimeline, RunLogViewer } from './chunk-HIXQIM22.js';
 import { useFluidGridsPermission, FLUIDGRIDS_PERMISSIONS } from './chunk-ONVGFVNH.js';
 import { getFluidGridsConfig } from './chunk-UZG3ZIQM.js';
 import { RunLogsDocument, RunLogAppendedDocument } from './chunk-SAZVBFMO.js';
@@ -1013,7 +1013,7 @@ function ExecutionDetailPage() {
       }
     ),
     execution.parentRunId && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-3 text-sm", children: [
-      /* @__PURE__ */ jsx(Icon, { icon: "mdi:sitemap", className: "text-indigo-500", width: 16 }),
+      /* @__PURE__ */ jsx(Icon, { icon: "mdi:sitemap", className: "text-chart-12", width: 16 }),
       /* @__PURE__ */ jsx("span", { className: "text-text-secondary", children: tr(
         "fluidgrids.executions.executionDetail.subWorkflowOf",
         "Sub-workflow of"
@@ -1022,7 +1022,7 @@ function ExecutionDetailPage() {
         Link,
         {
           to: `../runs/${execution.parentRunId}`,
-          className: "text-indigo-600 hover:underline font-medium",
+          className: "text-chart-12 hover:underline font-medium",
           children: [
             tr(
               "fluidgrids.executions.executionDetail.parentRunLinkPrefix",
@@ -1040,7 +1040,7 @@ function ExecutionDetailPage() {
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-2", children: [
           /* @__PURE__ */ jsx("h1", { className: "text-2xl sm:text-3xl font-bold text-text-primary", children: execution.workflow?.name || execution.workflowKey }),
           /* @__PURE__ */ jsx(ExecutionStatusBadge, { status: execution.status, size: "lg" }),
-          execution.parentRunId && /* @__PURE__ */ jsx("span", { className: "px-2 py-0.5 text-xs bg-indigo-100 text-indigo-700 rounded", children: tr(
+          execution.parentRunId && /* @__PURE__ */ jsx("span", { className: "px-2 py-0.5 text-xs bg-chart-12/10 text-chart-12 rounded", children: tr(
             "fluidgrids.executions.executionDetail.subWorkflowBadge",
             "Sub-Workflow"
           ) })

package/dist/{chunk-PBIN6ERJ.js → chunk-PVDKSM6Q.js}

@@ -1,4 +1,4 @@
-import { useImportWorkflowTemplate, FlowBuilderPage, useWorkflowTemplates, TemplateCard } from './chunk-2HUSQTUK.js';
+import { useImportWorkflowTemplate, FlowBuilderPage, useWorkflowTemplates, TemplateCard } from './chunk-T3UCFY7J.js';
 import { QuotaExhaustedDialog } from './chunk-SYVLFHWV.js';
 import { useWorkflowDefinitions, useDuplicateWorkflow } from './chunk-HP3A6BPK.js';
 import { templatesControls } from './chunk-D3UWK7GY.js';
@@ -10573,11 +10573,11 @@ var CATEGORIES = [
   { value: "communication", label: "Communication", icon: "mdi:message-text" }
 ];
 var CATEGORY_COLORS = {
-  "data-processing": "bg-blue-500/15 text-blue-400 border-blue-500/30",
-  integration: "bg-violet-500/15 text-violet-400 border-violet-500/30",
-  automation: "bg-emerald-500/15 text-emerald-400 border-emerald-500/30",
-  "ai-ml": "bg-amber-500/15 text-amber-400 border-amber-500/30",
-  communication: "bg-rose-500/15 text-rose-400 border-rose-500/30"
+  "data-processing": "bg-status-info-bg-subtle text-status-info-text border-status-info-border",
+  integration: "bg-chart-3/10 text-chart-3 border-chart-3/30",
+  automation: "bg-status-success-bg-subtle text-status-success-text border-status-success-border",
+  "ai-ml": "bg-status-warning-bg-subtle text-status-warning-text border-status-warning-border",
+  communication: "bg-status-error-bg-subtle text-status-error-text border-status-error-border"
 };
 function inferCategory(workflow) {
   const text = [
@@ -10662,7 +10662,7 @@ function WorkspaceTemplateCard({
 }) {
   const tr = useTr();
   const categoryLabel = CATEGORIES.find((c) => c.value === category)?.label ?? tr("fluidgrids.templates.templatesPage.cardDefaultCategory", "Workflow");
-  const categoryColor = CATEGORY_COLORS[category] ?? "bg-zinc-500/15 text-zinc-400 border-zinc-500/30";
+  const categoryColor = CATEGORY_COLORS[category] ?? "bg-bg-sunken text-text-muted border-border-strong";
   return /* @__PURE__ */ jsxs(Card, { className: "group border border-border-secondary bg-background-secondary hover:border-border-primary transition-all duration-200 flex flex-col", children: [
     /* @__PURE__ */ jsxs(CardHeader, { className: "flex-1 pb-3", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2 mb-3", children: [

package/dist/{chunk-FJHERSHE.js → chunk-QP62LB3V.js}

@@ -4,7 +4,7 @@ import { SdkPermissionButton, FLUIDGRIDS_PERMISSIONS, SdkPermissionGate } from '
 import { useWorkflowDefinitions, useLazyWorkflowDefinition, useImportWorkflow, useDuplicateWorkflow, useDeleteWorkflow } from './chunk-HP3A6BPK.js';
 import { workflowsListControls } from './chunk-D3UWK7GY.js';
 import { useFluidGridsPageControls } from './chunk-PJAWNFJV.js';
-import { useFlowStore } from './chunk-EGYJKHAL.js';
+import { useFlowStore } from './chunk-VI2RFS65.js';
 import { BILLING_PLANS_PATH, isQuotaExhaustedFailure } from './chunk-4UAWCWS7.js';
 import { useTr } from './chunk-UULVIT25.js';
 import { useState, useMemo } from 'react';
@@ -90,7 +90,7 @@ function SharePopup({ shareUrl, embedUrl }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50",
+      className: "fixed inset-0 z-50 flex items-center justify-center bg-bg-overlay",
       onClick: () => setIsOpen(false),
       children: /* @__PURE__ */ jsxs(
         "div",