@burdenoff/microfe-bigconsole 2026.805.2 → 2026.812.1

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

@@ -1,80 +1,98 @@
-import { memo as e, useCallback as t } from "react";
-import { jsx as n, jsxs as r } 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 i = e(function({ dataSink: e, isOpen: i, onClose: a, onConfirm: o, isDeleting: s = !1 }) {
-	let c = t((e) => {
-		e.target === e.currentTarget && !s && a();
-	}, [s, a]), l = t((e) => {
-		e.key === "Escape" && !s && a();
-	}, [s, a]);
-	return i ? /* @__PURE__ */ n("div", {
-		className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50",
-		onClick: c,
-		onKeyDown: l,
-		role: "dialog",
-		"aria-modal": "true",
-		"aria-labelledby": "delete-dialog-title",
-		children: /* @__PURE__ */ r("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__ */ n("div", {
-					className: "p-6 border-b border-border-default",
-					children: /* @__PURE__ */ n("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: "Delete DataSink"
+						children: m("bigconsole.dataSinks.deleteDialog.title", "Delete DataSink")
 					})
 				}),
-				/* @__PURE__ */ r("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__ */ n("p", {
-							className: "text-sm text-text-primary mb-4",
-							children: "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__ */ r("div", {
-							className: "bg-bg-sunken p-3 rounded-md",
-							children: [/* @__PURE__ */ n("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 || "Untitled DataSink"
-							}), /* @__PURE__ */ n("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__ */ n("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: [
-									"This DataSink is linked to ",
-									e.linkedWorkflowCount,
-									" workflow",
-									e.linkedWorkflowCount === 1 ? "" : "s",
-									". Deleting it will remove these links."
-								]
+						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__ */ n("p", {
-							className: "text-sm text-status-error-text mt-4",
-							children: "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__ */ r("div", {
-					className: "p-6 border-t border-border-default flex items-center justify-end gap-3",
-					children: [/* @__PURE__ */ n("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: a,
-						disabled: s,
-						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: "Cancel"
-					}), /* @__PURE__ */ n("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: o,
-						disabled: s,
-						className: "\n              px-4 py-2\n              text-sm font-medium\n              text-white\n              bg-status-error-bg\n              hover:bg-status-error-bg/90\n              disabled:opacity-50 disabled:cursor-not-allowed\n              rounded-md\n              transition-colors\n            ",
-						children: s ? "Deleting..." : "Delete"
+						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")
 					})]
 				})
 			]
@@ -82,6 +100,6 @@ var i = e(function({ dataSink: e, isOpen: i, onClose: a, onConfirm: o, isDeletin
 	}) : null;
 });
 //#endregion
