@burdenoff/microfe-bigconsole 2026.805.3 → 2026.812.2

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

@@ -1,10 +1,13 @@
 import { AppLink as e } from "../../contexts/NavigationContext.js";
 import "../../contexts/index.js";
-import { memo as t } from "react";
-import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
-import { formatDistanceToNow as a } from "date-fns";
+import { SECTION_FOCUS_RING as t } from "../common/sectionStyles.js";
+import { Section as n } from "../common/Section.js";
+import "../common/index.js";
+import { memo as r } from "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { formatDistanceToNow as s } from "date-fns";
 //#region src/bigconsole/components/datasink/LinkedWorkflowsPanel.tsx
-function o(e) {
+function c(e) {
 	switch (e) {
 		case "active": return {
 			label: "Active",
@@ -15,7 +18,7 @@ function o(e) {
 		case "paused": return {
 			label: "Paused",
 			bgColor: "bg-status-warning-bg/10",
-			textColor: "text-status-warning-text",
+			textColor: "text-[var(--color-status-warning-text)]",
 			dotColor: "bg-status-warning-bg"
 		};
 		case "error": return {
@@ -26,9 +29,9 @@ function o(e) {
 		};
 		case "archived": return {
 			label: "Archived",
-			bgColor: "bg-text-tertiary/10",
-			textColor: "text-text-tertiary",
-			dotColor: "bg-text-tertiary"
+			bgColor: "bg-bg-sunken",
+			textColor: "text-text-muted",
+			dotColor: "bg-[var(--color-text-muted)]"
 		};
 		default: return {
 			label: "Draft",
@@ -38,167 +41,158 @@ function o(e) {
 		};
 	}
 }
-var s = ({ className: e }) => /* @__PURE__ */ r("svg", {
+var l = ({ className: e }) => /* @__PURE__ */ a("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ r("path", {
+	children: /* @__PURE__ */ a("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 1.5,
 		d: "M13 10V3L4 14h7v7l9-11h-7z"
 	})
-}), c = ({ className: e }) => /* @__PURE__ */ r("svg", {
+}), u = ({ className: e }) => /* @__PURE__ */ a("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ r("path", {
+	children: /* @__PURE__ */ a("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		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"
 	})
-}), l = ({ className: e }) => /* @__PURE__ */ r("svg", {
+}), d = ({ className: e }) => /* @__PURE__ */ a("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ r("path", {
+	children: /* @__PURE__ */ a("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		d: "M9 5l7 7-7 7"
 	})
-}), u = t(function({ workflowLinks: t = [], isLoading: u = !1 }) {
-	let d = t.filter((e) => e.isEnabled), f = t.filter((e) => !e.isEnabled);
-	return /* @__PURE__ */ i("div", {
-		className: "border border-border-default rounded-lg bg-bg-surface overflow-hidden",
-		children: [/* @__PURE__ */ i("div", {
-			className: "px-4 py-3 border-b border-border-default bg-bg-sunken flex items-center justify-between",
-			children: [/* @__PURE__ */ i("div", {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ r(c, { className: "w-4 h-4 text-text-secondary" }), /* @__PURE__ */ r("h3", {
-					className: "text-sm font-semibold text-text-primary",
-					children: "Linked Workflows"
+}), f = r(function({ workflowLinks: r = [], isLoading: f = !1 }) {
+	let p = r.filter((e) => e.isEnabled), m = r.filter((e) => !e.isEnabled);
+	return /* @__PURE__ */ a(n, {
+		headingLevel: 2,
+		title: "Linked workflows",
+		description: "FluidGrids workflows that push data into this sink.",
+		icon: /* @__PURE__ */ a(u, { className: "h-icon-sm w-icon-sm" }),
+		meta: /* @__PURE__ */ o("span", {
+			className: "text-xs text-text-muted",
+			children: [
+				r.length,
+				" workflow",
+				r.length === 1 ? "" : "s"
+			]
+		}),
+		children: /* @__PURE__ */ a(i, { children: f ? /* @__PURE__ */ a("div", {
+			className: "flex items-center justify-center py-8",
+			children: /* @__PURE__ */ o("svg", {
+				className: "w-6 h-6 text-text-secondary animate-spin",
+				fill: "none",
+				viewBox: "0 0 24 24",
+				children: [/* @__PURE__ */ a("circle", {
+					className: "opacity-25",
+					cx: "12",
+					cy: "12",
+					r: "10",
+					stroke: "currentColor",
+					strokeWidth: "4"
+				}), /* @__PURE__ */ a("path", {
+					className: "opacity-75",
+					fill: "currentColor",
+					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"
 				})]
-			}), /* @__PURE__ */ i("span", {
-				className: "text-xs text-text-secondary",
-				children: [
-					t.length,
-					" workflow",
-					t.length === 1 ? "" : "s"
-				]
-			})]
-		}), /* @__PURE__ */ r("div", {
-			className: "p-4",
-			children: u ? /* @__PURE__ */ r("div", {
-				className: "flex items-center justify-center py-8",
-				children: /* @__PURE__ */ i("svg", {
-					className: "w-6 h-6 text-text-secondary animate-spin",
-					fill: "none",
-					viewBox: "0 0 24 24",
-					children: [/* @__PURE__ */ r("circle", {
-						className: "opacity-25",
-						cx: "12",
-						cy: "12",
-						r: "10",
-						stroke: "currentColor",
-						strokeWidth: "4"
-					}), /* @__PURE__ */ r("path", {
-						className: "opacity-75",
-						fill: "currentColor",
-						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"
-					})]
+			})
+		}) : r.length === 0 ? /* @__PURE__ */ o("div", {
+			className: "py-8 text-center",
+			children: [
+				/* @__PURE__ */ a(l, { className: "mx-auto mb-3 h-icon-lg w-icon-lg text-text-muted" }),
+				/* @__PURE__ */ a("p", {
+					className: "mb-2 text-sm text-text-secondary",
+					children: "No workflows linked"
+				}),
+				/* @__PURE__ */ a("p", {
+					className: "text-xs text-text-muted",
+					children: "Link workflows from the Workflows page to push data to this data sink."
+				}),
+				/* @__PURE__ */ o(e, {
+					to: "/workflows",
+					className: `mt-4 inline-flex min-h-[var(--size-controlHeight-md)] items-center gap-1 text-xs font-medium text-text-link hover:underline ${t}`,
+					children: ["Go to Workflows", /* @__PURE__ */ a(d, { className: "w-3 h-3" })]
 				})
-			}) : t.length === 0 ? /* @__PURE__ */ i("div", {
-				className: "text-center py-8",
-				children: [
-					/* @__PURE__ */ r(s, { className: "w-10 h-10 text-text-tertiary mx-auto mb-3" }),
-					/* @__PURE__ */ r("p", {
-						className: "text-sm text-text-secondary mb-2",
-						children: "No workflows linked"
-					}),
-					/* @__PURE__ */ r("p", {
-						className: "text-xs text-text-tertiary",
-						children: "Link workflows from the Workflows page to push data to this DataSink"
-					}),
-					/* @__PURE__ */ i(e, {
-						to: "/workflows",
-						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              ",
-						children: ["Go to Workflows", /* @__PURE__ */ r(l, { className: "w-3 h-3" })]
-					})
-				]
-			}) : /* @__PURE__ */ i("div", {
-				className: "space-y-3",
-				children: [d.map((t) => {
-					if (!t.workflow) return null;
-					let n = o(t.workflow.status);
-					return /* @__PURE__ */ i(e, {
-						to: `/workflows/${t.workflow.id}`,
-						className: "\n                    flex items-center justify-between\n                    p-3\n                    bg-bg-sunken\n                    rounded-md\n                    hover:bg-border-default\n                    transition-colors\n                    group\n                  ",
-						children: [/* @__PURE__ */ i("div", {
-							className: "flex items-center gap-3 min-w-0",
-							children: [/* @__PURE__ */ r(s, { className: "w-5 h-5 text-text-secondary flex-shrink-0" }), /* @__PURE__ */ i("div", {
-								className: "min-w-0",
-								children: [/* @__PURE__ */ r("p", {
-									className: "text-sm font-medium text-text-primary truncate group-hover:text-action-primary-bg",
-									children: t.workflow.name
-								}), /* @__PURE__ */ r("p", {
-									className: "text-xs text-text-secondary font-mono truncate",
-									children: t.workflow.key
-								})]
+			]
+		}) : /* @__PURE__ */ o("div", {
+			className: "space-y-list-gap",
+			children: [p.map((n) => {
+				if (!n.workflow) return null;
+				let r = c(n.workflow.status);
+				return /* @__PURE__ */ o(e, {
+					to: `/workflows/${n.workflow.id}`,
+					className: `group flex min-h-[var(--size-controlHeight-md)] items-center justify-between gap-icon-gap rounded-input bg-bg-sunken p-3 motion-safe:transition-colors hover:bg-bg-elevated ${t}`,
+					children: [/* @__PURE__ */ o("div", {
+						className: "flex min-w-0 items-center gap-icon-gap",
+						children: [/* @__PURE__ */ a(l, { className: "h-icon-md w-icon-md shrink-0 text-text-secondary" }), /* @__PURE__ */ o("div", {
+							className: "min-w-0",
+							children: [/* @__PURE__ */ a("p", {
+								className: "truncate text-sm font-medium text-text-primary group-hover:text-text-link",
+								children: n.workflow.name
+							}), /* @__PURE__ */ a("p", {
+								className: "truncate font-mono text-xs text-text-secondary",
+								children: n.workflow.key
 							})]
-						}), /* @__PURE__ */ i("div", {
-							className: "flex items-center gap-3 flex-shrink-0",
-							children: [t.workflow.lastExecutedAt && /* @__PURE__ */ r("span", {
-								className: "text-xs text-text-secondary hidden sm:inline",
-								children: a(new Date(t.workflow.lastExecutedAt), { addSuffix: !0 })
-							}), /* @__PURE__ */ i("div", {
-								className: `flex items-center gap-1.5 px-2 py-0.5 rounded-full ${n.bgColor}`,
-								children: [/* @__PURE__ */ r("span", { className: `w-1.5 h-1.5 rounded-full ${n.dotColor}` }), /* @__PURE__ */ r("span", {
-									className: `text-xs font-medium ${n.textColor}`,
-									children: n.label
-								})]
+						})]
+					}), /* @__PURE__ */ o("div", {
+						className: "flex shrink-0 items-center gap-icon-gap",
+						children: [n.workflow.lastExecutedAt && /* @__PURE__ */ a("span", {
+							className: "hidden text-xs text-text-secondary sm:inline",
+							children: s(new Date(n.workflow.lastExecutedAt), { addSuffix: !0 })
+						}), /* @__PURE__ */ o("div", {
+							className: `flex items-center gap-1.5 rounded-pill px-2 py-0.5 ${r.bgColor}`,
+							children: [/* @__PURE__ */ a("span", { className: `h-1.5 w-1.5 rounded-pill ${r.dotColor}` }), /* @__PURE__ */ a("span", {
+								className: `text-xs font-medium ${r.textColor}`,
+								children: r.label
 							})]
 						})]
-					}, t.id);
-				}), f.length > 0 && /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r("div", {
-					className: "pt-2 mt-2 border-t border-border-muted",
-					children: /* @__PURE__ */ i("p", {
-						className: "text-xs text-text-tertiary mb-2",
-						children: [
-							"Disabled (",
-							f.length,
-							")"
-						]
-					})
-				}), f.map((t) => t.workflow ? /* @__PURE__ */ i(e, {
+					})]
+				}, n.id);
+			}), m.length > 0 && /* @__PURE__ */ a(n, {
+				emphasis: "bare",
+				padding: "none",
+				headingLevel: 3,
+				title: `Disabled (${m.length})`,
+				className: "mt-form-gap border-t border-[var(--color-border-subtle)] pt-form-gap",
+				headerClassName: "mb-list-gap",
+				bodyClassName: "space-y-list-gap",
+				children: m.map((t) => t.workflow ? /* @__PURE__ */ o(e, {
 					to: `/workflows/${t.workflow.id}`,
-					className: "\n                        flex items-center justify-between\n                        p-3\n                        bg-bg-sunken/50\n                        rounded-md\n                        hover:bg-bg-sunken\n                        transition-colors\n                        opacity-60\n                        group\n                      ",
-					children: [/* @__PURE__ */ i("div", {
-						className: "flex items-center gap-3 min-w-0",
-						children: [/* @__PURE__ */ r(s, { className: "w-5 h-5 text-text-tertiary flex-shrink-0" }), /* @__PURE__ */ i("div", {
+					className: "group flex min-h-[var(--size-controlHeight-md)] items-center justify-between gap-icon-gap rounded-input bg-bg-sunken p-3 opacity-60 motion-safe:transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface",
+					children: [/* @__PURE__ */ o("div", {
+						className: "flex min-w-0 items-center gap-icon-gap",
+						children: [/* @__PURE__ */ a(l, { className: "h-icon-md w-icon-md shrink-0 text-text-muted" }), /* @__PURE__ */ o("div", {
 							className: "min-w-0",
-							children: [/* @__PURE__ */ r("p", {
-								className: "text-sm font-medium text-text-secondary truncate group-hover:text-text-primary",
+							children: [/* @__PURE__ */ a("p", {
+								className: "truncate text-sm font-medium text-text-secondary group-hover:text-text-primary",
 								children: t.workflow.name
-							}), /* @__PURE__ */ r("p", {
-								className: "text-xs text-text-tertiary font-mono truncate",
+							}), /* @__PURE__ */ a("p", {
+								className: "truncate font-mono text-xs text-text-muted",
 								children: t.workflow.key
 							})]
 						})]
-					}), /* @__PURE__ */ r("span", {
-						className: "text-xs text-text-tertiary flex-shrink-0",
+					}), /* @__PURE__ */ a("span", {
+						className: "shrink-0 text-xs text-text-muted",
 						children: "Disabled"
 					})]
-				}, t.id) : null)] })]
-			})
-		})]
+				}, t.id) : null)
+			})]
+		}) })
 	});
 });
 //#endregion
-export { u as default };
+export { f as default };
 
 //# sourceMappingURL=LinkedWorkflowsPanel.js.map

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

@@ -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-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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"}
+{"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 { Section, SECTION_FOCUS_RING } from '../common';\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-[var(--color-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-bg-sunken',\n        textColor: 'text-text-muted',\n        dotColor: 'bg-[var(--color-text-muted)]',\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    <Section\n      // Level-2 peer of the detail page's other panels. `standard` (not `muted`)\n      // because the rows inside are `bg-bg-sunken` — a sunken container would\n      // erase them.\n      headingLevel={2}\n      title=\"Linked workflows\"\n      description=\"FluidGrids workflows that push data into this sink.\"\n      icon={<LinkIcon className=\"h-icon-sm w-icon-sm\" />}\n      meta={\n        <span className=\"text-xs text-text-muted\">\n          {workflowLinks.length} workflow{workflowLinks.length !== 1 ? 's' : ''}\n        </span>\n      }\n    >\n      <>\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=\"py-8 text-center\">\n            <WorkflowIcon className=\"mx-auto mb-3 h-icon-lg w-icon-lg text-text-muted\" />\n            <p className=\"mb-2 text-sm text-text-secondary\">No workflows linked</p>\n            <p className=\"text-xs text-text-muted\">\n              Link workflows from the Workflows page to push data to this data sink.\n            </p>\n            <AppLink\n              to=\"/workflows\"\n              className={`mt-4 inline-flex min-h-[var(--size-controlHeight-md)] items-center gap-1 text-xs font-medium text-text-link hover:underline ${SECTION_FOCUS_RING}`}\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-list-gap\">\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={`group flex min-h-[var(--size-controlHeight-md)] items-center justify-between gap-icon-gap rounded-input bg-bg-sunken p-3 motion-safe:transition-colors hover:bg-bg-elevated ${SECTION_FOCUS_RING}`}\n                >\n                  <div className=\"flex min-w-0 items-center gap-icon-gap\">\n                    <WorkflowIcon className=\"h-icon-md w-icon-md shrink-0 text-text-secondary\" />\n                    <div className=\"min-w-0\">\n                      <p className=\"truncate text-sm font-medium text-text-primary group-hover:text-text-link\">\n                        {link.workflow.name}\n                      </p>\n                      <p className=\"truncate font-mono text-xs text-text-secondary\">{link.workflow.key}</p>\n                    </div>\n                  </div>\n                  <div className=\"flex shrink-0 items-center gap-icon-gap\">\n                    {link.workflow.lastExecutedAt && (\n                      <span className=\"hidden text-xs text-text-secondary 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 rounded-pill px-2 py-0.5 ${statusConfig.bgColor}`}>\n                      <span className={`h-1.5 w-1.5 rounded-pill ${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 — a labelled sub-group, not a bare hairline. */}\n            {disabledLinks.length > 0 && (\n              <Section\n                emphasis=\"bare\"\n                padding=\"none\"\n                headingLevel={3}\n                title={`Disabled (${disabledLinks.length})`}\n                className=\"mt-form-gap border-t border-[var(--color-border-subtle)] pt-form-gap\"\n                headerClassName=\"mb-list-gap\"\n                bodyClassName=\"space-y-list-gap\"\n              >\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={`group flex min-h-[var(--size-controlHeight-md)] items-center justify-between gap-icon-gap rounded-input bg-bg-sunken p-3 opacity-60 motion-safe:transition-colors hover:opacity-100 ${SECTION_FOCUS_RING}`}\n                    >\n                      <div className=\"flex min-w-0 items-center gap-icon-gap\">\n                        <WorkflowIcon className=\"h-icon-md w-icon-md shrink-0 text-text-muted\" />\n                        <div className=\"min-w-0\">\n                          <p className=\"truncate text-sm font-medium text-text-secondary group-hover:text-text-primary\">\n                            {link.workflow.name}\n                          </p>\n                          <p className=\"truncate font-mono text-xs text-text-muted\">{link.workflow.key}</p>\n                        </div>\n                      </div>\n                      <span className=\"shrink-0 text-xs text-text-muted\">Disabled</span>\n                    </AppLink>\n                  );\n                })}\n              </Section>\n            )}\n          </div>\n        )}\n      </>\n    </Section>\n  );\n});\n\nexport default LinkedWorkflowsPanel;\n"],"mappings":"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"}

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

@@ -1,3 +1,5 @@
+import "../common/sectionStyles.js";
+import "../common/index.js";
 import { memo as e, useCallback as t, useEffect as n, useMemo as r, useRef as i, useState as a } from "react";
 import { useI18n as o } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
@@ -144,16 +146,15 @@ var l = e(function({ value: e, onChange: l, disabled: u = !1, error: d }) {
 				children: f("bigconsole.dataSinks.refreshType.headingDescription", "When should this data be updated?")
 			})] }),
 			/* @__PURE__ */ c("div", {
-				className: "space-y-3",
+				className: "space-y-list-gap",
 				children: [/* @__PURE__ */ c("label", {
 					className: `
-            flex items-start gap-3
-            p-4
-            border rounded-lg
-            cursor-pointer
-            transition-all
-            ${u ? "opacity-50 cursor-not-allowed" : ""}
-            ${g === "manual" ? "border-action-primary-bg bg-action-primary-bg/5" : "border-border-default hover:border-border-hover"}
+            flex cursor-pointer items-start gap-3
+            rounded-input
+            border p-4
+            motion-safe:transition-colors
+            ${u ? "cursor-not-allowed opacity-50" : ""}
+            ${g === "manual" ? "border-[var(--color-action-primary-bg)] bg-bg-accentSubtle" : "border-[var(--color-border-subtle)] hover:border-[var(--color-border-strong)]"}
           `,
 					children: [/* @__PURE__ */ s("input", {
 						type: "radio",
@@ -161,7 +162,7 @@ var l = e(function({ value: e, onChange: l, disabled: u = !1, error: d }) {
 						checked: g === "manual",
 						onChange: () => D("manual"),
 						disabled: u,
-						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            "
+						className: "\n              mt-0.5\n              h-4 w-4\n              border-[var(--color-border-default)]\n              text-action-primary-bg\n              focus-visible:ring-2\n              focus-visible:ring-ring\n            "
 					}), /* @__PURE__ */ c("div", {
 						className: "flex-1",
 						children: [/* @__PURE__ */ s("span", {
@@ -174,10 +175,10 @@ var l = e(function({ value: e, onChange: l, disabled: u = !1, error: d }) {
 					})]
 				}), /* @__PURE__ */ c("div", {
 					className: `
-            border rounded-lg
-            transition-all
+            rounded-input border
+            motion-safe:transition-colors
             ${u ? "opacity-50" : ""}
-            ${g === "scheduled" ? "border-action-primary-bg bg-action-primary-bg/5" : "border-border-default"}
+            ${g === "scheduled" ? "border-[var(--color-action-primary-bg)] bg-bg-accentSubtle" : "border-[var(--color-border-subtle)]"}
           `,
 					children: [/* @__PURE__ */ c("label", {
 						className: `
@@ -192,7 +193,7 @@ var l = e(function({ value: e, onChange: l, disabled: u = !1, error: d }) {
 							checked: g === "scheduled",
 							onChange: () => D("scheduled"),
 							disabled: u,
-							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              "
+							className: "\n                mt-0.5\n                h-4 w-4\n                border-[var(--color-border-default)]\n                text-action-primary-bg\n                focus-visible:ring-2\n                focus-visible:ring-ring\n              "
 						}), /* @__PURE__ */ c("div", {
 							className: "flex-1",
 							children: [/* @__PURE__ */ s("span", {
@@ -204,26 +205,28 @@ var l = e(function({ value: e, onChange: l, disabled: u = !1, error: d }) {
 							})]
 						})]
 					}), g === "scheduled" && /* @__PURE__ */ c("div", {
-						className: "px-4 pb-4 space-y-4",
+						className: "space-y-form-gap px-4 pb-4",
 						children: [
 							/* @__PURE__ */ c("div", {
-								className: "border-t border-border-default pt-4",
+								className: "border-t border-[var(--color-border-subtle)] pt-4",
 								children: [/* @__PURE__ */ s("label", {
-									className: "block text-xs font-medium text-text-secondary mb-2",
+									className: "mb-2 block text-xs font-medium text-text-secondary",
 									children: f("bigconsole.dataSinks.refreshType.scheduleLabel", "Schedule")
 								}), /* @__PURE__ */ s("div", {
-									className: "grid grid-cols-2 gap-2",
+									className: "grid grid-cols-1 gap-2 sm:grid-cols-2",
 									children: p.map((e) => /* @__PURE__ */ s("button", {
 										type: "button",
 										onClick: () => O(e),
 										disabled: u,
 										className: `
+                        min-h-[var(--size-controlHeight-md)] rounded-input
+                        border
                         px-3 py-2
                         text-left
-                        border rounded-md
-                        transition-colors
+                        motion-safe:transition-colors
+                        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface
                         ${u ? "cursor-not-allowed" : "cursor-pointer"}
-                        ${!b && v?.cron === e.cron ? "border-action-primary-bg bg-action-primary-bg/10 text-action-primary-bg" : "border-border-default hover:border-border-hover"}
+                        ${!b && v?.cron === e.cron ? "border-[var(--color-action-primary-bg)] bg-bg-accentSubtle text-text-link" : "border-[var(--color-border-subtle)] hover:border-[var(--color-border-strong)]"}
                       `,
 										children: /* @__PURE__ */ s("span", {
 											className: "text-sm font-medium",
@@ -237,32 +240,36 @@ var l = e(function({ value: e, onChange: l, disabled: u = !1, error: d }) {
 								onClick: k,
 								disabled: u,
 								className: `
-                    text-xs
-                    ${b ? "text-action-primary-bg" : "text-text-secondary hover:text-text-primary"}
+                    min-h-[var(--size-controlHeight-md)] rounded-button text-xs
+                    focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface
+                    ${b ? "text-text-link" : "text-text-secondary hover:text-text-primary"}
                   `,
 								children: b ? f("bigconsole.dataSinks.refreshType.usingCustomSchedule", "Using custom schedule") : f("bigconsole.dataSinks.refreshType.useCustomSchedule", "Use custom schedule...")
 							}), b && /* @__PURE__ */ c("div", {
 								className: "mt-2",
 								children: [/* @__PURE__ */ s("input", {
 									type: "text",
+									"aria-label": "Custom cron expression",
 									value: S,
 									onChange: A,
 									disabled: u,
 									placeholder: "*/15 * * * *",
-									className: "\n                        w-full px-3 py-2\n                        bg-bg-sunken\n                        border rounded-md\n                        text-sm text-text-primary\n                        placeholder-text-tertiary\n                        font-mono\n                        focus:outline-none\n                        focus:border-action-primary-bg\n                        focus:ring-2\n                        focus:ring-action-primary-bg/20\n                        border-border-default\n                      "
+									className: "\n                        h-control-md w-full min-w-0\n                        rounded-input\n                        border border-[var(--color-border-default)]\n                        bg-bg-sunken\n                        px-3\n                        font-mono\n                        text-sm text-text-primary\n                        focus-visible:outline-none\n                        focus-visible:ring-2\n                        focus-visible:ring-ring\n                      "
 								}), /* @__PURE__ */ s("p", {
-									className: "mt-1 text-xs text-text-tertiary",
+									className: "mt-1 text-xs text-text-muted",
 									children: f("bigconsole.dataSinks.refreshType.customCronHelp", "Enter a cron expression (e.g., */15 * * * * for every 15 minutes)")
 								})]
 							})] }),
 							/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("label", {
-								className: "block text-xs font-medium text-text-secondary mb-2",
+								htmlFor: "refresh-timezone",
+								className: "mb-2 block text-xs font-medium text-text-secondary",
 								children: f("bigconsole.dataSinks.refreshType.timezoneLabel", "Timezone")
 							}), /* @__PURE__ */ s("select", {
+								id: "refresh-timezone",
 								value: w,
 								onChange: j,
 								disabled: u,
-								className: "\n                    w-full px-3 py-2\n                    bg-bg-sunken\n                    border border-border-default rounded-md\n                    text-sm text-text-primary\n                    focus:outline-none\n                    focus:border-action-primary-bg\n                    focus:ring-2\n                    focus:ring-action-primary-bg/20\n                  ",
+								className: "\n                    h-control-md w-full min-w-0\n                    rounded-input\n                    border border-[var(--color-border-default)]\n                    bg-bg-sunken\n                    px-3\n                    text-sm text-text-primary\n                    focus-visible:outline-none\n                    focus-visible:ring-2\n                    focus-visible:ring-ring\n                  ",
 								children: m.map((e) => /* @__PURE__ */ s("option", {
 									value: e.value,
 									children: e.label