npm - @burdenoff/microfe-bigconsole - Versions diffs - 2026.805.2 → 2026.812.1 - Mend

@burdenoff/microfe-bigconsole 2026.805.2 → 2026.812.1

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 (253) hide show

package/dist/bigconsole/components/widgets/list/ListConfig.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListConfig.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/list/ListConfig.tsx"],"sourcesContent":["/*\n ListConfig Component\n \n Configuration panel for List widgets.\n /\n\nimport { type FC, memo, useCallback } from 'react';\nimport type { ListConfig as ConfigType } from '../../../types';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface ListConfigProps {\n /* Current configuration /\n config: ConfigType;\n /* Callback when config changes /\n onChange: (config: ConfigType) => void;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const ListConfig: FC<ListConfigProps> = memo(function ListConfig({ config, onChange }) {\n const handleChange = useCallback(\n <K extends keyof ConfigType>(key: K, value: ConfigType[K]) => {\n onChange({ ...config, [key]: value });\n },\n [config, onChange]\n );\n\n return (\n <div className=\"space-y-4\">\n {/ Max Items /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">Maximum Items to Display</label>\n <input\n type=\"number\"\n value={config.maxItems ?? ''}\n onChange={(e) => handleChange('maxItems', e.target.value ? Number(e.target.value) : undefined)}\n min={1}\n placeholder=\"No limit\"\n className=\"\n w-full px-3 py-2\n text-sm text-text-primary\n bg-bg-surface\n border border-border-default\n rounded-md\n focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n \"\n />\n <p className=\"text-xs text-text-secondary mt-1\">Leave empty to show all items</p>\n </div>\n\n {/ Title Field /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">Title Field</label>\n <input\n type=\"text\"\n value={config.titleField \|\| ''}\n onChange={(e) => handleChange('titleField', e.target.value)}\n placeholder=\"e.g., name, title\"\n className=\"\n w-full px-3 py-2\n text-sm text-text-primary\n bg-bg-surface\n border border-border-default\n rounded-md\n focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n \"\n />\n </div>\n\n {/ Subtitle Field /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">Subtitle Field</label>\n <input\n type=\"text\"\n value={config.subtitleField \|\| ''}\n onChange={(e) => handleChange('subtitleField', e.target.value)}\n placeholder=\"e.g., description, email\"\n className=\"\n w-full px-3 py-2\n text-sm text-text-primary\n bg-bg-surface\n border border-border-default\n rounded-md\n focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n \"\n />\n </div>\n\n {/ Value Field /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">Value Field (right side)</label>\n <input\n type=\"text\"\n value={config.valueField \|\| ''}\n onChange={(e) => handleChange('valueField', e.target.value)}\n placeholder=\"e.g., amount, count\"\n className=\"\n w-full px-3 py-2\n text-sm text-text-primary\n bg-bg-surface\n border border-border-default\n rounded-md\n focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n \"\n />\n </div>\n\n {/ Badge Field /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">Badge Field</label>\n <input\n type=\"text\"\n value={config.badgeField \|\| ''}\n onChange={(e) => handleChange('badgeField', e.target.value)}\n placeholder=\"e.g., status, type\"\n className=\"\n w-full px-3 py-2\n text-sm text-text-primary\n bg-bg-surface\n border border-border-default\n rounded-md\n focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n \"\n />\n </div>\n\n {/ Toggle Options */}\n <div className=\"space-y-3\">\n <label className=\"flex items-center gap-3\">\n <input\n type=\"checkbox\"\n checked={config.showCount !== false}\n onChange={(e) => handleChange('showCount', e.target.checked)}\n className=\"\n w-4 h-4\n text-action-primary-bg\n bg-bg-surface\n border-border-default\n rounded\n focus:ring-action-primary-bg\n \"\n />\n <span className=\"text-sm text-text-primary\">Show item count</span>\n </label>\n\n <label className=\"flex items-center gap-3\">\n <input\n type=\"checkbox\"\n checked={config.showSearch === true}\n onChange={(e) => handleChange('showSearch', e.target.checked)}\n className=\"\n w-4 h-4\n text-action-primary-bg\n bg-bg-surface\n border-border-default\n rounded\n focus:ring-action-primary-bg\n \"\n />\n <span className=\"text-sm text-text-primary\">Show search box</span>\n </label>\n\n <label className=\"flex items-center gap-3\">\n <input\n type=\"checkbox\"\n checked={config.showViewAll !== false}\n onChange={(e) => handleChange('showViewAll', e.target.checked)}\n className=\"\n w-4 h-4\n text-action-primary-bg\n bg-bg-surface\n border-border-default\n rounded\n focus:ring-action-primary-bg\n \"\n />\n <span className=\"text-sm text-text-primary\">Show "View All" link when truncated</span>\n </label>\n\n <label className=\"flex items-center gap-3\">\n <input\n type=\"checkbox\"\n checked={config.showIcon === true}\n onChange={(e) => handleChange('showIcon', e.target.checked)}\n className=\"\n w-4 h-4\n text-action-primary-bg\n bg-bg-surface\n border-border-default\n rounded\n focus:ring-action-primary-bg\n \"\n />\n <span className=\"text-sm text-text-primary\">Show item icons</span>\n </label>\n </div>\n </div>\n );\n});\n\nexport default ListConfig;\n"],"mappings":";;;AAwBA,IAAa,IAAkC,EAAK,SAAoB,EAAE,WAAQ,eAAY;CAC5F,IAAM,IAAe,GACU,GAAQ,MAAyB;AAC5D,IAAS;GAAE,GAAG;IAAS,IAAM;GAAO,CAAC;IAEvC,CAAC,GAAQ,EAAS,CACnB;AAED,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GAEE,kBAAC,OAAD,EAAA,UAAA;IACE,kBAAC,SAAD;KAAO,WAAU;eAAmD;KAAgC,CAAA;IACpG,kBAAC,SAAD;KACE,MAAK;KACL,OAAO,EAAO,YAAY;KAC1B,WAAW,MAAM,EAAa,YAAY,EAAE,OAAO,QAAQ,OAAO,EAAE,OAAO,MAAM,GAAG,KAAA,EAAU;KAC9F,KAAK;KACL,aAAY;KACZ,WAAU;KAQV,CAAA;IACF,kBAAC,KAAD;KAAG,WAAU;eAAmC;KAAiC,CAAA;IAC7E,EAAA,CAAA;GAGN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;IAAO,WAAU;cAAmD;IAAmB,CAAA,EACvF,kBAAC,SAAD;IACE,MAAK;IACL,OAAO,EAAO,cAAc;IAC5B,WAAW,MAAM,EAAa,cAAc,EAAE,OAAO,MAAM;IAC3D,aAAY;IACZ,WAAU;IAQV,CAAA,CACE,EAAA,CAAA;GAGN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;IAAO,WAAU;cAAmD;IAAsB,CAAA,EAC1F,kBAAC,SAAD;IACE,MAAK;IACL,OAAO,EAAO,iBAAiB;IAC/B,WAAW,MAAM,EAAa,iBAAiB,EAAE,OAAO,MAAM;IAC9D,aAAY;IACZ,WAAU;IAQV,CAAA,CACE,EAAA,CAAA;GAGN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;IAAO,WAAU;cAAmD;IAAgC,CAAA,EACpG,kBAAC,SAAD;IACE,MAAK;IACL,OAAO,EAAO,cAAc;IAC5B,WAAW,MAAM,EAAa,cAAc,EAAE,OAAO,MAAM;IAC3D,aAAY;IACZ,WAAU;IAQV,CAAA,CACE,EAAA,CAAA;GAGN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;IAAO,WAAU;cAAmD;IAAmB,CAAA,EACvF,kBAAC,SAAD;IACE,MAAK;IACL,OAAO,EAAO,cAAc;IAC5B,WAAW,MAAM,EAAa,cAAc,EAAE,OAAO,MAAM;IAC3D,aAAY;IACZ,WAAU;IAQV,CAAA,CACE,EAAA,CAAA;GAGN,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,SAAD;MAAO,WAAU;gBAAjB,CACE,kBAAC,SAAD;OACE,MAAK;OACL,SAAS,EAAO,cAAc;OAC9B,WAAW,MAAM,EAAa,aAAa,EAAE,OAAO,QAAQ;OAC5D,WAAU;OAQV,CAAA,EACF,kBAAC,QAAD;OAAM,WAAU;iBAA4B;OAAsB,CAAA,CAC5D;;KAER,kBAAC,SAAD;MAAO,WAAU;gBAAjB,CACE,kBAAC,SAAD;OACE,MAAK;OACL,SAAS,EAAO,eAAe;OAC/B,WAAW,MAAM,EAAa,cAAc,EAAE,OAAO,QAAQ;OAC7D,WAAU;OAQV,CAAA,EACF,kBAAC,QAAD;OAAM,WAAU;iBAA4B;OAAsB,CAAA,CAC5D;;KAER,kBAAC,SAAD;MAAO,WAAU;gBAAjB,CACE,kBAAC,SAAD;OACE,MAAK;OACL,SAAS,EAAO,gBAAgB;OAChC,WAAW,MAAM,EAAa,eAAe,EAAE,OAAO,QAAQ;OAC9D,WAAU;OAQV,CAAA,EACF,kBAAC,QAAD;OAAM,WAAU;iBAA4B;OAAoD,CAAA,CAC1F;;KAER,kBAAC,SAAD;MAAO,WAAU;gBAAjB,CACE,kBAAC,SAAD;OACE,MAAK;OACL,SAAS,EAAO,aAAa;OAC7B,WAAW,MAAM,EAAa,YAAY,EAAE,OAAO,QAAQ;OAC3D,WAAU;OAQV,CAAA,EACF,kBAAC,QAAD;OAAM,WAAU;iBAA4B;OAAsB,CAAA,CAC5D;;KACJ;;GACF;;EAER"}
1	+ {"version":3,"file":"ListConfig.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/list/ListConfig.tsx"],"sourcesContent":["/*\n ListConfig Component\n \n Configuration panel for List widgets.\n /\n\nimport { type FC, memo, useCallback } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport type { ListConfig as ConfigType } from '../../../types';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface ListConfigProps {\n /* Current configuration /\n config: ConfigType;\n /* Callback when config changes /\n onChange: (config: ConfigType) => void;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const ListConfig: FC<ListConfigProps> = memo(function ListConfig({ config, onChange }) {\n const { t } = useI18n();\n const handleChange = useCallback(\n <K extends keyof ConfigType>(key: K, value: ConfigType[K]) => {\n onChange({ ...config, [key]: value });\n },\n [config, onChange]\n );\n\n return (\n <div className=\"min-w-0 space-y-form-gap\">\n {/ Max Items /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n {t('bigconsole.widget.config.list.maxItems.label', 'Maximum Items to Display')}\n </label>\n <input\n type=\"number\"\n value={config.maxItems ?? ''}\n onChange={(e) => handleChange('maxItems', e.target.value ? Number(e.target.value) : undefined)}\n min={1}\n placeholder={t('bigconsole.widget.config.list.maxItems.placeholder', 'No limit')}\n className=\"\n w-full px-3 py-2\n text-sm text-text-primary\n bg-bg-surface\n border border-border-default\n rounded-md\n focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n \"\n />\n <p className=\"text-xs text-text-secondary mt-1\">\n {t('bigconsole.widget.config.list.maxItems.help', 'Leave empty to show all items')}\n </p>\n </div>\n\n {/ Title Field /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n {t('bigconsole.widget.config.list.titleField.label', 'Title Field')}\n </label>\n <input\n type=\"text\"\n value={config.titleField \|\| ''}\n onChange={(e) => handleChange('titleField', e.target.value)}\n placeholder={t('bigconsole.widget.config.list.titleField.placeholder', 'e.g., name, title')}\n className=\"\n w-full px-3 py-2\n text-sm text-text-primary\n bg-bg-surface\n border border-border-default\n rounded-md\n focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n \"\n />\n </div>\n\n {/ Subtitle Field /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n {t('bigconsole.widget.config.list.subtitleField.label', 'Subtitle Field')}\n </label>\n <input\n type=\"text\"\n value={config.subtitleField \|\| ''}\n onChange={(e) => handleChange('subtitleField', e.target.value)}\n placeholder={t('bigconsole.widget.config.list.subtitleField.placeholder', 'e.g., description, email')}\n className=\"\n w-full px-3 py-2\n text-sm text-text-primary\n bg-bg-surface\n border border-border-default\n rounded-md\n focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n \"\n />\n </div>\n\n {/ Value Field /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n {t('bigconsole.widget.config.list.valueField.label', 'Value Field (right side)')}\n </label>\n <input\n type=\"text\"\n value={config.valueField \|\| ''}\n onChange={(e) => handleChange('valueField', e.target.value)}\n placeholder={t('bigconsole.widget.config.list.valueField.placeholder', 'e.g., amount, count')}\n className=\"\n w-full px-3 py-2\n text-sm text-text-primary\n bg-bg-surface\n border border-border-default\n rounded-md\n focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n \"\n />\n </div>\n\n {/ Badge Field /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n {t('bigconsole.widget.config.list.badgeField.label', 'Badge Field')}\n </label>\n <input\n type=\"text\"\n value={config.badgeField \|\| ''}\n onChange={(e) => handleChange('badgeField', e.target.value)}\n placeholder={t('bigconsole.widget.config.list.badgeField.placeholder', 'e.g., status, type')}\n className=\"\n w-full px-3 py-2\n text-sm text-text-primary\n bg-bg-surface\n border border-border-default\n rounded-md\n focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n \"\n />\n </div>\n\n {/ Toggle Options /}\n <div\n role=\"group\"\n aria-label=\"Display options\"\n className=\"space-y-3 border-t border-[var(--color-border-subtle)] pt-form-gap\"\n >\n {/ Toggles are a different KIND of control from the field stack above,\n so they get their own labelled group instead of being visually\n identical to it (BOFF-5636). */}\n <p className=\"text-xs font-bold uppercase tracking-wider text-text-secondary\">Display options</p>\n <label className=\"flex items-center gap-3\">\n <input\n type=\"checkbox\"\n checked={config.showCount !== false}\n onChange={(e) => handleChange('showCount', e.target.checked)}\n className=\"\n w-4 h-4\n text-action-primary-bg\n bg-bg-surface\n border-border-default\n rounded\n focus:ring-action-primary-bg\n \"\n />\n <span className=\"text-sm text-text-primary\">\n {t('bigconsole.widget.config.list.showCount', 'Show item count')}\n </span>\n </label>\n\n <label className=\"flex items-center gap-3\">\n <input\n type=\"checkbox\"\n checked={config.showSearch === true}\n onChange={(e) => handleChange('showSearch', e.target.checked)}\n className=\"\n w-4 h-4\n text-action-primary-bg\n bg-bg-surface\n border-border-default\n rounded\n focus:ring-action-primary-bg\n \"\n />\n <span className=\"text-sm text-text-primary\">\n {t('bigconsole.widget.config.list.showSearch', 'Show search box')}\n </span>\n </label>\n\n <label className=\"flex items-center gap-3\">\n <input\n type=\"checkbox\"\n checked={config.showViewAll !== false}\n onChange={(e) => handleChange('showViewAll', e.target.checked)}\n className=\"\n w-4 h-4\n text-action-primary-bg\n bg-bg-surface\n border-border-default\n rounded\n focus:ring-action-primary-bg\n \"\n />\n <span className=\"text-sm text-text-primary\">\n {t('bigconsole.widget.config.list.showViewAll', 'Show \"View All\" link when truncated')}\n </span>\n </label>\n\n <label className=\"flex items-center gap-3\">\n <input\n type=\"checkbox\"\n checked={config.showIcon === true}\n onChange={(e) => handleChange('showIcon', e.target.checked)}\n className=\"\n w-4 h-4\n text-action-primary-bg\n bg-bg-surface\n border-border-default\n rounded\n focus:ring-action-primary-bg\n \"\n />\n <span className=\"text-sm text-text-primary\">\n {t('bigconsole.widget.config.list.showIcon', 'Show item icons')}\n </span>\n </label>\n </div>\n </div>\n );\n});\n\nexport default ListConfig;\n"],"mappings":"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"}

