@burdenoff/microfe-bigconsole 2026.622.1 → 2026.624.2

package/dist/bigconsole/components/widgets/utils/conditionalFormat.js.map

@@ -1 +1 @@
-{"version":3,"file":"conditionalFormat.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/utils/conditionalFormat.ts"],"sourcesContent":["/**\n * Conditional Formatting Engine (shared)\n *\n * Rule-based styling shared across Table, Chart, KPI and Metric widgets.\n * Rules are stored on the widget `config` (e.g. `config.conditionalRules`) and\n * evaluated per data point. Colors are expressed as *semantic intents*\n * (success/warning/danger/info/neutral) — never raw hex — so theming and\n * dark-mode keep working. The intent is resolved to either a Tailwind class\n * (for DOM cells) or a CSS variable (for SVG charts) at render time.\n */\n\n// ============================================================================\n// Types\n// ============================================================================\n\n/** Comparison operators supported by a conditional rule. */\nexport type ConditionalOperator =\n  | 'gt'\n  | 'gte'\n  | 'lt'\n  | 'lte'\n  | 'eq'\n  | 'neq'\n  | 'between'\n  | 'outside'\n  | 'contains'\n  | 'notContains'\n  | 'startsWith'\n  | 'endsWith'\n  | 'isEmpty'\n  | 'isNotEmpty';\n\n/**\n * Semantic color intent. Maps to `--color-status-*` / neutral tokens so the\n * result is theme-aware. Raw colors are intentionally NOT allowed here.\n */\nexport type SemanticIntent = 'success' | 'warning' | 'danger' | 'info' | 'neutral';\n\n/** Icon hint rendered alongside a matched value. */\nexport type ConditionalIcon = 'arrow-up' | 'arrow-down' | 'flag' | 'check' | 'alert' | 'dot';\n\nexport interface ConditionalStyle {\n  /** Text color intent. */\n  textColor?: SemanticIntent;\n  /** Background color intent (subtle fill). */\n  bgColor?: SemanticIntent;\n  /** Bold the matched value. */\n  bold?: boolean;\n  /** Icon hint to render before the value. */\n  icon?: ConditionalIcon;\n  /** Render an in-cell data bar scaled against `dataBarMax`. */\n  dataBar?: boolean;\n  /** Color intent for the data bar (defaults to `info`). */\n  dataBarColor?: SemanticIntent;\n}\n\nexport interface ConditionalRule {\n  /** Optional stable id (UI keying). */\n  id?: string;\n  /**\n   * Field to test. When omitted, the rule tests the value it is applied to\n   * (e.g. the current cell value or series value).\n   */\n  field?: string;\n  /** Comparison operator. */\n  operator: ConditionalOperator;\n  /** Comparison operand (primary). */\n  value?: string | number;\n  /** Second operand for `between` / `outside`. */\n  value2?: string | number;\n  /** Styling applied when the rule matches. */\n  style: ConditionalStyle;\n}\n\n// ============================================================================\n// Evaluation\n// ============================================================================\n\nfunction toNumber(v: unknown): number | null {\n  if (typeof v === 'number') return Number.isNaN(v) ? null : v;\n  if (typeof v === 'string' && v.trim() !== '') {\n    const n = Number(v);\n    return Number.isNaN(n) ? null : n;\n  }\n  return null;\n}\n\n/** Evaluate a single rule against a candidate value. */\nexport function evaluateRule(rawValue: unknown, rule: ConditionalRule, rowData?: Record<string, unknown>): boolean {\n  // Resolve the value being tested: explicit field on the row, else the raw value.\n  const candidate = rule.field != null && rowData ? rowData[rule.field] : rawValue;\n\n  switch (rule.operator) {\n    case 'isEmpty':\n      return candidate == null || candidate === '';\n    case 'isNotEmpty':\n      return candidate != null && candidate !== '';\n    case 'contains':\n      return String(candidate ?? '')\n        .toLowerCase()\n        .includes(String(rule.value ?? '').toLowerCase());\n    case 'notContains':\n      return !String(candidate ?? '')\n        .toLowerCase()\n        .includes(String(rule.value ?? '').toLowerCase());\n    case 'startsWith':\n      return String(candidate ?? '')\n        .toLowerCase()\n        .startsWith(String(rule.value ?? '').toLowerCase());\n    case 'endsWith':\n      return String(candidate ?? '')\n        .toLowerCase()\n        .endsWith(String(rule.value ?? '').toLowerCase());\n    default:\n      break;\n  }\n\n  // Equality works for both strings and numbers.\n  if (rule.operator === 'eq' || rule.operator === 'neq') {\n    const num = toNumber(candidate);\n    const ruleNum = toNumber(rule.value);\n    const equal =\n      num != null && ruleNum != null ? num === ruleNum : String(candidate ?? '') === String(rule.value ?? '');\n    return rule.operator === 'eq' ? equal : !equal;\n  }\n\n  // Remaining operators are numeric.\n  const num = toNumber(candidate);\n  if (num == null) return false;\n  const a = toNumber(rule.value);\n\n  switch (rule.operator) {\n    case 'gt':\n      return a != null && num > a;\n    case 'gte':\n      return a != null && num >= a;\n    case 'lt':\n      return a != null && num < a;\n    case 'lte':\n      return a != null && num <= a;\n    case 'between': {\n      const b = toNumber(rule.value2);\n      if (a == null || b == null) return false;\n      const lo = Math.min(a, b);\n      const hi = Math.max(a, b);\n      return num >= lo && num <= hi;\n    }\n    case 'outside': {\n      const b = toNumber(rule.value2);\n      if (a == null || b == null) return false;\n      const lo = Math.min(a, b);\n      const hi = Math.max(a, b);\n      return num < lo || num > hi;\n    }\n    default:\n      return false;\n  }\n}\n\n/**\n * Resolve the merged style for a value given an ordered rule list.\n * Later matching rules override earlier ones (last-wins), so order rules from\n * general to specific. Returns `undefined` when nothing matches.\n */\nexport function resolveConditionalStyle(\n  rawValue: unknown,\n  rules: ConditionalRule[] | undefined,\n  rowData?: Record<string, unknown>\n): ConditionalStyle | undefined {\n  if (!rules?.length) return undefined;\n  let merged: ConditionalStyle | undefined;\n  for (const rule of rules) {\n    if (evaluateRule(rawValue, rule, rowData)) {\n      merged = { ...merged, ...rule.style };\n    }\n  }\n  return merged;\n}\n\n// ============================================================================\n// Intent → presentation mapping (theme-safe)\n// ============================================================================\n\n/** CSS variable for a semantic intent's solid color (charts/SVG). */\nexport function intentToCssVar(intent: SemanticIntent): string {\n  switch (intent) {\n    case 'success':\n      return 'var(--color-status-success)';\n    case 'warning':\n      return 'var(--color-status-warning)';\n    case 'danger':\n      return 'var(--color-status-error)';\n    case 'info':\n      return 'var(--color-status-info)';\n    case 'neutral':\n    default:\n      return 'var(--color-text-secondary)';\n  }\n}\n\nconst TEXT_CLASS: Record<SemanticIntent, string> = {\n  success: 'text-status-success-text',\n  warning: 'text-status-warning-text',\n  danger: 'text-status-error-text',\n  info: 'text-status-info-text',\n  neutral: 'text-text-secondary',\n};\n\nconst BG_CLASS: Record<SemanticIntent, string> = {\n  success: 'bg-status-success-bg',\n  warning: 'bg-status-warning-bg',\n  danger: 'bg-status-error-bg',\n  info: 'bg-status-info-bg',\n  neutral: 'bg-bg-muted',\n};\n\n/** Build the Tailwind className fragment for a resolved style (DOM cells). */\nexport function conditionalStyleToClassName(style: ConditionalStyle | undefined): string {\n  if (!style) return '';\n  const parts: string[] = [];\n  if (style.textColor) parts.push(TEXT_CLASS[style.textColor]);\n  if (style.bgColor) parts.push(BG_CLASS[style.bgColor]);\n  if (style.bold) parts.push('font-semibold');\n  return parts.join(' ');\n}\n\n/** Subtle background fill class per intent — used for whole-row highlighting. */\nconst ROW_BG_CLASS: Record<SemanticIntent, string> = {\n  success: 'bg-status-success-bg-subtle',\n  warning: 'bg-status-warning-bg-subtle',\n  danger: 'bg-status-error-bg-subtle',\n  info: 'bg-status-info-bg-subtle',\n  neutral: 'bg-bg-muted',\n};\n\n/** Left-edge accent border class per intent — used for whole-row highlighting. */\nconst ROW_ACCENT_CLASS: Record<SemanticIntent, string> = {\n  success: 'border-l-4 border-status-success-border',\n  warning: 'border-l-4 border-status-warning-border',\n  danger: 'border-l-4 border-status-error-border',\n  info: 'border-l-4 border-status-info-border',\n  neutral: 'border-l-4 border-border-default',\n};\n\n/**\n * Resolve a `<tr>`-level className for a whole row given an ordered rule list.\n * Each rule's `field` is tested against the row; the merged style's `bgColor`\n * (falling back to `textColor`) paints a subtle fill and adds a matching\n * left-edge accent bar, with `bold` emphasising the row text. Returns `''`\n * when nothing matches so default striped row styling is preserved. This is\n * the escalation surface that renders boarding-breach rows in red.\n */\nexport function resolveRowClassName(row: Record<string, unknown>, rules: ConditionalRule[] | undefined): string {\n  const style = resolveConditionalStyle(undefined, rules, row);\n  if (!style) return '';\n  const parts: string[] = [];\n  const fill = style.bgColor ?? style.textColor;\n  if (fill) {\n    parts.push(ROW_BG_CLASS[fill]);\n    parts.push(ROW_ACCENT_CLASS[fill]);\n  }\n  if (style.textColor) parts.push(TEXT_CLASS[style.textColor]);\n  if (style.bold) parts.push('font-semibold');\n  return parts.join(' ');\n}\n\n/** SVG paths for the supported conditional icons (16x16 viewBox 0 0 24 24). */\nexport const CONDITIONAL_ICON_PATHS: Record<ConditionalIcon, string> = {\n  'arrow-up': 'M5 15l7-7 7 7',\n  'arrow-down': 'M19 9l-7 7-7-7',\n  flag: 'M3 21V5a2 2 0 012-2h11l-2 4 2 4H5',\n  check: 'M5 13l4 4L19 7',\n  alert: 'M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z',\n  dot: 'M12 12m-4 0a4 4 0 108 0a4 4 0 10-8 0',\n};\n"],"mappings":"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"}
+{"version":3,"file":"conditionalFormat.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/utils/conditionalFormat.ts"],"sourcesContent":["/**\n * Conditional Formatting Engine (shared)\n *\n * Rule-based styling shared across Table, Chart, KPI and Metric widgets.\n * Rules are stored on the widget `config` (e.g. `config.conditionalRules`) and\n * evaluated per data point. Colors are expressed as *semantic intents*\n * (success/warning/danger/info/neutral) — never raw hex — so theming and\n * dark-mode keep working. The intent is resolved to either a Tailwind class\n * (for DOM cells) or a CSS variable (for SVG charts) at render time.\n */\n\n// ============================================================================\n// Types\n// ============================================================================\n\n/** Comparison operators supported by a conditional rule. */\nexport type ConditionalOperator =\n  | 'gt'\n  | 'gte'\n  | 'lt'\n  | 'lte'\n  | 'eq'\n  | 'neq'\n  | 'between'\n  | 'outside'\n  | 'contains'\n  | 'notContains'\n  | 'startsWith'\n  | 'endsWith'\n  | 'isEmpty'\n  | 'isNotEmpty';\n\n/**\n * Semantic color intent. Maps to `--color-status-*` / neutral tokens so the\n * result is theme-aware. Raw colors are intentionally NOT allowed here.\n */\nexport type SemanticIntent = 'success' | 'warning' | 'danger' | 'info' | 'neutral';\n\n/** Icon hint rendered alongside a matched value. */\nexport type ConditionalIcon = 'arrow-up' | 'arrow-down' | 'flag' | 'check' | 'alert' | 'dot';\n\nexport interface ConditionalStyle {\n  /** Text color intent. */\n  textColor?: SemanticIntent;\n  /** Background color intent (subtle fill). */\n  bgColor?: SemanticIntent;\n  /** Bold the matched value. */\n  bold?: boolean;\n  /** Icon hint to render before the value. */\n  icon?: ConditionalIcon;\n  /** Render an in-cell data bar scaled against `dataBarMax`. */\n  dataBar?: boolean;\n  /** Color intent for the data bar (defaults to `info`). */\n  dataBarColor?: SemanticIntent;\n}\n\nexport interface ConditionalRule {\n  /** Optional stable id (UI keying). */\n  id?: string;\n  /**\n   * Field to test. When omitted, the rule tests the value it is applied to\n   * (e.g. the current cell value or series value).\n   */\n  field?: string;\n  /** Comparison operator. */\n  operator: ConditionalOperator;\n  /** Comparison operand (primary). */\n  value?: string | number;\n  /** Second operand for `between` / `outside`. */\n  value2?: string | number;\n  /** Styling applied when the rule matches. */\n  style: ConditionalStyle;\n}\n\n// ============================================================================\n// Evaluation\n// ============================================================================\n\nfunction toNumber(v: unknown): number | null {\n  if (typeof v === 'number') return Number.isNaN(v) ? null : v;\n  if (typeof v === 'string' && v.trim() !== '') {\n    const n = Number(v);\n    return Number.isNaN(n) ? null : n;\n  }\n  return null;\n}\n\n/** Evaluate a single rule against a candidate value. */\nexport function evaluateRule(rawValue: unknown, rule: ConditionalRule, rowData?: Record<string, unknown>): boolean {\n  // Resolve the value being tested: explicit field on the row, else the raw value.\n  const candidate = rule.field != null && rowData ? rowData[rule.field] : rawValue;\n\n  switch (rule.operator) {\n    case 'isEmpty':\n      return candidate == null || candidate === '';\n    case 'isNotEmpty':\n      return candidate != null && candidate !== '';\n    case 'contains':\n      return String(candidate ?? '')\n        .toLowerCase()\n        .includes(String(rule.value ?? '').toLowerCase());\n    case 'notContains':\n      return !String(candidate ?? '')\n        .toLowerCase()\n        .includes(String(rule.value ?? '').toLowerCase());\n    case 'startsWith':\n      return String(candidate ?? '')\n        .toLowerCase()\n        .startsWith(String(rule.value ?? '').toLowerCase());\n    case 'endsWith':\n      return String(candidate ?? '')\n        .toLowerCase()\n        .endsWith(String(rule.value ?? '').toLowerCase());\n    default:\n      break;\n  }\n\n  // Equality works for both strings and numbers.\n  if (rule.operator === 'eq' || rule.operator === 'neq') {\n    const num = toNumber(candidate);\n    const ruleNum = toNumber(rule.value);\n    const equal =\n      num != null && ruleNum != null ? num === ruleNum : String(candidate ?? '') === String(rule.value ?? '');\n    return rule.operator === 'eq' ? equal : !equal;\n  }\n\n  // Remaining operators are numeric.\n  const num = toNumber(candidate);\n  if (num == null) return false;\n  const a = toNumber(rule.value);\n\n  switch (rule.operator) {\n    case 'gt':\n      return a != null && num > a;\n    case 'gte':\n      return a != null && num >= a;\n    case 'lt':\n      return a != null && num < a;\n    case 'lte':\n      return a != null && num <= a;\n    case 'between': {\n      const b = toNumber(rule.value2);\n      if (a == null || b == null) return false;\n      const lo = Math.min(a, b);\n      const hi = Math.max(a, b);\n      return num >= lo && num <= hi;\n    }\n    case 'outside': {\n      const b = toNumber(rule.value2);\n      if (a == null || b == null) return false;\n      const lo = Math.min(a, b);\n      const hi = Math.max(a, b);\n      return num < lo || num > hi;\n    }\n    default:\n      return false;\n  }\n}\n\n/**\n * Resolve the merged style for a value given an ordered rule list.\n * Later matching rules override earlier ones (last-wins), so order rules from\n * general to specific. Returns `undefined` when nothing matches.\n */\nexport function resolveConditionalStyle(\n  rawValue: unknown,\n  rules: ConditionalRule[] | undefined,\n  rowData?: Record<string, unknown>\n): ConditionalStyle | undefined {\n  if (!rules?.length) return undefined;\n  let merged: ConditionalStyle | undefined;\n  for (const rule of rules) {\n    if (evaluateRule(rawValue, rule, rowData)) {\n      merged = { ...merged, ...rule.style };\n    }\n  }\n  return merged;\n}\n\n// ============================================================================\n// Intent → presentation mapping (theme-safe)\n// ============================================================================\n\n/** CSS variable for a semantic intent's solid color (charts/SVG). */\nexport function intentToCssVar(intent: SemanticIntent): string {\n  switch (intent) {\n    case 'success':\n      return 'var(--color-status-success)';\n    case 'warning':\n      return 'var(--color-status-warning)';\n    case 'danger':\n      return 'var(--color-status-error)';\n    case 'info':\n      return 'var(--color-status-info)';\n    case 'neutral':\n    default:\n      return 'var(--color-text-secondary)';\n  }\n}\n\nconst TEXT_CLASS: Record<SemanticIntent, string> = {\n  success: 'text-status-success-text',\n  warning: 'text-status-warning-text',\n  danger: 'text-status-error-text',\n  info: 'text-status-info-text',\n  neutral: 'text-text-secondary',\n};\n\nconst BG_CLASS: Record<SemanticIntent, string> = {\n  success: 'bg-status-success-bg',\n  warning: 'bg-status-warning-bg',\n  danger: 'bg-status-error-bg',\n  info: 'bg-status-info-bg',\n  neutral: 'bg-bg-sunken',\n};\n\n/** Build the Tailwind className fragment for a resolved style (DOM cells). */\nexport function conditionalStyleToClassName(style: ConditionalStyle | undefined): string {\n  if (!style) return '';\n  const parts: string[] = [];\n  if (style.textColor) parts.push(TEXT_CLASS[style.textColor]);\n  if (style.bgColor) parts.push(BG_CLASS[style.bgColor]);\n  if (style.bold) parts.push('font-semibold');\n  return parts.join(' ');\n}\n\n/** Subtle background fill class per intent — used for whole-row highlighting. */\nconst ROW_BG_CLASS: Record<SemanticIntent, string> = {\n  success: 'bg-status-success-bg-subtle',\n  warning: 'bg-status-warning-bg-subtle',\n  danger: 'bg-status-error-bg-subtle',\n  info: 'bg-status-info-bg-subtle',\n  neutral: 'bg-bg-sunken',\n};\n\n/** Left-edge accent border class per intent — used for whole-row highlighting. */\nconst ROW_ACCENT_CLASS: Record<SemanticIntent, string> = {\n  success: 'border-l-4 border-status-success-border',\n  warning: 'border-l-4 border-status-warning-border',\n  danger: 'border-l-4 border-status-error-border',\n  info: 'border-l-4 border-status-info-border',\n  neutral: 'border-l-4 border-border-default',\n};\n\n/**\n * Resolve a `<tr>`-level className for a whole row given an ordered rule list.\n * Each rule's `field` is tested against the row; the merged style's `bgColor`\n * (falling back to `textColor`) paints a subtle fill and adds a matching\n * left-edge accent bar, with `bold` emphasising the row text. Returns `''`\n * when nothing matches so default striped row styling is preserved. This is\n * the escalation surface that renders boarding-breach rows in red.\n */\nexport function resolveRowClassName(row: Record<string, unknown>, rules: ConditionalRule[] | undefined): string {\n  const style = resolveConditionalStyle(undefined, rules, row);\n  if (!style) return '';\n  const parts: string[] = [];\n  const fill = style.bgColor ?? style.textColor;\n  if (fill) {\n    parts.push(ROW_BG_CLASS[fill]);\n    parts.push(ROW_ACCENT_CLASS[fill]);\n  }\n  if (style.textColor) parts.push(TEXT_CLASS[style.textColor]);\n  if (style.bold) parts.push('font-semibold');\n  return parts.join(' ');\n}\n\n/** SVG paths for the supported conditional icons (16x16 viewBox 0 0 24 24). */\nexport const CONDITIONAL_ICON_PATHS: Record<ConditionalIcon, string> = {\n  'arrow-up': 'M5 15l7-7 7 7',\n  'arrow-down': 'M19 9l-7 7-7-7',\n  flag: 'M3 21V5a2 2 0 012-2h11l-2 4 2 4H5',\n  check: 'M5 13l4 4L19 7',\n  alert: 'M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z',\n  dot: 'M12 12m-4 0a4 4 0 108 0a4 4 0 10-8 0',\n};\n"],"mappings":"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"}