-export { i 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 type { DataSink } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface DataSinkDeleteDialogProps {\n  /** DataSink to delete */\n  dataSink: DataSink;\n  /** Whether dialog is open */\n  isOpen: boolean;\n  /** Callback when dialog is closed */\n  onClose: () => void;\n  /** Callback when delete is confirmed */\n  onConfirm: () => void;\n  /** Whether delete is in progress */\n  isDeleting?: boolean;\n}\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const DataSinkDeleteDialog = memo(function DataSinkDeleteDialog({\n  dataSink,\n  isOpen,\n  onClose,\n  onConfirm,\n  isDeleting = false,\n}: DataSinkDeleteDialogProps) {\n  // Handle backdrop click\n  const handleBackdropClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (e.target === e.currentTarget && !isDeleting) {\n        onClose();\n      }\n    },\n    [isDeleting, onClose]\n  );\n\n  // Handle escape key\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Escape' && !isDeleting) {\n        onClose();\n      }\n    },\n    [isDeleting, onClose]\n  );\n\n  if (!isOpen) {\n    return null;\n  }\n\n  return (\n    <div\n      className=\"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50\"\n      onClick={handleBackdropClick}\n      onKeyDown={handleKeyDown}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"delete-dialog-title\"\n    >\n      <div className=\"bg-bg-surface border border-border-default rounded-lg shadow-xl max-w-md w-full\">\n        {/* Header */}\n        <div className=\"p-6 border-b border-border-default\">\n          <h2 id=\"delete-dialog-title\" className=\"text-lg font-semibold text-text-primary\">\n            Delete DataSink\n          </h2>\n        </div>\n\n        {/* Content */}\n        <div className=\"p-6\">\n          <p className=\"text-sm text-text-primary mb-4\">Are you sure you want to delete this DataSink?</p>\n\n          <div className=\"bg-bg-sunken p-3 rounded-md\">\n            <p className=\"text-sm font-medium text-text-primary\">{dataSink.name || 'Untitled DataSink'}</p>\n            <p className=\"text-xs text-text-secondary mt-1 font-mono\">{dataSink.key}</p>\n          </div>\n\n          {dataSink.linkedWorkflowCount && dataSink.linkedWorkflowCount > 0 && (\n            <div className=\"mt-4 p-3 bg-status-warning-bg/10 border border-status-warning-border/20 rounded-md\">\n              <p className=\"text-sm text-status-warning-text\">\n                This DataSink is linked to {dataSink.linkedWorkflowCount} workflow\n                {dataSink.linkedWorkflowCount !== 1 ? 's' : ''}. Deleting it will remove these links.\n              </p>\n            </div>\n          )}\n\n          <p className=\"text-sm text-status-error-text mt-4\">This action cannot be undone.</p>\n        </div>\n\n        {/* Footer */}\n        <div className=\"p-6 border-t border-border-default flex items-center justify-end gap-3\">\n          <button\n            type=\"button\"\n            onClick={onClose}\n            disabled={isDeleting}\n            className={`\n              px-4 py-2\n              text-sm font-medium\n              text-text-primary\n              bg-bg-sunken\n              hover:bg-border-default\n              disabled:opacity-50 disabled:cursor-not-allowed\n              rounded-md\n              transition-colors\n            `}\n          >\n            Cancel\n          </button>\n          <button\n            type=\"button\"\n            onClick={onConfirm}\n            disabled={isDeleting}\n            className={`\n              px-4 py-2\n              text-sm font-medium\n              text-white\n              bg-status-error-bg\n              hover:bg-status-error-bg/90\n              disabled:opacity-50 disabled:cursor-not-allowed\n              rounded-md\n              transition-colors\n            `}\n          >\n            {isDeleting ? 'Deleting...' : 'Delete'}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport default DataSinkDeleteDialog;\n"],"mappings":";;;AA8BA,IAAa,IAAuB,EAAK,SAA8B,EACrE,aACA,WACA,YACA,cACA,gBAAa,MACe;CAE5B,IAAM,IAAsB,GACzB,MAAwB;AACvB,EAAI,EAAE,WAAW,EAAE,iBAAiB,CAAC,KACnC,GAAS;IAGb,CAAC,GAAY,EAAQ,CACtB,EAGK,IAAgB,GACnB,MAA2B;AAC1B,EAAI,EAAE,QAAQ,YAAY,CAAC,KACzB,GAAS;IAGb,CAAC,GAAY,EAAQ,CACtB;AAMD,QAJK,IAKH,kBAAC,OAAD;EACE,WAAU;EACV,SAAS;EACT,WAAW;EACX,MAAK;EACL,cAAW;EACX,mBAAgB;YAEhB,kBAAC,OAAD;GAAK,WAAU;aAAf;IAEE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,MAAD;MAAI,IAAG;MAAsB,WAAU;gBAA0C;MAE5E,CAAA;KACD,CAAA;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,KAAD;OAAG,WAAU;iBAAiC;OAAkD,CAAA;MAEhG,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,KAAD;QAAG,WAAU;kBAAyC,EAAS,QAAQ;QAAwB,CAAA,EAC/F,kBAAC,KAAD;QAAG,WAAU;kBAA8C,EAAS;QAAQ,CAAA,CACxE;;MAEL,EAAS,uBAAuB,EAAS,sBAAsB,KAC9D,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,KAAD;QAAG,WAAU;kBAAb;SAAgD;SAClB,EAAS;SAAoB;SACxD,EAAS,wBAAwB,IAAU,KAAN;SAAS;SAC7C;;OACA,CAAA;MAGR,kBAAC,KAAD;OAAG,WAAU;iBAAsC;OAAiC,CAAA;MAChF;;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,UAAU;MACV,WAAW;gBAUZ;MAEQ,CAAA,EACT,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,UAAU;MACV,WAAW;gBAWV,IAAa,gBAAgB;MACvB,CAAA,CACL;;IACF;;EACF,CAAA,GA/EC;EAiFT"}
+{"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,81 +1,92 @@
-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 { 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 a = e(function({ dataSink: e, isOpen: a, onClose: o, onConfirm: s, isRefreshing: c = !1 }) {
-	let [l, u] = n(!1), d = t((e) => {
-		e.target === e.currentTarget && !c && o();
-	}, [c, o]), f = (e) => new Date(e).toLocaleString(), p = t(() => {
-		s(l);
-	}, [s, l]);
-	return a ? /* @__PURE__ */ r("div", {
-		className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50",
-		onClick: d,
+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__ */ i("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__ */ r("div", {
-					className: "p-6 border-b border-border-default",
-					children: /* @__PURE__ */ r("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: "Refresh DataSink"
+						children: p("bigconsole.dataSinks.refreshDialog.title", "Refresh DataSink")
 					})
 				}),
-				/* @__PURE__ */ i("div", {
-					className: "p-6",
-					children: [
-						/* @__PURE__ */ i("div", {
-							className: "bg-bg-sunken p-3 rounded-md mb-4",
-							children: [
-								/* @__PURE__ */ r("p", {
-									className: "text-sm font-medium text-text-primary",
-									children: e.name || "Untitled DataSink"
-								}),
-								/* @__PURE__ */ r("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: ["Last refreshed: ", f(e.lastRefreshedAt)]
-								})
-							]
-						}),
-						/* @__PURE__ */ i("label", {
-							className: "flex items-center gap-2 cursor-pointer",
-							children: [/* @__PURE__ */ r("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: l,
-								onChange: (e) => u(e.target.checked),
-								className: "w-4 h-4 text-action-primary-bg focus:ring-action-primary-bg rounded"
-							}), /* @__PURE__ */ r("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: "Force refresh (bypass cache)"
+								children: p("bigconsole.dataSinks.refreshDialog.forceRefreshLabel", "Force refresh (bypass cache)")
 							})]
-						}),
-						/* @__PURE__ */ r("p", {
-							className: "mt-2 text-xs text-text-secondary",
-							children: "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__ */ i("div", {
-					className: "p-6 border-t border-border-default flex items-center justify-end gap-3",
-					children: [/* @__PURE__ */ r("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: 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: "Cancel"
-					}), /* @__PURE__ */ r("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: p,
-						disabled: c,
-						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: c ? "Refreshing..." : "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")
 					})]
 				})
 			]
@@ -83,6 +94,6 @@ var a = e(function({ dataSink: e, isOpen: a, onClose: o, onConfirm: s, isRefresh
 	}) : null;
 });
 //#endregion
-export { a 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 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 [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            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\">{dataSink.name || 'Untitled DataSink'}</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\">Last refreshed: {formatDate(dataSink.lastRefreshedAt)}</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\">Force refresh (bypass cache)</span>\n          </label>\n          <p className=\"mt-2 text-xs text-text-secondary\">\n            Force refresh will re-fetch all data from the source, ignoring any cached values.\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            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 ? 'Refreshing...' : 'Refresh'}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport default DataSinkRefreshDialog;\n"],"mappings":";;;AA8BA,IAAa,IAAwB,EAAK,SAA+B,EACvE,aACA,WACA,YACA,cACA,kBAAe,MACc;CAC7B,IAAM,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;gBAA0C;MAE7E,CAAA;KACD,CAAA;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf;MAEE,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACE,kBAAC,KAAD;SAAG,WAAU;mBAAyC,EAAS,QAAQ;SAAwB,CAAA;QAC/F,kBAAC,KAAD;SAAG,WAAU;mBAA8C,EAAS;SAAQ,CAAA;QAC3E,EAAS,mBACR,kBAAC,KAAD;SAAG,WAAU;mBAAb,CAAgD,oBAAiB,EAAW,EAAS,gBAAgB,CAAK;;QAExG;;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;kBAA4B;QAAmC,CAAA,CACzE;;MACR,kBAAC,KAAD;OAAG,WAAU;iBAAmC;OAE5C,CAAA;MACA;;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,UAAU;MACV,WAAW;gBAUZ;MAEQ,CAAA,EACT,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,UAAU;MACV,WAAW;gBAWV,IAAe,kBAAkB;MAC3B,CAAA,CACL;;IACF;;EACF,CAAA,GAnFC;EAqFT"}
+{"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",

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

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

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

@@ -1,3 +1,5 @@
+import "../common/sectionStyles.js";
+import "../common/index.js";
 import { memo as e, useCallback as t, useMemo as n, useState as r } from "react";
 import { ChevronLeft as i, ChevronRight as a, ChevronsLeft as o, ChevronsRight as s, Settings2 as c, X as l } from "lucide-react";
 import { Button as u } from "@burdenoff/fe-libs/ui";
@@ -58,13 +60,13 @@ var w = e(function({ data: e, maxHeight: w = "400px" }) {
 		O(null), A(!1);
 	}, []);
 	return j.length === 0 ? /* @__PURE__ */ d("div", {
-		className: "flex items-center justify-center p-8 text-text-secondary text-body-sm",
+		className: "flex items-center justify-center p-8 text-center text-sm text-text-secondary",
 		children: "No tabular data available. Data must be an array of objects for table view."
 	}) : /* @__PURE__ */ f("div", {
-		className: "relative",
+		className: "relative min-w-0",
 		children: [
 			/* @__PURE__ */ f("div", {
-				className: "flex items-center justify-between p-3 bg-bg-sunken border-b border-border-default",
+				className: "mb-control-gap flex flex-wrap items-center justify-between gap-control-gap",
 				children: [/* @__PURE__ */ f("span", {
 					className: "text-xs text-text-secondary",
 					children: [
@@ -73,38 +75,37 @@ var w = e(function({ data: e, maxHeight: w = "400px" }) {
 						N.length,
 						" columns"
 					]
-				}), /* @__PURE__ */ d("div", {
-					className: "flex items-center gap-2",
-					children: /* @__PURE__ */ d(u, {
-						variant: "ghost",
-						size: "sm",
-						onClick: () => A((e) => !e),
-						children: /* @__PURE__ */ d(c, { className: "w-4 h-4" })
-					})
+				}), /* @__PURE__ */ d(u, {
+					variant: "ghost",
+					size: "sm",
+					onClick: () => A((e) => !e),
+					"aria-label": "Select columns",
+					children: /* @__PURE__ */ d(c, { className: "w-4 h-4" })
 				})]
 			}),
 			k && /* @__PURE__ */ f("div", {
-				className: "absolute right-0 top-10 z-10 bg-bg-surface border border-border-default rounded-md shadow-lg p-3 min-w-[200px] max-h-[300px] overflow-auto",
+				className: "absolute right-0 top-10 z-10 max-h-[300px] w-56 max-w-[calc(100vw-2rem)] overflow-auto rounded-card border border-[var(--color-border-subtle)] bg-bg-surface p-3 shadow-[var(--shadow-elevation-2)]",
 				children: [/* @__PURE__ */ f("div", {
-					className: "flex items-center justify-between mb-2",
+					className: "mb-2 flex items-center justify-between gap-control-gap",
 					children: [/* @__PURE__ */ d("span", {
 						className: "text-xs font-medium text-text-primary",
-						children: "Select Columns"
+						children: "Select columns"
 					}), /* @__PURE__ */ d(u, {
 						variant: "ghost",
 						size: "sm",
 						onClick: L,
+						"aria-label": "Reset columns",
 						children: /* @__PURE__ */ d(l, { className: "w-3 h-3" })
 					})]
 				}), /* @__PURE__ */ d("div", {
 					className: "space-y-1",
 					children: M.map((e) => /* @__PURE__ */ f("label", {
-						className: "flex items-center gap-2 text-xs text-text-secondary hover:text-text-primary cursor-pointer",
+						className: "flex min-h-[var(--size-controlHeight-md)] cursor-pointer items-center gap-2 text-xs text-text-secondary hover:text-text-primary",
 						children: [/* @__PURE__ */ d("input", {
 							type: "checkbox",
 							checked: !D || D.includes(e.key),
 							onChange: () => I(e.key),
-							className: "rounded border-border-default"
+							className: "rounded border-[var(--color-border-default)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface"
 						}), /* @__PURE__ */ d("span", {
 							className: "truncate",
 							title: e.key,
@@ -114,7 +115,7 @@ var w = e(function({ data: e, maxHeight: w = "400px" }) {
 				})]
 			}),
 			/* @__PURE__ */ d("div", {
-				className: "overflow-auto",
+				className: "min-w-0 overflow-auto rounded-input border border-[var(--color-border-subtle)]",
 				style: { maxHeight: w },
 				children: /* @__PURE__ */ f(p, { children: [/* @__PURE__ */ d(_, { children: /* @__PURE__ */ d(v, { children: N.map((e) => /* @__PURE__ */ d(g, {
 					title: e.path,
@@ -122,7 +123,7 @@ var w = e(function({ data: e, maxHeight: w = "400px" }) {
 				}, e.key)) }) }), /* @__PURE__ */ d(m, { children: P.map((e, t) => /* @__PURE__ */ d(v, { children: N.map((t) => /* @__PURE__ */ d(h, { children: C(S(e, t.path)) }, t.key)) }, t)) })] })
 			}),
 			F > 1 && /* @__PURE__ */ f("div", {
-				className: "flex items-center justify-between p-3 bg-bg-sunken border-t border-border-default",
+				className: "mt-control-gap flex flex-wrap items-center justify-between gap-control-gap",
 				children: [/* @__PURE__ */ f("span", {
 					className: "text-xs text-text-secondary",
 					children: [
@@ -132,7 +133,7 @@ var w = e(function({ data: e, maxHeight: w = "400px" }) {
 						F
 					]
 				}), /* @__PURE__ */ f("div", {
-					className: "flex items-center gap-1",
+					className: "flex flex-wrap items-center gap-1",
 					children: [
 						/* @__PURE__ */ d(u, {
 							variant: "ghost",