package/dist/bigconsole/components/widgets/list/ListItem.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { jsx as t, jsxs as n } from "react/jsx-runtime";
 function r(e) {
 	switch (e?.color) {
 		case "success": return "bg-status-success-bg/10 text-status-success-text";
-		case "warning": return "bg-status-warning-bg/10 text-status-warning-text";
+		case "warning": return "bg-status-warning-bg/10 text-[var(--color-status-warning-text)]";
 		case "error": return "bg-status-error-bg/10 text-status-error-text";
 		case "info": return "bg-action-primary-bg/10 text-action-primary-bg";
 		default: return "bg-bg-sunken text-text-secondary";

package/dist/bigconsole/components/widgets/list/ListItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItem.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/list/ListItem.tsx"],"sourcesContent":["/*\n ListItem Component\n \n Individual item in a list widget.\n /\n\nimport { type FC, memo, type ReactNode } from 'react';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface ListItemData {\n /* Unique identifier /\n id: string;\n /* Primary text /\n title: string;\n /* Secondary text /\n subtitle?: string;\n /* Additional metadata lines /\n metadata?: Array<{\n label: string;\n value: string \| number;\n }>;\n /* Badge/tag to display /\n badge?: {\n text: string;\n color?: 'default' \| 'success' \| 'warning' \| 'error' \| 'info';\n };\n /* Icon or avatar /\n icon?: ReactNode;\n /* Value to display on the right /\n value?: string \| number;\n /* Whether item is disabled /\n disabled?: boolean;\n}\n\nexport interface ListItemProps {\n /* Item data /\n item: ListItemData;\n /* Whether the item is clickable /\n clickable?: boolean;\n /* Click handler /\n onClick?: () => void;\n /* Whether to show divider /\n showDivider?: boolean;\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nfunction getBadgeColor(badge: ListItemData['badge']): string {\n const color = badge?.color;\n switch (color) {\n case 'success':\n return 'bg-status-success-bg/10 text-status-success-text';\n case 'warning':\n return 'bg-status-warning-bg/10 text-status-warning-text';\n case 'error':\n return 'bg-status-error-bg/10 text-status-error-text';\n case 'info':\n return 'bg-action-primary-bg/10 text-action-primary-bg';\n case 'default':\n default:\n return 'bg-bg-sunken text-text-secondary';\n }\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const ListItem: FC<ListItemProps> = memo(function ListItem({\n item,\n clickable = false,\n onClick,\n showDivider = true,\n}) {\n const isClickable = clickable && !item.disabled;\n\n return (\n <div\n className={`\n flex items-start gap-3 p-3\n ${showDivider ? 'border-b border-border-default' : ''}\n ${isClickable ? 'cursor-pointer hover:bg-bg-sunken/50 transition-colors' : ''}\n ${item.disabled ? 'opacity-50' : ''}\n `}\n onClick={() => {\n if (isClickable && onClick) {\n onClick();\n }\n }}\n role={isClickable ? 'button' : undefined}\n tabIndex={isClickable ? 0 : undefined}\n onKeyDown={(e) => {\n if (isClickable && onClick && (e.key === 'Enter' \|\| e.key === ' ')) {\n e.preventDefault();\n onClick();\n }\n }}\n >\n {/ Icon/Avatar /}\n {item.icon && (\n <div className=\"flex-shrink-0 w-10 h-10 flex items-center justify-center rounded-full bg-bg-sunken text-text-secondary\">\n {item.icon}\n </div>\n )}\n\n {/ Content /}\n <div className=\"flex-1 min-w-0\">\n {/ Title row /}\n <div className=\"flex items-start justify-between gap-2\">\n <div className=\"flex-1 min-w-0\">\n <h4 className=\"text-sm font-medium text-text-primary truncate\">{item.title}</h4>\n {item.subtitle && <p className=\"text-xs text-text-secondary mt-0.5 line-clamp-2\">{item.subtitle}</p>}\n </div>\n\n {/ Value /}\n {item.value !== undefined && (\n <span className=\"flex-shrink-0 text-sm font-medium text-text-primary\">\n {typeof item.value === 'number' ? new Intl.NumberFormat('en-US').format(item.value) : item.value}\n </span>\n )}\n </div>\n\n {/ Metadata /}\n {item.metadata && item.metadata.length > 0 && (\n <div className=\"flex flex-wrap gap-x-4 gap-y-1 mt-2\">\n {item.metadata.map((meta, index) => (\n <span key={index} className=\"text-xs text-text-secondary\">\n <span className=\"text-text-secondary/70\">{meta.label}: </span>\n <span className=\"font-medium\">{meta.value}</span>\n </span>\n ))}\n </div>\n )}\n\n {/ Badge /}\n {item.badge && (\n <div className=\"mt-2\">\n <span\n className={`\n inline-flex items-center\n px-2 py-0.5\n text-xs font-medium\n rounded-full\n ${getBadgeColor(item.badge)}\n `}\n >\n {item.badge.text}\n </span>\n </div>\n )}\n </div>\n\n {/ Chevron for clickable items */}\n {isClickable && (\n <div className=\"flex-shrink-0 self-center\">\n <svg className=\"w-4 h-4 text-text-secondary\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5l7 7-7 7\" />\n </svg>\n </div>\n )}\n </div>\n );\n});\n\nexport default ListItem;\n"],"mappings":";;;AAoDA,SAAS,EAAc,GAAsC;AAE3D,SADc,GAAO,OACrB;EACE,KAAK,UACH,QAAO;EACT,KAAK,UACH,QAAO;EACT,KAAK,QACH,QAAO;EACT,KAAK,OACH,QAAO;EAET,QACE,QAAO;;;AAQb,IAAa,IAA8B,EAAK,SAAkB,EAChE,SACA,eAAY,IACZ,YACA,iBAAc,MACb;CACD,IAAM,IAAc,KAAa,CAAC,EAAK;AAEvC,QACE,kBAAC,OAAD;EACE,WAAW;;UAEP,IAAc,mCAAmC,GAAG;UACpD,IAAc,2DAA2D,GAAG;UAC5E,EAAK,WAAW,eAAe,GAAG;;EAEtC,eAAe;AACb,GAAI,KAAe,KACjB,GAAS;;EAGb,MAAM,IAAc,WAAW,KAAA;EAC/B,UAAU,IAAc,IAAI,KAAA;EAC5B,YAAY,MAAM;AAChB,GAAI,KAAe,MAAY,EAAE,QAAQ,WAAW,EAAE,QAAQ,SAC5D,EAAE,gBAAgB,EAClB,GAAS;;YAjBf;GAsBG,EAAK,QACJ,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAK;IACF,CAAA;GAIR,kBAAC,OAAD;IAAK,WAAU;cAAf;KAEE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,MAAD;QAAI,WAAU;kBAAkD,EAAK;QAAW,CAAA,EAC/E,EAAK,YAAY,kBAAC,KAAD;QAAG,WAAU;kBAAmD,EAAK;QAAa,CAAA,CAChG;UAGL,EAAK,UAAU,KAAA,KACd,kBAAC,QAAD;OAAM,WAAU;iBACb,OAAO,EAAK,SAAU,WAAW,IAAI,KAAK,aAAa,QAAQ,CAAC,OAAO,EAAK,MAAM,GAAG,EAAK;OACtF,CAAA,CAEL;;KAGL,EAAK,YAAY,EAAK,SAAS,SAAS,KACvC,kBAAC,OAAD;MAAK,WAAU;gBACZ,EAAK,SAAS,KAAK,GAAM,MACxB,kBAAC,QAAD;OAAkB,WAAU;iBAA5B,CACE,kBAAC,QAAD;QAAM,WAAU;kBAAhB,CAA0C,EAAK,OAAM,KAAS;WAC9D,kBAAC,QAAD;QAAM,WAAU;kBAAe,EAAK;QAAa,CAAA,CAC5C;SAHI,EAGJ,CACP;MACE,CAAA;KAIP,EAAK,SACJ,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,QAAD;OACE,WAAW;;;;;kBAKP,EAAc,EAAK,MAAM,CAAC;;iBAG7B,EAAK,MAAM;OACP,CAAA;MACH,CAAA;KAEJ;;GAGL,KACC,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KAAK,WAAU;KAA8B,MAAK;KAAO,QAAO;KAAe,SAAQ;eACrF,kBAAC,QAAD;MAAM,eAAc;MAAQ,gBAAe;MAAQ,aAAa;MAAG,GAAE;MAAiB,CAAA;KAClF,CAAA;IACF,CAAA;GAEJ;;EAER"}
1	+ {"version":3,"file":"ListItem.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/list/ListItem.tsx"],"sourcesContent":["/*\n ListItem Component\n \n Individual item in a list widget.\n /\n\nimport { type FC, memo, type ReactNode } from 'react';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface ListItemData {\n /* Unique identifier /\n id: string;\n /* Primary text /\n title: string;\n /* Secondary text /\n subtitle?: string;\n /* Additional metadata lines /\n metadata?: Array<{\n label: string;\n value: string \| number;\n }>;\n /* Badge/tag to display /\n badge?: {\n text: string;\n color?: 'default' \| 'success' \| 'warning' \| 'error' \| 'info';\n };\n /* Icon or avatar /\n icon?: ReactNode;\n /* Value to display on the right /\n value?: string \| number;\n /* Whether item is disabled /\n disabled?: boolean;\n}\n\nexport interface ListItemProps {\n /* Item data /\n item: ListItemData;\n /* Whether the item is clickable /\n clickable?: boolean;\n /* Click handler /\n onClick?: () => void;\n /* Whether to show divider /\n showDivider?: boolean;\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nfunction getBadgeColor(badge: ListItemData['badge']): string {\n const color = badge?.color;\n switch (color) {\n case 'success':\n return 'bg-status-success-bg/10 text-status-success-text';\n case 'warning':\n return 'bg-status-warning-bg/10 text-[var(--color-status-warning-text)]';\n case 'error':\n return 'bg-status-error-bg/10 text-status-error-text';\n case 'info':\n return 'bg-action-primary-bg/10 text-action-primary-bg';\n case 'default':\n default:\n return 'bg-bg-sunken text-text-secondary';\n }\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const ListItem: FC<ListItemProps> = memo(function ListItem({\n item,\n clickable = false,\n onClick,\n showDivider = true,\n}) {\n const isClickable = clickable && !item.disabled;\n\n return (\n <div\n className={`\n flex items-start gap-3 p-3\n ${showDivider ? 'border-b border-border-default' : ''}\n ${isClickable ? 'cursor-pointer hover:bg-bg-sunken/50 transition-colors' : ''}\n ${item.disabled ? 'opacity-50' : ''}\n `}\n onClick={() => {\n if (isClickable && onClick) {\n onClick();\n }\n }}\n role={isClickable ? 'button' : undefined}\n tabIndex={isClickable ? 0 : undefined}\n onKeyDown={(e) => {\n if (isClickable && onClick && (e.key === 'Enter' \|\| e.key === ' ')) {\n e.preventDefault();\n onClick();\n }\n }}\n >\n {/ Icon/Avatar /}\n {item.icon && (\n <div className=\"flex-shrink-0 w-10 h-10 flex items-center justify-center rounded-full bg-bg-sunken text-text-secondary\">\n {item.icon}\n </div>\n )}\n\n {/ Content /}\n <div className=\"flex-1 min-w-0\">\n {/ Title row /}\n <div className=\"flex items-start justify-between gap-2\">\n <div className=\"flex-1 min-w-0\">\n <h4 className=\"text-sm font-medium text-text-primary truncate\">{item.title}</h4>\n {item.subtitle && <p className=\"text-xs text-text-secondary mt-0.5 line-clamp-2\">{item.subtitle}</p>}\n </div>\n\n {/ Value /}\n {item.value !== undefined && (\n <span className=\"flex-shrink-0 text-sm font-medium text-text-primary\">\n {typeof item.value === 'number' ? new Intl.NumberFormat('en-US').format(item.value) : item.value}\n </span>\n )}\n </div>\n\n {/ Metadata /}\n {item.metadata && item.metadata.length > 0 && (\n <div className=\"flex flex-wrap gap-x-4 gap-y-1 mt-2\">\n {item.metadata.map((meta, index) => (\n <span key={index} className=\"text-xs text-text-secondary\">\n <span className=\"text-text-secondary/70\">{meta.label}: </span>\n <span className=\"font-medium\">{meta.value}</span>\n </span>\n ))}\n </div>\n )}\n\n {/ Badge /}\n {item.badge && (\n <div className=\"mt-2\">\n <span\n className={`\n inline-flex items-center\n px-2 py-0.5\n text-xs font-medium\n rounded-full\n ${getBadgeColor(item.badge)}\n `}\n >\n {item.badge.text}\n </span>\n </div>\n )}\n </div>\n\n {/ Chevron for clickable items */}\n {isClickable && (\n <div className=\"flex-shrink-0 self-center\">\n <svg className=\"w-4 h-4 text-text-secondary\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5l7 7-7 7\" />\n </svg>\n </div>\n )}\n </div>\n );\n});\n\nexport default ListItem;\n"],"mappings":";;;AAoDA,SAAS,EAAc,GAAsC;AAE3D,SADc,GAAO,OACrB;EACE,KAAK,UACH,QAAO;EACT,KAAK,UACH,QAAO;EACT,KAAK,QACH,QAAO;EACT,KAAK,OACH,QAAO;EAET,QACE,QAAO;;;AAQb,IAAa,IAA8B,EAAK,SAAkB,EAChE,SACA,eAAY,IACZ,YACA,iBAAc,MACb;CACD,IAAM,IAAc,KAAa,CAAC,EAAK;AAEvC,QACE,kBAAC,OAAD;EACE,WAAW;;UAEP,IAAc,mCAAmC,GAAG;UACpD,IAAc,2DAA2D,GAAG;UAC5E,EAAK,WAAW,eAAe,GAAG;;EAEtC,eAAe;AACb,GAAI,KAAe,KACjB,GAAS;;EAGb,MAAM,IAAc,WAAW,KAAA;EAC/B,UAAU,IAAc,IAAI,KAAA;EAC5B,YAAY,MAAM;AAChB,GAAI,KAAe,MAAY,EAAE,QAAQ,WAAW,EAAE,QAAQ,SAC5D,EAAE,gBAAgB,EAClB,GAAS;;YAjBf;GAsBG,EAAK,QACJ,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAK;IACF,CAAA;GAIR,kBAAC,OAAD;IAAK,WAAU;cAAf;KAEE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,MAAD;QAAI,WAAU;kBAAkD,EAAK;QAAW,CAAA,EAC/E,EAAK,YAAY,kBAAC,KAAD;QAAG,WAAU;kBAAmD,EAAK;QAAa,CAAA,CAChG;UAGL,EAAK,UAAU,KAAA,KACd,kBAAC,QAAD;OAAM,WAAU;iBACb,OAAO,EAAK,SAAU,WAAW,IAAI,KAAK,aAAa,QAAQ,CAAC,OAAO,EAAK,MAAM,GAAG,EAAK;OACtF,CAAA,CAEL;;KAGL,EAAK,YAAY,EAAK,SAAS,SAAS,KACvC,kBAAC,OAAD;MAAK,WAAU;gBACZ,EAAK,SAAS,KAAK,GAAM,MACxB,kBAAC,QAAD;OAAkB,WAAU;iBAA5B,CACE,kBAAC,QAAD;QAAM,WAAU;kBAAhB,CAA0C,EAAK,OAAM,KAAS;WAC9D,kBAAC,QAAD;QAAM,WAAU;kBAAe,EAAK;QAAa,CAAA,CAC5C;SAHI,EAGJ,CACP;MACE,CAAA;KAIP,EAAK,SACJ,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,QAAD;OACE,WAAW;;;;;kBAKP,EAAc,EAAK,MAAM,CAAC;;iBAG7B,EAAK,MAAM;OACP,CAAA;MACH,CAAA;KAEJ;;GAGL,KACC,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KAAK,WAAU;KAA8B,MAAK;KAAO,QAAO;KAAe,SAAQ;eACrF,kBAAC,QAAD;MAAM,eAAc;MAAQ,gBAAe;MAAQ,aAAa;MAAG,GAAE;MAAiB,CAAA;KAClF,CAAA;IACF,CAAA;GAEJ;;EAER"}

