@burdenoff/microfe-bigconsole 2026.805.3 → 2026.812.2

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

@@ -1,151 +1,166 @@
-import e from "./WorkflowStatusBadge.js";
-import { memo as t, useCallback as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { formatDistanceToNow as a } from "date-fns";
+import { SECTION_FOCUS_RING as e } from "../common/sectionStyles.js";
+import "../common/index.js";
+import t from "./WorkflowStatusBadge.js";
+import { memo as n, useCallback as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { formatDistanceToNow as o } from "date-fns";
 //#region src/bigconsole/components/workflow/WorkflowCard.tsx
-var o = ({ className: e }) => /* @__PURE__ */ r("svg", {
+var s = ({ className: e }) => /* @__PURE__ */ i("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ r("path", {
+	children: /* @__PURE__ */ i("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 1.5,
 		d: "M13 10V3L4 14h7v7l9-11h-7z"
 	})
-}), s = ({ className: e }) => /* @__PURE__ */ r("svg", {
+}), c = ({ className: e }) => /* @__PURE__ */ i("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ r("path", {
+	children: /* @__PURE__ */ i("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		d: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
 	})
-}), c = ({ className: e }) => /* @__PURE__ */ r("svg", {
+}), l = ({ className: e }) => /* @__PURE__ */ i("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ r("path", {
+	children: /* @__PURE__ */ i("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
 	})
-}), l = ({ className: e }) => /* @__PURE__ */ r("svg", {
+}), u = ({ className: e }) => /* @__PURE__ */ i("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ r("path", {
+	children: /* @__PURE__ */ i("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		d: "M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"
 	})
-}), u = ({ className: e }) => /* @__PURE__ */ i("svg", {
+}), d = ({ className: e }) => /* @__PURE__ */ a("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: [/* @__PURE__ */ r("path", {
+	children: [/* @__PURE__ */ i("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		d: "M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
-	}), /* @__PURE__ */ r("path", {
+	}), /* @__PURE__ */ i("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		d: "M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
 	})]
