@burdenoff/microfe-bigconsole 2026.805.2 → 2026.812.1

package/dist/bigconsole/components/parser/ParserStatusBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"ParserStatusBadge.js","names":[],"sources":["../../../../src/bigconsole/components/parser/ParserStatusBadge.tsx"],"sourcesContent":["/**\n * Parser Status Badge\n *\n * Badge component displaying parser status (active, inactive).\n */\n\nimport { memo } from 'react';\nimport type { ParserStatus } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface ParserStatusBadgeProps {\n  /** Parser status */\n  status: ParserStatus;\n  /** Badge size */\n  size?: 'sm' | 'md' | 'lg';\n  /** Whether to show icon */\n  showIcon?: boolean;\n}\n\n// ============================================================================\n// CONSTANTS\n// ============================================================================\n\nconst SIZE_CLASSES = {\n  sm: 'px-2 py-0.5 text-xs',\n  md: 'px-2.5 py-1 text-sm',\n  lg: 'px-3 py-1.5 text-base',\n};\n\nconst ICON_SIZE_CLASSES = {\n  sm: 'w-3 h-3',\n  md: 'w-4 h-4',\n  lg: 'w-5 h-5',\n};\n\n// ============================================================================\n// ICONS\n// ============================================================================\n\nconst CheckIcon = ({ 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=\"M5 13l4 4L19 7\" />\n  </svg>\n);\n\nconst XCircleIcon = ({ 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=\"M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z\"\n    />\n  </svg>\n);\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const ParserStatusBadge = memo(function ParserStatusBadge({\n  status,\n  size = 'md',\n  showIcon = true,\n}: ParserStatusBadgeProps) {\n  const sizeClass = SIZE_CLASSES[size];\n  const iconSizeClass = ICON_SIZE_CLASSES[size];\n\n  const config = {\n    active: {\n      bg: 'bg-status-success-bg/10',\n      text: 'text-status-success-text',\n      icon: <CheckIcon className={iconSizeClass} />,\n      label: 'Active',\n    },\n    inactive: {\n      bg: 'bg-text-tertiary/10',\n      text: 'text-text-tertiary',\n      icon: <XCircleIcon className={iconSizeClass} />,\n      label: 'Inactive',\n    },\n  }[status];\n\n  if (!config) {\n    return (\n      <span\n        className={`\n          inline-flex items-center gap-1.5\n          ${sizeClass}\n          bg-bg-sunken\n          text-text-secondary\n          rounded-full\n          font-medium\n        `}\n      >\n        {status}\n      </span>\n    );\n  }\n\n  return (\n    <span\n      className={`\n        inline-flex items-center gap-1.5\n        ${sizeClass}\n        ${config.bg}\n        ${config.text}\n        rounded-full\n        font-medium\n      `}\n    >\n      {showIcon && config.icon}\n      <span>{config.label}</span>\n    </span>\n  );\n});\n\nexport default ParserStatusBadge;\n"],"mappings":";;;AA0BA,IAAM,IAAe;CACnB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEK,IAAoB;CACxB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAMK,KAAa,EAAE,mBACnB,kBAAC,OAAD;CAAgB;CAAW,MAAK;CAAO,QAAO;CAAe,SAAQ;WACnE,kBAAC,QAAD;EAAM,eAAc;EAAQ,gBAAe;EAAQ,aAAa;EAAG,GAAE;EAAmB,CAAA;CACpF,CAAA,EAGF,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,IAAoB,EAAK,SAA2B,EAC/D,WACA,UAAO,MACP,cAAW,MACc;CACzB,IAAM,IAAY,EAAa,IACzB,IAAgB,EAAkB,IAElC,IAAS;EACb,QAAQ;GACN,IAAI;GACJ,MAAM;GACN,MAAM,kBAAC,GAAD,EAAW,WAAW,GAAiB,CAAA;GAC7C,OAAO;GACR;EACD,UAAU;GACR,IAAI;GACJ,MAAM;GACN,MAAM,kBAAC,GAAD,EAAa,WAAW,GAAiB,CAAA;GAC/C,OAAO;GACR;EACF,CAAC;AAmBF,QAjBK,IAkBH,kBAAC,QAAD;EACE,WAAW;;UAEP,EAAU;UACV,EAAO,GAAG;UACV,EAAO,KAAK;;;;YALlB,CAUG,KAAY,EAAO,MACpB,kBAAC,QAAD,EAAA,UAAO,EAAO,OAAa,CAAA,CACtB;MA5BL,kBAAC,QAAD;EACE,WAAW;;YAEP,EAAU;;;;;;YAOb;EACI,CAAA;EAmBX"}
+{"version":3,"file":"ParserStatusBadge.js","names":[],"sources":["../../../../src/bigconsole/components/parser/ParserStatusBadge.tsx"],"sourcesContent":["/**\n * Parser Status Badge\n *\n * Badge component displaying parser status (active, inactive).\n */\n\nimport { memo } from 'react';\nimport type { ParserStatus } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface ParserStatusBadgeProps {\n  /** Parser status */\n  status: ParserStatus;\n  /** Badge size */\n  size?: 'sm' | 'md' | 'lg';\n  /** Whether to show icon */\n  showIcon?: boolean;\n}\n\n// ============================================================================\n// CONSTANTS\n// ============================================================================\n\nconst SIZE_CLASSES = {\n  sm: 'px-2 py-0.5 text-xs',\n  md: 'px-2.5 py-1 text-sm',\n  lg: 'px-3 py-1.5 text-base',\n};\n\nconst ICON_SIZE_CLASSES = {\n  sm: 'w-3 h-3',\n  md: 'w-4 h-4',\n  lg: 'w-5 h-5',\n};\n\n// ============================================================================\n// ICONS\n// ============================================================================\n\nconst CheckIcon = ({ 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=\"M5 13l4 4L19 7\" />\n  </svg>\n);\n\nconst XCircleIcon = ({ 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=\"M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z\"\n    />\n  </svg>\n);\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const ParserStatusBadge = memo(function ParserStatusBadge({\n  status,\n  size = 'md',\n  showIcon = true,\n}: ParserStatusBadgeProps) {\n  const sizeClass = SIZE_CLASSES[size];\n  const iconSizeClass = ICON_SIZE_CLASSES[size];\n\n  const config = {\n    active: {\n      bg: 'bg-status-success-bg/10',\n      text: 'text-status-success-text',\n      icon: <CheckIcon className={iconSizeClass} />,\n      label: 'Active',\n    },\n    inactive: {\n      // `bg-text-tertiary` / `text-text-tertiary` are unregistered in this shell\n      // and emitted no CSS, so the inactive pill rendered with no fill at all.\n      bg: 'bg-bg-sunken',\n      text: 'text-text-muted',\n      icon: <XCircleIcon className={iconSizeClass} />,\n      label: 'Inactive',\n    },\n  }[status];\n\n  if (!config) {\n    return (\n      <span\n        className={`\n          inline-flex items-center gap-1.5\n          ${sizeClass}\n          bg-bg-sunken\n          text-text-secondary\n          rounded-full\n          font-medium\n        `}\n      >\n        {status}\n      </span>\n    );\n  }\n\n  return (\n    <span\n      className={`\n        inline-flex items-center gap-1.5\n        ${sizeClass}\n        ${config.bg}\n        ${config.text}\n        rounded-full\n        font-medium\n      `}\n    >\n      {showIcon && config.icon}\n      <span>{config.label}</span>\n    </span>\n  );\n});\n\nexport default ParserStatusBadge;\n"],"mappings":";;;AA0BA,IAAM,IAAe;CACnB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEK,IAAoB;CACxB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAMK,KAAa,EAAE,mBACnB,kBAAC,OAAD;CAAgB;CAAW,MAAK;CAAO,QAAO;CAAe,SAAQ;WACnE,kBAAC,QAAD;EAAM,eAAc;EAAQ,gBAAe;EAAQ,aAAa;EAAG,GAAE;EAAmB,CAAA;CACpF,CAAA,EAGF,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,IAAoB,EAAK,SAA2B,EAC/D,WACA,UAAO,MACP,cAAW,MACc;CACzB,IAAM,IAAY,EAAa,IACzB,IAAgB,EAAkB,IAElC,IAAS;EACb,QAAQ;GACN,IAAI;GACJ,MAAM;GACN,MAAM,kBAAC,GAAD,EAAW,WAAW,GAAiB,CAAA;GAC7C,OAAO;GACR;EACD,UAAU;GAGR,IAAI;GACJ,MAAM;GACN,MAAM,kBAAC,GAAD,EAAa,WAAW,GAAiB,CAAA;GAC/C,OAAO;GACR;EACF,CAAC;AAmBF,QAjBK,IAkBH,kBAAC,QAAD;EACE,WAAW;;UAEP,EAAU;UACV,EAAO,GAAG;UACV,EAAO,KAAK;;;;YALlB,CAUG,KAAY,EAAO,MACpB,kBAAC,QAAD,EAAA,UAAO,EAAO,OAAa,CAAA,CACtB;MA5BL,kBAAC,QAAD;EACE,WAAW;;YAEP,EAAU;;;;;;YAOb;EACI,CAAA;EAmBX"}

