npm - @burdenoff/microfe-bigconsole - Versions diffs - 2026.622.1 → 2026.624.2 - Mend

@burdenoff/microfe-bigconsole 2026.622.1 → 2026.624.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (153) hide show

package/dist/bigconsole/components/pipeline/PipelineDeleteDialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PipelineDeleteDialog.js","names":[],"sources":["../../../../src/bigconsole/components/pipeline/PipelineDeleteDialog.tsx"],"sourcesContent":["/*\n PipelineDeleteDialog Component\n \n Confirmation dialog for deleting a Pipeline.\n * Shows warning about stages before deletion.\n /\n\nimport { memo, useCallback } from 'react';\nimport type { Pipeline } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface PipelineDeleteDialogProps {\n pipeline: Pipeline;\n isOpen: boolean;\n onClose: () => void;\n onConfirm: () => void \| Promise<void>;\n}\n\n// ============================================================================\n// ICONS\n// ============================================================================\n\nconst WarningIcon = ({ className }: { className?: string }) => (\n <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n />\n </svg>\n);\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const PipelineDeleteDialog = memo(function PipelineDeleteDialog({\n pipeline,\n isOpen,\n onClose,\n onConfirm,\n}: PipelineDeleteDialogProps) {\n // Calculate stage count\n const stageCount = pipeline.stages?.length ?? 0;\n\n // Event handlers\n const handleBackdropClick = useCallback(() => {\n onClose();\n }, [onClose]);\n\n const handleConfirmClick = useCallback(() => {\n onConfirm();\n }, [onConfirm]);\n\n // Don't render if not open\n if (!isOpen) {\n return null;\n }\n\n return (\n <div className=\"fixed inset-0 z-50 flex items-center justify-center\">\n {/ Backdrop /}\n <div className=\"absolute inset-0 bg-black/50\" onClick={handleBackdropClick} />\n\n {/ Dialog /}\n <div className=\"relative bg-bg-surface rounded-lg shadow-xl max-w-md w-full mx-4 p-6\">\n {/ Header /}\n <div className=\"flex items-center gap-3 mb-4\">\n <div className=\"p-2 rounded-full bg-state-error/10\">\n <WarningIcon className=\"w-6 h-6 text-state-error\" />\n </div>\n <h2 className=\"text-lg font-semibold text-text-primary\">Delete Pipeline</h2>\n </div>\n\n {/ Content /}\n <div className=\"mb-6\">\n <p className=\"text-sm text-text-secondary mb-3\">\n Are you sure you want to delete the pipeline{' '}\n <span className=\"font-medium text-text-primary\">{pipeline.name}</span>?\n </p>\n\n {/ Warning about stages /}\n {stageCount > 0 && (\n <div className=\"p-3 bg-state-warning/10 rounded-md\">\n <p className=\"text-sm text-state-warning\">\n This pipeline has {stageCount} stage{stageCount !== 1 ? 's' : ''}. All stages will be permanently\n deleted.\n </p>\n </div>\n )}\n\n <p className=\"text-sm text-text-secondary mt-3\">This action cannot be undone.</p>\n </div>\n\n {/ Actions */}\n <div className=\"flex justify-end gap-3\">\n <button\n type=\"button\"\n onClick={onClose}\n className=\"\n px-4 py-2\n text-sm font-medium\n text-text-primary\n bg-bg-~~muted~~\n hover:bg-border-default\n rounded-md\n transition-colors\n \"\n >\n Cancel\n </button>\n <button\n type=\"button\"\n onClick={handleConfirmClick}\n className=\"\n px-4 py-2\n text-sm font-medium\n text-white\n bg-state-error\n hover:bg-state-error/90\n rounded-md\n transition-colors\n \"\n >\n Delete Pipeline\n </button>\n </div>\n </div>\n </div>\n );\n});\n\nexport default PipelineDeleteDialog;\n"],"mappings":";;;AAyBA,IAAM,KAAe,EAAE,mBACrB,kBAAC,OAAD;CAAgB;CAAW,MAAK;CAAO,QAAO;CAAe,SAAQ;WACnE,kBAAC,QAAD;EACE,eAAc;EACd,gBAAe;EACf,aAAa;EACb,GAAE;EACF,CAAA;CACE,CAAA,EAOK,IAAuB,EAAK,SAA8B,EACrE,aACA,WACA,YACA,gBAC4B;CAE5B,IAAM,IAAa,EAAS,QAAQ,UAAU,GAGxC,IAAsB,QAAkB;AAC5C,KAAS;IACR,CAAC,EAAQ,CAAC,EAEP,IAAqB,QAAkB;AAC3C,KAAW;IACV,CAAC,EAAU,CAAC;AAOf,QAJK,IAKH,kBAAC,OAAD;EAAK,WAAU;YAAf,CAEE,kBAAC,OAAD;GAAK,WAAU;GAA+B,SAAS;GAAuB,CAAA,EAG9E,kBAAC,OAAD;GAAK,WAAU;aAAf;IAEE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,GAAD,EAAa,WAAU,4BAA6B,CAAA;MAChD,CAAA,EACN,kBAAC,MAAD;MAAI,WAAU;gBAA0C;MAAoB,CAAA,CACxE;;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,KAAD;OAAG,WAAU;iBAAb;QAAgD;QACD;QAC7C,kBAAC,QAAD;SAAM,WAAU;mBAAiC,EAAS;SAAY,CAAA;;QACpE;;MAGH,IAAa,KACZ,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,KAAD;QAAG,WAAU;kBAAb;SAA0C;SACrB;SAAW;SAAO,MAAe,IAAU,KAAN;SAAS;SAE/D;;OACA,CAAA;MAGR,kBAAC,KAAD;OAAG,WAAU;iBAAmC;OAAiC,CAAA;MAC7E;;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;gBASX;MAEQ,CAAA,EACT,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;gBASX;MAEQ,CAAA,CACL;;IACF;KACF;MAxEC;EA0ET"}
1	+ {"version":3,"file":"PipelineDeleteDialog.js","names":[],"sources":["../../../../src/bigconsole/components/pipeline/PipelineDeleteDialog.tsx"],"sourcesContent":["/*\n PipelineDeleteDialog Component\n \n Confirmation dialog for deleting a Pipeline.\n * Shows warning about stages before deletion.\n /\n\nimport { memo, useCallback } from 'react';\nimport type { Pipeline } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface PipelineDeleteDialogProps {\n pipeline: Pipeline;\n isOpen: boolean;\n onClose: () => void;\n onConfirm: () => void \| Promise<void>;\n}\n\n// ============================================================================\n// ICONS\n// ============================================================================\n\nconst WarningIcon = ({ className }: { className?: string }) => (\n <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n />\n </svg>\n);\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const PipelineDeleteDialog = memo(function PipelineDeleteDialog({\n pipeline,\n isOpen,\n onClose,\n onConfirm,\n}: PipelineDeleteDialogProps) {\n // Calculate stage count\n const stageCount = pipeline.stages?.length ?? 0;\n\n // Event handlers\n const handleBackdropClick = useCallback(() => {\n onClose();\n }, [onClose]);\n\n const handleConfirmClick = useCallback(() => {\n onConfirm();\n }, [onConfirm]);\n\n // Don't render if not open\n if (!isOpen) {\n return null;\n }\n\n return (\n <div className=\"fixed inset-0 z-50 flex items-center justify-center\">\n {/ Backdrop /}\n <div className=\"absolute inset-0 bg-black/50\" onClick={handleBackdropClick} />\n\n {/ Dialog /}\n <div className=\"relative bg-bg-surface rounded-lg shadow-xl max-w-md w-full mx-4 p-6\">\n {/ Header /}\n <div className=\"flex items-center gap-3 mb-4\">\n <div className=\"p-2 rounded-full bg-state-error/10\">\n <WarningIcon className=\"w-6 h-6 text-state-error\" />\n </div>\n <h2 className=\"text-lg font-semibold text-text-primary\">Delete Pipeline</h2>\n </div>\n\n {/ Content /}\n <div className=\"mb-6\">\n <p className=\"text-sm text-text-secondary mb-3\">\n Are you sure you want to delete the pipeline{' '}\n <span className=\"font-medium text-text-primary\">{pipeline.name}</span>?\n </p>\n\n {/ Warning about stages /}\n {stageCount > 0 && (\n <div className=\"p-3 bg-state-warning/10 rounded-md\">\n <p className=\"text-sm text-state-warning\">\n This pipeline has {stageCount} stage{stageCount !== 1 ? 's' : ''}. All stages will be permanently\n deleted.\n </p>\n </div>\n )}\n\n <p className=\"text-sm text-text-secondary mt-3\">This action cannot be undone.</p>\n </div>\n\n {/ Actions */}\n <div className=\"flex justify-end gap-3\">\n <button\n type=\"button\"\n onClick={onClose}\n className=\"\n px-4 py-2\n text-sm font-medium\n text-text-primary\n bg-bg-sunken\n hover:bg-border-default\n rounded-md\n transition-colors\n \"\n >\n Cancel\n </button>\n <button\n type=\"button\"\n onClick={handleConfirmClick}\n className=\"\n px-4 py-2\n text-sm font-medium\n text-white\n bg-state-error\n hover:bg-state-error/90\n rounded-md\n transition-colors\n \"\n >\n Delete Pipeline\n </button>\n </div>\n </div>\n </div>\n );\n});\n\nexport default PipelineDeleteDialog;\n"],"mappings":";;;AAyBA,IAAM,KAAe,EAAE,mBACrB,kBAAC,OAAD;CAAgB;CAAW,MAAK;CAAO,QAAO;CAAe,SAAQ;WACnE,kBAAC,QAAD;EACE,eAAc;EACd,gBAAe;EACf,aAAa;EACb,GAAE;EACF,CAAA;CACE,CAAA,EAOK,IAAuB,EAAK,SAA8B,EACrE,aACA,WACA,YACA,gBAC4B;CAE5B,IAAM,IAAa,EAAS,QAAQ,UAAU,GAGxC,IAAsB,QAAkB;AAC5C,KAAS;IACR,CAAC,EAAQ,CAAC,EAEP,IAAqB,QAAkB;AAC3C,KAAW;IACV,CAAC,EAAU,CAAC;AAOf,QAJK,IAKH,kBAAC,OAAD;EAAK,WAAU;YAAf,CAEE,kBAAC,OAAD;GAAK,WAAU;GAA+B,SAAS;GAAuB,CAAA,EAG9E,kBAAC,OAAD;GAAK,WAAU;aAAf;IAEE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,GAAD,EAAa,WAAU,4BAA6B,CAAA;MAChD,CAAA,EACN,kBAAC,MAAD;MAAI,WAAU;gBAA0C;MAAoB,CAAA,CACxE;;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,KAAD;OAAG,WAAU;iBAAb;QAAgD;QACD;QAC7C,kBAAC,QAAD;SAAM,WAAU;mBAAiC,EAAS;SAAY,CAAA;;QACpE;;MAGH,IAAa,KACZ,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,KAAD;QAAG,WAAU;kBAAb;SAA0C;SACrB;SAAW;SAAO,MAAe,IAAU,KAAN;SAAS;SAE/D;;OACA,CAAA;MAGR,kBAAC,KAAD;OAAG,WAAU;iBAAmC;OAAiC,CAAA;MAC7E;;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;gBASX;MAEQ,CAAA,EACT,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;gBASX;MAEQ,CAAA,CACL;;IACF;KACF;MAxEC;EA0ET"}