-}), d = t(function({ workflow: t, onView: d, onEdit: f, onDelete: p }) {
-	let m = t.dataSinkLinks?.length ?? t.linkedDataSinkCount ?? 0, h = n((e) => {
+}), f = n(function({ workflow: n, onView: f, onEdit: p, onDelete: m }) {
+	let h = n.dataSinkLinks?.length ?? n.linkedDataSinkCount ?? 0, g = r((e) => {
 		if (!e) return "Never";
 		try {
-			return a(new Date(e), { addSuffix: !0 });
+			return o(new Date(e), { addSuffix: !0 });
 		} catch {
 			return "Unknown";
 		}
-	}, []), g = n(() => {
-		d?.(t.id);
-	}, [d, t.id]), _ = n((e) => {
-		e.stopPropagation(), f?.(t.id);
-	}, [f, t.id]), v = n((e) => {
-		e.stopPropagation(), p?.(t.id);
-	}, [p, t.id]);
-	return /* @__PURE__ */ i("div", {
-		onClick: g,
-		className: "\n        bg-bg-surface\n        border border-border-default\n        rounded-lg\n        overflow-hidden\n        cursor-pointer\n        hover:border-action-primary-bg\n        transition-colors\n      ",
-		children: [/* @__PURE__ */ i("div", {
-			className: "h-24 bg-bg-sunken flex items-center justify-center relative",
-			children: [/* @__PURE__ */ r(o, { className: "w-10 h-10 text-text-secondary/50" }), /* @__PURE__ */ r("div", {
-				className: "absolute top-2 right-2",
-				children: /* @__PURE__ */ r(e, {
-					status: t.status,
-					size: "sm"
-				})
+	}, []), _ = r(() => {
+		f?.(n.id);
+	}, [f, n.id]), v = r((e) => {
+		e.stopPropagation(), p?.(n.id);
+	}, [p, n.id]), y = r((e) => {
+		e.stopPropagation(), m?.(n.id);
+	}, [m, n.id]), b = r((e) => {
+		e.stopPropagation(), f?.(n.id);
+	}, [f, n.id]);
+	return /* @__PURE__ */ a("div", {
+		onClick: _,
+		className: "min-w-0 cursor-pointer overflow-hidden rounded-card border border-[var(--color-border-subtle)] bg-bg-elevated motion-safe:transition-[box-shadow,border-color] focus-within:border-action-primary-bg hover:border-action-primary-bg hover:shadow-[var(--shadow-elevation-1)]",
+		children: [/* @__PURE__ */ a("div", {
+			className: "flex items-center justify-between gap-icon-gap border-b border-[var(--color-border-subtle)] bg-bg-sunken px-3 py-2",
+			children: [/* @__PURE__ */ a("span", {
+				className: "flex min-w-0 items-center gap-icon-gap text-xs font-medium text-text-secondary",
+				children: [/* @__PURE__ */ i(s, { className: "w-4 h-4 shrink-0" }), /* @__PURE__ */ i("span", {
+					className: "truncate",
+					children: "Workflow"
+				})]
+			}), /* @__PURE__ */ i(t, {
+				status: n.status,
+				size: "sm"
 			})]
-		}), /* @__PURE__ */ i("div", {
-			className: "p-4",
+		}), /* @__PURE__ */ a("div", {
+			className: "p-card-padding",
 			children: [
-				/* @__PURE__ */ i("div", {
-					className: "flex items-start justify-between mb-2",
-					children: [/* @__PURE__ */ i("div", {
-						className: "flex-1 min-w-0",
-						children: [/* @__PURE__ */ r("h3", {
-							className: "text-sm font-semibold text-text-primary truncate",
-							children: t.name
-						}), /* @__PURE__ */ r("p", {
-							className: "text-xs text-text-secondary truncate mt-0.5",
-							children: t.key
+				/* @__PURE__ */ a("div", {
+					className: "mb-2 flex items-start justify-between gap-icon-gap",
+					children: [/* @__PURE__ */ a("div", {
+						className: "min-w-0 flex-1",
+						children: [/* @__PURE__ */ i("h3", {
+							className: "text-sm font-semibold text-text-primary",
+							children: /* @__PURE__ */ i("button", {
+								type: "button",
+								onClick: b,
+								"aria-label": `Open workflow ${n.name}`,
+								className: `line-clamp-2 rounded-button text-left ${e}`,
+								children: n.name
+							})
+						}), /* @__PURE__ */ i("p", {
+							className: "mt-0.5 truncate font-mono text-xs text-text-secondary",
+							children: n.key
 						})]
-					}), /* @__PURE__ */ i("div", {
-						className: "flex items-center gap-1 ml-2",
-						children: [f && /* @__PURE__ */ r("button", {
+					}), /* @__PURE__ */ a("div", {
+						className: "flex shrink-0 items-center gap-1",
+						children: [p && /* @__PURE__ */ i("button", {
 							type: "button",
-							onClick: _,
-							className: "\n                  p-1 rounded-md\n                  text-text-secondary\n                  hover:text-text-primary\n                  hover:bg-bg-sunken\n                  transition-colors\n                ",
+							onClick: v,
+							className: "inline-flex h-control-md w-[var(--size-controlHeight-md)] items-center justify-center rounded-button text-text-secondary motion-safe:transition-colors hover:bg-bg-sunken hover:text-text-primary sm:h-control-sm sm:w-[var(--size-controlHeight-sm)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface",
 							title: "Edit Workflow",
-							children: /* @__PURE__ */ r(s, { className: "w-4 h-4" })
-						}), p && /* @__PURE__ */ r("button", {
+							"aria-label": `Edit workflow ${n.name}`,
+							children: /* @__PURE__ */ i(c, { className: "w-4 h-4" })
+						}), m && /* @__PURE__ */ i("button", {
 							type: "button",
-							onClick: v,
-							className: "\n                  p-1 rounded-md\n                  text-text-secondary\n                  hover:text-status-error-text\n                  hover:bg-status-error-bg/10\n                  transition-colors\n                ",
+							onClick: y,
+							className: "inline-flex h-control-md w-[var(--size-controlHeight-md)] items-center justify-center rounded-button text-text-secondary motion-safe:transition-colors hover:bg-status-error-bg/10 hover:text-status-error-text sm:h-control-sm sm:w-[var(--size-controlHeight-sm)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface",
 							title: "Delete Workflow",
-							children: /* @__PURE__ */ r(c, { className: "w-4 h-4" })
+							"aria-label": `Delete workflow ${n.name}`,
+							children: /* @__PURE__ */ i(l, { className: "w-4 h-4" })
 						})]
 					})]
 				}),
-				t.description && /* @__PURE__ */ r("p", {
-					className: "text-xs text-text-secondary mb-3 line-clamp-2",
-					children: t.description
+				n.description && /* @__PURE__ */ i("p", {
+					className: "mb-3 line-clamp-2 text-xs text-text-secondary",
+					children: n.description
 				}),
-				/* @__PURE__ */ i("div", {
-					className: "flex items-center justify-between text-xs text-text-secondary",
-					children: [/* @__PURE__ */ i("div", {
-						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ i("span", {
+				/* @__PURE__ */ a("div", {
+					className: "flex flex-wrap items-center justify-between gap-x-3 gap-y-1 text-xs text-text-muted",
+					children: [/* @__PURE__ */ a("div", {
+						className: "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1",
+						children: [/* @__PURE__ */ a("span", {
 							className: "flex items-center gap-1",
-							title: `${m} linked DataSinks`,
+							title: `${h} linked DataSinks`,
 							children: [
-								/* @__PURE__ */ r(l, { className: "w-3.5 h-3.5" }),
-								m,
+								/* @__PURE__ */ i(u, { className: "w-3.5 h-3.5 shrink-0" }),
+								h,
 								" DataSink",
-								m === 1 ? "" : "s"
+								h === 1 ? "" : "s"
 							]
-						}), /* @__PURE__ */ i("span", {
+						}), /* @__PURE__ */ a("span", {
 							className: "flex items-center gap-1",
-							title: `${t.executionCount} executions`,
-							children: [/* @__PURE__ */ r(u, { className: "w-3.5 h-3.5" }), t.executionCount]
+							title: `${n.executionCount} executions`,
+							children: [/* @__PURE__ */ i(d, { className: "w-3.5 h-3.5 shrink-0" }), n.executionCount]
 						})]
-					}), /* @__PURE__ */ r("span", {
-						title: t.lastExecutedAt ? `Last executed: ${new Date(t.lastExecutedAt).toLocaleString()}` : "Never executed",
-						children: h(t.lastExecutedAt)
+					}), /* @__PURE__ */ i("span", {
+						title: n.lastExecutedAt ? `Last executed: ${new Date(n.lastExecutedAt).toLocaleString()}` : "Never executed",
+						children: g(n.lastExecutedAt)
 					})]
 				})
 			]
@@ -153,6 +168,6 @@ var o = ({ className: e }) => /* @__PURE__ */ r("svg", {
 	});
 });
 //#endregion
-export { d as default };
+export { f as default };
 
 //# sourceMappingURL=WorkflowCard.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"WorkflowCard.js","names":[],"sources":["../../../../src/bigconsole/components/workflow/WorkflowCard.tsx"],"sourcesContent":["/**\n * WorkflowCard Component\n *\n * Card component displaying a FluidGrids Workflow summary.\n * Shows name, status, linked DataSinks count, and execution stats.\n */\n\nimport { memo, useCallback } from 'react';\nimport { formatDistanceToNow } from 'date-fns';\nimport { WorkflowStatusBadge } from './WorkflowStatusBadge';\nimport type { FluidGridsWorkflow } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface WorkflowCardProps {\n  workflow: FluidGridsWorkflow;\n  onView?: (id: string) => void;\n  onEdit?: (id: string) => void;\n  onDelete?: (id: string) => void;\n}\n\n// ============================================================================\n// ICONS\n// ============================================================================\n\nconst WorkflowIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M13 10V3L4 14h7v7l9-11h-7z\" />\n  </svg>\n);\n\nconst EditIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z\"\n    />\n  </svg>\n);\n\nconst DeleteIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"\n    />\n  </svg>\n);\n\nconst DataSinkIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4\"\n    />\n  </svg>\n);\n\nconst PlayIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z\"\n    />\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n  </svg>\n);\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const WorkflowCard = memo(function WorkflowCard({ workflow, onView, onEdit, onDelete }: WorkflowCardProps) {\n  // Calculate linked DataSinks count\n  const linkedDataSinkCount = workflow.dataSinkLinks?.length ?? workflow.linkedDataSinkCount ?? 0;\n\n  // Format last executed time\n  const formatLastExecuted = useCallback((dateStr: string | null): string => {\n    if (!dateStr) return 'Never';\n    try {\n      const date = new Date(dateStr);\n      return formatDistanceToNow(date, { addSuffix: true });\n    } catch {\n      return 'Unknown';\n    }\n  }, []);\n\n  // Event handlers\n  const handleCardClick = useCallback(() => {\n    onView?.(workflow.id);\n  }, [onView, workflow.id]);\n\n  const handleEditClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onEdit?.(workflow.id);\n    },\n    [onEdit, workflow.id]\n  );\n\n  const handleDeleteClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onDelete?.(workflow.id);\n    },\n    [onDelete, workflow.id]\n  );\n\n  return (\n    <div\n      onClick={handleCardClick}\n      className=\"\n        bg-bg-surface\n        border border-border-default\n        rounded-lg\n        overflow-hidden\n        cursor-pointer\n        hover:border-action-primary-bg\n        transition-colors\n      \"\n    >\n      {/* Header with Icon */}\n      <div className=\"h-24 bg-bg-sunken flex items-center justify-center relative\">\n        <WorkflowIcon className=\"w-10 h-10 text-text-secondary/50\" />\n        <div className=\"absolute top-2 right-2\">\n          <WorkflowStatusBadge status={workflow.status} size=\"sm\" />\n        </div>\n      </div>\n\n      {/* Content */}\n      <div className=\"p-4\">\n        {/* Title and Actions */}\n        <div className=\"flex items-start justify-between mb-2\">\n          <div className=\"flex-1 min-w-0\">\n            <h3 className=\"text-sm font-semibold text-text-primary truncate\">{workflow.name}</h3>\n            <p className=\"text-xs text-text-secondary truncate mt-0.5\">{workflow.key}</p>\n          </div>\n\n          <div className=\"flex items-center gap-1 ml-2\">\n            {onEdit && (\n              <button\n                type=\"button\"\n                onClick={handleEditClick}\n                className=\"\n                  p-1 rounded-md\n                  text-text-secondary\n                  hover:text-text-primary\n                  hover:bg-bg-sunken\n                  transition-colors\n                \"\n                title=\"Edit Workflow\"\n              >\n                <EditIcon className=\"w-4 h-4\" />\n              </button>\n            )}\n            {onDelete && (\n              <button\n                type=\"button\"\n                onClick={handleDeleteClick}\n                className=\"\n                  p-1 rounded-md\n                  text-text-secondary\n                  hover:text-status-error-text\n                  hover:bg-status-error-bg/10\n                  transition-colors\n                \"\n                title=\"Delete Workflow\"\n              >\n                <DeleteIcon className=\"w-4 h-4\" />\n              </button>\n            )}\n          </div>\n        </div>\n\n        {/* Description */}\n        {workflow.description && (\n          <p className=\"text-xs text-text-secondary mb-3 line-clamp-2\">{workflow.description}</p>\n        )}\n\n        {/* Stats Footer */}\n        <div className=\"flex items-center justify-between text-xs text-text-secondary\">\n          <div className=\"flex items-center gap-3\">\n            {/* DataSinks Count */}\n            <span className=\"flex items-center gap-1\" title={`${linkedDataSinkCount} linked DataSinks`}>\n              <DataSinkIcon className=\"w-3.5 h-3.5\" />\n              {linkedDataSinkCount} DataSink{linkedDataSinkCount !== 1 ? 's' : ''}\n            </span>\n\n            {/* Execution Count */}\n            <span className=\"flex items-center gap-1\" title={`${workflow.executionCount} executions`}>\n              <PlayIcon className=\"w-3.5 h-3.5\" />\n              {workflow.executionCount}\n            </span>\n          </div>\n\n          {/* Last Executed */}\n          <span\n            title={\n              workflow.lastExecutedAt\n                ? `Last executed: ${new Date(workflow.lastExecutedAt).toLocaleString()}`\n                : 'Never executed'\n            }\n          >\n            {formatLastExecuted(workflow.lastExecutedAt)}\n          </span>\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport default WorkflowCard;\n"],"mappings":"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"}
+{"version":3,"file":"WorkflowCard.js","names":[],"sources":["../../../../src/bigconsole/components/workflow/WorkflowCard.tsx"],"sourcesContent":["/**\n * WorkflowCard Component\n *\n * Card component displaying a FluidGrids Workflow summary.\n * Shows name, status, linked DataSinks count, and execution stats.\n *\n * Emphasis (BOFF-5634): the card is a tile inside the list page's `primary`\n * results section, so it sits on `bg-bg-elevated` — one step above the section\n * surface — rather than repeating the generic panel treatment used by every\n * other block in the module. The old 96px empty media band carried no\n * information and out-weighed the title; it is now a compact identity strip.\n */\n\nimport { memo, useCallback } from 'react';\nimport { formatDistanceToNow } from 'date-fns';\nimport { WorkflowStatusBadge } from './WorkflowStatusBadge';\nimport { SECTION_FOCUS_RING } from '../common';\nimport type { FluidGridsWorkflow } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface WorkflowCardProps {\n  workflow: FluidGridsWorkflow;\n  onView?: (id: string) => void;\n  onEdit?: (id: string) => void;\n  onDelete?: (id: string) => void;\n}\n\n// ============================================================================\n// ICONS\n// ============================================================================\n\nconst WorkflowIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M13 10V3L4 14h7v7l9-11h-7z\" />\n  </svg>\n);\n\nconst EditIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z\"\n    />\n  </svg>\n);\n\nconst DeleteIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"\n    />\n  </svg>\n);\n\nconst DataSinkIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4\"\n    />\n  </svg>\n);\n\nconst PlayIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z\"\n    />\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n  </svg>\n);\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const WorkflowCard = memo(function WorkflowCard({ workflow, onView, onEdit, onDelete }: WorkflowCardProps) {\n  // Calculate linked DataSinks count\n  const linkedDataSinkCount = workflow.dataSinkLinks?.length ?? workflow.linkedDataSinkCount ?? 0;\n\n  // Format last executed time\n  const formatLastExecuted = useCallback((dateStr: string | null): string => {\n    if (!dateStr) return 'Never';\n    try {\n      const date = new Date(dateStr);\n      return formatDistanceToNow(date, { addSuffix: true });\n    } catch {\n      return 'Unknown';\n    }\n  }, []);\n\n  // Event handlers\n  const handleCardClick = useCallback(() => {\n    onView?.(workflow.id);\n  }, [onView, workflow.id]);\n\n  const handleEditClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onEdit?.(workflow.id);\n    },\n    [onEdit, workflow.id]\n  );\n\n  const handleDeleteClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onDelete?.(workflow.id);\n    },\n    [onDelete, workflow.id]\n  );\n\n  // The title is the real \"open this workflow\" control. The tile itself must NOT\n  // carry role=\"button\": that role makes its subtree presentational, which would\n  // drop the Edit/Delete buttons and the status badge out of the accessibility\n  // tree. The tile keeps a plain click handler as a pointer convenience only.\n  const handleTitleClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onView?.(workflow.id);\n    },\n    [onView, workflow.id]\n  );\n\n  return (\n    <div\n      onClick={handleCardClick}\n      className=\"min-w-0 cursor-pointer overflow-hidden rounded-card border border-[var(--color-border-subtle)] bg-bg-elevated motion-safe:transition-[box-shadow,border-color] focus-within:border-action-primary-bg hover:border-action-primary-bg hover:shadow-[var(--shadow-elevation-1)]\"\n    >\n      {/* Identity strip: what kind of thing this is + its status, at a glance */}\n      <div className=\"flex items-center justify-between gap-icon-gap border-b border-[var(--color-border-subtle)] bg-bg-sunken px-3 py-2\">\n        <span className=\"flex min-w-0 items-center gap-icon-gap text-xs font-medium text-text-secondary\">\n          <WorkflowIcon className=\"w-4 h-4 shrink-0\" />\n          <span className=\"truncate\">Workflow</span>\n        </span>\n        <WorkflowStatusBadge status={workflow.status} size=\"sm\" />\n      </div>\n\n      {/* Content */}\n      <div className=\"p-card-padding\">\n        {/* Title and Actions */}\n        <div className=\"mb-2 flex items-start justify-between gap-icon-gap\">\n          <div className=\"min-w-0 flex-1\">\n            <h3 className=\"text-sm font-semibold text-text-primary\">\n              <button\n                type=\"button\"\n                onClick={handleTitleClick}\n                aria-label={`Open workflow ${workflow.name}`}\n                className={`line-clamp-2 rounded-button text-left ${SECTION_FOCUS_RING}`}\n              >\n                {workflow.name}\n              </button>\n            </h3>\n            <p className=\"mt-0.5 truncate font-mono text-xs text-text-secondary\">{workflow.key}</p>\n          </div>\n\n          <div className=\"flex shrink-0 items-center gap-1\">\n            {onEdit && (\n              <button\n                type=\"button\"\n                onClick={handleEditClick}\n                className={`inline-flex h-control-md w-[var(--size-controlHeight-md)] items-center justify-center rounded-button text-text-secondary motion-safe:transition-colors hover:bg-bg-sunken hover:text-text-primary sm:h-control-sm sm:w-[var(--size-controlHeight-sm)] ${SECTION_FOCUS_RING}`}\n                title=\"Edit Workflow\"\n                aria-label={`Edit workflow ${workflow.name}`}\n              >\n                <EditIcon className=\"w-4 h-4\" />\n              </button>\n            )}\n            {onDelete && (\n              <button\n                type=\"button\"\n                onClick={handleDeleteClick}\n                className={`inline-flex h-control-md w-[var(--size-controlHeight-md)] items-center justify-center rounded-button text-text-secondary motion-safe:transition-colors hover:bg-status-error-bg/10 hover:text-status-error-text sm:h-control-sm sm:w-[var(--size-controlHeight-sm)] ${SECTION_FOCUS_RING}`}\n                title=\"Delete Workflow\"\n                aria-label={`Delete workflow ${workflow.name}`}\n              >\n                <DeleteIcon className=\"w-4 h-4\" />\n              </button>\n            )}\n          </div>\n        </div>\n\n        {/* Description */}\n        {workflow.description && (\n          <p className=\"mb-3 line-clamp-2 text-xs text-text-secondary\">{workflow.description}</p>\n        )}\n\n        {/* Stats Footer */}\n        <div className=\"flex flex-wrap items-center justify-between gap-x-3 gap-y-1 text-xs text-text-muted\">\n          <div className=\"flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1\">\n            {/* DataSinks Count */}\n            <span className=\"flex items-center gap-1\" title={`${linkedDataSinkCount} linked DataSinks`}>\n              <DataSinkIcon className=\"w-3.5 h-3.5 shrink-0\" />\n              {linkedDataSinkCount} DataSink{linkedDataSinkCount !== 1 ? 's' : ''}\n            </span>\n\n            {/* Execution Count */}\n            <span className=\"flex items-center gap-1\" title={`${workflow.executionCount} executions`}>\n              <PlayIcon className=\"w-3.5 h-3.5 shrink-0\" />\n              {workflow.executionCount}\n            </span>\n          </div>\n\n          {/* Last Executed */}\n          <span\n            title={\n              workflow.lastExecutedAt\n                ? `Last executed: ${new Date(workflow.lastExecutedAt).toLocaleString()}`\n                : 'Never executed'\n            }\n          >\n            {formatLastExecuted(workflow.lastExecutedAt)}\n          </span>\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport default WorkflowCard;\n"],"mappings":"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"}

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

@@ -1,86 +1,105 @@
-import { memo as e, useCallback as t } from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Section as e } from "../common/Section.js";
+import "../common/index.js";
+import { useModalFocusTrap as t } from "../../hooks/useModalFocusTrap.js";
+import { memo as n, useCallback as r, useId as i, useRef as a } from "react";
+import { Button as o } from "@burdenoff/fe-libs/ui";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/bigconsole/components/workflow/WorkflowDeleteDialog.tsx
-var i = ({ className: e }) => /* @__PURE__ */ n("svg", {
+var l = ({ className: e }) => /* @__PURE__ */ s("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ n("path", {
+	children: /* @__PURE__ */ s("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		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"
 	})
-}), a = e(function({ workflow: e, isOpen: a, onClose: o, onConfirm: s }) {
-	let c = e.dataSinkLinks?.length ?? e.linkedDataSinkCount ?? 0, l = t(() => {
-		o();
-	}, [o]), u = t(() => {
-		s();
-	}, [s]);
-	return a ? /* @__PURE__ */ r("div", {
-		className: "fixed inset-0 z-50 flex items-center justify-center",
-		children: [/* @__PURE__ */ n("div", {
-			className: "absolute inset-0 bg-black/50",
-			onClick: l
-		}), /* @__PURE__ */ r("div", {
-			className: "relative bg-bg-surface rounded-lg shadow-xl max-w-md w-full mx-4 p-6",
+}), u = n(function({ workflow: n, isOpen: u, onClose: d, onConfirm: f }) {
+	let p = n.dataSinkLinks?.length ?? n.linkedDataSinkCount ?? 0, m = i(), h = i(), g = a(null), _ = a(null), v = r(() => {
+		d();
+	}, [d]), y = r(() => {
+		f();
+	}, [f]);
+	return t({
+		isOpen: u,
+		panelRef: g,
+		onClose: d,
+		initialFocusRef: _
+	}), u ? /* @__PURE__ */ c("div", {
+		className: "fixed inset-0 z-50 flex items-center justify-center p-4",
+		children: [/* @__PURE__ */ s("div", {
+			"aria-hidden": "true",
+			className: "absolute inset-0 bg-[var(--color-bg-overlay)]",
+			onClick: v
+		}), /* @__PURE__ */ c("div", {
+			ref: g,
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-labelledby": m,
+			"aria-describedby": h,
+			tabIndex: -1,
+			className: "relative flex max-h-[calc(100dvh-2rem)] w-full max-w-md flex-col overflow-y-auto rounded-card border border-[var(--color-border-subtle)] bg-bg-surface p-card-padding shadow-[var(--shadow-elevation-3)] focus:outline-none",
 			children: [
-				/* @__PURE__ */ r("div", {
-					className: "flex items-center gap-3 mb-4",
-					children: [/* @__PURE__ */ n("div", {
-						className: "p-2 rounded-full bg-status-error-bg/10",
-						children: /* @__PURE__ */ n(i, { className: "w-6 h-6 text-status-error-text" })
-					}), /* @__PURE__ */ n("h2", {
+				/* @__PURE__ */ c("div", {
+					className: "mb-form-gap flex items-center gap-icon-gap",
+					children: [/* @__PURE__ */ s("span", {
+						"aria-hidden": "true",
+						className: "flex shrink-0 items-center justify-center rounded-pill bg-[var(--color-status-error-bgSubtle)] p-2",
+						children: /* @__PURE__ */ s(l, { className: "w-6 h-6 text-status-error-text" })
+					}), /* @__PURE__ */ s("h2", {
+						id: m,
 						className: "text-lg font-semibold text-text-primary",
 						children: "Delete Workflow"
 					})]
 				}),
-				/* @__PURE__ */ r("div", {
-					className: "mb-6",
+				/* @__PURE__ */ c("div", {
+					className: "mb-form-gap flex flex-col gap-control-gap",
 					children: [
-						/* @__PURE__ */ r("p", {
-							className: "text-sm text-text-secondary mb-3",
+						/* @__PURE__ */ c("p", {
+							id: h,
+							className: "text-sm text-text-secondary",
 							children: [
 								"Are you sure you want to delete the workflow",
 								" ",
-								/* @__PURE__ */ n("span", {
+								/* @__PURE__ */ s("span", {
 									className: "font-medium text-text-primary",
-									children: e.name
+									children: n.name
 								}),
 								"?"
 							]
 						}),
-						c > 0 && /* @__PURE__ */ n("div", {
-							className: "p-3 bg-status-warning-bg/10 rounded-md",
-							children: /* @__PURE__ */ r("p", {
-								className: "text-sm text-status-warning-text",
-								children: [
-									"This workflow has ",
-									c,
-									" linked DataSink",
-									c === 1 ? "" : "s",
-									". Deleting this workflow will remove the links, but the DataSinks will not be deleted."
-								]
+						p > 0 && /* @__PURE__ */ s(e, {
+							headingLevel: 3,
+							tone: "warning",
+							padding: "compact",
+							title: `${p} linked DataSink${p === 1 ? "" : "s"} will be unlinked`,
+							children: /* @__PURE__ */ s("p", {
+								className: "text-sm text-[var(--color-status-warning-text)]",
+								children: "Deleting this workflow removes the links. The DataSinks themselves are not deleted."
 							})
 						}),
-						/* @__PURE__ */ n("p", {
-							className: "text-sm text-text-secondary mt-3",
+						/* @__PURE__ */ s("p", {
+							className: "text-sm text-text-secondary",
 							children: "This action cannot be undone."
 						})
 					]
 				}),
-				/* @__PURE__ */ r("div", {
-					className: "flex justify-end gap-3",
-					children: [/* @__PURE__ */ n("button", {
+				/* @__PURE__ */ c("div", {
+					className: "flex flex-wrap justify-end gap-control-gap",
+					children: [/* @__PURE__ */ s(o, {
+						ref: _,
 						type: "button",
-						onClick: o,
-						className: "\n              px-4 py-2\n              text-sm font-medium\n              text-text-primary\n              bg-bg-sunken\n              hover:bg-border-default\n              rounded-md\n              transition-colors\n            ",
+						size: "lg",
+						variant: "outline",
+						onClick: d,
 						children: "Cancel"
-					}), /* @__PURE__ */ n("button", {
+					}), /* @__PURE__ */ s(o, {
 						type: "button",
-						onClick: u,
-						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              rounded-md\n              transition-colors\n            ",
+						size: "lg",
+						variant: "destructive",
+						onClick: y,
 						children: "Delete Workflow"
 					})]
 				})
@@ -89,6 +108,6 @@ var i = ({ className: e }) => /* @__PURE__ */ n("svg", {
 	}) : null;
 });
 //#endregion
-export { a as default };
+export { u as default };
 
 //# sourceMappingURL=WorkflowDeleteDialog.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"WorkflowDeleteDialog.js","names":[],"sources":["../../../../src/bigconsole/components/workflow/WorkflowDeleteDialog.tsx"],"sourcesContent":["/**\n * WorkflowDeleteDialog Component\n *\n * Confirmation dialog for deleting a FluidGrids Workflow.\n * Shows warning about linked DataSinks before deletion.\n */\n\nimport { memo, useCallback } from 'react';\nimport type { FluidGridsWorkflow } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface WorkflowDeleteDialogProps {\n  workflow: FluidGridsWorkflow;\n  isOpen: boolean;\n  onClose: () => void;\n  onConfirm: () => void | Promise<void>;\n}\n\n// ============================================================================\n// ICONS\n// ============================================================================\n\nconst WarningIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n    />\n  </svg>\n);\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const WorkflowDeleteDialog = memo(function WorkflowDeleteDialog({\n  workflow,\n  isOpen,\n  onClose,\n  onConfirm,\n}: WorkflowDeleteDialogProps) {\n  // Calculate linked DataSinks count\n  const linkedDataSinkCount = workflow.dataSinkLinks?.length ?? workflow.linkedDataSinkCount ?? 0;\n\n  // Event handlers\n  const handleBackdropClick = useCallback(() => {\n    onClose();\n  }, [onClose]);\n\n  const handleConfirmClick = useCallback(() => {\n    onConfirm();\n  }, [onConfirm]);\n\n  // Don't render if not open\n  if (!isOpen) {\n    return null;\n  }\n\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-center justify-center\">\n      {/* Backdrop */}\n      <div className=\"absolute inset-0 bg-black/50\" onClick={handleBackdropClick} />\n\n      {/* Dialog */}\n      <div className=\"relative bg-bg-surface rounded-lg shadow-xl max-w-md w-full mx-4 p-6\">\n        {/* Header */}\n        <div className=\"flex items-center gap-3 mb-4\">\n          <div className=\"p-2 rounded-full bg-status-error-bg/10\">\n            <WarningIcon className=\"w-6 h-6 text-status-error-text\" />\n          </div>\n          <h2 className=\"text-lg font-semibold text-text-primary\">Delete Workflow</h2>\n        </div>\n\n        {/* Content */}\n        <div className=\"mb-6\">\n          <p className=\"text-sm text-text-secondary mb-3\">\n            Are you sure you want to delete the workflow{' '}\n            <span className=\"font-medium text-text-primary\">{workflow.name}</span>?\n          </p>\n\n          {/* Warning about linked DataSinks */}\n          {linkedDataSinkCount > 0 && (\n            <div className=\"p-3 bg-status-warning-bg/10 rounded-md\">\n              <p className=\"text-sm text-status-warning-text\">\n                This workflow has {linkedDataSinkCount} linked DataSink\n                {linkedDataSinkCount !== 1 ? 's' : ''}. Deleting this workflow will remove the links, but the DataSinks\n                will not be deleted.\n              </p>\n            </div>\n          )}\n\n          <p className=\"text-sm text-text-secondary mt-3\">This action cannot be undone.</p>\n        </div>\n\n        {/* Actions */}\n        <div className=\"flex justify-end gap-3\">\n          <button\n            type=\"button\"\n            onClick={onClose}\n            className=\"\n              px-4 py-2\n              text-sm font-medium\n              text-text-primary\n              bg-bg-sunken\n              hover:bg-border-default\n              rounded-md\n              transition-colors\n            \"\n          >\n            Cancel\n          </button>\n          <button\n            type=\"button\"\n            onClick={handleConfirmClick}\n            className=\"\n              px-4 py-2\n              text-sm font-medium\n              text-white\n              bg-status-error-bg\n              hover:bg-status-error-bg/90\n              rounded-md\n              transition-colors\n            \"\n          >\n            Delete Workflow\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport default WorkflowDeleteDialog;\n"],"mappings":";;;AAyBA,IAAM,KAAe,EAAE,mBACrB,kBAAC,OAAD;CAAgB;CAAW,MAAK;CAAO,QAAO;CAAe,SAAQ;WACnE,kBAAC,QAAD;EACE,eAAc;EACd,gBAAe;EACf,aAAa;EACb,GAAE;EACF,CAAA;CACE,CAAA,EAOK,IAAuB,EAAK,SAA8B,EACrE,aACA,WACA,YACA,gBAC4B;CAE5B,IAAM,IAAsB,EAAS,eAAe,UAAU,EAAS,uBAAuB,GAGxF,IAAsB,QAAkB;AAC5C,KAAS;IACR,CAAC,EAAQ,CAAC,EAEP,IAAqB,QAAkB;AAC3C,KAAW;IACV,CAAC,EAAU,CAAC;AAOf,QAJK,IAKH,kBAAC,OAAD;EAAK,WAAU;YAAf,CAEE,kBAAC,OAAD;GAAK,WAAU;GAA+B,SAAS;GAAuB,CAAA,EAG9E,kBAAC,OAAD;GAAK,WAAU;aAAf;IAEE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,GAAD,EAAa,WAAU,kCAAmC,CAAA;MACtD,CAAA,EACN,kBAAC,MAAD;MAAI,WAAU;gBAA0C;MAAoB,CAAA,CACxE;;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,KAAD;OAAG,WAAU;iBAAb;QAAgD;QACD;QAC7C,kBAAC,QAAD;SAAM,WAAU;mBAAiC,EAAS;SAAY,CAAA;;QACpE;;MAGH,IAAsB,KACrB,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,KAAD;QAAG,WAAU;kBAAb;SAAgD;SAC3B;SAAoB;SACtC,MAAwB,IAAU,KAAN;SAAS;SAEpC;;OACA,CAAA;MAGR,kBAAC,KAAD;OAAG,WAAU;iBAAmC;OAAiC,CAAA;MAC7E;;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;gBASX;MAEQ,CAAA,EACT,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;gBASX;MAEQ,CAAA,CACL;;IACF;KACF;MAzEC;EA2ET"}
+{"version":3,"file":"WorkflowDeleteDialog.js","names":[],"sources":["../../../../src/bigconsole/components/workflow/WorkflowDeleteDialog.tsx"],"sourcesContent":["/**\n * WorkflowDeleteDialog Component\n *\n * Confirmation dialog for deleting a FluidGrids Workflow.\n * Shows warning about linked DataSinks before deletion.\n *\n * Emphasis (BOFF-5634): the panel bands into header → body → warning → actions.\n * The linked-DataSinks warning is a real `Section tone=\"warning\"` rather than a\n * hand-rolled tinted div, and the scrim uses `--color-bg-overlay` instead of a\n * raw `bg-black/50`.\n */\n\nimport { memo, useCallback, useId, useRef } from 'react';\n\nimport { useModalFocusTrap } from '../../hooks/useModalFocusTrap';\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport { Section } from '../common';\nimport type { FluidGridsWorkflow } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface WorkflowDeleteDialogProps {\n  workflow: FluidGridsWorkflow;\n  isOpen: boolean;\n  onClose: () => void;\n  onConfirm: () => void | Promise<void>;\n}\n\n// ============================================================================\n// ICONS\n// ============================================================================\n\nconst WarningIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n    />\n  </svg>\n);\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const WorkflowDeleteDialog = memo(function WorkflowDeleteDialog({\n  workflow,\n  isOpen,\n  onClose,\n  onConfirm,\n}: WorkflowDeleteDialogProps) {\n  // Calculate linked DataSinks count\n  const linkedDataSinkCount = workflow.dataSinkLinks?.length ?? workflow.linkedDataSinkCount ?? 0;\n  const titleId = useId();\n  const descriptionId = useId();\n  const panelRef = useRef<HTMLDivElement | null>(null);\n  const cancelRef = useRef<HTMLButtonElement | null>(null);\n\n  // Event handlers\n  const handleBackdropClick = useCallback(() => {\n    onClose();\n  }, [onClose]);\n\n  const handleConfirmClick = useCallback(() => {\n    onConfirm();\n  }, [onConfirm]);\n\n  // `aria-modal=\"true\"` hides everything outside this panel from assistive tech,\n  // so focus has to move inside it and stay there. Cancel is the entry point on\n  // purpose: this is a destructive confirmation, so the control under the\n  // keyboard must be the safe one.\n  useModalFocusTrap({ isOpen, panelRef, onClose, initialFocusRef: cancelRef });\n\n  // Don't render if not open\n  if (!isOpen) {\n    return null;\n  }\n\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4\">\n      {/* Backdrop */}\n      <div aria-hidden=\"true\" className=\"absolute inset-0 bg-[var(--color-bg-overlay)]\" onClick={handleBackdropClick} />\n\n      {/* Dialog */}\n      <div\n        ref={panelRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId}\n        aria-describedby={descriptionId}\n        tabIndex={-1}\n        className=\"relative flex max-h-[calc(100dvh-2rem)] w-full max-w-md flex-col overflow-y-auto rounded-card border border-[var(--color-border-subtle)] bg-bg-surface p-card-padding shadow-[var(--shadow-elevation-3)] focus:outline-none\"\n      >\n        {/* Header */}\n        <div className=\"mb-form-gap flex items-center gap-icon-gap\">\n          <span\n            aria-hidden=\"true\"\n            className=\"flex shrink-0 items-center justify-center rounded-pill bg-[var(--color-status-error-bgSubtle)] p-2\"\n          >\n            <WarningIcon className=\"w-6 h-6 text-status-error-text\" />\n          </span>\n          <h2 id={titleId} className=\"text-lg font-semibold text-text-primary\">\n            Delete Workflow\n          </h2>\n        </div>\n\n        {/* Content */}\n        <div className=\"mb-form-gap flex flex-col gap-control-gap\">\n          <p id={descriptionId} className=\"text-sm text-text-secondary\">\n            Are you sure you want to delete the workflow{' '}\n            <span className=\"font-medium text-text-primary\">{workflow.name}</span>?\n          </p>\n\n          {/* Warning about linked DataSinks */}\n          {linkedDataSinkCount > 0 && (\n            <Section\n              headingLevel={3}\n              tone=\"warning\"\n              padding=\"compact\"\n              title={`${linkedDataSinkCount} linked DataSink${linkedDataSinkCount !== 1 ? 's' : ''} will be unlinked`}\n            >\n              <p className=\"text-sm text-[var(--color-status-warning-text)]\">\n                Deleting this workflow removes the links. The DataSinks themselves are not deleted.\n              </p>\n            </Section>\n          )}\n\n          <p className=\"text-sm text-text-secondary\">This action cannot be undone.</p>\n        </div>\n\n        {/* Actions */}\n        <div className=\"flex flex-wrap justify-end gap-control-gap\">\n          <Button ref={cancelRef} type=\"button\" size=\"lg\" variant=\"outline\" onClick={onClose}>\n            Cancel\n          </Button>\n          <Button type=\"button\" size=\"lg\" variant=\"destructive\" onClick={handleConfirmClick}>\n            Delete Workflow\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport default WorkflowDeleteDialog;\n"],"mappings":";;;;;;;AAkCA,IAAM,KAAe,EAAE,mBACrB,kBAAC,OAAD;CAAgB;CAAW,MAAK;CAAO,QAAO;CAAe,SAAQ;WACnE,kBAAC,QAAD;EACE,eAAc;EACd,gBAAe;EACf,aAAa;EACb,GAAE;EACF,CAAA;CACE,CAAA,EAOK,IAAuB,EAAK,SAA8B,EACrE,aACA,WACA,YACA,gBAC4B;CAE5B,IAAM,IAAsB,EAAS,eAAe,UAAU,EAAS,uBAAuB,GACxF,IAAU,GAAO,EACjB,IAAgB,GAAO,EACvB,IAAW,EAA8B,KAAK,EAC9C,IAAY,EAAiC,KAAK,EAGlD,IAAsB,QAAkB;AAC5C,KAAS;IACR,CAAC,EAAQ,CAAC,EAEP,IAAqB,QAAkB;AAC3C,KAAW;IACV,CAAC,EAAU,CAAC;AAaf,QAPA,EAAkB;EAAE;EAAQ;EAAU;EAAS,iBAAiB;EAAW,CAAC,EAGvE,IAKH,kBAAC,OAAD;EAAK,WAAU;YAAf,CAEE,kBAAC,OAAD;GAAK,eAAY;GAAO,WAAU;GAAgD,SAAS;GAAuB,CAAA,EAGlH,kBAAC,OAAD;GACE,KAAK;GACL,MAAK;GACL,cAAW;GACX,mBAAiB;GACjB,oBAAkB;GAClB,UAAU;GACV,WAAU;aAPZ;IAUE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,QAAD;MACE,eAAY;MACZ,WAAU;gBAEV,kBAAC,GAAD,EAAa,WAAU,kCAAmC,CAAA;MACrD,CAAA,EACP,kBAAC,MAAD;MAAI,IAAI;MAAS,WAAU;gBAA0C;MAEhE,CAAA,CACD;;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,KAAD;OAAG,IAAI;OAAe,WAAU;iBAAhC;QAA8D;QACf;QAC7C,kBAAC,QAAD;SAAM,WAAU;mBAAiC,EAAS;SAAY,CAAA;;QACpE;;MAGH,IAAsB,KACrB,kBAAC,GAAD;OACE,cAAc;OACd,MAAK;OACL,SAAQ;OACR,OAAO,GAAG,EAAoB,kBAAkB,MAAwB,IAAU,KAAN,IAAS;iBAErF,kBAAC,KAAD;QAAG,WAAU;kBAAkD;QAE3D,CAAA;OACI,CAAA;MAGZ,kBAAC,KAAD;OAAG,WAAU;iBAA8B;OAAiC,CAAA;MACxE;;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,GAAD;MAAQ,KAAK;MAAW,MAAK;MAAS,MAAK;MAAK,SAAQ;MAAU,SAAS;gBAAS;MAE3E,CAAA,EACT,kBAAC,GAAD;MAAQ,MAAK;MAAS,MAAK;MAAK,SAAQ;MAAc,SAAS;gBAAoB;MAE1E,CAAA,CACL;;IACF;KACF;MAjEC;EAmET"}

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

@@ -4,15 +4,16 @@ import { jsx as t, jsxs as n } from "react/jsx-runtime";
 var r = e(function({ status: e, size: r = "md", showIcon: i = !0 }) {
 	let a = {
 		sm: "px-2 py-0.5 text-xs",
-		md: "px-2.5 py-1 text-sm",
-		lg: "px-3 py-1.5 text-base"
+		md: "px-2.5 py-1 text-xs sm:text-sm",
+		lg: "px-3 py-1.5 text-sm sm:text-base"
 	}, o = {
 		sm: "w-3 h-3",
 		md: "w-4 h-4",
 		lg: "w-5 h-5"
 	}, s = {
 		draft: {
-			bg: "bg-text-secondary/10",
+			surface: "border border-transparent bg-bg-sunken",
+			weight: "font-medium",
 			text: "text-text-secondary",
 			icon: /* @__PURE__ */ t("svg", {
 				className: o[r],
@@ -29,7 +30,8 @@ var r = e(function({ status: e, size: r = "md", showIcon: i = !0 }) {
 			label: "Draft"
 		},
 		active: {
-			bg: "bg-status-success-bg/10",
+			surface: "border border-[var(--color-status-success-border)] bg-[var(--color-status-success-bgSubtle)]",
+			weight: "font-medium",
 			text: "text-status-success-text",
 			icon: /* @__PURE__ */ t("svg", {
 				className: o[r],
@@ -46,8 +48,9 @@ var r = e(function({ status: e, size: r = "md", showIcon: i = !0 }) {
 			label: "Active"
 		},
 		paused: {
-			bg: "bg-status-warning-bg/10",
-			text: "text-status-warning-text",
+			surface: "border border-[var(--color-status-warning-border)] bg-[var(--color-status-warning-bgSubtle)]",
+			weight: "font-medium",
+			text: "text-[var(--color-status-warning-text)]",
 			icon: /* @__PURE__ */ t("svg", {
 				className: o[r],
 				fill: "none",
@@ -63,7 +66,8 @@ var r = e(function({ status: e, size: r = "md", showIcon: i = !0 }) {
 			label: "Paused"
 		},
 		error: {
-			bg: "bg-status-error-bg/10",
+			surface: "border border-[var(--color-status-error-border)] bg-[var(--color-status-error-bgSubtle)]",
+			weight: "font-semibold",
 			text: "text-status-error-text",
 			icon: /* @__PURE__ */ t("svg", {
 				className: o[r],
@@ -80,8 +84,9 @@ var r = e(function({ status: e, size: r = "md", showIcon: i = !0 }) {
 			label: "Error"
 		},
 		archived: {
-			bg: "bg-text-secondary/10",
-			text: "text-text-secondary",
+			surface: "border border-transparent bg-bg-sunken",
+			weight: "font-medium",
+			text: "text-text-muted",
 			icon: /* @__PURE__ */ t("svg", {
 				className: o[r],
 				fill: "none",
@@ -98,14 +103,8 @@ var r = e(function({ status: e, size: r = "md", showIcon: i = !0 }) {
 		}
 	}[e];
 	return /* @__PURE__ */ n("span", {
-		className: `
-        inline-flex items-center gap-1.5
-        ${a[r]}
-        ${s.bg}
-        ${s.text}
-        rounded-full
-        font-medium
-      `,
+		"data-workflow-status": e,
+		className: `inline-flex shrink-0 items-center gap-1.5 rounded-pill ${a[r]} ${s.surface} ${s.text} ${s.weight}`,
 		children: [i && s.icon, /* @__PURE__ */ t("span", { children: s.label })]
 	});
 });