package/dist/bigconsole/components/parser/ParserTypeBadge.js

@@ -7,13 +7,13 @@ var n = {
 	lg: "px-3 py-1.5 text-base"
 }, r = {
 	jq: {
-		bg: "bg-blue-500/10",
-		text: "text-blue-600 dark:text-blue-400",
+		bg: "bg-[var(--color-status-info-bgSubtle)]",
+		text: "text-[var(--color-status-info-text)]",
 		label: "JQ"
 	},
 	jsonata: {
-		bg: "bg-purple-500/10",
-		text: "text-purple-600 dark:text-purple-400",
+		bg: "bg-bg-accentSubtle",
+		text: "text-text-link",
 		label: "JSONata"
 	}
 }, i = e(function({ type: e, size: i = "md" }) {

package/dist/bigconsole/components/parser/ParserTypeBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"ParserTypeBadge.js","names":[],"sources":["../../../../src/bigconsole/components/parser/ParserTypeBadge.tsx"],"sourcesContent":["/**\n * Parser Type Badge\n *\n * Badge component displaying parser type (JQ, JSONata).\n */\n\nimport { memo } from 'react';\nimport type { ParserType } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface ParserTypeBadgeProps {\n  /** Parser type */\n  type: ParserType;\n  /** Badge size */\n  size?: 'sm' | 'md' | 'lg';\n}\n\n// ============================================================================\n// CONSTANTS\n// ============================================================================\n\nconst SIZE_CLASSES = {\n  sm: 'px-2 py-0.5 text-xs',\n  md: 'px-2.5 py-1 text-sm',\n  lg: 'px-3 py-1.5 text-base',\n};\n\nconst TYPE_CONFIG: Record<ParserType, { bg: string; text: string; label: string }> = {\n  jq: {\n    bg: 'bg-blue-500/10',\n    text: 'text-blue-600 dark:text-blue-400',\n    label: 'JQ',\n  },\n  jsonata: {\n    bg: 'bg-purple-500/10',\n    text: 'text-purple-600 dark:text-purple-400',\n    label: 'JSONata',\n  },\n};\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const ParserTypeBadge = memo(function ParserTypeBadge({ type, size = 'md' }: ParserTypeBadgeProps) {\n  const sizeClass = SIZE_CLASSES[size];\n  const config = TYPE_CONFIG[type];\n\n  if (!config) {\n    return (\n      <span\n        className={`\n          inline-flex items-center\n          ${sizeClass}\n          bg-bg-sunken\n          text-text-secondary\n          rounded-md\n          font-mono\n          font-semibold\n        `}\n      >\n        {type}\n      </span>\n    );\n  }\n\n  return (\n    <span\n      className={`\n        inline-flex items-center\n        ${sizeClass}\n        ${config.bg}\n        ${config.text}\n        rounded-md\n        font-mono\n        font-semibold\n      `}\n    >\n      {config.label}\n    </span>\n  );\n});\n\nexport default ParserTypeBadge;\n"],"mappings":";;;AAwBA,IAAM,IAAe;CACnB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEK,IAA+E;CACnF,IAAI;EACF,IAAI;EACJ,MAAM;EACN,OAAO;EACR;CACD,SAAS;EACP,IAAI;EACJ,MAAM;EACN,OAAO;EACR;CACF,EAMY,IAAkB,EAAK,SAAyB,EAAE,SAAM,UAAO,QAA8B;CACxG,IAAM,IAAY,EAAa,IACzB,IAAS,EAAY;AAoB3B,QAlBK,IAmBH,kBAAC,QAAD;EACE,WAAW;;UAEP,EAAU;UACV,EAAO,GAAG;UACV,EAAO,KAAK;;;;;YAMf,EAAO;EACH,CAAA,GA7BL,kBAAC,QAAD;EACE,WAAW;;YAEP,EAAU;;;;;;;YAQb;EACI,CAAA;EAmBX"}
+{"version":3,"file":"ParserTypeBadge.js","names":[],"sources":["../../../../src/bigconsole/components/parser/ParserTypeBadge.tsx"],"sourcesContent":["/**\n * Parser Type Badge\n *\n * Badge component displaying parser type (JQ, JSONata).\n */\n\nimport { memo } from 'react';\nimport type { ParserType } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface ParserTypeBadgeProps {\n  /** Parser type */\n  type: ParserType;\n  /** Badge size */\n  size?: 'sm' | 'md' | 'lg';\n}\n\n// ============================================================================\n// CONSTANTS\n// ============================================================================\n\nconst SIZE_CLASSES = {\n  sm: 'px-2 py-0.5 text-xs',\n  md: 'px-2.5 py-1 text-sm',\n  lg: 'px-3 py-1.5 text-base',\n};\n\n/**\n * Type accents use semantic tokens only — the previous raw `blue-500`/`purple-500`\n * palette classes were not theme-aware and disagreed with the duplicate badge on\n * the DataSink detail page. `info` and `accent` are the two neutral-safe accents\n * available in every BigConsole theme.\n */\nconst TYPE_CONFIG: Record<ParserType, { bg: string; text: string; label: string }> = {\n  jq: {\n    bg: 'bg-[var(--color-status-info-bgSubtle)]',\n    text: 'text-[var(--color-status-info-text)]',\n    label: 'JQ',\n  },\n  jsonata: {\n    bg: 'bg-bg-accentSubtle',\n    text: 'text-text-link',\n    label: 'JSONata',\n  },\n};\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const ParserTypeBadge = memo(function ParserTypeBadge({ type, size = 'md' }: ParserTypeBadgeProps) {\n  const sizeClass = SIZE_CLASSES[size];\n  const config = TYPE_CONFIG[type];\n\n  if (!config) {\n    return (\n      <span\n        className={`\n          inline-flex items-center\n          ${sizeClass}\n          bg-bg-sunken\n          text-text-secondary\n          rounded-md\n          font-mono\n          font-semibold\n        `}\n      >\n        {type}\n      </span>\n    );\n  }\n\n  return (\n    <span\n      className={`\n        inline-flex items-center\n        ${sizeClass}\n        ${config.bg}\n        ${config.text}\n        rounded-md\n        font-mono\n        font-semibold\n      `}\n    >\n      {config.label}\n    </span>\n  );\n});\n\nexport default ParserTypeBadge;\n"],"mappings":";;;AAwBA,IAAM,IAAe;CACnB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAQK,IAA+E;CACnF,IAAI;EACF,IAAI;EACJ,MAAM;EACN,OAAO;EACR;CACD,SAAS;EACP,IAAI;EACJ,MAAM;EACN,OAAO;EACR;CACF,EAMY,IAAkB,EAAK,SAAyB,EAAE,SAAM,UAAO,QAA8B;CACxG,IAAM,IAAY,EAAa,IACzB,IAAS,EAAY;AAoB3B,QAlBK,IAmBH,kBAAC,QAAD;EACE,WAAW;;UAEP,EAAU;UACV,EAAO,GAAG;UACV,EAAO,KAAK;;;;;YAMf,EAAO;EACH,CAAA,GA7BL,kBAAC,QAAD;EACE,WAAW;;YAEP,EAAU;;;;;;;YAQb;EACI,CAAA;EAmBX"}

package/dist/bigconsole/components/pipeline/PipelineCard.js

@@ -1,159 +1,204 @@
-import e from "./PipelineStatusBadge.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 "./PipelineStatusBadge.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/pipeline/PipelineCard.tsx
-var o = ({ className: e }) => /* @__PURE__ */ r("svg", {
+var s = `inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-button text-text-secondary motion-safe:transition-colors ${e}`, 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: 1.5,
 		d: "M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 00-3.7-3.7 48.678 48.678 0 00-7.324 0 4.006 4.006 0 00-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3l-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 003.7 3.7 48.656 48.656 0 007.324 0 4.006 4.006 0 003.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3l-3 3"
 	})
-}), s = ({ 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: "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__ */ i("svg", {
+}), u = ({ 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"
 	})]