package/dist/bigconsole/components/widgets/map-widget/MapWidget.js CHANGED Viewed

@@ -210,7 +210,7 @@ var y = e(function({ widget: e, data: c, onClick: l, onDrilldown: u }) {
 				children: /* @__PURE__ */ o("div", {
 					className: "text-center",
 					children: [/* @__PURE__ */ o("svg", {
-						className: "mx-auto mb-2 h-12 w-12 text-text-tertiary",
+						className: "mx-auto mb-2 h-12 w-12 text-text-muted",
 						fill: "none",
 						stroke: "currentColor",
 						viewBox: "0 0 24 24",

package/dist/bigconsole/components/widgets/map-widget/MapWidget.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MapWidget.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/map-widget/MapWidget.tsx"],"sourcesContent":["/*\n MapWidget Component\n \n Interactive geographic map (Leaflet + OpenStreetMap tiles) with data-bound\n * markers. Leaflet's stylesheet is loaded from a CDN at runtime (with SRI) because\n * the build-time MFE library bundle does not ship a component's CSS to the host\n * shell — consistent with the map being an inherently online feature (tiles).\n /\n\nimport { type FC, memo, useEffect, useMemo, useRef, useState } from 'react';\nimport L from 'leaflet';\nimport type { Widget } from '../../../types';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface MapWidgetProps {\n widget: Widget;\n data?: MapData;\n onClick?: (marker: MapMarker) => void;\n /* Drilldown handler - receives selected marker data /\n onDrilldown?: (selectedData: Record<string, unknown>) => void;\n}\n\nexport interface MapMarker {\n name: string;\n lat: number;\n lng: number;\n value?: number;\n popup?: string;\n color?: string;\n}\n\n/* Minimal GeoJSON FeatureCollection shape (we only read geometry + properties). /\nexport interface GeoJsonFeatureCollection {\n type: 'FeatureCollection';\n features: Array<{\n type: 'Feature';\n id?: string \| number;\n properties?: Record<string, unknown> \| null;\n geometry: unknown;\n }>;\n}\n\n/* A region value used to shade a choropleth (joined to a GeoJSON feature). /\nexport interface MapRegionValue {\n /* Join key — matched against the feature's id field. /\n id: string;\n /* Numeric value driving the fill intensity. /\n value: number;\n /* Optional display name for the popup. /\n name?: string;\n}\n\nexport interface MapData {\n center?: { lat: number; lng: number };\n zoom?: number;\n markers?: MapMarker[];\n /* GeoJSON regions for choropleth mode. /\n geoJson?: GeoJsonFeatureCollection;\n /* Per-region values joined to GeoJSON features for choropleth shading. /\n regions?: MapRegionValue[];\n}\n\n// ============================================================================\n// Leaflet CSS (runtime CDN injection)\n// ============================================================================\n\nconst LEAFLET_CSS = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';\n// SRI for leaflet@1.9.4/dist/leaflet.css (immutable versioned URL) — guards against a CDN compromise.\nconst LEAFLET_CSS_SRI = 'sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=';\n\nlet leafletCssRequested = false;\n\nfunction ensureLeafletCss(): void {\n // Module-level guard in addition to the DOM check so two MapWidgets mounting in\n // the same tick can't both append the <link> before either lands in the DOM.\n if (leafletCssRequested \|\| document.getElementById('leaflet-css')) return;\n leafletCssRequested = true;\n const link = document.createElement('link');\n link.id = 'leaflet-css';\n link.rel = 'stylesheet';\n link.href = LEAFLET_CSS;\n link.integrity = LEAFLET_CSS_SRI;\n link.crossOrigin = 'anonymous';\n // Don't leak the current path (workspace/dashboard IDs) to the CDN.\n link.referrerPolicy = 'no-referrer';\n // Leaflet needs its stylesheet for correct tile/marker positioning. If the CDN\n // is unreachable or the SRI check fails the load is otherwise silent, so warn and\n // clear the guard/element to allow a later mount to retry.\n link.onerror = () => {\n console.warn('[bigconsole] Leaflet CSS failed to load; map styling may be broken.');\n leafletCssRequested = false;\n link.remove();\n };\n document.head.appendChild(link);\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nconst DEFAULT_MARKER_COLOR = 'var(--color-chart-1, #3b82f6)';\n\n/\n Marker colours come from widget data and are interpolated into an inline\n * `style` attribute, so restrict them to a safe character set (hex / rgb() /\n * hsl() / css var() / named colours). Anything outside that — or containing\n * style-breaking characters — falls back to the default token colour.\n /\nfunction safeColor(color: unknown): string {\n // Marker data is untrusted: a parser can emit a non-string colour (e.g. a numeric\n // status code) that slips past the lat/lng filter, so guard the type before trim().\n if (typeof color !== 'string') return DEFAULT_MARKER_COLOR;\n const trimmed = color.trim();\n if (trimmed.length > 64) return DEFAULT_MARKER_COLOR;\n if (/[;{}<>\"'\\\\]/.test(trimmed)) return DEFAULT_MARKER_COLOR;\n // Block `url()` so a marker colour can't smuggle an exfiltration beacon\n // (e.g. `url(//evil.com/pixel)`) through the otherwise-permissive char set.\n if (/\\burl\\s\\(/i.test(trimmed)) return DEFAULT_MARKER_COLOR;\n // Allow `_` (custom-property names) and `/` (modern `rgb(r g b / a)` syntax);\n // the dangerous-char guard above still blocks anything that could break out of\n // the inline style.\n if (!/^[#a-zA-Z0-9(),.%/_\\s-]+$/.test(trimmed)) return DEFAULT_MARKER_COLOR;\n return trimmed;\n}\n\nfunction isFiniteNumber(v: unknown): v is number {\n return typeof v === 'number' && Number.isFinite(v);\n}\n\n/*\n Theme-safe cold→hot ramp for the heat-point layer: normalized intensity\n * (0–1) → info → warning → error status tokens, returned as `var()` refs.\n \n We deliberately pass the `var()` reference (not a resolved color): the map\n * uses Leaflet's default SVG renderer, where `fill` participates in the CSS\n * cascade, so the tokens resolve correctly AND stay live across theme toggles\n * (a resolved concrete color would go stale until the next data refresh). This\n * also matches the choropleth layer and avoids any per-marker `getComputedStyle`\n * lookup. (If the map ever opts into `preferCanvas`, pre-resolve these instead.)\n /\nfunction heatColor(norm: number): string {\n if (norm >= 0.66) return 'var(--color-status-error)';\n if (norm >= 0.33) return 'var(--color-status-warning)';\n return 'var(--color-status-info)';\n}\n\n/\n Build a marker/region popup as DOM (a bold title + optional formatted value).\n * Uses textContent — never an HTML string — so marker-supplied text can't be\n * interpreted as markup. Shared by the pin and heat-point branches.\n /\nfunction buildMarkerPopup(marker: MapMarker): HTMLDivElement {\n const popupEl = document.createElement('div');\n const title = document.createElement('div');\n title.style.fontWeight = '600';\n title.textContent = marker.popup \|\| marker.name \|\| 'Location';\n popupEl.appendChild(title);\n if (isFiniteNumber(marker.value)) {\n const val = document.createElement('div');\n val.textContent = marker.value.toLocaleString();\n popupEl.appendChild(val);\n }\n return popupEl;\n}\n\n/\n Normalize the bound widget data into markers + optional center/zoom. Accepts\n * the documented `{ markers, center, zoom }` shape, or a bare array of markers\n * (parser output), and drops any entry without valid coordinates.\n /\ninterface NormalizedMapData {\n markers: MapMarker[];\n /* Center explicitly supplied by the data payload — wins over markers. /\n center?: { lat: number; lng: number };\n /* Zoom explicitly supplied by the data payload. /\n zoom?: number;\n /* Center from widget config — a static fallback used only when there are no markers. /\n fallbackCenter?: { lat: number; lng: number };\n /* Zoom from widget config — fallback for the no-marker case. /\n fallbackZoom?: number;\n /* GeoJSON for choropleth mode. /\n geoJson?: GeoJsonFeatureCollection;\n /* region id → { value, name } map for choropleth shading. /\n regionValues: Map<string, { value: number; name?: string }>;\n}\n\nfunction asLatLng(v: unknown): { lat: number; lng: number } \| undefined {\n const c = v as { lat?: unknown; lng?: unknown } \| undefined;\n return c && isFiniteNumber(c.lat) && isFiniteNumber(c.lng) ? { lat: c.lat, lng: c.lng } : undefined;\n}\n\nfunction normalizeMapData(data: MapData \| MapMarker[] \| undefined, config: Record<string, unknown>): NormalizedMapData {\n // The widget may be handed either the documented { markers, center, zoom } shape\n // or a bare marker array (parser output); narrow once so the rest is type-safe.\n const payload: MapData \| undefined = Array.isArray(data) ? undefined : data;\n const rawMarkers: unknown = Array.isArray(data) ? data : data?.markers;\n const markers: MapMarker[] = Array.isArray(rawMarkers)\n ? (rawMarkers as MapMarker[]).filter((m) => m && isFiniteNumber(m.lat) && isFiniteNumber(m.lng))\n : [];\n\n // Choropleth inputs: GeoJSON (from data payload or config) + a region→value join.\n const geoJson = (payload?.geoJson ?? (config.geoJson as GeoJsonFeatureCollection \| undefined)) \|\| undefined;\n const regionIdField = (config.regionIdField as string) \|\| 'id';\n const regionValues = new Map<string, { value: number; name?: string }>();\n const rawRegions: unknown = payload?.regions ?? config.regions;\n if (Array.isArray(rawRegions)) {\n for (const r of rawRegions as Array<Record<string, unknown>>) {\n if (!r) continue;\n const id = r[regionIdField] ?? r.id ?? r.region ?? r.code;\n const value = r.value ?? r.count ?? r.total;\n if (id != null && isFiniteNumber(value)) {\n regionValues.set(String(id), { value, name: typeof r.name === 'string' ? r.name : undefined });\n }\n }\n }\n\n // Data-payload center/zoom are an explicit intent and win over markers. Config\n // center/zoom (e.g. the WidgetRegistry default of {0,0}/2) are only a static\n // fallback for marker-less maps — otherwise that default would pin every marker\n // dataset to the world view instead of framing the markers.\n return {\n markers,\n center: asLatLng(payload?.center),\n zoom: isFiniteNumber(payload?.zoom) ? payload?.zoom : undefined,\n fallbackCenter: asLatLng(config.center),\n fallbackZoom: isFiniteNumber(config.zoom) ? (config.zoom as number) : undefined,\n geoJson: geoJson && Array.isArray(geoJson.features) ? geoJson : undefined,\n regionValues,\n };\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const MapWidget: FC<MapWidgetProps> = memo(function MapWidget({ widget, data, onClick, onDrilldown }) {\n const containerRef = useRef<HTMLDivElement>(null);\n const mapRef = useRef<L.Map \| null>(null);\n // Signature of the last view we auto-framed to; lets us re-render markers on\n // every data change without snapping the viewport back when the framing\n // inputs (coords/center/zoom) are unchanged — e.g. a refetch of identical data.\n const lastFrameSigRef = useRef<string \| null>(null);\n const [status, setStatus] = useState<'loading' \| 'ready' \| 'error'>('loading');\n\n const config = useMemo(() => (widget?.config ?? {}) as Record<string, unknown>, [widget?.config]);\n const showMarkers = config.showMarkers !== false;\n // Heat-point density mode: render weighted, translucent circles whose overlap\n // accumulates into a heat-like surface (dependency-free — no leaflet.heat).\n const heatMode = config.mapMode === 'heat';\n const regionIdField = (config.regionIdField as string) \|\| 'id';\n const { markers, center, zoom, fallbackCenter, fallbackZoom, geoJson, regionValues } = useMemo(\n () => normalizeMapData(data, config),\n [data, config]\n );\n const hasChoropleth = Boolean(geoJson && regionValues.size > 0);\n\n // Keep the latest click handler in a ref so marker bindings don't need rebinding.\n // Assign in an effect (not during render) per the React 19 useRef guidance.\n const clickRef = useRef<(marker: MapMarker) => void>(() => undefined);\n useEffect(() => {\n clickRef.current = (marker: MapMarker) => {\n if (onDrilldown) onDrilldown(marker as unknown as Record<string, unknown>);\n else if (onClick) onClick(marker);\n };\n }, [onClick, onDrilldown]);\n\n // Initialise the map once.\n useEffect(() => {\n const el = containerRef.current;\n if (!el) return undefined;\n ensureLeafletCss();\n\n let map: L.Map;\n try {\n map = L.map(el, { center: [20, 0], zoom: 2, scrollWheelZoom: true, attributionControl: true });\n const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {\n attribution: '© OpenStreetMap contributors',\n maxZoom: 18,\n });\n // Leaflet reports tile failures asynchronously, so addTo() won't throw when\n // tiles are blocked/offline. Surface the error overlay only if a tile errors\n // before any tile has loaded (true offline/blocked), tolerating the odd\n // transient miss once the base map is up.\n let anyTileLoaded = false;\n tiles.on('tileload', () => {\n anyTileLoaded = true;\n // Recover if an early tile miss had shown the offline overlay — a flaky\n // connection that later succeeds shouldn't stay hidden behind it.\n setStatus((s) => (s === 'error' ? 'ready' : s));\n });\n tiles.on('tileerror', () => {\n if (!anyTileLoaded) setStatus('error');\n });\n tiles.addTo(map);\n mapRef.current = map;\n // Fresh map ⇒ force the next marker effect to (re)frame it. Without this the\n // frame-signature ref would survive a remount (e.g. React StrictMode's\n // double-invoke) and the new map would stay stuck at this init view.\n lastFrameSigRef.current = null;\n setStatus('ready');\n } catch {\n setStatus('error');\n return undefined;\n }\n\n // Widgets live in a resizable grid; keep tiles correct as the box changes.\n const ro =\n typeof ResizeObserver !== 'undefined' ? new ResizeObserver(() => mapRef.current?.invalidateSize()) : undefined;\n ro?.observe(el);\n const t = window.setTimeout(() => map.invalidateSize(), 80);\n\n return () => {\n window.clearTimeout(t);\n ro?.disconnect();\n map.remove();\n mapRef.current = null;\n };\n }, []);\n\n // Render markers + frame the view whenever the data changes.\n useEffect(() => {\n const map = mapRef.current;\n if (!map) return undefined;\n\n const layer = L.layerGroup();\n\n // Choropleth: shade GeoJSON regions by a single-hue intensity ramp (the\n // semantic `info` token at varying opacity) joined on the region id field.\n let geoLayer: L.GeoJSON \| null = null;\n if (geoJson && regionValues.size > 0) {\n const vals = Array.from(regionValues.values()).map((v) => v.value);\n const min = Math.min(...vals);\n const max = Math.max(...vals);\n const span = max - min \|\| 1;\n const FILL = 'var(--color-status-info, #3b82f6)';\n\n const lookup = (feature: { id?: string \| number; properties?: Record<string, unknown> \| null }) => {\n const props = feature.properties ?? {};\n const joinId = feature.id ?? props[regionIdField] ?? props.id ?? props.code;\n return joinId != null ? regionValues.get(String(joinId)) : undefined;\n };\n\n geoLayer = L.geoJSON(geoJson as unknown as Parameters<typeof L.geoJSON>[0], {\n style: (feature) => {\n const hit = feature ? lookup(feature) : undefined;\n const norm = hit ? (hit.value - min) / span : 0;\n return {\n fillColor: FILL,\n fillOpacity: hit ? 0.2 + norm 0.65 : 0.05,\n color: 'var(--color-border-default, #cbd5e1)',\n weight: 1,\n };\n },\n onEachFeature: (feature, lyr) => {\n const hit = lookup(feature);\n const name =\n hit?.name ??\n (typeof feature.properties?.name === 'string' ? (feature.properties.name as string) : undefined) ??\n String(feature.id ?? '');\n const popupEl = document.createElement('div');\n const title = document.createElement('div');\n title.style.fontWeight = '600';\n title.textContent = name \|\| 'Region';\n popupEl.appendChild(title);\n if (hit) {\n const val = document.createElement('div');\n val.textContent = hit.value.toLocaleString();\n popupEl.appendChild(val);\n }\n lyr.bindPopup(popupEl);\n lyr.on('click', () => clickRef.current({ name, lat: NaN, lng: NaN, value: hit?.value } as MapMarker));\n },\n });\n geoLayer.addTo(layer);\n }\n\n if (showMarkers && heatMode) {\n // Heat-point layer: translucent weighted circles, sized + colored by value.\n const weights = markers.map((mk) => (isFiniteNumber(mk.value) ? mk.value : 1));\n // reduce, not Math.min(...spread) — spreading a large array as args can\n // blow the call-stack (RangeError) for big datasets.\n const minW = weights.reduce((a, b) => Math.min(a, b), Infinity);\n const maxW = weights.reduce((a, b) => Math.max(a, b), -Infinity);\n const spanW = maxW - minW \|\| 1;\n markers.forEach((marker, i) => {\n const norm = (weights[i] - minW) / spanW;\n const circle = L.circleMarker([marker.lat, marker.lng], {\n radius: 10 + norm * 22,\n fillColor: heatColor(norm),\n // Both radius and opacity ramp with intensity for a truer density look.\n fillOpacity: 0.25 + norm * 0.35,\n stroke: false,\n }).addTo(layer);\n circle.bindPopup(buildMarkerPopup(marker));\n circle.on('click', () => clickRef.current(marker));\n });\n } else if (showMarkers) {\n for (const marker of markers) {\n // Build the pin as a DOM element (not an HTML string) so the marker colour\n // is assigned via the style API and can never be interpreted as markup —\n // defense-in-depth alongside safeColor().\n const pin = document.createElement('div');\n Object.assign(pin.style, {\n width: '14px',\n height: '14px',\n borderRadius: '50% 50% 50% 0',\n transform: 'rotate(-45deg)',\n background: safeColor(marker.color),\n border: '2px solid #fff',\n boxShadow: '0 1px 4px rgba(0,0,0,.4)',\n });\n const icon = L.divIcon({\n className: 'bc-map-marker',\n html: pin,\n iconSize: [14, 14],\n iconAnchor: [7, 14],\n });\n const m = L.marker([marker.lat, marker.lng], { icon }).addTo(layer);\n m.bindPopup(buildMarkerPopup(marker));\n m.on('click', () => clickRef.current(marker));\n }\n }\n layer.addTo(map);\n\n // Only (re)frame the view when the framing inputs actually change — otherwise\n // a data-prop reference change (e.g. a refetch returning identical markers)\n // would discard the user's current pan/zoom.\n const frameSig = JSON.stringify({\n m: markers.map((mk) => [mk.lat, mk.lng]),\n c: center ? [center.lat, center.lng] : null,\n z: zoom ?? null,\n fc: fallbackCenter ? [fallbackCenter.lat, fallbackCenter.lng] : null,\n fz: fallbackZoom ?? null,\n g: geoJson ? regionValues.size : 0,\n });\n if (frameSig !== lastFrameSigRef.current) {\n lastFrameSigRef.current = frameSig;\n // Framing priority: data-payload center → frame the markers → frame the\n // choropleth regions → config fallback center → zoom only → world view.\n // Markers/regions win over the config default so a palette-created map frames\n // its data instead of {0,0}.\n if (center) {\n map.setView([center.lat, center.lng], zoom ?? map.getZoom());\n } else if (!markers.length && geoLayer) {\n const b = geoLayer.getBounds();\n if (b.isValid()) map.fitBounds(b, { padding: [24, 24], maxZoom: 12 });\n } else if (markers.length === 1) {\n map.setView([markers[0].lat, markers[0].lng], zoom ?? 8);\n } else if (markers.length > 1) {\n const bounds = L.latLngBounds(markers.map((m) => [m.lat, m.lng] as [number, number]));\n map.fitBounds(bounds, { padding: [32, 32], maxZoom: 12 });\n } else if (fallbackCenter) {\n map.setView([fallbackCenter.lat, fallbackCenter.lng], zoom ?? fallbackZoom ?? map.getZoom());\n } else if (isFiniteNumber(zoom ?? fallbackZoom)) {\n map.setZoom((zoom ?? fallbackZoom) as number);\n }\n }\n\n const resize = window.setTimeout(() => map.invalidateSize(), 0);\n\n return () => {\n window.clearTimeout(resize);\n layer.remove();\n };\n }, [\n markers,\n center,\n zoom,\n fallbackCenter,\n fallbackZoom,\n showMarkers,\n heatMode,\n geoJson,\n regionValues,\n regionIdField,\n ]);\n\n return (\n <div className=\"relative h-full w-full overflow-hidden rounded-lg bg-bg-sunken\">\n <div ref={containerRef} className=\"h-full w-full\" />\n\n {status !== 'error' && markers.length === 0 && !hasChoropleth && (\n <div className=\"pointer-events-none absolute inset-0 z-[500] flex items-center justify-center bg-bg-sunken/70 text-sm text-text-secondary\">\n <div className=\"text-center\">\n <svg\n className=\"mx-auto mb-2 h-12 w-12 text-text-tertiary\"\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\"\n />\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\"\n />\n </svg>\n <p>No map data</p>\n </div>\n </div>\n )}\n\n {status === 'error' && (\n <div className=\"absolute inset-0 z-[500] flex items-center justify-center bg-bg-sunken px-4 text-center text-sm text-text-secondary\">\n The map needs an internet connection and couldn’t load.\n </div>\n )}\n </div>\n );\n});\n\nexport default MapWidget;\n"],"mappings":"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"}
1	+ {"version":3,"file":"MapWidget.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/map-widget/MapWidget.tsx"],"sourcesContent":["/*\n MapWidget Component\n \n Interactive geographic map (Leaflet + OpenStreetMap tiles) with data-bound\n * markers. Leaflet's stylesheet is loaded from a CDN at runtime (with SRI) because\n * the build-time MFE library bundle does not ship a component's CSS to the host\n * shell — consistent with the map being an inherently online feature (tiles).\n /\n\nimport { type FC, memo, useEffect, useMemo, useRef, useState } from 'react';\nimport L from 'leaflet';\nimport type { Widget } from '../../../types';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface MapWidgetProps {\n widget: Widget;\n data?: MapData;\n onClick?: (marker: MapMarker) => void;\n /* Drilldown handler - receives selected marker data /\n onDrilldown?: (selectedData: Record<string, unknown>) => void;\n}\n\nexport interface MapMarker {\n name: string;\n lat: number;\n lng: number;\n value?: number;\n popup?: string;\n color?: string;\n}\n\n/* Minimal GeoJSON FeatureCollection shape (we only read geometry + properties). /\nexport interface GeoJsonFeatureCollection {\n type: 'FeatureCollection';\n features: Array<{\n type: 'Feature';\n id?: string \| number;\n properties?: Record<string, unknown> \| null;\n geometry: unknown;\n }>;\n}\n\n/* A region value used to shade a choropleth (joined to a GeoJSON feature). /\nexport interface MapRegionValue {\n /* Join key — matched against the feature's id field. /\n id: string;\n /* Numeric value driving the fill intensity. /\n value: number;\n /* Optional display name for the popup. /\n name?: string;\n}\n\nexport interface MapData {\n center?: { lat: number; lng: number };\n zoom?: number;\n markers?: MapMarker[];\n /* GeoJSON regions for choropleth mode. /\n geoJson?: GeoJsonFeatureCollection;\n /* Per-region values joined to GeoJSON features for choropleth shading. /\n regions?: MapRegionValue[];\n}\n\n// ============================================================================\n// Leaflet CSS (runtime CDN injection)\n// ============================================================================\n\nconst LEAFLET_CSS = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';\n// SRI for leaflet@1.9.4/dist/leaflet.css (immutable versioned URL) — guards against a CDN compromise.\nconst LEAFLET_CSS_SRI = 'sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=';\n\nlet leafletCssRequested = false;\n\nfunction ensureLeafletCss(): void {\n // Module-level guard in addition to the DOM check so two MapWidgets mounting in\n // the same tick can't both append the <link> before either lands in the DOM.\n if (leafletCssRequested \|\| document.getElementById('leaflet-css')) return;\n leafletCssRequested = true;\n const link = document.createElement('link');\n link.id = 'leaflet-css';\n link.rel = 'stylesheet';\n link.href = LEAFLET_CSS;\n link.integrity = LEAFLET_CSS_SRI;\n link.crossOrigin = 'anonymous';\n // Don't leak the current path (workspace/dashboard IDs) to the CDN.\n link.referrerPolicy = 'no-referrer';\n // Leaflet needs its stylesheet for correct tile/marker positioning. If the CDN\n // is unreachable or the SRI check fails the load is otherwise silent, so warn and\n // clear the guard/element to allow a later mount to retry.\n link.onerror = () => {\n console.warn('[bigconsole] Leaflet CSS failed to load; map styling may be broken.');\n leafletCssRequested = false;\n link.remove();\n };\n document.head.appendChild(link);\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nconst DEFAULT_MARKER_COLOR = 'var(--color-chart-1, #3b82f6)';\n\n/\n Marker colours come from widget data and are interpolated into an inline\n * `style` attribute, so restrict them to a safe character set (hex / rgb() /\n * hsl() / css var() / named colours). Anything outside that — or containing\n * style-breaking characters — falls back to the default token colour.\n /\nfunction safeColor(color: unknown): string {\n // Marker data is untrusted: a parser can emit a non-string colour (e.g. a numeric\n // status code) that slips past the lat/lng filter, so guard the type before trim().\n if (typeof color !== 'string') return DEFAULT_MARKER_COLOR;\n const trimmed = color.trim();\n if (trimmed.length > 64) return DEFAULT_MARKER_COLOR;\n if (/[;{}<>\"'\\\\]/.test(trimmed)) return DEFAULT_MARKER_COLOR;\n // Block `url()` so a marker colour can't smuggle an exfiltration beacon\n // (e.g. `url(//evil.com/pixel)`) through the otherwise-permissive char set.\n if (/\\burl\\s\\(/i.test(trimmed)) return DEFAULT_MARKER_COLOR;\n // Allow `_` (custom-property names) and `/` (modern `rgb(r g b / a)` syntax);\n // the dangerous-char guard above still blocks anything that could break out of\n // the inline style.\n if (!/^[#a-zA-Z0-9(),.%/_\\s-]+$/.test(trimmed)) return DEFAULT_MARKER_COLOR;\n return trimmed;\n}\n\nfunction isFiniteNumber(v: unknown): v is number {\n return typeof v === 'number' && Number.isFinite(v);\n}\n\n/*\n Theme-safe cold→hot ramp for the heat-point layer: normalized intensity\n * (0–1) → info → warning → error status tokens, returned as `var()` refs.\n \n We deliberately pass the `var()` reference (not a resolved color): the map\n * uses Leaflet's default SVG renderer, where `fill` participates in the CSS\n * cascade, so the tokens resolve correctly AND stay live across theme toggles\n * (a resolved concrete color would go stale until the next data refresh). This\n * also matches the choropleth layer and avoids any per-marker `getComputedStyle`\n * lookup. (If the map ever opts into `preferCanvas`, pre-resolve these instead.)\n /\nfunction heatColor(norm: number): string {\n if (norm >= 0.66) return 'var(--color-status-error)';\n if (norm >= 0.33) return 'var(--color-status-warning)';\n return 'var(--color-status-info)';\n}\n\n/\n Build a marker/region popup as DOM (a bold title + optional formatted value).\n * Uses textContent — never an HTML string — so marker-supplied text can't be\n * interpreted as markup. Shared by the pin and heat-point branches.\n /\nfunction buildMarkerPopup(marker: MapMarker): HTMLDivElement {\n const popupEl = document.createElement('div');\n const title = document.createElement('div');\n title.style.fontWeight = '600';\n title.textContent = marker.popup \|\| marker.name \|\| 'Location';\n popupEl.appendChild(title);\n if (isFiniteNumber(marker.value)) {\n const val = document.createElement('div');\n val.textContent = marker.value.toLocaleString();\n popupEl.appendChild(val);\n }\n return popupEl;\n}\n\n/\n Normalize the bound widget data into markers + optional center/zoom. Accepts\n * the documented `{ markers, center, zoom }` shape, or a bare array of markers\n * (parser output), and drops any entry without valid coordinates.\n /\ninterface NormalizedMapData {\n markers: MapMarker[];\n /* Center explicitly supplied by the data payload — wins over markers. /\n center?: { lat: number; lng: number };\n /* Zoom explicitly supplied by the data payload. /\n zoom?: number;\n /* Center from widget config — a static fallback used only when there are no markers. /\n fallbackCenter?: { lat: number; lng: number };\n /* Zoom from widget config — fallback for the no-marker case. /\n fallbackZoom?: number;\n /* GeoJSON for choropleth mode. /\n geoJson?: GeoJsonFeatureCollection;\n /* region id → { value, name } map for choropleth shading. /\n regionValues: Map<string, { value: number; name?: string }>;\n}\n\nfunction asLatLng(v: unknown): { lat: number; lng: number } \| undefined {\n const c = v as { lat?: unknown; lng?: unknown } \| undefined;\n return c && isFiniteNumber(c.lat) && isFiniteNumber(c.lng) ? { lat: c.lat, lng: c.lng } : undefined;\n}\n\nfunction normalizeMapData(data: MapData \| MapMarker[] \| undefined, config: Record<string, unknown>): NormalizedMapData {\n // The widget may be handed either the documented { markers, center, zoom } shape\n // or a bare marker array (parser output); narrow once so the rest is type-safe.\n const payload: MapData \| undefined = Array.isArray(data) ? undefined : data;\n const rawMarkers: unknown = Array.isArray(data) ? data : data?.markers;\n const markers: MapMarker[] = Array.isArray(rawMarkers)\n ? (rawMarkers as MapMarker[]).filter((m) => m && isFiniteNumber(m.lat) && isFiniteNumber(m.lng))\n : [];\n\n // Choropleth inputs: GeoJSON (from data payload or config) + a region→value join.\n const geoJson = (payload?.geoJson ?? (config.geoJson as GeoJsonFeatureCollection \| undefined)) \|\| undefined;\n const regionIdField = (config.regionIdField as string) \|\| 'id';\n const regionValues = new Map<string, { value: number; name?: string }>();\n const rawRegions: unknown = payload?.regions ?? config.regions;\n if (Array.isArray(rawRegions)) {\n for (const r of rawRegions as Array<Record<string, unknown>>) {\n if (!r) continue;\n const id = r[regionIdField] ?? r.id ?? r.region ?? r.code;\n const value = r.value ?? r.count ?? r.total;\n if (id != null && isFiniteNumber(value)) {\n regionValues.set(String(id), { value, name: typeof r.name === 'string' ? r.name : undefined });\n }\n }\n }\n\n // Data-payload center/zoom are an explicit intent and win over markers. Config\n // center/zoom (e.g. the WidgetRegistry default of {0,0}/2) are only a static\n // fallback for marker-less maps — otherwise that default would pin every marker\n // dataset to the world view instead of framing the markers.\n return {\n markers,\n center: asLatLng(payload?.center),\n zoom: isFiniteNumber(payload?.zoom) ? payload?.zoom : undefined,\n fallbackCenter: asLatLng(config.center),\n fallbackZoom: isFiniteNumber(config.zoom) ? (config.zoom as number) : undefined,\n geoJson: geoJson && Array.isArray(geoJson.features) ? geoJson : undefined,\n regionValues,\n };\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const MapWidget: FC<MapWidgetProps> = memo(function MapWidget({ widget, data, onClick, onDrilldown }) {\n const containerRef = useRef<HTMLDivElement>(null);\n const mapRef = useRef<L.Map \| null>(null);\n // Signature of the last view we auto-framed to; lets us re-render markers on\n // every data change without snapping the viewport back when the framing\n // inputs (coords/center/zoom) are unchanged — e.g. a refetch of identical data.\n const lastFrameSigRef = useRef<string \| null>(null);\n const [status, setStatus] = useState<'loading' \| 'ready' \| 'error'>('loading');\n\n const config = useMemo(() => (widget?.config ?? {}) as Record<string, unknown>, [widget?.config]);\n const showMarkers = config.showMarkers !== false;\n // Heat-point density mode: render weighted, translucent circles whose overlap\n // accumulates into a heat-like surface (dependency-free — no leaflet.heat).\n const heatMode = config.mapMode === 'heat';\n const regionIdField = (config.regionIdField as string) \|\| 'id';\n const { markers, center, zoom, fallbackCenter, fallbackZoom, geoJson, regionValues } = useMemo(\n () => normalizeMapData(data, config),\n [data, config]\n );\n const hasChoropleth = Boolean(geoJson && regionValues.size > 0);\n\n // Keep the latest click handler in a ref so marker bindings don't need rebinding.\n // Assign in an effect (not during render) per the React 19 useRef guidance.\n const clickRef = useRef<(marker: MapMarker) => void>(() => undefined);\n useEffect(() => {\n clickRef.current = (marker: MapMarker) => {\n if (onDrilldown) onDrilldown(marker as unknown as Record<string, unknown>);\n else if (onClick) onClick(marker);\n };\n }, [onClick, onDrilldown]);\n\n // Initialise the map once.\n useEffect(() => {\n const el = containerRef.current;\n if (!el) return undefined;\n ensureLeafletCss();\n\n let map: L.Map;\n try {\n map = L.map(el, { center: [20, 0], zoom: 2, scrollWheelZoom: true, attributionControl: true });\n const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {\n attribution: '© OpenStreetMap contributors',\n maxZoom: 18,\n });\n // Leaflet reports tile failures asynchronously, so addTo() won't throw when\n // tiles are blocked/offline. Surface the error overlay only if a tile errors\n // before any tile has loaded (true offline/blocked), tolerating the odd\n // transient miss once the base map is up.\n let anyTileLoaded = false;\n tiles.on('tileload', () => {\n anyTileLoaded = true;\n // Recover if an early tile miss had shown the offline overlay — a flaky\n // connection that later succeeds shouldn't stay hidden behind it.\n setStatus((s) => (s === 'error' ? 'ready' : s));\n });\n tiles.on('tileerror', () => {\n if (!anyTileLoaded) setStatus('error');\n });\n tiles.addTo(map);\n mapRef.current = map;\n // Fresh map ⇒ force the next marker effect to (re)frame it. Without this the\n // frame-signature ref would survive a remount (e.g. React StrictMode's\n // double-invoke) and the new map would stay stuck at this init view.\n lastFrameSigRef.current = null;\n setStatus('ready');\n } catch {\n setStatus('error');\n return undefined;\n }\n\n // Widgets live in a resizable grid; keep tiles correct as the box changes.\n const ro =\n typeof ResizeObserver !== 'undefined' ? new ResizeObserver(() => mapRef.current?.invalidateSize()) : undefined;\n ro?.observe(el);\n const t = window.setTimeout(() => map.invalidateSize(), 80);\n\n return () => {\n window.clearTimeout(t);\n ro?.disconnect();\n map.remove();\n mapRef.current = null;\n };\n }, []);\n\n // Render markers + frame the view whenever the data changes.\n useEffect(() => {\n const map = mapRef.current;\n if (!map) return undefined;\n\n const layer = L.layerGroup();\n\n // Choropleth: shade GeoJSON regions by a single-hue intensity ramp (the\n // semantic `info` token at varying opacity) joined on the region id field.\n let geoLayer: L.GeoJSON \| null = null;\n if (geoJson && regionValues.size > 0) {\n const vals = Array.from(regionValues.values()).map((v) => v.value);\n const min = Math.min(...vals);\n const max = Math.max(...vals);\n const span = max - min \|\| 1;\n const FILL = 'var(--color-status-info, #3b82f6)';\n\n const lookup = (feature: { id?: string \| number; properties?: Record<string, unknown> \| null }) => {\n const props = feature.properties ?? {};\n const joinId = feature.id ?? props[regionIdField] ?? props.id ?? props.code;\n return joinId != null ? regionValues.get(String(joinId)) : undefined;\n };\n\n geoLayer = L.geoJSON(geoJson as unknown as Parameters<typeof L.geoJSON>[0], {\n style: (feature) => {\n const hit = feature ? lookup(feature) : undefined;\n const norm = hit ? (hit.value - min) / span : 0;\n return {\n fillColor: FILL,\n fillOpacity: hit ? 0.2 + norm 0.65 : 0.05,\n color: 'var(--color-border-default, #cbd5e1)',\n weight: 1,\n };\n },\n onEachFeature: (feature, lyr) => {\n const hit = lookup(feature);\n const name =\n hit?.name ??\n (typeof feature.properties?.name === 'string' ? (feature.properties.name as string) : undefined) ??\n String(feature.id ?? '');\n const popupEl = document.createElement('div');\n const title = document.createElement('div');\n title.style.fontWeight = '600';\n title.textContent = name \|\| 'Region';\n popupEl.appendChild(title);\n if (hit) {\n const val = document.createElement('div');\n val.textContent = hit.value.toLocaleString();\n popupEl.appendChild(val);\n }\n lyr.bindPopup(popupEl);\n lyr.on('click', () => clickRef.current({ name, lat: NaN, lng: NaN, value: hit?.value } as MapMarker));\n },\n });\n geoLayer.addTo(layer);\n }\n\n if (showMarkers && heatMode) {\n // Heat-point layer: translucent weighted circles, sized + colored by value.\n const weights = markers.map((mk) => (isFiniteNumber(mk.value) ? mk.value : 1));\n // reduce, not Math.min(...spread) — spreading a large array as args can\n // blow the call-stack (RangeError) for big datasets.\n const minW = weights.reduce((a, b) => Math.min(a, b), Infinity);\n const maxW = weights.reduce((a, b) => Math.max(a, b), -Infinity);\n const spanW = maxW - minW \|\| 1;\n markers.forEach((marker, i) => {\n const norm = (weights[i] - minW) / spanW;\n const circle = L.circleMarker([marker.lat, marker.lng], {\n radius: 10 + norm * 22,\n fillColor: heatColor(norm),\n // Both radius and opacity ramp with intensity for a truer density look.\n fillOpacity: 0.25 + norm * 0.35,\n stroke: false,\n }).addTo(layer);\n circle.bindPopup(buildMarkerPopup(marker));\n circle.on('click', () => clickRef.current(marker));\n });\n } else if (showMarkers) {\n for (const marker of markers) {\n // Build the pin as a DOM element (not an HTML string) so the marker colour\n // is assigned via the style API and can never be interpreted as markup —\n // defense-in-depth alongside safeColor().\n const pin = document.createElement('div');\n Object.assign(pin.style, {\n width: '14px',\n height: '14px',\n borderRadius: '50% 50% 50% 0',\n transform: 'rotate(-45deg)',\n background: safeColor(marker.color),\n border: '2px solid #fff',\n boxShadow: '0 1px 4px rgba(0,0,0,.4)',\n });\n const icon = L.divIcon({\n className: 'bc-map-marker',\n html: pin,\n iconSize: [14, 14],\n iconAnchor: [7, 14],\n });\n const m = L.marker([marker.lat, marker.lng], { icon }).addTo(layer);\n m.bindPopup(buildMarkerPopup(marker));\n m.on('click', () => clickRef.current(marker));\n }\n }\n layer.addTo(map);\n\n // Only (re)frame the view when the framing inputs actually change — otherwise\n // a data-prop reference change (e.g. a refetch returning identical markers)\n // would discard the user's current pan/zoom.\n const frameSig = JSON.stringify({\n m: markers.map((mk) => [mk.lat, mk.lng]),\n c: center ? [center.lat, center.lng] : null,\n z: zoom ?? null,\n fc: fallbackCenter ? [fallbackCenter.lat, fallbackCenter.lng] : null,\n fz: fallbackZoom ?? null,\n g: geoJson ? regionValues.size : 0,\n });\n if (frameSig !== lastFrameSigRef.current) {\n lastFrameSigRef.current = frameSig;\n // Framing priority: data-payload center → frame the markers → frame the\n // choropleth regions → config fallback center → zoom only → world view.\n // Markers/regions win over the config default so a palette-created map frames\n // its data instead of {0,0}.\n if (center) {\n map.setView([center.lat, center.lng], zoom ?? map.getZoom());\n } else if (!markers.length && geoLayer) {\n const b = geoLayer.getBounds();\n if (b.isValid()) map.fitBounds(b, { padding: [24, 24], maxZoom: 12 });\n } else if (markers.length === 1) {\n map.setView([markers[0].lat, markers[0].lng], zoom ?? 8);\n } else if (markers.length > 1) {\n const bounds = L.latLngBounds(markers.map((m) => [m.lat, m.lng] as [number, number]));\n map.fitBounds(bounds, { padding: [32, 32], maxZoom: 12 });\n } else if (fallbackCenter) {\n map.setView([fallbackCenter.lat, fallbackCenter.lng], zoom ?? fallbackZoom ?? map.getZoom());\n } else if (isFiniteNumber(zoom ?? fallbackZoom)) {\n map.setZoom((zoom ?? fallbackZoom) as number);\n }\n }\n\n const resize = window.setTimeout(() => map.invalidateSize(), 0);\n\n return () => {\n window.clearTimeout(resize);\n layer.remove();\n };\n }, [\n markers,\n center,\n zoom,\n fallbackCenter,\n fallbackZoom,\n showMarkers,\n heatMode,\n geoJson,\n regionValues,\n regionIdField,\n ]);\n\n return (\n <div className=\"relative h-full w-full overflow-hidden rounded-lg bg-bg-sunken\">\n <div ref={containerRef} className=\"h-full w-full\" />\n\n {status !== 'error' && markers.length === 0 && !hasChoropleth && (\n <div className=\"pointer-events-none absolute inset-0 z-[500] flex items-center justify-center bg-bg-sunken/70 text-sm text-text-secondary\">\n <div className=\"text-center\">\n <svg\n className=\"mx-auto mb-2 h-12 w-12 text-text-muted\"\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\"\n />\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\"\n />\n </svg>\n <p>No map data</p>\n </div>\n </div>\n )}\n\n {status === 'error' && (\n <div className=\"absolute inset-0 z-[500] flex items-center justify-center bg-bg-sunken px-4 text-center text-sm text-text-secondary\">\n The map needs an internet connection and couldn’t load.\n </div>\n )}\n </div>\n );\n});\n\nexport default MapWidget;\n"],"mappings":"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"}

package/dist/bigconsole/components/widgets/metric-card/MetricCardConfig.js CHANGED Viewed

@@ -1,150 +1,157 @@
 import { memo as e, useCallback as t } from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useI18n as n } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/bigconsole/components/widgets/metric-card/MetricCardConfig.tsx
-var i = e(function({ config: e, onChange: i }) {
-	let a = t((t, n) => {
-		i({
+var a = e(function({ config: e, onChange: a }) {
+	let { t: o } = n(), s = t((t, n) => {
+		a({
 			...e,
 			[t]: n
 		});
-	}, [e, i]);
-	return /* @__PURE__ */ r("div", {
-		className: "space-y-4",
+	}, [e, a]);
+	return /* @__PURE__ */ i("div", {
+		className: "min-w-0 space-y-form-gap",
 		children: [
-			/* @__PURE__ */ r("div", { children: [
-				/* @__PURE__ */ n("label", {
+			/* @__PURE__ */ i("div", { children: [
+				/* @__PURE__ */ r("label", {
 					className: "block text-sm font-medium text-text-primary mb-1",
-					children: "Value Field"
+					children: o("bigconsole.widget.config.metricCard.valueField.label", "Value Field")
 				}),
-				/* @__PURE__ */ n("input", {
+				/* @__PURE__ */ r("input", {
 					type: "text",
 					value: e.valueField || "",
-					onChange: (e) => a("valueField", e.target.value),
-					placeholder: "e.g., totalSales, value, amount",
+					onChange: (e) => s("valueField", e.target.value),
+					placeholder: o("bigconsole.widget.config.metricCard.valueField.placeholder", "e.g., totalSales, value, amount"),
 					className: "\n              w-full px-3 py-2\n              text-sm text-text-primary\n              bg-bg-surface\n              border border-border-default\n              rounded-md\n              focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n            "
 				}),
-				/* @__PURE__ */ n("p", {
+				/* @__PURE__ */ r("p", {
 					className: "text-xs text-text-secondary mt-1",
-					children: "Field name to extract from data (leave empty for auto-detect)"
+					children: o("bigconsole.widget.config.metricCard.valueField.help", "Field name to extract from data (leave empty for auto-detect)")
 				})
 			] }),
-			/* @__PURE__ */ r("div", { children: [/* @__PURE__ */ n("label", {
+			/* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r("label", {
 				className: "block text-sm font-medium text-text-primary mb-1",
-				children: "Subtitle"
-			}), /* @__PURE__ */ n("input", {
+				children: o("bigconsole.widget.config.metricCard.subtitle.label", "Subtitle")
+			}), /* @__PURE__ */ r("input", {
 				type: "text",
 				value: e.subtitle || "",
-				onChange: (e) => a("subtitle", e.target.value),
-				placeholder: "e.g., Total Revenue",
+				onChange: (e) => s("subtitle", e.target.value),
+				placeholder: o("bigconsole.widget.config.metricCard.subtitle.placeholder", "e.g., Total Revenue"),
 				className: "\n              w-full px-3 py-2\n              text-sm text-text-primary\n              bg-bg-surface\n              border border-border-default\n              rounded-md\n              focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n            "
 			})] }),
-			/* @__PURE__ */ r("div", { children: [/* @__PURE__ */ n("label", {
+			/* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r("label", {
 				className: "block text-sm font-medium text-text-primary mb-1",
-				children: "Value Format"
-			}), /* @__PURE__ */ r("select", {
+				children: o("bigconsole.widget.config.metricCard.format.label", "Value Format")
+			}), /* @__PURE__ */ i("select", {
 				value: e.format || "number",
-				onChange: (e) => a("format", e.target.value),
+				onChange: (e) => s("format", e.target.value),
 				className: "\n              w-full px-3 py-2\n              text-sm text-text-primary\n              bg-bg-surface\n              border border-border-default\n              rounded-md\n              focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n            ",
 				children: [
-					/* @__PURE__ */ n("option", {
+					/* @__PURE__ */ r("option", {
 						value: "number",
-						children: "Number"
+						children: o("bigconsole.widget.config.metricCard.format.number", "Number")
 					}),
-					/* @__PURE__ */ n("option", {
+					/* @__PURE__ */ r("option", {
 						value: "currency",
-						children: "Currency"
+						children: o("bigconsole.widget.config.metricCard.format.currency", "Currency")
 					}),
-					/* @__PURE__ */ n("option", {
+					/* @__PURE__ */ r("option", {
 						value: "percentage",
-						children: "Percentage"
+						children: o("bigconsole.widget.config.metricCard.format.percentage", "Percentage")
 					}),
-					/* @__PURE__ */ n("option", {
+					/* @__PURE__ */ r("option", {
 						value: "compact",
-						children: "Compact (1K, 1M)"
+						children: o("bigconsole.widget.config.metricCard.format.compact", "Compact (1K, 1M)")
 					})
 				]
 			})] }),
-			/* @__PURE__ */ r("div", {
-				className: "grid grid-cols-2 gap-3",
-				children: [/* @__PURE__ */ r("div", { children: [/* @__PURE__ */ n("label", {
+			/* @__PURE__ */ i("div", {
+				className: "grid grid-cols-1 gap-3 sm:grid-cols-2",
+				children: [/* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r("label", {
 					className: "block text-sm font-medium text-text-primary mb-1",
-					children: "Prefix"
-				}), /* @__PURE__ */ n("input", {
+					children: o("bigconsole.widget.config.metricCard.prefix.label", "Prefix")
+				}), /* @__PURE__ */ r("input", {
 					type: "text",
 					value: e.prefix || "",
-					onChange: (e) => a("prefix", e.target.value),
-					placeholder: "e.g., $",
+					onChange: (e) => s("prefix", e.target.value),
+					placeholder: o("bigconsole.widget.config.metricCard.prefix.placeholder", "e.g., $"),
 					className: "\n                w-full px-3 py-2\n                text-sm text-text-primary\n                bg-bg-surface\n                border border-border-default\n                rounded-md\n                focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n              "
-				})] }), /* @__PURE__ */ r("div", { children: [/* @__PURE__ */ n("label", {
+				})] }), /* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r("label", {
 					className: "block text-sm font-medium text-text-primary mb-1",
-					children: "Suffix"
-				}), /* @__PURE__ */ n("input", {
+					children: o("bigconsole.widget.config.metricCard.suffix.label", "Suffix")
+				}), /* @__PURE__ */ r("input", {
 					type: "text",
 					value: e.suffix || "",
-					onChange: (e) => a("suffix", e.target.value),
-					placeholder: "e.g., users",
+					onChange: (e) => s("suffix", e.target.value),
+					placeholder: o("bigconsole.widget.config.metricCard.suffix.placeholder", "e.g., users"),
 					className: "\n                w-full px-3 py-2\n                text-sm text-text-primary\n                bg-bg-surface\n                border border-border-default\n                rounded-md\n                focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n              "
 				})] })]
 			}),
-			/* @__PURE__ */ r("div", { children: [/* @__PURE__ */ n("label", {
+			/* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r("label", {
 				className: "block text-sm font-medium text-text-primary mb-1",
-				children: "Comparison Label"
-			}), /* @__PURE__ */ n("input", {
+				children: o("bigconsole.widget.config.metricCard.comparisonLabel.label", "Comparison Label")
+			}), /* @__PURE__ */ r("input", {
 				type: "text",
 				value: e.comparisonLabel || "",
-				onChange: (e) => a("comparisonLabel", e.target.value),
-				placeholder: "e.g., vs last week",
+				onChange: (e) => s("comparisonLabel", e.target.value),
+				placeholder: o("bigconsole.widget.config.metricCard.comparisonLabel.placeholder", "e.g., vs last week"),
 				className: "\n              w-full px-3 py-2\n              text-sm text-text-primary\n              bg-bg-surface\n              border border-border-default\n              rounded-md\n              focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n            "
 			})] }),
-			/* @__PURE__ */ r("div", {
-				className: "space-y-3",
+			/* @__PURE__ */ i("div", {
+				role: "group",
+				"aria-label": "Display options",
+				className: "space-y-3 border-t border-[var(--color-border-subtle)] pt-form-gap",
 				children: [
-					/* @__PURE__ */ r("label", {
+					/* @__PURE__ */ r("p", {
+						className: "text-xs font-bold uppercase tracking-wider text-text-secondary",
+						children: "Display options"
+					}),
+					/* @__PURE__ */ i("label", {
 						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ n("input", {
+						children: [/* @__PURE__ */ r("input", {
 							type: "checkbox",
 							checked: e.showTrend !== !1,
-							onChange: (e) => a("showTrend", e.target.checked),
+							onChange: (e) => s("showTrend", e.target.checked),
 							className: "\n                w-4 h-4\n                text-action-primary-bg\n                bg-bg-surface\n                border-border-default\n                rounded\n                focus:ring-action-primary-bg\n              "
-						}), /* @__PURE__ */ n("span", {
+						}), /* @__PURE__ */ r("span", {
 							className: "text-sm text-text-primary",
-							children: "Show trend indicator"
+							children: o("bigconsole.widget.config.metricCard.showTrend", "Show trend indicator")
 						})]
 					}),
-					/* @__PURE__ */ r("label", {
+					/* @__PURE__ */ i("label", {
 						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ n("input", {
+						children: [/* @__PURE__ */ r("input", {
 							type: "checkbox",
 							checked: e.showComparison !== !1,
-							onChange: (e) => a("showComparison", e.target.checked),
+							onChange: (e) => s("showComparison", e.target.checked),
 							className: "\n                w-4 h-4\n                text-action-primary-bg\n                bg-bg-surface\n                border-border-default\n                rounded\n                focus:ring-action-primary-bg\n              "
-						}), /* @__PURE__ */ n("span", {
+						}), /* @__PURE__ */ r("span", {
 							className: "text-sm text-text-primary",
-							children: "Show comparison badge"
+							children: o("bigconsole.widget.config.metricCard.showComparison", "Show comparison badge")
 						})]
 					}),
-					/* @__PURE__ */ r("label", {
+					/* @__PURE__ */ i("label", {
 						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ n("input", {
+						children: [/* @__PURE__ */ r("input", {
 							type: "checkbox",
 							checked: e.showSparkline !== !1,
-							onChange: (e) => a("showSparkline", e.target.checked),
+							onChange: (e) => s("showSparkline", e.target.checked),
 							className: "\n                w-4 h-4\n                text-action-primary-bg\n                bg-bg-surface\n                border-border-default\n                rounded\n                focus:ring-action-primary-bg\n              "
-						}), /* @__PURE__ */ n("span", {
+						}), /* @__PURE__ */ r("span", {
 							className: "text-sm text-text-primary",
-							children: "Show sparkline chart"
+							children: o("bigconsole.widget.config.metricCard.showSparkline", "Show sparkline chart")
 						})]
 					}),
-					/* @__PURE__ */ r("label", {
+					/* @__PURE__ */ i("label", {
 						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ n("input", {
+						children: [/* @__PURE__ */ r("input", {
 							type: "checkbox",
 							checked: e.positiveIsGood !== !1,
-							onChange: (e) => a("positiveIsGood", e.target.checked),
+							onChange: (e) => s("positiveIsGood", e.target.checked),
 							className: "\n                w-4 h-4\n                text-action-primary-bg\n                bg-bg-surface\n                border-border-default\n                rounded\n                focus:ring-action-primary-bg\n              "
-						}), /* @__PURE__ */ n("span", {
+						}), /* @__PURE__ */ r("span", {
 							className: "text-sm text-text-primary",
-							children: "Positive change is good"
+							children: o("bigconsole.widget.config.metricCard.positiveIsGood", "Positive change is good")
 						})]
 					})
 				]
@@ -153,6 +160,6 @@ var i = e(function({ config: e, onChange: i }) {
 	});
 });
 //#endregion
-export { i as default };
+export { a as default };
 //# sourceMappingURL=MetricCardConfig.js.map

package/dist/bigconsole/components/widgets/metric-card/MetricCardConfig.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MetricCardConfig.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/metric-card/MetricCardConfig.tsx"],"sourcesContent":["/*\n MetricCardConfig Component\n \n Configuration panel for MetricCard widgets.\n /\n\nimport { type FC, memo, useCallback } from 'react';\nimport type { MetricCardConfig as ConfigType } from '../../../types';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface MetricCardConfigProps {\n /* Current configuration /\n config: ConfigType;\n /* Callback when config changes /\n onChange: (config: ConfigType) => void;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const MetricCardConfig: FC<MetricCardConfigProps> = memo(function MetricCardConfig({ config, onChange }) {\n const handleChange = useCallback(\n <K extends keyof ConfigType>(key: K, value: ConfigType[K]) => {\n onChange({ ...config, [key]: value });\n },\n [config, onChange]\n );\n\n return (\n <div className=\"space-y-4\">\n {/ Value Field /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">Value Field</label>\n <input\n type=\"text\"\n value={((config as unknown as Record<string, unknown>).valueField as string) \|\| ''}\n onChange={(e) => handleChange('valueField' as keyof ConfigType, e.target.value as never)}\n placeholder=\"e.g., totalSales, value, amount\"\n className=\"\n w-full px-3 py-2\n text-sm text-text-primary\n bg-bg-surface\n border border-border-default\n rounded-md\n focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n \"\n />\n <p className=\"text-xs text-text-secondary mt-1\">\n Field name to extract from data (leave empty for auto-detect)\n </p>\n </div>\n\n {/ Subtitle /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">Subtitle</label>\n <input\n type=\"text\"\n value={config.subtitle \|\| ''}\n onChange={(e) => handleChange('subtitle', e.target.value)}\n placeholder=\"e.g., Total Revenue\"\n className=\"\n w-full px-3 py-2\n text-sm text-text-primary\n bg-bg-surface\n border border-border-default\n rounded-md\n focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n \"\n />\n </div>\n\n {/ Format /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">Value Format</label>\n <select\n value={config.format \|\| 'number'}\n onChange={(e) => handleChange('format', e.target.value as ConfigType['format'])}\n className=\"\n w-full px-3 py-2\n text-sm text-text-primary\n bg-bg-surface\n border border-border-default\n rounded-md\n focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n \"\n >\n <option value=\"number\">Number</option>\n <option value=\"currency\">Currency</option>\n <option value=\"percentage\">Percentage</option>\n <option value=\"compact\">Compact (1K, 1M)</option>\n </select>\n </div>\n\n {/ Prefix & Suffix /}\n <div className=\"grid grid-cols-2 gap-3\">\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">Prefix</label>\n <input\n type=\"text\"\n value={config.prefix \|\| ''}\n onChange={(e) => handleChange('prefix', e.target.value)}\n placeholder=\"e.g., $\"\n className=\"\n w-full px-3 py-2\n text-sm text-text-primary\n bg-bg-surface\n border border-border-default\n rounded-md\n focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n \"\n />\n </div>\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">Suffix</label>\n <input\n type=\"text\"\n value={config.suffix \|\| ''}\n onChange={(e) => handleChange('suffix', e.target.value)}\n placeholder=\"e.g., users\"\n className=\"\n w-full px-3 py-2\n text-sm text-text-primary\n bg-bg-surface\n border border-border-default\n rounded-md\n focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n \"\n />\n </div>\n </div>\n\n {/ Comparison Label /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">Comparison Label</label>\n <input\n type=\"text\"\n value={config.comparisonLabel \|\| ''}\n onChange={(e) => handleChange('comparisonLabel', e.target.value)}\n placeholder=\"e.g., vs last week\"\n className=\"\n w-full px-3 py-2\n text-sm text-text-primary\n bg-bg-surface\n border border-border-default\n rounded-md\n focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n \"\n />\n </div>\n\n {/ Toggle Options */}\n <div className=\"space-y-3\">\n <label className=\"flex items-center gap-3\">\n <input\n type=\"checkbox\"\n checked={config.showTrend !== false}\n onChange={(e) => handleChange('showTrend', e.target.checked)}\n className=\"\n w-4 h-4\n text-action-primary-bg\n bg-bg-surface\n border-border-default\n rounded\n focus:ring-action-primary-bg\n \"\n />\n <span className=\"text-sm text-text-primary\">Show trend indicator</span>\n </label>\n\n <label className=\"flex items-center gap-3\">\n <input\n type=\"checkbox\"\n checked={config.showComparison !== false}\n onChange={(e) => handleChange('showComparison', e.target.checked)}\n className=\"\n w-4 h-4\n text-action-primary-bg\n bg-bg-surface\n border-border-default\n rounded\n focus:ring-action-primary-bg\n \"\n />\n <span className=\"text-sm text-text-primary\">Show comparison badge</span>\n </label>\n\n <label className=\"flex items-center gap-3\">\n <input\n type=\"checkbox\"\n checked={config.showSparkline !== false}\n onChange={(e) => handleChange('showSparkline', e.target.checked)}\n className=\"\n w-4 h-4\n text-action-primary-bg\n bg-bg-surface\n border-border-default\n rounded\n focus:ring-action-primary-bg\n \"\n />\n <span className=\"text-sm text-text-primary\">Show sparkline chart</span>\n </label>\n\n <label className=\"flex items-center gap-3\">\n <input\n type=\"checkbox\"\n checked={config.positiveIsGood !== false}\n onChange={(e) => handleChange('positiveIsGood', e.target.checked)}\n className=\"\n w-4 h-4\n text-action-primary-bg\n bg-bg-surface\n border-border-default\n rounded\n focus:ring-action-primary-bg\n \"\n />\n <span className=\"text-sm text-text-primary\">Positive change is good</span>\n </label>\n </div>\n </div>\n );\n});\n\nexport default MetricCardConfig;\n"],"mappings":"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"}
1	+ {"version":3,"file":"MetricCardConfig.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/metric-card/MetricCardConfig.tsx"],"sourcesContent":["/*\n MetricCardConfig Component\n \n Configuration panel for MetricCard widgets.\n /\n\nimport { type FC, memo, useCallback } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport type { MetricCardConfig as ConfigType } from '../../../types';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface MetricCardConfigProps {\n /* Current configuration /\n config: ConfigType;\n /* Callback when config changes /\n onChange: (config: ConfigType) => void;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const MetricCardConfig: FC<MetricCardConfigProps> = memo(function MetricCardConfig({ config, onChange }) {\n const { t } = useI18n();\n const handleChange = useCallback(\n <K extends keyof ConfigType>(key: K, value: ConfigType[K]) => {\n onChange({ ...config, [key]: value });\n },\n [config, onChange]\n );\n\n return (\n <div className=\"min-w-0 space-y-form-gap\">\n {/ Value Field /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n {t('bigconsole.widget.config.metricCard.valueField.label', 'Value Field')}\n </label>\n <input\n type=\"text\"\n value={((config as unknown as Record<string, unknown>).valueField as string) \|\| ''}\n onChange={(e) => handleChange('valueField' as keyof ConfigType, e.target.value as never)}\n placeholder={t(\n 'bigconsole.widget.config.metricCard.valueField.placeholder',\n 'e.g., totalSales, value, amount'\n )}\n className=\"\n w-full px-3 py-2\n text-sm text-text-primary\n bg-bg-surface\n border border-border-default\n rounded-md\n focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n \"\n />\n <p className=\"text-xs text-text-secondary mt-1\">\n {t(\n 'bigconsole.widget.config.metricCard.valueField.help',\n 'Field name to extract from data (leave empty for auto-detect)'\n )}\n </p>\n </div>\n\n {/ Subtitle /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n {t('bigconsole.widget.config.metricCard.subtitle.label', 'Subtitle')}\n </label>\n <input\n type=\"text\"\n value={config.subtitle \|\| ''}\n onChange={(e) => handleChange('subtitle', e.target.value)}\n placeholder={t('bigconsole.widget.config.metricCard.subtitle.placeholder', 'e.g., Total Revenue')}\n className=\"\n w-full px-3 py-2\n text-sm text-text-primary\n bg-bg-surface\n border border-border-default\n rounded-md\n focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n \"\n />\n </div>\n\n {/ Format /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n {t('bigconsole.widget.config.metricCard.format.label', 'Value Format')}\n </label>\n <select\n value={config.format \|\| 'number'}\n onChange={(e) => handleChange('format', e.target.value as ConfigType['format'])}\n className=\"\n w-full px-3 py-2\n text-sm text-text-primary\n bg-bg-surface\n border border-border-default\n rounded-md\n focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n \"\n >\n <option value=\"number\">{t('bigconsole.widget.config.metricCard.format.number', 'Number')}</option>\n <option value=\"currency\">{t('bigconsole.widget.config.metricCard.format.currency', 'Currency')}</option>\n <option value=\"percentage\">{t('bigconsole.widget.config.metricCard.format.percentage', 'Percentage')}</option>\n <option value=\"compact\">{t('bigconsole.widget.config.metricCard.format.compact', 'Compact (1K, 1M)')}</option>\n </select>\n </div>\n\n {/ Prefix & Suffix /}\n <div className=\"grid grid-cols-1 gap-3 sm:grid-cols-2\">\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n {t('bigconsole.widget.config.metricCard.prefix.label', 'Prefix')}\n </label>\n <input\n type=\"text\"\n value={config.prefix \|\| ''}\n onChange={(e) => handleChange('prefix', e.target.value)}\n placeholder={t('bigconsole.widget.config.metricCard.prefix.placeholder', 'e.g., $')}\n className=\"\n w-full px-3 py-2\n text-sm text-text-primary\n bg-bg-surface\n border border-border-default\n rounded-md\n focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n \"\n />\n </div>\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n {t('bigconsole.widget.config.metricCard.suffix.label', 'Suffix')}\n </label>\n <input\n type=\"text\"\n value={config.suffix \|\| ''}\n onChange={(e) => handleChange('suffix', e.target.value)}\n placeholder={t('bigconsole.widget.config.metricCard.suffix.placeholder', 'e.g., users')}\n className=\"\n w-full px-3 py-2\n text-sm text-text-primary\n bg-bg-surface\n border border-border-default\n rounded-md\n focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n \"\n />\n </div>\n </div>\n\n {/ Comparison Label /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n {t('bigconsole.widget.config.metricCard.comparisonLabel.label', 'Comparison Label')}\n </label>\n <input\n type=\"text\"\n value={config.comparisonLabel \|\| ''}\n onChange={(e) => handleChange('comparisonLabel', e.target.value)}\n placeholder={t('bigconsole.widget.config.metricCard.comparisonLabel.placeholder', 'e.g., vs last week')}\n className=\"\n w-full px-3 py-2\n text-sm text-text-primary\n bg-bg-surface\n border border-border-default\n rounded-md\n focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n \"\n />\n </div>\n\n {/ Toggle Options /}\n <div\n role=\"group\"\n aria-label=\"Display options\"\n className=\"space-y-3 border-t border-[var(--color-border-subtle)] pt-form-gap\"\n >\n {/ Toggles are a different KIND of control from the field stack above,\n so they get their own labelled group instead of being visually\n identical to it (BOFF-5636). */}\n <p className=\"text-xs font-bold uppercase tracking-wider text-text-secondary\">Display options</p>\n <label className=\"flex items-center gap-3\">\n <input\n type=\"checkbox\"\n checked={config.showTrend !== false}\n onChange={(e) => handleChange('showTrend', e.target.checked)}\n className=\"\n w-4 h-4\n text-action-primary-bg\n bg-bg-surface\n border-border-default\n rounded\n focus:ring-action-primary-bg\n \"\n />\n <span className=\"text-sm text-text-primary\">\n {t('bigconsole.widget.config.metricCard.showTrend', 'Show trend indicator')}\n </span>\n </label>\n\n <label className=\"flex items-center gap-3\">\n <input\n type=\"checkbox\"\n checked={config.showComparison !== false}\n onChange={(e) => handleChange('showComparison', e.target.checked)}\n className=\"\n w-4 h-4\n text-action-primary-bg\n bg-bg-surface\n border-border-default\n rounded\n focus:ring-action-primary-bg\n \"\n />\n <span className=\"text-sm text-text-primary\">\n {t('bigconsole.widget.config.metricCard.showComparison', 'Show comparison badge')}\n </span>\n </label>\n\n <label className=\"flex items-center gap-3\">\n <input\n type=\"checkbox\"\n checked={config.showSparkline !== false}\n onChange={(e) => handleChange('showSparkline', e.target.checked)}\n className=\"\n w-4 h-4\n text-action-primary-bg\n bg-bg-surface\n border-border-default\n rounded\n focus:ring-action-primary-bg\n \"\n />\n <span className=\"text-sm text-text-primary\">\n {t('bigconsole.widget.config.metricCard.showSparkline', 'Show sparkline chart')}\n </span>\n </label>\n\n <label className=\"flex items-center gap-3\">\n <input\n type=\"checkbox\"\n checked={config.positiveIsGood !== false}\n onChange={(e) => handleChange('positiveIsGood', e.target.checked)}\n className=\"\n w-4 h-4\n text-action-primary-bg\n bg-bg-surface\n border-border-default\n rounded\n focus:ring-action-primary-bg\n \"\n />\n <span className=\"text-sm text-text-primary\">\n {t('bigconsole.widget.config.metricCard.positiveIsGood', 'Positive change is good')}\n </span>\n </label>\n </div>\n </div>\n );\n});\n\nexport default MetricCardConfig;\n"],"mappings":"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"}