npm - @burdenoff/microfe-bigconsole - Versions diffs - 2026.728.1 → 2026.729.2 - Mend

@burdenoff/microfe-bigconsole 2026.728.1 → 2026.729.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (111) hide show

package/dist/bigconsole/components/DrilldownDashboardRenderer.js CHANGED Viewed

@@ -99,7 +99,7 @@ var d = i(function({ dashboardId: n, params: r }) {
 		children: /* @__PURE__ */ l("div", {
 			className: "flex flex-col items-center gap-3 text-center max-w-md",
 			children: [/* @__PURE__ */ c("svg", {
-				className: "w-12 h-12 text-state-error",
+				className: "w-12 h-12 text-status-error-text",
 				fill: "none",
 				stroke: "currentColor",
 				viewBox: "0 0 24 24",

package/dist/bigconsole/components/DrilldownDashboardRenderer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DrilldownDashboardRenderer.js","names":[],"sources":["../../../src/bigconsole/components/DrilldownDashboardRenderer.tsx"],"sourcesContent":["/*\n DrilldownDashboardRenderer Component\n \n Renders a dashboard inside the DrilldownModal.\n * Fetches dashboard data and displays widgets with passed parameters.\n /\n\nimport { type FC, memo, useEffect, useState } from 'react';\nimport { useApolloClient } from '@apollo/client/react';\nimport type { Widget } from '../types';\nimport { WidgetWrapper } from './widgets/WidgetWrapper';\nimport { ListWidgetsByDashboardDocument, GetDashboardDocument } from '../../generated/wspace-operations';\nimport { mapFromFederationWidgetType } from '../utils/widgetTypeMapping';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface DrilldownDashboardRendererProps {\n /* Target dashboard ID to render /\n dashboardId: string;\n /* Parameters passed from drilldown (can be used for filtering) /\n params: Record<string, unknown>;\n}\n\ninterface DashboardData {\n id: string;\n name: string;\n description?: string;\n pages: Array<{\n id: string;\n name: string;\n }>;\n}\n\n// ============================================================================\n// Helper: Normalize widget from GraphQL\n// ============================================================================\n\nfunction normalizeWidget(raw: Record<string, unknown>, index: number): Widget {\n // For drilldown modal, stack widgets vertically with compact sizing\n const posX = 0;\n const posY = index 4; // Stack vertically, 4 row units per widget\n const posW = 12; // Full width\n const posH = 4; // Better height for widget content\n\n const position = { x: posX, y: posY, width: posW, height: posH };\n\n // Get the config object\n const config = (raw.config as Record<string, unknown>) \|\| {};\n\n // Map widget type correctly: check _internalWidgetType first, then map from federation type\n // This is critical — federation types like 'KPI' must be mapped to internal types like 'metric_card'\n const internalType = config._internalWidgetType as string \| undefined;\n const widgetType = internalType \|\| mapFromFederationWidgetType((raw.type as string) \|\| 'KPI');\n\n return {\n id: (raw.id as string) ?? '',\n pageId: (raw.pageId as string) \|\| '',\n dashboardId: raw.dashboardId as string \| undefined,\n type: widgetType,\n title: (raw.title as string) \|\| 'Untitled Widget',\n renderer: raw.renderer \|\| 'BIGCONSOLE',\n template: raw.template \|\| null,\n dataSinkId: raw.dataSinkId \|\| null,\n datasetId: raw.datasetId \|\| null,\n parserId: raw.parserId \|\| null,\n parserRules: raw.parserRules \|\| null,\n config: config,\n position: position,\n positionX: posX,\n positionY: posY,\n positionWidth: posW,\n positionHeight: posH,\n positionResponsive: raw.positionResponsive as Widget['positionResponsive'],\n rowOrder: (raw.rowOrder as number \| null) ?? null,\n refreshInterval: raw.refreshInterval,\n lastRefreshedAt: raw.lastRefreshedAt,\n cacheTTL: (raw.cacheTTL as number \| null) ?? null,\n drilldown: raw.drilldown as Widget['drilldown'],\n actions: (raw.actions as Widget['actions']) \|\| [],\n translations: (raw.translations as Widget['translations']) \|\| [],\n metadata: raw.metadata as Record<string, unknown> \| undefined,\n context: raw.context,\n // Include widget data from backend (critical for showing real data in modal)\n data: raw.data \|\| null,\n createdAt: (raw.createdAt as string) \|\| new Date().toISOString(),\n updatedAt: (raw.updatedAt as string) \|\| new Date().toISOString(),\n } as Widget;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const DrilldownDashboardRenderer: FC<DrilldownDashboardRendererProps> = memo(\n function DrilldownDashboardRenderer({ dashboardId, params }) {\n const apolloClient = useApolloClient();\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState<string \| null>(null);\n const [dashboard, setDashboard] = useState<DashboardData \| null>(null);\n const [widgets, setWidgets] = useState<Widget[]>([]);\n\n // Fetch dashboard and widgets — only when dashboardId is provided\n useEffect(() => {\n if (!dashboardId) {\n setLoading(false);\n return;\n }\n\n async function fetchData() {\n setLoading(true);\n setError(null);\n\n try {\n // Fetch dashboard info\n interface DashboardQueryResult {\n getDashboard: {\n id: string;\n name: string;\n description?: string;\n pages?: {\n edges?: Array<{ node: { id: string; name?: string } }>;\n };\n } \| null;\n }\n\n const dashboardResult = await apolloClient.query<DashboardQueryResult>({\n query: GetDashboardDocument,\n variables: { id: dashboardId },\n fetchPolicy: 'network-only',\n });\n\n const dashboardData = dashboardResult.data?.getDashboard;\n if (!dashboardData) {\n setError('Dashboard not found');\n setLoading(false);\n return;\n }\n\n // Normalize dashboard\n const pages =\n dashboardData.pages?.edges?.map((edge) => ({\n id: edge.node.id,\n name: edge.node.name \|\| 'Page 1',\n })) \|\| [];\n\n setDashboard({\n id: dashboardData.id,\n name: dashboardData.name,\n description: dashboardData.description,\n pages,\n });\n\n // Fetch widgets for the dashboard\n const widgetsResult = await apolloClient.query<{ listWidgetsByDashboard: Record<string, unknown>[] }>({\n query: ListWidgetsByDashboardDocument,\n variables: { dashboardId },\n fetchPolicy: 'network-only',\n });\n\n const widgetsList = widgetsResult.data?.listWidgetsByDashboard \|\| [];\n setWidgets(widgetsList.map((w, i) => normalizeWidget(w, i)));\n } catch (err) {\n setError(err instanceof Error ? err.message : 'Failed to load dashboard');\n } finally {\n setLoading(false);\n }\n }\n\n fetchData();\n }, [dashboardId, apolloClient]);\n\n // Loading state\n if (loading) {\n return (\n <div className=\"flex items-center justify-center h-full\">\n <div className=\"flex flex-col items-center gap-3\">\n <div className=\"w-8 h-8 border-2 border-action-primary-bg border-t-transparent rounded-full animate-spin\" />\n <p className=\"text-sm text-text-secondary\">Loading dashboard...</p>\n </div>\n </div>\n );\n }\n\n // Error state\n if (error) {\n return (\n <div className=\"flex items-center justify-center h-full\">\n <div className=\"flex flex-col items-center gap-3 text-center max-w-md\">\n <svg className=\"w-12 h-12 text-state-error\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n />\n </svg>\n <p className=\"text-sm text-text-secondary\">{error}</p>\n </div>\n </div>\n );\n }\n\n // Empty state\n if (!dashboard \|\| widgets.length === 0) {\n return (\n <div className=\"flex items-center justify-center h-full\">\n <div className=\"flex flex-col items-center gap-3 text-center\">\n <svg className=\"w-12 h-12 text-text-tertiary\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n d=\"M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z\"\n />\n </svg>\n <p className=\"text-sm text-text-secondary\">\n {dashboard ? 'This dashboard has no widgets' : 'Dashboard not found'}\n </p>\n </div>\n </div>\n );\n }\n\n return (\n <div className=\"w-full\">\n {/* Dashboard Header /}\n <div className=\"pb-3 mb-4 border-b border-border-default\">\n <h3 className=\"text-lg font-semibold text-text-primary\">{dashboard.name}</h3>\n {dashboard.description && <p className=\"text-sm text-text-secondary mt-1\">{dashboard.description}</p>}\n {/ Show params if present (filter out internal __drilldown metadata) /}\n {Object.keys(params).filter((k) => !k.startsWith('__')).length > 0 && (\n <div className=\"flex flex-wrap gap-2 mt-2\">\n {Object.entries(params)\n .filter(([key]) => !key.startsWith('__'))\n .map(([key, value]) => (\n <span\n key={key}\n className=\"inline-flex items-center px-2 py-1 rounded bg-action-primary-bg/10 text-xs\"\n >\n <span className=\"font-medium text-text-primary\">{key}:</span>\n <span className=\"ml-1 text-action-primary-text\">\n {typeof value === 'object' && value !== null ? JSON.stringify(value) : String(value)}\n </span>\n </span>\n ))}\n </div>\n )}\n </div>\n\n {/ Widgets List - simple vertical layout for modal */}\n <div className=\"space-y-4\">\n {widgets.map((widget) => {\n // Chart widgets (LINE_CHART / chart) need explicit pixel height because\n // Recharts ResponsiveContainer height=\"100%\" requires a parent with\n // a definite height — minHeight alone doesn't work.\n const internalType = (widget.config as Record<string, unknown>)?._internalWidgetType as string \| undefined;\n const widgetType = widget.type as string;\n const isChartWidget =\n widgetType === 'LINE_CHART' \|\|\n widgetType === 'chart' \|\|\n internalType === 'chart' \|\|\n internalType === 'funnel_chart';\n const isTableWidget =\n widgetType === 'TABLE' \|\|\n widgetType === 'table' \|\|\n internalType === 'table' \|\|\n internalType === 'list' \|\|\n internalType === 'pivot_table';\n\n // Charts need explicit height; tables need more space; KPIs auto-size\n const heightStyle = isChartWidget\n ? { height: '350px' }\n : isTableWidget\n ? { minHeight: '250px', maxHeight: '500px' }\n : { minHeight: '120px', maxHeight: '300px' };\n\n return (\n <div\n key={widget.id}\n className=\"border border-border-default rounded-lg bg-bg-surface overflow-hidden\"\n style={heightStyle}\n >\n <WidgetInModal widget={widget} filterValues={params} />\n </div>\n );\n })}\n </div>\n </div>\n );\n }\n);\n\n// ============================================================================\n// Widget In Modal Component\n// ============================================================================\n\ninterface WidgetInModalProps {\n widget: Widget;\n filterValues?: Record<string, unknown>;\n}\n\nconst WidgetInModal: FC<WidgetInModalProps> = memo(function WidgetInModal({ widget, filterValues }) {\n return (\n <div className=\"h-full [&_[data-widget-id]]:border-transparent [&_[data-widget-id]:hover]:border-transparent\">\n <WidgetWrapper widget={widget} isLoading={false} error={null} filterValues={filterValues} />\n </div>\n );\n});\n\nexport default DrilldownDashboardRenderer;\n"],"mappings":"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"}
1	+ {"version":3,"file":"DrilldownDashboardRenderer.js","names":[],"sources":["../../../src/bigconsole/components/DrilldownDashboardRenderer.tsx"],"sourcesContent":["/*\n DrilldownDashboardRenderer Component\n \n Renders a dashboard inside the DrilldownModal.\n * Fetches dashboard data and displays widgets with passed parameters.\n /\n\nimport { type FC, memo, useEffect, useState } from 'react';\nimport { useApolloClient } from '@apollo/client/react';\nimport type { Widget } from '../types';\nimport { WidgetWrapper } from './widgets/WidgetWrapper';\nimport { ListWidgetsByDashboardDocument, GetDashboardDocument } from '../../generated/wspace-operations';\nimport { mapFromFederationWidgetType } from '../utils/widgetTypeMapping';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface DrilldownDashboardRendererProps {\n /* Target dashboard ID to render /\n dashboardId: string;\n /* Parameters passed from drilldown (can be used for filtering) /\n params: Record<string, unknown>;\n}\n\ninterface DashboardData {\n id: string;\n name: string;\n description?: string;\n pages: Array<{\n id: string;\n name: string;\n }>;\n}\n\n// ============================================================================\n// Helper: Normalize widget from GraphQL\n// ============================================================================\n\nfunction normalizeWidget(raw: Record<string, unknown>, index: number): Widget {\n // For drilldown modal, stack widgets vertically with compact sizing\n const posX = 0;\n const posY = index 4; // Stack vertically, 4 row units per widget\n const posW = 12; // Full width\n const posH = 4; // Better height for widget content\n\n const position = { x: posX, y: posY, width: posW, height: posH };\n\n // Get the config object\n const config = (raw.config as Record<string, unknown>) \|\| {};\n\n // Map widget type correctly: check _internalWidgetType first, then map from federation type\n // This is critical — federation types like 'KPI' must be mapped to internal types like 'metric_card'\n const internalType = config._internalWidgetType as string \| undefined;\n const widgetType = internalType \|\| mapFromFederationWidgetType((raw.type as string) \|\| 'KPI');\n\n return {\n id: (raw.id as string) ?? '',\n pageId: (raw.pageId as string) \|\| '',\n dashboardId: raw.dashboardId as string \| undefined,\n type: widgetType,\n title: (raw.title as string) \|\| 'Untitled Widget',\n renderer: raw.renderer \|\| 'BIGCONSOLE',\n template: raw.template \|\| null,\n dataSinkId: raw.dataSinkId \|\| null,\n datasetId: raw.datasetId \|\| null,\n parserId: raw.parserId \|\| null,\n parserRules: raw.parserRules \|\| null,\n config: config,\n position: position,\n positionX: posX,\n positionY: posY,\n positionWidth: posW,\n positionHeight: posH,\n positionResponsive: raw.positionResponsive as Widget['positionResponsive'],\n rowOrder: (raw.rowOrder as number \| null) ?? null,\n refreshInterval: raw.refreshInterval,\n lastRefreshedAt: raw.lastRefreshedAt,\n cacheTTL: (raw.cacheTTL as number \| null) ?? null,\n drilldown: raw.drilldown as Widget['drilldown'],\n actions: (raw.actions as Widget['actions']) \|\| [],\n translations: (raw.translations as Widget['translations']) \|\| [],\n metadata: raw.metadata as Record<string, unknown> \| undefined,\n context: raw.context,\n // Include widget data from backend (critical for showing real data in modal)\n data: raw.data \|\| null,\n createdAt: (raw.createdAt as string) \|\| new Date().toISOString(),\n updatedAt: (raw.updatedAt as string) \|\| new Date().toISOString(),\n } as Widget;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const DrilldownDashboardRenderer: FC<DrilldownDashboardRendererProps> = memo(\n function DrilldownDashboardRenderer({ dashboardId, params }) {\n const apolloClient = useApolloClient();\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState<string \| null>(null);\n const [dashboard, setDashboard] = useState<DashboardData \| null>(null);\n const [widgets, setWidgets] = useState<Widget[]>([]);\n\n // Fetch dashboard and widgets — only when dashboardId is provided\n useEffect(() => {\n if (!dashboardId) {\n setLoading(false);\n return;\n }\n\n async function fetchData() {\n setLoading(true);\n setError(null);\n\n try {\n // Fetch dashboard info\n interface DashboardQueryResult {\n getDashboard: {\n id: string;\n name: string;\n description?: string;\n pages?: {\n edges?: Array<{ node: { id: string; name?: string } }>;\n };\n } \| null;\n }\n\n const dashboardResult = await apolloClient.query<DashboardQueryResult>({\n query: GetDashboardDocument,\n variables: { id: dashboardId },\n fetchPolicy: 'network-only',\n });\n\n const dashboardData = dashboardResult.data?.getDashboard;\n if (!dashboardData) {\n setError('Dashboard not found');\n setLoading(false);\n return;\n }\n\n // Normalize dashboard\n const pages =\n dashboardData.pages?.edges?.map((edge) => ({\n id: edge.node.id,\n name: edge.node.name \|\| 'Page 1',\n })) \|\| [];\n\n setDashboard({\n id: dashboardData.id,\n name: dashboardData.name,\n description: dashboardData.description,\n pages,\n });\n\n // Fetch widgets for the dashboard\n const widgetsResult = await apolloClient.query<{ listWidgetsByDashboard: Record<string, unknown>[] }>({\n query: ListWidgetsByDashboardDocument,\n variables: { dashboardId },\n fetchPolicy: 'network-only',\n });\n\n const widgetsList = widgetsResult.data?.listWidgetsByDashboard \|\| [];\n setWidgets(widgetsList.map((w, i) => normalizeWidget(w, i)));\n } catch (err) {\n setError(err instanceof Error ? err.message : 'Failed to load dashboard');\n } finally {\n setLoading(false);\n }\n }\n\n fetchData();\n }, [dashboardId, apolloClient]);\n\n // Loading state\n if (loading) {\n return (\n <div className=\"flex items-center justify-center h-full\">\n <div className=\"flex flex-col items-center gap-3\">\n <div className=\"w-8 h-8 border-2 border-action-primary-bg border-t-transparent rounded-full animate-spin\" />\n <p className=\"text-sm text-text-secondary\">Loading dashboard...</p>\n </div>\n </div>\n );\n }\n\n // Error state\n if (error) {\n return (\n <div className=\"flex items-center justify-center h-full\">\n <div className=\"flex flex-col items-center gap-3 text-center max-w-md\">\n <svg className=\"w-12 h-12 text-status-error-text\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n />\n </svg>\n <p className=\"text-sm text-text-secondary\">{error}</p>\n </div>\n </div>\n );\n }\n\n // Empty state\n if (!dashboard \|\| widgets.length === 0) {\n return (\n <div className=\"flex items-center justify-center h-full\">\n <div className=\"flex flex-col items-center gap-3 text-center\">\n <svg className=\"w-12 h-12 text-text-tertiary\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n d=\"M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z\"\n />\n </svg>\n <p className=\"text-sm text-text-secondary\">\n {dashboard ? 'This dashboard has no widgets' : 'Dashboard not found'}\n </p>\n </div>\n </div>\n );\n }\n\n return (\n <div className=\"w-full\">\n {/* Dashboard Header /}\n <div className=\"pb-3 mb-4 border-b border-border-default\">\n <h3 className=\"text-lg font-semibold text-text-primary\">{dashboard.name}</h3>\n {dashboard.description && <p className=\"text-sm text-text-secondary mt-1\">{dashboard.description}</p>}\n {/ Show params if present (filter out internal __drilldown metadata) /}\n {Object.keys(params).filter((k) => !k.startsWith('__')).length > 0 && (\n <div className=\"flex flex-wrap gap-2 mt-2\">\n {Object.entries(params)\n .filter(([key]) => !key.startsWith('__'))\n .map(([key, value]) => (\n <span\n key={key}\n className=\"inline-flex items-center px-2 py-1 rounded bg-action-primary-bg/10 text-xs\"\n >\n <span className=\"font-medium text-text-primary\">{key}:</span>\n <span className=\"ml-1 text-action-primary-text\">\n {typeof value === 'object' && value !== null ? JSON.stringify(value) : String(value)}\n </span>\n </span>\n ))}\n </div>\n )}\n </div>\n\n {/ Widgets List - simple vertical layout for modal */}\n <div className=\"space-y-4\">\n {widgets.map((widget) => {\n // Chart widgets (LINE_CHART / chart) need explicit pixel height because\n // Recharts ResponsiveContainer height=\"100%\" requires a parent with\n // a definite height — minHeight alone doesn't work.\n const internalType = (widget.config as Record<string, unknown>)?._internalWidgetType as string \| undefined;\n const widgetType = widget.type as string;\n const isChartWidget =\n widgetType === 'LINE_CHART' \|\|\n widgetType === 'chart' \|\|\n internalType === 'chart' \|\|\n internalType === 'funnel_chart';\n const isTableWidget =\n widgetType === 'TABLE' \|\|\n widgetType === 'table' \|\|\n internalType === 'table' \|\|\n internalType === 'list' \|\|\n internalType === 'pivot_table';\n\n // Charts need explicit height; tables need more space; KPIs auto-size\n const heightStyle = isChartWidget\n ? { height: '350px' }\n : isTableWidget\n ? { minHeight: '250px', maxHeight: '500px' }\n : { minHeight: '120px', maxHeight: '300px' };\n\n return (\n <div\n key={widget.id}\n className=\"border border-border-default rounded-lg bg-bg-surface overflow-hidden\"\n style={heightStyle}\n >\n <WidgetInModal widget={widget} filterValues={params} />\n </div>\n );\n })}\n </div>\n </div>\n );\n }\n);\n\n// ============================================================================\n// Widget In Modal Component\n// ============================================================================\n\ninterface WidgetInModalProps {\n widget: Widget;\n filterValues?: Record<string, unknown>;\n}\n\nconst WidgetInModal: FC<WidgetInModalProps> = memo(function WidgetInModal({ widget, filterValues }) {\n return (\n <div className=\"h-full [&_[data-widget-id]]:border-transparent [&_[data-widget-id]:hover]:border-transparent\">\n <WidgetWrapper widget={widget} isLoading={false} error={null} filterValues={filterValues} />\n </div>\n );\n});\n\nexport default DrilldownDashboardRenderer;\n"],"mappings":"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"}

package/dist/bigconsole/components/builder/inspector/DataBindingSection.js CHANGED Viewed

@@ -68,19 +68,19 @@ var s = {
 					} }), s[f]]
 				}),
 				h && /* @__PURE__ */ a("p", {
-					className: "text-xs text-status-error",
+					className: "text-xs text-status-error-text",
 					children: h
 				}),
 				p.length > 0 && /* @__PURE__ */ o("p", {
-					className: "text-xs text-status-warning",
+					className: "text-xs text-status-warning-text",
 					children: ["Missing: ", p.join(", ")]
 				})
 			]
 		}),
 		l.parserId && Object.keys(l.fields).length > 0 && /* @__PURE__ */ o("div", {
-			className: "rounded-md border border-status-success bg-status-success-muted p-3",
+			className: "rounded-md border border-status-success-border bg-status-success-bg-subtle p-3",
 			children: [/* @__PURE__ */ a("p", {
-				className: "mb-2 text-xs font-medium text-status-success",
+				className: "mb-2 text-xs font-medium text-status-success-text",
 				children: "Field mappings configured"
 			}), /* @__PURE__ */ a("div", {
 				className: "space-y-1 text-xs text-text-secondary",

package/dist/bigconsole/components/builder/inspector/DataBindingSection.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DataBindingSection.js","names":[],"sources":["../../../../../src/bigconsole/components/builder/inspector/DataBindingSection.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { Input, Label, Spinner } from '@burdenoff/fe-libs/ui';\nimport type { WidgetBinding, WidgetBindingStatus } from '../../../types';\nimport { DataSinkSelector } from '../../parser/DataSinkSelector';\nimport { ParserSelector } from '../../parser/ParserSelector';\n\nexport interface DataBindingSectionProps {\n consoleId: string;\n binding: WidgetBinding;\n dataSinkKey: string \| null;\n dataPath?: string;\n status: WidgetBindingStatus;\n missingFields?: string[];\n preview?: unknown;\n error?: string \| null;\n onDataSinkChange: (key: string \| null) => void;\n onParserChange: (parserId: string \| null) => void;\n onDataPathChange: (path: string \| undefined) => void;\n}\n\nconst STATUS_LABELS: Record<WidgetBindingStatus, string> = {\n unbound: 'Select a DataSink to begin',\n loading: 'Testing parser and detecting fields…',\n bound: 'Binding ready',\n no_data: 'Parser returned no data',\n parser_error: 'Parser test failed',\n field_mismatch: 'Some mapped fields were not found',\n};\n\nexport const DataBindingSection: FC<DataBindingSectionProps> = ({\n consoleId,\n binding,\n dataSinkKey,\n dataPath,\n status,\n missingFields = [],\n preview,\n error,\n onDataSinkChange,\n onParserChange,\n onDataPathChange,\n}) => (\n <div className=\"space-y-4\">\n <div className=\"rounded-md border border-border-subtle bg-bg-sunken p-3\">\n <p className=\"text-xs text-text-secondary\">\n Connect this widget to a DataSink and Parser to display transformed data.\n </p>\n </div>\n\n <div className=\"space-y-2\">\n <Label>DataSink</Label>\n <DataSinkSelector value={dataSinkKey} onChange={onDataSinkChange} placeholder=\"Select a DataSink...\" />\n {dataSinkKey && (\n <p className=\"text-xs text-text-secondary\">\n Key: {dataSinkKey}\n {binding.source.ref && (\n <span className=\"ml-2 text-text-tertiary\">ID: {binding.source.ref.slice(0, 8)}...</span>\n )}\n </p>\n )}\n </div>\n\n <div className=\"space-y-2\">\n <Label>Parser</Label>\n <ParserSelector\n consoleId={consoleId}\n value={binding.parserId ?? null}\n onChange={onParserChange}\n filterInputSinkKey={dataSinkKey ?? undefined}\n filterStatus={undefined}\n placeholder={dataSinkKey ? 'Select a parser...' : 'Select a DataSink first...'}\n disabled={!dataSinkKey}\n />\n <p className=\"flex items-center gap-1 text-xs text-text-secondary\" role=\"status\">\n {status === 'loading' && <Spinner style={{ width: '12px', height: '12px' }} />}\n {STATUS_LABELS[status]}\n </p>\n {error && <p className=\"text-xs text-status-error\">{error}</p>}\n {missingFields.length > 0 && <p className=\"text-xs text-status-warning\">Missing: {missingFields.join(', ')}</p>}\n </div>\n\n {binding.parserId && Object.keys(binding.fields).length > 0 && (\n <div className=\"rounded-md border border-status-success bg-status-success-~~muted~~ p-3\">\n <p className=\"mb-2 text-xs font-medium text-status-success\">Field mappings configured</p>\n <div className=\"space-y-1 text-xs text-text-secondary\">\n {Object.entries(binding.fields).map(([name, path]) => (\n <p key={name}>\n {name}: <code className=\"rounded bg-bg-sunken px-1\">{path}</code>\n </p>\n ))}\n </div>\n </div>\n )}\n\n {preview !== undefined && (\n <div className=\"space-y-2\">\n <Label>Live Preview</Label>\n <pre className=\"max-h-40 overflow-auto rounded-md border border-border-subtle bg-bg-sunken p-3 text-xs text-text-secondary\">\n {JSON.stringify(preview, null, 2)}\n </pre>\n </div>\n )}\n\n <div className=\"space-y-2\">\n <Label>Data Path (Optional)</Label>\n <Input\n value={dataPath ?? ''}\n onChange={(event) => onDataPathChange(event.target.value \|\| undefined)}\n placeholder=\"e.g., summary.totalRevenue\"\n />\n <p className=\"text-xs text-text-secondary\">Path to extract specific data from the parser output (dot notation)</p>\n </div>\n </div>\n);\n"],"mappings":";;;;;AAoBA,IAAM,IAAqD;CACzD,SAAS;CACT,SAAS;CACT,OAAO;CACP,SAAS;CACT,cAAc;CACd,gBAAgB;CACjB,EAEY,KAAmD,EAC9D,cACA,YACA,gBACA,aACA,WACA,mBAAgB,EAAE,EAClB,YACA,UACA,qBACA,mBACA,0BAEA,kBAAC,OAAD;CAAK,WAAU;WAAf;EACE,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,KAAD;IAAG,WAAU;cAA8B;IAEvC,CAAA;GACA,CAAA;EAEN,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,GAAD,EAAA,UAAO,YAAgB,CAAA;IACvB,kBAAC,GAAD;KAAkB,OAAO;KAAa,UAAU;KAAkB,aAAY;KAAyB,CAAA;IACtG,KACC,kBAAC,KAAD;KAAG,WAAU;eAAb;MAA2C;MACnC;MACL,EAAQ,OAAO,OACd,kBAAC,QAAD;OAAM,WAAU;iBAAhB;QAA0C;QAAK,EAAQ,OAAO,IAAI,MAAM,GAAG,EAAE;QAAC;QAAU;;MAExF;;IAEF;;EAEN,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,GAAD,EAAA,UAAO,UAAc,CAAA;IACrB,kBAAC,GAAD;KACa;KACX,OAAO,EAAQ,YAAY;KAC3B,UAAU;KACV,oBAAoB,KAAe,KAAA;KACnC,cAAc,KAAA;KACd,aAAa,IAAc,uBAAuB;KAClD,UAAU,CAAC;KACX,CAAA;IACF,kBAAC,KAAD;KAAG,WAAU;KAAsD,MAAK;eAAxE,CACG,MAAW,aAAa,kBAAC,GAAD,EAAS,OAAO;MAAE,OAAO;MAAQ,QAAQ;MAAQ,EAAI,CAAA,EAC7E,EAAc,GACb;;IACH,KAAS,kBAAC,KAAD;KAAG,WAAU;~~eAA6B~~;KAAU,CAAA;~~IAC7D~~,EAAc,SAAS,~~KAAK~~,kBAAC,KAAD;KAAG,WAAU;eAAb,~~CAA2C~~,aAAU,EAAc,KAAK,KAAK,CAAK;;~~IAC3G~~;;EAEL,EAAQ,YAAY,OAAO,KAAK,EAAQ,OAAO,CAAC,SAAS,KACxD,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,KAAD;IAAG,WAAU;~~cAA+C~~;IAA6B,CAAA,~~EACzF~~,kBAAC,OAAD;IAAK,WAAU;cACZ,OAAO,QAAQ,EAAQ,OAAO,CAAC,KAAK,CAAC,GAAM,OAC1C,kBAAC,KAAD,EAAA,UAAA;KACG;KAAK;KAAE,kBAAC,QAAD;MAAM,WAAU;gBAA6B;MAAY,CAAA;KAC/D,EAAA,EAFI,EAEJ,CACJ;IACE,CAAA,CACF;;EAGP,MAAY,KAAA,KACX,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD,EAAA,UAAO,gBAAoB,CAAA,EAC3B,kBAAC,OAAD;IAAK,WAAU;cACZ,KAAK,UAAU,GAAS,MAAM,EAAE;IAC7B,CAAA,CACF;;EAGR,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,GAAD,EAAA,UAAO,wBAA4B,CAAA;IACnC,kBAAC,GAAD;KACE,OAAO,KAAY;KACnB,WAAW,MAAU,EAAiB,EAAM,OAAO,SAAS,KAAA,EAAU;KACtE,aAAY;KACZ,CAAA;IACF,kBAAC,KAAD;KAAG,WAAU;eAA8B;KAAuE,CAAA;IAC9G;;EACF"}
1	+ {"version":3,"file":"DataBindingSection.js","names":[],"sources":["../../../../../src/bigconsole/components/builder/inspector/DataBindingSection.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { Input, Label, Spinner } from '@burdenoff/fe-libs/ui';\nimport type { WidgetBinding, WidgetBindingStatus } from '../../../types';\nimport { DataSinkSelector } from '../../parser/DataSinkSelector';\nimport { ParserSelector } from '../../parser/ParserSelector';\n\nexport interface DataBindingSectionProps {\n consoleId: string;\n binding: WidgetBinding;\n dataSinkKey: string \| null;\n dataPath?: string;\n status: WidgetBindingStatus;\n missingFields?: string[];\n preview?: unknown;\n error?: string \| null;\n onDataSinkChange: (key: string \| null) => void;\n onParserChange: (parserId: string \| null) => void;\n onDataPathChange: (path: string \| undefined) => void;\n}\n\nconst STATUS_LABELS: Record<WidgetBindingStatus, string> = {\n unbound: 'Select a DataSink to begin',\n loading: 'Testing parser and detecting fields…',\n bound: 'Binding ready',\n no_data: 'Parser returned no data',\n parser_error: 'Parser test failed',\n field_mismatch: 'Some mapped fields were not found',\n};\n\nexport const DataBindingSection: FC<DataBindingSectionProps> = ({\n consoleId,\n binding,\n dataSinkKey,\n dataPath,\n status,\n missingFields = [],\n preview,\n error,\n onDataSinkChange,\n onParserChange,\n onDataPathChange,\n}) => (\n <div className=\"space-y-4\">\n <div className=\"rounded-md border border-border-subtle bg-bg-sunken p-3\">\n <p className=\"text-xs text-text-secondary\">\n Connect this widget to a DataSink and Parser to display transformed data.\n </p>\n </div>\n\n <div className=\"space-y-2\">\n <Label>DataSink</Label>\n <DataSinkSelector value={dataSinkKey} onChange={onDataSinkChange} placeholder=\"Select a DataSink...\" />\n {dataSinkKey && (\n <p className=\"text-xs text-text-secondary\">\n Key: {dataSinkKey}\n {binding.source.ref && (\n <span className=\"ml-2 text-text-tertiary\">ID: {binding.source.ref.slice(0, 8)}...</span>\n )}\n </p>\n )}\n </div>\n\n <div className=\"space-y-2\">\n <Label>Parser</Label>\n <ParserSelector\n consoleId={consoleId}\n value={binding.parserId ?? null}\n onChange={onParserChange}\n filterInputSinkKey={dataSinkKey ?? undefined}\n filterStatus={undefined}\n placeholder={dataSinkKey ? 'Select a parser...' : 'Select a DataSink first...'}\n disabled={!dataSinkKey}\n />\n <p className=\"flex items-center gap-1 text-xs text-text-secondary\" role=\"status\">\n {status === 'loading' && <Spinner style={{ width: '12px', height: '12px' }} />}\n {STATUS_LABELS[status]}\n </p>\n {error && <p className=\"text-xs text-status-error-text\">{error}</p>}\n {missingFields.length > 0 && (\n <p className=\"text-xs text-status-warning-text\">Missing: {missingFields.join(', ')}</p>\n )}\n </div>\n\n {binding.parserId && Object.keys(binding.fields).length > 0 && (\n <div className=\"rounded-md border border-status-success-border bg-status-success-bg-subtle p-3\">\n <p className=\"mb-2 text-xs font-medium text-status-success-text\">Field mappings configured</p>\n <div className=\"space-y-1 text-xs text-text-secondary\">\n {Object.entries(binding.fields).map(([name, path]) => (\n <p key={name}>\n {name}: <code className=\"rounded bg-bg-sunken px-1\">{path}</code>\n </p>\n ))}\n </div>\n </div>\n )}\n\n {preview !== undefined && (\n <div className=\"space-y-2\">\n <Label>Live Preview</Label>\n <pre className=\"max-h-40 overflow-auto rounded-md border border-border-subtle bg-bg-sunken p-3 text-xs text-text-secondary\">\n {JSON.stringify(preview, null, 2)}\n </pre>\n </div>\n )}\n\n <div className=\"space-y-2\">\n <Label>Data Path (Optional)</Label>\n <Input\n value={dataPath ?? ''}\n onChange={(event) => onDataPathChange(event.target.value \|\| undefined)}\n placeholder=\"e.g., summary.totalRevenue\"\n />\n <p className=\"text-xs text-text-secondary\">Path to extract specific data from the parser output (dot notation)</p>\n </div>\n </div>\n);\n"],"mappings":";;;;;AAoBA,IAAM,IAAqD;CACzD,SAAS;CACT,SAAS;CACT,OAAO;CACP,SAAS;CACT,cAAc;CACd,gBAAgB;CACjB,EAEY,KAAmD,EAC9D,cACA,YACA,gBACA,aACA,WACA,mBAAgB,EAAE,EAClB,YACA,UACA,qBACA,mBACA,0BAEA,kBAAC,OAAD;CAAK,WAAU;WAAf;EACE,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,KAAD;IAAG,WAAU;cAA8B;IAEvC,CAAA;GACA,CAAA;EAEN,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,GAAD,EAAA,UAAO,YAAgB,CAAA;IACvB,kBAAC,GAAD;KAAkB,OAAO;KAAa,UAAU;KAAkB,aAAY;KAAyB,CAAA;IACtG,KACC,kBAAC,KAAD;KAAG,WAAU;eAAb;MAA2C;MACnC;MACL,EAAQ,OAAO,OACd,kBAAC,QAAD;OAAM,WAAU;iBAAhB;QAA0C;QAAK,EAAQ,OAAO,IAAI,MAAM,GAAG,EAAE;QAAC;QAAU;;MAExF;;IAEF;;EAEN,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,GAAD,EAAA,UAAO,UAAc,CAAA;IACrB,kBAAC,GAAD;KACa;KACX,OAAO,EAAQ,YAAY;KAC3B,UAAU;KACV,oBAAoB,KAAe,KAAA;KACnC,cAAc,KAAA;KACd,aAAa,IAAc,uBAAuB;KAClD,UAAU,CAAC;KACX,CAAA;IACF,kBAAC,KAAD;KAAG,WAAU;KAAsD,MAAK;eAAxE,CACG,MAAW,aAAa,kBAAC,GAAD,EAAS,OAAO;MAAE,OAAO;MAAQ,QAAQ;MAAQ,EAAI,CAAA,EAC7E,EAAc,GACb;;IACH,KAAS,kBAAC,KAAD;KAAG,WAAU;eAAkC;KAAU,CAAA;IAClE,EAAc,SAAS,KACtB,kBAAC,KAAD;KAAG,WAAU;eAAb,CAAgD,aAAU,EAAc,KAAK,KAAK,CAAK;;IAErF;;EAEL,EAAQ,YAAY,OAAO,KAAK,EAAQ,OAAO,CAAC,SAAS,KACxD,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,KAAD;IAAG,WAAU;cAAoD;IAA6B,CAAA,EAC9F,kBAAC,OAAD;IAAK,WAAU;cACZ,OAAO,QAAQ,EAAQ,OAAO,CAAC,KAAK,CAAC,GAAM,OAC1C,kBAAC,KAAD,EAAA,UAAA;KACG;KAAK;KAAE,kBAAC,QAAD;MAAM,WAAU;gBAA6B;MAAY,CAAA;KAC/D,EAAA,EAFI,EAEJ,CACJ;IACE,CAAA,CACF;;EAGP,MAAY,KAAA,KACX,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD,EAAA,UAAO,gBAAoB,CAAA,EAC3B,kBAAC,OAAD;IAAK,WAAU;cACZ,KAAK,UAAU,GAAS,MAAM,EAAE;IAC7B,CAAA,CACF;;EAGR,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,GAAD,EAAA,UAAO,wBAA4B,CAAA;IACnC,kBAAC,GAAD;KACE,OAAO,KAAY;KACnB,WAAW,MAAU,EAAiB,EAAM,OAAO,SAAS,KAAA,EAAU;KACtE,aAAY;KACZ,CAAA;IACF,kBAAC,KAAD;KAAG,WAAU;eAA8B;KAAuE,CAAA;IAC9G;;EACF"}

package/dist/bigconsole/components/datasink/CacheTTLSelector.js CHANGED Viewed

@@ -163,7 +163,7 @@ var d = e(function({ value: e, onChange: d, disabled: f = !1, error: p }) {
                       focus:border-action-primary-bg
                       focus:ring-2
                       focus:ring-action-primary-bg/20
-                      ${p || v ? "border-state-error" : "border-border-default"}
+                      ${p || v ? "border-status-error-border" : "border-border-default"}
                     `
 									}),
 									/* @__PURE__ */ o("span", {
@@ -182,7 +182,7 @@ var d = e(function({ value: e, onChange: d, disabled: f = !1, error: p }) {
 							}), v && /* @__PURE__ */ s("div", {
 								className: "flex items-center gap-1 mt-1",
 								children: [/* @__PURE__ */ o("svg", {
-									className: "w-3.5 h-3.5 text-state-error flex-shrink-0",
+									className: "w-3.5 h-3.5 text-status-error-text flex-shrink-0",
 									fill: "none",
 									stroke: "currentColor",
 									viewBox: "0 0 24 24",
@@ -193,7 +193,7 @@ var d = e(function({ value: e, onChange: d, disabled: f = !1, error: p }) {
 										d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
 									})
 								}), /* @__PURE__ */ o("span", {
-									className: "text-xs text-state-error",
+									className: "text-xs text-status-error-text",
 									children: v
 								})]
 							})] })
@@ -204,7 +204,7 @@ var d = e(function({ value: e, onChange: d, disabled: f = !1, error: p }) {
 			p && /* @__PURE__ */ s("div", {
 				className: "flex items-start gap-2",
 				children: [/* @__PURE__ */ o("svg", {
-					className: "w-4 h-4 text-state-error flex-shrink-0 mt-0.5",
+					className: "w-4 h-4 text-status-error-text flex-shrink-0 mt-0.5",
 					fill: "none",
 					stroke: "currentColor",
 					viewBox: "0 0 24 24",
@@ -215,7 +215,7 @@ var d = e(function({ value: e, onChange: d, disabled: f = !1, error: p }) {
 						d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
 					})
 				}), /* @__PURE__ */ o("p", {
-					className: "text-xs text-state-error",
+					className: "text-xs text-status-error-text",
 					children: p
 				})]
 			}),

package/dist/bigconsole/components/datasink/CacheTTLSelector.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CacheTTLSelector.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/CacheTTLSelector.tsx"],"sourcesContent":["/*\n Cache TTL Selector\n \n Component for selecting cache duration with preset options and custom input.\n /\n\nimport { memo, useState, useEffect, useCallback, useRef } from 'react';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface CacheTTLOption {\n value: number;\n label: string;\n description: string;\n recommended?: boolean;\n}\n\ninterface CacheTTLSelectorProps {\n /* Current TTL value in seconds (null for no cache) /\n value: number \| null;\n /* Callback when value changes /\n onChange: (value: number) => void;\n /* Whether selector is disabled /\n disabled?: boolean;\n /* Error message /\n error?: string;\n}\n\n// ============================================================================\n// CONSTANTS\n// ============================================================================\n\nconst PRESET_OPTIONS: CacheTTLOption[] = [\n {\n value: 300, // 5 minutes\n label: '5 minutes',\n description: 'Best for real-time dashboards',\n },\n {\n value: 900, // 15 minutes\n label: '15 minutes',\n description: 'Balanced performance',\n recommended: true,\n },\n {\n value: 3600, // 1 hour\n label: '1 hour',\n description: 'For data that changes hourly',\n },\n {\n value: 86400, // 24 hours\n label: '24 hours',\n description: 'For daily reports',\n },\n];\n\n// ============================================================================\n// HELPERS\n// ============================================================================\n\n/\n Check if value is a preset option\n /\nfunction isPresetValue(value: number \| null): boolean {\n if (value === null) return false;\n return PRESET_OPTIONS.some((opt) => opt.value === value);\n}\n\n/\n Format seconds to human-readable string\n /\nfunction formatDuration(seconds: number): string {\n if (seconds < 60) {\n return `${seconds} seconds`;\n }\n if (seconds < 3600) {\n return `${Math.floor(seconds / 60)} minutes`;\n }\n if (seconds < 86400) {\n return `${Math.floor(seconds / 3600)} hours`;\n }\n return `${Math.floor(seconds / 86400)} days`;\n}\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const CacheTTLSelector = memo(function CacheTTLSelector({\n value,\n onChange,\n disabled = false,\n error,\n}: CacheTTLSelectorProps) {\n // Track whether custom mode is active\n const [isCustom, setIsCustom] = useState(!isPresetValue(value) && value !== null);\n const [customValue, setCustomValue] = useState(value?.toString() \|\| '');\n const [validationError, setValidationError] = useState<string \| null>(null);\n const prevValueRef = useRef(value);\n\n // Sync custom value when external value changes (using deferred update to avoid cascading renders)\n useEffect(() => {\n if (prevValueRef.current !== value) {\n prevValueRef.current = value;\n if (value !== null && !isPresetValue(value)) {\n // Defer state update to avoid synchronous setState in effect\n queueMicrotask(() => {\n setCustomValue(value.toString());\n setIsCustom(true);\n });\n }\n }\n }, [value]);\n\n // Handle preset selection\n const handlePresetChange = useCallback(\n (presetValue: number) => {\n if (disabled) return;\n setIsCustom(false);\n onChange(presetValue);\n },\n [disabled, onChange]\n );\n\n // Handle custom mode activation\n const handleCustomSelect = useCallback(() => {\n if (disabled) return;\n setIsCustom(true);\n const parsed = parseInt(customValue);\n if (!isNaN(parsed) && parsed >= 30 && parsed <= 86400) {\n onChange(parsed);\n }\n }, [disabled, customValue, onChange]);\n\n // Handle custom value change with validation\n const handleCustomChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n const inputValue = e.target.value;\n setCustomValue(inputValue);\n\n // Validate input\n if (inputValue === '') {\n setValidationError(null);\n return;\n }\n\n const parsed = parseInt(inputValue);\n\n if (isNaN(parsed)) {\n setValidationError('Please enter a valid number');\n return;\n }\n\n if (parsed < 30) {\n setValidationError('Minimum cache duration is 30 seconds');\n return;\n }\n\n if (parsed > 86400) {\n setValidationError('Maximum cache duration is 86400 seconds (24 hours)');\n return;\n }\n\n // Valid value\n setValidationError(null);\n onChange(parsed);\n },\n [onChange]\n );\n\n return (\n <div className=\"space-y-3\">\n {/ Label /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">Cache Duration</label>\n <p className=\"text-xs text-text-secondary\">How long should data be cached before refreshing?</p>\n </div>\n\n {/ Options /}\n <div className=\"space-y-2\">\n {/ Preset options /}\n {PRESET_OPTIONS.map((option) => (\n <label\n key={option.value}\n className={`\n flex items-start gap-3\n p-3\n border rounded-lg\n cursor-pointer\n transition-all\n ${disabled ? 'opacity-50 cursor-not-allowed' : ''}\n ${\n !isCustom && value === option.value\n ? 'border-action-primary-bg bg-action-primary-bg/5'\n : 'border-border-default hover:border-border-hover'\n }\n `}\n >\n <input\n type=\"radio\"\n name=\"cache-ttl\"\n checked={!isCustom && value === option.value}\n onChange={() => handlePresetChange(option.value)}\n disabled={disabled}\n className={`\n mt-0.5\n w-4 h-4\n text-action-primary-bg\n border-border-default\n focus:ring-action-primary-bg\n focus:ring-offset-0\n `}\n />\n <div className=\"flex-1\">\n <div className=\"flex items-center gap-2\">\n <span className=\"text-sm font-medium text-text-primary\">{option.label}</span>\n {option.recommended && (\n <span className=\"px-1.5 py-0.5 text-xs font-medium bg-action-primary-bg/10 text-action-primary-bg rounded\">\n Recommended\n </span>\n )}\n </div>\n <p className=\"text-xs text-text-secondary mt-0.5\">{option.description}</p>\n </div>\n </label>\n ))}\n\n {/ Custom option /}\n <label\n className={`\n flex items-start gap-3\n p-3\n border rounded-lg\n cursor-pointer\n transition-all\n ${disabled ? 'opacity-50 cursor-not-allowed' : ''}\n ${\n isCustom\n ? 'border-action-primary-bg bg-action-primary-bg/5'\n : 'border-border-default hover:border-border-hover'\n }\n `}\n >\n <input\n type=\"radio\"\n name=\"cache-ttl\"\n checked={isCustom}\n onChange={handleCustomSelect}\n disabled={disabled}\n className={`\n mt-0.5\n w-4 h-4\n text-action-primary-bg\n border-border-default\n focus:ring-action-primary-bg\n focus:ring-offset-0\n `}\n />\n <div className=\"flex-1\">\n <span className=\"text-sm font-medium text-text-primary\">Custom</span>\n <p className=\"text-xs text-text-secondary mt-0.5\">Enter a custom cache duration (30 - 86400 seconds)</p>\n {isCustom && (\n <>\n <div className=\"mt-3 flex items-center gap-2\">\n <input\n type=\"number\"\n value={customValue}\n onChange={handleCustomChange}\n disabled={disabled}\n min={30}\n max={86400}\n placeholder=\"300\"\n className={`\n w-32 px-3 py-2\n bg-bg-sunken\n border rounded-md\n text-sm text-text-primary\n placeholder-text-tertiary\n focus:outline-none\n focus:border-action-primary-bg\n focus:ring-2\n focus:ring-action-primary-bg/20\n ${error \|\| validationError ? 'border-state-error' : 'border-border-default'}\n `}\n />\n <span className=\"text-sm text-text-secondary\">seconds</span>\n {customValue && !isNaN(parseInt(customValue)) && !validationError && (\n <span className=\"text-xs text-text-tertiary\">({formatDuration(parseInt(customValue))})</span>\n )}\n </div>\n {validationError && (\n <div className=\"flex items-center gap-1 mt-1\">\n <svg\n className=\"w-3.5 h-3.5 text-state-error flex-shrink-0\"\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n />\n </svg>\n <span className=\"text-xs text-state-error\">{validationError}</span>\n </div>\n )}\n </>\n )}\n </div>\n </label>\n </div>\n\n {/ Error message /}\n {error && (\n <div className=\"flex items-start gap-2\">\n <svg\n className=\"w-4 h-4 text-state-error flex-shrink-0 mt-0.5\"\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n />\n </svg>\n <p className=\"text-xs text-state-error\">{error}</p>\n </div>\n )}\n\n {/ Info message */}\n {value !== null && !error && (\n <div className=\"flex items-center gap-2 text-xs text-text-secondary\">\n <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n />\n </svg>\n <span>Data will be cached for {formatDuration(value)} before being refreshed</span>\n </div>\n )}\n </div>\n );\n});\n\nexport default CacheTTLSelector;\n"],"mappings":"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"}
1	+ {"version":3,"file":"CacheTTLSelector.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/CacheTTLSelector.tsx"],"sourcesContent":["/*\n Cache TTL Selector\n \n Component for selecting cache duration with preset options and custom input.\n /\n\nimport { memo, useState, useEffect, useCallback, useRef } from 'react';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface CacheTTLOption {\n value: number;\n label: string;\n description: string;\n recommended?: boolean;\n}\n\ninterface CacheTTLSelectorProps {\n /* Current TTL value in seconds (null for no cache) /\n value: number \| null;\n /* Callback when value changes /\n onChange: (value: number) => void;\n /* Whether selector is disabled /\n disabled?: boolean;\n /* Error message /\n error?: string;\n}\n\n// ============================================================================\n// CONSTANTS\n// ============================================================================\n\nconst PRESET_OPTIONS: CacheTTLOption[] = [\n {\n value: 300, // 5 minutes\n label: '5 minutes',\n description: 'Best for real-time dashboards',\n },\n {\n value: 900, // 15 minutes\n label: '15 minutes',\n description: 'Balanced performance',\n recommended: true,\n },\n {\n value: 3600, // 1 hour\n label: '1 hour',\n description: 'For data that changes hourly',\n },\n {\n value: 86400, // 24 hours\n label: '24 hours',\n description: 'For daily reports',\n },\n];\n\n// ============================================================================\n// HELPERS\n// ============================================================================\n\n/\n Check if value is a preset option\n /\nfunction isPresetValue(value: number \| null): boolean {\n if (value === null) return false;\n return PRESET_OPTIONS.some((opt) => opt.value === value);\n}\n\n/\n Format seconds to human-readable string\n /\nfunction formatDuration(seconds: number): string {\n if (seconds < 60) {\n return `${seconds} seconds`;\n }\n if (seconds < 3600) {\n return `${Math.floor(seconds / 60)} minutes`;\n }\n if (seconds < 86400) {\n return `${Math.floor(seconds / 3600)} hours`;\n }\n return `${Math.floor(seconds / 86400)} days`;\n}\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const CacheTTLSelector = memo(function CacheTTLSelector({\n value,\n onChange,\n disabled = false,\n error,\n}: CacheTTLSelectorProps) {\n // Track whether custom mode is active\n const [isCustom, setIsCustom] = useState(!isPresetValue(value) && value !== null);\n const [customValue, setCustomValue] = useState(value?.toString() \|\| '');\n const [validationError, setValidationError] = useState<string \| null>(null);\n const prevValueRef = useRef(value);\n\n // Sync custom value when external value changes (using deferred update to avoid cascading renders)\n useEffect(() => {\n if (prevValueRef.current !== value) {\n prevValueRef.current = value;\n if (value !== null && !isPresetValue(value)) {\n // Defer state update to avoid synchronous setState in effect\n queueMicrotask(() => {\n setCustomValue(value.toString());\n setIsCustom(true);\n });\n }\n }\n }, [value]);\n\n // Handle preset selection\n const handlePresetChange = useCallback(\n (presetValue: number) => {\n if (disabled) return;\n setIsCustom(false);\n onChange(presetValue);\n },\n [disabled, onChange]\n );\n\n // Handle custom mode activation\n const handleCustomSelect = useCallback(() => {\n if (disabled) return;\n setIsCustom(true);\n const parsed = parseInt(customValue);\n if (!isNaN(parsed) && parsed >= 30 && parsed <= 86400) {\n onChange(parsed);\n }\n }, [disabled, customValue, onChange]);\n\n // Handle custom value change with validation\n const handleCustomChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n const inputValue = e.target.value;\n setCustomValue(inputValue);\n\n // Validate input\n if (inputValue === '') {\n setValidationError(null);\n return;\n }\n\n const parsed = parseInt(inputValue);\n\n if (isNaN(parsed)) {\n setValidationError('Please enter a valid number');\n return;\n }\n\n if (parsed < 30) {\n setValidationError('Minimum cache duration is 30 seconds');\n return;\n }\n\n if (parsed > 86400) {\n setValidationError('Maximum cache duration is 86400 seconds (24 hours)');\n return;\n }\n\n // Valid value\n setValidationError(null);\n onChange(parsed);\n },\n [onChange]\n );\n\n return (\n <div className=\"space-y-3\">\n {/ Label /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">Cache Duration</label>\n <p className=\"text-xs text-text-secondary\">How long should data be cached before refreshing?</p>\n </div>\n\n {/ Options /}\n <div className=\"space-y-2\">\n {/ Preset options /}\n {PRESET_OPTIONS.map((option) => (\n <label\n key={option.value}\n className={`\n flex items-start gap-3\n p-3\n border rounded-lg\n cursor-pointer\n transition-all\n ${disabled ? 'opacity-50 cursor-not-allowed' : ''}\n ${\n !isCustom && value === option.value\n ? 'border-action-primary-bg bg-action-primary-bg/5'\n : 'border-border-default hover:border-border-hover'\n }\n `}\n >\n <input\n type=\"radio\"\n name=\"cache-ttl\"\n checked={!isCustom && value === option.value}\n onChange={() => handlePresetChange(option.value)}\n disabled={disabled}\n className={`\n mt-0.5\n w-4 h-4\n text-action-primary-bg\n border-border-default\n focus:ring-action-primary-bg\n focus:ring-offset-0\n `}\n />\n <div className=\"flex-1\">\n <div className=\"flex items-center gap-2\">\n <span className=\"text-sm font-medium text-text-primary\">{option.label}</span>\n {option.recommended && (\n <span className=\"px-1.5 py-0.5 text-xs font-medium bg-action-primary-bg/10 text-action-primary-bg rounded\">\n Recommended\n </span>\n )}\n </div>\n <p className=\"text-xs text-text-secondary mt-0.5\">{option.description}</p>\n </div>\n </label>\n ))}\n\n {/ Custom option /}\n <label\n className={`\n flex items-start gap-3\n p-3\n border rounded-lg\n cursor-pointer\n transition-all\n ${disabled ? 'opacity-50 cursor-not-allowed' : ''}\n ${\n isCustom\n ? 'border-action-primary-bg bg-action-primary-bg/5'\n : 'border-border-default hover:border-border-hover'\n }\n `}\n >\n <input\n type=\"radio\"\n name=\"cache-ttl\"\n checked={isCustom}\n onChange={handleCustomSelect}\n disabled={disabled}\n className={`\n mt-0.5\n w-4 h-4\n text-action-primary-bg\n border-border-default\n focus:ring-action-primary-bg\n focus:ring-offset-0\n `}\n />\n <div className=\"flex-1\">\n <span className=\"text-sm font-medium text-text-primary\">Custom</span>\n <p className=\"text-xs text-text-secondary mt-0.5\">Enter a custom cache duration (30 - 86400 seconds)</p>\n {isCustom && (\n <>\n <div className=\"mt-3 flex items-center gap-2\">\n <input\n type=\"number\"\n value={customValue}\n onChange={handleCustomChange}\n disabled={disabled}\n min={30}\n max={86400}\n placeholder=\"300\"\n className={`\n w-32 px-3 py-2\n bg-bg-sunken\n border rounded-md\n text-sm text-text-primary\n placeholder-text-tertiary\n focus:outline-none\n focus:border-action-primary-bg\n focus:ring-2\n focus:ring-action-primary-bg/20\n ${error \|\| validationError ? 'border-status-error-border' : 'border-border-default'}\n `}\n />\n <span className=\"text-sm text-text-secondary\">seconds</span>\n {customValue && !isNaN(parseInt(customValue)) && !validationError && (\n <span className=\"text-xs text-text-tertiary\">({formatDuration(parseInt(customValue))})</span>\n )}\n </div>\n {validationError && (\n <div className=\"flex items-center gap-1 mt-1\">\n <svg\n className=\"w-3.5 h-3.5 text-status-error-text flex-shrink-0\"\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n />\n </svg>\n <span className=\"text-xs text-status-error-text\">{validationError}</span>\n </div>\n )}\n </>\n )}\n </div>\n </label>\n </div>\n\n {/ Error message /}\n {error && (\n <div className=\"flex items-start gap-2\">\n <svg\n className=\"w-4 h-4 text-status-error-text flex-shrink-0 mt-0.5\"\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n />\n </svg>\n <p className=\"text-xs text-status-error-text\">{error}</p>\n </div>\n )}\n\n {/ Info message */}\n {value !== null && !error && (\n <div className=\"flex items-center gap-2 text-xs text-text-secondary\">\n <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n />\n </svg>\n <span>Data will be cached for {formatDuration(value)} before being refreshed</span>\n </div>\n )}\n </div>\n );\n});\n\nexport default CacheTTLSelector;\n"],"mappings":"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"}

package/dist/bigconsole/components/datasink/DataSinkCard.js CHANGED Viewed

@@ -79,11 +79,11 @@ var o = t(function({ dataSink: t, setupState: o, onView: s, onEdit: c, onRefresh
 				})]
 			}),
 			!y && /* @__PURE__ */ r("div", {
-				className: "mb-3 p-2 bg-state-warning/10 border border-state-warning/20 rounded-md",
+				className: "mb-3 p-2 bg-status-warning-bg/10 border border-status-warning-border/20 rounded-md",
 				children: /* @__PURE__ */ i("div", {
 					className: "flex items-center justify-between",
 					children: [/* @__PURE__ */ r("span", {
-						className: "text-xs text-state-warning",
+						className: "text-xs text-status-warning-text",
 						children: "Setup incomplete"
 					}), /* @__PURE__ */ r("button", {
 						type: "button",
@@ -123,7 +123,7 @@ var o = t(function({ dataSink: t, setupState: o, onView: s, onEdit: c, onRefresh
 					/* @__PURE__ */ r("button", {
 						type: "button",
 						onClick: _,
-						className: "px-3 py-1.5 text-xs font-medium text-state-error hover:bg-state-error/10 rounded-md transition-colors",
+						className: "px-3 py-1.5 text-xs font-medium text-status-error-text hover:bg-status-error-bg/10 rounded-md transition-colors",
 						children: "Delete"
 					})
 				]

package/dist/bigconsole/components/datasink/DataSinkCard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DataSinkCard.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/DataSinkCard.tsx"],"sourcesContent":["/*\n DataSink Card\n \n Card component for displaying DataSink information in a list/grid view.\n /\n\nimport { memo, useCallback } from 'react';\nimport { formatDistanceToNow } from 'date-fns';\nimport { DataSinkStatusBadge } from './DataSinkStatusBadge';\nimport type { DataSink, DataSinkSetupState } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface DataSinkCardProps {\n /* DataSink data /\n dataSink: DataSink;\n /* Setup state override /\n setupState?: DataSinkSetupState;\n /* Callback when view is clicked /\n onView?: (id: string) => void;\n /* Callback when edit is clicked /\n onEdit?: (id: string) => void;\n /* Callback when refresh is clicked /\n onRefresh?: (id: string) => void;\n /* Callback when export is clicked /\n onExport?: (id: string) => void;\n /* Callback when delete is clicked /\n onDelete?: (id: string) => void;\n /* Callback to continue setup /\n onContinueSetup?: (id: string) => void;\n}\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const DataSinkCard = memo(function DataSinkCard({\n dataSink,\n setupState,\n onView,\n onEdit,\n onRefresh,\n onExport,\n onDelete,\n onContinueSetup,\n}: DataSinkCardProps) {\n // Event handlers\n const handleView = useCallback(\n (e: React.MouseEvent) => {\n e.stopPropagation();\n onView?.(dataSink.id);\n },\n [dataSink.id, onView]\n );\n\n const handleEdit = useCallback(\n (e: React.MouseEvent) => {\n e.stopPropagation();\n onEdit?.(dataSink.id);\n },\n [dataSink.id, onEdit]\n );\n\n const handleRefresh = useCallback(\n (e: React.MouseEvent) => {\n e.stopPropagation();\n onRefresh?.(dataSink.id);\n },\n [dataSink.id, onRefresh]\n );\n\n const handleExport = useCallback(\n (e: React.MouseEvent) => {\n e.stopPropagation();\n onExport?.(dataSink.id);\n },\n [dataSink.id, onExport]\n );\n\n const handleDelete = useCallback(\n (e: React.MouseEvent) => {\n e.stopPropagation();\n onDelete?.(dataSink.id);\n },\n [dataSink.id, onDelete]\n );\n\n const handleContinueSetup = useCallback(\n (e: React.MouseEvent) => {\n e.stopPropagation();\n onContinueSetup?.(dataSink.id);\n },\n [dataSink.id, onContinueSetup]\n );\n\n const currentSetupState = setupState ?? dataSink.setupState;\n const isSetupComplete = currentSetupState === 'completed';\n\n // Format last refreshed time\n const lastRefreshedText = dataSink.lastRefreshedAt\n ? formatDistanceToNow(new Date(dataSink.lastRefreshedAt), { addSuffix: true })\n : 'Never';\n\n return (\n <div\n className={`\n p-4\n bg-bg-surface\n border border-border-default\n rounded-lg\n hover:border-action-primary-bg/50\n transition-colors\n cursor-pointer\n `}\n onClick={handleView}\n >\n {/ Header /}\n <div className=\"flex items-start justify-between mb-3\">\n <div className=\"flex-1 min-w-0\">\n <h3 className=\"text-sm font-semibold text-text-primary truncate\">{dataSink.name \|\| 'Untitled DataSink'}</h3>\n <p className=\"text-xs text-text-secondary font-mono mt-0.5 truncate\">{dataSink.key}</p>\n </div>\n <DataSinkStatusBadge status={dataSink.status} size=\"sm\" />\n </div>\n\n {/ Description /}\n {dataSink.description && <p className=\"text-xs text-text-secondary mb-3 line-clamp-2\">{dataSink.description}</p>}\n\n {/ Stats /}\n <div className=\"flex items-center gap-4 text-xs text-text-secondary mb-3\">\n <span className=\"flex items-center gap-1\">\n <svg className=\"w-3.5 h-3.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\"\n />\n </svg>\n {lastRefreshedText}\n </span>\n {dataSink.linkedWorkflowCount !== undefined && dataSink.linkedWorkflowCount > 0 && (\n <span className=\"flex items-center gap-1\">\n <svg className=\"w-3.5 h-3.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1\"\n />\n </svg>\n {dataSink.linkedWorkflowCount} workflow{dataSink.linkedWorkflowCount !== 1 ? 's' : ''}\n </span>\n )}\n </div>\n\n {/ Setup state indicator /}\n {!isSetupComplete && (\n <div className=\"mb-3 p-2 bg-~~state~~-warning/10 border border-~~state~~-warning/20 rounded-md\">\n <div className=\"flex items-center justify-between\">\n <span className=\"text-xs text-~~state~~-warning\">Setup incomplete</span>\n <button\n type=\"button\"\n onClick={handleContinueSetup}\n className=\"text-xs font-medium text-action-primary-bg hover:underline\"\n >\n Continue\n </button>\n </div>\n </div>\n )}\n\n {/ Actions */}\n <div className=\"flex items-center gap-2 pt-2 border-t border-border-default\">\n <button\n type=\"button\"\n onClick={handleView}\n className=\"flex-1 px-3 py-1.5 text-xs font-medium text-text-primary bg-bg-sunken hover:bg-border-default rounded-md transition-colors\"\n >\n View\n </button>\n <button\n type=\"button\"\n onClick={handleEdit}\n className=\"px-3 py-1.5 text-xs font-medium text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-md transition-colors\"\n >\n Edit\n </button>\n <button\n type=\"button\"\n onClick={handleRefresh}\n className=\"px-3 py-1.5 text-xs font-medium text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-md transition-colors\"\n >\n Refresh\n </button>\n {onExport && (\n <button\n type=\"button\"\n onClick={handleExport}\n className=\"px-3 py-1.5 text-xs font-medium text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-md transition-colors\"\n >\n Export\n </button>\n )}\n <button\n type=\"button\"\n onClick={handleDelete}\n className=\"px-3 py-1.5 text-xs font-medium text-~~state~~-error hover:bg-~~state~~-error/10 rounded-md transition-colors\"\n >\n Delete\n </button>\n </div>\n </div>\n );\n});\n\nexport default DataSinkCard;\n"],"mappings":";;;;;AAsCA,IAAa,IAAe,EAAK,SAAsB,EACrD,aACA,eACA,WACA,WACA,cACA,aACA,aACA,sBACoB;CAEpB,IAAM,IAAa,GAChB,MAAwB;AAEvB,EADA,EAAE,iBAAiB,EACnB,IAAS,EAAS,GAAG;IAEvB,CAAC,EAAS,IAAI,EAAO,CACtB,EAEK,IAAa,GAChB,MAAwB;AAEvB,EADA,EAAE,iBAAiB,EACnB,IAAS,EAAS,GAAG;IAEvB,CAAC,EAAS,IAAI,EAAO,CACtB,EAEK,IAAgB,GACnB,MAAwB;AAEvB,EADA,EAAE,iBAAiB,EACnB,IAAY,EAAS,GAAG;IAE1B,CAAC,EAAS,IAAI,EAAU,CACzB,EAEK,IAAe,GAClB,MAAwB;AAEvB,EADA,EAAE,iBAAiB,EACnB,IAAW,EAAS,GAAG;IAEzB,CAAC,EAAS,IAAI,EAAS,CACxB,EAEK,IAAe,GAClB,MAAwB;AAEvB,EADA,EAAE,iBAAiB,EACnB,IAAW,EAAS,GAAG;IAEzB,CAAC,EAAS,IAAI,EAAS,CACxB,EAEK,IAAsB,GACzB,MAAwB;AAEvB,EADA,EAAE,iBAAiB,EACnB,IAAkB,EAAS,GAAG;IAEhC,CAAC,EAAS,IAAI,EAAgB,CAC/B,EAGK,KADoB,KAAc,EAAS,gBACH,aAGxC,IAAoB,EAAS,kBAC/B,EAAoB,IAAI,KAAK,EAAS,gBAAgB,EAAE,EAAE,WAAW,IAAM,CAAC,GAC5E;AAEJ,QACE,kBAAC,OAAD;EACE,WAAW;EASX,SAAS;YAVX;GAaE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,MAAD;MAAI,WAAU;gBAAoD,EAAS,QAAQ;MAAyB,CAAA,EAC5G,kBAAC,KAAD;MAAG,WAAU;gBAAyD,EAAS;MAAQ,CAAA,CACnF;QACN,kBAAC,GAAD;KAAqB,QAAQ,EAAS;KAAQ,MAAK;KAAO,CAAA,CACtD;;GAGL,EAAS,eAAe,kBAAC,KAAD;IAAG,WAAU;cAAiD,EAAS;IAAgB,CAAA;GAGhH,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,QAAD;KAAM,WAAU;eAAhB,CACE,kBAAC,OAAD;MAAK,WAAU;MAAc,MAAK;MAAO,QAAO;MAAe,SAAQ;gBACrE,kBAAC,QAAD;OACE,eAAc;OACd,gBAAe;OACf,aAAa;OACb,GAAE;OACF,CAAA;MACE,CAAA,EACL,EACI;QACN,EAAS,wBAAwB,KAAA,KAAa,EAAS,sBAAsB,KAC5E,kBAAC,QAAD;KAAM,WAAU;eAAhB;MACE,kBAAC,OAAD;OAAK,WAAU;OAAc,MAAK;OAAO,QAAO;OAAe,SAAQ;iBACrE,kBAAC,QAAD;QACE,eAAc;QACd,gBAAe;QACf,aAAa;QACb,GAAE;QACF,CAAA;OACE,CAAA;MACL,EAAS;MAAoB;MAAU,EAAS,wBAAwB,IAAU,KAAN;MACxE;OAEL;;GAGL,CAAC,KACA,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,QAAD;MAAM,WAAU;~~gBAA6B~~;MAAuB,CAAA,~~EACpE~~,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;gBACX;MAEQ,CAAA,CACL;;IACF,CAAA;GAIR,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;gBACX;MAEQ,CAAA;KACT,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;gBACX;MAEQ,CAAA;KACT,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;gBACX;MAEQ,CAAA;KACR,KACC,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;gBACX;MAEQ,CAAA;KAEX,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;gBACX;MAEQ,CAAA;KACL;;GACF;;EAER"}
1	+ {"version":3,"file":"DataSinkCard.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/DataSinkCard.tsx"],"sourcesContent":["/*\n DataSink Card\n \n Card component for displaying DataSink information in a list/grid view.\n /\n\nimport { memo, useCallback } from 'react';\nimport { formatDistanceToNow } from 'date-fns';\nimport { DataSinkStatusBadge } from './DataSinkStatusBadge';\nimport type { DataSink, DataSinkSetupState } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface DataSinkCardProps {\n /* DataSink data /\n dataSink: DataSink;\n /* Setup state override /\n setupState?: DataSinkSetupState;\n /* Callback when view is clicked /\n onView?: (id: string) => void;\n /* Callback when edit is clicked /\n onEdit?: (id: string) => void;\n /* Callback when refresh is clicked /\n onRefresh?: (id: string) => void;\n /* Callback when export is clicked /\n onExport?: (id: string) => void;\n /* Callback when delete is clicked /\n onDelete?: (id: string) => void;\n /* Callback to continue setup /\n onContinueSetup?: (id: string) => void;\n}\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const DataSinkCard = memo(function DataSinkCard({\n dataSink,\n setupState,\n onView,\n onEdit,\n onRefresh,\n onExport,\n onDelete,\n onContinueSetup,\n}: DataSinkCardProps) {\n // Event handlers\n const handleView = useCallback(\n (e: React.MouseEvent) => {\n e.stopPropagation();\n onView?.(dataSink.id);\n },\n [dataSink.id, onView]\n );\n\n const handleEdit = useCallback(\n (e: React.MouseEvent) => {\n e.stopPropagation();\n onEdit?.(dataSink.id);\n },\n [dataSink.id, onEdit]\n );\n\n const handleRefresh = useCallback(\n (e: React.MouseEvent) => {\n e.stopPropagation();\n onRefresh?.(dataSink.id);\n },\n [dataSink.id, onRefresh]\n );\n\n const handleExport = useCallback(\n (e: React.MouseEvent) => {\n e.stopPropagation();\n onExport?.(dataSink.id);\n },\n [dataSink.id, onExport]\n );\n\n const handleDelete = useCallback(\n (e: React.MouseEvent) => {\n e.stopPropagation();\n onDelete?.(dataSink.id);\n },\n [dataSink.id, onDelete]\n );\n\n const handleContinueSetup = useCallback(\n (e: React.MouseEvent) => {\n e.stopPropagation();\n onContinueSetup?.(dataSink.id);\n },\n [dataSink.id, onContinueSetup]\n );\n\n const currentSetupState = setupState ?? dataSink.setupState;\n const isSetupComplete = currentSetupState === 'completed';\n\n // Format last refreshed time\n const lastRefreshedText = dataSink.lastRefreshedAt\n ? formatDistanceToNow(new Date(dataSink.lastRefreshedAt), { addSuffix: true })\n : 'Never';\n\n return (\n <div\n className={`\n p-4\n bg-bg-surface\n border border-border-default\n rounded-lg\n hover:border-action-primary-bg/50\n transition-colors\n cursor-pointer\n `}\n onClick={handleView}\n >\n {/ Header /}\n <div className=\"flex items-start justify-between mb-3\">\n <div className=\"flex-1 min-w-0\">\n <h3 className=\"text-sm font-semibold text-text-primary truncate\">{dataSink.name \|\| 'Untitled DataSink'}</h3>\n <p className=\"text-xs text-text-secondary font-mono mt-0.5 truncate\">{dataSink.key}</p>\n </div>\n <DataSinkStatusBadge status={dataSink.status} size=\"sm\" />\n </div>\n\n {/ Description /}\n {dataSink.description && <p className=\"text-xs text-text-secondary mb-3 line-clamp-2\">{dataSink.description}</p>}\n\n {/ Stats /}\n <div className=\"flex items-center gap-4 text-xs text-text-secondary mb-3\">\n <span className=\"flex items-center gap-1\">\n <svg className=\"w-3.5 h-3.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\"\n />\n </svg>\n {lastRefreshedText}\n </span>\n {dataSink.linkedWorkflowCount !== undefined && dataSink.linkedWorkflowCount > 0 && (\n <span className=\"flex items-center gap-1\">\n <svg className=\"w-3.5 h-3.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1\"\n />\n </svg>\n {dataSink.linkedWorkflowCount} workflow{dataSink.linkedWorkflowCount !== 1 ? 's' : ''}\n </span>\n )}\n </div>\n\n {/ Setup state indicator /}\n {!isSetupComplete && (\n <div className=\"mb-3 p-2 bg-status-warning-bg/10 border border-status-warning-border/20 rounded-md\">\n <div className=\"flex items-center justify-between\">\n <span className=\"text-xs text-status-warning-text\">Setup incomplete</span>\n <button\n type=\"button\"\n onClick={handleContinueSetup}\n className=\"text-xs font-medium text-action-primary-bg hover:underline\"\n >\n Continue\n </button>\n </div>\n </div>\n )}\n\n {/ Actions */}\n <div className=\"flex items-center gap-2 pt-2 border-t border-border-default\">\n <button\n type=\"button\"\n onClick={handleView}\n className=\"flex-1 px-3 py-1.5 text-xs font-medium text-text-primary bg-bg-sunken hover:bg-border-default rounded-md transition-colors\"\n >\n View\n </button>\n <button\n type=\"button\"\n onClick={handleEdit}\n className=\"px-3 py-1.5 text-xs font-medium text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-md transition-colors\"\n >\n Edit\n </button>\n <button\n type=\"button\"\n onClick={handleRefresh}\n className=\"px-3 py-1.5 text-xs font-medium text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-md transition-colors\"\n >\n Refresh\n </button>\n {onExport && (\n <button\n type=\"button\"\n onClick={handleExport}\n className=\"px-3 py-1.5 text-xs font-medium text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-md transition-colors\"\n >\n Export\n </button>\n )}\n <button\n type=\"button\"\n onClick={handleDelete}\n className=\"px-3 py-1.5 text-xs font-medium text-status-error-text hover:bg-status-error-bg/10 rounded-md transition-colors\"\n >\n Delete\n </button>\n </div>\n </div>\n );\n});\n\nexport default DataSinkCard;\n"],"mappings":"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"}

package/dist/bigconsole/components/datasink/DataSinkDeleteDialog.js CHANGED Viewed

@@ -43,9 +43,9 @@ var i = e(function({ dataSink: e, isOpen: i, onClose: a, onConfirm: o, isDeletin
 							})]
 						}),
 						e.linkedWorkflowCount && e.linkedWorkflowCount > 0 && /* @__PURE__ */ n("div", {
-							className: "mt-4 p-3 bg-state-warning/10 border border-state-warning/20 rounded-md",
+							className: "mt-4 p-3 bg-status-warning-bg/10 border border-status-warning-border/20 rounded-md",
 							children: /* @__PURE__ */ r("p", {
-								className: "text-sm text-state-warning",
+								className: "text-sm text-status-warning-text",
 								children: [
 									"This DataSink is linked to ",
 									e.linkedWorkflowCount,
@@ -56,7 +56,7 @@ var i = e(function({ dataSink: e, isOpen: i, onClose: a, onConfirm: o, isDeletin
 							})
 						}),
 						/* @__PURE__ */ n("p", {
-							className: "text-sm text-state-error mt-4",
+							className: "text-sm text-status-error-text mt-4",
 							children: "This action cannot be undone."
 						})
 					]
@@ -73,7 +73,7 @@ var i = e(function({ dataSink: e, isOpen: i, onClose: a, onConfirm: o, isDeletin
 						type: "button",
 						onClick: o,
 						disabled: s,
-						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            ",
+						className: "\n              px-4 py-2\n              text-sm font-medium\n              text-white\n              bg-status-error-bg\n              hover:bg-status-error-bg/90\n              disabled:opacity-50 disabled:cursor-not-allowed\n              rounded-md\n              transition-colors\n            ",
 						children: s ? "Deleting..." : "Delete"
 					})]
 				})

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

	@@ -1 +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-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"}
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-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-status-warning-bg/10 border border-status-warning-border/20 rounded-md\">\n <p className=\"text-sm text-status-warning-text\">\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-status-error-text 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-status-error-bg\n hover:bg-status-error-bg/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;SAAgD;SAClB,EAAS;SAAoB;SACxD,EAAS,wBAAwB,IAAU,KAAN;SAAS;SAC7C;;OACA,CAAA;MAGR,kBAAC,KAAD;OAAG,WAAU;iBAAsC;OAAiC,CAAA;MAChF;;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/DataSinkStatusBadge.js CHANGED Viewed

@@ -12,8 +12,8 @@ var r = e(function({ status: e, size: r = "md", showIcon: i = !0 }) {
 		lg: "w-5 h-5"
 	}, s = {
 		ready: {
-			bg: "bg-state-success/10",
-			text: "text-state-success",
+			bg: "bg-status-success-bg/10",
+			text: "text-status-success-text",
 			icon: /* @__PURE__ */ t("svg", {
 				className: o[r],
 				fill: "none",
@@ -29,8 +29,8 @@ var r = e(function({ status: e, size: r = "md", showIcon: i = !0 }) {
 			label: "Ready"
 		},
 		error: {
-			bg: "bg-state-error/10",
-			text: "text-state-error",
+			bg: "bg-status-error-bg/10",
+			text: "text-status-error-text",
 			icon: /* @__PURE__ */ t("svg", {
 				className: o[r],
 				fill: "none",
@@ -46,8 +46,8 @@ var r = e(function({ status: e, size: r = "md", showIcon: i = !0 }) {
 			label: "Error"
 		},
 		stale: {
-			bg: "bg-state-warning/10",
-			text: "text-state-warning",
+			bg: "bg-status-warning-bg/10",
+			text: "text-status-warning-text",
 			icon: /* @__PURE__ */ t("svg", {
 				className: o[r],
 				fill: "none",

package/dist/bigconsole/components/datasink/DataSinkStatusBadge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DataSinkStatusBadge.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/DataSinkStatusBadge.tsx"],"sourcesContent":["/*\n DataSink Status Badge\n \n Display badge showing DataSink status with icon and color coding.\n /\n\nimport { memo, type ReactNode } from 'react';\nimport type { DataSinkStatus } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface DataSinkStatusBadgeProps {\n /* DataSink status /\n status: DataSinkStatus;\n /* Badge size /\n size?: 'sm' \| 'md' \| 'lg';\n /* Whether to show icon */\n showIcon?: boolean;\n}\n\ninterface StatusConfig {\n bg: string;\n text: string;\n icon: ReactNode;\n label: string;\n}\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const DataSinkStatusBadge = memo(function DataSinkStatusBadge({\n status,\n size = 'md',\n showIcon = true,\n}: DataSinkStatusBadgeProps) {\n const sizeClasses: Record<string, string> = {\n sm: 'px-2 py-0.5 text-xs',\n md: 'px-2.5 py-1 text-sm',\n lg: 'px-3 py-1.5 text-base',\n };\n\n const iconSizes: Record<string, string> = {\n sm: 'w-3 h-3',\n md: 'w-4 h-4',\n lg: 'w-5 h-5',\n };\n\n const statusConfigs: Record<DataSinkStatus, StatusConfig> = {\n ready: {\n bg: 'bg-~~state~~-success/10',\n text: 'text-~~state~~-success',\n icon: (\n <svg className={iconSizes[size]} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 13l4 4L19 7\" />\n </svg>\n ),\n label: 'Ready',\n },\n error: {\n bg: 'bg-~~state~~-error/10',\n text: 'text-~~state~~-error',\n icon: (\n <svg className={iconSizes[size]} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n />\n </svg>\n ),\n label: 'Error',\n },\n stale: {\n bg: 'bg-~~state~~-warning/10',\n text: 'text-~~state~~-warning',\n icon: (\n <svg className={iconSizes[size]} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\"\n />\n </svg>\n ),\n label: 'Stale',\n },\n refreshing: {\n bg: 'bg-action-primary-bg/10',\n text: 'text-action-primary-bg',\n icon: (\n <svg className={`${iconSizes[size]} animate-spin`} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"\n />\n </svg>\n ),\n label: 'Refreshing',\n },\n };\n\n const config = statusConfigs[status];\n\n if (!config) {\n return null;\n }\n\n return (\n <span\n className={`\n inline-flex items-center gap-1.5\n ${sizeClasses[size]}\n ${config.bg}\n ${config.text}\n rounded-full\n font-medium\n `}\n >\n {showIcon && config.icon}\n <span>{config.label}</span>\n </span>\n );\n});\n\nexport default DataSinkStatusBadge;\n"],"mappings":";;;AAiCA,IAAa,IAAsB,EAAK,SAA6B,EACnE,WACA,UAAO,MACP,cAAW,MACgB;CAC3B,IAAM,IAAsC;EAC1C,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EAEK,IAAoC;EACxC,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EA4DK,IA1DsD;EAC1D,OAAO;GACL,IAAI;GACJ,MAAM;GACN,MACE,kBAAC,OAAD;IAAK,WAAW,EAAU;IAAO,MAAK;IAAO,QAAO;IAAe,SAAQ;cACzE,kBAAC,QAAD;KAAM,eAAc;KAAQ,gBAAe;KAAQ,aAAa;KAAG,GAAE;KAAmB,CAAA;IACpF,CAAA;GAER,OAAO;GACR;EACD,OAAO;GACL,IAAI;GACJ,MAAM;GACN,MACE,kBAAC,OAAD;IAAK,WAAW,EAAU;IAAO,MAAK;IAAO,QAAO;IAAe,SAAQ;cACzE,kBAAC,QAAD;KACE,eAAc;KACd,gBAAe;KACf,aAAa;KACb,GAAE;KACF,CAAA;IACE,CAAA;GAER,OAAO;GACR;EACD,OAAO;GACL,IAAI;GACJ,MAAM;GACN,MACE,kBAAC,OAAD;IAAK,WAAW,EAAU;IAAO,MAAK;IAAO,QAAO;IAAe,SAAQ;cACzE,kBAAC,QAAD;KACE,eAAc;KACd,gBAAe;KACf,aAAa;KACb,GAAE;KACF,CAAA;IACE,CAAA;GAER,OAAO;GACR;EACD,YAAY;GACV,IAAI;GACJ,MAAM;GACN,MACE,kBAAC,OAAD;IAAK,WAAW,GAAG,EAAU,GAAM;IAAgB,MAAK;IAAO,QAAO;IAAe,SAAQ;cAC3F,kBAAC,QAAD;KACE,eAAc;KACd,gBAAe;KACf,aAAa;KACb,GAAE;KACF,CAAA;IACE,CAAA;GAER,OAAO;GACR;EACF,CAE4B;AAM7B,QAJK,IAKH,kBAAC,QAAD;EACE,WAAW;;UAEP,EAAY,GAAM;UAClB,EAAO,GAAG;UACV,EAAO,KAAK;;;;YALlB,CAUG,KAAY,EAAO,MACpB,kBAAC,QAAD,EAAA,UAAO,EAAO,OAAa,CAAA,CACtB;MAhBA;EAkBT"}
1	+ {"version":3,"file":"DataSinkStatusBadge.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/DataSinkStatusBadge.tsx"],"sourcesContent":["/*\n DataSink Status Badge\n \n Display badge showing DataSink status with icon and color coding.\n /\n\nimport { memo, type ReactNode } from 'react';\nimport type { DataSinkStatus } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface DataSinkStatusBadgeProps {\n /* DataSink status /\n status: DataSinkStatus;\n /* Badge size /\n size?: 'sm' \| 'md' \| 'lg';\n /* Whether to show icon */\n showIcon?: boolean;\n}\n\ninterface StatusConfig {\n bg: string;\n text: string;\n icon: ReactNode;\n label: string;\n}\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const DataSinkStatusBadge = memo(function DataSinkStatusBadge({\n status,\n size = 'md',\n showIcon = true,\n}: DataSinkStatusBadgeProps) {\n const sizeClasses: Record<string, string> = {\n sm: 'px-2 py-0.5 text-xs',\n md: 'px-2.5 py-1 text-sm',\n lg: 'px-3 py-1.5 text-base',\n };\n\n const iconSizes: Record<string, string> = {\n sm: 'w-3 h-3',\n md: 'w-4 h-4',\n lg: 'w-5 h-5',\n };\n\n const statusConfigs: Record<DataSinkStatus, StatusConfig> = {\n ready: {\n bg: 'bg-status-success-bg/10',\n text: 'text-status-success-text',\n icon: (\n <svg className={iconSizes[size]} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 13l4 4L19 7\" />\n </svg>\n ),\n label: 'Ready',\n },\n error: {\n bg: 'bg-status-error-bg/10',\n text: 'text-status-error-text',\n icon: (\n <svg className={iconSizes[size]} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n />\n </svg>\n ),\n label: 'Error',\n },\n stale: {\n bg: 'bg-status-warning-bg/10',\n text: 'text-status-warning-text',\n icon: (\n <svg className={iconSizes[size]} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\"\n />\n </svg>\n ),\n label: 'Stale',\n },\n refreshing: {\n bg: 'bg-action-primary-bg/10',\n text: 'text-action-primary-bg',\n icon: (\n <svg className={`${iconSizes[size]} animate-spin`} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"\n />\n </svg>\n ),\n label: 'Refreshing',\n },\n };\n\n const config = statusConfigs[status];\n\n if (!config) {\n return null;\n }\n\n return (\n <span\n className={`\n inline-flex items-center gap-1.5\n ${sizeClasses[size]}\n ${config.bg}\n ${config.text}\n rounded-full\n font-medium\n `}\n >\n {showIcon && config.icon}\n <span>{config.label}</span>\n </span>\n );\n});\n\nexport default DataSinkStatusBadge;\n"],"mappings":";;;AAiCA,IAAa,IAAsB,EAAK,SAA6B,EACnE,WACA,UAAO,MACP,cAAW,MACgB;CAC3B,IAAM,IAAsC;EAC1C,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EAEK,IAAoC;EACxC,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EA4DK,IA1DsD;EAC1D,OAAO;GACL,IAAI;GACJ,MAAM;GACN,MACE,kBAAC,OAAD;IAAK,WAAW,EAAU;IAAO,MAAK;IAAO,QAAO;IAAe,SAAQ;cACzE,kBAAC,QAAD;KAAM,eAAc;KAAQ,gBAAe;KAAQ,aAAa;KAAG,GAAE;KAAmB,CAAA;IACpF,CAAA;GAER,OAAO;GACR;EACD,OAAO;GACL,IAAI;GACJ,MAAM;GACN,MACE,kBAAC,OAAD;IAAK,WAAW,EAAU;IAAO,MAAK;IAAO,QAAO;IAAe,SAAQ;cACzE,kBAAC,QAAD;KACE,eAAc;KACd,gBAAe;KACf,aAAa;KACb,GAAE;KACF,CAAA;IACE,CAAA;GAER,OAAO;GACR;EACD,OAAO;GACL,IAAI;GACJ,MAAM;GACN,MACE,kBAAC,OAAD;IAAK,WAAW,EAAU;IAAO,MAAK;IAAO,QAAO;IAAe,SAAQ;cACzE,kBAAC,QAAD;KACE,eAAc;KACd,gBAAe;KACf,aAAa;KACb,GAAE;KACF,CAAA;IACE,CAAA;GAER,OAAO;GACR;EACD,YAAY;GACV,IAAI;GACJ,MAAM;GACN,MACE,kBAAC,OAAD;IAAK,WAAW,GAAG,EAAU,GAAM;IAAgB,MAAK;IAAO,QAAO;IAAe,SAAQ;cAC3F,kBAAC,QAAD;KACE,eAAc;KACd,gBAAe;KACf,aAAa;KACb,GAAE;KACF,CAAA;IACE,CAAA;GAER,OAAO;GACR;EACF,CAE4B;AAM7B,QAJK,IAKH,kBAAC,QAAD;EACE,WAAW;;UAEP,EAAY,GAAM;UAClB,EAAO,GAAG;UACV,EAAO,KAAK;;;;YALlB,CAUG,KAAY,EAAO,MACpB,kBAAC,QAAD,EAAA,UAAO,EAAO,OAAa,CAAA,CACtB;MAhBA;EAkBT"}

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

@@ -8,21 +8,21 @@ function o(e) {
 	switch (e) {
 		case "active": return {
 			label: "Active",
-			bgColor: "bg-state-success/10",
-			textColor: "text-state-success",
-			dotColor: "bg-state-success"
+			bgColor: "bg-status-success-bg/10",
+			textColor: "text-status-success-text",
+			dotColor: "bg-status-success-bg"
 		};
 		case "paused": return {
 			label: "Paused",
-			bgColor: "bg-state-warning/10",
-			textColor: "text-state-warning",
-			dotColor: "bg-state-warning"
+			bgColor: "bg-status-warning-bg/10",
+			textColor: "text-status-warning-text",
+			dotColor: "bg-status-warning-bg"
 		};
 		case "error": return {
 			label: "Error",
-			bgColor: "bg-state-error/10",
-			textColor: "text-state-error",
-			dotColor: "bg-state-error"
+			bgColor: "bg-status-error-bg/10",
+			textColor: "text-status-error-text",
+			dotColor: "bg-status-error-bg"
 		};
 		case "archived": return {
 			label: "Archived",

package/dist/bigconsole/components/datasink/LinkedWorkflowsPanel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LinkedWorkflowsPanel.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/LinkedWorkflowsPanel.tsx"],"sourcesContent":["/*\n Linked Workflows Panel\n \n Panel displaying workflows linked to a DataSink.\n /\n\nimport { memo } from 'react';\nimport { formatDistanceToNow } from 'date-fns';\nimport { AppLink } from '../../contexts';\nimport type { DataSinkWorkflowLink, FluidGridsWorkflowStatus } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface LinkedWorkflowsPanelProps {\n /* Workflow links /\n workflowLinks?: DataSinkWorkflowLink[];\n /* Whether loading /\n isLoading?: boolean;\n}\n\ninterface StatusConfig {\n label: string;\n bgColor: string;\n textColor: string;\n dotColor: string;\n}\n\n// ============================================================================\n// HELPERS\n// ============================================================================\n\n/\n Get status display configuration\n /\nfunction getStatusConfig(status: FluidGridsWorkflowStatus): StatusConfig {\n switch (status) {\n case 'active':\n return {\n label: 'Active',\n bgColor: 'bg-state-success/10',\n textColor: 'text-state-success',\n dotColor: 'bg-state-success',\n };\n case 'paused':\n return {\n label: 'Paused',\n bgColor: 'bg-state-warning/10',\n textColor: 'text-state-warning',\n dotColor: 'bg-state-warning',\n };\n case 'error':\n return {\n label: 'Error',\n bgColor: 'bg-state-error/10',\n textColor: 'text-state-error',\n dotColor: 'bg-state-error',\n };\n case 'archived':\n return {\n label: 'Archived',\n bgColor: 'bg-text-tertiary/10',\n textColor: 'text-text-tertiary',\n dotColor: 'bg-text-tertiary',\n };\n default:\n return {\n label: 'Draft',\n bgColor: 'bg-action-primary-bg/10',\n textColor: 'text-action-primary-bg',\n dotColor: 'bg-action-primary-bg',\n };\n }\n}\n\n// ============================================================================\n// ICONS\n// ============================================================================\n\nconst WorkflowIcon = ({ className }: { className?: string }) => (\n <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M13 10V3L4 14h7v7l9-11h-7z\" />\n </svg>\n);\n\nconst LinkIcon = ({ className }: { className?: string }) => (\n <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1\"\n />\n </svg>\n);\n\nconst ChevronRightIcon = ({ 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// COMPONENT\n// ============================================================================\n\nexport const LinkedWorkflowsPanel = memo(function LinkedWorkflowsPanel({\n workflowLinks = [],\n isLoading = false,\n}: LinkedWorkflowsPanelProps) {\n const enabledLinks = workflowLinks.filter((link) => link.isEnabled);\n const disabledLinks = workflowLinks.filter((link) => !link.isEnabled);\n\n return (\n <div className=\"border border-border-default rounded-lg bg-bg-surface overflow-hidden\">\n {/ Header /}\n <div className=\"px-4 py-3 border-b border-border-default bg-bg-sunken flex items-center justify-between\">\n <div className=\"flex items-center gap-2\">\n <LinkIcon className=\"w-4 h-4 text-text-secondary\" />\n <h3 className=\"text-sm font-semibold text-text-primary\">Linked Workflows</h3>\n </div>\n <span className=\"text-xs text-text-secondary\">\n {workflowLinks.length} workflow{workflowLinks.length !== 1 ? 's' : ''}\n </span>\n </div>\n\n {/ Content /}\n <div className=\"p-4\">\n {/ Loading state /}\n {isLoading ? (\n <div className=\"flex items-center justify-center py-8\">\n <svg className=\"w-6 h-6 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 ) : workflowLinks.length === 0 ? (\n / Empty state /\n <div className=\"text-center py-8\">\n <WorkflowIcon className=\"w-10 h-10 text-text-tertiary mx-auto mb-3\" />\n <p className=\"text-sm text-text-secondary mb-2\">No workflows linked</p>\n <p className=\"text-xs text-text-tertiary\">\n Link workflows from the Workflows page to push data to this DataSink\n </p>\n <AppLink\n to=\"/workflows\"\n className={`\n inline-flex items-center gap-1\n mt-4\n text-xs font-medium\n text-action-primary-bg\n hover:underline\n `}\n >\n Go to Workflows\n <ChevronRightIcon className=\"w-3 h-3\" />\n </AppLink>\n </div>\n ) : (\n / Workflow list /\n <div className=\"space-y-3\">\n {/ Enabled workflows /}\n {enabledLinks.map((link) => {\n if (!link.workflow) return null;\n const statusConfig = getStatusConfig(link.workflow.status);\n return (\n <AppLink\n key={link.id}\n to={`/workflows/${link.workflow.id}`}\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 `}\n >\n <div className=\"flex items-center gap-3 min-w-0\">\n <WorkflowIcon className=\"w-5 h-5 text-text-secondary flex-shrink-0\" />\n <div className=\"min-w-0\">\n <p className=\"text-sm font-medium text-text-primary truncate group-hover:text-action-primary-bg\">\n {link.workflow.name}\n </p>\n <p className=\"text-xs text-text-secondary font-mono truncate\">{link.workflow.key}</p>\n </div>\n </div>\n <div className=\"flex items-center gap-3 flex-shrink-0\">\n {link.workflow.lastExecutedAt && (\n <span className=\"text-xs text-text-secondary hidden sm:inline\">\n {formatDistanceToNow(new Date(link.workflow.lastExecutedAt), {\n addSuffix: true,\n })}\n </span>\n )}\n <div className={`flex items-center gap-1.5 px-2 py-0.5 rounded-full ${statusConfig.bgColor}`}>\n <span className={`w-1.5 h-1.5 rounded-full ${statusConfig.dotColor}`} />\n <span className={`text-xs font-medium ${statusConfig.textColor}`}>{statusConfig.label}</span>\n </div>\n </div>\n </AppLink>\n );\n })}\n\n {/ Disabled workflows */}\n {disabledLinks.length > 0 && (\n <>\n <div className=\"pt-2 mt-2 border-t border-border-muted\">\n <p className=\"text-xs text-text-tertiary mb-2\">Disabled ({disabledLinks.length})</p>\n </div>\n {disabledLinks.map((link) => {\n if (!link.workflow) return null;\n return (\n <AppLink\n key={link.id}\n to={`/workflows/${link.workflow.id}`}\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 `}\n >\n <div className=\"flex items-center gap-3 min-w-0\">\n <WorkflowIcon className=\"w-5 h-5 text-text-tertiary flex-shrink-0\" />\n <div className=\"min-w-0\">\n <p className=\"text-sm font-medium text-text-secondary truncate group-hover:text-text-primary\">\n {link.workflow.name}\n </p>\n <p className=\"text-xs text-text-tertiary font-mono truncate\">{link.workflow.key}</p>\n </div>\n </div>\n <span className=\"text-xs text-text-tertiary flex-shrink-0\">Disabled</span>\n </AppLink>\n );\n })}\n </>\n )}\n </div>\n )}\n </div>\n </div>\n );\n});\n\nexport default LinkedWorkflowsPanel;\n"],"mappings":"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"}
1	+ {"version":3,"file":"LinkedWorkflowsPanel.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/LinkedWorkflowsPanel.tsx"],"sourcesContent":["/*\n Linked Workflows Panel\n \n Panel displaying workflows linked to a DataSink.\n /\n\nimport { memo } from 'react';\nimport { formatDistanceToNow } from 'date-fns';\nimport { AppLink } from '../../contexts';\nimport type { DataSinkWorkflowLink, FluidGridsWorkflowStatus } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface LinkedWorkflowsPanelProps {\n /* Workflow links /\n workflowLinks?: DataSinkWorkflowLink[];\n /* Whether loading /\n isLoading?: boolean;\n}\n\ninterface StatusConfig {\n label: string;\n bgColor: string;\n textColor: string;\n dotColor: string;\n}\n\n// ============================================================================\n// HELPERS\n// ============================================================================\n\n/\n Get status display configuration\n /\nfunction getStatusConfig(status: FluidGridsWorkflowStatus): StatusConfig {\n switch (status) {\n case 'active':\n return {\n label: 'Active',\n bgColor: 'bg-status-success-bg/10',\n textColor: 'text-status-success-text',\n dotColor: 'bg-status-success-bg',\n };\n case 'paused':\n return {\n label: 'Paused',\n bgColor: 'bg-status-warning-bg/10',\n textColor: 'text-status-warning-text',\n dotColor: 'bg-status-warning-bg',\n };\n case 'error':\n return {\n label: 'Error',\n bgColor: 'bg-status-error-bg/10',\n textColor: 'text-status-error-text',\n dotColor: 'bg-status-error-bg',\n };\n case 'archived':\n return {\n label: 'Archived',\n bgColor: 'bg-text-tertiary/10',\n textColor: 'text-text-tertiary',\n dotColor: 'bg-text-tertiary',\n };\n default:\n return {\n label: 'Draft',\n bgColor: 'bg-action-primary-bg/10',\n textColor: 'text-action-primary-bg',\n dotColor: 'bg-action-primary-bg',\n };\n }\n}\n\n// ============================================================================\n// ICONS\n// ============================================================================\n\nconst WorkflowIcon = ({ className }: { className?: string }) => (\n <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M13 10V3L4 14h7v7l9-11h-7z\" />\n </svg>\n);\n\nconst LinkIcon = ({ className }: { className?: string }) => (\n <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1\"\n />\n </svg>\n);\n\nconst ChevronRightIcon = ({ 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// COMPONENT\n// ============================================================================\n\nexport const LinkedWorkflowsPanel = memo(function LinkedWorkflowsPanel({\n workflowLinks = [],\n isLoading = false,\n}: LinkedWorkflowsPanelProps) {\n const enabledLinks = workflowLinks.filter((link) => link.isEnabled);\n const disabledLinks = workflowLinks.filter((link) => !link.isEnabled);\n\n return (\n <div className=\"border border-border-default rounded-lg bg-bg-surface overflow-hidden\">\n {/ Header /}\n <div className=\"px-4 py-3 border-b border-border-default bg-bg-sunken flex items-center justify-between\">\n <div className=\"flex items-center gap-2\">\n <LinkIcon className=\"w-4 h-4 text-text-secondary\" />\n <h3 className=\"text-sm font-semibold text-text-primary\">Linked Workflows</h3>\n </div>\n <span className=\"text-xs text-text-secondary\">\n {workflowLinks.length} workflow{workflowLinks.length !== 1 ? 's' : ''}\n </span>\n </div>\n\n {/ Content /}\n <div className=\"p-4\">\n {/ Loading state /}\n {isLoading ? (\n <div className=\"flex items-center justify-center py-8\">\n <svg className=\"w-6 h-6 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 ) : workflowLinks.length === 0 ? (\n / Empty state /\n <div className=\"text-center py-8\">\n <WorkflowIcon className=\"w-10 h-10 text-text-tertiary mx-auto mb-3\" />\n <p className=\"text-sm text-text-secondary mb-2\">No workflows linked</p>\n <p className=\"text-xs text-text-tertiary\">\n Link workflows from the Workflows page to push data to this DataSink\n </p>\n <AppLink\n to=\"/workflows\"\n className={`\n inline-flex items-center gap-1\n mt-4\n text-xs font-medium\n text-action-primary-bg\n hover:underline\n `}\n >\n Go to Workflows\n <ChevronRightIcon className=\"w-3 h-3\" />\n </AppLink>\n </div>\n ) : (\n / Workflow list /\n <div className=\"space-y-3\">\n {/ Enabled workflows /}\n {enabledLinks.map((link) => {\n if (!link.workflow) return null;\n const statusConfig = getStatusConfig(link.workflow.status);\n return (\n <AppLink\n key={link.id}\n to={`/workflows/${link.workflow.id}`}\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 `}\n >\n <div className=\"flex items-center gap-3 min-w-0\">\n <WorkflowIcon className=\"w-5 h-5 text-text-secondary flex-shrink-0\" />\n <div className=\"min-w-0\">\n <p className=\"text-sm font-medium text-text-primary truncate group-hover:text-action-primary-bg\">\n {link.workflow.name}\n </p>\n <p className=\"text-xs text-text-secondary font-mono truncate\">{link.workflow.key}</p>\n </div>\n </div>\n <div className=\"flex items-center gap-3 flex-shrink-0\">\n {link.workflow.lastExecutedAt && (\n <span className=\"text-xs text-text-secondary hidden sm:inline\">\n {formatDistanceToNow(new Date(link.workflow.lastExecutedAt), {\n addSuffix: true,\n })}\n </span>\n )}\n <div className={`flex items-center gap-1.5 px-2 py-0.5 rounded-full ${statusConfig.bgColor}`}>\n <span className={`w-1.5 h-1.5 rounded-full ${statusConfig.dotColor}`} />\n <span className={`text-xs font-medium ${statusConfig.textColor}`}>{statusConfig.label}</span>\n </div>\n </div>\n </AppLink>\n );\n })}\n\n {/ Disabled workflows */}\n {disabledLinks.length > 0 && (\n <>\n <div className=\"pt-2 mt-2 border-t border-border-muted\">\n <p className=\"text-xs text-text-tertiary mb-2\">Disabled ({disabledLinks.length})</p>\n </div>\n {disabledLinks.map((link) => {\n if (!link.workflow) return null;\n return (\n <AppLink\n key={link.id}\n to={`/workflows/${link.workflow.id}`}\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 `}\n >\n <div className=\"flex items-center gap-3 min-w-0\">\n <WorkflowIcon className=\"w-5 h-5 text-text-tertiary flex-shrink-0\" />\n <div className=\"min-w-0\">\n <p className=\"text-sm font-medium text-text-secondary truncate group-hover:text-text-primary\">\n {link.workflow.name}\n </p>\n <p className=\"text-xs text-text-tertiary font-mono truncate\">{link.workflow.key}</p>\n </div>\n </div>\n <span className=\"text-xs text-text-tertiary flex-shrink-0\">Disabled</span>\n </AppLink>\n );\n })}\n </>\n )}\n </div>\n )}\n </div>\n </div>\n );\n});\n\nexport default LinkedWorkflowsPanel;\n"],"mappings":"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"}