@burdenoff/microfe-bigconsole 2026.805.3 → 2026.812.2

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

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

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

@@ -1,43 +1,42 @@
-import { memo as e, useCallback as t, useState as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { SECTION_FOCUS_RING as e } from "../common/sectionStyles.js";
+import { Section as t } from "../common/Section.js";
+import "../common/index.js";
+import { memo as n, useCallback as r, useState as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
 //#region src/bigconsole/components/datasink/DataSinkDataViewer.tsx
-var a = e(function({ data: e, dataPath: a, maxHeight: o = "400px", showCopyButton: s = !0 }) {
-	let [c, l] = n(!1), u = JSON.stringify(e, null, 2), d = t(async () => {
+var o = n(function({ data: n, dataPath: o, maxHeight: s = "400px", showCopyButton: c = !0 }) {
+	let [l, u] = i(!1), d = JSON.stringify(n, null, 2), f = r(async () => {
 		try {
-			await navigator.clipboard.writeText(u), l(!0), setTimeout(() => l(!1), 2e3);
+			await navigator.clipboard.writeText(d), u(!0), setTimeout(() => u(!1), 2e3);
 		} catch {}
-	}, [u]);
-	return /* @__PURE__ */ i("div", {
-		className: "relative",
-		children: [(a || s) && /* @__PURE__ */ i("div", {
-			className: "flex items-center justify-between p-2 bg-bg-sunken border-b border-border-default rounded-t-md",
-			children: [a && /* @__PURE__ */ i("span", {
-				className: "text-xs text-text-secondary font-mono",
-				children: ["Path: ", a]
-			}), s && /* @__PURE__ */ r("button", {
-				type: "button",
-				onClick: d,
-				className: "\n                px-2 py-1\n                text-xs font-medium\n                text-text-primary\n                bg-bg-surface\n                hover:bg-bg-sunken\n                rounded\n                transition-colors\n              ",
-				children: c ? "Copied!" : "Copy"
-			})]
-		}), /* @__PURE__ */ r("pre", {
-			className: `
-          p-4
-          bg-bg-surface
-          border border-border-default
-          ${a || s ? "rounded-b-md border-t-0" : "rounded-md"}
-          overflow-auto
-          text-sm
-        `,
-			style: { maxHeight: o },
-			children: /* @__PURE__ */ r("code", {
-				className: "text-text-primary font-mono",
-				children: u
+	}, [d]);
+	return /* @__PURE__ */ a(t, {
+		emphasis: "muted",
+		padding: "compact",
+		headingLevel: 3,
+		title: "Raw JSON",
+		meta: o ? /* @__PURE__ */ a("span", {
+			className: "font-mono text-xs text-text-secondary",
+			children: o
+		}) : void 0,
+		actions: c ? /* @__PURE__ */ a("button", {
+			type: "button",
+			onClick: f,
+			className: `min-h-[var(--size-controlHeight-md)] rounded-button bg-bg-surface px-2 py-1 text-xs font-medium text-text-primary hover:bg-bg-elevated motion-safe:transition-colors ${e}`,
+			children: l ? "Copied!" : "Copy"
+		}) : void 0,
+		headerClassName: "mb-control-gap",
+		children: /* @__PURE__ */ a("pre", {
+			className: "min-w-0 overflow-auto rounded-input bg-bg-surface p-3 text-xs sm:text-sm",
+			style: { maxHeight: s },
+			children: /* @__PURE__ */ a("code", {
+				className: "font-mono text-text-primary",
+				children: d
 			})
-		})]
+		})
 	});
 });
 //#endregion
-export { a as default };
+export { o as default };
 
 //# sourceMappingURL=DataSinkDataViewer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataSinkDataViewer.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/DataSinkDataViewer.tsx"],"sourcesContent":["/**\n * DataSink Data Viewer\n *\n * Component for viewing DataSink data as formatted JSON.\n */\n\nimport { memo, useState, useCallback } from 'react';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface DataSinkDataViewerProps {\n  /** Data to display */\n  data: unknown;\n  /** Optional path to display */\n  dataPath?: string;\n  /** Maximum height */\n  maxHeight?: string;\n  /** Whether to show copy button */\n  showCopyButton?: boolean;\n}\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const DataSinkDataViewer = memo(function DataSinkDataViewer({\n  data,\n  dataPath,\n  maxHeight = '400px',\n  showCopyButton = true,\n}: DataSinkDataViewerProps) {\n  const [isCopied, setIsCopied] = useState(false);\n\n  // Format data as JSON\n  const formattedData = JSON.stringify(data, null, 2);\n\n  // Copy to clipboard\n  const handleCopy = useCallback(async () => {\n    try {\n      await navigator.clipboard.writeText(formattedData);\n      setIsCopied(true);\n      setTimeout(() => setIsCopied(false), 2000);\n    } catch (err) {}\n  }, [formattedData]);\n\n  return (\n    <div className=\"relative\">\n      {/* Header with path and copy button */}\n      {(dataPath || showCopyButton) && (\n        <div className=\"flex items-center justify-between p-2 bg-bg-sunken border-b border-border-default rounded-t-md\">\n          {dataPath && <span className=\"text-xs text-text-secondary font-mono\">Path: {dataPath}</span>}\n          {showCopyButton && (\n            <button\n              type=\"button\"\n              onClick={handleCopy}\n              className={`\n                px-2 py-1\n                text-xs font-medium\n                text-text-primary\n                bg-bg-surface\n                hover:bg-bg-sunken\n                rounded\n                transition-colors\n              `}\n            >\n              {isCopied ? 'Copied!' : 'Copy'}\n            </button>\n          )}\n        </div>\n      )}\n\n      {/* Data display */}\n      <pre\n        className={`\n          p-4\n          bg-bg-surface\n          border border-border-default\n          ${dataPath || showCopyButton ? 'rounded-b-md border-t-0' : 'rounded-md'}\n          overflow-auto\n          text-sm\n        `}\n        style={{ maxHeight }}\n      >\n        <code className=\"text-text-primary font-mono\">{formattedData}</code>\n      </pre>\n    </div>\n  );\n});\n\nexport default DataSinkDataViewer;\n"],"mappings":";;;AA2BA,IAAa,IAAqB,EAAK,SAA4B,EACjE,SACA,aACA,eAAY,SACZ,oBAAiB,MACS;CAC1B,IAAM,CAAC,GAAU,KAAe,EAAS,GAAM,EAGzC,IAAgB,KAAK,UAAU,GAAM,MAAM,EAAE,EAG7C,IAAa,EAAY,YAAY;AACzC,MAAI;AAGF,GAFA,MAAM,UAAU,UAAU,UAAU,EAAc,EAClD,EAAY,GAAK,EACjB,iBAAiB,EAAY,GAAM,EAAE,IAAK;UAC9B;IACb,CAAC,EAAc,CAAC;AAEnB,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,EAEI,KAAY,MACZ,kBAAC,OAAD;GAAK,WAAU;aAAf,CACG,KAAY,kBAAC,QAAD;IAAM,WAAU;cAAhB,CAAwD,UAAO,EAAgB;OAC3F,KACC,kBAAC,UAAD;IACE,MAAK;IACL,SAAS;IACT,WAAW;cAUV,IAAW,YAAY;IACjB,CAAA,CAEP;MAIR,kBAAC,OAAD;GACE,WAAW;;;;YAIP,KAAY,IAAiB,4BAA4B,aAAa;;;;GAI1E,OAAO,EAAE,cAAW;aAEpB,kBAAC,QAAD;IAAM,WAAU;cAA+B;IAAqB,CAAA;GAChE,CAAA,CACF;;EAER"}
+{"version":3,"file":"DataSinkDataViewer.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/DataSinkDataViewer.tsx"],"sourcesContent":["/**\n * DataSink Data Viewer\n *\n * Component for viewing DataSink data as formatted JSON.\n */\n\nimport { memo, useState, useCallback } from 'react';\nimport { Section, SECTION_FOCUS_RING } from '../common';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface DataSinkDataViewerProps {\n  /** Data to display */\n  data: unknown;\n  /** Optional path to display */\n  dataPath?: string;\n  /** Maximum height */\n  maxHeight?: string;\n  /** Whether to show copy button */\n  showCopyButton?: boolean;\n}\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const DataSinkDataViewer = memo(function DataSinkDataViewer({\n  data,\n  dataPath,\n  maxHeight = '400px',\n  showCopyButton = true,\n}: DataSinkDataViewerProps) {\n  const [isCopied, setIsCopied] = useState(false);\n\n  // Format data as JSON\n  const formattedData = JSON.stringify(data, null, 2);\n\n  // Copy to clipboard\n  const handleCopy = useCallback(async () => {\n    try {\n      await navigator.clipboard.writeText(formattedData);\n      setIsCopied(true);\n      setTimeout(() => setIsCopied(false), 2000);\n    } catch (err) {}\n  }, [formattedData]);\n\n  return (\n    <Section\n      emphasis=\"muted\"\n      padding=\"compact\"\n      // Rendered directly inside the detail page's level-2 \"Data preview\"\n      // section, so h3 keeps the outline unbroken (h2 → h4 would skip a level).\n      headingLevel={3}\n      title=\"Raw JSON\"\n      meta={dataPath ? <span className=\"font-mono text-xs text-text-secondary\">{dataPath}</span> : undefined}\n      actions={\n        showCopyButton ? (\n          <button\n            type=\"button\"\n            onClick={handleCopy}\n            className={`min-h-[var(--size-controlHeight-md)] rounded-button bg-bg-surface px-2 py-1 text-xs font-medium text-text-primary hover:bg-bg-elevated motion-safe:transition-colors ${SECTION_FOCUS_RING}`}\n          >\n            {isCopied ? 'Copied!' : 'Copy'}\n          </button>\n        ) : undefined\n      }\n      headerClassName=\"mb-control-gap\"\n    >\n      <pre className=\"min-w-0 overflow-auto rounded-input bg-bg-surface p-3 text-xs sm:text-sm\" style={{ maxHeight }}>\n        <code className=\"font-mono text-text-primary\">{formattedData}</code>\n      </pre>\n    </Section>\n  );\n});\n\nexport default DataSinkDataViewer;\n"],"mappings":";;;;;;AA4BA,IAAa,IAAqB,EAAK,SAA4B,EACjE,SACA,aACA,eAAY,SACZ,oBAAiB,MACS;CAC1B,IAAM,CAAC,GAAU,KAAe,EAAS,GAAM,EAGzC,IAAgB,KAAK,UAAU,GAAM,MAAM,EAAE,EAG7C,IAAa,EAAY,YAAY;AACzC,MAAI;AAGF,GAFA,MAAM,UAAU,UAAU,UAAU,EAAc,EAClD,EAAY,GAAK,EACjB,iBAAiB,EAAY,GAAM,EAAE,IAAK;UAC9B;IACb,CAAC,EAAc,CAAC;AAEnB,QACE,kBAAC,GAAD;EACE,UAAS;EACT,SAAQ;EAGR,cAAc;EACd,OAAM;EACN,MAAM,IAAW,kBAAC,QAAD;GAAM,WAAU;aAAyC;GAAgB,CAAA,GAAG,KAAA;EAC7F,SACE,IACE,kBAAC,UAAD;GACE,MAAK;GACL,SAAS;GACT,WAAW,wKAAwK;aAElL,IAAW,YAAY;GACjB,CAAA,GACP,KAAA;EAEN,iBAAgB;YAEhB,kBAAC,OAAD;GAAK,WAAU;GAA2E,OAAO,EAAE,cAAW;aAC5G,kBAAC,QAAD;IAAM,WAAU;cAA+B;IAAqB,CAAA;GAChE,CAAA;EACE,CAAA;EAEZ"}

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

@@ -1,75 +1,98 @@
-import { memo as e, useCallback as t } from "react";
-import { useI18n as n } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { SECTION_FOCUS_RING as e } from "../common/sectionStyles.js";
+import { Section as t } from "../common/Section.js";
+import "../common/index.js";
+import { useModalFocusTrap as n } from "../../hooks/useModalFocusTrap.js";
+import { memo as r, useCallback as i, useId as a, useRef as o } from "react";
+import { useI18n as s } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/bigconsole/components/datasink/DataSinkDeleteDialog.tsx
-var a = e(function({ dataSink: e, isOpen: a, onClose: o, onConfirm: s, isDeleting: c = !1 }) {
-	let { t: l } = n(), u = t((e) => {
-		e.target === e.currentTarget && !c && o();
-	}, [c, o]), d = t((e) => {
-		e.key === "Escape" && !c && o();
-	}, [c, o]);
-	return a ? /* @__PURE__ */ r("div", {
-		className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50",
-		onClick: u,
-		onKeyDown: d,
-		role: "dialog",
-		"aria-modal": "true",
-		"aria-labelledby": "delete-dialog-title",
-		children: /* @__PURE__ */ i("div", {
-			className: "bg-bg-surface border border-border-default rounded-lg shadow-xl max-w-md w-full",
+var u = `min-h-[var(--size-controlHeight-md)] rounded-button px-4 py-2 text-sm font-medium disabled:cursor-not-allowed disabled:opacity-50 motion-safe:transition-colors ${e}`, d = r(function({ dataSink: e, isOpen: r, onClose: d, onConfirm: f, isDeleting: p = !1 }) {
+	let { t: m } = s(), h = a(), g = a(), _ = o(null), v = o(null);
+	n({
+		isOpen: r,
+		panelRef: _,
+		onClose: i(() => {
+			p || d();
+		}, [p, d]),
+		initialFocusRef: v
+	});
+	let y = i((e) => {
+		e.target === e.currentTarget && !p && d();
+	}, [p, d]);
+	return r ? /* @__PURE__ */ c("div", {
+		className: "fixed inset-0 z-50 flex items-center justify-center bg-[var(--color-bg-overlay)] p-4",
+		onClick: y,
+		children: /* @__PURE__ */ l("div", {
+			ref: _,
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-labelledby": h,
+			"aria-describedby": g,
+			tabIndex: -1,
+			className: "flex max-h-[90vh] w-full max-w-md flex-col rounded-card border border-[var(--color-border-subtle)] bg-bg-surface shadow-[var(--shadow-elevation-3)] focus:outline-none",
 			children: [
-				/* @__PURE__ */ r("div", {
-					className: "p-6 border-b border-border-default",
-					children: /* @__PURE__ */ r("h2", {
-						id: "delete-dialog-title",
+				/* @__PURE__ */ c("div", {
+					className: "border-b border-[var(--color-border-subtle)] p-form-gap sm:p-card-padding",
+					children: /* @__PURE__ */ c("h2", {
+						id: h,
 						className: "text-lg font-semibold text-text-primary",
-						children: l("bigconsole.dataSinks.deleteDialog.title", "Delete DataSink")
+						children: m("bigconsole.dataSinks.deleteDialog.title", "Delete DataSink")
 					})
 				}),
-				/* @__PURE__ */ i("div", {
-					className: "p-6",
+				/* @__PURE__ */ l("div", {
+					className: "min-w-0 flex-1 space-y-form-gap overflow-y-auto p-form-gap sm:p-card-padding",
 					children: [
-						/* @__PURE__ */ r("p", {
-							className: "text-sm text-text-primary mb-4",
-							children: l("bigconsole.dataSinks.deleteDialog.confirmMessage", "Are you sure you want to delete this DataSink?")
+						/* @__PURE__ */ c("p", {
+							id: g,
+							className: "text-sm text-text-primary",
+							children: m("bigconsole.dataSinks.deleteDialog.confirmMessage", "Are you sure you want to delete this DataSink?")
 						}),
-						/* @__PURE__ */ i("div", {
-							className: "bg-bg-sunken p-3 rounded-md",
-							children: [/* @__PURE__ */ r("p", {
+						/* @__PURE__ */ l(t, {
+							emphasis: "muted",
+							padding: "compact",
+							headingLevel: 3,
+							title: "Data sink",
+							headerClassName: "mb-control-gap",
+							children: [/* @__PURE__ */ c("p", {
 								className: "text-sm font-medium text-text-primary",
-								children: e.name || l("bigconsole.dataSinks.deleteDialog.untitledName", "Untitled DataSink")
-							}), /* @__PURE__ */ r("p", {
-								className: "text-xs text-text-secondary mt-1 font-mono",
+								children: e.name || m("bigconsole.dataSinks.deleteDialog.untitledName", "Untitled DataSink")
+							}), /* @__PURE__ */ c("p", {
+								className: "mt-1 break-all font-mono text-xs text-text-secondary",
 								children: e.key
 							})]
 						}),
-						e.linkedWorkflowCount && e.linkedWorkflowCount > 0 && /* @__PURE__ */ r("div", {
-							className: "mt-4 p-3 bg-status-warning-bg/10 border border-status-warning-border/20 rounded-md",
-							children: /* @__PURE__ */ r("p", {
-								className: "text-sm text-status-warning-text",
-								children: e.linkedWorkflowCount === 1 ? l("bigconsole.dataSinks.deleteDialog.linkedWorkflowWarningSingular", "This DataSink is linked to {{count}} workflow. Deleting it will remove these links.", { count: e.linkedWorkflowCount }) : l("bigconsole.dataSinks.deleteDialog.linkedWorkflowWarningPlural", "This DataSink is linked to {{count}} workflows. Deleting it will remove these links.", { count: e.linkedWorkflowCount })
+						e.linkedWorkflowCount && e.linkedWorkflowCount > 0 ? /* @__PURE__ */ c(t, {
+							tone: "warning",
+							padding: "compact",
+							headingLevel: 3,
+							title: "Workflow links will be removed",
+							headerClassName: "mb-control-gap",
+							children: /* @__PURE__ */ c("p", {
+								className: "text-sm text-[var(--color-status-warning-text)]",
+								children: e.linkedWorkflowCount === 1 ? m("bigconsole.dataSinks.deleteDialog.linkedWorkflowWarningSingular", "This DataSink is linked to {{count}} workflow. Deleting it will remove these links.", { count: e.linkedWorkflowCount }) : m("bigconsole.dataSinks.deleteDialog.linkedWorkflowWarningPlural", "This DataSink is linked to {{count}} workflows. Deleting it will remove these links.", { count: e.linkedWorkflowCount })
 							})
-						}),
-						/* @__PURE__ */ r("p", {
-							className: "text-sm text-status-error-text mt-4",
-							children: l("bigconsole.dataSinks.deleteDialog.cannotBeUndone", "This action cannot be undone.")
+						}) : null,
+						/* @__PURE__ */ c("p", {
+							className: "text-sm text-status-error-text",
+							children: m("bigconsole.dataSinks.deleteDialog.cannotBeUndone", "This action cannot be undone.")
 						})
 					]
 				}),
-				/* @__PURE__ */ i("div", {
-					className: "p-6 border-t border-border-default flex items-center justify-end gap-3",
-					children: [/* @__PURE__ */ r("button", {
+				/* @__PURE__ */ l("div", {
+					className: "flex flex-wrap items-center justify-end gap-control-gap border-t border-[var(--color-border-subtle)] p-form-gap sm:p-card-padding",
+					children: [/* @__PURE__ */ c("button", {
+						ref: v,
 						type: "button",
-						onClick: o,
-						disabled: c,
-						className: "\n              px-4 py-2\n              text-sm font-medium\n              text-text-primary\n              bg-bg-sunken\n              hover:bg-border-default\n              disabled:opacity-50 disabled:cursor-not-allowed\n              rounded-md\n              transition-colors\n            ",
-						children: l("bigconsole.dataSinks.deleteDialog.cancelButton", "Cancel")
-					}), /* @__PURE__ */ r("button", {
+						onClick: d,
+						disabled: p,
+						className: `${u} bg-bg-sunken text-text-primary hover:bg-bg-elevated`,
+						children: m("bigconsole.dataSinks.deleteDialog.cancelButton", "Cancel")
+					}), /* @__PURE__ */ c("button", {
 						type: "button",
-						onClick: s,
-						disabled: c,
-						className: "\n              px-4 py-2\n              text-sm font-medium\n              text-white\n              bg-status-error-bg\n              hover:bg-status-error-bg/90\n              disabled:opacity-50 disabled:cursor-not-allowed\n              rounded-md\n              transition-colors\n            ",
-						children: c ? l("bigconsole.dataSinks.deleteDialog.deletingButton", "Deleting...") : l("bigconsole.dataSinks.deleteDialog.deleteButton", "Delete")
+						onClick: f,
+						disabled: p,
+						className: `${u} bg-action-danger-bg text-[var(--color-action-danger-text)] hover:bg-[var(--color-action-danger-bgHover)]`,
+						children: p ? m("bigconsole.dataSinks.deleteDialog.deletingButton", "Deleting...") : m("bigconsole.dataSinks.deleteDialog.deleteButton", "Delete")
 					})]
 				})
 			]
@@ -77,6 +100,6 @@ var a = e(function({ dataSink: e, isOpen: a, onClose: o, onConfirm: s, isDeletin
 	}) : null;
 });
 //#endregion
-export { a as default };
+export { d as default };
 
 //# sourceMappingURL=DataSinkDeleteDialog.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataSinkDeleteDialog.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/DataSinkDeleteDialog.tsx"],"sourcesContent":["/**\n * DataSink Delete Dialog\n *\n * Confirmation dialog for deleting a DataSink.\n */\n\nimport { memo, useCallback } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport type { DataSink } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface DataSinkDeleteDialogProps {\n  /** DataSink to delete */\n  dataSink: DataSink;\n  /** Whether dialog is open */\n  isOpen: boolean;\n  /** Callback when dialog is closed */\n  onClose: () => void;\n  /** Callback when delete is confirmed */\n  onConfirm: () => void;\n  /** Whether delete is in progress */\n  isDeleting?: boolean;\n}\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const DataSinkDeleteDialog = memo(function DataSinkDeleteDialog({\n  dataSink,\n  isOpen,\n  onClose,\n  onConfirm,\n  isDeleting = false,\n}: DataSinkDeleteDialogProps) {\n  const { t } = useI18n();\n\n  // Handle backdrop click\n  const handleBackdropClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (e.target === e.currentTarget && !isDeleting) {\n        onClose();\n      }\n    },\n    [isDeleting, onClose]\n  );\n\n  // Handle escape key\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Escape' && !isDeleting) {\n        onClose();\n      }\n    },\n    [isDeleting, onClose]\n  );\n\n  if (!isOpen) {\n    return null;\n  }\n\n  return (\n    <div\n      className=\"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50\"\n      onClick={handleBackdropClick}\n      onKeyDown={handleKeyDown}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"delete-dialog-title\"\n    >\n      <div className=\"bg-bg-surface border border-border-default rounded-lg shadow-xl max-w-md w-full\">\n        {/* Header */}\n        <div className=\"p-6 border-b border-border-default\">\n          <h2 id=\"delete-dialog-title\" className=\"text-lg font-semibold text-text-primary\">\n            {t('bigconsole.dataSinks.deleteDialog.title', 'Delete DataSink')}\n          </h2>\n        </div>\n\n        {/* Content */}\n        <div className=\"p-6\">\n          <p className=\"text-sm text-text-primary mb-4\">\n            {t('bigconsole.dataSinks.deleteDialog.confirmMessage', 'Are you sure you want to delete this DataSink?')}\n          </p>\n\n          <div className=\"bg-bg-sunken p-3 rounded-md\">\n            <p className=\"text-sm font-medium text-text-primary\">\n              {dataSink.name || t('bigconsole.dataSinks.deleteDialog.untitledName', 'Untitled DataSink')}\n            </p>\n            <p className=\"text-xs text-text-secondary mt-1 font-mono\">{dataSink.key}</p>\n          </div>\n\n          {dataSink.linkedWorkflowCount && dataSink.linkedWorkflowCount > 0 && (\n            <div className=\"mt-4 p-3 bg-status-warning-bg/10 border border-status-warning-border/20 rounded-md\">\n              <p className=\"text-sm text-status-warning-text\">\n                {dataSink.linkedWorkflowCount === 1\n                  ? t(\n                      'bigconsole.dataSinks.deleteDialog.linkedWorkflowWarningSingular',\n                      'This DataSink is linked to {{count}} workflow. Deleting it will remove these links.',\n                      { count: dataSink.linkedWorkflowCount }\n                    )\n                  : t(\n                      'bigconsole.dataSinks.deleteDialog.linkedWorkflowWarningPlural',\n                      'This DataSink is linked to {{count}} workflows. Deleting it will remove these links.',\n                      { count: dataSink.linkedWorkflowCount }\n                    )}\n              </p>\n            </div>\n          )}\n\n          <p className=\"text-sm text-status-error-text mt-4\">\n            {t('bigconsole.dataSinks.deleteDialog.cannotBeUndone', 'This action cannot be undone.')}\n          </p>\n        </div>\n\n        {/* Footer */}\n        <div className=\"p-6 border-t border-border-default flex items-center justify-end gap-3\">\n          <button\n            type=\"button\"\n            onClick={onClose}\n            disabled={isDeleting}\n            className={`\n              px-4 py-2\n              text-sm font-medium\n              text-text-primary\n              bg-bg-sunken\n              hover:bg-border-default\n              disabled:opacity-50 disabled:cursor-not-allowed\n              rounded-md\n              transition-colors\n            `}\n          >\n            {t('bigconsole.dataSinks.deleteDialog.cancelButton', 'Cancel')}\n          </button>\n          <button\n            type=\"button\"\n            onClick={onConfirm}\n            disabled={isDeleting}\n            className={`\n              px-4 py-2\n              text-sm font-medium\n              text-white\n              bg-status-error-bg\n              hover:bg-status-error-bg/90\n              disabled:opacity-50 disabled:cursor-not-allowed\n              rounded-md\n              transition-colors\n            `}\n          >\n            {isDeleting\n              ? t('bigconsole.dataSinks.deleteDialog.deletingButton', 'Deleting...')\n              : t('bigconsole.dataSinks.deleteDialog.deleteButton', 'Delete')}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport default DataSinkDeleteDialog;\n"],"mappings":";;;;AA+BA,IAAa,IAAuB,EAAK,SAA8B,EACrE,aACA,WACA,YACA,cACA,gBAAa,MACe;CAC5B,IAAM,EAAE,SAAM,GAAS,EAGjB,IAAsB,GACzB,MAAwB;AACvB,EAAI,EAAE,WAAW,EAAE,iBAAiB,CAAC,KACnC,GAAS;IAGb,CAAC,GAAY,EAAQ,CACtB,EAGK,IAAgB,GACnB,MAA2B;AAC1B,EAAI,EAAE,QAAQ,YAAY,CAAC,KACzB,GAAS;IAGb,CAAC,GAAY,EAAQ,CACtB;AAMD,QAJK,IAKH,kBAAC,OAAD;EACE,WAAU;EACV,SAAS;EACT,WAAW;EACX,MAAK;EACL,cAAW;EACX,mBAAgB;YAEhB,kBAAC,OAAD;GAAK,WAAU;aAAf;IAEE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,MAAD;MAAI,IAAG;MAAsB,WAAU;gBACpC,EAAE,2CAA2C,kBAAkB;MAC7D,CAAA;KACD,CAAA;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,KAAD;OAAG,WAAU;iBACV,EAAE,oDAAoD,iDAAiD;OACtG,CAAA;MAEJ,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,KAAD;QAAG,WAAU;kBACV,EAAS,QAAQ,EAAE,kDAAkD,oBAAoB;QACxF,CAAA,EACJ,kBAAC,KAAD;QAAG,WAAU;kBAA8C,EAAS;QAAQ,CAAA,CACxE;;MAEL,EAAS,uBAAuB,EAAS,sBAAsB,KAC9D,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,KAAD;QAAG,WAAU;kBACV,EAAS,wBAAwB,IAC9B,EACE,mEACA,uFACA,EAAE,OAAO,EAAS,qBAAqB,CACxC,GACD,EACE,iEACA,wFACA,EAAE,OAAO,EAAS,qBAAqB,CACxC;QACH,CAAA;OACA,CAAA;MAGR,kBAAC,KAAD;OAAG,WAAU;iBACV,EAAE,oDAAoD,gCAAgC;OACrF,CAAA;MACA;;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,UAAU;MACV,WAAW;gBAWV,EAAE,kDAAkD,SAAS;MACvD,CAAA,EACT,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,UAAU;MACV,WAAW;gBAWV,IACG,EAAE,oDAAoD,cAAc,GACpE,EAAE,kDAAkD,SAAS;MAC1D,CAAA,CACL;;IACF;;EACF,CAAA,GAhGC;EAkGT"}
+{"version":3,"file":"DataSinkDeleteDialog.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/DataSinkDeleteDialog.tsx"],"sourcesContent":["/**\n * DataSink Delete Dialog\n *\n * Confirmation dialog for deleting a DataSink.\n */\n\nimport { memo, useCallback, useId, useRef } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useModalFocusTrap } from '../../hooks/useModalFocusTrap';\nimport { Section, SECTION_FOCUS_RING } from '../common';\nimport type { DataSink } from '../../types';\n\n/** Shared button recipe for the dialog footer. Keeps a visible focus ring. */\nconst DIALOG_BUTTON =\n  `min-h-[var(--size-controlHeight-md)] rounded-button px-4 py-2 text-sm font-medium disabled:cursor-not-allowed disabled:opacity-50 motion-safe:transition-colors ${SECTION_FOCUS_RING}` as const;\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface DataSinkDeleteDialogProps {\n  /** DataSink to delete */\n  dataSink: DataSink;\n  /** Whether dialog is open */\n  isOpen: boolean;\n  /** Callback when dialog is closed */\n  onClose: () => void;\n  /** Callback when delete is confirmed */\n  onConfirm: () => void;\n  /** Whether delete is in progress */\n  isDeleting?: boolean;\n}\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const DataSinkDeleteDialog = memo(function DataSinkDeleteDialog({\n  dataSink,\n  isOpen,\n  onClose,\n  onConfirm,\n  isDeleting = false,\n}: DataSinkDeleteDialogProps) {\n  const { t } = useI18n();\n  const titleId = useId();\n  const descriptionId = useId();\n  const panelRef = useRef<HTMLDivElement | null>(null);\n  const cancelRef = useRef<HTMLButtonElement | null>(null);\n\n  // Escape must not yank the dialog away mid-delete — the request is already in\n  // flight and the user would be left guessing whether it landed.\n  const handleEscape = useCallback(() => {\n    if (!isDeleting) onClose();\n  }, [isDeleting, onClose]);\n\n  // `aria-modal=\"true\"` promises assistive tech that focus is confined to the\n  // panel, so it has to actually be confined. Cancel is the entry point: this is\n  // a destructive confirmation, so the control under the keyboard is the safe\n  // one. Same contract as the pipeline and workflow delete dialogs.\n  useModalFocusTrap({ isOpen, panelRef, onClose: handleEscape, initialFocusRef: cancelRef });\n\n  // Handle backdrop click\n  const handleBackdropClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (e.target === e.currentTarget && !isDeleting) {\n        onClose();\n      }\n    },\n    [isDeleting, onClose]\n  );\n\n  if (!isOpen) {\n    return null;\n  }\n\n  return (\n    <div\n      className=\"fixed inset-0 z-50 flex items-center justify-center bg-[var(--color-bg-overlay)] p-4\"\n      onClick={handleBackdropClick}\n    >\n      {/*\n        `role=\"dialog\"` / `aria-modal` belong on the PANEL, not the scrim: on the\n        scrim the dialog boundary screen readers announce is the whole viewport.\n      */}\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=\"flex max-h-[90vh] w-full max-w-md flex-col rounded-card border border-[var(--color-border-subtle)] bg-bg-surface shadow-[var(--shadow-elevation-3)] focus:outline-none\"\n      >\n        {/* Header strip — structural only. */}\n        <div className=\"border-b border-[var(--color-border-subtle)] p-form-gap sm:p-card-padding\">\n          <h2 id={titleId} className=\"text-lg font-semibold text-text-primary\">\n            {t('bigconsole.dataSinks.deleteDialog.title', 'Delete DataSink')}\n          </h2>\n        </div>\n\n        {/* Body */}\n        <div className=\"min-w-0 flex-1 space-y-form-gap overflow-y-auto p-form-gap sm:p-card-padding\">\n          <p id={descriptionId} className=\"text-sm text-text-primary\">\n            {t('bigconsole.dataSinks.deleteDialog.confirmMessage', 'Are you sure you want to delete this DataSink?')}\n          </p>\n\n          <Section\n            emphasis=\"muted\"\n            padding=\"compact\"\n            headingLevel={3}\n            title=\"Data sink\"\n            headerClassName=\"mb-control-gap\"\n          >\n            <p className=\"text-sm font-medium text-text-primary\">\n              {dataSink.name || t('bigconsole.dataSinks.deleteDialog.untitledName', 'Untitled DataSink')}\n            </p>\n            <p className=\"mt-1 break-all font-mono text-xs text-text-secondary\">{dataSink.key}</p>\n          </Section>\n\n          {dataSink.linkedWorkflowCount && dataSink.linkedWorkflowCount > 0 ? (\n            <Section\n              tone=\"warning\"\n              padding=\"compact\"\n              headingLevel={3}\n              title=\"Workflow links will be removed\"\n              headerClassName=\"mb-control-gap\"\n            >\n              <p className=\"text-sm text-[var(--color-status-warning-text)]\">\n                {dataSink.linkedWorkflowCount === 1\n                  ? t(\n                      'bigconsole.dataSinks.deleteDialog.linkedWorkflowWarningSingular',\n                      'This DataSink is linked to {{count}} workflow. Deleting it will remove these links.',\n                      { count: dataSink.linkedWorkflowCount }\n                    )\n                  : t(\n                      'bigconsole.dataSinks.deleteDialog.linkedWorkflowWarningPlural',\n                      'This DataSink is linked to {{count}} workflows. Deleting it will remove these links.',\n                      { count: dataSink.linkedWorkflowCount }\n                    )}\n              </p>\n            </Section>\n          ) : null}\n\n          <p className=\"text-sm text-status-error-text\">\n            {t('bigconsole.dataSinks.deleteDialog.cannotBeUndone', 'This action cannot be undone.')}\n          </p>\n        </div>\n\n        {/* Footer strip */}\n        <div className=\"flex flex-wrap items-center justify-end gap-control-gap border-t border-[var(--color-border-subtle)] p-form-gap sm:p-card-padding\">\n          <button\n            ref={cancelRef}\n            type=\"button\"\n            onClick={onClose}\n            disabled={isDeleting}\n            className={`${DIALOG_BUTTON} bg-bg-sunken text-text-primary hover:bg-bg-elevated`}\n          >\n            {t('bigconsole.dataSinks.deleteDialog.cancelButton', 'Cancel')}\n          </button>\n          <button\n            type=\"button\"\n            onClick={onConfirm}\n            disabled={isDeleting}\n            className={`${DIALOG_BUTTON} bg-action-danger-bg text-[var(--color-action-danger-text)] hover:bg-[var(--color-action-danger-bgHover)]`}\n          >\n            {isDeleting\n              ? t('bigconsole.dataSinks.deleteDialog.deletingButton', 'Deleting...')\n              : t('bigconsole.dataSinks.deleteDialog.deleteButton', 'Delete')}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport default DataSinkDeleteDialog;\n"],"mappings":";;;;;;;;AAaA,IAAM,IACJ,mKAAmK,KAuBxJ,IAAuB,EAAK,SAA8B,EACrE,aACA,WACA,YACA,cACA,gBAAa,MACe;CAC5B,IAAM,EAAE,SAAM,GAAS,EACjB,IAAU,GAAO,EACjB,IAAgB,GAAO,EACvB,IAAW,EAA8B,KAAK,EAC9C,IAAY,EAAiC,KAAK;AAYxD,GAAkB;EAAE;EAAQ;EAAU,SARjB,QAAkB;AACrC,GAAK,KAAY,GAAS;KACzB,CAAC,GAAY,EAAQ,CAAC;EAMoC,iBAAiB;EAAW,CAAC;CAG1F,IAAM,IAAsB,GACzB,MAAwB;AACvB,EAAI,EAAE,WAAW,EAAE,iBAAiB,CAAC,KACnC,GAAS;IAGb,CAAC,GAAY,EAAQ,CACtB;AAMD,QAJK,IAKH,kBAAC,OAAD;EACE,WAAU;EACV,SAAS;YAMT,kBAAC,OAAD;GACE,KAAK;GACL,MAAK;GACL,cAAW;GACX,mBAAiB;GACjB,oBAAkB;GAClB,UAAU;GACV,WAAU;aAPZ;IAUE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,MAAD;MAAI,IAAI;MAAS,WAAU;gBACxB,EAAE,2CAA2C,kBAAkB;MAC7D,CAAA;KACD,CAAA;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,KAAD;OAAG,IAAI;OAAe,WAAU;iBAC7B,EAAE,oDAAoD,iDAAiD;OACtG,CAAA;MAEJ,kBAAC,GAAD;OACE,UAAS;OACT,SAAQ;OACR,cAAc;OACd,OAAM;OACN,iBAAgB;iBALlB,CAOE,kBAAC,KAAD;QAAG,WAAU;kBACV,EAAS,QAAQ,EAAE,kDAAkD,oBAAoB;QACxF,CAAA,EACJ,kBAAC,KAAD;QAAG,WAAU;kBAAwD,EAAS;QAAQ,CAAA,CAC9E;;MAET,EAAS,uBAAuB,EAAS,sBAAsB,IAC9D,kBAAC,GAAD;OACE,MAAK;OACL,SAAQ;OACR,cAAc;OACd,OAAM;OACN,iBAAgB;iBAEhB,kBAAC,KAAD;QAAG,WAAU;kBACV,EAAS,wBAAwB,IAC9B,EACE,mEACA,uFACA,EAAE,OAAO,EAAS,qBAAqB,CACxC,GACD,EACE,iEACA,wFACA,EAAE,OAAO,EAAS,qBAAqB,CACxC;QACH,CAAA;OACI,CAAA,GACR;MAEJ,kBAAC,KAAD;OAAG,WAAU;iBACV,EAAE,oDAAoD,gCAAgC;OACrF,CAAA;MACA;;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,UAAD;MACE,KAAK;MACL,MAAK;MACL,SAAS;MACT,UAAU;MACV,WAAW,GAAG,EAAc;gBAE3B,EAAE,kDAAkD,SAAS;MACvD,CAAA,EACT,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,UAAU;MACV,WAAW,GAAG,EAAc;gBAE3B,IACG,EAAE,oDAAoD,cAAc,GACpE,EAAE,kDAAkD,SAAS;MAC1D,CAAA,CACL;;IACF;;EACF,CAAA,GAnGC;EAqGT"}

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

@@ -1,82 +1,92 @@
-import { memo as e, useCallback as t, useState as n } from "react";
-import { useI18n as r } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { SECTION_FOCUS_RING as e } from "../common/sectionStyles.js";
+import { Section as t } from "../common/Section.js";
+import "../common/index.js";
+import { memo as n, useCallback as r, useState as i } from "react";
+import { useI18n as a } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/bigconsole/components/datasink/DataSinkRefreshDialog.tsx
-var o = e(function({ dataSink: e, isOpen: o, onClose: s, onConfirm: c, isRefreshing: l = !1 }) {
-	let { t: u } = r(), [d, f] = n(!1), p = t((e) => {
-		e.target === e.currentTarget && !l && s();
-	}, [l, s]), m = (e) => new Date(e).toLocaleString(), h = t(() => {
-		c(d);
-	}, [c, d]);
-	return o ? /* @__PURE__ */ i("div", {
-		className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50",
-		onClick: p,
+var c = `min-h-[var(--size-controlHeight-md)] rounded-button px-4 py-2 text-sm font-medium disabled:cursor-not-allowed disabled:opacity-50 motion-safe:transition-colors ${e}`, l = n(function({ dataSink: n, isOpen: l, onClose: u, onConfirm: d, isRefreshing: f = !1 }) {
+	let { t: p } = a(), [m, h] = i(!1), g = r((e) => {
+		e.target === e.currentTarget && !f && u();
+	}, [f, u]), _ = (e) => new Date(e).toLocaleString(), v = r(() => {
+		d(m);
+	}, [d, m]);
+	return l ? /* @__PURE__ */ o("div", {
+		className: "fixed inset-0 z-50 flex items-center justify-center bg-[var(--color-bg-overlay)] p-4",
+		onClick: g,
 		role: "dialog",
 		"aria-modal": "true",
 		"aria-labelledby": "refresh-dialog-title",
-		children: /* @__PURE__ */ a("div", {
-			className: "bg-bg-surface border border-border-default rounded-lg shadow-xl max-w-md w-full",
+		children: /* @__PURE__ */ s("div", {
+			className: "flex max-h-[90vh] w-full max-w-md flex-col rounded-card border border-[var(--color-border-subtle)] bg-bg-surface shadow-[var(--shadow-elevation-3)]",
 			children: [
-				/* @__PURE__ */ i("div", {
-					className: "p-6 border-b border-border-default",
-					children: /* @__PURE__ */ i("h2", {
+				/* @__PURE__ */ o("div", {
+					className: "border-b border-[var(--color-border-subtle)] p-form-gap sm:p-card-padding",
+					children: /* @__PURE__ */ o("h2", {
 						id: "refresh-dialog-title",
 						className: "text-lg font-semibold text-text-primary",
-						children: u("bigconsole.dataSinks.refreshDialog.title", "Refresh DataSink")
+						children: p("bigconsole.dataSinks.refreshDialog.title", "Refresh DataSink")
 					})
 				}),
-				/* @__PURE__ */ a("div", {
-					className: "p-6",
-					children: [
-						/* @__PURE__ */ a("div", {
-							className: "bg-bg-sunken p-3 rounded-md mb-4",
-							children: [
-								/* @__PURE__ */ i("p", {
-									className: "text-sm font-medium text-text-primary",
-									children: e.name || u("bigconsole.dataSinks.refreshDialog.untitledName", "Untitled DataSink")
-								}),
-								/* @__PURE__ */ i("p", {
-									className: "text-xs text-text-secondary mt-1 font-mono",
-									children: e.key
-								}),
-								e.lastRefreshedAt && /* @__PURE__ */ i("p", {
-									className: "text-xs text-text-secondary mt-2",
-									children: u("bigconsole.dataSinks.refreshDialog.lastRefreshed", "Last refreshed: {{date}}", { date: m(e.lastRefreshedAt) })
-								})
-							]
-						}),
-						/* @__PURE__ */ a("label", {
-							className: "flex items-center gap-2 cursor-pointer",
-							children: [/* @__PURE__ */ i("input", {
+				/* @__PURE__ */ s("div", {
+					className: "min-w-0 flex-1 space-y-form-gap overflow-y-auto p-form-gap sm:p-card-padding",
+					children: [/* @__PURE__ */ s(t, {
+						emphasis: "muted",
+						padding: "compact",
+						headingLevel: 3,
+						title: "Data sink",
+						headerClassName: "mb-control-gap",
+						children: [
+							/* @__PURE__ */ o("p", {
+								className: "text-sm font-medium text-text-primary",
+								children: n.name || p("bigconsole.dataSinks.refreshDialog.untitledName", "Untitled DataSink")
+							}),
+							/* @__PURE__ */ o("p", {
+								className: "mt-1 break-all font-mono text-xs text-text-secondary",
+								children: n.key
+							}),
+							n.lastRefreshedAt && /* @__PURE__ */ o("p", {
+								className: "mt-2 text-xs text-text-secondary",
+								children: p("bigconsole.dataSinks.refreshDialog.lastRefreshed", "Last refreshed: {{date}}", { date: _(n.lastRefreshedAt) })
+							})
+						]
+					}), /* @__PURE__ */ s(t, {
+						emphasis: "bare",
+						padding: "none",
+						headingLevel: 3,
+						title: "Options",
+						headerClassName: "mb-control-gap",
+						children: [/* @__PURE__ */ s("label", {
+							className: "flex min-h-[var(--size-controlHeight-md)] cursor-pointer items-center gap-2",
+							children: [/* @__PURE__ */ o("input", {
 								type: "checkbox",
-								checked: d,
-								onChange: (e) => f(e.target.checked),
-								className: "w-4 h-4 text-action-primary-bg focus:ring-action-primary-bg rounded"
-							}), /* @__PURE__ */ i("span", {
+								checked: m,
+								onChange: (e) => h(e.target.checked),
+								className: `h-4 w-4 rounded ${e}`
+							}), /* @__PURE__ */ o("span", {
 								className: "text-sm text-text-primary",
-								children: u("bigconsole.dataSinks.refreshDialog.forceRefreshLabel", "Force refresh (bypass cache)")
+								children: p("bigconsole.dataSinks.refreshDialog.forceRefreshLabel", "Force refresh (bypass cache)")
 							})]
-						}),
-						/* @__PURE__ */ i("p", {
-							className: "mt-2 text-xs text-text-secondary",
-							children: u("bigconsole.dataSinks.refreshDialog.forceRefreshDescription", "Force refresh will re-fetch all data from the source, ignoring any cached values.")
-						})
-					]
+						}), /* @__PURE__ */ o("p", {
+							className: "mt-1 text-xs text-text-secondary",
+							children: p("bigconsole.dataSinks.refreshDialog.forceRefreshDescription", "Force refresh will re-fetch all data from the source, ignoring any cached values.")
+						})]
+					})]
 				}),
-				/* @__PURE__ */ a("div", {
-					className: "p-6 border-t border-border-default flex items-center justify-end gap-3",
-					children: [/* @__PURE__ */ i("button", {
+				/* @__PURE__ */ s("div", {
+					className: "flex flex-wrap items-center justify-end gap-control-gap border-t border-[var(--color-border-subtle)] p-form-gap sm:p-card-padding",
+					children: [/* @__PURE__ */ o("button", {
 						type: "button",
-						onClick: s,
-						disabled: l,
-						className: "\n              px-4 py-2\n              text-sm font-medium\n              text-text-primary\n              bg-bg-sunken\n              hover:bg-border-default\n              disabled:opacity-50 disabled:cursor-not-allowed\n              rounded-md\n              transition-colors\n            ",
-						children: u("bigconsole.dataSinks.refreshDialog.cancelButton", "Cancel")
-					}), /* @__PURE__ */ i("button", {
+						onClick: u,
+						disabled: f,
+						className: `${c} bg-bg-sunken text-text-primary hover:bg-bg-elevated`,
+						children: p("bigconsole.dataSinks.refreshDialog.cancelButton", "Cancel")
+					}), /* @__PURE__ */ o("button", {
 						type: "button",
-						onClick: h,
-						disabled: l,
-						className: "\n              px-4 py-2\n              text-sm font-medium\n              text-action-primary-fg\n              bg-action-primary-bg\n              hover:bg-action-primary-bgHover\n              disabled:opacity-50 disabled:cursor-not-allowed\n              rounded-md\n              transition-colors\n            ",
-						children: l ? u("bigconsole.dataSinks.refreshDialog.refreshingButton", "Refreshing...") : u("bigconsole.dataSinks.refreshDialog.refreshButton", "Refresh")
+						onClick: v,
+						disabled: f,
+						className: `${c} bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bgHover`,
+						children: f ? p("bigconsole.dataSinks.refreshDialog.refreshingButton", "Refreshing...") : p("bigconsole.dataSinks.refreshDialog.refreshButton", "Refresh")
 					})]
 				})
 			]
@@ -84,6 +94,6 @@ var o = e(function({ dataSink: e, isOpen: o, onClose: s, onConfirm: c, isRefresh
 	}) : null;
 });
 //#endregion
-export { o as default };
+export { l as default };
 
 //# sourceMappingURL=DataSinkRefreshDialog.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataSinkRefreshDialog.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/DataSinkRefreshDialog.tsx"],"sourcesContent":["/**\n * DataSink Refresh Dialog\n *\n * Dialog for confirming DataSink refresh with force option.\n */\n\nimport { memo, useState, useCallback } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport type { DataSink } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface DataSinkRefreshDialogProps {\n  /** DataSink to refresh */\n  dataSink: DataSink;\n  /** Whether dialog is open */\n  isOpen: boolean;\n  /** Callback when dialog is closed */\n  onClose: () => void;\n  /** Callback when refresh is confirmed (with force flag) */\n  onConfirm: (force: boolean) => void;\n  /** Whether refresh is in progress */\n  isRefreshing?: boolean;\n}\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const DataSinkRefreshDialog = memo(function DataSinkRefreshDialog({\n  dataSink,\n  isOpen,\n  onClose,\n  onConfirm,\n  isRefreshing = false,\n}: DataSinkRefreshDialogProps) {\n  const { t } = useI18n();\n  const [forceRefresh, setForceRefresh] = useState(false);\n\n  // Handle backdrop click\n  const handleBackdropClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (e.target === e.currentTarget && !isRefreshing) {\n        onClose();\n      }\n    },\n    [isRefreshing, onClose]\n  );\n\n  // Format date\n  const formatDate = (dateString: string) => {\n    return new Date(dateString).toLocaleString();\n  };\n\n  // Handle confirm\n  const handleConfirm = useCallback(() => {\n    onConfirm(forceRefresh);\n  }, [onConfirm, forceRefresh]);\n\n  if (!isOpen) {\n    return null;\n  }\n\n  return (\n    <div\n      className=\"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50\"\n      onClick={handleBackdropClick}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"refresh-dialog-title\"\n    >\n      <div className=\"bg-bg-surface border border-border-default rounded-lg shadow-xl max-w-md w-full\">\n        {/* Header */}\n        <div className=\"p-6 border-b border-border-default\">\n          <h2 id=\"refresh-dialog-title\" className=\"text-lg font-semibold text-text-primary\">\n            {t('bigconsole.dataSinks.refreshDialog.title', 'Refresh DataSink')}\n          </h2>\n        </div>\n\n        {/* Content */}\n        <div className=\"p-6\">\n          {/* DataSink info */}\n          <div className=\"bg-bg-sunken p-3 rounded-md mb-4\">\n            <p className=\"text-sm font-medium text-text-primary\">\n              {dataSink.name || t('bigconsole.dataSinks.refreshDialog.untitledName', 'Untitled DataSink')}\n            </p>\n            <p className=\"text-xs text-text-secondary mt-1 font-mono\">{dataSink.key}</p>\n            {dataSink.lastRefreshedAt && (\n              <p className=\"text-xs text-text-secondary mt-2\">\n                {t('bigconsole.dataSinks.refreshDialog.lastRefreshed', 'Last refreshed: {{date}}', {\n                  date: formatDate(dataSink.lastRefreshedAt),\n                })}\n              </p>\n            )}\n          </div>\n\n          {/* Force refresh option */}\n          <label className=\"flex items-center gap-2 cursor-pointer\">\n            <input\n              type=\"checkbox\"\n              checked={forceRefresh}\n              onChange={(e) => setForceRefresh(e.target.checked)}\n              className=\"w-4 h-4 text-action-primary-bg focus:ring-action-primary-bg rounded\"\n            />\n            <span className=\"text-sm text-text-primary\">\n              {t('bigconsole.dataSinks.refreshDialog.forceRefreshLabel', 'Force refresh (bypass cache)')}\n            </span>\n          </label>\n          <p className=\"mt-2 text-xs text-text-secondary\">\n            {t(\n              'bigconsole.dataSinks.refreshDialog.forceRefreshDescription',\n              'Force refresh will re-fetch all data from the source, ignoring any cached values.'\n            )}\n          </p>\n        </div>\n\n        {/* Footer */}\n        <div className=\"p-6 border-t border-border-default flex items-center justify-end gap-3\">\n          <button\n            type=\"button\"\n            onClick={onClose}\n            disabled={isRefreshing}\n            className={`\n              px-4 py-2\n              text-sm font-medium\n              text-text-primary\n              bg-bg-sunken\n              hover:bg-border-default\n              disabled:opacity-50 disabled:cursor-not-allowed\n              rounded-md\n              transition-colors\n            `}\n          >\n            {t('bigconsole.dataSinks.refreshDialog.cancelButton', 'Cancel')}\n          </button>\n          <button\n            type=\"button\"\n            onClick={handleConfirm}\n            disabled={isRefreshing}\n            className={`\n              px-4 py-2\n              text-sm font-medium\n              text-action-primary-fg\n              bg-action-primary-bg\n              hover:bg-action-primary-bgHover\n              disabled:opacity-50 disabled:cursor-not-allowed\n              rounded-md\n              transition-colors\n            `}\n          >\n            {isRefreshing\n              ? t('bigconsole.dataSinks.refreshDialog.refreshingButton', 'Refreshing...')\n              : t('bigconsole.dataSinks.refreshDialog.refreshButton', 'Refresh')}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport default DataSinkRefreshDialog;\n"],"mappings":";;;;AA+BA,IAAa,IAAwB,EAAK,SAA+B,EACvE,aACA,WACA,YACA,cACA,kBAAe,MACc;CAC7B,IAAM,EAAE,SAAM,GAAS,EACjB,CAAC,GAAc,KAAmB,EAAS,GAAM,EAGjD,IAAsB,GACzB,MAAwB;AACvB,EAAI,EAAE,WAAW,EAAE,iBAAiB,CAAC,KACnC,GAAS;IAGb,CAAC,GAAc,EAAQ,CACxB,EAGK,KAAc,MACX,IAAI,KAAK,EAAW,CAAC,gBAAgB,EAIxC,IAAgB,QAAkB;AACtC,IAAU,EAAa;IACtB,CAAC,GAAW,EAAa,CAAC;AAM7B,QAJK,IAKH,kBAAC,OAAD;EACE,WAAU;EACV,SAAS;EACT,MAAK;EACL,cAAW;EACX,mBAAgB;YAEhB,kBAAC,OAAD;GAAK,WAAU;aAAf;IAEE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,MAAD;MAAI,IAAG;MAAuB,WAAU;gBACrC,EAAE,4CAA4C,mBAAmB;MAC/D,CAAA;KACD,CAAA;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf;MAEE,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACE,kBAAC,KAAD;SAAG,WAAU;mBACV,EAAS,QAAQ,EAAE,mDAAmD,oBAAoB;SACzF,CAAA;QACJ,kBAAC,KAAD;SAAG,WAAU;mBAA8C,EAAS;SAAQ,CAAA;QAC3E,EAAS,mBACR,kBAAC,KAAD;SAAG,WAAU;mBACV,EAAE,oDAAoD,4BAA4B,EACjF,MAAM,EAAW,EAAS,gBAAgB,EAC3C,CAAC;SACA,CAAA;QAEF;;MAGN,kBAAC,SAAD;OAAO,WAAU;iBAAjB,CACE,kBAAC,SAAD;QACE,MAAK;QACL,SAAS;QACT,WAAW,MAAM,EAAgB,EAAE,OAAO,QAAQ;QAClD,WAAU;QACV,CAAA,EACF,kBAAC,QAAD;QAAM,WAAU;kBACb,EAAE,wDAAwD,+BAA+B;QACrF,CAAA,CACD;;MACR,kBAAC,KAAD;OAAG,WAAU;iBACV,EACC,8DACA,oFACD;OACC,CAAA;MACA;;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,UAAU;MACV,WAAW;gBAWV,EAAE,mDAAmD,SAAS;MACxD,CAAA,EACT,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,UAAU;MACV,WAAW;gBAWV,IACG,EAAE,uDAAuD,gBAAgB,GACzE,EAAE,oDAAoD,UAAU;MAC7D,CAAA,CACL;;IACF;;EACF,CAAA,GAhGC;EAkGT"}
+{"version":3,"file":"DataSinkRefreshDialog.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/DataSinkRefreshDialog.tsx"],"sourcesContent":["/**\n * DataSink Refresh Dialog\n *\n * Dialog for confirming DataSink refresh with force option.\n */\n\nimport { memo, useState, useCallback } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { Section, SECTION_FOCUS_RING } from '../common';\nimport type { DataSink } from '../../types';\n\n/** Shared button recipe for the dialog footer. Keeps a visible focus ring. */\nconst DIALOG_BUTTON =\n  `min-h-[var(--size-controlHeight-md)] rounded-button px-4 py-2 text-sm font-medium disabled:cursor-not-allowed disabled:opacity-50 motion-safe:transition-colors ${SECTION_FOCUS_RING}` as const;\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface DataSinkRefreshDialogProps {\n  /** DataSink to refresh */\n  dataSink: DataSink;\n  /** Whether dialog is open */\n  isOpen: boolean;\n  /** Callback when dialog is closed */\n  onClose: () => void;\n  /** Callback when refresh is confirmed (with force flag) */\n  onConfirm: (force: boolean) => void;\n  /** Whether refresh is in progress */\n  isRefreshing?: boolean;\n}\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const DataSinkRefreshDialog = memo(function DataSinkRefreshDialog({\n  dataSink,\n  isOpen,\n  onClose,\n  onConfirm,\n  isRefreshing = false,\n}: DataSinkRefreshDialogProps) {\n  const { t } = useI18n();\n  const [forceRefresh, setForceRefresh] = useState(false);\n\n  // Handle backdrop click\n  const handleBackdropClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (e.target === e.currentTarget && !isRefreshing) {\n        onClose();\n      }\n    },\n    [isRefreshing, onClose]\n  );\n\n  // Format date\n  const formatDate = (dateString: string) => {\n    return new Date(dateString).toLocaleString();\n  };\n\n  // Handle confirm\n  const handleConfirm = useCallback(() => {\n    onConfirm(forceRefresh);\n  }, [onConfirm, forceRefresh]);\n\n  if (!isOpen) {\n    return null;\n  }\n\n  return (\n    <div\n      className=\"fixed inset-0 z-50 flex items-center justify-center bg-[var(--color-bg-overlay)] p-4\"\n      onClick={handleBackdropClick}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"refresh-dialog-title\"\n    >\n      <div className=\"flex max-h-[90vh] w-full max-w-md flex-col rounded-card border border-[var(--color-border-subtle)] bg-bg-surface shadow-[var(--shadow-elevation-3)]\">\n        {/* Header strip — structural only. */}\n        <div className=\"border-b border-[var(--color-border-subtle)] p-form-gap sm:p-card-padding\">\n          <h2 id=\"refresh-dialog-title\" className=\"text-lg font-semibold text-text-primary\">\n            {t('bigconsole.dataSinks.refreshDialog.title', 'Refresh DataSink')}\n          </h2>\n        </div>\n\n        {/* Body */}\n        <div className=\"min-w-0 flex-1 space-y-form-gap overflow-y-auto p-form-gap sm:p-card-padding\">\n          <Section\n            emphasis=\"muted\"\n            padding=\"compact\"\n            headingLevel={3}\n            title=\"Data sink\"\n            headerClassName=\"mb-control-gap\"\n          >\n            <p className=\"text-sm font-medium text-text-primary\">\n              {dataSink.name || t('bigconsole.dataSinks.refreshDialog.untitledName', 'Untitled DataSink')}\n            </p>\n            <p className=\"mt-1 break-all font-mono text-xs text-text-secondary\">{dataSink.key}</p>\n            {dataSink.lastRefreshedAt && (\n              <p className=\"mt-2 text-xs text-text-secondary\">\n                {t('bigconsole.dataSinks.refreshDialog.lastRefreshed', 'Last refreshed: {{date}}', {\n                  date: formatDate(dataSink.lastRefreshedAt),\n                })}\n              </p>\n            )}\n          </Section>\n\n          <Section emphasis=\"bare\" padding=\"none\" headingLevel={3} title=\"Options\" headerClassName=\"mb-control-gap\">\n            <label className=\"flex min-h-[var(--size-controlHeight-md)] cursor-pointer items-center gap-2\">\n              <input\n                type=\"checkbox\"\n                checked={forceRefresh}\n                onChange={(e) => setForceRefresh(e.target.checked)}\n                className={`h-4 w-4 rounded ${SECTION_FOCUS_RING}`}\n              />\n              <span className=\"text-sm text-text-primary\">\n                {t('bigconsole.dataSinks.refreshDialog.forceRefreshLabel', 'Force refresh (bypass cache)')}\n              </span>\n            </label>\n            <p className=\"mt-1 text-xs text-text-secondary\">\n              {t(\n                'bigconsole.dataSinks.refreshDialog.forceRefreshDescription',\n                'Force refresh will re-fetch all data from the source, ignoring any cached values.'\n              )}\n            </p>\n          </Section>\n        </div>\n\n        {/* Footer strip */}\n        <div className=\"flex flex-wrap items-center justify-end gap-control-gap border-t border-[var(--color-border-subtle)] p-form-gap sm:p-card-padding\">\n          <button\n            type=\"button\"\n            onClick={onClose}\n            disabled={isRefreshing}\n            className={`${DIALOG_BUTTON} bg-bg-sunken text-text-primary hover:bg-bg-elevated`}\n          >\n            {t('bigconsole.dataSinks.refreshDialog.cancelButton', 'Cancel')}\n          </button>\n          <button\n            type=\"button\"\n            onClick={handleConfirm}\n            disabled={isRefreshing}\n            className={`${DIALOG_BUTTON} bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bgHover`}\n          >\n            {isRefreshing\n              ? t('bigconsole.dataSinks.refreshDialog.refreshingButton', 'Refreshing...')\n              : t('bigconsole.dataSinks.refreshDialog.refreshButton', 'Refresh')}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport default DataSinkRefreshDialog;\n"],"mappings":";;;;;;;AAYA,IAAM,IACJ,mKAAmK,KAuBxJ,IAAwB,EAAK,SAA+B,EACvE,aACA,WACA,YACA,cACA,kBAAe,MACc;CAC7B,IAAM,EAAE,SAAM,GAAS,EACjB,CAAC,GAAc,KAAmB,EAAS,GAAM,EAGjD,IAAsB,GACzB,MAAwB;AACvB,EAAI,EAAE,WAAW,EAAE,iBAAiB,CAAC,KACnC,GAAS;IAGb,CAAC,GAAc,EAAQ,CACxB,EAGK,KAAc,MACX,IAAI,KAAK,EAAW,CAAC,gBAAgB,EAIxC,IAAgB,QAAkB;AACtC,IAAU,EAAa;IACtB,CAAC,GAAW,EAAa,CAAC;AAM7B,QAJK,IAKH,kBAAC,OAAD;EACE,WAAU;EACV,SAAS;EACT,MAAK;EACL,cAAW;EACX,mBAAgB;YAEhB,kBAAC,OAAD;GAAK,WAAU;aAAf;IAEE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,MAAD;MAAI,IAAG;MAAuB,WAAU;gBACrC,EAAE,4CAA4C,mBAAmB;MAC/D,CAAA;KACD,CAAA;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,GAAD;MACE,UAAS;MACT,SAAQ;MACR,cAAc;MACd,OAAM;MACN,iBAAgB;gBALlB;OAOE,kBAAC,KAAD;QAAG,WAAU;kBACV,EAAS,QAAQ,EAAE,mDAAmD,oBAAoB;QACzF,CAAA;OACJ,kBAAC,KAAD;QAAG,WAAU;kBAAwD,EAAS;QAAQ,CAAA;OACrF,EAAS,mBACR,kBAAC,KAAD;QAAG,WAAU;kBACV,EAAE,oDAAoD,4BAA4B,EACjF,MAAM,EAAW,EAAS,gBAAgB,EAC3C,CAAC;QACA,CAAA;OAEE;SAEV,kBAAC,GAAD;MAAS,UAAS;MAAO,SAAQ;MAAO,cAAc;MAAG,OAAM;MAAU,iBAAgB;gBAAzF,CACE,kBAAC,SAAD;OAAO,WAAU;iBAAjB,CACE,kBAAC,SAAD;QACE,MAAK;QACL,SAAS;QACT,WAAW,MAAM,EAAgB,EAAE,OAAO,QAAQ;QAClD,WAAW,mBAAmB;QAC9B,CAAA,EACF,kBAAC,QAAD;QAAM,WAAU;kBACb,EAAE,wDAAwD,+BAA+B;QACrF,CAAA,CACD;UACR,kBAAC,KAAD;OAAG,WAAU;iBACV,EACC,8DACA,oFACD;OACC,CAAA,CACI;QACN;;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,UAAU;MACV,WAAW,GAAG,EAAc;gBAE3B,EAAE,mDAAmD,SAAS;MACxD,CAAA,EACT,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,UAAU;MACV,WAAW,GAAG,EAAc;gBAE3B,IACG,EAAE,uDAAuD,gBAAgB,GACzE,EAAE,oDAAoD,UAAU;MAC7D,CAAA,CACL;;IACF;;EACF,CAAA,GApFC;EAsFT"}

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

@@ -47,7 +47,7 @@ var r = e(function({ status: e, size: r = "md", showIcon: i = !0 }) {
 		},
 		stale: {
 			bg: "bg-status-warning-bg/10",
-			text: "text-status-warning-text",
+			text: "text-[var(--color-status-warning-text)]",
 			icon: /* @__PURE__ */ t("svg", {
 				className: o[r],
 				fill: "none",