package/dist/bigconsole/components/widgets/widget-actions/WidgetActions.js

@@ -9,7 +9,7 @@ function u(e, t, n) {
 		lg: "px-6 py-3 text-base"
 	}, i = {
 		PRIMARY: "bg-action-primary text-white hover:bg-action-primary/90 focus:ring-action-primary/50 transition-colors",
-		SECONDARY: "bg-muted text-primary hover:bg-muted/80 focus:ring-muted transition-colors",
+		SECONDARY: "bg-bg-sunken text-primary hover:bg-bg-sunken/80 focus:ring-muted transition-colors",
 		DANGER: "bg-state-error text-white hover:bg-state-error/90 focus:ring-state-error/50 transition-colors",
 		SUCCESS: "bg-state-success text-white hover:bg-state-success/90 focus:ring-state-success/50 transition-colors",
 		WARNING: "bg-state-warning text-white hover:bg-state-warning/90 focus:ring-state-warning/50 transition-colors"
@@ -295,7 +295,7 @@ var m = e(function({ name: e, className: t = "w-4 h-4" }) {
 					children: [/* @__PURE__ */ s("button", {
 						type: "button",
 						onClick: o,
-						className: "px-4 py-2 text-sm font-medium text-secondary bg-muted hover:bg-muted/80 rounded-md transition-colors",
+						className: "px-4 py-2 text-sm font-medium text-secondary bg-bg-sunken hover:bg-bg-sunken/80 rounded-md transition-colors",
 						style: {
 							padding: "8px 16px",
 							fontSize: "14px",
@@ -362,7 +362,7 @@ var m = e(function({ name: e, className: t = "w-4 h-4" }) {
 					type: "button",
 					onClick: () => x(e),
 					disabled: e.disabled,
-					className: "w-full text-left px-4 py-2 text-sm text-secondary hover:bg-muted hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 transition-colors",
+					className: "w-full text-left px-4 py-2 text-sm text-secondary hover:bg-bg-sunken hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 transition-colors",
 					children: [e.icon && /* @__PURE__ */ s(m, {
 						name: e.icon,
 						className: "w-4 h-4"

package/dist/bigconsole/components/widgets/widget-actions/WidgetActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"WidgetActions.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/widget-actions/WidgetActions.tsx"],"sourcesContent":["/**\n * Widget Actions Component (v2.0)\n *\n * Renders interactive action buttons for widgets.\n * Supports multiple action types, styles, confirmation dialogs, and icons.\n */\n\nimport React, { memo, useCallback, useState, useMemo, useRef, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport type { WidgetAction, ActionContext, ActionResult } from '../../../renderers/types/renderer';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface WidgetActionsProps {\n  /** List of actions to render */\n  actions: WidgetAction[];\n  /** Action context (widget ID, data, etc.) */\n  context: ActionContext;\n  /** Callback when action is triggered */\n  onAction?: (action: WidgetAction, context: ActionContext) => Promise<ActionResult | void>;\n  /** Whether actions are disabled */\n  disabled?: boolean;\n  /** Layout direction */\n  layout?: 'horizontal' | 'vertical';\n  /** Size of action buttons */\n  size?: 'sm' | 'md' | 'lg';\n  /** Whether to show labels */\n  showLabels?: boolean;\n  /** Maximum number of visible actions (rest go to overflow menu) */\n  maxVisible?: number;\n  /** Custom class name */\n  className?: string;\n}\n\ninterface ConfirmationDialogProps {\n  title: string;\n  message: string;\n  confirmLabel: string;\n  cancelLabel: string;\n  style: WidgetAction['style'];\n  onConfirm: () => void;\n  onCancel: () => void;\n}\n\n// ============================================================================\n// Style Utilities\n// ============================================================================\n\nfunction getButtonClasses(\n  style: WidgetAction['style'] | undefined,\n  size: 'sm' | 'md' | 'lg',\n  disabled: boolean\n): string {\n  const baseClasses =\n    'inline-flex items-center justify-center font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2';\n\n  const sizeClasses = {\n    sm: 'px-2.5 py-1.5 text-xs',\n    md: 'px-4 py-2 text-sm',\n    lg: 'px-6 py-3 text-base',\n  };\n\n  const styleClasses: Record<string, string> = {\n    PRIMARY: 'bg-action-primary text-white hover:bg-action-primary/90 focus:ring-action-primary/50 transition-colors',\n    SECONDARY: 'bg-muted text-primary hover:bg-muted/80 focus:ring-muted transition-colors',\n    DANGER: 'bg-state-error text-white hover:bg-state-error/90 focus:ring-state-error/50 transition-colors',\n    SUCCESS: 'bg-state-success text-white hover:bg-state-success/90 focus:ring-state-success/50 transition-colors',\n    WARNING: 'bg-state-warning text-white hover:bg-state-warning/90 focus:ring-state-warning/50 transition-colors',\n  };\n\n  const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer';\n\n  // Default to SECONDARY if style is undefined\n  const effectiveStyle = style || 'SECONDARY';\n  const styleClass = styleClasses[effectiveStyle] || styleClasses.SECONDARY;\n\n  return `${baseClasses} ${sizeClasses[size]} ${styleClass} ${disabledClasses}`;\n}\n\n// Get inline styles as fallback for button visibility\nfunction getButtonInlineStyles(style: WidgetAction['style'] | undefined): React.CSSProperties {\n  const styles: Record<string, React.CSSProperties> = {\n    PRIMARY: { backgroundColor: 'var(--color-action-primary-bg)', color: 'var(--color-action-primary-text)' },\n    SECONDARY: { backgroundColor: 'var(--color-bg-muted)', color: 'var(--color-text-primary)' },\n    DANGER: { backgroundColor: 'var(--color-status-error-bg)', color: 'var(--color-action-primary-text)' },\n    SUCCESS: { backgroundColor: 'var(--color-status-success-bg)', color: 'var(--color-action-primary-text)' },\n    WARNING: { backgroundColor: 'var(--color-status-warning-bg)', color: 'var(--color-action-primary-text)' },\n  };\n  const effectiveStyle = style || 'SECONDARY';\n  return styles[effectiveStyle] || styles.SECONDARY;\n}\n\nfunction getConfirmButtonClasses(style: WidgetAction['style']): string {\n  const styleClasses = {\n    PRIMARY: 'bg-action-primary text-white hover:bg-action-primary/90',\n    SECONDARY: 'bg-secondary text-white hover:bg-secondary/90',\n    DANGER: 'bg-state-error text-white hover:bg-state-error/90',\n    SUCCESS: 'bg-state-success text-white hover:bg-state-success/90',\n    WARNING: 'bg-state-warning text-white hover:bg-state-warning/90',\n  };\n\n  const effectiveStyle = style || 'PRIMARY';\n  return `px-4 py-2 text-sm font-medium rounded-md transition-colors ${styleClasses[effectiveStyle] || styleClasses.PRIMARY}`;\n}\n\n// Get inline styles for confirm button to ensure visibility\nfunction getConfirmButtonInlineStyles(style: WidgetAction['style'] | undefined): React.CSSProperties {\n  const styles: Record<string, React.CSSProperties> = {\n    PRIMARY: {\n      backgroundColor: 'var(--color-action-primary-bg)',\n      color: 'var(--color-action-primary-text)',\n      padding: '8px 16px',\n      borderRadius: '6px',\n      fontWeight: 500,\n    },\n    SECONDARY: {\n      backgroundColor: 'var(--color-text-secondary)',\n      color: 'var(--color-action-primary-text)',\n      padding: '8px 16px',\n      borderRadius: '6px',\n      fontWeight: 500,\n    },\n    DANGER: {\n      backgroundColor: 'var(--color-status-error-bg)',\n      color: 'var(--color-action-primary-text)',\n      padding: '8px 16px',\n      borderRadius: '6px',\n      fontWeight: 500,\n    },\n    SUCCESS: {\n      backgroundColor: 'var(--color-status-success-bg)',\n      color: 'var(--color-action-primary-text)',\n      padding: '8px 16px',\n      borderRadius: '6px',\n      fontWeight: 500,\n    },\n    WARNING: {\n      backgroundColor: 'var(--color-status-warning-bg)',\n      color: 'var(--color-action-primary-text)',\n      padding: '8px 16px',\n      borderRadius: '6px',\n      fontWeight: 500,\n    },\n  };\n  const effectiveStyle = style || 'PRIMARY';\n  return styles[effectiveStyle] || styles.PRIMARY;\n}\n\n// ============================================================================\n// Icon Component\n// ============================================================================\n\ninterface ActionIconProps {\n  name: string;\n  className?: string;\n}\n\nconst ActionIcon: React.FC<ActionIconProps> = memo(function ActionIcon({ name, className = 'w-4 h-4' }) {\n  // Common icons used in actions\n  const icons: Record<string, React.ReactNode> = {\n    'external-link': (\n      <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth={2}\n          d=\"M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14\"\n        />\n      </svg>\n    ),\n    save: (\n      <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth={2}\n          d=\"M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4\"\n        />\n      </svg>\n    ),\n    trash: (\n      <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth={2}\n          d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"\n        />\n      </svg>\n    ),\n    edit: (\n      <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth={2}\n          d=\"M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z\"\n        />\n      </svg>\n    ),\n    refresh: (\n      <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth={2}\n          d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"\n        />\n      </svg>\n    ),\n    download: (\n      <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth={2}\n          d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\"\n        />\n      </svg>\n    ),\n    upload: (\n      <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth={2}\n          d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12\"\n        />\n      </svg>\n    ),\n    plus: (\n      <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M12 4v16m8-8H4\" />\n      </svg>\n    ),\n    check: (\n      <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 13l4 4L19 7\" />\n      </svg>\n    ),\n    x: (\n      <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n      </svg>\n    ),\n    'more-horizontal': (\n      <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth={2}\n          d=\"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z\"\n        />\n      </svg>\n    ),\n  };\n\n  return icons[name] || null;\n});\n\n// ============================================================================\n// Confirmation Dialog\n// ============================================================================\n\nconst ConfirmationDialog: React.FC<ConfirmationDialogProps> = memo(function ConfirmationDialog({\n  title,\n  message,\n  confirmLabel,\n  cancelLabel,\n  style,\n  onConfirm,\n  onCancel,\n}) {\n  return (\n    <div\n      className=\"fixed inset-0 z-50 flex items-center justify-center\"\n      style={{\n        position: 'fixed',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        zIndex: 9999,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n      }}\n    >\n      {/* Backdrop */}\n      <div\n        className=\"absolute inset-0 bg-black/50\"\n        style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.5)' }}\n        onClick={onCancel}\n      />\n\n      {/* Dialog */}\n      <div\n        className=\"relative bg-surface rounded-lg shadow-xl max-w-md w-full mx-4 p-6 animate-in fade-in zoom-in-95 duration-200\"\n        style={{\n          position: 'relative',\n          backgroundColor: 'var(--color-bg-surface)',\n          borderRadius: '8px',\n          boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',\n          maxWidth: '28rem',\n          width: '100%',\n          margin: '0 16px',\n          padding: '24px',\n          zIndex: 10000,\n        }}\n      >\n        <h3\n          className=\"text-lg font-semibold text-primary\"\n          style={{ fontSize: '18px', fontWeight: 600, color: 'var(--color-text-primary)', margin: 0 }}\n        >\n          {title}\n        </h3>\n        <p\n          className=\"mt-2 text-sm text-secondary\"\n          style={{ marginTop: '8px', fontSize: '14px', color: 'var(--color-text-secondary)' }}\n        >\n          {message}\n        </p>\n        <div\n          className=\"mt-4 flex justify-end gap-3\"\n          style={{ marginTop: '16px', display: 'flex', justifyContent: 'flex-end', gap: '12px' }}\n        >\n          <button\n            type=\"button\"\n            onClick={onCancel}\n            className=\"px-4 py-2 text-sm font-medium text-secondary bg-muted hover:bg-muted/80 rounded-md transition-colors\"\n            style={{\n              padding: '8px 16px',\n              fontSize: '14px',\n              fontWeight: 500,\n              color: 'var(--color-text-secondary)',\n              backgroundColor: 'var(--color-bg-muted)',\n              borderRadius: '6px',\n              border: 'none',\n              cursor: 'pointer',\n            }}\n          >\n            {cancelLabel}\n          </button>\n          <button\n            type=\"button\"\n            onClick={onConfirm}\n            className={getConfirmButtonClasses(style)}\n            style={getConfirmButtonInlineStyles(style)}\n          >\n            {confirmLabel}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n});\n\n// ============================================================================\n// Overflow Menu\n// ============================================================================\n\ninterface OverflowMenuProps {\n  actions: WidgetAction[];\n  context: ActionContext;\n  onAction: (action: WidgetAction) => void;\n  disabled?: boolean;\n  size: 'sm' | 'md' | 'lg';\n}\n\nconst OverflowMenu: React.FC<OverflowMenuProps> = memo(function OverflowMenu({\n  actions,\n  context: _context,\n  onAction,\n  disabled,\n  size,\n}) {\n  const [isOpen, setIsOpen] = useState(false);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });\n\n  const handleToggle = useCallback(() => {\n    if (!disabled) {\n      setIsOpen((prev) => !prev);\n    }\n  }, [disabled]);\n\n  const handleAction = useCallback(\n    (action: WidgetAction) => {\n      setIsOpen(false);\n      onAction(action);\n    },\n    [onAction]\n  );\n\n  const handleClickOutside = useCallback(() => {\n    setIsOpen(false);\n  }, []);\n\n  // Calculate menu position when opening\n  useEffect(() => {\n    if (isOpen && buttonRef.current) {\n      const rect = buttonRef.current.getBoundingClientRect();\n      setMenuPosition({\n        top: rect.bottom + 4, // 4px gap below button\n        left: rect.right - 192, // 192px = w-48, align right edge\n      });\n    }\n  }, [isOpen]);\n\n  if (actions.length === 0) return null;\n\n  return (\n    <div className=\"relative\">\n      <button\n        ref={buttonRef}\n        type=\"button\"\n        onClick={handleToggle}\n        disabled={disabled}\n        className={getButtonClasses('SECONDARY', size, disabled ?? false)}\n        aria-label=\"More actions\"\n      >\n        <ActionIcon name=\"more-horizontal\" />\n      </button>\n\n      {isOpen &&\n        createPortal(\n          <>\n            {/* Click-outside handler */}\n            <div className=\"fixed inset-0 z-[9998]\" onClick={handleClickOutside} />\n\n            {/* Menu - rendered via portal at body level */}\n            <div\n              className=\"fixed w-48 bg-surface rounded-md shadow-lg ring-1 ring-border z-[9999] animate-in fade-in slide-in-from-top-2 duration-150\"\n              style={{\n                top: menuPosition.top,\n                left: Math.max(8, menuPosition.left), // Ensure at least 8px from left edge\n              }}\n            >\n              <div className=\"py-1\">\n                {actions.map((action) => (\n                  <button\n                    key={action.id}\n                    type=\"button\"\n                    onClick={() => handleAction(action)}\n                    disabled={action.disabled}\n                    className=\"w-full text-left px-4 py-2 text-sm text-secondary hover:bg-muted hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 transition-colors\"\n                  >\n                    {action.icon && <ActionIcon name={action.icon} className=\"w-4 h-4\" />}\n                    {action.label}\n                  </button>\n                ))}\n              </div>\n            </div>\n          </>,\n          document.body\n        )}\n    </div>\n  );\n});\n\n// ============================================================================\n// Action Button\n// ============================================================================\n\ninterface ActionButtonProps {\n  action: WidgetAction;\n  context: ActionContext;\n  onAction: (action: WidgetAction) => void;\n  disabled?: boolean;\n  size: 'sm' | 'md' | 'lg';\n  showLabel?: boolean;\n}\n\nconst ActionButton: React.FC<ActionButtonProps> = memo(function ActionButton({\n  action,\n  context: _context,\n  onAction,\n  disabled,\n  size,\n  showLabel = true,\n}) {\n  const isDisabled = disabled || action.disabled;\n\n  const handleClick = useCallback(() => {\n    if (!isDisabled) {\n      onAction(action);\n    }\n  }, [action, isDisabled, onAction]);\n\n  // Get both classes and inline styles for guaranteed visibility\n  const buttonClasses = getButtonClasses(action.style, size, isDisabled);\n  const buttonInlineStyles = getButtonInlineStyles(action.style);\n\n  // Handle LINK type\n  if (action.type === 'LINK' && action.metadata?.url) {\n    return (\n      <a\n        href={action.metadata.url as string}\n        target={(action.metadata.target as string) || '_blank'}\n        rel=\"noopener noreferrer\"\n        className={buttonClasses}\n        style={buttonInlineStyles}\n        aria-disabled={isDisabled}\n      >\n        {action.icon && <ActionIcon name={action.icon} className=\"w-4 h-4 mr-1.5\" />}\n        {showLabel && action.label}\n        {!action.icon && <ActionIcon name=\"external-link\" className=\"w-4 h-4 ml-1.5\" />}\n      </a>\n    );\n  }\n\n  return (\n    <button\n      type={action.type === 'SUBMIT' ? 'submit' : 'button'}\n      onClick={handleClick}\n      disabled={isDisabled}\n      className={buttonClasses}\n      style={buttonInlineStyles}\n    >\n      {action.icon && <ActionIcon name={action.icon} className=\"w-4 h-4 mr-1.5\" />}\n      {showLabel && action.label}\n    </button>\n  );\n});\n\n// ============================================================================\n// Main Component\n// ============================================================================\n\nexport const WidgetActions: React.FC<WidgetActionsProps> = memo(function WidgetActions({\n  actions,\n  context,\n  onAction,\n  disabled = false,\n  layout = 'horizontal',\n  size = 'md',\n  showLabels = true,\n  maxVisible = 3,\n  className = '',\n}) {\n  const [pendingAction, setPendingAction] = useState<WidgetAction | null>(null);\n  const [isLoading, setIsLoading] = useState(false);\n\n  // Filter visible actions (not hidden)\n  const visibleActions = useMemo(() => {\n    return actions.filter((a) => !a.hidden).sort((a, b) => a.order - b.order);\n  }, [actions]);\n\n  // Split into main and overflow actions\n  const { mainActions, overflowActions } = useMemo(() => {\n    if (visibleActions.length <= maxVisible) {\n      return { mainActions: visibleActions, overflowActions: [] };\n    }\n    return {\n      mainActions: visibleActions.slice(0, maxVisible - 1),\n      overflowActions: visibleActions.slice(maxVisible - 1),\n    };\n  }, [visibleActions, maxVisible]);\n\n  // Execute action\n  const executeAction = useCallback(\n    async (action: WidgetAction) => {\n      if (!onAction) return;\n\n      setIsLoading(true);\n      try {\n        await onAction(action, context);\n      } catch (error) {\n      } finally {\n        setIsLoading(false);\n      }\n    },\n    [onAction, context]\n  );\n\n  // Handle action trigger\n  const handleTriggerAction = useCallback(\n    (action: WidgetAction) => {\n      // If action has confirmation, show dialog\n      if (action.confirmation) {\n        setPendingAction(action);\n        return;\n      }\n\n      // Execute action immediately\n      executeAction(action);\n    },\n    [executeAction]\n  );\n\n  // Handle confirmation\n  const handleConfirm = useCallback(() => {\n    if (pendingAction) {\n      executeAction(pendingAction);\n      setPendingAction(null);\n    }\n  }, [pendingAction, executeAction]);\n\n  const handleCancel = useCallback(() => {\n    setPendingAction(null);\n  }, []);\n\n  // No actions to render\n  if (visibleActions.length === 0) {\n    return null;\n  }\n\n  const layoutClasses = layout === 'horizontal' ? 'flex flex-row flex-wrap gap-2' : 'flex flex-col gap-2';\n\n  return (\n    <>\n      <div className={`${layoutClasses} ${className}`}>\n        {mainActions.map((action) => (\n          <ActionButton\n            key={action.id}\n            action={action}\n            context={context}\n            onAction={handleTriggerAction}\n            disabled={disabled || isLoading}\n            size={size}\n            showLabel={showLabels}\n          />\n        ))}\n\n        {overflowActions.length > 0 && (\n          <OverflowMenu\n            actions={overflowActions}\n            context={context}\n            onAction={handleTriggerAction}\n            disabled={disabled || isLoading}\n            size={size}\n          />\n        )}\n      </div>\n\n      {/* Confirmation Dialog */}\n      {pendingAction?.confirmation && (\n        <ConfirmationDialog\n          title={pendingAction.confirmation.title || 'Confirm Action'}\n          message={pendingAction.confirmation.message || 'Are you sure you want to proceed?'}\n          confirmLabel={pendingAction.confirmation.confirmLabel || 'OK'}\n          cancelLabel={pendingAction.confirmation.cancelLabel || 'Cancel'}\n          style={pendingAction.style}\n          onConfirm={handleConfirm}\n          onCancel={handleCancel}\n        />\n      )}\n    </>\n  );\n});\n\nexport default WidgetActions;\n"],"mappings":"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"}
+{"version":3,"file":"WidgetActions.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/widget-actions/WidgetActions.tsx"],"sourcesContent":["/**\n * Widget Actions Component (v2.0)\n *\n * Renders interactive action buttons for widgets.\n * Supports multiple action types, styles, confirmation dialogs, and icons.\n */\n\nimport React, { memo, useCallback, useState, useMemo, useRef, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport type { WidgetAction, ActionContext, ActionResult } from '../../../renderers/types/renderer';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface WidgetActionsProps {\n  /** List of actions to render */\n  actions: WidgetAction[];\n  /** Action context (widget ID, data, etc.) */\n  context: ActionContext;\n  /** Callback when action is triggered */\n  onAction?: (action: WidgetAction, context: ActionContext) => Promise<ActionResult | void>;\n  /** Whether actions are disabled */\n  disabled?: boolean;\n  /** Layout direction */\n  layout?: 'horizontal' | 'vertical';\n  /** Size of action buttons */\n  size?: 'sm' | 'md' | 'lg';\n  /** Whether to show labels */\n  showLabels?: boolean;\n  /** Maximum number of visible actions (rest go to overflow menu) */\n  maxVisible?: number;\n  /** Custom class name */\n  className?: string;\n}\n\ninterface ConfirmationDialogProps {\n  title: string;\n  message: string;\n  confirmLabel: string;\n  cancelLabel: string;\n  style: WidgetAction['style'];\n  onConfirm: () => void;\n  onCancel: () => void;\n}\n\n// ============================================================================\n// Style Utilities\n// ============================================================================\n\nfunction getButtonClasses(\n  style: WidgetAction['style'] | undefined,\n  size: 'sm' | 'md' | 'lg',\n  disabled: boolean\n): string {\n  const baseClasses =\n    'inline-flex items-center justify-center font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2';\n\n  const sizeClasses = {\n    sm: 'px-2.5 py-1.5 text-xs',\n    md: 'px-4 py-2 text-sm',\n    lg: 'px-6 py-3 text-base',\n  };\n\n  const styleClasses: Record<string, string> = {\n    PRIMARY: 'bg-action-primary text-white hover:bg-action-primary/90 focus:ring-action-primary/50 transition-colors',\n    SECONDARY: 'bg-bg-sunken text-primary hover:bg-bg-sunken/80 focus:ring-muted transition-colors',\n    DANGER: 'bg-state-error text-white hover:bg-state-error/90 focus:ring-state-error/50 transition-colors',\n    SUCCESS: 'bg-state-success text-white hover:bg-state-success/90 focus:ring-state-success/50 transition-colors',\n    WARNING: 'bg-state-warning text-white hover:bg-state-warning/90 focus:ring-state-warning/50 transition-colors',\n  };\n\n  const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer';\n\n  // Default to SECONDARY if style is undefined\n  const effectiveStyle = style || 'SECONDARY';\n  const styleClass = styleClasses[effectiveStyle] || styleClasses.SECONDARY;\n\n  return `${baseClasses} ${sizeClasses[size]} ${styleClass} ${disabledClasses}`;\n}\n\n// Get inline styles as fallback for button visibility\nfunction getButtonInlineStyles(style: WidgetAction['style'] | undefined): React.CSSProperties {\n  const styles: Record<string, React.CSSProperties> = {\n    PRIMARY: { backgroundColor: 'var(--color-action-primary-bg)', color: 'var(--color-action-primary-text)' },\n    SECONDARY: { backgroundColor: 'var(--color-bg-muted)', color: 'var(--color-text-primary)' },\n    DANGER: { backgroundColor: 'var(--color-status-error-bg)', color: 'var(--color-action-primary-text)' },\n    SUCCESS: { backgroundColor: 'var(--color-status-success-bg)', color: 'var(--color-action-primary-text)' },\n    WARNING: { backgroundColor: 'var(--color-status-warning-bg)', color: 'var(--color-action-primary-text)' },\n  };\n  const effectiveStyle = style || 'SECONDARY';\n  return styles[effectiveStyle] || styles.SECONDARY;\n}\n\nfunction getConfirmButtonClasses(style: WidgetAction['style']): string {\n  const styleClasses = {\n    PRIMARY: 'bg-action-primary text-white hover:bg-action-primary/90',\n    SECONDARY: 'bg-secondary text-white hover:bg-secondary/90',\n    DANGER: 'bg-state-error text-white hover:bg-state-error/90',\n    SUCCESS: 'bg-state-success text-white hover:bg-state-success/90',\n    WARNING: 'bg-state-warning text-white hover:bg-state-warning/90',\n  };\n\n  const effectiveStyle = style || 'PRIMARY';\n  return `px-4 py-2 text-sm font-medium rounded-md transition-colors ${styleClasses[effectiveStyle] || styleClasses.PRIMARY}`;\n}\n\n// Get inline styles for confirm button to ensure visibility\nfunction getConfirmButtonInlineStyles(style: WidgetAction['style'] | undefined): React.CSSProperties {\n  const styles: Record<string, React.CSSProperties> = {\n    PRIMARY: {\n      backgroundColor: 'var(--color-action-primary-bg)',\n      color: 'var(--color-action-primary-text)',\n      padding: '8px 16px',\n      borderRadius: '6px',\n      fontWeight: 500,\n    },\n    SECONDARY: {\n      backgroundColor: 'var(--color-text-secondary)',\n      color: 'var(--color-action-primary-text)',\n      padding: '8px 16px',\n      borderRadius: '6px',\n      fontWeight: 500,\n    },\n    DANGER: {\n      backgroundColor: 'var(--color-status-error-bg)',\n      color: 'var(--color-action-primary-text)',\n      padding: '8px 16px',\n      borderRadius: '6px',\n      fontWeight: 500,\n    },\n    SUCCESS: {\n      backgroundColor: 'var(--color-status-success-bg)',\n      color: 'var(--color-action-primary-text)',\n      padding: '8px 16px',\n      borderRadius: '6px',\n      fontWeight: 500,\n    },\n    WARNING: {\n      backgroundColor: 'var(--color-status-warning-bg)',\n      color: 'var(--color-action-primary-text)',\n      padding: '8px 16px',\n      borderRadius: '6px',\n      fontWeight: 500,\n    },\n  };\n  const effectiveStyle = style || 'PRIMARY';\n  return styles[effectiveStyle] || styles.PRIMARY;\n}\n\n// ============================================================================\n// Icon Component\n// ============================================================================\n\ninterface ActionIconProps {\n  name: string;\n  className?: string;\n}\n\nconst ActionIcon: React.FC<ActionIconProps> = memo(function ActionIcon({ name, className = 'w-4 h-4' }) {\n  // Common icons used in actions\n  const icons: Record<string, React.ReactNode> = {\n    'external-link': (\n      <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth={2}\n          d=\"M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14\"\n        />\n      </svg>\n    ),\n    save: (\n      <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth={2}\n          d=\"M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4\"\n        />\n      </svg>\n    ),\n    trash: (\n      <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth={2}\n          d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"\n        />\n      </svg>\n    ),\n    edit: (\n      <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth={2}\n          d=\"M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z\"\n        />\n      </svg>\n    ),\n    refresh: (\n      <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth={2}\n          d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"\n        />\n      </svg>\n    ),\n    download: (\n      <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth={2}\n          d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\"\n        />\n      </svg>\n    ),\n    upload: (\n      <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth={2}\n          d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12\"\n        />\n      </svg>\n    ),\n    plus: (\n      <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M12 4v16m8-8H4\" />\n      </svg>\n    ),\n    check: (\n      <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 13l4 4L19 7\" />\n      </svg>\n    ),\n    x: (\n      <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n      </svg>\n    ),\n    'more-horizontal': (\n      <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth={2}\n          d=\"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z\"\n        />\n      </svg>\n    ),\n  };\n\n  return icons[name] || null;\n});\n\n// ============================================================================\n// Confirmation Dialog\n// ============================================================================\n\nconst ConfirmationDialog: React.FC<ConfirmationDialogProps> = memo(function ConfirmationDialog({\n  title,\n  message,\n  confirmLabel,\n  cancelLabel,\n  style,\n  onConfirm,\n  onCancel,\n}) {\n  return (\n    <div\n      className=\"fixed inset-0 z-50 flex items-center justify-center\"\n      style={{\n        position: 'fixed',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        zIndex: 9999,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n      }}\n    >\n      {/* Backdrop */}\n      <div\n        className=\"absolute inset-0 bg-black/50\"\n        style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.5)' }}\n        onClick={onCancel}\n      />\n\n      {/* Dialog */}\n      <div\n        className=\"relative bg-surface rounded-lg shadow-xl max-w-md w-full mx-4 p-6 animate-in fade-in zoom-in-95 duration-200\"\n        style={{\n          position: 'relative',\n          backgroundColor: 'var(--color-bg-surface)',\n          borderRadius: '8px',\n          boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',\n          maxWidth: '28rem',\n          width: '100%',\n          margin: '0 16px',\n          padding: '24px',\n          zIndex: 10000,\n        }}\n      >\n        <h3\n          className=\"text-lg font-semibold text-primary\"\n          style={{ fontSize: '18px', fontWeight: 600, color: 'var(--color-text-primary)', margin: 0 }}\n        >\n          {title}\n        </h3>\n        <p\n          className=\"mt-2 text-sm text-secondary\"\n          style={{ marginTop: '8px', fontSize: '14px', color: 'var(--color-text-secondary)' }}\n        >\n          {message}\n        </p>\n        <div\n          className=\"mt-4 flex justify-end gap-3\"\n          style={{ marginTop: '16px', display: 'flex', justifyContent: 'flex-end', gap: '12px' }}\n        >\n          <button\n            type=\"button\"\n            onClick={onCancel}\n            className=\"px-4 py-2 text-sm font-medium text-secondary bg-bg-sunken hover:bg-bg-sunken/80 rounded-md transition-colors\"\n            style={{\n              padding: '8px 16px',\n              fontSize: '14px',\n              fontWeight: 500,\n              color: 'var(--color-text-secondary)',\n              backgroundColor: 'var(--color-bg-muted)',\n              borderRadius: '6px',\n              border: 'none',\n              cursor: 'pointer',\n            }}\n          >\n            {cancelLabel}\n          </button>\n          <button\n            type=\"button\"\n            onClick={onConfirm}\n            className={getConfirmButtonClasses(style)}\n            style={getConfirmButtonInlineStyles(style)}\n          >\n            {confirmLabel}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n});\n\n// ============================================================================\n// Overflow Menu\n// ============================================================================\n\ninterface OverflowMenuProps {\n  actions: WidgetAction[];\n  context: ActionContext;\n  onAction: (action: WidgetAction) => void;\n  disabled?: boolean;\n  size: 'sm' | 'md' | 'lg';\n}\n\nconst OverflowMenu: React.FC<OverflowMenuProps> = memo(function OverflowMenu({\n  actions,\n  context: _context,\n  onAction,\n  disabled,\n  size,\n}) {\n  const [isOpen, setIsOpen] = useState(false);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });\n\n  const handleToggle = useCallback(() => {\n    if (!disabled) {\n      setIsOpen((prev) => !prev);\n    }\n  }, [disabled]);\n\n  const handleAction = useCallback(\n    (action: WidgetAction) => {\n      setIsOpen(false);\n      onAction(action);\n    },\n    [onAction]\n  );\n\n  const handleClickOutside = useCallback(() => {\n    setIsOpen(false);\n  }, []);\n\n  // Calculate menu position when opening\n  useEffect(() => {\n    if (isOpen && buttonRef.current) {\n      const rect = buttonRef.current.getBoundingClientRect();\n      setMenuPosition({\n        top: rect.bottom + 4, // 4px gap below button\n        left: rect.right - 192, // 192px = w-48, align right edge\n      });\n    }\n  }, [isOpen]);\n\n  if (actions.length === 0) return null;\n\n  return (\n    <div className=\"relative\">\n      <button\n        ref={buttonRef}\n        type=\"button\"\n        onClick={handleToggle}\n        disabled={disabled}\n        className={getButtonClasses('SECONDARY', size, disabled ?? false)}\n        aria-label=\"More actions\"\n      >\n        <ActionIcon name=\"more-horizontal\" />\n      </button>\n\n      {isOpen &&\n        createPortal(\n          <>\n            {/* Click-outside handler */}\n            <div className=\"fixed inset-0 z-[9998]\" onClick={handleClickOutside} />\n\n            {/* Menu - rendered via portal at body level */}\n            <div\n              className=\"fixed w-48 bg-surface rounded-md shadow-lg ring-1 ring-border z-[9999] animate-in fade-in slide-in-from-top-2 duration-150\"\n              style={{\n                top: menuPosition.top,\n                left: Math.max(8, menuPosition.left), // Ensure at least 8px from left edge\n              }}\n            >\n              <div className=\"py-1\">\n                {actions.map((action) => (\n                  <button\n                    key={action.id}\n                    type=\"button\"\n                    onClick={() => handleAction(action)}\n                    disabled={action.disabled}\n                    className=\"w-full text-left px-4 py-2 text-sm text-secondary hover:bg-bg-sunken hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 transition-colors\"\n                  >\n                    {action.icon && <ActionIcon name={action.icon} className=\"w-4 h-4\" />}\n                    {action.label}\n                  </button>\n                ))}\n              </div>\n            </div>\n          </>,\n          document.body\n        )}\n    </div>\n  );\n});\n\n// ============================================================================\n// Action Button\n// ============================================================================\n\ninterface ActionButtonProps {\n  action: WidgetAction;\n  context: ActionContext;\n  onAction: (action: WidgetAction) => void;\n  disabled?: boolean;\n  size: 'sm' | 'md' | 'lg';\n  showLabel?: boolean;\n}\n\nconst ActionButton: React.FC<ActionButtonProps> = memo(function ActionButton({\n  action,\n  context: _context,\n  onAction,\n  disabled,\n  size,\n  showLabel = true,\n}) {\n  const isDisabled = disabled || action.disabled;\n\n  const handleClick = useCallback(() => {\n    if (!isDisabled) {\n      onAction(action);\n    }\n  }, [action, isDisabled, onAction]);\n\n  // Get both classes and inline styles for guaranteed visibility\n  const buttonClasses = getButtonClasses(action.style, size, isDisabled);\n  const buttonInlineStyles = getButtonInlineStyles(action.style);\n\n  // Handle LINK type\n  if (action.type === 'LINK' && action.metadata?.url) {\n    return (\n      <a\n        href={action.metadata.url as string}\n        target={(action.metadata.target as string) || '_blank'}\n        rel=\"noopener noreferrer\"\n        className={buttonClasses}\n        style={buttonInlineStyles}\n        aria-disabled={isDisabled}\n      >\n        {action.icon && <ActionIcon name={action.icon} className=\"w-4 h-4 mr-1.5\" />}\n        {showLabel && action.label}\n        {!action.icon && <ActionIcon name=\"external-link\" className=\"w-4 h-4 ml-1.5\" />}\n      </a>\n    );\n  }\n\n  return (\n    <button\n      type={action.type === 'SUBMIT' ? 'submit' : 'button'}\n      onClick={handleClick}\n      disabled={isDisabled}\n      className={buttonClasses}\n      style={buttonInlineStyles}\n    >\n      {action.icon && <ActionIcon name={action.icon} className=\"w-4 h-4 mr-1.5\" />}\n      {showLabel && action.label}\n    </button>\n  );\n});\n\n// ============================================================================\n// Main Component\n// ============================================================================\n\nexport const WidgetActions: React.FC<WidgetActionsProps> = memo(function WidgetActions({\n  actions,\n  context,\n  onAction,\n  disabled = false,\n  layout = 'horizontal',\n  size = 'md',\n  showLabels = true,\n  maxVisible = 3,\n  className = '',\n}) {\n  const [pendingAction, setPendingAction] = useState<WidgetAction | null>(null);\n  const [isLoading, setIsLoading] = useState(false);\n\n  // Filter visible actions (not hidden)\n  const visibleActions = useMemo(() => {\n    return actions.filter((a) => !a.hidden).sort((a, b) => a.order - b.order);\n  }, [actions]);\n\n  // Split into main and overflow actions\n  const { mainActions, overflowActions } = useMemo(() => {\n    if (visibleActions.length <= maxVisible) {\n      return { mainActions: visibleActions, overflowActions: [] };\n    }\n    return {\n      mainActions: visibleActions.slice(0, maxVisible - 1),\n      overflowActions: visibleActions.slice(maxVisible - 1),\n    };\n  }, [visibleActions, maxVisible]);\n\n  // Execute action\n  const executeAction = useCallback(\n    async (action: WidgetAction) => {\n      if (!onAction) return;\n\n      setIsLoading(true);\n      try {\n        await onAction(action, context);\n      } catch (error) {\n      } finally {\n        setIsLoading(false);\n      }\n    },\n    [onAction, context]\n  );\n\n  // Handle action trigger\n  const handleTriggerAction = useCallback(\n    (action: WidgetAction) => {\n      // If action has confirmation, show dialog\n      if (action.confirmation) {\n        setPendingAction(action);\n        return;\n      }\n\n      // Execute action immediately\n      executeAction(action);\n    },\n    [executeAction]\n  );\n\n  // Handle confirmation\n  const handleConfirm = useCallback(() => {\n    if (pendingAction) {\n      executeAction(pendingAction);\n      setPendingAction(null);\n    }\n  }, [pendingAction, executeAction]);\n\n  const handleCancel = useCallback(() => {\n    setPendingAction(null);\n  }, []);\n\n  // No actions to render\n  if (visibleActions.length === 0) {\n    return null;\n  }\n\n  const layoutClasses = layout === 'horizontal' ? 'flex flex-row flex-wrap gap-2' : 'flex flex-col gap-2';\n\n  return (\n    <>\n      <div className={`${layoutClasses} ${className}`}>\n        {mainActions.map((action) => (\n          <ActionButton\n            key={action.id}\n            action={action}\n            context={context}\n            onAction={handleTriggerAction}\n            disabled={disabled || isLoading}\n            size={size}\n            showLabel={showLabels}\n          />\n        ))}\n\n        {overflowActions.length > 0 && (\n          <OverflowMenu\n            actions={overflowActions}\n            context={context}\n            onAction={handleTriggerAction}\n            disabled={disabled || isLoading}\n            size={size}\n          />\n        )}\n      </div>\n\n      {/* Confirmation Dialog */}\n      {pendingAction?.confirmation && (\n        <ConfirmationDialog\n          title={pendingAction.confirmation.title || 'Confirm Action'}\n          message={pendingAction.confirmation.message || 'Are you sure you want to proceed?'}\n          confirmLabel={pendingAction.confirmation.confirmLabel || 'OK'}\n          cancelLabel={pendingAction.confirmation.cancelLabel || 'Cancel'}\n          style={pendingAction.style}\n          onConfirm={handleConfirm}\n          onCancel={handleCancel}\n        />\n      )}\n    </>\n  );\n});\n\nexport default WidgetActions;\n"],"mappings":"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"}

package/dist/bigconsole/components/workflow/WorkflowCard.js

@@ -82,7 +82,7 @@ var o = ({ className: e }) => /* @__PURE__ */ r("svg", {
 		onClick: g,
 		className: "\n        bg-bg-surface\n        border border-border-default\n        rounded-lg\n        overflow-hidden\n        cursor-pointer\n        hover:border-action-primary-bg\n        transition-colors\n      ",
 		children: [/* @__PURE__ */ i("div", {
-			className: "h-24 bg-bg-muted flex items-center justify-center relative",
+			className: "h-24 bg-bg-sunken flex items-center justify-center relative",
 			children: [/* @__PURE__ */ r(o, { className: "w-10 h-10 text-text-secondary/50" }), /* @__PURE__ */ r("div", {
 				className: "absolute top-2 right-2",
 				children: /* @__PURE__ */ r(e, {
@@ -109,7 +109,7 @@ var o = ({ className: e }) => /* @__PURE__ */ r("svg", {
 						children: [f && /* @__PURE__ */ r("button", {
 							type: "button",
 							onClick: _,
-							className: "\n                  p-1 rounded-md\n                  text-text-secondary\n                  hover:text-text-primary\n                  hover:bg-bg-muted\n                  transition-colors\n                ",
+							className: "\n                  p-1 rounded-md\n                  text-text-secondary\n                  hover:text-text-primary\n                  hover:bg-bg-sunken\n                  transition-colors\n                ",
 							title: "Edit Workflow",
 							children: /* @__PURE__ */ r(s, { className: "w-4 h-4" })
 						}), p && /* @__PURE__ */ r("button", {

package/dist/bigconsole/components/workflow/WorkflowCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"WorkflowCard.js","names":[],"sources":["../../../../src/bigconsole/components/workflow/WorkflowCard.tsx"],"sourcesContent":["/**\n * WorkflowCard Component\n *\n * Card component displaying a FluidGrids Workflow summary.\n * Shows name, status, linked DataSinks count, and execution stats.\n */\n\nimport { memo, useCallback } from 'react';\nimport { formatDistanceToNow } from 'date-fns';\nimport { WorkflowStatusBadge } from './WorkflowStatusBadge';\nimport type { FluidGridsWorkflow } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface WorkflowCardProps {\n  workflow: FluidGridsWorkflow;\n  onView?: (id: string) => void;\n  onEdit?: (id: string) => void;\n  onDelete?: (id: string) => void;\n}\n\n// ============================================================================\n// ICONS\n// ============================================================================\n\nconst WorkflowIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M13 10V3L4 14h7v7l9-11h-7z\" />\n  </svg>\n);\n\nconst EditIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z\"\n    />\n  </svg>\n);\n\nconst DeleteIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"\n    />\n  </svg>\n);\n\nconst DataSinkIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4\"\n    />\n  </svg>\n);\n\nconst PlayIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z\"\n    />\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n  </svg>\n);\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const WorkflowCard = memo(function WorkflowCard({ workflow, onView, onEdit, onDelete }: WorkflowCardProps) {\n  // Calculate linked DataSinks count\n  const linkedDataSinkCount = workflow.dataSinkLinks?.length ?? workflow.linkedDataSinkCount ?? 0;\n\n  // Format last executed time\n  const formatLastExecuted = useCallback((dateStr: string | null): string => {\n    if (!dateStr) return 'Never';\n    try {\n      const date = new Date(dateStr);\n      return formatDistanceToNow(date, { addSuffix: true });\n    } catch {\n      return 'Unknown';\n    }\n  }, []);\n\n  // Event handlers\n  const handleCardClick = useCallback(() => {\n    onView?.(workflow.id);\n  }, [onView, workflow.id]);\n\n  const handleEditClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onEdit?.(workflow.id);\n    },\n    [onEdit, workflow.id]\n  );\n\n  const handleDeleteClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onDelete?.(workflow.id);\n    },\n    [onDelete, workflow.id]\n  );\n\n  return (\n    <div\n      onClick={handleCardClick}\n      className=\"\n        bg-bg-surface\n        border border-border-default\n        rounded-lg\n        overflow-hidden\n        cursor-pointer\n        hover:border-action-primary-bg\n        transition-colors\n      \"\n    >\n      {/* Header with Icon */}\n      <div className=\"h-24 bg-bg-muted flex items-center justify-center relative\">\n        <WorkflowIcon className=\"w-10 h-10 text-text-secondary/50\" />\n        <div className=\"absolute top-2 right-2\">\n          <WorkflowStatusBadge status={workflow.status} size=\"sm\" />\n        </div>\n      </div>\n\n      {/* Content */}\n      <div className=\"p-4\">\n        {/* Title and Actions */}\n        <div className=\"flex items-start justify-between mb-2\">\n          <div className=\"flex-1 min-w-0\">\n            <h3 className=\"text-sm font-semibold text-text-primary truncate\">{workflow.name}</h3>\n            <p className=\"text-xs text-text-secondary truncate mt-0.5\">{workflow.key}</p>\n          </div>\n\n          <div className=\"flex items-center gap-1 ml-2\">\n            {onEdit && (\n              <button\n                type=\"button\"\n                onClick={handleEditClick}\n                className=\"\n                  p-1 rounded-md\n                  text-text-secondary\n                  hover:text-text-primary\n                  hover:bg-bg-muted\n                  transition-colors\n                \"\n                title=\"Edit Workflow\"\n              >\n                <EditIcon className=\"w-4 h-4\" />\n              </button>\n            )}\n            {onDelete && (\n              <button\n                type=\"button\"\n                onClick={handleDeleteClick}\n                className=\"\n                  p-1 rounded-md\n                  text-text-secondary\n                  hover:text-state-error\n                  hover:bg-state-error/10\n                  transition-colors\n                \"\n                title=\"Delete Workflow\"\n              >\n                <DeleteIcon className=\"w-4 h-4\" />\n              </button>\n            )}\n          </div>\n        </div>\n\n        {/* Description */}\n        {workflow.description && (\n          <p className=\"text-xs text-text-secondary mb-3 line-clamp-2\">{workflow.description}</p>\n        )}\n\n        {/* Stats Footer */}\n        <div className=\"flex items-center justify-between text-xs text-text-secondary\">\n          <div className=\"flex items-center gap-3\">\n            {/* DataSinks Count */}\n            <span className=\"flex items-center gap-1\" title={`${linkedDataSinkCount} linked DataSinks`}>\n              <DataSinkIcon className=\"w-3.5 h-3.5\" />\n              {linkedDataSinkCount} DataSink{linkedDataSinkCount !== 1 ? 's' : ''}\n            </span>\n\n            {/* Execution Count */}\n            <span className=\"flex items-center gap-1\" title={`${workflow.executionCount} executions`}>\n              <PlayIcon className=\"w-3.5 h-3.5\" />\n              {workflow.executionCount}\n            </span>\n          </div>\n\n          {/* Last Executed */}\n          <span\n            title={\n              workflow.lastExecutedAt\n                ? `Last executed: ${new Date(workflow.lastExecutedAt).toLocaleString()}`\n                : 'Never executed'\n            }\n          >\n            {formatLastExecuted(workflow.lastExecutedAt)}\n          </span>\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport default WorkflowCard;\n"],"mappings":"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"}
+{"version":3,"file":"WorkflowCard.js","names":[],"sources":["../../../../src/bigconsole/components/workflow/WorkflowCard.tsx"],"sourcesContent":["/**\n * WorkflowCard Component\n *\n * Card component displaying a FluidGrids Workflow summary.\n * Shows name, status, linked DataSinks count, and execution stats.\n */\n\nimport { memo, useCallback } from 'react';\nimport { formatDistanceToNow } from 'date-fns';\nimport { WorkflowStatusBadge } from './WorkflowStatusBadge';\nimport type { FluidGridsWorkflow } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface WorkflowCardProps {\n  workflow: FluidGridsWorkflow;\n  onView?: (id: string) => void;\n  onEdit?: (id: string) => void;\n  onDelete?: (id: string) => void;\n}\n\n// ============================================================================\n// ICONS\n// ============================================================================\n\nconst WorkflowIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M13 10V3L4 14h7v7l9-11h-7z\" />\n  </svg>\n);\n\nconst EditIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z\"\n    />\n  </svg>\n);\n\nconst DeleteIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"\n    />\n  </svg>\n);\n\nconst DataSinkIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4\"\n    />\n  </svg>\n);\n\nconst PlayIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z\"\n    />\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n  </svg>\n);\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const WorkflowCard = memo(function WorkflowCard({ workflow, onView, onEdit, onDelete }: WorkflowCardProps) {\n  // Calculate linked DataSinks count\n  const linkedDataSinkCount = workflow.dataSinkLinks?.length ?? workflow.linkedDataSinkCount ?? 0;\n\n  // Format last executed time\n  const formatLastExecuted = useCallback((dateStr: string | null): string => {\n    if (!dateStr) return 'Never';\n    try {\n      const date = new Date(dateStr);\n      return formatDistanceToNow(date, { addSuffix: true });\n    } catch {\n      return 'Unknown';\n    }\n  }, []);\n\n  // Event handlers\n  const handleCardClick = useCallback(() => {\n    onView?.(workflow.id);\n  }, [onView, workflow.id]);\n\n  const handleEditClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onEdit?.(workflow.id);\n    },\n    [onEdit, workflow.id]\n  );\n\n  const handleDeleteClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onDelete?.(workflow.id);\n    },\n    [onDelete, workflow.id]\n  );\n\n  return (\n    <div\n      onClick={handleCardClick}\n      className=\"\n        bg-bg-surface\n        border border-border-default\n        rounded-lg\n        overflow-hidden\n        cursor-pointer\n        hover:border-action-primary-bg\n        transition-colors\n      \"\n    >\n      {/* Header with Icon */}\n      <div className=\"h-24 bg-bg-sunken flex items-center justify-center relative\">\n        <WorkflowIcon className=\"w-10 h-10 text-text-secondary/50\" />\n        <div className=\"absolute top-2 right-2\">\n          <WorkflowStatusBadge status={workflow.status} size=\"sm\" />\n        </div>\n      </div>\n\n      {/* Content */}\n      <div className=\"p-4\">\n        {/* Title and Actions */}\n        <div className=\"flex items-start justify-between mb-2\">\n          <div className=\"flex-1 min-w-0\">\n            <h3 className=\"text-sm font-semibold text-text-primary truncate\">{workflow.name}</h3>\n            <p className=\"text-xs text-text-secondary truncate mt-0.5\">{workflow.key}</p>\n          </div>\n\n          <div className=\"flex items-center gap-1 ml-2\">\n            {onEdit && (\n              <button\n                type=\"button\"\n                onClick={handleEditClick}\n                className=\"\n                  p-1 rounded-md\n                  text-text-secondary\n                  hover:text-text-primary\n                  hover:bg-bg-sunken\n                  transition-colors\n                \"\n                title=\"Edit Workflow\"\n              >\n                <EditIcon className=\"w-4 h-4\" />\n              </button>\n            )}\n            {onDelete && (\n              <button\n                type=\"button\"\n                onClick={handleDeleteClick}\n                className=\"\n                  p-1 rounded-md\n                  text-text-secondary\n                  hover:text-state-error\n                  hover:bg-state-error/10\n                  transition-colors\n                \"\n                title=\"Delete Workflow\"\n              >\n                <DeleteIcon className=\"w-4 h-4\" />\n              </button>\n            )}\n          </div>\n        </div>\n\n        {/* Description */}\n        {workflow.description && (\n          <p className=\"text-xs text-text-secondary mb-3 line-clamp-2\">{workflow.description}</p>\n        )}\n\n        {/* Stats Footer */}\n        <div className=\"flex items-center justify-between text-xs text-text-secondary\">\n          <div className=\"flex items-center gap-3\">\n            {/* DataSinks Count */}\n            <span className=\"flex items-center gap-1\" title={`${linkedDataSinkCount} linked DataSinks`}>\n              <DataSinkIcon className=\"w-3.5 h-3.5\" />\n              {linkedDataSinkCount} DataSink{linkedDataSinkCount !== 1 ? 's' : ''}\n            </span>\n\n            {/* Execution Count */}\n            <span className=\"flex items-center gap-1\" title={`${workflow.executionCount} executions`}>\n              <PlayIcon className=\"w-3.5 h-3.5\" />\n              {workflow.executionCount}\n            </span>\n          </div>\n\n          {/* Last Executed */}\n          <span\n            title={\n              workflow.lastExecutedAt\n                ? `Last executed: ${new Date(workflow.lastExecutedAt).toLocaleString()}`\n                : 'Never executed'\n            }\n          >\n            {formatLastExecuted(workflow.lastExecutedAt)}\n          </span>\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport default WorkflowCard;\n"],"mappings":";;;;;AA2BA,IAAM,KAAgB,EAAE,mBACtB,kBAAC,OAAD;CAAgB;CAAW,MAAK;CAAO,QAAO;CAAe,SAAQ;WACnE,kBAAC,QAAD;EAAM,eAAc;EAAQ,gBAAe;EAAQ,aAAa;EAAK,GAAE;EAA+B,CAAA;CAClG,CAAA,EAGF,KAAY,EAAE,mBAClB,kBAAC,OAAD;CAAgB;CAAW,MAAK;CAAO,QAAO;CAAe,SAAQ;WACnE,kBAAC,QAAD;EACE,eAAc;EACd,gBAAe;EACf,aAAa;EACb,GAAE;EACF,CAAA;CACE,CAAA,EAGF,KAAc,EAAE,mBACpB,kBAAC,OAAD;CAAgB;CAAW,MAAK;CAAO,QAAO;CAAe,SAAQ;WACnE,kBAAC,QAAD;EACE,eAAc;EACd,gBAAe;EACf,aAAa;EACb,GAAE;EACF,CAAA;CACE,CAAA,EAGF,KAAgB,EAAE,mBACtB,kBAAC,OAAD;CAAgB;CAAW,MAAK;CAAO,QAAO;CAAe,SAAQ;WACnE,kBAAC,QAAD;EACE,eAAc;EACd,gBAAe;EACf,aAAa;EACb,GAAE;EACF,CAAA;CACE,CAAA,EAGF,KAAY,EAAE,mBAClB,kBAAC,OAAD;CAAgB;CAAW,MAAK;CAAO,QAAO;CAAe,SAAQ;WAArE,CACE,kBAAC,QAAD;EACE,eAAc;EACd,gBAAe;EACf,aAAa;EACb,GAAE;EACF,CAAA,EACF,kBAAC,QAAD;EAAM,eAAc;EAAQ,gBAAe;EAAQ,aAAa;EAAG,GAAE;EAAuC,CAAA,CACxG;IAOK,IAAe,EAAK,SAAsB,EAAE,aAAU,WAAQ,WAAQ,eAA+B;CAEhH,IAAM,IAAsB,EAAS,eAAe,UAAU,EAAS,uBAAuB,GAGxF,IAAqB,GAAa,MAAmC;AACzE,MAAI,CAAC,EAAS,QAAO;AACrB,MAAI;AAEF,UAAO,EADM,IAAI,KAAK,EAAQ,EACG,EAAE,WAAW,IAAM,CAAC;UAC/C;AACN,UAAO;;IAER,EAAE,CAAC,EAGA,IAAkB,QAAkB;AACxC,MAAS,EAAS,GAAG;IACpB,CAAC,GAAQ,EAAS,GAAG,CAAC,EAEnB,IAAkB,GACrB,MAAwB;AAEvB,EADA,EAAE,iBAAiB,EACnB,IAAS,EAAS,GAAG;IAEvB,CAAC,GAAQ,EAAS,GAAG,CACtB,EAEK,IAAoB,GACvB,MAAwB;AAEvB,EADA,EAAE,iBAAiB,EACnB,IAAW,EAAS,GAAG;IAEzB,CAAC,GAAU,EAAS,GAAG,CACxB;AAED,QACE,kBAAC,OAAD;EACE,SAAS;EACT,WAAU;YAFZ,CAaE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD,EAAc,WAAU,oCAAqC,CAAA,EAC7D,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD;KAAqB,QAAQ,EAAS;KAAQ,MAAK;KAAO,CAAA;IACtD,CAAA,CACF;MAGN,kBAAC,OAAD;GAAK,WAAU;aAAf;IAEE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,MAAD;OAAI,WAAU;iBAAoD,EAAS;OAAU,CAAA,EACrF,kBAAC,KAAD;OAAG,WAAU;iBAA+C,EAAS;OAAQ,CAAA,CACzE;SAEN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACG,KACC,kBAAC,UAAD;OACE,MAAK;OACL,SAAS;OACT,WAAU;OAOV,OAAM;iBAEN,kBAAC,GAAD,EAAU,WAAU,WAAY,CAAA;OACzB,CAAA,EAEV,KACC,kBAAC,UAAD;OACE,MAAK;OACL,SAAS;OACT,WAAU;OAOV,OAAM;iBAEN,kBAAC,GAAD,EAAY,WAAU,WAAY,CAAA;OAC3B,CAAA,CAEP;QACF;;IAGL,EAAS,eACR,kBAAC,KAAD;KAAG,WAAU;eAAiD,EAAS;KAAgB,CAAA;IAIzF,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CAEE,kBAAC,QAAD;OAAM,WAAU;OAA0B,OAAO,GAAG,EAAoB;iBAAxE;QACE,kBAAC,GAAD,EAAc,WAAU,eAAgB,CAAA;QACvC;QAAoB;QAAU,MAAwB,IAAU,KAAN;QACtD;UAGP,kBAAC,QAAD;OAAM,WAAU;OAA0B,OAAO,GAAG,EAAS,eAAe;iBAA5E,CACE,kBAAC,GAAD,EAAU,WAAU,eAAgB,CAAA,EACnC,EAAS,eACL;SACH;SAGN,kBAAC,QAAD;MACE,OACE,EAAS,iBACL,kBAAkB,IAAI,KAAK,EAAS,eAAe,CAAC,gBAAgB,KACpE;gBAGL,EAAmB,EAAS,eAAe;MACvC,CAAA,CACH;;IACF;KACF;;EAER"}

package/dist/bigconsole/components/workflow/WorkflowDeleteDialog.js

@@ -75,7 +75,7 @@ var i = ({ className: e }) => /* @__PURE__ */ n("svg", {
 					children: [/* @__PURE__ */ n("button", {
 						type: "button",
 						onClick: o,
-						className: "\n              px-4 py-2\n              text-sm font-medium\n              text-text-primary\n              bg-bg-muted\n              hover:bg-border-default\n              rounded-md\n              transition-colors\n            ",
+						className: "\n              px-4 py-2\n              text-sm font-medium\n              text-text-primary\n              bg-bg-sunken\n              hover:bg-border-default\n              rounded-md\n              transition-colors\n            ",
 						children: "Cancel"
 					}), /* @__PURE__ */ n("button", {
 						type: "button",

package/dist/bigconsole/components/workflow/WorkflowDeleteDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"WorkflowDeleteDialog.js","names":[],"sources":["../../../../src/bigconsole/components/workflow/WorkflowDeleteDialog.tsx"],"sourcesContent":["/**\n * WorkflowDeleteDialog Component\n *\n * Confirmation dialog for deleting a FluidGrids Workflow.\n * Shows warning about linked DataSinks before deletion.\n */\n\nimport { memo, useCallback } from 'react';\nimport type { FluidGridsWorkflow } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface WorkflowDeleteDialogProps {\n  workflow: FluidGridsWorkflow;\n  isOpen: boolean;\n  onClose: () => void;\n  onConfirm: () => void | Promise<void>;\n}\n\n// ============================================================================\n// ICONS\n// ============================================================================\n\nconst WarningIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n    />\n  </svg>\n);\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const WorkflowDeleteDialog = memo(function WorkflowDeleteDialog({\n  workflow,\n  isOpen,\n  onClose,\n  onConfirm,\n}: WorkflowDeleteDialogProps) {\n  // Calculate linked DataSinks count\n  const linkedDataSinkCount = workflow.dataSinkLinks?.length ?? workflow.linkedDataSinkCount ?? 0;\n\n  // Event handlers\n  const handleBackdropClick = useCallback(() => {\n    onClose();\n  }, [onClose]);\n\n  const handleConfirmClick = useCallback(() => {\n    onConfirm();\n  }, [onConfirm]);\n\n  // Don't render if not open\n  if (!isOpen) {\n    return null;\n  }\n\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-center justify-center\">\n      {/* Backdrop */}\n      <div className=\"absolute inset-0 bg-black/50\" onClick={handleBackdropClick} />\n\n      {/* Dialog */}\n      <div className=\"relative bg-bg-surface rounded-lg shadow-xl max-w-md w-full mx-4 p-6\">\n        {/* Header */}\n        <div className=\"flex items-center gap-3 mb-4\">\n          <div className=\"p-2 rounded-full bg-state-error/10\">\n            <WarningIcon className=\"w-6 h-6 text-state-error\" />\n          </div>\n          <h2 className=\"text-lg font-semibold text-text-primary\">Delete Workflow</h2>\n        </div>\n\n        {/* Content */}\n        <div className=\"mb-6\">\n          <p className=\"text-sm text-text-secondary mb-3\">\n            Are you sure you want to delete the workflow{' '}\n            <span className=\"font-medium text-text-primary\">{workflow.name}</span>?\n          </p>\n\n          {/* Warning about linked DataSinks */}\n          {linkedDataSinkCount > 0 && (\n            <div className=\"p-3 bg-state-warning/10 rounded-md\">\n              <p className=\"text-sm text-state-warning\">\n                This workflow has {linkedDataSinkCount} linked DataSink\n                {linkedDataSinkCount !== 1 ? 's' : ''}. Deleting this workflow will remove the links, but the DataSinks\n                will not be deleted.\n              </p>\n            </div>\n          )}\n\n          <p className=\"text-sm text-text-secondary mt-3\">This action cannot be undone.</p>\n        </div>\n\n        {/* Actions */}\n        <div className=\"flex justify-end gap-3\">\n          <button\n            type=\"button\"\n            onClick={onClose}\n            className=\"\n              px-4 py-2\n              text-sm font-medium\n              text-text-primary\n              bg-bg-muted\n              hover:bg-border-default\n              rounded-md\n              transition-colors\n            \"\n          >\n            Cancel\n          </button>\n          <button\n            type=\"button\"\n            onClick={handleConfirmClick}\n            className=\"\n              px-4 py-2\n              text-sm font-medium\n              text-white\n              bg-state-error\n              hover:bg-state-error/90\n              rounded-md\n              transition-colors\n            \"\n          >\n            Delete Workflow\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport default WorkflowDeleteDialog;\n"],"mappings":";;;AAyBA,IAAM,KAAe,EAAE,mBACrB,kBAAC,OAAD;CAAgB;CAAW,MAAK;CAAO,QAAO;CAAe,SAAQ;WACnE,kBAAC,QAAD;EACE,eAAc;EACd,gBAAe;EACf,aAAa;EACb,GAAE;EACF,CAAA;CACE,CAAA,EAOK,IAAuB,EAAK,SAA8B,EACrE,aACA,WACA,YACA,gBAC4B;CAE5B,IAAM,IAAsB,EAAS,eAAe,UAAU,EAAS,uBAAuB,GAGxF,IAAsB,QAAkB;AAC5C,KAAS;IACR,CAAC,EAAQ,CAAC,EAEP,IAAqB,QAAkB;AAC3C,KAAW;IACV,CAAC,EAAU,CAAC;AAOf,QAJK,IAKH,kBAAC,OAAD;EAAK,WAAU;YAAf,CAEE,kBAAC,OAAD;GAAK,WAAU;GAA+B,SAAS;GAAuB,CAAA,EAG9E,kBAAC,OAAD;GAAK,WAAU;aAAf;IAEE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,GAAD,EAAa,WAAU,4BAA6B,CAAA;MAChD,CAAA,EACN,kBAAC,MAAD;MAAI,WAAU;gBAA0C;MAAoB,CAAA,CACxE;;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,KAAD;OAAG,WAAU;iBAAb;QAAgD;QACD;QAC7C,kBAAC,QAAD;SAAM,WAAU;mBAAiC,EAAS;SAAY,CAAA;;QACpE;;MAGH,IAAsB,KACrB,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,KAAD;QAAG,WAAU;kBAAb;SAA0C;SACrB;SAAoB;SACtC,MAAwB,IAAU,KAAN;SAAS;SAEpC;;OACA,CAAA;MAGR,kBAAC,KAAD;OAAG,WAAU;iBAAmC;OAAiC,CAAA;MAC7E;;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;gBASX;MAEQ,CAAA,EACT,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;gBASX;MAEQ,CAAA,CACL;;IACF;KACF;MAzEC;EA2ET"}
+{"version":3,"file":"WorkflowDeleteDialog.js","names":[],"sources":["../../../../src/bigconsole/components/workflow/WorkflowDeleteDialog.tsx"],"sourcesContent":["/**\n * WorkflowDeleteDialog Component\n *\n * Confirmation dialog for deleting a FluidGrids Workflow.\n * Shows warning about linked DataSinks before deletion.\n */\n\nimport { memo, useCallback } from 'react';\nimport type { FluidGridsWorkflow } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface WorkflowDeleteDialogProps {\n  workflow: FluidGridsWorkflow;\n  isOpen: boolean;\n  onClose: () => void;\n  onConfirm: () => void | Promise<void>;\n}\n\n// ============================================================================\n// ICONS\n// ============================================================================\n\nconst WarningIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n    />\n  </svg>\n);\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const WorkflowDeleteDialog = memo(function WorkflowDeleteDialog({\n  workflow,\n  isOpen,\n  onClose,\n  onConfirm,\n}: WorkflowDeleteDialogProps) {\n  // Calculate linked DataSinks count\n  const linkedDataSinkCount = workflow.dataSinkLinks?.length ?? workflow.linkedDataSinkCount ?? 0;\n\n  // Event handlers\n  const handleBackdropClick = useCallback(() => {\n    onClose();\n  }, [onClose]);\n\n  const handleConfirmClick = useCallback(() => {\n    onConfirm();\n  }, [onConfirm]);\n\n  // Don't render if not open\n  if (!isOpen) {\n    return null;\n  }\n\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-center justify-center\">\n      {/* Backdrop */}\n      <div className=\"absolute inset-0 bg-black/50\" onClick={handleBackdropClick} />\n\n      {/* Dialog */}\n      <div className=\"relative bg-bg-surface rounded-lg shadow-xl max-w-md w-full mx-4 p-6\">\n        {/* Header */}\n        <div className=\"flex items-center gap-3 mb-4\">\n          <div className=\"p-2 rounded-full bg-state-error/10\">\n            <WarningIcon className=\"w-6 h-6 text-state-error\" />\n          </div>\n          <h2 className=\"text-lg font-semibold text-text-primary\">Delete Workflow</h2>\n        </div>\n\n        {/* Content */}\n        <div className=\"mb-6\">\n          <p className=\"text-sm text-text-secondary mb-3\">\n            Are you sure you want to delete the workflow{' '}\n            <span className=\"font-medium text-text-primary\">{workflow.name}</span>?\n          </p>\n\n          {/* Warning about linked DataSinks */}\n          {linkedDataSinkCount > 0 && (\n            <div className=\"p-3 bg-state-warning/10 rounded-md\">\n              <p className=\"text-sm text-state-warning\">\n                This workflow has {linkedDataSinkCount} linked DataSink\n                {linkedDataSinkCount !== 1 ? 's' : ''}. Deleting this workflow will remove the links, but the DataSinks\n                will not be deleted.\n              </p>\n            </div>\n          )}\n\n          <p className=\"text-sm text-text-secondary mt-3\">This action cannot be undone.</p>\n        </div>\n\n        {/* Actions */}\n        <div className=\"flex justify-end gap-3\">\n          <button\n            type=\"button\"\n            onClick={onClose}\n            className=\"\n              px-4 py-2\n              text-sm font-medium\n              text-text-primary\n              bg-bg-sunken\n              hover:bg-border-default\n              rounded-md\n              transition-colors\n            \"\n          >\n            Cancel\n          </button>\n          <button\n            type=\"button\"\n            onClick={handleConfirmClick}\n            className=\"\n              px-4 py-2\n              text-sm font-medium\n              text-white\n              bg-state-error\n              hover:bg-state-error/90\n              rounded-md\n              transition-colors\n            \"\n          >\n            Delete Workflow\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport default WorkflowDeleteDialog;\n"],"mappings":";;;AAyBA,IAAM,KAAe,EAAE,mBACrB,kBAAC,OAAD;CAAgB;CAAW,MAAK;CAAO,QAAO;CAAe,SAAQ;WACnE,kBAAC,QAAD;EACE,eAAc;EACd,gBAAe;EACf,aAAa;EACb,GAAE;EACF,CAAA;CACE,CAAA,EAOK,IAAuB,EAAK,SAA8B,EACrE,aACA,WACA,YACA,gBAC4B;CAE5B,IAAM,IAAsB,EAAS,eAAe,UAAU,EAAS,uBAAuB,GAGxF,IAAsB,QAAkB;AAC5C,KAAS;IACR,CAAC,EAAQ,CAAC,EAEP,IAAqB,QAAkB;AAC3C,KAAW;IACV,CAAC,EAAU,CAAC;AAOf,QAJK,IAKH,kBAAC,OAAD;EAAK,WAAU;YAAf,CAEE,kBAAC,OAAD;GAAK,WAAU;GAA+B,SAAS;GAAuB,CAAA,EAG9E,kBAAC,OAAD;GAAK,WAAU;aAAf;IAEE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,GAAD,EAAa,WAAU,4BAA6B,CAAA;MAChD,CAAA,EACN,kBAAC,MAAD;MAAI,WAAU;gBAA0C;MAAoB,CAAA,CACxE;;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,KAAD;OAAG,WAAU;iBAAb;QAAgD;QACD;QAC7C,kBAAC,QAAD;SAAM,WAAU;mBAAiC,EAAS;SAAY,CAAA;;QACpE;;MAGH,IAAsB,KACrB,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,KAAD;QAAG,WAAU;kBAAb;SAA0C;SACrB;SAAoB;SACtC,MAAwB,IAAU,KAAN;SAAS;SAEpC;;OACA,CAAA;MAGR,kBAAC,KAAD;OAAG,WAAU;iBAAmC;OAAiC,CAAA;MAC7E;;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;gBASX;MAEQ,CAAA,EACT,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;gBASX;MAEQ,CAAA,CACL;;IACF;KACF;MAzEC;EA2ET"}

package/dist/bigconsole/pages/DashboardBuilderPage.js

@@ -345,7 +345,7 @@ var S = f(function() {
 							}), /* @__PURE__ */ _("button", {
 								type: "button",
 								onClick: () => D(!1),
-								className: "\n                  p-1 rounded-md\n                  text-text-secondary\n                  hover:text-text-primary\n                  hover:bg-bg-muted\n                ",
+								className: "\n                  p-1 rounded-md\n                  text-text-secondary\n                  hover:text-text-primary\n                  hover:bg-bg-sunken\n                ",
 								children: /* @__PURE__ */ _("svg", {
 									className: "w-4 h-4",
 									fill: "none",
@@ -371,7 +371,7 @@ var S = f(function() {
 				!E && /* @__PURE__ */ _("button", {
 					type: "button",
 					onClick: () => D(!0),
-					className: "\n            absolute left-0 top-1/2 -translate-y-1/2 z-20\n            w-8 h-24\n            bg-bg-surface\n            border border-l-0 border-border-default\n            rounded-r-lg\n            flex items-center justify-center\n            text-text-secondary\n            hover:text-text-primary\n            hover:bg-bg-muted\n            transition-colors\n          ",
+					className: "\n            absolute left-0 top-1/2 -translate-y-1/2 z-20\n            w-8 h-24\n            bg-bg-surface\n            border border-l-0 border-border-default\n            rounded-r-lg\n            flex items-center justify-center\n            text-text-secondary\n            hover:text-text-primary\n            hover:bg-bg-sunken\n            transition-colors\n          ",
 					title: "Open widget panel",
 					children: /* @__PURE__ */ _("svg", {
 						className: "w-4 h-4",

package/dist/bigconsole/pages/DashboardBuilderPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardBuilderPage.js","names":[],"sources":["../../../src/bigconsole/pages/DashboardBuilderPage.tsx"],"sourcesContent":["/**\n * DashboardBuilderPage\n *\n * Full dashboard builder experience with side panels.\n */\n\nimport { type FC, memo, useState, useEffect, useCallback } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { ArrowLeft } from 'lucide-react';\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport { useBigConsoleNavigate, useBigConsole } from '../context';\nimport { DashboardCanvas, ExportDashboardDialog } from '../components/dashboard';\nimport { WidgetTypeSelector } from '../components/widgets/WidgetTypeSelector';\nimport { useDashboardStore, useWidgetStore } from '../store';\nimport { useDashboardOperations, useWidgetOperations, usePageOperations, useWidgetCatalog } from '../hooks';\nimport type { WidgetType, Dashboard, DashboardPage } from '../types';\nimport { findNextAvailablePosition } from '../utils/widgetPositioning';\nimport { getWidgetDefinition } from '../components/widgets/WidgetRegistry';\n\n// Breadcrumb name registration helpers (get from shell at call time to avoid timing issues)\nfunction getBreadcrumbRegistry() {\n  try {\n    return (\n      window as unknown as {\n        __breadcrumbRegistry?: { register: (id: string, name: string) => void; unregister: (id: string) => void };\n      }\n    ).__breadcrumbRegistry;\n  } catch {\n    return undefined;\n  }\n}\n\nfunction registerBreadcrumbName(id: string, name: string) {\n  const registry = getBreadcrumbRegistry();\n  if (registry?.register) {\n    registry.register(id, name);\n  }\n}\n\nfunction unregisterBreadcrumbName(id: string) {\n  const registry = getBreadcrumbRegistry();\n  if (registry?.unregister) {\n    registry.unregister(id);\n  }\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const DashboardBuilderPage: FC = memo(function DashboardBuilderPage() {\n  const { dashboardId } = useParams<{ dashboardId: string }>();\n  const navigate = useBigConsoleNavigate();\n  const { workspaceId, apiGatewayUrl, authToken } = useBigConsole();\n  // Built-in widget catalog from the backend (getWidgetTypes); falls back to the\n  // bundled registry while loading or if the supergraph hasn't adopted it yet.\n  const { definitions: widgetCatalog } = useWidgetCatalog({ workspaceId, apiGatewayUrl, authToken });\n  const [isWidgetPanelOpen, setIsWidgetPanelOpen] = useState(false);\n  const [isSaving, setIsSaving] = useState(false);\n  const [isExportDialogOpen, setIsExportDialogOpen] = useState(false);\n  const [activePageId, setActivePageId] = useState<string | null>(null);\n\n  // Dashboard operations from GraphQL\n  const {\n    fetchDashboard,\n    updateDashboard,\n    loading: dashboardLoading,\n    error: dashboardError,\n  } = useDashboardOperations();\n\n  // Widget operations from GraphQL\n  const {\n    createWidget: createWidgetMutation,\n    updateWidget: updateWidgetMutation,\n    deleteWidget: deleteWidgetMutation,\n    duplicateWidget: duplicateWidgetMutation,\n    batchUpdatePositions,\n  } = useWidgetOperations(undefined, dashboardId);\n\n  // Page operations from GraphQL\n  const {\n    createPage: createPageMutation,\n    updatePage: updatePageMutation,\n    deletePage: deletePageMutation,\n    reorderPages: reorderPagesMutation,\n  } = usePageOperations();\n\n  // Store actions\n  const setCurrentDashboard = useDashboardStore((state) => state.setCurrentDashboard);\n  const currentDashboard = useDashboardStore((state) => state.currentDashboard);\n  const setViewMode = useDashboardStore((state) => state.setViewMode);\n  const selectWidget = useWidgetStore((state) => state.selectWidget);\n  const widgets = useWidgetStore((state) => state.widgets);\n  const clipboardWidgetId = useWidgetStore((state) => state.clipboardWidgetId);\n  const clipboardAction = useWidgetStore((state) => state.clipboardAction);\n  const clearClipboard = useWidgetStore((state) => state.clearClipboard);\n\n  // Set edit mode on mount\n  useEffect(() => {\n    setViewMode('edit');\n    return () => setViewMode('view');\n  }, [setViewMode]);\n\n  // Load dashboard data from API\n  useEffect(() => {\n    if (!dashboardId) {\n      navigate('/dashboards');\n      return;\n    }\n\n    // Fetch dashboard from API\n    fetchDashboard(dashboardId).then((dashboard) => {\n      if (dashboard) {\n        setCurrentDashboard({\n          id: dashboard.id,\n          title: dashboard.name,\n          description: dashboard.description || '',\n          pages: dashboard.pages.map((page, index) => ({\n            id: page.id,\n            title: page.name || '',\n            index,\n            layoutConfig: page.layoutConfig || {},\n          })) as any,\n          createdAt: dashboard.createdAt,\n          updatedAt: dashboard.updatedAt,\n        } as unknown as Dashboard);\n        // Set active page to first page\n        if (dashboard.pages.length > 0 && !activePageId) {\n          setActivePageId(dashboard.pages[0].id);\n        }\n\n        // Register dashboard name for breadcrumb display\n        if (dashboard.name) {\n          registerBreadcrumbName(dashboardId, dashboard.name);\n        }\n      } else {\n        // Dashboard not found, redirect\n        navigate('/dashboards');\n      }\n    });\n\n    // Cleanup: unregister breadcrumb name on unmount\n    return () => {\n      if (dashboardId) {\n        unregisterBreadcrumbName(dashboardId);\n      }\n    };\n  }, [dashboardId, navigate, setCurrentDashboard, fetchDashboard, activePageId]);\n\n  // Handle paste widget from clipboard\n  const handlePaste = useCallback(async () => {\n    if (!clipboardWidgetId || !dashboardId || !currentDashboard?.pages?.[0]?.id) {\n      return;\n    }\n\n    const sourceWidget = widgets.get(clipboardWidgetId);\n    if (!sourceWidget) {\n      clearClipboard();\n      return;\n    }\n\n    const pageId = currentDashboard.pages[0].id;\n\n    // Use smart placement algorithm - horizontal first, then next row\n    const widgetsArray = Array.from(widgets.values());\n    const widgetSize = {\n      width: sourceWidget.positionWidth ?? 4,\n      height: sourceWidget.positionHeight ?? 4,\n    };\n\n    const { x, y } = findNextAvailablePosition(widgetsArray, widgetSize, { cols: 12 });\n\n    const newPosition = {\n      x,\n      y,\n      width: widgetSize.width,\n      height: widgetSize.height,\n    };\n\n    const newTitle = clipboardAction === 'copy' ? `${sourceWidget.title} (Copy)` : sourceWidget.title;\n\n    let newWidget = null;\n\n    // Try duplicateWidget API first\n    try {\n      newWidget = await duplicateWidgetMutation(clipboardWidgetId, newPosition, newTitle);\n    } catch (err) {}\n\n    // Fallback: Create new widget with source widget's data\n    if (!newWidget) {\n      newWidget = await createWidgetMutation({\n        pageId,\n        dashboardId,\n        type: sourceWidget.type,\n        title: newTitle,\n        description: sourceWidget.description,\n        // v2.0: Use dataSinkId and parserId instead of dataSourceId/dataPath\n        dataSinkId: sourceWidget.dataSinkId ?? undefined,\n        datasetId: sourceWidget.datasetId ?? undefined,\n        parserId: sourceWidget.parserId ?? undefined,\n        parserRules: sourceWidget.parserRules ?? undefined,\n        config: sourceWidget.config || {},\n        position: newPosition,\n        refreshInterval: sourceWidget.refreshInterval ?? undefined,\n        metadata: sourceWidget.metadata,\n      });\n    }\n\n    if (newWidget) {\n      selectWidget(newWidget.id);\n\n      // If cut action, delete the original widget from backend\n      if (clipboardAction === 'cut') {\n        await deleteWidgetMutation(clipboardWidgetId);\n      }\n    }\n\n    clearClipboard();\n  }, [\n    clipboardWidgetId,\n    clipboardAction,\n    dashboardId,\n    currentDashboard,\n    widgets,\n    duplicateWidgetMutation,\n    createWidgetMutation,\n    deleteWidgetMutation,\n    selectWidget,\n    clearClipboard,\n  ]);\n\n  // Handle quick add widget from panel\n  const handleQuickAddWidget = useCallback(\n    async (type: WidgetType) => {\n      if (!dashboardId || !currentDashboard?.pages?.[0]?.id) return;\n\n      const pageId = currentDashboard.pages[0].id;\n      const title = type\n        .replace(/_/g, ' ')\n        .toLowerCase()\n        .replace(/^\\w/, (c) => c.toUpperCase());\n\n      // Use smart placement algorithm - horizontal first, then next row.\n      // Prefer the backend-sourced catalog entry; fall back to the static registry.\n      const widgetsArray = Array.from(widgets.values());\n      const definition = widgetCatalog.find((d) => d.type === type) ?? getWidgetDefinition(type);\n      const widgetSize = {\n        width: definition?.defaultSize?.width ?? 4,\n        height: definition?.defaultSize?.height ?? 4,\n      };\n\n      const { x, y } = findNextAvailablePosition(widgetsArray, widgetSize, { cols: 12 });\n\n      // Create widget via API\n      const newWidget = await createWidgetMutation({\n        pageId,\n        dashboardId,\n        type,\n        title,\n        config: {},\n        position: {\n          x,\n          y,\n          width: widgetSize.width,\n          height: widgetSize.height,\n        },\n      });\n\n      if (newWidget) {\n        selectWidget(newWidget.id);\n        setIsWidgetPanelOpen(false);\n      }\n    },\n    [dashboardId, currentDashboard, createWidgetMutation, selectWidget, widgets, widgetCatalog]\n  );\n\n  // Navigate back to the dashboards list\n  const handleBack = useCallback(() => {\n    navigate('/dashboards');\n  }, [navigate]);\n\n  // Handle save - save dirty widgets and batch update positions\n  const handleSave = useCallback(async () => {\n    if (!dashboardId) return;\n\n    setIsSaving(true);\n    try {\n      // Get the LATEST state directly from store (avoid stale closure)\n      const storeState = useWidgetStore.getState();\n      const currentWidgets = Array.from(storeState.widgets.values());\n      const currentDirtyIds = storeState.dirtyWidgetIds;\n\n      // Debug: Log dirty widget IDs\n\n      // 1. Save dirty widgets (property changes like title, config, etc.)\n      const dirtyWidgets = currentWidgets.filter((w) => currentDirtyIds.has(w.id));\n\n      if (dirtyWidgets.length > 0) {\n        // Save each dirty widget\n        const updatePromises = dirtyWidgets.map(async (widget) => {\n          const updateInput = {\n            id: widget.id,\n            title: widget.title,\n            config: widget.config,\n            refreshInterval: widget.refreshInterval ?? undefined,\n            // v2.0: Use dataSinkId and parserId instead of dataSourceId/dataPath\n            dataSinkId: widget.dataSinkId ?? undefined,\n            datasetId: widget.datasetId ?? undefined,\n            parserId: widget.parserId ?? undefined,\n            parserRules: widget.parserRules ?? undefined,\n          };\n\n          try {\n            const result = await updateWidgetMutation(updateInput);\n            return result;\n          } catch (err) {\n            throw err;\n          }\n        });\n\n        const results = await Promise.all(updatePromises);\n\n        // Clear dirty flags after successful save\n        storeState.clearAllDirty();\n      } else {\n      }\n\n      // 2. Batch update widget positions\n      if (currentWidgets.length > 0) {\n        const positionUpdates = currentWidgets.map((widget) => ({\n          id: widget.id,\n          position: widget.position || {\n            x: widget.positionX ?? 0,\n            y: widget.positionY ?? 0,\n            width: widget.positionWidth ?? 4,\n            height: widget.positionHeight ?? 4,\n          },\n        }));\n\n        await batchUpdatePositions(positionUpdates);\n      }\n\n      // 3. Update dashboard metadata if needed\n      if (currentDashboard) {\n        await updateDashboard({\n          id: dashboardId,\n          name: currentDashboard.title,\n          description: currentDashboard.description,\n        });\n      }\n    } catch (error) {\n    } finally {\n      setIsSaving(false);\n    }\n  }, [dashboardId, currentDashboard, updateWidgetMutation, batchUpdatePositions, updateDashboard]);\n\n  // Handle export\n  const handleExport = useCallback(() => {\n    setIsExportDialogOpen(true);\n  }, []);\n\n  const handleExportClose = useCallback(() => {\n    setIsExportDialogOpen(false);\n  }, []);\n\n  // ============================================================================\n  // Page Management Callbacks\n  // ============================================================================\n\n  // Handle page selection\n  const handlePageChange = useCallback((pageId: string) => {\n    setActivePageId(pageId);\n  }, []);\n\n  // Handle adding a new page\n  const handlePageAdd = useCallback(async () => {\n    if (!currentDashboard || !dashboardId) return;\n\n    const newPageCount = currentDashboard.pages.length + 1;\n    const newPageName = `Page ${newPageCount}`;\n\n    // Call GraphQL mutation to create page\n    // Note: 'order' is not available for create - backend auto-assigns order\n    const newPage = await createPageMutation({\n      dashboardId,\n      name: newPageName,\n    });\n\n    if (newPage) {\n      // Update local state with the created page\n      setCurrentDashboard({\n        ...currentDashboard,\n        pages: [\n          ...currentDashboard.pages,\n          {\n            id: newPage.id,\n            title: newPage.name,\n            index: newPage.order,\n            layoutConfig: newPage.layoutConfig || {},\n          },\n        ],\n      });\n\n      // Switch to the new page\n      setActivePageId(newPage.id);\n    }\n  }, [currentDashboard, dashboardId, setCurrentDashboard, createPageMutation]);\n\n  // Handle renaming a page\n  const handlePageRename = useCallback(\n    async (pageId: string, newName: string) => {\n      if (!currentDashboard) return;\n\n      // Call GraphQL mutation to update page\n      const updatedPage = await updatePageMutation({\n        id: pageId,\n        name: newName,\n      });\n\n      if (updatedPage) {\n        setCurrentDashboard({\n          ...currentDashboard,\n          pages: currentDashboard.pages.map((page) => (page.id === pageId ? { ...page, title: newName } : page)),\n        });\n      }\n    },\n    [currentDashboard, setCurrentDashboard, updatePageMutation]\n  );\n\n  // Handle duplicating a page\n  const handlePageDuplicate = useCallback(\n    async (pageId: string) => {\n      if (!currentDashboard || !dashboardId) return;\n\n      const sourcePage = currentDashboard.pages.find((p) => p.id === pageId);\n      if (!sourcePage) return;\n\n      // Call GraphQL mutation to create a copy of the page\n      // Note: 'order' is not available for create - backend auto-assigns order\n      // Note: 'layout' should be PageLayout enum ('GRID', 'FLEX', 'FREEFORM'), not layoutConfig object\n      const newPage = await createPageMutation({\n        dashboardId,\n        name: `${sourcePage.title} (Copy)`,\n      });\n\n      if (newPage) {\n        setCurrentDashboard({\n          ...currentDashboard,\n          pages: [\n            ...currentDashboard.pages,\n            {\n              id: newPage.id,\n              title: newPage.name,\n              index: newPage.order,\n              layoutConfig: newPage.layoutConfig || {},\n            },\n          ],\n        });\n\n        setActivePageId(newPage.id);\n      }\n    },\n    [currentDashboard, dashboardId, setCurrentDashboard, createPageMutation]\n  );\n\n  // Handle deleting a page\n  const handlePageDelete = useCallback(\n    async (pageId: string) => {\n      if (!currentDashboard || currentDashboard.pages.length <= 1) return;\n\n      // Call GraphQL mutation to delete page\n      const success = await deletePageMutation(pageId);\n\n      if (success) {\n        const updatedPages = currentDashboard.pages.filter((p) => p.id !== pageId).map((p, index) => ({ ...p, index }));\n\n        setCurrentDashboard({\n          ...currentDashboard,\n          pages: updatedPages,\n        });\n\n        // Switch to first page if current page was deleted\n        if (activePageId === pageId) {\n          setActivePageId(updatedPages[0]?.id || null);\n        }\n      }\n    },\n    [currentDashboard, setCurrentDashboard, activePageId, deletePageMutation]\n  );\n\n  // Handle reordering pages\n  const handlePagesReorder = useCallback(\n    async (reorderedPages: DashboardPage[]) => {\n      if (!currentDashboard || !dashboardId) return;\n\n      // Update local state optimistically\n      setCurrentDashboard({\n        ...currentDashboard,\n        pages: reorderedPages.map((page, index) => ({\n          ...page,\n          index,\n        })),\n      });\n\n      // Call GraphQL mutation to persist the reorder\n      const pageIds = reorderedPages.map((p) => p.id);\n      await reorderPagesMutation(dashboardId, pageIds);\n    },\n    [currentDashboard, dashboardId, setCurrentDashboard, reorderPagesMutation]\n  );\n\n  // Show loading state\n  if (dashboardLoading || !currentDashboard) {\n    return (\n      <div className=\"flex items-center justify-center h-full\">\n        <div className=\"animate-spin w-8 h-8 border-4 border-action-primary-bg border-t-transparent rounded-full\" />\n      </div>\n    );\n  }\n\n  // Show error state\n  if (dashboardError) {\n    return (\n      <div className=\"flex flex-col items-center justify-center h-full p-6\">\n        <div className=\"bg-status-error-bg border border-status-error-border rounded-lg p-4 max-w-md\">\n          <h3 className=\"text-sm font-medium text-status-error-text\">Failed to load dashboard</h3>\n          <p className=\"text-sm text-text-secondary mt-1\">{dashboardError.message}</p>\n          <button\n            type=\"button\"\n            onClick={() => navigate('/dashboards')}\n            className=\"mt-3 px-3 py-1.5 text-sm font-medium text-action-primary-fg bg-action-primary-bg hover:bg-action-primary-bgHover rounded-md\"\n          >\n            Back to Dashboards\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-col h-full\">\n      {/* Header / Toolbar */}\n      <div className=\"flex items-center gap-3 px-3 py-2 border-b border-border-default bg-bg-surface flex-shrink-0\">\n        <Button\n          onClick={handleBack}\n          variant=\"ghost\"\n          size=\"sm\"\n          title=\"Back to Dashboards\"\n          aria-label=\"Back to Dashboards\"\n        >\n          <ArrowLeft className=\"w-4 h-4 mr-2\" />\n          Back\n        </Button>\n        <h2 className=\"text-sm font-semibold text-text-primary truncate\">{currentDashboard.title}</h2>\n      </div>\n\n      {/* Builder Body */}\n      <div className=\"flex flex-1 min-h-0 relative\">\n        {/* Widget Panel (Left) */}\n        <div\n          className={`\n          ${isWidgetPanelOpen ? 'w-72' : 'w-0'}\n          flex-shrink-0\n          bg-bg-surface\n          border-r border-border-default\n          transition-all duration-300\n          overflow-hidden\n        `}\n        >\n          {isWidgetPanelOpen && (\n            <div className=\"h-full flex flex-col\">\n              <div className=\"flex items-center justify-between p-3 border-b border-border-default\">\n                <h3 className=\"text-sm font-semibold text-text-primary\">Widgets</h3>\n                <button\n                  type=\"button\"\n                  onClick={() => setIsWidgetPanelOpen(false)}\n                  className=\"\n                  p-1 rounded-md\n                  text-text-secondary\n                  hover:text-text-primary\n                  hover:bg-bg-muted\n                \"\n                >\n                  <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                  </svg>\n                </button>\n              </div>\n              <div className=\"flex-1 overflow-auto\">\n                <WidgetTypeSelector onSelect={handleQuickAddWidget} definitions={widgetCatalog} />\n              </div>\n            </div>\n          )}\n        </div>\n\n        {/* Toggle Widget Panel Button */}\n        {!isWidgetPanelOpen && (\n          <button\n            type=\"button\"\n            onClick={() => setIsWidgetPanelOpen(true)}\n            className=\"\n            absolute left-0 top-1/2 -translate-y-1/2 z-20\n            w-8 h-24\n            bg-bg-surface\n            border border-l-0 border-border-default\n            rounded-r-lg\n            flex items-center justify-center\n            text-text-secondary\n            hover:text-text-primary\n            hover:bg-bg-muted\n            transition-colors\n          \"\n            title=\"Open widget panel\"\n          >\n            <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5l7 7-7 7\" />\n            </svg>\n          </button>\n        )}\n\n        {/* Main Canvas */}\n        <div className=\"flex-1 relative\">\n          <DashboardCanvas\n            dashboardId={currentDashboard.id}\n            pageId={activePageId || currentDashboard.pages?.[0]?.id}\n            title={currentDashboard.title}\n            onPaste={handlePaste}\n            onSave={handleSave}\n            isSaving={isSaving}\n            onExport={handleExport}\n            // Page tabs props\n            pages={currentDashboard.pages.map((page) => ({\n              id: page.id,\n              name: page.title || `Page ${(page.index ?? 0) + 1}`,\n              order: page.index ?? 0,\n            }))}\n            activePageId={activePageId || currentDashboard.pages?.[0]?.id}\n            onPageChange={handlePageChange}\n            onPageAdd={handlePageAdd}\n            onPageRename={handlePageRename}\n            onPageDuplicate={handlePageDuplicate}\n            onPageDelete={handlePageDelete}\n            onPagesReorder={handlePagesReorder}\n            showPageTabs={true}\n          />\n        </div>\n\n        {/* Export Dashboard Dialog */}\n        <ExportDashboardDialog\n          isOpen={isExportDialogOpen}\n          dashboardId={currentDashboard.id}\n          dashboardName={currentDashboard.title}\n          onClose={handleExportClose}\n        />\n      </div>\n    </div>\n  );\n});\n\nexport default DashboardBuilderPage;\n"],"mappings":"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"}
+{"version":3,"file":"DashboardBuilderPage.js","names":[],"sources":["../../../src/bigconsole/pages/DashboardBuilderPage.tsx"],"sourcesContent":["/**\n * DashboardBuilderPage\n *\n * Full dashboard builder experience with side panels.\n */\n\nimport { type FC, memo, useState, useEffect, useCallback } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { ArrowLeft } from 'lucide-react';\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport { useBigConsoleNavigate, useBigConsole } from '../context';\nimport { DashboardCanvas, ExportDashboardDialog } from '../components/dashboard';\nimport { WidgetTypeSelector } from '../components/widgets/WidgetTypeSelector';\nimport { useDashboardStore, useWidgetStore } from '../store';\nimport { useDashboardOperations, useWidgetOperations, usePageOperations, useWidgetCatalog } from '../hooks';\nimport type { WidgetType, Dashboard, DashboardPage } from '../types';\nimport { findNextAvailablePosition } from '../utils/widgetPositioning';\nimport { getWidgetDefinition } from '../components/widgets/WidgetRegistry';\n\n// Breadcrumb name registration helpers (get from shell at call time to avoid timing issues)\nfunction getBreadcrumbRegistry() {\n  try {\n    return (\n      window as unknown as {\n        __breadcrumbRegistry?: { register: (id: string, name: string) => void; unregister: (id: string) => void };\n      }\n    ).__breadcrumbRegistry;\n  } catch {\n    return undefined;\n  }\n}\n\nfunction registerBreadcrumbName(id: string, name: string) {\n  const registry = getBreadcrumbRegistry();\n  if (registry?.register) {\n    registry.register(id, name);\n  }\n}\n\nfunction unregisterBreadcrumbName(id: string) {\n  const registry = getBreadcrumbRegistry();\n  if (registry?.unregister) {\n    registry.unregister(id);\n  }\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const DashboardBuilderPage: FC = memo(function DashboardBuilderPage() {\n  const { dashboardId } = useParams<{ dashboardId: string }>();\n  const navigate = useBigConsoleNavigate();\n  const { workspaceId, apiGatewayUrl, authToken } = useBigConsole();\n  // Built-in widget catalog from the backend (getWidgetTypes); falls back to the\n  // bundled registry while loading or if the supergraph hasn't adopted it yet.\n  const { definitions: widgetCatalog } = useWidgetCatalog({ workspaceId, apiGatewayUrl, authToken });\n  const [isWidgetPanelOpen, setIsWidgetPanelOpen] = useState(false);\n  const [isSaving, setIsSaving] = useState(false);\n  const [isExportDialogOpen, setIsExportDialogOpen] = useState(false);\n  const [activePageId, setActivePageId] = useState<string | null>(null);\n\n  // Dashboard operations from GraphQL\n  const {\n    fetchDashboard,\n    updateDashboard,\n    loading: dashboardLoading,\n    error: dashboardError,\n  } = useDashboardOperations();\n\n  // Widget operations from GraphQL\n  const {\n    createWidget: createWidgetMutation,\n    updateWidget: updateWidgetMutation,\n    deleteWidget: deleteWidgetMutation,\n    duplicateWidget: duplicateWidgetMutation,\n    batchUpdatePositions,\n  } = useWidgetOperations(undefined, dashboardId);\n\n  // Page operations from GraphQL\n  const {\n    createPage: createPageMutation,\n    updatePage: updatePageMutation,\n    deletePage: deletePageMutation,\n    reorderPages: reorderPagesMutation,\n  } = usePageOperations();\n\n  // Store actions\n  const setCurrentDashboard = useDashboardStore((state) => state.setCurrentDashboard);\n  const currentDashboard = useDashboardStore((state) => state.currentDashboard);\n  const setViewMode = useDashboardStore((state) => state.setViewMode);\n  const selectWidget = useWidgetStore((state) => state.selectWidget);\n  const widgets = useWidgetStore((state) => state.widgets);\n  const clipboardWidgetId = useWidgetStore((state) => state.clipboardWidgetId);\n  const clipboardAction = useWidgetStore((state) => state.clipboardAction);\n  const clearClipboard = useWidgetStore((state) => state.clearClipboard);\n\n  // Set edit mode on mount\n  useEffect(() => {\n    setViewMode('edit');\n    return () => setViewMode('view');\n  }, [setViewMode]);\n\n  // Load dashboard data from API\n  useEffect(() => {\n    if (!dashboardId) {\n      navigate('/dashboards');\n      return;\n    }\n\n    // Fetch dashboard from API\n    fetchDashboard(dashboardId).then((dashboard) => {\n      if (dashboard) {\n        setCurrentDashboard({\n          id: dashboard.id,\n          title: dashboard.name,\n          description: dashboard.description || '',\n          pages: dashboard.pages.map((page, index) => ({\n            id: page.id,\n            title: page.name || '',\n            index,\n            layoutConfig: page.layoutConfig || {},\n          })) as any,\n          createdAt: dashboard.createdAt,\n          updatedAt: dashboard.updatedAt,\n        } as unknown as Dashboard);\n        // Set active page to first page\n        if (dashboard.pages.length > 0 && !activePageId) {\n          setActivePageId(dashboard.pages[0].id);\n        }\n\n        // Register dashboard name for breadcrumb display\n        if (dashboard.name) {\n          registerBreadcrumbName(dashboardId, dashboard.name);\n        }\n      } else {\n        // Dashboard not found, redirect\n        navigate('/dashboards');\n      }\n    });\n\n    // Cleanup: unregister breadcrumb name on unmount\n    return () => {\n      if (dashboardId) {\n        unregisterBreadcrumbName(dashboardId);\n      }\n    };\n  }, [dashboardId, navigate, setCurrentDashboard, fetchDashboard, activePageId]);\n\n  // Handle paste widget from clipboard\n  const handlePaste = useCallback(async () => {\n    if (!clipboardWidgetId || !dashboardId || !currentDashboard?.pages?.[0]?.id) {\n      return;\n    }\n\n    const sourceWidget = widgets.get(clipboardWidgetId);\n    if (!sourceWidget) {\n      clearClipboard();\n      return;\n    }\n\n    const pageId = currentDashboard.pages[0].id;\n\n    // Use smart placement algorithm - horizontal first, then next row\n    const widgetsArray = Array.from(widgets.values());\n    const widgetSize = {\n      width: sourceWidget.positionWidth ?? 4,\n      height: sourceWidget.positionHeight ?? 4,\n    };\n\n    const { x, y } = findNextAvailablePosition(widgetsArray, widgetSize, { cols: 12 });\n\n    const newPosition = {\n      x,\n      y,\n      width: widgetSize.width,\n      height: widgetSize.height,\n    };\n\n    const newTitle = clipboardAction === 'copy' ? `${sourceWidget.title} (Copy)` : sourceWidget.title;\n\n    let newWidget = null;\n\n    // Try duplicateWidget API first\n    try {\n      newWidget = await duplicateWidgetMutation(clipboardWidgetId, newPosition, newTitle);\n    } catch (err) {}\n\n    // Fallback: Create new widget with source widget's data\n    if (!newWidget) {\n      newWidget = await createWidgetMutation({\n        pageId,\n        dashboardId,\n        type: sourceWidget.type,\n        title: newTitle,\n        description: sourceWidget.description,\n        // v2.0: Use dataSinkId and parserId instead of dataSourceId/dataPath\n        dataSinkId: sourceWidget.dataSinkId ?? undefined,\n        datasetId: sourceWidget.datasetId ?? undefined,\n        parserId: sourceWidget.parserId ?? undefined,\n        parserRules: sourceWidget.parserRules ?? undefined,\n        config: sourceWidget.config || {},\n        position: newPosition,\n        refreshInterval: sourceWidget.refreshInterval ?? undefined,\n        metadata: sourceWidget.metadata,\n      });\n    }\n\n    if (newWidget) {\n      selectWidget(newWidget.id);\n\n      // If cut action, delete the original widget from backend\n      if (clipboardAction === 'cut') {\n        await deleteWidgetMutation(clipboardWidgetId);\n      }\n    }\n\n    clearClipboard();\n  }, [\n    clipboardWidgetId,\n    clipboardAction,\n    dashboardId,\n    currentDashboard,\n    widgets,\n    duplicateWidgetMutation,\n    createWidgetMutation,\n    deleteWidgetMutation,\n    selectWidget,\n    clearClipboard,\n  ]);\n\n  // Handle quick add widget from panel\n  const handleQuickAddWidget = useCallback(\n    async (type: WidgetType) => {\n      if (!dashboardId || !currentDashboard?.pages?.[0]?.id) return;\n\n      const pageId = currentDashboard.pages[0].id;\n      const title = type\n        .replace(/_/g, ' ')\n        .toLowerCase()\n        .replace(/^\\w/, (c) => c.toUpperCase());\n\n      // Use smart placement algorithm - horizontal first, then next row.\n      // Prefer the backend-sourced catalog entry; fall back to the static registry.\n      const widgetsArray = Array.from(widgets.values());\n      const definition = widgetCatalog.find((d) => d.type === type) ?? getWidgetDefinition(type);\n      const widgetSize = {\n        width: definition?.defaultSize?.width ?? 4,\n        height: definition?.defaultSize?.height ?? 4,\n      };\n\n      const { x, y } = findNextAvailablePosition(widgetsArray, widgetSize, { cols: 12 });\n\n      // Create widget via API\n      const newWidget = await createWidgetMutation({\n        pageId,\n        dashboardId,\n        type,\n        title,\n        config: {},\n        position: {\n          x,\n          y,\n          width: widgetSize.width,\n          height: widgetSize.height,\n        },\n      });\n\n      if (newWidget) {\n        selectWidget(newWidget.id);\n        setIsWidgetPanelOpen(false);\n      }\n    },\n    [dashboardId, currentDashboard, createWidgetMutation, selectWidget, widgets, widgetCatalog]\n  );\n\n  // Navigate back to the dashboards list\n  const handleBack = useCallback(() => {\n    navigate('/dashboards');\n  }, [navigate]);\n\n  // Handle save - save dirty widgets and batch update positions\n  const handleSave = useCallback(async () => {\n    if (!dashboardId) return;\n\n    setIsSaving(true);\n    try {\n      // Get the LATEST state directly from store (avoid stale closure)\n      const storeState = useWidgetStore.getState();\n      const currentWidgets = Array.from(storeState.widgets.values());\n      const currentDirtyIds = storeState.dirtyWidgetIds;\n\n      // Debug: Log dirty widget IDs\n\n      // 1. Save dirty widgets (property changes like title, config, etc.)\n      const dirtyWidgets = currentWidgets.filter((w) => currentDirtyIds.has(w.id));\n\n      if (dirtyWidgets.length > 0) {\n        // Save each dirty widget\n        const updatePromises = dirtyWidgets.map(async (widget) => {\n          const updateInput = {\n            id: widget.id,\n            title: widget.title,\n            config: widget.config,\n            refreshInterval: widget.refreshInterval ?? undefined,\n            // v2.0: Use dataSinkId and parserId instead of dataSourceId/dataPath\n            dataSinkId: widget.dataSinkId ?? undefined,\n            datasetId: widget.datasetId ?? undefined,\n            parserId: widget.parserId ?? undefined,\n            parserRules: widget.parserRules ?? undefined,\n          };\n\n          try {\n            const result = await updateWidgetMutation(updateInput);\n            return result;\n          } catch (err) {\n            throw err;\n          }\n        });\n\n        const results = await Promise.all(updatePromises);\n\n        // Clear dirty flags after successful save\n        storeState.clearAllDirty();\n      } else {\n      }\n\n      // 2. Batch update widget positions\n      if (currentWidgets.length > 0) {\n        const positionUpdates = currentWidgets.map((widget) => ({\n          id: widget.id,\n          position: widget.position || {\n            x: widget.positionX ?? 0,\n            y: widget.positionY ?? 0,\n            width: widget.positionWidth ?? 4,\n            height: widget.positionHeight ?? 4,\n          },\n        }));\n\n        await batchUpdatePositions(positionUpdates);\n      }\n\n      // 3. Update dashboard metadata if needed\n      if (currentDashboard) {\n        await updateDashboard({\n          id: dashboardId,\n          name: currentDashboard.title,\n          description: currentDashboard.description,\n        });\n      }\n    } catch (error) {\n    } finally {\n      setIsSaving(false);\n    }\n  }, [dashboardId, currentDashboard, updateWidgetMutation, batchUpdatePositions, updateDashboard]);\n\n  // Handle export\n  const handleExport = useCallback(() => {\n    setIsExportDialogOpen(true);\n  }, []);\n\n  const handleExportClose = useCallback(() => {\n    setIsExportDialogOpen(false);\n  }, []);\n\n  // ============================================================================\n  // Page Management Callbacks\n  // ============================================================================\n\n  // Handle page selection\n  const handlePageChange = useCallback((pageId: string) => {\n    setActivePageId(pageId);\n  }, []);\n\n  // Handle adding a new page\n  const handlePageAdd = useCallback(async () => {\n    if (!currentDashboard || !dashboardId) return;\n\n    const newPageCount = currentDashboard.pages.length + 1;\n    const newPageName = `Page ${newPageCount}`;\n\n    // Call GraphQL mutation to create page\n    // Note: 'order' is not available for create - backend auto-assigns order\n    const newPage = await createPageMutation({\n      dashboardId,\n      name: newPageName,\n    });\n\n    if (newPage) {\n      // Update local state with the created page\n      setCurrentDashboard({\n        ...currentDashboard,\n        pages: [\n          ...currentDashboard.pages,\n          {\n            id: newPage.id,\n            title: newPage.name,\n            index: newPage.order,\n            layoutConfig: newPage.layoutConfig || {},\n          },\n        ],\n      });\n\n      // Switch to the new page\n      setActivePageId(newPage.id);\n    }\n  }, [currentDashboard, dashboardId, setCurrentDashboard, createPageMutation]);\n\n  // Handle renaming a page\n  const handlePageRename = useCallback(\n    async (pageId: string, newName: string) => {\n      if (!currentDashboard) return;\n\n      // Call GraphQL mutation to update page\n      const updatedPage = await updatePageMutation({\n        id: pageId,\n        name: newName,\n      });\n\n      if (updatedPage) {\n        setCurrentDashboard({\n          ...currentDashboard,\n          pages: currentDashboard.pages.map((page) => (page.id === pageId ? { ...page, title: newName } : page)),\n        });\n      }\n    },\n    [currentDashboard, setCurrentDashboard, updatePageMutation]\n  );\n\n  // Handle duplicating a page\n  const handlePageDuplicate = useCallback(\n    async (pageId: string) => {\n      if (!currentDashboard || !dashboardId) return;\n\n      const sourcePage = currentDashboard.pages.find((p) => p.id === pageId);\n      if (!sourcePage) return;\n\n      // Call GraphQL mutation to create a copy of the page\n      // Note: 'order' is not available for create - backend auto-assigns order\n      // Note: 'layout' should be PageLayout enum ('GRID', 'FLEX', 'FREEFORM'), not layoutConfig object\n      const newPage = await createPageMutation({\n        dashboardId,\n        name: `${sourcePage.title} (Copy)`,\n      });\n\n      if (newPage) {\n        setCurrentDashboard({\n          ...currentDashboard,\n          pages: [\n            ...currentDashboard.pages,\n            {\n              id: newPage.id,\n              title: newPage.name,\n              index: newPage.order,\n              layoutConfig: newPage.layoutConfig || {},\n            },\n          ],\n        });\n\n        setActivePageId(newPage.id);\n      }\n    },\n    [currentDashboard, dashboardId, setCurrentDashboard, createPageMutation]\n  );\n\n  // Handle deleting a page\n  const handlePageDelete = useCallback(\n    async (pageId: string) => {\n      if (!currentDashboard || currentDashboard.pages.length <= 1) return;\n\n      // Call GraphQL mutation to delete page\n      const success = await deletePageMutation(pageId);\n\n      if (success) {\n        const updatedPages = currentDashboard.pages.filter((p) => p.id !== pageId).map((p, index) => ({ ...p, index }));\n\n        setCurrentDashboard({\n          ...currentDashboard,\n          pages: updatedPages,\n        });\n\n        // Switch to first page if current page was deleted\n        if (activePageId === pageId) {\n          setActivePageId(updatedPages[0]?.id || null);\n        }\n      }\n    },\n    [currentDashboard, setCurrentDashboard, activePageId, deletePageMutation]\n  );\n\n  // Handle reordering pages\n  const handlePagesReorder = useCallback(\n    async (reorderedPages: DashboardPage[]) => {\n      if (!currentDashboard || !dashboardId) return;\n\n      // Update local state optimistically\n      setCurrentDashboard({\n        ...currentDashboard,\n        pages: reorderedPages.map((page, index) => ({\n          ...page,\n          index,\n        })),\n      });\n\n      // Call GraphQL mutation to persist the reorder\n      const pageIds = reorderedPages.map((p) => p.id);\n      await reorderPagesMutation(dashboardId, pageIds);\n    },\n    [currentDashboard, dashboardId, setCurrentDashboard, reorderPagesMutation]\n  );\n\n  // Show loading state\n  if (dashboardLoading || !currentDashboard) {\n    return (\n      <div className=\"flex items-center justify-center h-full\">\n        <div className=\"animate-spin w-8 h-8 border-4 border-action-primary-bg border-t-transparent rounded-full\" />\n      </div>\n    );\n  }\n\n  // Show error state\n  if (dashboardError) {\n    return (\n      <div className=\"flex flex-col items-center justify-center h-full p-6\">\n        <div className=\"bg-status-error-bg border border-status-error-border rounded-lg p-4 max-w-md\">\n          <h3 className=\"text-sm font-medium text-status-error-text\">Failed to load dashboard</h3>\n          <p className=\"text-sm text-text-secondary mt-1\">{dashboardError.message}</p>\n          <button\n            type=\"button\"\n            onClick={() => navigate('/dashboards')}\n            className=\"mt-3 px-3 py-1.5 text-sm font-medium text-action-primary-fg bg-action-primary-bg hover:bg-action-primary-bgHover rounded-md\"\n          >\n            Back to Dashboards\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-col h-full\">\n      {/* Header / Toolbar */}\n      <div className=\"flex items-center gap-3 px-3 py-2 border-b border-border-default bg-bg-surface flex-shrink-0\">\n        <Button\n          onClick={handleBack}\n          variant=\"ghost\"\n          size=\"sm\"\n          title=\"Back to Dashboards\"\n          aria-label=\"Back to Dashboards\"\n        >\n          <ArrowLeft className=\"w-4 h-4 mr-2\" />\n          Back\n        </Button>\n        <h2 className=\"text-sm font-semibold text-text-primary truncate\">{currentDashboard.title}</h2>\n      </div>\n\n      {/* Builder Body */}\n      <div className=\"flex flex-1 min-h-0 relative\">\n        {/* Widget Panel (Left) */}\n        <div\n          className={`\n          ${isWidgetPanelOpen ? 'w-72' : 'w-0'}\n          flex-shrink-0\n          bg-bg-surface\n          border-r border-border-default\n          transition-all duration-300\n          overflow-hidden\n        `}\n        >\n          {isWidgetPanelOpen && (\n            <div className=\"h-full flex flex-col\">\n              <div className=\"flex items-center justify-between p-3 border-b border-border-default\">\n                <h3 className=\"text-sm font-semibold text-text-primary\">Widgets</h3>\n                <button\n                  type=\"button\"\n                  onClick={() => setIsWidgetPanelOpen(false)}\n                  className=\"\n                  p-1 rounded-md\n                  text-text-secondary\n                  hover:text-text-primary\n                  hover:bg-bg-sunken\n                \"\n                >\n                  <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                  </svg>\n                </button>\n              </div>\n              <div className=\"flex-1 overflow-auto\">\n                <WidgetTypeSelector onSelect={handleQuickAddWidget} definitions={widgetCatalog} />\n              </div>\n            </div>\n          )}\n        </div>\n\n        {/* Toggle Widget Panel Button */}\n        {!isWidgetPanelOpen && (\n          <button\n            type=\"button\"\n            onClick={() => setIsWidgetPanelOpen(true)}\n            className=\"\n            absolute left-0 top-1/2 -translate-y-1/2 z-20\n            w-8 h-24\n            bg-bg-surface\n            border border-l-0 border-border-default\n            rounded-r-lg\n            flex items-center justify-center\n            text-text-secondary\n            hover:text-text-primary\n            hover:bg-bg-sunken\n            transition-colors\n          \"\n            title=\"Open widget panel\"\n          >\n            <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5l7 7-7 7\" />\n            </svg>\n          </button>\n        )}\n\n        {/* Main Canvas */}\n        <div className=\"flex-1 relative\">\n          <DashboardCanvas\n            dashboardId={currentDashboard.id}\n            pageId={activePageId || currentDashboard.pages?.[0]?.id}\n            title={currentDashboard.title}\n            onPaste={handlePaste}\n            onSave={handleSave}\n            isSaving={isSaving}\n            onExport={handleExport}\n            // Page tabs props\n            pages={currentDashboard.pages.map((page) => ({\n              id: page.id,\n              name: page.title || `Page ${(page.index ?? 0) + 1}`,\n              order: page.index ?? 0,\n            }))}\n            activePageId={activePageId || currentDashboard.pages?.[0]?.id}\n            onPageChange={handlePageChange}\n            onPageAdd={handlePageAdd}\n            onPageRename={handlePageRename}\n            onPageDuplicate={handlePageDuplicate}\n            onPageDelete={handlePageDelete}\n            onPagesReorder={handlePagesReorder}\n            showPageTabs={true}\n          />\n        </div>\n\n        {/* Export Dashboard Dialog */}\n        <ExportDashboardDialog\n          isOpen={isExportDialogOpen}\n          dashboardId={currentDashboard.id}\n          dashboardName={currentDashboard.title}\n          onClose={handleExportClose}\n        />\n      </div>\n    </div>\n  );\n});\n\nexport default DashboardBuilderPage;\n"],"mappings":"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"}

package/dist/bigconsole/pages/DashboardViewPage.js

@@ -230,7 +230,7 @@ var v = l(function() {
 					}), /* @__PURE__ */ h("button", {
 						type: "button",
 						onClick: () => v("/dashboards"),
-						className: "px-4 py-2 text-sm font-medium text-text-secondary bg-bg-muted hover:bg-bg-muted/80 rounded-md",
+						className: "px-4 py-2 text-sm font-medium text-text-secondary bg-bg-sunken hover:bg-bg-sunken/80 rounded-md",
 						children: "Back to Dashboards"
 					})]
 				})