package/dist/bigconsole/components/pipeline/PipelineStatusBadge.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { jsx as t } from "react/jsx-runtime";
 var n = {
 	draft: {
 		label: "Draft",
-		className: "bg-bg-muted text-text-secondary"
+		className: "bg-bg-sunken text-text-secondary"
 	},
 	active: {
 		label: "Active",

package/dist/bigconsole/components/pipeline/PipelineStatusBadge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PipelineStatusBadge.js","names":[],"sources":["../../../../src/bigconsole/components/pipeline/PipelineStatusBadge.tsx"],"sourcesContent":["/*\n PipelineStatusBadge Component\n \n Displays the status of a Pipeline with appropriate styling.\n */\n\nimport { memo } from 'react';\nimport type { PipelineStatus } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface PipelineStatusBadgeProps {\n status: PipelineStatus;\n size?: 'sm' \| 'md';\n}\n\n// ============================================================================\n// STATUS CONFIG\n// ============================================================================\n\nconst STATUS_CONFIG: Record<PipelineStatus, { label: string; className: string }> = {\n draft: {\n label: 'Draft',\n className: 'bg-bg-~~muted~~ text-text-secondary',\n },\n active: {\n label: 'Active',\n className: 'bg-state-success/10 text-state-success',\n },\n inactive: {\n label: 'Inactive',\n className: 'bg-state-warning/10 text-state-warning',\n },\n error: {\n label: 'Error',\n className: 'bg-state-error/10 text-state-error',\n },\n};\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const PipelineStatusBadge = memo(function PipelineStatusBadge({\n status,\n size = 'md',\n}: PipelineStatusBadgeProps) {\n const config = STATUS_CONFIG[status] \|\| STATUS_CONFIG.draft;\n\n const sizeClasses = size === 'sm' ? 'px-1.5 py-0.5 text-xs' : 'px-2 py-1 text-xs';\n\n return (\n <span\n className={`\n inline-flex items-center\n font-medium rounded-md\n ${sizeClasses}\n ${config.className}\n `}\n >\n {config.label}\n </span>\n );\n});\n\nexport default PipelineStatusBadge;\n"],"mappings":";;;AAsBA,IAAM,IAA8E;CAClF,OAAO;EACL,OAAO;EACP,WAAW;EACZ;CACD,QAAQ;EACN,OAAO;EACP,WAAW;EACZ;CACD,UAAU;EACR,OAAO;EACP,WAAW;EACZ;CACD,OAAO;EACL,OAAO;EACP,WAAW;EACZ;CACF,EAMY,IAAsB,EAAK,SAA6B,EACnE,WACA,UAAO,QACoB;CAC3B,IAAM,IAAS,EAAc,MAAW,EAAc;AAItD,QACE,kBAAC,QAAD;EACE,WAAW;;;UAJK,MAAS,OAAO,0BAA0B,oBAO1C;UACZ,EAAO,UAAU;;YAGpB,EAAO;EACH,CAAA;EAET"}
1	+ {"version":3,"file":"PipelineStatusBadge.js","names":[],"sources":["../../../../src/bigconsole/components/pipeline/PipelineStatusBadge.tsx"],"sourcesContent":["/*\n PipelineStatusBadge Component\n \n Displays the status of a Pipeline with appropriate styling.\n */\n\nimport { memo } from 'react';\nimport type { PipelineStatus } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface PipelineStatusBadgeProps {\n status: PipelineStatus;\n size?: 'sm' \| 'md';\n}\n\n// ============================================================================\n// STATUS CONFIG\n// ============================================================================\n\nconst STATUS_CONFIG: Record<PipelineStatus, { label: string; className: string }> = {\n draft: {\n label: 'Draft',\n className: 'bg-bg-sunken text-text-secondary',\n },\n active: {\n label: 'Active',\n className: 'bg-state-success/10 text-state-success',\n },\n inactive: {\n label: 'Inactive',\n className: 'bg-state-warning/10 text-state-warning',\n },\n error: {\n label: 'Error',\n className: 'bg-state-error/10 text-state-error',\n },\n};\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const PipelineStatusBadge = memo(function PipelineStatusBadge({\n status,\n size = 'md',\n}: PipelineStatusBadgeProps) {\n const config = STATUS_CONFIG[status] \|\| STATUS_CONFIG.draft;\n\n const sizeClasses = size === 'sm' ? 'px-1.5 py-0.5 text-xs' : 'px-2 py-1 text-xs';\n\n return (\n <span\n className={`\n inline-flex items-center\n font-medium rounded-md\n ${sizeClasses}\n ${config.className}\n `}\n >\n {config.label}\n </span>\n );\n});\n\nexport default PipelineStatusBadge;\n"],"mappings":";;;AAsBA,IAAM,IAA8E;CAClF,OAAO;EACL,OAAO;EACP,WAAW;EACZ;CACD,QAAQ;EACN,OAAO;EACP,WAAW;EACZ;CACD,UAAU;EACR,OAAO;EACP,WAAW;EACZ;CACD,OAAO;EACL,OAAO;EACP,WAAW;EACZ;CACF,EAMY,IAAsB,EAAK,SAA6B,EACnE,WACA,UAAO,QACoB;CAC3B,IAAM,IAAS,EAAc,MAAW,EAAc;AAItD,QACE,kBAAC,QAAD;EACE,WAAW;;;UAJK,MAAS,OAAO,0BAA0B,oBAO1C;UACZ,EAAO,UAAU;;YAGpB,EAAO;EACH,CAAA;EAET"}

package/dist/bigconsole/components/widgets/DrilldownConfigPanel.js CHANGED Viewed

@@ -157,7 +157,7 @@ var d = t(function({ widget: t, onChange: d, widgetData: f }) {
 							onClick: () => y(e),
 							className: `
                       flex-1 px-3 py-2 rounded-md text-sm font-medium transition-colors
-                      ${v === e ? "bg-action-primary-bg text-white" : "bg-bg-muted text-text-secondary hover:bg-bg-muted/80"}
+                      ${v === e ? "bg-action-primary-bg text-white" : "bg-bg-sunken text-text-secondary hover:bg-bg-sunken/80"}
                     `,
 							children: [
 								e === "MODAL" && "Modal",
@@ -223,7 +223,7 @@ var d = t(function({ widget: t, onChange: d, widgetData: f }) {
 												onClick: () => {
 													R(t, "value", e), N(null);
 												},
-												className: "w-full px-3 py-1.5 text-left text-xs text-text-primary hover:bg-bg-muted font-mono",
+												className: "w-full px-3 py-1.5 text-left text-xs text-text-primary hover:bg-bg-sunken font-mono",
 												children: e
 											}, e))
 										})]
@@ -254,26 +254,26 @@ var d = t(function({ widget: t, onChange: d, widgetData: f }) {
 						children: [
 							"Use ",
 							/* @__PURE__ */ c("code", {
-								className: "px-1 bg-bg-muted rounded",
+								className: "px-1 bg-bg-sunken rounded",
 								children: "{{row.field}}"
 							}),
 							" for dynamic values or enter static text.",
 							/* @__PURE__ */ c("br", {}),
 							"Examples: ",
 							/* @__PURE__ */ c("code", {
-								className: "px-1 bg-bg-muted rounded",
+								className: "px-1 bg-bg-sunken rounded",
 								children: "{{row.category}}"
 							}),
 							",",
 							" ",
 							/* @__PURE__ */ c("code", {
-								className: "px-1 bg-bg-muted rounded",
+								className: "px-1 bg-bg-sunken rounded",
 								children: "{{item.id}}"
 							}),
 							",",
 							" ",
 							/* @__PURE__ */ c("code", {
-								className: "px-1 bg-bg-muted rounded",
+								className: "px-1 bg-bg-sunken rounded",
 								children: "{{globals.vars.dateFrom}}"
 							})
 						]
@@ -287,7 +287,7 @@ var d = t(function({ widget: t, onChange: d, widgetData: f }) {
 							children: "Advanced Options"
 						}),
 						/* @__PURE__ */ l("div", {
-							className: "flex items-center justify-between p-2 rounded bg-bg-muted mb-3",
+							className: "flex items-center justify-between p-2 rounded bg-bg-sunken mb-3",
 							children: [/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
 								className: "text-sm text-text-primary",
 								children: "Pass Global Filters"
@@ -310,7 +310,7 @@ var d = t(function({ widget: t, onChange: d, widgetData: f }) {
 							})]
 						}),
 						/* @__PURE__ */ l("div", {
-							className: "flex items-center justify-between p-2 rounded bg-bg-muted mb-3",
+							className: "flex items-center justify-between p-2 rounded bg-bg-sunken mb-3",
 							children: [/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
 								className: "text-sm text-text-primary",
 								children: "Max Drilldown Depth"
@@ -334,7 +334,7 @@ var d = t(function({ widget: t, onChange: d, widgetData: f }) {
 							})]
 						}),
 						v === "SAME_WINDOW" && /* @__PURE__ */ l("div", {
-							className: "flex items-center justify-between p-2 rounded bg-bg-muted",
+							className: "flex items-center justify-between p-2 rounded bg-bg-sunken",
 							children: [/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
 								className: "text-sm text-text-primary",
 								children: "Open In"
@@ -348,7 +348,7 @@ var d = t(function({ widget: t, onChange: d, widgetData: f }) {
 									onClick: () => T("same"),
 									className: `
                         px-2 py-1 rounded text-xs font-medium transition-colors
-                        ${w === "same" ? "bg-action-primary-bg text-white" : "bg-bg-surface text-text-secondary hover:bg-bg-muted/80 border border-border-default"}
+                        ${w === "same" ? "bg-action-primary-bg text-white" : "bg-bg-surface text-text-secondary hover:bg-bg-sunken/80 border border-border-default"}
                       `,
 									children: "Same Tab"
 								}), /* @__PURE__ */ c("button", {
@@ -356,7 +356,7 @@ var d = t(function({ widget: t, onChange: d, widgetData: f }) {
 									onClick: () => T("new"),
 									className: `
                         px-2 py-1 rounded text-xs font-medium transition-colors
-                        ${w === "new" ? "bg-action-primary-bg text-white" : "bg-bg-surface text-text-secondary hover:bg-bg-muted/80 border border-border-default"}
+                        ${w === "new" ? "bg-action-primary-bg text-white" : "bg-bg-surface text-text-secondary hover:bg-bg-sunken/80 border border-border-default"}
                       `,
 									children: "New Tab"
 								})]

package/dist/bigconsole/components/widgets/DrilldownConfigPanel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DrilldownConfigPanel.js","names":[],"sources":["../../../../src/bigconsole/components/widgets/DrilldownConfigPanel.tsx"],"sourcesContent":["/*\n DrilldownConfigPanel Component\n \n UI for configuring widget drilldown settings.\n * Allows selecting target dashboard, navigation mode, and parameter mappings.\n \n v2.0 Features:\n * - passGlobalFilters: Pass current dashboard filters to target\n * - maxDepth: Limit drilldown depth (default: 3)\n * - openIn: Open in same tab or new tab\n * - Field suggestions based on widget data\n /\n\nimport { type FC, memo, useState, useEffect, useCallback, useMemo } from 'react';\nimport { useApolloClient } from '@apollo/client/react';\nimport type { Widget, NavigationMode } from '../../types';\nimport { ListDashboardsDocument } from '../../../generated/wspace-operations';\nimport { DEFAULT_MAX_DEPTH } from '../../hooks/useDrilldown';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface DrilldownConfigPanelProps {\n /* Widget to configure drilldown for /\n widget: Widget;\n /* Callback when drilldown settings change (for tracking unsaved changes) /\n onChange?: (config: DrilldownConfig) => void;\n /* Sample widget data for field suggestions /\n widgetData?: Record<string, unknown>;\n}\n\nexport interface DrilldownConfig {\n enabled: boolean;\n targetDashboardId: string;\n navigationMode: NavigationMode;\n parameterMapping: Record<string, string>;\n /* Whether to pass global filters to target dashboard /\n passGlobalFilters: boolean;\n /* Maximum drilldown depth (default: 3) /\n maxDepth: number;\n /* Open in same tab or new tab (for SAME_WINDOW mode) /\n openIn: 'same' \| 'new';\n}\n\ninterface DashboardOption {\n id: string;\n name: string;\n}\n\ninterface ParameterMapping {\n key: string;\n value: string;\n}\n\n// ============================================================================\n// Helper Functions\n// ============================================================================\n\n/\n Extract available fields from widget data for field suggestions\n /\nfunction extractFieldPaths(obj: unknown, prefix = ''): string[] {\n if (!obj \|\| typeof obj !== 'object') return [];\n\n const paths: string[] = [];\n\n // Handle arrays - use first element as template\n if (Array.isArray(obj)) {\n if (obj.length > 0 && typeof obj[0] === 'object') {\n return extractFieldPaths(obj[0], prefix);\n }\n return [];\n }\n\n // Handle objects\n for (const [key, value] of Object.entries(obj as Record<string, unknown>)) {\n const path = prefix ? `${prefix}.${key}` : key;\n paths.push(path);\n\n // Recurse into nested objects (but not too deep)\n if (value && typeof value === 'object' && !Array.isArray(value) && prefix.split('.').length < 2) {\n paths.push(...extractFieldPaths(value, path));\n }\n }\n\n return paths;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const DrilldownConfigPanel: FC<DrilldownConfigPanelProps> = memo(function DrilldownConfigPanel({\n widget,\n onChange,\n widgetData,\n}) {\n const apolloClient = useApolloClient();\n\n // State\n const [enabled, setEnabled] = useState(widget.drilldown?.enabled ?? false);\n const [targetDashboardId, setTargetDashboardId] = useState(widget.drilldown?.targetDashboardId ?? '');\n const [navigationMode, setNavigationMode] = useState<NavigationMode>(widget.drilldown?.navigationMode ?? 'MODAL');\n const [passGlobalFilters, setPassGlobalFilters] = useState(widget.drilldown?.passGlobalFilters ?? true);\n const [maxDepth, setMaxDepth] = useState(widget.drilldown?.maxDepth ?? DEFAULT_MAX_DEPTH);\n const [openIn, setOpenIn] = useState<'same' \| 'new'>(widget.drilldown?.openIn ?? 'same');\n const [parameterMappings, setParameterMappings] = useState<ParameterMapping[]>(() => {\n const mapping = widget.drilldown?.parameterMapping as Record<string, string> \| undefined;\n if (mapping) {\n return Object.entries(mapping).map(([key, value]) => ({ key, value }));\n }\n return [{ key: '', value: '' }];\n });\n\n const [dashboards, setDashboards] = useState<DashboardOption[]>([]);\n const [loading, setLoading] = useState(false);\n const [showFieldSuggestions, setShowFieldSuggestions] = useState<number \| null>(null);\n\n // Extract available field paths from widget data\n const availableFields = useMemo(() => {\n if (!widgetData) return [];\n\n // Common prefixes for different widget types\n const prefixes = ['row', 'item', 'point', 'selectedData'];\n const fields = extractFieldPaths(widgetData);\n\n // Generate mustache-style suggestions\n const suggestions: string[] = [];\n for (const field of fields) {\n for (const prefix of prefixes) {\n suggestions.push(`{{${prefix}.${field}}}`);\n }\n }\n\n // Add common widget data fields\n suggestions.push('{{widget.value}}', '{{widget.title}}', '{{widget.id}}');\n suggestions.push('{{globals.vars.dateFrom}}', '{{globals.vars.dateTo}}');\n\n return [...new Set(suggestions)];\n }, [widgetData]);\n\n // Notify parent of changes\n const notifyChange = useCallback(() => {\n const parameterMapping: Record<string, string> = {};\n for (const { key, value } of parameterMappings) {\n if (key.trim() && value.trim()) {\n parameterMapping[key.trim()] = value.trim();\n }\n }\n onChange?.({\n enabled,\n targetDashboardId,\n navigationMode,\n parameterMapping,\n passGlobalFilters,\n maxDepth,\n openIn,\n });\n }, [enabled, targetDashboardId, navigationMode, parameterMappings, passGlobalFilters, maxDepth, openIn, onChange]);\n\n // Call notifyChange when any value changes\n useEffect(() => {\n notifyChange();\n }, [\n enabled,\n targetDashboardId,\n navigationMode,\n parameterMappings,\n passGlobalFilters,\n maxDepth,\n openIn,\n notifyChange,\n ]);\n\n // Fetch available dashboards\n useEffect(() => {\n async function fetchDashboards() {\n setLoading(true);\n try {\n const result = await apolloClient.query<{ listDashboards: { edges: Record<string, unknown>[] } }>({\n query: ListDashboardsDocument,\n variables: { first: 100 },\n fetchPolicy: 'cache-first',\n });\n\n const edges = result.data?.listDashboards?.edges \|\| [];\n setDashboards(\n edges.map((edge: Record<string, unknown>) => {\n const node = edge.node as Record<string, unknown>;\n return {\n id: node.id as string,\n name: node.name as string,\n };\n })\n );\n } catch (err) {\n } finally {\n setLoading(false);\n }\n }\n\n fetchDashboards();\n }, [apolloClient]);\n\n // Add parameter mapping row\n const addParameterMapping = useCallback(() => {\n setParameterMappings((prev) => [...prev, { key: '', value: '' }]);\n }, []);\n\n // Remove parameter mapping row\n const removeParameterMapping = useCallback((index: number) => {\n setParameterMappings((prev) => prev.filter((_, i) => i !== index));\n }, []);\n\n // Update parameter mapping\n const updateParameterMapping = useCallback((index: number, field: 'key' \| 'value', newValue: string) => {\n setParameterMappings((prev) => prev.map((item, i) => (i === index ? { ...item, [field]: newValue } : item)));\n }, []);\n\n return (\n <div className=\"space-y-4 pb-8\">\n {/ Enable Toggle /}\n <div className=\"flex items-center justify-between p-3 rounded-lg border border-border-default bg-bg-surface\">\n <label className=\"text-sm font-medium text-text-primary\">Enable Drilldown</label>\n <button\n type=\"button\"\n role=\"switch\"\n aria-checked={enabled}\n onClick={() => setEnabled(!enabled)}\n className={`\n relative inline-flex h-6 w-11 items-center rounded-full transition-colors cursor-pointer border\n ${enabled ? 'bg-action-primary-bg border-action-primary-bg' : 'bg-gray-300 border-gray-400'}\n `}\n >\n <span\n className={`\n inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform\n ${enabled ? 'translate-x-6' : 'translate-x-1'}\n `}\n />\n </button>\n </div>\n\n {enabled && (\n <>\n {/ Target Dashboard /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">Target Dashboard</label>\n <select\n value={targetDashboardId}\n onChange={(e) => setTargetDashboardId(e.target.value)}\n disabled={loading}\n className=\"w-full px-3 py-2 rounded-md border border-border-default bg-bg-surface text-text-primary text-sm focus:outline-none focus:ring-2 focus:ring-action-primary-bg\"\n >\n <option value=\"\">Select a dashboard...</option>\n {dashboards\n .filter((d) => d.id !== widget.dashboardId) // Exclude current dashboard\n .map((dashboard) => (\n <option key={dashboard.id} value={dashboard.id}>\n {dashboard.name}\n </option>\n ))}\n </select>\n </div>\n\n {/ Navigation Mode /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">Navigation Mode</label>\n <div className=\"flex gap-2\">\n {(['MODAL', 'NEW_TAB', 'SAME_WINDOW'] as NavigationMode[]).map((mode) => (\n <button\n key={mode}\n type=\"button\"\n onClick={() => setNavigationMode(mode)}\n className={`\n flex-1 px-3 py-2 rounded-md text-sm font-medium transition-colors\n ${\n navigationMode === mode\n ? 'bg-action-primary-bg text-white'\n : 'bg-bg-muted text-text-secondary hover:bg-bg-muted/80'\n }\n `}\n >\n {mode === 'MODAL' && 'Modal'}\n {mode === 'NEW_TAB' && 'New Tab'}\n {mode === 'SAME_WINDOW' && 'Same Window'}\n </button>\n ))}\n </div>\n <p className=\"text-xs text-text-tertiary mt-1\">\n {navigationMode === 'MODAL' && 'Opens target dashboard in a modal overlay'}\n {navigationMode === 'NEW_TAB' && 'Opens target dashboard in a new browser tab'}\n {navigationMode === 'SAME_WINDOW' && 'Navigates to target dashboard in current window'}\n </p>\n </div>\n\n {/ Parameter Mappings /}\n <div>\n <div className=\"flex items-center justify-between mb-2\">\n <label className=\"text-sm font-medium text-text-primary\">Parameter Mappings</label>\n <button\n type=\"button\"\n onClick={addParameterMapping}\n className=\"text-xs text-action-primary-text hover:underline\"\n >\n + Add Parameter\n </button>\n </div>\n\n <div className=\"space-y-2\">\n {parameterMappings.map((mapping, index) => (\n <div key={index} className=\"relative\">\n <div className=\"flex gap-2 items-center\">\n <input\n type=\"text\"\n value={mapping.key}\n onChange={(e) => updateParameterMapping(index, 'key', e.target.value)}\n placeholder=\"Parameter name\"\n className=\"flex-1 px-2 py-1.5 rounded border border-border-default bg-bg-surface text-text-primary text-sm focus:outline-none focus:ring-1 focus:ring-action-primary-bg\"\n />\n <span className=\"text-text-tertiary\">=</span>\n <div className=\"flex-1 relative\">\n <input\n type=\"text\"\n value={mapping.value}\n onChange={(e) => updateParameterMapping(index, 'value', e.target.value)}\n onFocus={() => setShowFieldSuggestions(index)}\n onBlur={() => setTimeout(() => setShowFieldSuggestions(null), 200)}\n placeholder=\"{{row.field}} or static\"\n className=\"w-full px-2 py-1.5 rounded border border-border-default bg-bg-surface text-text-primary text-sm focus:outline-none focus:ring-1 focus:ring-action-primary-bg\"\n />\n {/ Field suggestions dropdown /}\n {showFieldSuggestions === index && availableFields.length > 0 && (\n <div className=\"absolute z-10 top-full left-0 right-0 mt-1 max-h-40 overflow-y-auto bg-bg-surface border border-border-default rounded-md shadow-lg\">\n {availableFields.slice(0, 10).map((field) => (\n <button\n key={field}\n type=\"button\"\n onClick={() => {\n updateParameterMapping(index, 'value', field);\n setShowFieldSuggestions(null);\n }}\n className=\"w-full px-3 py-1.5 text-left text-xs text-text-primary hover:bg-bg-muted font-mono\"\n >\n {field}\n </button>\n ))}\n </div>\n )}\n </div>\n {parameterMappings.length > 1 && (\n <button\n type=\"button\"\n onClick={() => removeParameterMapping(index)}\n className=\"p-1 text-text-tertiary hover:text-state-error\"\n >\n <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n )}\n </div>\n </div>\n ))}\n </div>\n\n <p className=\"text-xs text-text-tertiary mt-2\">\n Use <code className=\"px-1 bg-bg-muted rounded\">{'{{row.field}}'}</code> for dynamic values or enter static\n text.\n <br />\n Examples: <code className=\"px-1 bg-bg-muted rounded\">{'{{row.category}}'}</code>,{' '}\n <code className=\"px-1 bg-bg-muted rounded\">{'{{item.id}}'}</code>,{' '}\n <code className=\"px-1 bg-bg-muted rounded\">{'{{globals.vars.dateFrom}}'}</code>\n </p>\n </div>\n\n {/ Advanced Options /}\n <div className=\"border-t border-border-default pt-4 mt-4\">\n <h4 className=\"text-sm font-medium text-text-primary mb-3\">Advanced Options</h4>\n\n {/ Pass Global Filters /}\n <div className=\"flex items-center justify-between p-2 rounded bg-bg-muted mb-3\">\n <div>\n <label className=\"text-sm text-text-primary\">Pass Global Filters</label>\n <p className=\"text-xs text-text-tertiary\">Include current dashboard filters in drilldown</p>\n </div>\n <button\n type=\"button\"\n role=\"switch\"\n aria-checked={passGlobalFilters}\n onClick={() => setPassGlobalFilters(!passGlobalFilters)}\n className={`\n relative inline-flex h-5 w-9 items-center rounded-full transition-colors cursor-pointer border\n ${passGlobalFilters ? 'bg-action-primary-bg border-action-primary-bg' : 'bg-gray-300 border-gray-400'}\n `}\n >\n <span\n className={`\n inline-block h-3 w-3 transform rounded-full bg-white shadow transition-transform\n ${passGlobalFilters ? 'translate-x-5' : 'translate-x-1'}\n `}\n />\n </button>\n </div>\n\n {/ Max Depth /}\n <div className=\"flex items-center justify-between p-2 rounded bg-bg-muted mb-3\">\n <div>\n <label className=\"text-sm text-text-primary\">Max Drilldown Depth</label>\n <p className=\"text-xs text-text-tertiary\">Limit nested drilldown levels</p>\n </div>\n <select\n value={maxDepth}\n onChange={(e) => setMaxDepth(Number(e.target.value))}\n className=\"w-16 px-2 py-1 rounded border border-border-default bg-bg-surface text-text-primary text-sm\"\n >\n {[1, 2, 3, 4, 5].map((n) => (\n <option key={n} value={n}>\n {n}\n </option>\n ))}\n </select>\n </div>\n\n {/ Open In (only for SAME_WINDOW mode) /}\n {navigationMode === 'SAME_WINDOW' && (\n <div className=\"flex items-center justify-between p-2 rounded bg-bg-muted\">\n <div>\n <label className=\"text-sm text-text-primary\">Open In</label>\n <p className=\"text-xs text-text-tertiary\">Tab behavior for navigation</p>\n </div>\n <div className=\"flex gap-1\">\n <button\n type=\"button\"\n onClick={() => setOpenIn('same')}\n className={`\n px-2 py-1 rounded text-xs font-medium transition-colors\n ${\n openIn === 'same'\n ? 'bg-action-primary-bg text-white'\n : 'bg-bg-surface text-text-secondary hover:bg-bg-muted/80 border border-border-default'\n }\n `}\n >\n Same Tab\n </button>\n <button\n type=\"button\"\n onClick={() => setOpenIn('new')}\n className={`\n px-2 py-1 rounded text-xs font-medium transition-colors\n ${\n openIn === 'new'\n ? 'bg-action-primary-bg text-white'\n : 'bg-bg-surface text-text-secondary hover:bg-bg-muted/80 border border-border-default'\n }\n `}\n >\n New Tab\n </button>\n </div>\n </div>\n )}\n </div>\n </>\n )}\n\n {/ Info when drilldown will be removed */}\n {!enabled && widget.drilldown?.id && (\n <div className=\"p-2 rounded bg-amber-100 text-amber-800 text-sm\">\n Drilldown will be removed when you save changes.\n </div>\n )}\n </div>\n );\n});\n\nexport default DrilldownConfigPanel;\n"],"mappings":"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"}
1	+ {"version":3,"file":"DrilldownConfigPanel.js","names":[],"sources":["../../../../src/bigconsole/components/widgets/DrilldownConfigPanel.tsx"],"sourcesContent":["/*\n DrilldownConfigPanel Component\n \n UI for configuring widget drilldown settings.\n * Allows selecting target dashboard, navigation mode, and parameter mappings.\n \n v2.0 Features:\n * - passGlobalFilters: Pass current dashboard filters to target\n * - maxDepth: Limit drilldown depth (default: 3)\n * - openIn: Open in same tab or new tab\n * - Field suggestions based on widget data\n /\n\nimport { type FC, memo, useState, useEffect, useCallback, useMemo } from 'react';\nimport { useApolloClient } from '@apollo/client/react';\nimport type { Widget, NavigationMode } from '../../types';\nimport { ListDashboardsDocument } from '../../../generated/wspace-operations';\nimport { DEFAULT_MAX_DEPTH } from '../../hooks/useDrilldown';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface DrilldownConfigPanelProps {\n /* Widget to configure drilldown for /\n widget: Widget;\n /* Callback when drilldown settings change (for tracking unsaved changes) /\n onChange?: (config: DrilldownConfig) => void;\n /* Sample widget data for field suggestions /\n widgetData?: Record<string, unknown>;\n}\n\nexport interface DrilldownConfig {\n enabled: boolean;\n targetDashboardId: string;\n navigationMode: NavigationMode;\n parameterMapping: Record<string, string>;\n /* Whether to pass global filters to target dashboard /\n passGlobalFilters: boolean;\n /* Maximum drilldown depth (default: 3) /\n maxDepth: number;\n /* Open in same tab or new tab (for SAME_WINDOW mode) /\n openIn: 'same' \| 'new';\n}\n\ninterface DashboardOption {\n id: string;\n name: string;\n}\n\ninterface ParameterMapping {\n key: string;\n value: string;\n}\n\n// ============================================================================\n// Helper Functions\n// ============================================================================\n\n/\n Extract available fields from widget data for field suggestions\n /\nfunction extractFieldPaths(obj: unknown, prefix = ''): string[] {\n if (!obj \|\| typeof obj !== 'object') return [];\n\n const paths: string[] = [];\n\n // Handle arrays - use first element as template\n if (Array.isArray(obj)) {\n if (obj.length > 0 && typeof obj[0] === 'object') {\n return extractFieldPaths(obj[0], prefix);\n }\n return [];\n }\n\n // Handle objects\n for (const [key, value] of Object.entries(obj as Record<string, unknown>)) {\n const path = prefix ? `${prefix}.${key}` : key;\n paths.push(path);\n\n // Recurse into nested objects (but not too deep)\n if (value && typeof value === 'object' && !Array.isArray(value) && prefix.split('.').length < 2) {\n paths.push(...extractFieldPaths(value, path));\n }\n }\n\n return paths;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const DrilldownConfigPanel: FC<DrilldownConfigPanelProps> = memo(function DrilldownConfigPanel({\n widget,\n onChange,\n widgetData,\n}) {\n const apolloClient = useApolloClient();\n\n // State\n const [enabled, setEnabled] = useState(widget.drilldown?.enabled ?? false);\n const [targetDashboardId, setTargetDashboardId] = useState(widget.drilldown?.targetDashboardId ?? '');\n const [navigationMode, setNavigationMode] = useState<NavigationMode>(widget.drilldown?.navigationMode ?? 'MODAL');\n const [passGlobalFilters, setPassGlobalFilters] = useState(widget.drilldown?.passGlobalFilters ?? true);\n const [maxDepth, setMaxDepth] = useState(widget.drilldown?.maxDepth ?? DEFAULT_MAX_DEPTH);\n const [openIn, setOpenIn] = useState<'same' \| 'new'>(widget.drilldown?.openIn ?? 'same');\n const [parameterMappings, setParameterMappings] = useState<ParameterMapping[]>(() => {\n const mapping = widget.drilldown?.parameterMapping as Record<string, string> \| undefined;\n if (mapping) {\n return Object.entries(mapping).map(([key, value]) => ({ key, value }));\n }\n return [{ key: '', value: '' }];\n });\n\n const [dashboards, setDashboards] = useState<DashboardOption[]>([]);\n const [loading, setLoading] = useState(false);\n const [showFieldSuggestions, setShowFieldSuggestions] = useState<number \| null>(null);\n\n // Extract available field paths from widget data\n const availableFields = useMemo(() => {\n if (!widgetData) return [];\n\n // Common prefixes for different widget types\n const prefixes = ['row', 'item', 'point', 'selectedData'];\n const fields = extractFieldPaths(widgetData);\n\n // Generate mustache-style suggestions\n const suggestions: string[] = [];\n for (const field of fields) {\n for (const prefix of prefixes) {\n suggestions.push(`{{${prefix}.${field}}}`);\n }\n }\n\n // Add common widget data fields\n suggestions.push('{{widget.value}}', '{{widget.title}}', '{{widget.id}}');\n suggestions.push('{{globals.vars.dateFrom}}', '{{globals.vars.dateTo}}');\n\n return [...new Set(suggestions)];\n }, [widgetData]);\n\n // Notify parent of changes\n const notifyChange = useCallback(() => {\n const parameterMapping: Record<string, string> = {};\n for (const { key, value } of parameterMappings) {\n if (key.trim() && value.trim()) {\n parameterMapping[key.trim()] = value.trim();\n }\n }\n onChange?.({\n enabled,\n targetDashboardId,\n navigationMode,\n parameterMapping,\n passGlobalFilters,\n maxDepth,\n openIn,\n });\n }, [enabled, targetDashboardId, navigationMode, parameterMappings, passGlobalFilters, maxDepth, openIn, onChange]);\n\n // Call notifyChange when any value changes\n useEffect(() => {\n notifyChange();\n }, [\n enabled,\n targetDashboardId,\n navigationMode,\n parameterMappings,\n passGlobalFilters,\n maxDepth,\n openIn,\n notifyChange,\n ]);\n\n // Fetch available dashboards\n useEffect(() => {\n async function fetchDashboards() {\n setLoading(true);\n try {\n const result = await apolloClient.query<{ listDashboards: { edges: Record<string, unknown>[] } }>({\n query: ListDashboardsDocument,\n variables: { first: 100 },\n fetchPolicy: 'cache-first',\n });\n\n const edges = result.data?.listDashboards?.edges \|\| [];\n setDashboards(\n edges.map((edge: Record<string, unknown>) => {\n const node = edge.node as Record<string, unknown>;\n return {\n id: node.id as string,\n name: node.name as string,\n };\n })\n );\n } catch (err) {\n } finally {\n setLoading(false);\n }\n }\n\n fetchDashboards();\n }, [apolloClient]);\n\n // Add parameter mapping row\n const addParameterMapping = useCallback(() => {\n setParameterMappings((prev) => [...prev, { key: '', value: '' }]);\n }, []);\n\n // Remove parameter mapping row\n const removeParameterMapping = useCallback((index: number) => {\n setParameterMappings((prev) => prev.filter((_, i) => i !== index));\n }, []);\n\n // Update parameter mapping\n const updateParameterMapping = useCallback((index: number, field: 'key' \| 'value', newValue: string) => {\n setParameterMappings((prev) => prev.map((item, i) => (i === index ? { ...item, [field]: newValue } : item)));\n }, []);\n\n return (\n <div className=\"space-y-4 pb-8\">\n {/ Enable Toggle /}\n <div className=\"flex items-center justify-between p-3 rounded-lg border border-border-default bg-bg-surface\">\n <label className=\"text-sm font-medium text-text-primary\">Enable Drilldown</label>\n <button\n type=\"button\"\n role=\"switch\"\n aria-checked={enabled}\n onClick={() => setEnabled(!enabled)}\n className={`\n relative inline-flex h-6 w-11 items-center rounded-full transition-colors cursor-pointer border\n ${enabled ? 'bg-action-primary-bg border-action-primary-bg' : 'bg-gray-300 border-gray-400'}\n `}\n >\n <span\n className={`\n inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform\n ${enabled ? 'translate-x-6' : 'translate-x-1'}\n `}\n />\n </button>\n </div>\n\n {enabled && (\n <>\n {/ Target Dashboard /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">Target Dashboard</label>\n <select\n value={targetDashboardId}\n onChange={(e) => setTargetDashboardId(e.target.value)}\n disabled={loading}\n className=\"w-full px-3 py-2 rounded-md border border-border-default bg-bg-surface text-text-primary text-sm focus:outline-none focus:ring-2 focus:ring-action-primary-bg\"\n >\n <option value=\"\">Select a dashboard...</option>\n {dashboards\n .filter((d) => d.id !== widget.dashboardId) // Exclude current dashboard\n .map((dashboard) => (\n <option key={dashboard.id} value={dashboard.id}>\n {dashboard.name}\n </option>\n ))}\n </select>\n </div>\n\n {/ Navigation Mode /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">Navigation Mode</label>\n <div className=\"flex gap-2\">\n {(['MODAL', 'NEW_TAB', 'SAME_WINDOW'] as NavigationMode[]).map((mode) => (\n <button\n key={mode}\n type=\"button\"\n onClick={() => setNavigationMode(mode)}\n className={`\n flex-1 px-3 py-2 rounded-md text-sm font-medium transition-colors\n ${\n navigationMode === mode\n ? 'bg-action-primary-bg text-white'\n : 'bg-bg-sunken text-text-secondary hover:bg-bg-sunken/80'\n }\n `}\n >\n {mode === 'MODAL' && 'Modal'}\n {mode === 'NEW_TAB' && 'New Tab'}\n {mode === 'SAME_WINDOW' && 'Same Window'}\n </button>\n ))}\n </div>\n <p className=\"text-xs text-text-tertiary mt-1\">\n {navigationMode === 'MODAL' && 'Opens target dashboard in a modal overlay'}\n {navigationMode === 'NEW_TAB' && 'Opens target dashboard in a new browser tab'}\n {navigationMode === 'SAME_WINDOW' && 'Navigates to target dashboard in current window'}\n </p>\n </div>\n\n {/ Parameter Mappings /}\n <div>\n <div className=\"flex items-center justify-between mb-2\">\n <label className=\"text-sm font-medium text-text-primary\">Parameter Mappings</label>\n <button\n type=\"button\"\n onClick={addParameterMapping}\n className=\"text-xs text-action-primary-text hover:underline\"\n >\n + Add Parameter\n </button>\n </div>\n\n <div className=\"space-y-2\">\n {parameterMappings.map((mapping, index) => (\n <div key={index} className=\"relative\">\n <div className=\"flex gap-2 items-center\">\n <input\n type=\"text\"\n value={mapping.key}\n onChange={(e) => updateParameterMapping(index, 'key', e.target.value)}\n placeholder=\"Parameter name\"\n className=\"flex-1 px-2 py-1.5 rounded border border-border-default bg-bg-surface text-text-primary text-sm focus:outline-none focus:ring-1 focus:ring-action-primary-bg\"\n />\n <span className=\"text-text-tertiary\">=</span>\n <div className=\"flex-1 relative\">\n <input\n type=\"text\"\n value={mapping.value}\n onChange={(e) => updateParameterMapping(index, 'value', e.target.value)}\n onFocus={() => setShowFieldSuggestions(index)}\n onBlur={() => setTimeout(() => setShowFieldSuggestions(null), 200)}\n placeholder=\"{{row.field}} or static\"\n className=\"w-full px-2 py-1.5 rounded border border-border-default bg-bg-surface text-text-primary text-sm focus:outline-none focus:ring-1 focus:ring-action-primary-bg\"\n />\n {/ Field suggestions dropdown /}\n {showFieldSuggestions === index && availableFields.length > 0 && (\n <div className=\"absolute z-10 top-full left-0 right-0 mt-1 max-h-40 overflow-y-auto bg-bg-surface border border-border-default rounded-md shadow-lg\">\n {availableFields.slice(0, 10).map((field) => (\n <button\n key={field}\n type=\"button\"\n onClick={() => {\n updateParameterMapping(index, 'value', field);\n setShowFieldSuggestions(null);\n }}\n className=\"w-full px-3 py-1.5 text-left text-xs text-text-primary hover:bg-bg-sunken font-mono\"\n >\n {field}\n </button>\n ))}\n </div>\n )}\n </div>\n {parameterMappings.length > 1 && (\n <button\n type=\"button\"\n onClick={() => removeParameterMapping(index)}\n className=\"p-1 text-text-tertiary hover:text-state-error\"\n >\n <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n )}\n </div>\n </div>\n ))}\n </div>\n\n <p className=\"text-xs text-text-tertiary mt-2\">\n Use <code className=\"px-1 bg-bg-sunken rounded\">{'{{row.field}}'}</code> for dynamic values or enter static\n text.\n <br />\n Examples: <code className=\"px-1 bg-bg-sunken rounded\">{'{{row.category}}'}</code>,{' '}\n <code className=\"px-1 bg-bg-sunken rounded\">{'{{item.id}}'}</code>,{' '}\n <code className=\"px-1 bg-bg-sunken rounded\">{'{{globals.vars.dateFrom}}'}</code>\n </p>\n </div>\n\n {/ Advanced Options /}\n <div className=\"border-t border-border-default pt-4 mt-4\">\n <h4 className=\"text-sm font-medium text-text-primary mb-3\">Advanced Options</h4>\n\n {/ Pass Global Filters /}\n <div className=\"flex items-center justify-between p-2 rounded bg-bg-sunken mb-3\">\n <div>\n <label className=\"text-sm text-text-primary\">Pass Global Filters</label>\n <p className=\"text-xs text-text-tertiary\">Include current dashboard filters in drilldown</p>\n </div>\n <button\n type=\"button\"\n role=\"switch\"\n aria-checked={passGlobalFilters}\n onClick={() => setPassGlobalFilters(!passGlobalFilters)}\n className={`\n relative inline-flex h-5 w-9 items-center rounded-full transition-colors cursor-pointer border\n ${passGlobalFilters ? 'bg-action-primary-bg border-action-primary-bg' : 'bg-gray-300 border-gray-400'}\n `}\n >\n <span\n className={`\n inline-block h-3 w-3 transform rounded-full bg-white shadow transition-transform\n ${passGlobalFilters ? 'translate-x-5' : 'translate-x-1'}\n `}\n />\n </button>\n </div>\n\n {/ Max Depth /}\n <div className=\"flex items-center justify-between p-2 rounded bg-bg-sunken mb-3\">\n <div>\n <label className=\"text-sm text-text-primary\">Max Drilldown Depth</label>\n <p className=\"text-xs text-text-tertiary\">Limit nested drilldown levels</p>\n </div>\n <select\n value={maxDepth}\n onChange={(e) => setMaxDepth(Number(e.target.value))}\n className=\"w-16 px-2 py-1 rounded border border-border-default bg-bg-surface text-text-primary text-sm\"\n >\n {[1, 2, 3, 4, 5].map((n) => (\n <option key={n} value={n}>\n {n}\n </option>\n ))}\n </select>\n </div>\n\n {/ Open In (only for SAME_WINDOW mode) /}\n {navigationMode === 'SAME_WINDOW' && (\n <div className=\"flex items-center justify-between p-2 rounded bg-bg-sunken\">\n <div>\n <label className=\"text-sm text-text-primary\">Open In</label>\n <p className=\"text-xs text-text-tertiary\">Tab behavior for navigation</p>\n </div>\n <div className=\"flex gap-1\">\n <button\n type=\"button\"\n onClick={() => setOpenIn('same')}\n className={`\n px-2 py-1 rounded text-xs font-medium transition-colors\n ${\n openIn === 'same'\n ? 'bg-action-primary-bg text-white'\n : 'bg-bg-surface text-text-secondary hover:bg-bg-sunken/80 border border-border-default'\n }\n `}\n >\n Same Tab\n </button>\n <button\n type=\"button\"\n onClick={() => setOpenIn('new')}\n className={`\n px-2 py-1 rounded text-xs font-medium transition-colors\n ${\n openIn === 'new'\n ? 'bg-action-primary-bg text-white'\n : 'bg-bg-surface text-text-secondary hover:bg-bg-sunken/80 border border-border-default'\n }\n `}\n >\n New Tab\n </button>\n </div>\n </div>\n )}\n </div>\n </>\n )}\n\n {/ Info when drilldown will be removed */}\n {!enabled && widget.drilldown?.id && (\n <div className=\"p-2 rounded bg-amber-100 text-amber-800 text-sm\">\n Drilldown will be removed when you save changes.\n </div>\n )}\n </div>\n );\n});\n\nexport default DrilldownConfigPanel;\n"],"mappings":"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"}

package/dist/bigconsole/components/widgets/PropertiesPanel.js CHANGED Viewed

@@ -915,9 +915,9 @@ var L = p(function({ isOpen: s, onClose: c }) {
 										className: "space-y-4",
 										children: [
 											/* @__PURE__ */ S("div", {
-												className: "p-3 bg-muted rounded-md border border-border",
+												className: "p-3 bg-bg-sunken rounded-md border border-border-subtle",
 												children: /* @__PURE__ */ S("p", {
-													className: "text-xs text-muted-foreground",
+													className: "text-xs text-text-secondary",
 													children: "Connect this widget to a DataSink and Parser to display transformed data."
 												})
 											}),
@@ -931,7 +931,7 @@ var L = p(function({ isOpen: s, onClose: c }) {
 														placeholder: "Select a DataSink..."
 													}),
 													G && /* @__PURE__ */ C("p", {
-														className: "text-xs text-muted-foreground",
+														className: "text-xs text-text-secondary",
 														children: [
 															"Key: ",
 															G,
@@ -961,7 +961,7 @@ var L = p(function({ isOpen: s, onClose: c }) {
 														disabled: !G
 													}),
 													/* @__PURE__ */ S("p", {
-														className: "text-xs text-muted-foreground",
+														className: "text-xs text-text-secondary",
 														children: Me ? /* @__PURE__ */ C("span", {
 															className: "flex items-center gap-1",
 															children: [/* @__PURE__ */ S(M, { style: {
@@ -1020,7 +1020,7 @@ var L = p(function({ isOpen: s, onClose: c }) {
 														placeholder: "e.g., summary.totalRevenue"
 													}),
 													/* @__PURE__ */ S("p", {
-														className: "text-xs text-muted-foreground",
+														className: "text-xs text-text-secondary",
 														children: "Path to extract specific data from the parser output (dot notation)"
 													})
 												]
@@ -1028,9 +1028,9 @@ var L = p(function({ isOpen: s, onClose: c }) {
 										]
 									}),
 									/* @__PURE__ */ S("div", {
-										className: "border-t border-border pt-4",
+										className: "border-t border-border-subtle pt-4",
 										children: /* @__PURE__ */ S(E, {
-											className: "text-xs text-muted-foreground uppercase tracking-wide",
+											className: "text-xs text-text-secondary uppercase tracking-wide",
 											children: "Alternative Data Sources"
 										})
 									}),
@@ -1205,7 +1205,7 @@ var L = p(function({ isOpen: s, onClose: c }) {
 														placeholder: "$.data.items or .data.items"
 													}),
 													/* @__PURE__ */ S("p", {
-														className: "text-xs text-muted-foreground",
+														className: "text-xs text-text-secondary",
 														children: "JSONPath or dot notation to extract data from response"
 													})
 												]
@@ -1278,7 +1278,7 @@ var L = p(function({ isOpen: s, onClose: c }) {
 														placeholder: ".data.items"
 													}),
 													/* @__PURE__ */ S("p", {
-														className: "text-xs text-muted-foreground",
+														className: "text-xs text-text-secondary",
 														children: "Path to extract data from GraphQL response"
 													})
 												]
@@ -1309,7 +1309,7 @@ var L = p(function({ isOpen: s, onClose: c }) {
 										className: "text-sm font-medium",
 										children: "Widget Actions"
 									}), /* @__PURE__ */ S("p", {
-										className: "text-xs text-muted-foreground",
+										className: "text-xs text-text-secondary",
 										children: "Configure buttons on this widget"
 									})] }), /* @__PURE__ */ C(w, {
 										size: "sm",
@@ -1321,8 +1321,8 @@ var L = p(function({ isOpen: s, onClose: c }) {
 									children: /* @__PURE__ */ S(M, { className: "size-6" })
 								}) : q.length === 0 ? /* @__PURE__ */ C("div", {
 									className: "py-8 text-center",
-									children: [/* @__PURE__ */ S(b, { className: "size-10 mx-auto mb-2 text-muted-foreground/50" }), /* @__PURE__ */ S("p", {
-										className: "text-sm text-muted-foreground",
+									children: [/* @__PURE__ */ S(b, { className: "size-10 mx-auto mb-2 text-text-secondary/50" }), /* @__PURE__ */ S("p", {
+										className: "text-sm text-text-secondary",
 										children: "No actions configured"
 									})]
 								}) : /* @__PURE__ */ S("div", {
@@ -1359,7 +1359,7 @@ var L = p(function({ isOpen: s, onClose: c }) {
 															children: e.label
 														})]
 													}), /* @__PURE__ */ C("p", {
-														className: "text-xs text-muted-foreground",
+														className: "text-xs text-text-secondary",
 														children: [
 															e.name,
 															" • ",
@@ -1418,9 +1418,9 @@ var L = p(function({ isOpen: s, onClose: c }) {
 									config: V.config || {},
 									onChange: Ze
 								}) : /* @__PURE__ */ S("div", {
-									className: "p-4 bg-muted rounded-lg text-center",
+									className: "p-4 bg-bg-sunken rounded-lg text-center",
 									children: /* @__PURE__ */ S("p", {
-										className: "text-sm text-muted-foreground",
+										className: "text-sm text-text-secondary",
 										children: "No style options for this widget type"
 									})
 								})
@@ -1431,8 +1431,8 @@ var L = p(function({ isOpen: s, onClose: c }) {
 					className: "flex-1 flex items-center justify-center p-4",
 					children: /* @__PURE__ */ C("div", {
 						className: "text-center",
-						children: [/* @__PURE__ */ S(b, { className: "size-12 mx-auto mb-3 text-muted-foreground" }), /* @__PURE__ */ S("p", {
-							className: "text-sm text-muted-foreground",
+						children: [/* @__PURE__ */ S(b, { className: "size-12 mx-auto mb-3 text-text-secondary" }), /* @__PURE__ */ S("p", {
+							className: "text-sm text-text-secondary",
 							children: "Select a widget to edit"
 						})]
 					})