-}), l = ({ className: e }) => /* @__PURE__ */ r("svg", {
+}), d = ({ 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"
 	})
-}), u = ({ className: e }) => /* @__PURE__ */ r("svg", {
+}), f = ({ 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 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
 	})
-}), d = t(function({ pipeline: t, onView: d, onEdit: f, onTest: p, onDelete: m }) {
-	let h = t.stages?.length ?? 0, g = n((e) => {
-		if (!e) return "Never";
+}), p = ({ className: e }) => /* @__PURE__ */ i("svg", {
+	className: e,
+	fill: "none",
+	stroke: "currentColor",
+	viewBox: "0 0 24 24",
+	children: /* @__PURE__ */ i("path", {
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: 2,
+		d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+	})
+}), m = n(function({ pipeline: n, onView: m, onEdit: h, onTest: g, onDelete: _ }) {
+	let v = n.stages?.length ?? 0, y = r((e) => {
+		if (!e) return "Never run";
 		try {
-			return a(new Date(e), { addSuffix: !0 });
+			return o(new Date(e), { addSuffix: !0 });
 		} catch {
 			return "Unknown";
 		}
-	}, []), _ = n(() => {
-		d?.(t.id);
-	}, [d, t.id]), v = n((e) => {
-		e.stopPropagation(), f?.(t.id);
-	}, [f, t.id]), y = n((e) => {
-		e.stopPropagation(), p?.(t.id);
-	}, [p, t.id]), b = n((e) => {
-		e.stopPropagation(), m?.(t.id);
-	}, [m, t.id]);
-	return /* @__PURE__ */ i("div", {
-		onClick: _,
-		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,
+	}, []), b = r(() => {
+		m?.(n.id);
+	}, [m, n.id]), x = r((e) => {
+		e.stopPropagation(), m?.(n.id);
+	}, [m, n.id]), S = r((e) => {
+		e.stopPropagation(), h?.(n.id);
+	}, [h, n.id]), C = r((e) => {
+		e.stopPropagation(), g?.(n.id);
+	}, [g, n.id]), w = r((e) => {
+		e.stopPropagation(), _?.(n.id);
+	}, [_, n.id]);
+	return /* @__PURE__ */ a("article", {
+		onClick: b,
+		"data-testid": "pipeline-card",
+		className: "group flex min-w-0 cursor-pointer flex-col rounded-card border border-[var(--color-border-subtle)] bg-bg-surface shadow-[var(--shadow-elevation-1)] motion-safe:transition-[box-shadow,border-color] hover:border-[var(--color-border-strong)] hover:shadow-[var(--shadow-elevation-2)]",
+		children: [/* @__PURE__ */ a("div", {
+			className: "flex min-w-0 items-start gap-icon-gap border-b border-[var(--color-border-subtle)] p-4",
+			children: [
+				/* @__PURE__ */ i("span", {
+					"aria-hidden": "true",
+					className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-button bg-bg-sunken text-text-secondary",
+					children: /* @__PURE__ */ i(c, { className: "h-icon-md w-icon-md" })
+				}),
+				/* @__PURE__ */ a("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ i("h3", {
+						className: "min-w-0 text-base font-semibold leading-tight text-text-primary",
+						children: /* @__PURE__ */ i("button", {
+							type: "button",
+							onClick: x,
+							title: n.name,
+							className: `block w-full truncate rounded-button text-left ${e}`,
+							children: n.name
+						})
+					}), n.description && /* @__PURE__ */ i("p", {
+						className: "mt-0.5 line-clamp-2 text-sm text-text-secondary",
+						children: n.description
+					})]
+				}),
+				/* @__PURE__ */ i(t, {
+					status: n.status,
 					size: "sm"
 				})
-			})]
-		}), /* @__PURE__ */ i("div", {
-			className: "p-4",
-			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
-					}), t.description && /* @__PURE__ */ r("p", {
-						className: "text-xs text-text-secondary truncate mt-0.5",
-						children: t.description
-					})]
-				}), /* @__PURE__ */ i("div", {
-					className: "flex items-center gap-1 ml-2",
+			]
+		}), /* @__PURE__ */ a("div", {
+			className: "flex flex-wrap items-center justify-between gap-control-gap p-4",
+			children: [/* @__PURE__ */ a("dl", {
+				className: "flex min-w-0 flex-wrap items-center gap-x-4 gap-y-1 text-xs text-text-secondary",
+				children: [/* @__PURE__ */ a("div", {
+					className: "flex items-center gap-1",
 					children: [
-						p && /* @__PURE__ */ r("button", {
-							type: "button",
-							onClick: y,
-							className: "\n                  p-1 rounded-md\n                  text-text-secondary\n                  hover:text-status-success-text\n                  hover:bg-status-success-bg/10\n                  transition-colors\n                ",
-							title: "Test Pipeline",
-							children: /* @__PURE__ */ r(c, { className: "w-4 h-4" })
+						/* @__PURE__ */ i("dt", {
+							className: "sr-only",
+							children: "Stages"
 						}),
-						f && /* @__PURE__ */ r("button", {
-							type: "button",
-							onClick: v,
-							className: "\n                  p-1 rounded-md\n                  text-text-secondary\n                  hover:text-text-primary\n                  hover:bg-bg-sunken\n                  transition-colors\n                ",
-							title: "Edit Pipeline",
-							children: /* @__PURE__ */ r(s, { className: "w-4 h-4" })
+						/* @__PURE__ */ i(f, {
+							className: "h-3.5 w-3.5 shrink-0",
+							"aria-hidden": "true"
 						}),
-						m && /* @__PURE__ */ r("button", {
-							type: "button",
-							onClick: b,
-							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                ",
-							title: "Delete Pipeline",
-							children: /* @__PURE__ */ r(l, { className: "w-4 h-4" })
+						/* @__PURE__ */ a("dd", { children: [
+							v,
+							" stage",
+							v === 1 ? "" : "s"
+						] })
+					]
+				}), /* @__PURE__ */ a("div", {
+					className: "flex items-center gap-1",
+					children: [
+						/* @__PURE__ */ i("dt", {
+							className: "sr-only",
+							children: "Last run"
+						}),
+						/* @__PURE__ */ i(p, {
+							className: "h-3.5 w-3.5 shrink-0",
+							"aria-hidden": "true"
+						}),
+						/* @__PURE__ */ i("dd", {
+							title: n.lastExecutedAt ? `Last executed: ${new Date(n.lastExecutedAt).toLocaleString()}` : "Never executed",
+							children: y(n.lastExecutedAt)
 						})
 					]
 				})]
-			}), /* @__PURE__ */ i("div", {
-				className: "flex items-center justify-between text-xs text-text-secondary mt-3",
-				children: [/* @__PURE__ */ r("div", {
-					className: "flex items-center gap-3",
-					children: /* @__PURE__ */ i("span", {
-						className: "flex items-center gap-1",
-						title: `${h} stages`,
-						children: [
-							/* @__PURE__ */ r(u, { className: "w-3.5 h-3.5" }),
-							h,
-							" stage",
-							h === 1 ? "" : "s"
-						]
+			}), /* @__PURE__ */ a("div", {
+				className: "flex shrink-0 items-center gap-1",
+				children: [
+					g && /* @__PURE__ */ i("button", {
+						type: "button",
+						onClick: C,
+						className: `${s} hover:bg-[var(--color-status-success-bgSubtle)] hover:text-status-success-text`,
+						title: "Test Pipeline",
+						"aria-label": `Test ${n.name}`,
+						children: /* @__PURE__ */ i(u, { className: "h-icon-sm w-icon-sm" })
+					}),
+					h && /* @__PURE__ */ i("button", {
+						type: "button",
+						onClick: S,
+						className: `${s} hover:bg-bg-sunken hover:text-text-primary`,
+						title: "Edit Pipeline",
+						"aria-label": `Edit ${n.name}`,
+						children: /* @__PURE__ */ i(l, { className: "h-icon-sm w-icon-sm" })
+					}),
+					_ && /* @__PURE__ */ i("button", {
+						type: "button",
+						onClick: w,
+						className: `${s} hover:bg-[var(--color-status-error-bgSubtle)] hover:text-status-error-text`,
+						title: "Delete Pipeline",
+						"aria-label": `Delete ${n.name}`,
+						children: /* @__PURE__ */ i(d, { className: "h-icon-sm w-icon-sm" })
 					})
-				}), /* @__PURE__ */ r("span", {
-					title: t.lastExecutedAt ? `Last executed: ${new Date(t.lastExecutedAt).toLocaleString()}` : "Never executed",
-					children: g(t.lastExecutedAt)
-				})]
+				]
 			})]
 		})]
 	});
 });
 //#endregion
-export { d as default };
+export { m as default };
 
 //# sourceMappingURL=PipelineCard.js.map

package/dist/bigconsole/components/pipeline/PipelineCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"PipelineCard.js","names":[],"sources":["../../../../src/bigconsole/components/pipeline/PipelineCard.tsx"],"sourcesContent":["/**\n * PipelineCard Component\n *\n * Card component displaying a Pipeline summary.\n * Shows name, status, stage count, and execution stats.\n */\n\nimport { memo, useCallback } from 'react';\nimport { formatDistanceToNow } from 'date-fns';\nimport { PipelineStatusBadge } from './PipelineStatusBadge';\nimport type { Pipeline } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface PipelineCardProps {\n  pipeline: Pipeline;\n  onView?: (id: string) => void;\n  onEdit?: (id: string) => void;\n  onTest?: (id: string) => void;\n  onDelete?: (id: string) => void;\n}\n\n// ============================================================================\n// ICONS\n// ============================================================================\n\nconst PipelineIcon = ({ 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={1.5}\n      d=\"M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 00-3.7-3.7 48.678 48.678 0 00-7.324 0 4.006 4.006 0 00-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3l-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 003.7 3.7 48.656 48.656 0 007.324 0 4.006 4.006 0 003.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3l-3 3\"\n    />\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 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\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 LayersIcon = ({ 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 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10\"\n    />\n  </svg>\n);\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const PipelineCard = memo(function PipelineCard({\n  pipeline,\n  onView,\n  onEdit,\n  onTest,\n  onDelete,\n}: PipelineCardProps) {\n  // Calculate stage count\n  const stageCount = pipeline.stages?.length ?? 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?.(pipeline.id);\n  }, [onView, pipeline.id]);\n\n  const handleEditClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onEdit?.(pipeline.id);\n    },\n    [onEdit, pipeline.id]\n  );\n\n  const handleTestClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onTest?.(pipeline.id);\n    },\n    [onTest, pipeline.id]\n  );\n\n  const handleDeleteClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onDelete?.(pipeline.id);\n    },\n    [onDelete, pipeline.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        <PipelineIcon className=\"w-10 h-10 text-text-secondary/50\" />\n        <div className=\"absolute top-2 right-2\">\n          <PipelineStatusBadge status={pipeline.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\">{pipeline.name}</h3>\n            {pipeline.description && (\n              <p className=\"text-xs text-text-secondary truncate mt-0.5\">{pipeline.description}</p>\n            )}\n          </div>\n\n          <div className=\"flex items-center gap-1 ml-2\">\n            {onTest && (\n              <button\n                type=\"button\"\n                onClick={handleTestClick}\n                className=\"\n                  p-1 rounded-md\n                  text-text-secondary\n                  hover:text-status-success-text\n                  hover:bg-status-success-bg/10\n                  transition-colors\n                \"\n                title=\"Test Pipeline\"\n              >\n                <PlayIcon className=\"w-4 h-4\" />\n              </button>\n            )}\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 Pipeline\"\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 Pipeline\"\n              >\n                <DeleteIcon className=\"w-4 h-4\" />\n              </button>\n            )}\n          </div>\n        </div>\n\n        {/* Stats Footer */}\n        <div className=\"flex items-center justify-between text-xs text-text-secondary mt-3\">\n          <div className=\"flex items-center gap-3\">\n            {/* Stage Count */}\n            <span className=\"flex items-center gap-1\" title={`${stageCount} stages`}>\n              <LayersIcon className=\"w-3.5 h-3.5\" />\n              {stageCount} stage{stageCount !== 1 ? 's' : ''}\n            </span>\n          </div>\n\n          {/* Last Executed */}\n          <span\n            title={\n              pipeline.lastExecutedAt\n                ? `Last executed: ${new Date(pipeline.lastExecutedAt).toLocaleString()}`\n                : 'Never executed'\n            }\n          >\n            {formatLastExecuted(pipeline.lastExecutedAt)}\n          </span>\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport default PipelineCard;\n"],"mappings":"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"}
+{"version":3,"file":"PipelineCard.js","names":[],"sources":["../../../../src/bigconsole/components/pipeline/PipelineCard.tsx"],"sourcesContent":["/**\n * PipelineCard Component\n *\n * Card component displaying a Pipeline summary.\n * Shows name, status, stage count, and execution stats.\n *\n * Hierarchy (BOFF-5635): the card is a tile inside the list page's `primary`\n * results section, so it carries a raised surface (border + elevation) and puts\n * its identity first. The old 96px decorative banner was the largest mass in the\n * card and carried no information — the icon is now a small puck on the identity\n * row, which roughly doubles the number of pipelines visible per screen.\n */\n\nimport { memo, useCallback } from 'react';\nimport { formatDistanceToNow } from 'date-fns';\nimport { PipelineStatusBadge } from './PipelineStatusBadge';\nimport { SECTION_FOCUS_RING } from '../common';\nimport type { Pipeline } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface PipelineCardProps {\n  pipeline: Pipeline;\n  onView?: (id: string) => void;\n  onEdit?: (id: string) => void;\n  onTest?: (id: string) => void;\n  onDelete?: (id: string) => void;\n}\n\n// ============================================================================\n// CONSTANTS\n// ============================================================================\n\n/** Icon action button: 40px touch target, visible focus ring, no colour of its own. */\nconst ICON_ACTION = `inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-button text-text-secondary motion-safe:transition-colors ${SECTION_FOCUS_RING}`;\n\n// ============================================================================\n// ICONS\n// ============================================================================\n\nconst PipelineIcon = ({ 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={1.5}\n      d=\"M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 00-3.7-3.7 48.678 48.678 0 00-7.324 0 4.006 4.006 0 00-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3l-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 003.7 3.7 48.656 48.656 0 007.324 0 4.006 4.006 0 003.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3l-3 3\"\n    />\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 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\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 LayersIcon = ({ 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 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10\"\n    />\n  </svg>\n);\n\nconst ClockIcon = ({ 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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\"\n    />\n  </svg>\n);\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const PipelineCard = memo(function PipelineCard({\n  pipeline,\n  onView,\n  onEdit,\n  onTest,\n  onDelete,\n}: PipelineCardProps) {\n  // Calculate stage count\n  const stageCount = pipeline.stages?.length ?? 0;\n\n  // Format last executed time\n  const formatLastExecuted = useCallback((dateStr: string | null): string => {\n    if (!dateStr) return 'Never run';\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?.(pipeline.id);\n  }, [onView, pipeline.id]);\n\n  const handleTitleClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onView?.(pipeline.id);\n    },\n    [onView, pipeline.id]\n  );\n\n  const handleEditClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onEdit?.(pipeline.id);\n    },\n    [onEdit, pipeline.id]\n  );\n\n  const handleTestClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onTest?.(pipeline.id);\n    },\n    [onTest, pipeline.id]\n  );\n\n  const handleDeleteClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onDelete?.(pipeline.id);\n    },\n    [onDelete, pipeline.id]\n  );\n\n  return (\n    <article\n      onClick={handleCardClick}\n      data-testid=\"pipeline-card\"\n      className=\"group flex min-w-0 cursor-pointer flex-col rounded-card border border-[var(--color-border-subtle)] bg-bg-surface shadow-[var(--shadow-elevation-1)] motion-safe:transition-[box-shadow,border-color] hover:border-[var(--color-border-strong)] hover:shadow-[var(--shadow-elevation-2)]\"\n    >\n      {/* Identity — name first, status right, icon reduced to a puck */}\n      <div className=\"flex min-w-0 items-start gap-icon-gap border-b border-[var(--color-border-subtle)] p-4\">\n        <span\n          aria-hidden=\"true\"\n          className=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-button bg-bg-sunken text-text-secondary\"\n        >\n          <PipelineIcon className=\"h-icon-md w-icon-md\" />\n        </span>\n\n        <div className=\"min-w-0 flex-1\">\n          <h3 className=\"min-w-0 text-base font-semibold leading-tight text-text-primary\">\n            <button\n              type=\"button\"\n              onClick={handleTitleClick}\n              title={pipeline.name}\n              className={`block w-full truncate rounded-button text-left ${SECTION_FOCUS_RING}`}\n            >\n              {pipeline.name}\n            </button>\n          </h3>\n          {pipeline.description && (\n            <p className=\"mt-0.5 line-clamp-2 text-sm text-text-secondary\">{pipeline.description}</p>\n          )}\n        </div>\n\n        <PipelineStatusBadge status={pipeline.status} size=\"sm\" />\n      </div>\n\n      {/* Supporting facts + row actions */}\n      <div className=\"flex flex-wrap items-center justify-between gap-control-gap p-4\">\n        <dl className=\"flex min-w-0 flex-wrap items-center gap-x-4 gap-y-1 text-xs text-text-secondary\">\n          <div className=\"flex items-center gap-1\">\n            <dt className=\"sr-only\">Stages</dt>\n            <LayersIcon className=\"h-3.5 w-3.5 shrink-0\" aria-hidden=\"true\" />\n            <dd>\n              {stageCount} stage{stageCount !== 1 ? 's' : ''}\n            </dd>\n          </div>\n          <div className=\"flex items-center gap-1\">\n            <dt className=\"sr-only\">Last run</dt>\n            <ClockIcon className=\"h-3.5 w-3.5 shrink-0\" aria-hidden=\"true\" />\n            <dd\n              title={\n                pipeline.lastExecutedAt\n                  ? `Last executed: ${new Date(pipeline.lastExecutedAt).toLocaleString()}`\n                  : 'Never executed'\n              }\n            >\n              {formatLastExecuted(pipeline.lastExecutedAt)}\n            </dd>\n          </div>\n        </dl>\n\n        <div className=\"flex shrink-0 items-center gap-1\">\n          {onTest && (\n            <button\n              type=\"button\"\n              onClick={handleTestClick}\n              className={`${ICON_ACTION} hover:bg-[var(--color-status-success-bgSubtle)] hover:text-status-success-text`}\n              title=\"Test Pipeline\"\n              aria-label={`Test ${pipeline.name}`}\n            >\n              <PlayIcon className=\"h-icon-sm w-icon-sm\" />\n            </button>\n          )}\n          {onEdit && (\n            <button\n              type=\"button\"\n              onClick={handleEditClick}\n              className={`${ICON_ACTION} hover:bg-bg-sunken hover:text-text-primary`}\n              title=\"Edit Pipeline\"\n              aria-label={`Edit ${pipeline.name}`}\n            >\n              <EditIcon className=\"h-icon-sm w-icon-sm\" />\n            </button>\n          )}\n          {onDelete && (\n            <button\n              type=\"button\"\n              onClick={handleDeleteClick}\n              className={`${ICON_ACTION} hover:bg-[var(--color-status-error-bgSubtle)] hover:text-status-error-text`}\n              title=\"Delete Pipeline\"\n              aria-label={`Delete ${pipeline.name}`}\n            >\n              <DeleteIcon className=\"h-icon-sm w-icon-sm\" />\n            </button>\n          )}\n        </div>\n      </div>\n    </article>\n  );\n});\n\nexport default PipelineCard;\n"],"mappings":"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"}

package/dist/bigconsole/components/pipeline/PipelineDeleteDialog.js

@@ -1,86 +1,99 @@
-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/pipeline/PipelineDeleteDialog.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({ pipeline: e, isOpen: a, onClose: o, onConfirm: s }) {
-	let c = e.stages?.length ?? 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({ pipeline: n, isOpen: u, onClose: d, onConfirm: f }) {
+	let p = n.stages?.length ?? 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,
+			"data-testid": "pipeline-delete-dialog",
+			className: "relative flex max-h-[calc(100dvh-2rem)] w-full max-w-md min-w-0 flex-col gap-form-gap overflow-y-auto rounded-card border border-[var(--color-border-subtle)] bg-bg-surface p-card-padding shadow-[var(--shadow-elevation-4)] 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: "flex items-center gap-icon-gap",
+					children: [/* @__PURE__ */ s("span", {
+						"aria-hidden": "true",
+						className: "rounded-pill bg-[var(--color-status-error-bgSubtle)] p-2",
+						children: /* @__PURE__ */ s(l, { className: "h-icon-md w-icon-md text-status-error-text" })
+					}), /* @__PURE__ */ s("h2", {
+						id: m,
 						className: "text-lg font-semibold text-text-primary",
 						children: "Delete Pipeline"
 					})]
 				}),
-				/* @__PURE__ */ r("div", {
-					className: "mb-6",
-					children: [
-						/* @__PURE__ */ r("p", {
-							className: "text-sm text-text-secondary mb-3",
-							children: [
-								"Are you sure you want to delete the pipeline",
-								" ",
-								/* @__PURE__ */ n("span", {
-									className: "font-medium text-text-primary",
-									children: e.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 pipeline has ",
-									c,
-									" stage",
-									c === 1 ? "" : "s",
-									". All stages will be permanently deleted."
-								]
-							})
-						}),
-						/* @__PURE__ */ n("p", {
-							className: "text-sm text-text-secondary mt-3",
-							children: "This action cannot be undone."
+				/* @__PURE__ */ c("div", {
+					className: "flex min-w-0 flex-col gap-form-gap",
+					children: [/* @__PURE__ */ c("p", {
+						id: h,
+						className: "text-sm text-text-secondary",
+						children: [
+							"Are you sure you want to delete the pipeline",
+							" ",
+							/* @__PURE__ */ s("span", {
+								className: "font-medium text-text-primary",
+								children: n.name
+							}),
+							"? This action cannot be undone."
+						]
+					}), p > 0 && /* @__PURE__ */ s(e, {
+						tone: "warning",
+						padding: "compact",
+						headingLevel: 3,
+						title: `${p} stage${p === 1 ? "" : "s"} will be deleted`,
+						icon: /* @__PURE__ */ s(l, { className: "h-icon-sm w-icon-sm" }),
+						"data-testid": "pipeline-delete-stage-warning",
+						children: /* @__PURE__ */ s("p", {
+							className: "text-sm text-text-secondary",
+							children: "Every stage in this pipeline is removed with it. The parsers themselves are not deleted."
 						})
-					]
+					})]
 				}),
-				/* @__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 border-t border-[var(--color-border-subtle)] pt-form-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            ",
+						variant: "secondary",
+						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            ",
+						variant: "destructive",
+						onClick: y,
 						children: "Delete Pipeline"
 					})]
 				})
@@ -89,6 +102,6 @@ var i = ({ className: e }) => /* @__PURE__ */ n("svg", {
 	}) : null;
 });
 //#endregion
-export { a as default };
+export { u as default };
 
 //# sourceMappingURL=PipelineDeleteDialog.js.map