@burdenoff/microfe-bigconsole 2026.622.1 → 2026.624.2

package/dist/bigconsole/components/datasink/DataSinkDeleteDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataSinkDeleteDialog.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/DataSinkDeleteDialog.tsx"],"sourcesContent":["/**\n * DataSink Delete Dialog\n *\n * Confirmation dialog for deleting a DataSink.\n */\n\nimport { memo, useCallback } from 'react';\nimport type { DataSink } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface DataSinkDeleteDialogProps {\n  /** DataSink to delete */\n  dataSink: DataSink;\n  /** Whether dialog is open */\n  isOpen: boolean;\n  /** Callback when dialog is closed */\n  onClose: () => void;\n  /** Callback when delete is confirmed */\n  onConfirm: () => void;\n  /** Whether delete is in progress */\n  isDeleting?: boolean;\n}\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const DataSinkDeleteDialog = memo(function DataSinkDeleteDialog({\n  dataSink,\n  isOpen,\n  onClose,\n  onConfirm,\n  isDeleting = false,\n}: DataSinkDeleteDialogProps) {\n  // Handle backdrop click\n  const handleBackdropClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (e.target === e.currentTarget && !isDeleting) {\n        onClose();\n      }\n    },\n    [isDeleting, onClose]\n  );\n\n  // Handle escape key\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Escape' && !isDeleting) {\n        onClose();\n      }\n    },\n    [isDeleting, onClose]\n  );\n\n  if (!isOpen) {\n    return null;\n  }\n\n  return (\n    <div\n      className=\"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50\"\n      onClick={handleBackdropClick}\n      onKeyDown={handleKeyDown}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"delete-dialog-title\"\n    >\n      <div className=\"bg-bg-surface border border-border-default rounded-lg shadow-xl max-w-md w-full\">\n        {/* Header */}\n        <div className=\"p-6 border-b border-border-default\">\n          <h2 id=\"delete-dialog-title\" className=\"text-lg font-semibold text-text-primary\">\n            Delete DataSink\n          </h2>\n        </div>\n\n        {/* Content */}\n        <div className=\"p-6\">\n          <p className=\"text-sm text-text-primary mb-4\">Are you sure you want to delete this DataSink?</p>\n\n          <div className=\"bg-bg-muted p-3 rounded-md\">\n            <p className=\"text-sm font-medium text-text-primary\">{dataSink.name || 'Untitled DataSink'}</p>\n            <p className=\"text-xs text-text-secondary mt-1 font-mono\">{dataSink.key}</p>\n          </div>\n\n          {dataSink.linkedWorkflowCount && dataSink.linkedWorkflowCount > 0 && (\n            <div className=\"mt-4 p-3 bg-state-warning/10 border border-state-warning/20 rounded-md\">\n              <p className=\"text-sm text-state-warning\">\n                This DataSink is linked to {dataSink.linkedWorkflowCount} workflow\n                {dataSink.linkedWorkflowCount !== 1 ? 's' : ''}. Deleting it will remove these links.\n              </p>\n            </div>\n          )}\n\n          <p className=\"text-sm text-state-error mt-4\">This action cannot be undone.</p>\n        </div>\n\n        {/* Footer */}\n        <div className=\"p-6 border-t border-border-default flex items-center justify-end gap-3\">\n          <button\n            type=\"button\"\n            onClick={onClose}\n            disabled={isDeleting}\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              disabled:opacity-50 disabled:cursor-not-allowed\n              rounded-md\n              transition-colors\n            `}\n          >\n            Cancel\n          </button>\n          <button\n            type=\"button\"\n            onClick={onConfirm}\n            disabled={isDeleting}\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              disabled:opacity-50 disabled:cursor-not-allowed\n              rounded-md\n              transition-colors\n            `}\n          >\n            {isDeleting ? 'Deleting...' : 'Delete'}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport default DataSinkDeleteDialog;\n"],"mappings":";;;AA8BA,IAAa,IAAuB,EAAK,SAA8B,EACrE,aACA,WACA,YACA,cACA,gBAAa,MACe;CAE5B,IAAM,IAAsB,GACzB,MAAwB;AACvB,EAAI,EAAE,WAAW,EAAE,iBAAiB,CAAC,KACnC,GAAS;IAGb,CAAC,GAAY,EAAQ,CACtB,EAGK,IAAgB,GACnB,MAA2B;AAC1B,EAAI,EAAE,QAAQ,YAAY,CAAC,KACzB,GAAS;IAGb,CAAC,GAAY,EAAQ,CACtB;AAMD,QAJK,IAKH,kBAAC,OAAD;EACE,WAAU;EACV,SAAS;EACT,WAAW;EACX,MAAK;EACL,cAAW;EACX,mBAAgB;YAEhB,kBAAC,OAAD;GAAK,WAAU;aAAf;IAEE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,MAAD;MAAI,IAAG;MAAsB,WAAU;gBAA0C;MAE5E,CAAA;KACD,CAAA;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,KAAD;OAAG,WAAU;iBAAiC;OAAkD,CAAA;MAEhG,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,KAAD;QAAG,WAAU;kBAAyC,EAAS,QAAQ;QAAwB,CAAA,EAC/F,kBAAC,KAAD;QAAG,WAAU;kBAA8C,EAAS;QAAQ,CAAA,CACxE;;MAEL,EAAS,uBAAuB,EAAS,sBAAsB,KAC9D,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,KAAD;QAAG,WAAU;kBAAb;SAA0C;SACZ,EAAS;SAAoB;SACxD,EAAS,wBAAwB,IAAU,KAAN;SAAS;SAC7C;;OACA,CAAA;MAGR,kBAAC,KAAD;OAAG,WAAU;iBAAgC;OAAiC,CAAA;MAC1E;;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,UAAU;MACV,WAAW;gBAUZ;MAEQ,CAAA,EACT,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,UAAU;MACV,WAAW;gBAWV,IAAa,gBAAgB;MACvB,CAAA,CACL;;IACF;;EACF,CAAA,GA/EC;EAiFT"}
+{"version":3,"file":"DataSinkDeleteDialog.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/DataSinkDeleteDialog.tsx"],"sourcesContent":["/**\n * DataSink Delete Dialog\n *\n * Confirmation dialog for deleting a DataSink.\n */\n\nimport { memo, useCallback } from 'react';\nimport type { DataSink } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface DataSinkDeleteDialogProps {\n  /** DataSink to delete */\n  dataSink: DataSink;\n  /** Whether dialog is open */\n  isOpen: boolean;\n  /** Callback when dialog is closed */\n  onClose: () => void;\n  /** Callback when delete is confirmed */\n  onConfirm: () => void;\n  /** Whether delete is in progress */\n  isDeleting?: boolean;\n}\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const DataSinkDeleteDialog = memo(function DataSinkDeleteDialog({\n  dataSink,\n  isOpen,\n  onClose,\n  onConfirm,\n  isDeleting = false,\n}: DataSinkDeleteDialogProps) {\n  // Handle backdrop click\n  const handleBackdropClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (e.target === e.currentTarget && !isDeleting) {\n        onClose();\n      }\n    },\n    [isDeleting, onClose]\n  );\n\n  // Handle escape key\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Escape' && !isDeleting) {\n        onClose();\n      }\n    },\n    [isDeleting, onClose]\n  );\n\n  if (!isOpen) {\n    return null;\n  }\n\n  return (\n    <div\n      className=\"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50\"\n      onClick={handleBackdropClick}\n      onKeyDown={handleKeyDown}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"delete-dialog-title\"\n    >\n      <div className=\"bg-bg-surface border border-border-default rounded-lg shadow-xl max-w-md w-full\">\n        {/* Header */}\n        <div className=\"p-6 border-b border-border-default\">\n          <h2 id=\"delete-dialog-title\" className=\"text-lg font-semibold text-text-primary\">\n            Delete DataSink\n          </h2>\n        </div>\n\n        {/* Content */}\n        <div className=\"p-6\">\n          <p className=\"text-sm text-text-primary mb-4\">Are you sure you want to delete this DataSink?</p>\n\n          <div className=\"bg-bg-sunken p-3 rounded-md\">\n            <p className=\"text-sm font-medium text-text-primary\">{dataSink.name || 'Untitled DataSink'}</p>\n            <p className=\"text-xs text-text-secondary mt-1 font-mono\">{dataSink.key}</p>\n          </div>\n\n          {dataSink.linkedWorkflowCount && dataSink.linkedWorkflowCount > 0 && (\n            <div className=\"mt-4 p-3 bg-state-warning/10 border border-state-warning/20 rounded-md\">\n              <p className=\"text-sm text-state-warning\">\n                This DataSink is linked to {dataSink.linkedWorkflowCount} workflow\n                {dataSink.linkedWorkflowCount !== 1 ? 's' : ''}. Deleting it will remove these links.\n              </p>\n            </div>\n          )}\n\n          <p className=\"text-sm text-state-error mt-4\">This action cannot be undone.</p>\n        </div>\n\n        {/* Footer */}\n        <div className=\"p-6 border-t border-border-default flex items-center justify-end gap-3\">\n          <button\n            type=\"button\"\n            onClick={onClose}\n            disabled={isDeleting}\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              disabled:opacity-50 disabled:cursor-not-allowed\n              rounded-md\n              transition-colors\n            `}\n          >\n            Cancel\n          </button>\n          <button\n            type=\"button\"\n            onClick={onConfirm}\n            disabled={isDeleting}\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              disabled:opacity-50 disabled:cursor-not-allowed\n              rounded-md\n              transition-colors\n            `}\n          >\n            {isDeleting ? 'Deleting...' : 'Delete'}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport default DataSinkDeleteDialog;\n"],"mappings":";;;AA8BA,IAAa,IAAuB,EAAK,SAA8B,EACrE,aACA,WACA,YACA,cACA,gBAAa,MACe;CAE5B,IAAM,IAAsB,GACzB,MAAwB;AACvB,EAAI,EAAE,WAAW,EAAE,iBAAiB,CAAC,KACnC,GAAS;IAGb,CAAC,GAAY,EAAQ,CACtB,EAGK,IAAgB,GACnB,MAA2B;AAC1B,EAAI,EAAE,QAAQ,YAAY,CAAC,KACzB,GAAS;IAGb,CAAC,GAAY,EAAQ,CACtB;AAMD,QAJK,IAKH,kBAAC,OAAD;EACE,WAAU;EACV,SAAS;EACT,WAAW;EACX,MAAK;EACL,cAAW;EACX,mBAAgB;YAEhB,kBAAC,OAAD;GAAK,WAAU;aAAf;IAEE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,MAAD;MAAI,IAAG;MAAsB,WAAU;gBAA0C;MAE5E,CAAA;KACD,CAAA;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,KAAD;OAAG,WAAU;iBAAiC;OAAkD,CAAA;MAEhG,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,KAAD;QAAG,WAAU;kBAAyC,EAAS,QAAQ;QAAwB,CAAA,EAC/F,kBAAC,KAAD;QAAG,WAAU;kBAA8C,EAAS;QAAQ,CAAA,CACxE;;MAEL,EAAS,uBAAuB,EAAS,sBAAsB,KAC9D,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,KAAD;QAAG,WAAU;kBAAb;SAA0C;SACZ,EAAS;SAAoB;SACxD,EAAS,wBAAwB,IAAU,KAAN;SAAS;SAC7C;;OACA,CAAA;MAGR,kBAAC,KAAD;OAAG,WAAU;iBAAgC;OAAiC,CAAA;MAC1E;;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,UAAU;MACV,WAAW;gBAUZ;MAEQ,CAAA,EACT,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,UAAU;MACV,WAAW;gBAWV,IAAa,gBAAgB;MACvB,CAAA,CACL;;IACF;;EACF,CAAA,GA/EC;EAiFT"}

package/dist/bigconsole/components/datasink/DataSinkRefreshDialog.js

@@ -28,7 +28,7 @@ var a = e(function({ dataSink: e, isOpen: a, onClose: o, onConfirm: s, isRefresh
 					className: "p-6",
 					children: [
 						/* @__PURE__ */ i("div", {
-							className: "bg-bg-muted p-3 rounded-md mb-4",
+							className: "bg-bg-sunken p-3 rounded-md mb-4",
 							children: [
 								/* @__PURE__ */ r("p", {
 									className: "text-sm font-medium text-text-primary",
@@ -68,7 +68,7 @@ var a = e(function({ dataSink: e, isOpen: a, onClose: o, onConfirm: s, isRefresh
 						type: "button",
 						onClick: o,
 						disabled: c,
-						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              disabled:opacity-50 disabled:cursor-not-allowed\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              disabled:opacity-50 disabled:cursor-not-allowed\n              rounded-md\n              transition-colors\n            ",
 						children: "Cancel"
 					}), /* @__PURE__ */ r("button", {
 						type: "button",

package/dist/bigconsole/components/datasink/DataSinkRefreshDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataSinkRefreshDialog.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/DataSinkRefreshDialog.tsx"],"sourcesContent":["/**\n * DataSink Refresh Dialog\n *\n * Dialog for confirming DataSink refresh with force option.\n */\n\nimport { memo, useState, useCallback } from 'react';\nimport type { DataSink } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface DataSinkRefreshDialogProps {\n  /** DataSink to refresh */\n  dataSink: DataSink;\n  /** Whether dialog is open */\n  isOpen: boolean;\n  /** Callback when dialog is closed */\n  onClose: () => void;\n  /** Callback when refresh is confirmed (with force flag) */\n  onConfirm: (force: boolean) => void;\n  /** Whether refresh is in progress */\n  isRefreshing?: boolean;\n}\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const DataSinkRefreshDialog = memo(function DataSinkRefreshDialog({\n  dataSink,\n  isOpen,\n  onClose,\n  onConfirm,\n  isRefreshing = false,\n}: DataSinkRefreshDialogProps) {\n  const [forceRefresh, setForceRefresh] = useState(false);\n\n  // Handle backdrop click\n  const handleBackdropClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (e.target === e.currentTarget && !isRefreshing) {\n        onClose();\n      }\n    },\n    [isRefreshing, onClose]\n  );\n\n  // Format date\n  const formatDate = (dateString: string) => {\n    return new Date(dateString).toLocaleString();\n  };\n\n  // Handle confirm\n  const handleConfirm = useCallback(() => {\n    onConfirm(forceRefresh);\n  }, [onConfirm, forceRefresh]);\n\n  if (!isOpen) {\n    return null;\n  }\n\n  return (\n    <div\n      className=\"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50\"\n      onClick={handleBackdropClick}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"refresh-dialog-title\"\n    >\n      <div className=\"bg-bg-surface border border-border-default rounded-lg shadow-xl max-w-md w-full\">\n        {/* Header */}\n        <div className=\"p-6 border-b border-border-default\">\n          <h2 id=\"refresh-dialog-title\" className=\"text-lg font-semibold text-text-primary\">\n            Refresh DataSink\n          </h2>\n        </div>\n\n        {/* Content */}\n        <div className=\"p-6\">\n          {/* DataSink info */}\n          <div className=\"bg-bg-muted p-3 rounded-md mb-4\">\n            <p className=\"text-sm font-medium text-text-primary\">{dataSink.name || 'Untitled DataSink'}</p>\n            <p className=\"text-xs text-text-secondary mt-1 font-mono\">{dataSink.key}</p>\n            {dataSink.lastRefreshedAt && (\n              <p className=\"text-xs text-text-secondary mt-2\">Last refreshed: {formatDate(dataSink.lastRefreshedAt)}</p>\n            )}\n          </div>\n\n          {/* Force refresh option */}\n          <label className=\"flex items-center gap-2 cursor-pointer\">\n            <input\n              type=\"checkbox\"\n              checked={forceRefresh}\n              onChange={(e) => setForceRefresh(e.target.checked)}\n              className=\"w-4 h-4 text-action-primary-bg focus:ring-action-primary-bg rounded\"\n            />\n            <span className=\"text-sm text-text-primary\">Force refresh (bypass cache)</span>\n          </label>\n          <p className=\"mt-2 text-xs text-text-secondary\">\n            Force refresh will re-fetch all data from the source, ignoring any cached values.\n          </p>\n        </div>\n\n        {/* Footer */}\n        <div className=\"p-6 border-t border-border-default flex items-center justify-end gap-3\">\n          <button\n            type=\"button\"\n            onClick={onClose}\n            disabled={isRefreshing}\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              disabled:opacity-50 disabled:cursor-not-allowed\n              rounded-md\n              transition-colors\n            `}\n          >\n            Cancel\n          </button>\n          <button\n            type=\"button\"\n            onClick={handleConfirm}\n            disabled={isRefreshing}\n            className={`\n              px-4 py-2\n              text-sm font-medium\n              text-action-primary-fg\n              bg-action-primary-bg\n              hover:bg-action-primary-bgHover\n              disabled:opacity-50 disabled:cursor-not-allowed\n              rounded-md\n              transition-colors\n            `}\n          >\n            {isRefreshing ? 'Refreshing...' : 'Refresh'}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport default DataSinkRefreshDialog;\n"],"mappings":";;;AA8BA,IAAa,IAAwB,EAAK,SAA+B,EACvE,aACA,WACA,YACA,cACA,kBAAe,MACc;CAC7B,IAAM,CAAC,GAAc,KAAmB,EAAS,GAAM,EAGjD,IAAsB,GACzB,MAAwB;AACvB,EAAI,EAAE,WAAW,EAAE,iBAAiB,CAAC,KACnC,GAAS;IAGb,CAAC,GAAc,EAAQ,CACxB,EAGK,KAAc,MACX,IAAI,KAAK,EAAW,CAAC,gBAAgB,EAIxC,IAAgB,QAAkB;AACtC,IAAU,EAAa;IACtB,CAAC,GAAW,EAAa,CAAC;AAM7B,QAJK,IAKH,kBAAC,OAAD;EACE,WAAU;EACV,SAAS;EACT,MAAK;EACL,cAAW;EACX,mBAAgB;YAEhB,kBAAC,OAAD;GAAK,WAAU;aAAf;IAEE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,MAAD;MAAI,IAAG;MAAuB,WAAU;gBAA0C;MAE7E,CAAA;KACD,CAAA;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf;MAEE,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACE,kBAAC,KAAD;SAAG,WAAU;mBAAyC,EAAS,QAAQ;SAAwB,CAAA;QAC/F,kBAAC,KAAD;SAAG,WAAU;mBAA8C,EAAS;SAAQ,CAAA;QAC3E,EAAS,mBACR,kBAAC,KAAD;SAAG,WAAU;mBAAb,CAAgD,oBAAiB,EAAW,EAAS,gBAAgB,CAAK;;QAExG;;MAGN,kBAAC,SAAD;OAAO,WAAU;iBAAjB,CACE,kBAAC,SAAD;QACE,MAAK;QACL,SAAS;QACT,WAAW,MAAM,EAAgB,EAAE,OAAO,QAAQ;QAClD,WAAU;QACV,CAAA,EACF,kBAAC,QAAD;QAAM,WAAU;kBAA4B;QAAmC,CAAA,CACzE;;MACR,kBAAC,KAAD;OAAG,WAAU;iBAAmC;OAE5C,CAAA;MACA;;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,UAAU;MACV,WAAW;gBAUZ;MAEQ,CAAA,EACT,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,UAAU;MACV,WAAW;gBAWV,IAAe,kBAAkB;MAC3B,CAAA,CACL;;IACF;;EACF,CAAA,GAnFC;EAqFT"}
+{"version":3,"file":"DataSinkRefreshDialog.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/DataSinkRefreshDialog.tsx"],"sourcesContent":["/**\n * DataSink Refresh Dialog\n *\n * Dialog for confirming DataSink refresh with force option.\n */\n\nimport { memo, useState, useCallback } from 'react';\nimport type { DataSink } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface DataSinkRefreshDialogProps {\n  /** DataSink to refresh */\n  dataSink: DataSink;\n  /** Whether dialog is open */\n  isOpen: boolean;\n  /** Callback when dialog is closed */\n  onClose: () => void;\n  /** Callback when refresh is confirmed (with force flag) */\n  onConfirm: (force: boolean) => void;\n  /** Whether refresh is in progress */\n  isRefreshing?: boolean;\n}\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const DataSinkRefreshDialog = memo(function DataSinkRefreshDialog({\n  dataSink,\n  isOpen,\n  onClose,\n  onConfirm,\n  isRefreshing = false,\n}: DataSinkRefreshDialogProps) {\n  const [forceRefresh, setForceRefresh] = useState(false);\n\n  // Handle backdrop click\n  const handleBackdropClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (e.target === e.currentTarget && !isRefreshing) {\n        onClose();\n      }\n    },\n    [isRefreshing, onClose]\n  );\n\n  // Format date\n  const formatDate = (dateString: string) => {\n    return new Date(dateString).toLocaleString();\n  };\n\n  // Handle confirm\n  const handleConfirm = useCallback(() => {\n    onConfirm(forceRefresh);\n  }, [onConfirm, forceRefresh]);\n\n  if (!isOpen) {\n    return null;\n  }\n\n  return (\n    <div\n      className=\"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50\"\n      onClick={handleBackdropClick}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"refresh-dialog-title\"\n    >\n      <div className=\"bg-bg-surface border border-border-default rounded-lg shadow-xl max-w-md w-full\">\n        {/* Header */}\n        <div className=\"p-6 border-b border-border-default\">\n          <h2 id=\"refresh-dialog-title\" className=\"text-lg font-semibold text-text-primary\">\n            Refresh DataSink\n          </h2>\n        </div>\n\n        {/* Content */}\n        <div className=\"p-6\">\n          {/* DataSink info */}\n          <div className=\"bg-bg-sunken p-3 rounded-md mb-4\">\n            <p className=\"text-sm font-medium text-text-primary\">{dataSink.name || 'Untitled DataSink'}</p>\n            <p className=\"text-xs text-text-secondary mt-1 font-mono\">{dataSink.key}</p>\n            {dataSink.lastRefreshedAt && (\n              <p className=\"text-xs text-text-secondary mt-2\">Last refreshed: {formatDate(dataSink.lastRefreshedAt)}</p>\n            )}\n          </div>\n\n          {/* Force refresh option */}\n          <label className=\"flex items-center gap-2 cursor-pointer\">\n            <input\n              type=\"checkbox\"\n              checked={forceRefresh}\n              onChange={(e) => setForceRefresh(e.target.checked)}\n              className=\"w-4 h-4 text-action-primary-bg focus:ring-action-primary-bg rounded\"\n            />\n            <span className=\"text-sm text-text-primary\">Force refresh (bypass cache)</span>\n          </label>\n          <p className=\"mt-2 text-xs text-text-secondary\">\n            Force refresh will re-fetch all data from the source, ignoring any cached values.\n          </p>\n        </div>\n\n        {/* Footer */}\n        <div className=\"p-6 border-t border-border-default flex items-center justify-end gap-3\">\n          <button\n            type=\"button\"\n            onClick={onClose}\n            disabled={isRefreshing}\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              disabled:opacity-50 disabled:cursor-not-allowed\n              rounded-md\n              transition-colors\n            `}\n          >\n            Cancel\n          </button>\n          <button\n            type=\"button\"\n            onClick={handleConfirm}\n            disabled={isRefreshing}\n            className={`\n              px-4 py-2\n              text-sm font-medium\n              text-action-primary-fg\n              bg-action-primary-bg\n              hover:bg-action-primary-bgHover\n              disabled:opacity-50 disabled:cursor-not-allowed\n              rounded-md\n              transition-colors\n            `}\n          >\n            {isRefreshing ? 'Refreshing...' : 'Refresh'}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport default DataSinkRefreshDialog;\n"],"mappings":";;;AA8BA,IAAa,IAAwB,EAAK,SAA+B,EACvE,aACA,WACA,YACA,cACA,kBAAe,MACc;CAC7B,IAAM,CAAC,GAAc,KAAmB,EAAS,GAAM,EAGjD,IAAsB,GACzB,MAAwB;AACvB,EAAI,EAAE,WAAW,EAAE,iBAAiB,CAAC,KACnC,GAAS;IAGb,CAAC,GAAc,EAAQ,CACxB,EAGK,KAAc,MACX,IAAI,KAAK,EAAW,CAAC,gBAAgB,EAIxC,IAAgB,QAAkB;AACtC,IAAU,EAAa;IACtB,CAAC,GAAW,EAAa,CAAC;AAM7B,QAJK,IAKH,kBAAC,OAAD;EACE,WAAU;EACV,SAAS;EACT,MAAK;EACL,cAAW;EACX,mBAAgB;YAEhB,kBAAC,OAAD;GAAK,WAAU;aAAf;IAEE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,MAAD;MAAI,IAAG;MAAuB,WAAU;gBAA0C;MAE7E,CAAA;KACD,CAAA;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf;MAEE,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACE,kBAAC,KAAD;SAAG,WAAU;mBAAyC,EAAS,QAAQ;SAAwB,CAAA;QAC/F,kBAAC,KAAD;SAAG,WAAU;mBAA8C,EAAS;SAAQ,CAAA;QAC3E,EAAS,mBACR,kBAAC,KAAD;SAAG,WAAU;mBAAb,CAAgD,oBAAiB,EAAW,EAAS,gBAAgB,CAAK;;QAExG;;MAGN,kBAAC,SAAD;OAAO,WAAU;iBAAjB,CACE,kBAAC,SAAD;QACE,MAAK;QACL,SAAS;QACT,WAAW,MAAM,EAAgB,EAAE,OAAO,QAAQ;QAClD,WAAU;QACV,CAAA,EACF,kBAAC,QAAD;QAAM,WAAU;kBAA4B;QAAmC,CAAA,CACzE;;MACR,kBAAC,KAAD;OAAG,WAAU;iBAAmC;OAE5C,CAAA;MACA;;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,UAAU;MACV,WAAW;gBAUZ;MAEQ,CAAA,EACT,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,UAAU;MACV,WAAW;gBAWV,IAAe,kBAAkB;MAC3B,CAAA,CACL;;IACF;;EACF,CAAA,GAnFC;EAqFT"}

package/dist/bigconsole/components/datasink/DataSinkTableViewer.js

@@ -64,7 +64,7 @@ var w = e(function({ data: e, maxHeight: w = "400px" }) {
 		className: "relative",
 		children: [
 			/* @__PURE__ */ d("div", {
-				className: "flex items-center justify-between p-3 bg-bg-muted border-b border-border-default",
+				className: "flex items-center justify-between p-3 bg-bg-sunken border-b border-border-default",
 				children: [/* @__PURE__ */ d("span", {
 					className: "text-xs text-text-secondary",
 					children: [
@@ -122,7 +122,7 @@ var w = e(function({ data: e, maxHeight: w = "400px" }) {
 				}, e.key)) }) }), /* @__PURE__ */ u(m, { children: P.map((e, t) => /* @__PURE__ */ u(v, { children: N.map((t) => /* @__PURE__ */ u(h, { children: C(S(e, t.path)) }, t.key)) }, t)) })] })
 			}),
 			F > 1 && /* @__PURE__ */ d("div", {
-				className: "flex items-center justify-between p-3 bg-bg-muted border-t border-border-default",
+				className: "flex items-center justify-between p-3 bg-bg-sunken border-t border-border-default",
 				children: [/* @__PURE__ */ d("span", {
 					className: "text-xs text-text-secondary",
 					children: [

package/dist/bigconsole/components/datasink/DataSinkTableViewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataSinkTableViewer.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/DataSinkTableViewer.tsx"],"sourcesContent":["/**\n * DataSink Table Viewer\n *\n * Component for viewing DataSink data in tabular format with support for\n * nested data, column selection, and multiple view modes.\n */\n\nimport { memo, useState, useMemo, useCallback } from 'react';\n\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@burdenoff/fe-libs/ui/table';\n\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Settings2, X } from 'lucide-react';\n\ninterface DataSinkTableViewerProps {\n  data: unknown;\n  maxHeight?: string;\n}\n\ninterface Column {\n  key: string;\n  label: string;\n  path: string;\n}\n\nfunction isObject(value: unknown): value is Record<string, unknown> {\n  return typeof value === 'object' && value !== null && !Array.isArray(value);\n}\n\nfunction isArrayOfObjects(value: unknown): boolean {\n  return Array.isArray(value) && value.length > 0 && isObject(value[0]);\n}\n\nfunction flattenObject(obj: Record<string, unknown>, prefix = ''): Record<string, unknown> {\n  const result: Record<string, unknown> = {};\n\n  for (const [key, value] of Object.entries(obj)) {\n    const newKey = prefix ? `${prefix}.${key}` : key;\n\n    if (isObject(value) && !Array.isArray(value)) {\n      Object.assign(result, flattenObject(value, newKey));\n    } else {\n      result[newKey] = value;\n    }\n  }\n\n  return result;\n}\n\nfunction getNestedValue(obj: Record<string, unknown>, path: string): unknown {\n  return path.split('.').reduce((acc: unknown, key) => {\n    if (acc && typeof acc === 'object' && key in acc) {\n      return (acc as Record<string, unknown>)[key];\n    }\n    return undefined;\n  }, obj);\n}\n\nfunction formatCellValue(value: unknown): string {\n  if (value === null || value === undefined) {\n    return '-';\n  }\n  if (typeof value === 'object') {\n    return JSON.stringify(value);\n  }\n  return String(value);\n}\n\nexport const DataSinkTableViewer = memo(function DataSinkTableViewer({\n  data,\n  maxHeight = '400px',\n}: DataSinkTableViewerProps) {\n  const [page, setPage] = useState(0);\n  const PAGE_SIZE = 50;\n  const [selectedColumns, setSelectedColumns] = useState<string[] | null>(null);\n  const [showColumnPicker, setShowColumnPicker] = useState(false);\n\n  const rows = useMemo(() => {\n    if (!data) return [];\n    if (Array.isArray(data) && isArrayOfObjects(data)) {\n      return data as Record<string, unknown>[];\n    }\n    if (isObject(data)) {\n      return [data];\n    }\n    return [];\n  }, [data]);\n\n  const allColumns = useMemo(() => {\n    if (rows.length === 0) return [];\n\n    const columnMap = new Map<string, Column>();\n\n    for (const row of rows) {\n      const flat = flattenObject(row);\n      for (const key of Object.keys(flat)) {\n        if (!columnMap.has(key)) {\n          const parts = key.split('.');\n          const label = parts[parts.length - 1];\n          columnMap.set(key, { key, label, path: key });\n        }\n      }\n    }\n\n    return Array.from(columnMap.values());\n  }, [rows]);\n\n  const displayColumns = useMemo(() => {\n    if (selectedColumns) {\n      return allColumns.filter((col) => selectedColumns.includes(col.key));\n    }\n    return allColumns.slice(0, 10);\n  }, [allColumns, selectedColumns]);\n\n  const paginatedRows = useMemo(() => {\n    const start = page * PAGE_SIZE;\n    return rows.slice(start, start + PAGE_SIZE);\n  }, [rows, page]);\n\n  const totalPages = Math.ceil(rows.length / PAGE_SIZE);\n\n  const handleColumnToggle = useCallback((columnKey: string) => {\n    setSelectedColumns((prev) => {\n      if (!prev) {\n        return [columnKey];\n      }\n      if (prev.includes(columnKey)) {\n        const next = prev.filter((k) => k !== columnKey);\n        return next.length > 0 ? next : null;\n      }\n      return [...prev, columnKey];\n    });\n  }, []);\n\n  const handleResetColumns = useCallback(() => {\n    setSelectedColumns(null);\n    setShowColumnPicker(false);\n  }, []);\n\n  if (rows.length === 0) {\n    return (\n      <div className=\"flex items-center justify-center p-8 text-text-secondary text-body-sm\">\n        No tabular data available. Data must be an array of objects for table view.\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"relative\">\n      <div className=\"flex items-center justify-between p-3 bg-bg-muted border-b border-border-default\">\n        <span className=\"text-xs text-text-secondary\">\n          {rows.length} rows &middot; {displayColumns.length} columns\n        </span>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"ghost\" size=\"sm\" onClick={() => setShowColumnPicker((v) => !v)}>\n            <Settings2 className=\"w-4 h-4\" />\n          </Button>\n        </div>\n      </div>\n\n      {showColumnPicker && (\n        <div className=\"absolute right-0 top-10 z-10 bg-bg-surface border border-border-default rounded-md shadow-lg p-3 min-w-[200px] max-h-[300px] overflow-auto\">\n          <div className=\"flex items-center justify-between mb-2\">\n            <span className=\"text-xs font-medium text-text-primary\">Select Columns</span>\n            <Button variant=\"ghost\" size=\"sm\" onClick={handleResetColumns}>\n              <X className=\"w-3 h-3\" />\n            </Button>\n          </div>\n          <div className=\"space-y-1\">\n            {allColumns.map((col) => {\n              const isSelected = !selectedColumns || selectedColumns.includes(col.key);\n              return (\n                <label\n                  key={col.key}\n                  className=\"flex items-center gap-2 text-xs text-text-secondary hover:text-text-primary cursor-pointer\"\n                >\n                  <input\n                    type=\"checkbox\"\n                    checked={isSelected}\n                    onChange={() => handleColumnToggle(col.key)}\n                    className=\"rounded border-border-default\"\n                  />\n                  <span className=\"truncate\" title={col.key}>\n                    {col.label}\n                  </span>\n                </label>\n              );\n            })}\n          </div>\n        </div>\n      )}\n\n      <div className=\"overflow-auto\" style={{ maxHeight }}>\n        <Table>\n          <TableHeader>\n            <TableRow>\n              {displayColumns.map((col) => (\n                <TableHead key={col.key} title={col.path}>\n                  {col.label}\n                </TableHead>\n              ))}\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {paginatedRows.map((row, rowIndex) => (\n              <TableRow key={rowIndex}>\n                {displayColumns.map((col) => (\n                  <TableCell key={col.key}>{formatCellValue(getNestedValue(row, col.path))}</TableCell>\n                ))}\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n      </div>\n\n      {totalPages > 1 && (\n        <div className=\"flex items-center justify-between p-3 bg-bg-muted border-t border-border-default\">\n          <span className=\"text-xs text-text-secondary\">\n            Page {page + 1} of {totalPages}\n          </span>\n          <div className=\"flex items-center gap-1\">\n            <Button variant=\"ghost\" size=\"sm\" onClick={() => setPage(0)} disabled={page === 0}>\n              <ChevronsLeft className=\"w-4 h-4\" />\n            </Button>\n            <Button variant=\"ghost\" size=\"sm\" onClick={() => setPage((p) => Math.max(0, p - 1))} disabled={page === 0}>\n              <ChevronLeft className=\"w-4 h-4\" />\n            </Button>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}\n              disabled={page >= totalPages - 1}\n            >\n              <ChevronRight className=\"w-4 h-4\" />\n            </Button>\n            <Button variant=\"ghost\" size=\"sm\" onClick={() => setPage(totalPages - 1)} disabled={page >= totalPages - 1}>\n              <ChevronsRight className=\"w-4 h-4\" />\n            </Button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default DataSinkTableViewer;\n"],"mappings":"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"}
+{"version":3,"file":"DataSinkTableViewer.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/DataSinkTableViewer.tsx"],"sourcesContent":["/**\n * DataSink Table Viewer\n *\n * Component for viewing DataSink data in tabular format with support for\n * nested data, column selection, and multiple view modes.\n */\n\nimport { memo, useState, useMemo, useCallback } from 'react';\n\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@burdenoff/fe-libs/ui/table';\n\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Settings2, X } from 'lucide-react';\n\ninterface DataSinkTableViewerProps {\n  data: unknown;\n  maxHeight?: string;\n}\n\ninterface Column {\n  key: string;\n  label: string;\n  path: string;\n}\n\nfunction isObject(value: unknown): value is Record<string, unknown> {\n  return typeof value === 'object' && value !== null && !Array.isArray(value);\n}\n\nfunction isArrayOfObjects(value: unknown): boolean {\n  return Array.isArray(value) && value.length > 0 && isObject(value[0]);\n}\n\nfunction flattenObject(obj: Record<string, unknown>, prefix = ''): Record<string, unknown> {\n  const result: Record<string, unknown> = {};\n\n  for (const [key, value] of Object.entries(obj)) {\n    const newKey = prefix ? `${prefix}.${key}` : key;\n\n    if (isObject(value) && !Array.isArray(value)) {\n      Object.assign(result, flattenObject(value, newKey));\n    } else {\n      result[newKey] = value;\n    }\n  }\n\n  return result;\n}\n\nfunction getNestedValue(obj: Record<string, unknown>, path: string): unknown {\n  return path.split('.').reduce((acc: unknown, key) => {\n    if (acc && typeof acc === 'object' && key in acc) {\n      return (acc as Record<string, unknown>)[key];\n    }\n    return undefined;\n  }, obj);\n}\n\nfunction formatCellValue(value: unknown): string {\n  if (value === null || value === undefined) {\n    return '-';\n  }\n  if (typeof value === 'object') {\n    return JSON.stringify(value);\n  }\n  return String(value);\n}\n\nexport const DataSinkTableViewer = memo(function DataSinkTableViewer({\n  data,\n  maxHeight = '400px',\n}: DataSinkTableViewerProps) {\n  const [page, setPage] = useState(0);\n  const PAGE_SIZE = 50;\n  const [selectedColumns, setSelectedColumns] = useState<string[] | null>(null);\n  const [showColumnPicker, setShowColumnPicker] = useState(false);\n\n  const rows = useMemo(() => {\n    if (!data) return [];\n    if (Array.isArray(data) && isArrayOfObjects(data)) {\n      return data as Record<string, unknown>[];\n    }\n    if (isObject(data)) {\n      return [data];\n    }\n    return [];\n  }, [data]);\n\n  const allColumns = useMemo(() => {\n    if (rows.length === 0) return [];\n\n    const columnMap = new Map<string, Column>();\n\n    for (const row of rows) {\n      const flat = flattenObject(row);\n      for (const key of Object.keys(flat)) {\n        if (!columnMap.has(key)) {\n          const parts = key.split('.');\n          const label = parts[parts.length - 1];\n          columnMap.set(key, { key, label, path: key });\n        }\n      }\n    }\n\n    return Array.from(columnMap.values());\n  }, [rows]);\n\n  const displayColumns = useMemo(() => {\n    if (selectedColumns) {\n      return allColumns.filter((col) => selectedColumns.includes(col.key));\n    }\n    return allColumns.slice(0, 10);\n  }, [allColumns, selectedColumns]);\n\n  const paginatedRows = useMemo(() => {\n    const start = page * PAGE_SIZE;\n    return rows.slice(start, start + PAGE_SIZE);\n  }, [rows, page]);\n\n  const totalPages = Math.ceil(rows.length / PAGE_SIZE);\n\n  const handleColumnToggle = useCallback((columnKey: string) => {\n    setSelectedColumns((prev) => {\n      if (!prev) {\n        return [columnKey];\n      }\n      if (prev.includes(columnKey)) {\n        const next = prev.filter((k) => k !== columnKey);\n        return next.length > 0 ? next : null;\n      }\n      return [...prev, columnKey];\n    });\n  }, []);\n\n  const handleResetColumns = useCallback(() => {\n    setSelectedColumns(null);\n    setShowColumnPicker(false);\n  }, []);\n\n  if (rows.length === 0) {\n    return (\n      <div className=\"flex items-center justify-center p-8 text-text-secondary text-body-sm\">\n        No tabular data available. Data must be an array of objects for table view.\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"relative\">\n      <div className=\"flex items-center justify-between p-3 bg-bg-sunken border-b border-border-default\">\n        <span className=\"text-xs text-text-secondary\">\n          {rows.length} rows &middot; {displayColumns.length} columns\n        </span>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"ghost\" size=\"sm\" onClick={() => setShowColumnPicker((v) => !v)}>\n            <Settings2 className=\"w-4 h-4\" />\n          </Button>\n        </div>\n      </div>\n\n      {showColumnPicker && (\n        <div className=\"absolute right-0 top-10 z-10 bg-bg-surface border border-border-default rounded-md shadow-lg p-3 min-w-[200px] max-h-[300px] overflow-auto\">\n          <div className=\"flex items-center justify-between mb-2\">\n            <span className=\"text-xs font-medium text-text-primary\">Select Columns</span>\n            <Button variant=\"ghost\" size=\"sm\" onClick={handleResetColumns}>\n              <X className=\"w-3 h-3\" />\n            </Button>\n          </div>\n          <div className=\"space-y-1\">\n            {allColumns.map((col) => {\n              const isSelected = !selectedColumns || selectedColumns.includes(col.key);\n              return (\n                <label\n                  key={col.key}\n                  className=\"flex items-center gap-2 text-xs text-text-secondary hover:text-text-primary cursor-pointer\"\n                >\n                  <input\n                    type=\"checkbox\"\n                    checked={isSelected}\n                    onChange={() => handleColumnToggle(col.key)}\n                    className=\"rounded border-border-default\"\n                  />\n                  <span className=\"truncate\" title={col.key}>\n                    {col.label}\n                  </span>\n                </label>\n              );\n            })}\n          </div>\n        </div>\n      )}\n\n      <div className=\"overflow-auto\" style={{ maxHeight }}>\n        <Table>\n          <TableHeader>\n            <TableRow>\n              {displayColumns.map((col) => (\n                <TableHead key={col.key} title={col.path}>\n                  {col.label}\n                </TableHead>\n              ))}\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {paginatedRows.map((row, rowIndex) => (\n              <TableRow key={rowIndex}>\n                {displayColumns.map((col) => (\n                  <TableCell key={col.key}>{formatCellValue(getNestedValue(row, col.path))}</TableCell>\n                ))}\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n      </div>\n\n      {totalPages > 1 && (\n        <div className=\"flex items-center justify-between p-3 bg-bg-sunken border-t border-border-default\">\n          <span className=\"text-xs text-text-secondary\">\n            Page {page + 1} of {totalPages}\n          </span>\n          <div className=\"flex items-center gap-1\">\n            <Button variant=\"ghost\" size=\"sm\" onClick={() => setPage(0)} disabled={page === 0}>\n              <ChevronsLeft className=\"w-4 h-4\" />\n            </Button>\n            <Button variant=\"ghost\" size=\"sm\" onClick={() => setPage((p) => Math.max(0, p - 1))} disabled={page === 0}>\n              <ChevronLeft className=\"w-4 h-4\" />\n            </Button>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}\n              disabled={page >= totalPages - 1}\n            >\n              <ChevronRight className=\"w-4 h-4\" />\n            </Button>\n            <Button variant=\"ghost\" size=\"sm\" onClick={() => setPage(totalPages - 1)} disabled={page >= totalPages - 1}>\n              <ChevronsRight className=\"w-4 h-4\" />\n            </Button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default DataSinkTableViewer;\n"],"mappings":"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"}

package/dist/bigconsole/components/datasink/ImportDataSinkDialog.js

@@ -58,7 +58,7 @@ var k = t(function({ isOpen: t, onClose: k, onSuccess: A }) {
 				/* @__PURE__ */ h(w, { children: [/* @__PURE__ */ h("div", {
 					className: "flex items-center gap-3",
 					children: [/* @__PURE__ */ m("div", {
-						className: "flex size-10 items-center justify-center rounded-lg bg-primary/10",
+						className: "flex size-10 items-center justify-center rounded-lg bg-action-primary-bg/10",
 						children: /* @__PURE__ */ m(d, { className: "size-5 text-primary" })
 					}), /* @__PURE__ */ m(T, { children: "Import DataSink" })]
 				}), /* @__PURE__ */ m(S, { children: "Upload a DataSink export file to restore it into this workspace." })] }),
@@ -70,13 +70,13 @@ var k = t(function({ isOpen: t, onClose: k, onSuccess: A }) {
 							onDrop: X,
 							className: "border-2 border-dashed rounded-lg p-8 text-center hover:border-primary transition-colors",
 							children: [
-								/* @__PURE__ */ m(c, { className: "size-12 mx-auto text-muted-foreground mb-4" }),
+								/* @__PURE__ */ m(c, { className: "size-12 mx-auto text-text-secondary mb-4" }),
 								/* @__PURE__ */ m("p", {
 									className: "text-sm mb-2",
 									children: "Drag and drop a DataSink export file here"
 								}),
 								/* @__PURE__ */ m("p", {
-									className: "text-xs text-muted-foreground mb-4",
+									className: "text-xs text-text-secondary mb-4",
 									children: "or"
 								}),
 								/* @__PURE__ */ m("input", {
@@ -92,7 +92,7 @@ var k = t(function({ isOpen: t, onClose: k, onSuccess: A }) {
 									children: "Browse Files"
 								}),
 								/* @__PURE__ */ m("p", {
-									className: "text-xs text-muted-foreground mt-4",
+									className: "text-xs text-text-secondary mt-4",
 									children: "Only .json files exported from BigConsole are supported"
 								})
 							]
@@ -104,7 +104,7 @@ var k = t(function({ isOpen: t, onClose: k, onSuccess: A }) {
 									/* @__PURE__ */ h("div", {
 										className: "flex items-center justify-between",
 										children: [/* @__PURE__ */ m("span", {
-											className: "text-sm text-muted-foreground",
+											className: "text-sm text-text-secondary",
 											children: "Name"
 										}), /* @__PURE__ */ m("span", {
 											className: "text-sm font-medium",
@@ -114,7 +114,7 @@ var k = t(function({ isOpen: t, onClose: k, onSuccess: A }) {
 									/* @__PURE__ */ h("div", {
 										className: "flex items-center justify-between",
 										children: [/* @__PURE__ */ m("span", {
-											className: "text-sm text-muted-foreground",
+											className: "text-sm text-text-secondary",
 											children: "Key"
 										}), /* @__PURE__ */ m("span", {
 											className: "text-xs font-mono",
@@ -124,7 +124,7 @@ var k = t(function({ isOpen: t, onClose: k, onSuccess: A }) {
 									/* @__PURE__ */ h("div", {
 										className: "flex items-center justify-between",
 										children: [/* @__PURE__ */ m("span", {
-											className: "text-sm text-muted-foreground",
+											className: "text-sm text-text-secondary",
 											children: "Status"
 										}), /* @__PURE__ */ m(g, {
 											variant: "secondary",
@@ -134,7 +134,7 @@ var k = t(function({ isOpen: t, onClose: k, onSuccess: A }) {
 									/* @__PURE__ */ h("div", {
 										className: "flex items-center justify-between",
 										children: [/* @__PURE__ */ m("span", {
-											className: "text-sm text-muted-foreground",
+											className: "text-sm text-text-secondary",
 											children: "Setup State"
 										}), /* @__PURE__ */ m(g, {
 											variant: "outline",
@@ -144,33 +144,33 @@ var k = t(function({ isOpen: t, onClose: k, onSuccess: A }) {
 									U.dataSinkInfo.exportedFrom && /* @__PURE__ */ h("div", {
 										className: "flex items-center justify-between",
 										children: [/* @__PURE__ */ m("span", {
-											className: "text-sm text-muted-foreground",
+											className: "text-sm text-text-secondary",
 											children: "Source ID"
 										}), /* @__PURE__ */ m("span", {
-											className: "text-xs text-muted-foreground font-mono truncate max-w-[180px]",
+											className: "text-xs text-text-secondary font-mono truncate max-w-[180px]",
 											children: U.dataSinkInfo.exportedFrom
 										})]
 									}),
 									/* @__PURE__ */ h("div", {
 										className: "flex items-center justify-between",
 										children: [/* @__PURE__ */ m("span", {
-											className: "text-sm text-muted-foreground",
+											className: "text-sm text-text-secondary",
 											children: "Schema Version"
 										}), /* @__PURE__ */ m("span", {
-											className: "text-xs text-muted-foreground",
+											className: "text-xs text-text-secondary",
 											children: U.dataSinkInfo.schemaVersion
 										})]
 									})
 								]
 							}) }),
 							U.errors.length > 0 && /* @__PURE__ */ m(v, {
-								className: "border-destructive/50 bg-destructive/5",
+								className: "border-status-error-border/50 bg-status-error-bg/5",
 								children: /* @__PURE__ */ h(y, {
 									className: "p-3",
 									children: [/* @__PURE__ */ h("div", {
 										className: "flex items-center gap-2 mb-2",
-										children: [/* @__PURE__ */ m(f, { className: "size-4 text-destructive" }), /* @__PURE__ */ h("span", {
-											className: "text-sm font-medium text-destructive",
+										children: [/* @__PURE__ */ m(f, { className: "size-4 text-status-error-text" }), /* @__PURE__ */ h("span", {
+											className: "text-sm font-medium text-status-error-text",
 											children: [
 												"Errors (",
 												U.errors.length,
@@ -178,7 +178,7 @@ var k = t(function({ isOpen: t, onClose: k, onSuccess: A }) {
 											]
 										})]
 									}), /* @__PURE__ */ m("ul", {
-										className: "text-xs text-destructive space-y-1",
+										className: "text-xs text-status-error-text space-y-1",
 										children: U.errors.map((e, t) => /* @__PURE__ */ h("li", { children: [
 											/* @__PURE__ */ h("span", {
 												className: "font-mono",
@@ -269,7 +269,7 @@ var k = t(function({ isOpen: t, onClose: k, onSuccess: A }) {
 												disabled: j === "importing"
 											}),
 											/* @__PURE__ */ m("p", {
-												className: "text-xs text-muted-foreground",
+												className: "text-xs text-text-secondary",
 												children: "Use a unique key to avoid conflicts with existing DataSinks."
 											})
 										]
@@ -290,7 +290,7 @@ var k = t(function({ isOpen: t, onClose: k, onSuccess: A }) {
 										children: "DataSink Already Exists"
 									}),
 									/* @__PURE__ */ h("p", {
-										className: "text-sm text-muted-foreground mb-4",
+										className: "text-sm text-text-secondary mb-4",
 										children: [
 											"DataSink \"",
 											W.dataSink?.name || W.dataSink?.key,
@@ -308,7 +308,7 @@ var k = t(function({ isOpen: t, onClose: k, onSuccess: A }) {
 										children: "DataSink Updated!"
 									}),
 									/* @__PURE__ */ h("p", {
-										className: "text-sm text-muted-foreground mb-4",
+										className: "text-sm text-text-secondary mb-4",
 										children: [
 											"DataSink \"",
 											W.dataSink?.name || W.dataSink?.key,
@@ -326,7 +326,7 @@ var k = t(function({ isOpen: t, onClose: k, onSuccess: A }) {
 										children: "Import Successful!"
 									}),
 									/* @__PURE__ */ h("p", {
-										className: "text-sm text-muted-foreground mb-4",
+										className: "text-sm text-text-secondary mb-4",
 										children: [
 											"DataSink \"",
 											W.dataSink?.name || W.dataSink?.key,
@@ -337,21 +337,21 @@ var k = t(function({ isOpen: t, onClose: k, onSuccess: A }) {
 							]
 						}),
 						H && /* @__PURE__ */ m(v, {
-							className: "border-destructive/50 bg-destructive/5",
+							className: "border-status-error-border/50 bg-status-error-bg/5",
 							children: /* @__PURE__ */ m(y, {
 								className: "p-3",
 								children: /* @__PURE__ */ m("p", {
-									className: "text-sm text-destructive",
+									className: "text-sm text-status-error-text",
 									children: H.message
 								})
 							})
 						}),
 						W && !W.success && W.errorMessage && /* @__PURE__ */ m(v, {
-							className: "border-destructive/50 bg-destructive/5",
+							className: "border-status-error-border/50 bg-status-error-bg/5",
 							children: /* @__PURE__ */ m(y, {
 								className: "p-3",
 								children: /* @__PURE__ */ m("p", {
-									className: "text-sm text-destructive",
+									className: "text-sm text-status-error-text",
 									children: W.errorMessage
 								})
 							})
@@ -382,7 +382,7 @@ var k = t(function({ isOpen: t, onClose: k, onSuccess: A }) {
 								children: [/* @__PURE__ */ m(d, { className: "size-4" }), "Import DataSink"]
 							}),
 							j === "importing" && /* @__PURE__ */ h("div", {
-								className: "flex items-center gap-2 text-sm text-muted-foreground",
+								className: "flex items-center gap-2 text-sm text-text-secondary",
 								children: [/* @__PURE__ */ m(O, { className: "size-4" }), "Importing..."]
 							}),
 							j === "complete" && /* @__PURE__ */ m(_, {

package/dist/bigconsole/components/datasink/ImportDataSinkDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImportDataSinkDialog.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/ImportDataSinkDialog.tsx"],"sourcesContent":["/**\n * ImportDataSinkDialog Component\n *\n * Modal dialog for importing a DataSink from JSON file.\n * Supports both creating new DataSinks and updating existing ones.\n */\n\nimport { type FC, memo, useState, useCallback, useEffect, useRef } from 'react';\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '@burdenoff/fe-libs/ui';\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport { Input } from '@burdenoff/fe-libs/ui';\nimport { Label } from '@burdenoff/fe-libs/ui';\nimport { Spinner } from '@burdenoff/fe-libs/ui';\nimport { Card, CardContent } from '@burdenoff/fe-libs/ui';\nimport { Badge } from '@burdenoff/fe-libs/ui';\nimport { Upload, FileJson, Check, XCircle, ArrowLeft, RefreshCw, Info } from 'lucide-react';\nimport { useImportDataSink, type ImportDataSinkOptions } from '../../hooks';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface ImportDataSinkDialogProps {\n  isOpen: boolean;\n  onClose: () => void;\n  onSuccess?: (dataSinkId: string, dataSinkName: string | null, originalUpdated: boolean) => void;\n}\n\ntype ImportStep = 'select' | 'preview' | 'importing' | 'complete';\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const ImportDataSinkDialog: FC<ImportDataSinkDialogProps> = memo(function ImportDataSinkDialog({\n  isOpen,\n  onClose,\n  onSuccess,\n}) {\n  const [step, setStep] = useState<ImportStep>('select');\n  const [, setSelectedFile] = useState<File | null>(null);\n  const [fileContent, setFileContent] = useState<string | null>(null);\n  const [nameOverride, setNameOverride] = useState('');\n  const [keyOverride, setKeyOverride] = useState('');\n\n  const fileInputRef = useRef<HTMLInputElement>(null);\n\n  const {\n    loading,\n    error,\n    validationResult,\n    importResult,\n    validateImport,\n    importDataSink,\n    extractDataSinkId,\n    clearState,\n  } = useImportDataSink();\n\n  // Reset state when dialog opens\n  useEffect(() => {\n    if (isOpen) {\n      setStep('select');\n      setSelectedFile(null);\n      setFileContent(null);\n      setNameOverride('');\n      setKeyOverride('');\n      clearState();\n    }\n  }, [isOpen, clearState]);\n\n  // Handle file selection\n  const handleFileSelect = useCallback(\n    async (e: React.ChangeEvent<HTMLInputElement>) => {\n      const file = e.target.files?.[0];\n      if (!file) return;\n\n      if (!file.name.endsWith('.json')) {\n        alert('Please select a JSON file');\n        return;\n      }\n\n      setSelectedFile(file);\n\n      const reader = new FileReader();\n      reader.onload = async (event) => {\n        const content = event.target?.result as string;\n        setFileContent(content);\n\n        const result = validateImport(content);\n        if (result.isValid && result.dataSinkInfo) {\n          setStep('preview');\n          setNameOverride(result.dataSinkInfo.name || '');\n          setKeyOverride(result.dataSinkInfo.key || '');\n        } else {\n          setStep('preview');\n        }\n      };\n      reader.onerror = () => {\n        alert('Failed to read file');\n      };\n      reader.readAsText(file);\n    },\n    [validateImport]\n  );\n\n  // Handle file drop\n  const handleDrop = useCallback((e: React.DragEvent) => {\n    e.preventDefault();\n    const file = e.dataTransfer.files?.[0];\n    if (file) {\n      const dt = new DataTransfer();\n      dt.items.add(file);\n      if (fileInputRef.current) {\n        fileInputRef.current.files = dt.files;\n        fileInputRef.current.dispatchEvent(new Event('change', { bubbles: true }));\n      }\n    }\n  }, []);\n\n  // Handle import\n  const handleImport = useCallback(async () => {\n    if (!fileContent) return;\n\n    setStep('importing');\n\n    const options: ImportDataSinkOptions = {\n      name: nameOverride.trim() || undefined,\n      key: keyOverride.trim() || undefined,\n    };\n\n    const result = await importDataSink(fileContent, options);\n\n    if (result?.success && result.dataSink) {\n      setStep('complete');\n      onSuccess?.(result.dataSink.id, result.dataSink.name, result.originalUpdated ?? false);\n    } else {\n      setStep('preview');\n    }\n  }, [fileContent, nameOverride, keyOverride, importDataSink, onSuccess]);\n\n  const canClose = !loading && step !== 'importing';\n  const dataSinkId = fileContent ? extractDataSinkId(fileContent) : null;\n\n  return (\n    <Dialog open={isOpen} onOpenChange={(open) => !open && canClose && onClose()}>\n      <DialogContent className=\"sm:max-w-lg max-h-[85vh] flex flex-col\">\n        <DialogHeader>\n          <div className=\"flex items-center gap-3\">\n            <div className=\"flex size-10 items-center justify-center rounded-lg bg-primary/10\">\n              <Upload className=\"size-5 text-primary\" />\n            </div>\n            <DialogTitle>Import DataSink</DialogTitle>\n          </div>\n          <DialogDescription>Upload a DataSink export file to restore it into this workspace.</DialogDescription>\n        </DialogHeader>\n\n        <div className=\"flex-1 overflow-y-auto py-4 space-y-4\">\n          {/* Step 1: File Selection */}\n          {step === 'select' && (\n            <div\n              onDragOver={(e) => e.preventDefault()}\n              onDrop={handleDrop}\n              className=\"border-2 border-dashed rounded-lg p-8 text-center hover:border-primary transition-colors\"\n            >\n              <FileJson className=\"size-12 mx-auto text-muted-foreground mb-4\" />\n              <p className=\"text-sm mb-2\">Drag and drop a DataSink export file here</p>\n              <p className=\"text-xs text-muted-foreground mb-4\">or</p>\n              <input ref={fileInputRef} type=\"file\" accept=\".json\" onChange={handleFileSelect} className=\"hidden\" />\n              <Button onClick={() => fileInputRef.current?.click()} disabled={loading}>\n                Browse Files\n              </Button>\n              <p className=\"text-xs text-muted-foreground mt-4\">\n                Only .json files exported from BigConsole are supported\n              </p>\n            </div>\n          )}\n\n          {/* Step 2: Preview & Options */}\n          {(step === 'preview' || step === 'importing') && validationResult && (\n            <>\n              {/* DataSink Info */}\n              {validationResult.dataSinkInfo && (\n                <Card>\n                  <CardContent className=\"p-4 space-y-2\">\n                    <div className=\"flex items-center justify-between\">\n                      <span className=\"text-sm text-muted-foreground\">Name</span>\n                      <span className=\"text-sm font-medium\">{validationResult.dataSinkInfo.name || 'Unnamed'}</span>\n                    </div>\n                    <div className=\"flex items-center justify-between\">\n                      <span className=\"text-sm text-muted-foreground\">Key</span>\n                      <span className=\"text-xs font-mono\">{validationResult.dataSinkInfo.key}</span>\n                    </div>\n                    <div className=\"flex items-center justify-between\">\n                      <span className=\"text-sm text-muted-foreground\">Status</span>\n                      <Badge variant=\"secondary\">{validationResult.dataSinkInfo.status}</Badge>\n                    </div>\n                    <div className=\"flex items-center justify-between\">\n                      <span className=\"text-sm text-muted-foreground\">Setup State</span>\n                      <Badge variant=\"outline\">{validationResult.dataSinkInfo.setupState}</Badge>\n                    </div>\n                    {validationResult.dataSinkInfo.exportedFrom && (\n                      <div className=\"flex items-center justify-between\">\n                        <span className=\"text-sm text-muted-foreground\">Source ID</span>\n                        <span className=\"text-xs text-muted-foreground font-mono truncate max-w-[180px]\">\n                          {validationResult.dataSinkInfo.exportedFrom}\n                        </span>\n                      </div>\n                    )}\n                    <div className=\"flex items-center justify-between\">\n                      <span className=\"text-sm text-muted-foreground\">Schema Version</span>\n                      <span className=\"text-xs text-muted-foreground\">\n                        {validationResult.dataSinkInfo.schemaVersion}\n                      </span>\n                    </div>\n                  </CardContent>\n                </Card>\n              )}\n\n              {/* Validation Errors */}\n              {validationResult.errors.length > 0 && (\n                <Card className=\"border-destructive/50 bg-destructive/5\">\n                  <CardContent className=\"p-3\">\n                    <div className=\"flex items-center gap-2 mb-2\">\n                      <XCircle className=\"size-4 text-destructive\" />\n                      <span className=\"text-sm font-medium text-destructive\">\n                        Errors ({validationResult.errors.length})\n                      </span>\n                    </div>\n                    <ul className=\"text-xs text-destructive space-y-1\">\n                      {validationResult.errors.map((err, idx) => (\n                        <li key={idx}>\n                          <span className=\"font-mono\">[{err.code}]</span> {err.message}\n                        </li>\n                      ))}\n                    </ul>\n                  </CardContent>\n                </Card>\n              )}\n\n              {/* Import Options */}\n              {validationResult.isValid && (\n                <div className=\"space-y-4\">\n                  <p className=\"text-sm font-medium\">Import Options</p>\n\n                  {/* Import Info */}\n                  <Card className=\"border-blue-500/50 bg-blue-500/5\">\n                    <CardContent className=\"p-3\">\n                      <div className=\"flex items-start gap-2\">\n                        <Info className=\"size-4 text-blue-600 mt-0.5 shrink-0\" />\n                        <div className=\"text-xs text-blue-700 dark:text-blue-400\">\n                          {dataSinkId ? (\n                            <>\n                              <p className=\"font-medium mb-1\">Import will check for existing DataSink</p>\n                              <p>\n                                If the original DataSink (ID:{' '}\n                                <code className=\"font-mono bg-blue-200/50 px-1 rounded\">\n                                  {dataSinkId.slice(0, 8)}...\n                                </code>\n                                ) exists:\n                              </p>\n                              <ul className=\"list-disc list-inside mt-1 space-y-0.5\">\n                                <li>With changes → Update the existing DataSink</li>\n                                <li>No changes → Show &quot;already exists&quot; message</li>\n                              </ul>\n                              <p className=\"mt-1\">If original doesn&apos;t exist → Create a new DataSink</p>\n                            </>\n                          ) : (\n                            <>\n                              <p className=\"font-medium mb-1\">A new DataSink will be created</p>\n                              <p>Import as a new DataSink with the specified configuration.</p>\n                            </>\n                          )}\n                        </div>\n                      </div>\n                    </CardContent>\n                  </Card>\n\n                  <div className=\"space-y-2\">\n                    <Label htmlFor=\"import-name\">DataSink Name</Label>\n                    <Input\n                      id=\"import-name\"\n                      type=\"text\"\n                      value={nameOverride}\n                      onChange={(e) => setNameOverride(e.target.value)}\n                      placeholder={validationResult.dataSinkInfo?.name || 'DataSink name'}\n                      disabled={step === 'importing'}\n                    />\n                  </div>\n\n                  <div className=\"space-y-2\">\n                    <Label htmlFor=\"import-key\">DataSink Key</Label>\n                    <Input\n                      id=\"import-key\"\n                      type=\"text\"\n                      value={keyOverride}\n                      onChange={(e) => setKeyOverride(e.target.value)}\n                      placeholder={validationResult.dataSinkInfo?.key || 'datasink-key'}\n                      disabled={step === 'importing'}\n                    />\n                    <p className=\"text-xs text-muted-foreground\">\n                      Use a unique key to avoid conflicts with existing DataSinks.\n                    </p>\n                  </div>\n                </div>\n              )}\n            </>\n          )}\n\n          {/* Step 3: Complete */}\n          {step === 'complete' && importResult?.success && (\n            <div className=\"text-center py-6\">\n              {/* Already Exists - No Changes */}\n              {importResult.alreadyExists && (\n                <>\n                  <div className=\"size-16 mx-auto mb-4 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center\">\n                    <Info className=\"size-8 text-blue-600\" />\n                  </div>\n                  <h3 className=\"text-lg font-medium mb-2\">DataSink Already Exists</h3>\n                  <p className=\"text-sm text-muted-foreground mb-4\">\n                    DataSink &quot;{importResult.dataSink?.name || importResult.dataSink?.key}&quot; already exists with\n                    the same data. No changes were made.\n                  </p>\n                </>\n              )}\n\n              {/* Updated Existing */}\n              {importResult.originalUpdated && !importResult.alreadyExists && (\n                <>\n                  <div className=\"size-16 mx-auto mb-4 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center\">\n                    <RefreshCw className=\"size-8 text-green-600\" />\n                  </div>\n                  <h3 className=\"text-lg font-medium mb-2\">DataSink Updated!</h3>\n                  <p className=\"text-sm text-muted-foreground mb-4\">\n                    DataSink &quot;{importResult.dataSink?.name || importResult.dataSink?.key}&quot; has been updated\n                    with the imported data.\n                  </p>\n                </>\n              )}\n\n              {/* Created New */}\n              {!importResult.originalUpdated && !importResult.alreadyExists && (\n                <>\n                  <div className=\"size-16 mx-auto mb-4 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center\">\n                    <Check className=\"size-8 text-green-600\" />\n                  </div>\n                  <h3 className=\"text-lg font-medium mb-2\">Import Successful!</h3>\n                  <p className=\"text-sm text-muted-foreground mb-4\">\n                    DataSink &quot;{importResult.dataSink?.name || importResult.dataSink?.key}&quot; has been created.\n                  </p>\n                </>\n              )}\n            </div>\n          )}\n\n          {/* Error */}\n          {error && (\n            <Card className=\"border-destructive/50 bg-destructive/5\">\n              <CardContent className=\"p-3\">\n                <p className=\"text-sm text-destructive\">{error.message}</p>\n              </CardContent>\n            </Card>\n          )}\n\n          {importResult && !importResult.success && importResult.errorMessage && (\n            <Card className=\"border-destructive/50 bg-destructive/5\">\n              <CardContent className=\"p-3\">\n                <p className=\"text-sm text-destructive\">{importResult.errorMessage}</p>\n              </CardContent>\n            </Card>\n          )}\n        </div>\n\n        <DialogFooter className=\"flex-row justify-between sm:justify-between\">\n          <div>\n            {step === 'preview' && (\n              <Button\n                variant=\"ghost\"\n                onClick={() => {\n                  setStep('select');\n                  setSelectedFile(null);\n                  setFileContent(null);\n                  clearState();\n                }}\n                disabled={loading}\n              >\n                <ArrowLeft className=\"size-4\" />\n                Back\n              </Button>\n            )}\n          </div>\n\n          <div className=\"flex items-center gap-2\">\n            {step !== 'complete' && (\n              <Button variant=\"outline\" onClick={onClose} disabled={!canClose}>\n                Cancel\n              </Button>\n            )}\n\n            {step === 'preview' && validationResult?.isValid && (\n              <Button onClick={handleImport} disabled={loading}>\n                <Upload className=\"size-4\" />\n                Import DataSink\n              </Button>\n            )}\n\n            {step === 'importing' && (\n              <div className=\"flex items-center gap-2 text-sm text-muted-foreground\">\n                <Spinner className=\"size-4\" />\n                Importing...\n              </div>\n            )}\n\n            {step === 'complete' && <Button onClick={onClose}>Done</Button>}\n          </div>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n});\n\nexport default ImportDataSinkDialog;\n"],"mappings":"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"}
+{"version":3,"file":"ImportDataSinkDialog.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/ImportDataSinkDialog.tsx"],"sourcesContent":["/**\n * ImportDataSinkDialog Component\n *\n * Modal dialog for importing a DataSink from JSON file.\n * Supports both creating new DataSinks and updating existing ones.\n */\n\nimport { type FC, memo, useState, useCallback, useEffect, useRef } from 'react';\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '@burdenoff/fe-libs/ui';\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport { Input } from '@burdenoff/fe-libs/ui';\nimport { Label } from '@burdenoff/fe-libs/ui';\nimport { Spinner } from '@burdenoff/fe-libs/ui';\nimport { Card, CardContent } from '@burdenoff/fe-libs/ui';\nimport { Badge } from '@burdenoff/fe-libs/ui';\nimport { Upload, FileJson, Check, XCircle, ArrowLeft, RefreshCw, Info } from 'lucide-react';\nimport { useImportDataSink, type ImportDataSinkOptions } from '../../hooks';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface ImportDataSinkDialogProps {\n  isOpen: boolean;\n  onClose: () => void;\n  onSuccess?: (dataSinkId: string, dataSinkName: string | null, originalUpdated: boolean) => void;\n}\n\ntype ImportStep = 'select' | 'preview' | 'importing' | 'complete';\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const ImportDataSinkDialog: FC<ImportDataSinkDialogProps> = memo(function ImportDataSinkDialog({\n  isOpen,\n  onClose,\n  onSuccess,\n}) {\n  const [step, setStep] = useState<ImportStep>('select');\n  const [, setSelectedFile] = useState<File | null>(null);\n  const [fileContent, setFileContent] = useState<string | null>(null);\n  const [nameOverride, setNameOverride] = useState('');\n  const [keyOverride, setKeyOverride] = useState('');\n\n  const fileInputRef = useRef<HTMLInputElement>(null);\n\n  const {\n    loading,\n    error,\n    validationResult,\n    importResult,\n    validateImport,\n    importDataSink,\n    extractDataSinkId,\n    clearState,\n  } = useImportDataSink();\n\n  // Reset state when dialog opens\n  useEffect(() => {\n    if (isOpen) {\n      setStep('select');\n      setSelectedFile(null);\n      setFileContent(null);\n      setNameOverride('');\n      setKeyOverride('');\n      clearState();\n    }\n  }, [isOpen, clearState]);\n\n  // Handle file selection\n  const handleFileSelect = useCallback(\n    async (e: React.ChangeEvent<HTMLInputElement>) => {\n      const file = e.target.files?.[0];\n      if (!file) return;\n\n      if (!file.name.endsWith('.json')) {\n        alert('Please select a JSON file');\n        return;\n      }\n\n      setSelectedFile(file);\n\n      const reader = new FileReader();\n      reader.onload = async (event) => {\n        const content = event.target?.result as string;\n        setFileContent(content);\n\n        const result = validateImport(content);\n        if (result.isValid && result.dataSinkInfo) {\n          setStep('preview');\n          setNameOverride(result.dataSinkInfo.name || '');\n          setKeyOverride(result.dataSinkInfo.key || '');\n        } else {\n          setStep('preview');\n        }\n      };\n      reader.onerror = () => {\n        alert('Failed to read file');\n      };\n      reader.readAsText(file);\n    },\n    [validateImport]\n  );\n\n  // Handle file drop\n  const handleDrop = useCallback((e: React.DragEvent) => {\n    e.preventDefault();\n    const file = e.dataTransfer.files?.[0];\n    if (file) {\n      const dt = new DataTransfer();\n      dt.items.add(file);\n      if (fileInputRef.current) {\n        fileInputRef.current.files = dt.files;\n        fileInputRef.current.dispatchEvent(new Event('change', { bubbles: true }));\n      }\n    }\n  }, []);\n\n  // Handle import\n  const handleImport = useCallback(async () => {\n    if (!fileContent) return;\n\n    setStep('importing');\n\n    const options: ImportDataSinkOptions = {\n      name: nameOverride.trim() || undefined,\n      key: keyOverride.trim() || undefined,\n    };\n\n    const result = await importDataSink(fileContent, options);\n\n    if (result?.success && result.dataSink) {\n      setStep('complete');\n      onSuccess?.(result.dataSink.id, result.dataSink.name, result.originalUpdated ?? false);\n    } else {\n      setStep('preview');\n    }\n  }, [fileContent, nameOverride, keyOverride, importDataSink, onSuccess]);\n\n  const canClose = !loading && step !== 'importing';\n  const dataSinkId = fileContent ? extractDataSinkId(fileContent) : null;\n\n  return (\n    <Dialog open={isOpen} onOpenChange={(open) => !open && canClose && onClose()}>\n      <DialogContent className=\"sm:max-w-lg max-h-[85vh] flex flex-col\">\n        <DialogHeader>\n          <div className=\"flex items-center gap-3\">\n            <div className=\"flex size-10 items-center justify-center rounded-lg bg-action-primary-bg/10\">\n              <Upload className=\"size-5 text-primary\" />\n            </div>\n            <DialogTitle>Import DataSink</DialogTitle>\n          </div>\n          <DialogDescription>Upload a DataSink export file to restore it into this workspace.</DialogDescription>\n        </DialogHeader>\n\n        <div className=\"flex-1 overflow-y-auto py-4 space-y-4\">\n          {/* Step 1: File Selection */}\n          {step === 'select' && (\n            <div\n              onDragOver={(e) => e.preventDefault()}\n              onDrop={handleDrop}\n              className=\"border-2 border-dashed rounded-lg p-8 text-center hover:border-primary transition-colors\"\n            >\n              <FileJson className=\"size-12 mx-auto text-text-secondary mb-4\" />\n              <p className=\"text-sm mb-2\">Drag and drop a DataSink export file here</p>\n              <p className=\"text-xs text-text-secondary mb-4\">or</p>\n              <input ref={fileInputRef} type=\"file\" accept=\".json\" onChange={handleFileSelect} className=\"hidden\" />\n              <Button onClick={() => fileInputRef.current?.click()} disabled={loading}>\n                Browse Files\n              </Button>\n              <p className=\"text-xs text-text-secondary mt-4\">\n                Only .json files exported from BigConsole are supported\n              </p>\n            </div>\n          )}\n\n          {/* Step 2: Preview & Options */}\n          {(step === 'preview' || step === 'importing') && validationResult && (\n            <>\n              {/* DataSink Info */}\n              {validationResult.dataSinkInfo && (\n                <Card>\n                  <CardContent className=\"p-4 space-y-2\">\n                    <div className=\"flex items-center justify-between\">\n                      <span className=\"text-sm text-text-secondary\">Name</span>\n                      <span className=\"text-sm font-medium\">{validationResult.dataSinkInfo.name || 'Unnamed'}</span>\n                    </div>\n                    <div className=\"flex items-center justify-between\">\n                      <span className=\"text-sm text-text-secondary\">Key</span>\n                      <span className=\"text-xs font-mono\">{validationResult.dataSinkInfo.key}</span>\n                    </div>\n                    <div className=\"flex items-center justify-between\">\n                      <span className=\"text-sm text-text-secondary\">Status</span>\n                      <Badge variant=\"secondary\">{validationResult.dataSinkInfo.status}</Badge>\n                    </div>\n                    <div className=\"flex items-center justify-between\">\n                      <span className=\"text-sm text-text-secondary\">Setup State</span>\n                      <Badge variant=\"outline\">{validationResult.dataSinkInfo.setupState}</Badge>\n                    </div>\n                    {validationResult.dataSinkInfo.exportedFrom && (\n                      <div className=\"flex items-center justify-between\">\n                        <span className=\"text-sm text-text-secondary\">Source ID</span>\n                        <span className=\"text-xs text-text-secondary font-mono truncate max-w-[180px]\">\n                          {validationResult.dataSinkInfo.exportedFrom}\n                        </span>\n                      </div>\n                    )}\n                    <div className=\"flex items-center justify-between\">\n                      <span className=\"text-sm text-text-secondary\">Schema Version</span>\n                      <span className=\"text-xs text-text-secondary\">\n                        {validationResult.dataSinkInfo.schemaVersion}\n                      </span>\n                    </div>\n                  </CardContent>\n                </Card>\n              )}\n\n              {/* Validation Errors */}\n              {validationResult.errors.length > 0 && (\n                <Card className=\"border-status-error-border/50 bg-status-error-bg/5\">\n                  <CardContent className=\"p-3\">\n                    <div className=\"flex items-center gap-2 mb-2\">\n                      <XCircle className=\"size-4 text-status-error-text\" />\n                      <span className=\"text-sm font-medium text-status-error-text\">\n                        Errors ({validationResult.errors.length})\n                      </span>\n                    </div>\n                    <ul className=\"text-xs text-status-error-text space-y-1\">\n                      {validationResult.errors.map((err, idx) => (\n                        <li key={idx}>\n                          <span className=\"font-mono\">[{err.code}]</span> {err.message}\n                        </li>\n                      ))}\n                    </ul>\n                  </CardContent>\n                </Card>\n              )}\n\n              {/* Import Options */}\n              {validationResult.isValid && (\n                <div className=\"space-y-4\">\n                  <p className=\"text-sm font-medium\">Import Options</p>\n\n                  {/* Import Info */}\n                  <Card className=\"border-blue-500/50 bg-blue-500/5\">\n                    <CardContent className=\"p-3\">\n                      <div className=\"flex items-start gap-2\">\n                        <Info className=\"size-4 text-blue-600 mt-0.5 shrink-0\" />\n                        <div className=\"text-xs text-blue-700 dark:text-blue-400\">\n                          {dataSinkId ? (\n                            <>\n                              <p className=\"font-medium mb-1\">Import will check for existing DataSink</p>\n                              <p>\n                                If the original DataSink (ID:{' '}\n                                <code className=\"font-mono bg-blue-200/50 px-1 rounded\">\n                                  {dataSinkId.slice(0, 8)}...\n                                </code>\n                                ) exists:\n                              </p>\n                              <ul className=\"list-disc list-inside mt-1 space-y-0.5\">\n                                <li>With changes → Update the existing DataSink</li>\n                                <li>No changes → Show &quot;already exists&quot; message</li>\n                              </ul>\n                              <p className=\"mt-1\">If original doesn&apos;t exist → Create a new DataSink</p>\n                            </>\n                          ) : (\n                            <>\n                              <p className=\"font-medium mb-1\">A new DataSink will be created</p>\n                              <p>Import as a new DataSink with the specified configuration.</p>\n                            </>\n                          )}\n                        </div>\n                      </div>\n                    </CardContent>\n                  </Card>\n\n                  <div className=\"space-y-2\">\n                    <Label htmlFor=\"import-name\">DataSink Name</Label>\n                    <Input\n                      id=\"import-name\"\n                      type=\"text\"\n                      value={nameOverride}\n                      onChange={(e) => setNameOverride(e.target.value)}\n                      placeholder={validationResult.dataSinkInfo?.name || 'DataSink name'}\n                      disabled={step === 'importing'}\n                    />\n                  </div>\n\n                  <div className=\"space-y-2\">\n                    <Label htmlFor=\"import-key\">DataSink Key</Label>\n                    <Input\n                      id=\"import-key\"\n                      type=\"text\"\n                      value={keyOverride}\n                      onChange={(e) => setKeyOverride(e.target.value)}\n                      placeholder={validationResult.dataSinkInfo?.key || 'datasink-key'}\n                      disabled={step === 'importing'}\n                    />\n                    <p className=\"text-xs text-text-secondary\">\n                      Use a unique key to avoid conflicts with existing DataSinks.\n                    </p>\n                  </div>\n                </div>\n              )}\n            </>\n          )}\n\n          {/* Step 3: Complete */}\n          {step === 'complete' && importResult?.success && (\n            <div className=\"text-center py-6\">\n              {/* Already Exists - No Changes */}\n              {importResult.alreadyExists && (\n                <>\n                  <div className=\"size-16 mx-auto mb-4 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center\">\n                    <Info className=\"size-8 text-blue-600\" />\n                  </div>\n                  <h3 className=\"text-lg font-medium mb-2\">DataSink Already Exists</h3>\n                  <p className=\"text-sm text-text-secondary mb-4\">\n                    DataSink &quot;{importResult.dataSink?.name || importResult.dataSink?.key}&quot; already exists with\n                    the same data. No changes were made.\n                  </p>\n                </>\n              )}\n\n              {/* Updated Existing */}\n              {importResult.originalUpdated && !importResult.alreadyExists && (\n                <>\n                  <div className=\"size-16 mx-auto mb-4 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center\">\n                    <RefreshCw className=\"size-8 text-green-600\" />\n                  </div>\n                  <h3 className=\"text-lg font-medium mb-2\">DataSink Updated!</h3>\n                  <p className=\"text-sm text-text-secondary mb-4\">\n                    DataSink &quot;{importResult.dataSink?.name || importResult.dataSink?.key}&quot; has been updated\n                    with the imported data.\n                  </p>\n                </>\n              )}\n\n              {/* Created New */}\n              {!importResult.originalUpdated && !importResult.alreadyExists && (\n                <>\n                  <div className=\"size-16 mx-auto mb-4 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center\">\n                    <Check className=\"size-8 text-green-600\" />\n                  </div>\n                  <h3 className=\"text-lg font-medium mb-2\">Import Successful!</h3>\n                  <p className=\"text-sm text-text-secondary mb-4\">\n                    DataSink &quot;{importResult.dataSink?.name || importResult.dataSink?.key}&quot; has been created.\n                  </p>\n                </>\n              )}\n            </div>\n          )}\n\n          {/* Error */}\n          {error && (\n            <Card className=\"border-status-error-border/50 bg-status-error-bg/5\">\n              <CardContent className=\"p-3\">\n                <p className=\"text-sm text-status-error-text\">{error.message}</p>\n              </CardContent>\n            </Card>\n          )}\n\n          {importResult && !importResult.success && importResult.errorMessage && (\n            <Card className=\"border-status-error-border/50 bg-status-error-bg/5\">\n              <CardContent className=\"p-3\">\n                <p className=\"text-sm text-status-error-text\">{importResult.errorMessage}</p>\n              </CardContent>\n            </Card>\n          )}\n        </div>\n\n        <DialogFooter className=\"flex-row justify-between sm:justify-between\">\n          <div>\n            {step === 'preview' && (\n              <Button\n                variant=\"ghost\"\n                onClick={() => {\n                  setStep('select');\n                  setSelectedFile(null);\n                  setFileContent(null);\n                  clearState();\n                }}\n                disabled={loading}\n              >\n                <ArrowLeft className=\"size-4\" />\n                Back\n              </Button>\n            )}\n          </div>\n\n          <div className=\"flex items-center gap-2\">\n            {step !== 'complete' && (\n              <Button variant=\"outline\" onClick={onClose} disabled={!canClose}>\n                Cancel\n              </Button>\n            )}\n\n            {step === 'preview' && validationResult?.isValid && (\n              <Button onClick={handleImport} disabled={loading}>\n                <Upload className=\"size-4\" />\n                Import DataSink\n              </Button>\n            )}\n\n            {step === 'importing' && (\n              <div className=\"flex items-center gap-2 text-sm text-text-secondary\">\n                <Spinner className=\"size-4\" />\n                Importing...\n              </div>\n            )}\n\n            {step === 'complete' && <Button onClick={onClose}>Done</Button>}\n          </div>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n});\n\nexport default ImportDataSinkDialog;\n"],"mappings":"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"}

package/dist/bigconsole/components/datasink/LinkedParsersPanel.js

@@ -101,7 +101,7 @@ var l = ({ className: e }) => /* @__PURE__ */ s("svg", {
 			children: y.map((e) => /* @__PURE__ */ c("button", {
 				type: "button",
 				onClick: () => b(e.id),
-				className: "w-full flex items-center justify-between px-3 py-2 bg-bg-muted rounded-md hover:bg-border-default transition-colors group",
+				className: "w-full flex items-center justify-between px-3 py-2 bg-bg-sunken rounded-md hover:bg-border-default transition-colors group",
 				children: [/* @__PURE__ */ c("div", {
 					className: "flex items-center gap-3",
 					children: [/* @__PURE__ */ s(l, { className: "w-4 h-4 text-text-secondary" }), /* @__PURE__ */ c("div", {

package/dist/bigconsole/components/datasink/LinkedParsersPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkedParsersPanel.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/LinkedParsersPanel.tsx"],"sourcesContent":["/**\n * LinkedParsersPanel Component\n *\n * Shows parsers that use this DataSink as their source.\n * Provides navigation to parser view pages.\n */\n\nimport { memo, useMemo, useCallback, useEffect } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { useAppNavigate } from '../../contexts';\nimport { useParserOperations } from '../../hooks/useParserOperations';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface LinkedParsersPanelProps {\n  dataSinkKey?: string;\n}\n\n// ============================================================================\n// ICONS\n// ============================================================================\n\nconst CodeIcon = ({ 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=\"M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4\" />\n  </svg>\n);\n\nconst ArrowRightIcon = ({ className }: { className?: string }) => (\n  <svg className={className} 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);\n\n// ============================================================================\n// PARSER TYPE BADGE\n// ============================================================================\n\nconst ParserTypeBadge = ({ type }: { type: string }) => {\n  const config: Record<string, { label: string; className: string }> = {\n    jq: { label: 'JQ', className: 'bg-purple-100 text-purple-700' },\n    jsonata: { label: 'JSONata', className: 'bg-blue-100 text-blue-700' },\n  };\n\n  const { label, className } = config[type] || {\n    label: type.toUpperCase(),\n    className: 'bg-gray-100 text-gray-700',\n  };\n\n  return <span className={`px-1.5 py-0.5 text-[10px] font-medium rounded ${className}`}>{label}</span>;\n};\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nconst DEFAULT_CONSOLE_ID = 'default';\n\nexport const LinkedParsersPanel = memo(function LinkedParsersPanel({ dataSinkKey }: LinkedParsersPanelProps) {\n  const navigate = useAppNavigate();\n  const { consoleId: urlConsoleId } = useParams<{ consoleId?: string }>();\n  const consoleId = urlConsoleId || DEFAULT_CONSOLE_ID;\n\n  // Operations\n  const { parsers, loading: isLoading, fetchParsers } = useParserOperations({ consoleId, skipFetch: true });\n\n  // Fetch parsers when dataSinkKey is available (consoleId is optional)\n  useEffect(() => {\n    if (dataSinkKey) {\n      fetchParsers();\n    }\n  }, [dataSinkKey, fetchParsers]);\n\n  // Filter parsers that use this dataSink as input - using useMemo to avoid setState in effect\n  const linkedParsers = useMemo(() => {\n    if (!dataSinkKey) return [];\n    return parsers.filter((p) => p.inputSinkKey === dataSinkKey);\n  }, [parsers, dataSinkKey]);\n\n  // Handle view parser — navigate to the parser detail page\n  const handleViewParser = useCallback(\n    (parserId: string) => {\n      if (consoleId) {\n        navigate(`/dashboards/${consoleId}/parsers/${parserId}`);\n      } else {\n        navigate(`/parsers/${parserId}`);\n      }\n    },\n    [navigate, consoleId]\n  );\n\n  // Don't render if no dataSinkKey provided\n  if (!dataSinkKey) {\n    return null;\n  }\n\n  return (\n    <div className=\"border border-border-default rounded-lg bg-bg-surface p-4 space-y-4\">\n      <div className=\"flex items-center justify-between\">\n        <div className=\"flex items-center gap-2\">\n          <CodeIcon className=\"w-4 h-4 text-text-secondary\" />\n          <h2 className=\"text-sm font-semibold text-text-primary\">Parsers Using This DataSink</h2>\n        </div>\n        <span className=\"text-xs text-text-tertiary\">\n          {linkedParsers.length} parser{linkedParsers.length !== 1 ? 's' : ''}\n        </span>\n      </div>\n\n      {isLoading ? (\n        <div className=\"flex items-center justify-center py-4\">\n          <svg className=\"w-5 h-5 text-text-secondary animate-spin\" fill=\"none\" viewBox=\"0 0 24 24\">\n            <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\n            <path\n              className=\"opacity-75\"\n              fill=\"currentColor\"\n              d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n            />\n          </svg>\n        </div>\n      ) : linkedParsers.length === 0 ? (\n        <p className=\"text-sm text-text-tertiary py-2\">No parsers are using this DataSink as their source.</p>\n      ) : (\n        <div className=\"space-y-2\">\n          {linkedParsers.map((parser) => (\n            <button\n              key={parser.id}\n              type=\"button\"\n              onClick={() => handleViewParser(parser.id)}\n              className=\"w-full flex items-center justify-between px-3 py-2 bg-bg-muted rounded-md hover:bg-border-default transition-colors group\"\n            >\n              <div className=\"flex items-center gap-3\">\n                <CodeIcon className=\"w-4 h-4 text-text-secondary\" />\n                <div className=\"text-left\">\n                  <p className=\"text-sm font-medium text-text-primary\">{parser.name}</p>\n                  <p className=\"text-xs text-text-tertiary font-mono\">{parser.outputKey}</p>\n                </div>\n              </div>\n              <div className=\"flex items-center gap-2\">\n                <ParserTypeBadge type={parser.type} />\n                <ArrowRightIcon className=\"w-4 h-4 text-text-tertiary group-hover:text-text-primary transition-colors\" />\n              </div>\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default LinkedParsersPanel;\n"],"mappings":"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"}
+{"version":3,"file":"LinkedParsersPanel.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/LinkedParsersPanel.tsx"],"sourcesContent":["/**\n * LinkedParsersPanel Component\n *\n * Shows parsers that use this DataSink as their source.\n * Provides navigation to parser view pages.\n */\n\nimport { memo, useMemo, useCallback, useEffect } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { useAppNavigate } from '../../contexts';\nimport { useParserOperations } from '../../hooks/useParserOperations';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface LinkedParsersPanelProps {\n  dataSinkKey?: string;\n}\n\n// ============================================================================\n// ICONS\n// ============================================================================\n\nconst CodeIcon = ({ 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=\"M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4\" />\n  </svg>\n);\n\nconst ArrowRightIcon = ({ className }: { className?: string }) => (\n  <svg className={className} 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);\n\n// ============================================================================\n// PARSER TYPE BADGE\n// ============================================================================\n\nconst ParserTypeBadge = ({ type }: { type: string }) => {\n  const config: Record<string, { label: string; className: string }> = {\n    jq: { label: 'JQ', className: 'bg-purple-100 text-purple-700' },\n    jsonata: { label: 'JSONata', className: 'bg-blue-100 text-blue-700' },\n  };\n\n  const { label, className } = config[type] || {\n    label: type.toUpperCase(),\n    className: 'bg-gray-100 text-gray-700',\n  };\n\n  return <span className={`px-1.5 py-0.5 text-[10px] font-medium rounded ${className}`}>{label}</span>;\n};\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nconst DEFAULT_CONSOLE_ID = 'default';\n\nexport const LinkedParsersPanel = memo(function LinkedParsersPanel({ dataSinkKey }: LinkedParsersPanelProps) {\n  const navigate = useAppNavigate();\n  const { consoleId: urlConsoleId } = useParams<{ consoleId?: string }>();\n  const consoleId = urlConsoleId || DEFAULT_CONSOLE_ID;\n\n  // Operations\n  const { parsers, loading: isLoading, fetchParsers } = useParserOperations({ consoleId, skipFetch: true });\n\n  // Fetch parsers when dataSinkKey is available (consoleId is optional)\n  useEffect(() => {\n    if (dataSinkKey) {\n      fetchParsers();\n    }\n  }, [dataSinkKey, fetchParsers]);\n\n  // Filter parsers that use this dataSink as input - using useMemo to avoid setState in effect\n  const linkedParsers = useMemo(() => {\n    if (!dataSinkKey) return [];\n    return parsers.filter((p) => p.inputSinkKey === dataSinkKey);\n  }, [parsers, dataSinkKey]);\n\n  // Handle view parser — navigate to the parser detail page\n  const handleViewParser = useCallback(\n    (parserId: string) => {\n      if (consoleId) {\n        navigate(`/dashboards/${consoleId}/parsers/${parserId}`);\n      } else {\n        navigate(`/parsers/${parserId}`);\n      }\n    },\n    [navigate, consoleId]\n  );\n\n  // Don't render if no dataSinkKey provided\n  if (!dataSinkKey) {\n    return null;\n  }\n\n  return (\n    <div className=\"border border-border-default rounded-lg bg-bg-surface p-4 space-y-4\">\n      <div className=\"flex items-center justify-between\">\n        <div className=\"flex items-center gap-2\">\n          <CodeIcon className=\"w-4 h-4 text-text-secondary\" />\n          <h2 className=\"text-sm font-semibold text-text-primary\">Parsers Using This DataSink</h2>\n        </div>\n        <span className=\"text-xs text-text-tertiary\">\n          {linkedParsers.length} parser{linkedParsers.length !== 1 ? 's' : ''}\n        </span>\n      </div>\n\n      {isLoading ? (\n        <div className=\"flex items-center justify-center py-4\">\n          <svg className=\"w-5 h-5 text-text-secondary animate-spin\" fill=\"none\" viewBox=\"0 0 24 24\">\n            <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\n            <path\n              className=\"opacity-75\"\n              fill=\"currentColor\"\n              d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n            />\n          </svg>\n        </div>\n      ) : linkedParsers.length === 0 ? (\n        <p className=\"text-sm text-text-tertiary py-2\">No parsers are using this DataSink as their source.</p>\n      ) : (\n        <div className=\"space-y-2\">\n          {linkedParsers.map((parser) => (\n            <button\n              key={parser.id}\n              type=\"button\"\n              onClick={() => handleViewParser(parser.id)}\n              className=\"w-full flex items-center justify-between px-3 py-2 bg-bg-sunken rounded-md hover:bg-border-default transition-colors group\"\n            >\n              <div className=\"flex items-center gap-3\">\n                <CodeIcon className=\"w-4 h-4 text-text-secondary\" />\n                <div className=\"text-left\">\n                  <p className=\"text-sm font-medium text-text-primary\">{parser.name}</p>\n                  <p className=\"text-xs text-text-tertiary font-mono\">{parser.outputKey}</p>\n                </div>\n              </div>\n              <div className=\"flex items-center gap-2\">\n                <ParserTypeBadge type={parser.type} />\n                <ArrowRightIcon className=\"w-4 h-4 text-text-tertiary group-hover:text-text-primary transition-colors\" />\n              </div>\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default LinkedParsersPanel;\n"],"mappings":"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"}

package/dist/bigconsole/components/datasink/LinkedWorkflowsPanel.js

@@ -76,7 +76,7 @@ var s = ({ className: e }) => /* @__PURE__ */ r("svg", {
 	return /* @__PURE__ */ i("div", {
 		className: "border border-border-default rounded-lg bg-bg-surface overflow-hidden",
 		children: [/* @__PURE__ */ i("div", {
-			className: "px-4 py-3 border-b border-border-default bg-bg-muted flex items-center justify-between",
+			className: "px-4 py-3 border-b border-border-default bg-bg-sunken flex items-center justify-between",
 			children: [/* @__PURE__ */ i("div", {
 				className: "flex items-center gap-2",
 				children: [/* @__PURE__ */ r(c, { className: "w-4 h-4 text-text-secondary" }), /* @__PURE__ */ r("h3", {
@@ -137,7 +137,7 @@ var s = ({ className: e }) => /* @__PURE__ */ r("svg", {
 					let n = o(t.workflow.status);
 					return /* @__PURE__ */ i(e, {
 						to: `/workflows/${t.workflow.id}`,
-						className: "\n                    flex items-center justify-between\n                    p-3\n                    bg-bg-muted\n                    rounded-md\n                    hover:bg-border-default\n                    transition-colors\n                    group\n                  ",
+						className: "\n                    flex items-center justify-between\n                    p-3\n                    bg-bg-sunken\n                    rounded-md\n                    hover:bg-border-default\n                    transition-colors\n                    group\n                  ",
 						children: [/* @__PURE__ */ i("div", {
 							className: "flex items-center gap-3 min-w-0",
 							children: [/* @__PURE__ */ r(s, { className: "w-5 h-5 text-text-secondary flex-shrink-0" }), /* @__PURE__ */ i("div", {
@@ -176,7 +176,7 @@ var s = ({ className: e }) => /* @__PURE__ */ r("svg", {
 					})
 				}), f.map((t) => t.workflow ? /* @__PURE__ */ i(e, {
 					to: `/workflows/${t.workflow.id}`,
-					className: "\n                        flex items-center justify-between\n                        p-3\n                        bg-bg-muted/50\n                        rounded-md\n                        hover:bg-bg-muted\n                        transition-colors\n                        opacity-60\n                        group\n                      ",
+					className: "\n                        flex items-center justify-between\n                        p-3\n                        bg-bg-sunken/50\n                        rounded-md\n                        hover:bg-bg-sunken\n                        transition-colors\n                        opacity-60\n                        group\n                      ",
 					children: [/* @__PURE__ */ i("div", {
 						className: "flex items-center gap-3 min-w-0",
 						children: [/* @__PURE__ */ r(s, { className: "w-5 h-5 text-text-tertiary flex-shrink-0" }), /* @__PURE__ */ i("div", {