npm - @burdenoff/microfe-bigconsole - Versions diffs - 2026.1008.11 → 2026.1008.13 - Mend

@burdenoff/microfe-bigconsole 2026.1008.11 → 2026.1008.13

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

package/dist/bigconsole/components/dashboard/CreateDashboardDialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CreateDashboardDialog.js","names":[],"sources":["../../../../src/bigconsole/components/dashboard/CreateDashboardDialog.tsx"],"sourcesContent":["/*\n CreateDashboardDialog Component\n \n Modal dialog for creating a new dashboard with name and description.\n * Uses fe-libs shared UI components and semantic tokens for consistent styling.\n * Phase 2: Added TemplatePicker integration for creating from templates.\n /\n\nimport { type FC, memo, useState, useCallback, useEffect, useRef, type KeyboardEvent } from 'react';\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from '@burdenoff/fe-libs/ui';\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport { Input } from '@burdenoff/fe-libs/ui';\nimport { Textarea } from '@burdenoff/fe-libs/ui';\nimport { Spinner } from '@burdenoff/fe-libs/ui';\nimport { Badge } from '@burdenoff/fe-libs/ui';\nimport { Plus, LayoutDashboard, Copy, X, Tag } from 'lucide-react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { StoreTemplatePicker } from './StoreTemplatePicker';\nimport { TemplateInstallOptions } from './TemplateInstallOptions';\nimport { TemplateLayoutPreview } from './TemplateLayoutPreview';\nimport { templateInputDefaults, templateInputError } from '../../utils/templateInstallInputs';\nimport type { DashboardTemplateContent } from '../../hooks/useStoreDashboardTemplates';\nimport { useActiveContext } from '@burdenoff/fe-libs/shared/providers/shell/ActiveContextProvider';\nimport { Section } from '../common';\nimport { useStoreDashboardTemplates, type StoreDashboardTemplate } from '../../hooks/useStoreDashboardTemplates';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface CreateDashboardDialogProps {\n isOpen: boolean;\n isCreating?: boolean;\n onClose: () => void;\n onCreate: (data: {\n name: string;\n description: string;\n category: string;\n tags?: string[];\n templateId?: string;\n }) => void \| Promise<void>;\n /* Whether to show the template picker option /\n showTemplates?: boolean;\n /\n Called after a store template has been installed. Receives the new\n * dashboard id and how many widgets still need a data source, so the host can\n * navigate and surface the \"connect your data\" prompts.\n /\n onTemplateInstalled?: (result: { dashboardId: string; widgetsNeedingData: number }) => void;\n}\n\ntype CreateMode = 'blank' \| 'template';\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const CreateDashboardDialog: FC<CreateDashboardDialogProps> = memo(function CreateDashboardDialog({\n isOpen,\n isCreating = false,\n onClose,\n onCreate,\n showTemplates = true,\n onTemplateInstalled,\n}) {\n const { t } = useI18n();\n const {\n templates,\n loading: templatesLoading,\n error: templatesError,\n fetchTemplateContent,\n installTemplate,\n } = useStoreDashboardTemplates({ autoLoad: showTemplates });\n const [installing, setInstalling] = useState(false);\n const { workspaceId } = useActiveContext();\n const activeWorkspaceRef = useRef(workspaceId);\n activeWorkspaceRef.current = workspaceId;\n const [templateContent, setTemplateContent] = useState<DashboardTemplateContent \| null>(null);\n const [contentOwner, setContentOwner] = useState<string \| null>(null);\n const [contentLoading, setContentLoading] = useState(false);\n const [dataSinkBindings, setDataSinkBindings] = useState<Record<string, string>>({});\n const [inputValues, setInputValues] = useState<Record<string, unknown>>({});\n const [mode, setMode] = useState<CreateMode>('blank');\n const [name, setName] = useState('');\n const [description, setDescription] = useState('');\n const [tags, setTags] = useState<string[]>([]);\n const [tagInput, setTagInput] = useState('');\n const [selectedTemplate, setSelectedTemplate] = useState<StoreDashboardTemplate \| null>(null);\n const [error, setError] = useState<string \| null>(null);\n const nameInputRef = useRef<HTMLInputElement>(null);\n const ownedContent = contentOwner === `${selectedTemplate?.id}:${workspaceId}` ? templateContent : null;\n\n // Reset form when dialog opens\n useEffect(() => {\n if (isOpen) {\n setMode('blank');\n setName('');\n setDescription('');\n setTags([]);\n setTagInput('');\n setSelectedTemplate(null);\n setError(null);\n setTimeout(() => {\n nameInputRef.current?.focus();\n }, 100);\n }\n }, [isOpen]);\n\n // Handle adding a tag\n const handleAddTag = useCallback(() => {\n const trimmedTag = tagInput.trim().toLowerCase();\n if (trimmedTag && !tags.includes(trimmedTag) && tags.length < 10) {\n setTags((prev) => [...prev, trimmedTag]);\n setTagInput('');\n }\n }, [tagInput, tags]);\n\n useEffect(() => {\n let cancelled = false;\n setTemplateContent(null);\n setDataSinkBindings({});\n setInputValues({});\n setContentLoading(Boolean(selectedTemplate));\n if (!selectedTemplate \|\| !isOpen) return;\n void fetchTemplateContent(selectedTemplate.id).then((content) => {\n if (cancelled) return;\n setTemplateContent(content);\n setContentOwner(`${selectedTemplate.id}:${workspaceId}`);\n setContentLoading(false);\n setInputValues(content ? templateInputDefaults(content.requiredInputs) : {});\n if (!content)\n setError(\n t(\n 'bigconsole.dashboards.createDialog.error.noDefinition',\n 'This template has no dashboard definition attached and cannot be installed.'\n )\n );\n });\n return () => {\n cancelled = true;\n };\n }, [selectedTemplate, fetchTemplateContent, workspaceId, isOpen, t]);\n\n // Handle removing a tag\n const handleRemoveTag = useCallback((tagToRemove: string) => {\n setTags((prev) => prev.filter((tag) => tag !== tagToRemove));\n }, []);\n\n // Handle tag input key press\n const handleTagKeyDown = useCallback(\n (e: KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n handleAddTag();\n } else if (e.key === 'Backspace' && !tagInput && tags.length > 0) {\n // Remove last tag when backspace is pressed on empty input\n setTags((prev) => prev.slice(0, -1));\n }\n },\n [handleAddTag, tagInput, tags.length]\n );\n\n // Handle template selection\n const handleTemplateSelect = useCallback((template: StoreDashboardTemplate) => {\n setSelectedTemplate(template);\n setError(null);\n // Pre-fill name and description from template\n setName(template.name);\n setDescription(template.description \|\| '');\n }, []);\n\n // Handle form submission\n const handleSubmit = useCallback(\n async (e: React.FormEvent) => {\n e.preventDefault();\n\n // For template mode without selection, show error\n if (mode === 'template' && !selectedTemplate) {\n setError(t('bigconsole.dashboards.createDialog.error.selectTemplate', 'Please select a template'));\n return;\n }\n\n const trimmedName = name.trim();\n if (!trimmedName) {\n setError(t('bigconsole.dashboards.createDialog.error.nameRequired', 'Dashboard name is required'));\n nameInputRef.current?.focus();\n return;\n }\n\n if (trimmedName.length < 3) {\n setError(\n t('bigconsole.dashboards.createDialog.error.nameTooShort', 'Dashboard name must be at least 3 characters')\n );\n nameInputRef.current?.focus();\n return;\n }\n\n if (trimmedName.length > 100) {\n setError(\n t('bigconsole.dashboards.createDialog.error.nameTooLong', 'Dashboard name must be less than 100 characters')\n );\n nameInputRef.current?.focus();\n return;\n }\n\n setError(null);\n\n // Store templates are installed here rather than through onCreate: the\n // install carries data-sink bindings and returns which slots are still\n // unconnected, neither of which the plain create path models.\n if (mode === 'template' && selectedTemplate) {\n setInstalling(true);\n try {\n const content = await fetchTemplateContent(selectedTemplate.id);\n if (activeWorkspaceRef.current !== workspaceId) {\n setError(\n t(\n 'bigconsole.dashboards.templateSetup.workspaceChanged',\n 'The workspace changed. Review the template setup before creating your dashboard.'\n )\n );\n return;\n }\n if (!content) {\n setError(\n t(\n 'bigconsole.dashboards.createDialog.error.noDefinition',\n 'This template has no dashboard definition attached and cannot be installed.'\n )\n );\n return;\n }\n\n const inputError = templateInputError(content.requiredInputs, inputValues, t);\n if (inputError) {\n setError(inputError);\n return;\n }\n const result = await installTemplate({\n templateId: selectedTemplate.id,\n templateName: selectedTemplate.name,\n content,\n name: trimmedName,\n description: description.trim(),\n tags,\n dataSinkBindings: Object.entries(dataSinkBindings)\n .filter(([, id]) => id)\n .map(([slot, dataSinkId]) => ({ slot, dataSinkId })),\n inputValues,\n });\n\n if (!result.success) {\n setError(\n result.errorMessage ??\n t('bigconsole.dashboards.createDialog.error.installFailed', 'Failed to create dashboard from template.')\n );\n return;\n }\n\n if (result.dashboardId) {\n onTemplateInstalled?.({\n dashboardId: result.dashboardId,\n widgetsNeedingData: result.widgetsNeedingData,\n });\n }\n onClose();\n } catch (err) {\n setError(\n err instanceof Error\n ? err.message\n : t('bigconsole.dashboards.createDialog.error.installFailed', 'Failed to create dashboard from template.')\n );\n } finally {\n setInstalling(false);\n }\n return;\n }\n\n try {\n await onCreate({\n name: trimmedName,\n description: description.trim(),\n category: 'CUSTOM',\n tags: tags.length > 0 ? tags : undefined,\n });\n } catch (err) {\n setError(\n err instanceof Error\n ? err.message\n : t(\n 'bigconsole.dashboards.createDialog.error.createFailed',\n 'Failed to create dashboard. Please try again.'\n )\n );\n }\n },\n [\n name,\n description,\n tags,\n mode,\n selectedTemplate,\n workspaceId,\n dataSinkBindings,\n inputValues,\n onCreate,\n onClose,\n fetchTemplateContent,\n installTemplate,\n onTemplateInstalled,\n t,\n ]\n );\n\n return (\n <Dialog open={isOpen} onOpenChange={(open) => !open && !isCreating && !installing && onClose()}>\n <DialogContent style={{ maxWidth: mode === 'template' ? '900px' : '480px', width: '100%', padding: 0 }}>\n {/ Header /}\n <DialogHeader style={{ padding: 'var(--space-pagePadding) var(--space-pagePadding) 0' }}>\n <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-formGap)' }}>\n <div\n style={{\n display: 'flex',\n height: 'var(--size-controlHeight-lg)',\n width: 'var(--size-controlHeight-lg)',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n borderRadius: 'var(--radius-card)',\n backgroundColor: 'var(--color-bg-accentSubtle)',\n }}\n >\n <LayoutDashboard\n aria-hidden=\"true\"\n style={{\n height: 'var(--size-icon-lg)',\n width: 'var(--size-icon-lg)',\n color: 'var(--color-action-primary-bg)',\n }}\n />\n </div>\n <div>\n <DialogTitle\n style={{\n fontSize: 'var(--font-size-heading-h4)',\n fontWeight: 'var(--font-weight-bold)',\n color: 'var(--color-text-primary)',\n margin: 0,\n }}\n >\n {t('bigconsole.dashboards.createDialog.title', 'Create New Dashboard')}\n </DialogTitle>\n <DialogDescription\n style={{\n fontSize: 'var(--font-size-body-sm)',\n color: 'var(--color-text-secondary)',\n margin: 'var(--space-controlGap) 0 0 0',\n }}\n >\n {t('bigconsole.dashboards.createDialog.subtitle', 'Create a new dashboard to visualize your data')}\n </DialogDescription>\n </div>\n </div>\n </DialogHeader>\n\n <form onSubmit={handleSubmit}>\n {/ Mode Selection Tabs /}\n {showTemplates && (\n <div style={{ padding: 'var(--space-pagePadding) var(--space-pagePadding) 0' }}>\n <div\n role=\"group\"\n aria-label=\"How to start\"\n style={{\n display: 'flex',\n flexWrap: 'wrap',\n gap: 'var(--space-controlGap)',\n padding: 'var(--space-controlGap)',\n backgroundColor: 'var(--color-bg-sunken)',\n borderRadius: 'var(--radius-button)',\n }}\n >\n <button\n type=\"button\"\n disabled={isCreating \|\| installing}\n onClick={() => {\n setMode('blank');\n setSelectedTemplate(null);\n }}\n style={{\n flex: 1,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n gap: 'var(--space-iconGap)',\n padding: 'var(--space-controlGap) var(--space-formGap)',\n borderRadius: 'var(--radius-button)',\n border: 'none',\n backgroundColor: mode === 'blank' ? 'var(--color-bg-surface)' : 'transparent',\n color: mode === 'blank' ? 'var(--color-text-primary)' : 'var(--color-text-secondary)',\n fontWeight: mode === 'blank' ? 'var(--font-weight-semibold)' : 'var(--font-weight-regular)',\n fontSize: 'var(--font-size-body-sm)',\n cursor: 'pointer',\n boxShadow: mode === 'blank' ? 'var(--shadow-elevation-1)' : 'none',\n transition: 'all 0.15s ease',\n }}\n >\n <Plus style={{ height: 'var(--size-icon-sm)', width: 'var(--size-icon-sm)' }} />\n {t('bigconsole.dashboards.createDialog.tab.blank', 'Blank Dashboard')}\n </button>\n <button\n type=\"button\"\n disabled={isCreating \|\| installing}\n onClick={() => setMode('template')}\n style={{\n flex: 1,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n gap: 'var(--space-iconGap)',\n padding: 'var(--space-controlGap) var(--space-formGap)',\n borderRadius: 'var(--radius-button)',\n border: 'none',\n backgroundColor: mode === 'template' ? 'var(--color-bg-surface)' : 'transparent',\n color: mode === 'template' ? 'var(--color-text-primary)' : 'var(--color-text-secondary)',\n fontWeight: mode === 'template' ? 'var(--font-weight-semibold)' : 'var(--font-weight-regular)',\n fontSize: 'var(--font-size-body-sm)',\n cursor: 'pointer',\n boxShadow: mode === 'template' ? 'var(--shadow-elevation-1)' : 'none',\n transition: 'all 0.15s ease',\n }}\n >\n <Copy style={{ height: 'var(--size-icon-sm)', width: 'var(--size-icon-sm)' }} />\n {t('bigconsole.dashboards.createDialog.tab.template', 'From Template')}\n </button>\n </div>\n </div>\n )}\n\n {/ Template Picker (when in template mode) /}\n {mode === 'template' && (\n <div style={{ padding: 'var(--space-pagePadding)', maxHeight: '400px', overflowY: 'auto' }}>\n <StoreTemplatePicker\n templates={templates}\n loading={templatesLoading}\n error={templatesError}\n selectedTemplateId={selectedTemplate?.id}\n onSelect={handleTemplateSelect}\n />\n </div>\n )}\n\n {mode === 'template' && selectedTemplate && (\n <div style={{ padding: 'var(--space-pagePadding)' }}>\n {contentLoading && <Spinner />}\n {ownedContent && (\n <>\n <TemplateLayoutPreview content={ownedContent} />\n <TemplateInstallOptions\n content={ownedContent}\n bindings={dataSinkBindings}\n onBindingChange={(slot, id) => setDataSinkBindings((current) => ({ ...current, [slot]: id }))}\n inputValues={inputValues}\n onInputChange={(name, value) => setInputValues((current) => ({ ...current, [name]: value }))}\n disabled={isCreating \|\| installing}\n />\n </>\n )}\n </div>\n )}\n\n {/ Form Content /}\n <div style={{ padding: 'var(--space-pagePadding)' }}>\n {/\n The fields carry no surface of their own — the dialog is already a\n raised surface — but they still need a name, so the group is a `bare`\n section. It gives the form a heading screen readers can land on and\n tells the eye where the template picker ends and the form begins.\n /}\n <Section\n headingLevel={3}\n emphasis=\"bare\"\n padding=\"none\"\n title=\"Dashboard details\"\n description=\"Name it now — everything else can change later.\"\n data-testid=\"create-dashboard-details\"\n >\n {/ Name Field /}\n <div style={{ marginBottom: 'var(--space-formGap)' }}>\n <label\n htmlFor=\"dashboard-name\"\n style={{\n display: 'block',\n fontSize: 'var(--font-size-body-sm)',\n fontWeight: 'var(--font-weight-semibold)',\n color: 'var(--color-text-primary)',\n marginBottom: 'var(--space-controlGap)',\n }}\n >\n {t('bigconsole.dashboards.createDialog.field.name', 'Dashboard Name')}\n <span style={{ color: 'var(--color-status-error-text)', marginLeft: 'var(--space-controlGap)' }}>\n \n </span>\n </label>\n <Input\n ref={nameInputRef}\n id=\"dashboard-name\"\n type=\"text\"\n value={name}\n onChange={(e) => {\n setName(e.target.value);\n if (error) setError(null);\n }}\n placeholder={t('bigconsole.dashboards.createDialog.field.namePlaceholder', 'Enter dashboard name')}\n disabled={isCreating \|\| installing}\n style={{\n height: 'var(--size-controlHeight-md)',\n fontSize: 'var(--font-size-body-sm)',\n borderColor: error ? 'var(--color-status-error-border)' : undefined,\n }}\n />\n {error && (\n <p\n style={{\n fontSize: 'var(--font-size-body-sm)',\n color: 'var(--color-status-error-text)',\n marginTop: 'var(--space-controlGap)',\n fontWeight: 'var(--font-weight-medium)',\n }}\n >\n {error}\n </p>\n )}\n </div>\n\n {/* Description Field /}\n <div style={{ marginBottom: 'var(--space-formGap)' }}>\n <label\n htmlFor=\"dashboard-description\"\n style={{\n display: 'block',\n fontSize: 'var(--font-size-body-sm)',\n fontWeight: 'var(--font-weight-semibold)',\n color: 'var(--color-text-primary)',\n marginBottom: 'var(--space-controlGap)',\n }}\n >\n {t('bigconsole.dashboards.createDialog.field.description', 'Description')}\n <span\n style={{\n color: 'var(--color-text-muted)',\n fontWeight: 'var(--font-weight-regular)',\n marginLeft: 'var(--space-controlGap)',\n }}\n >\n {t('bigconsole.dashboards.createDialog.field.optional', '(optional)')}\n </span>\n </label>\n <Textarea\n id=\"dashboard-description\"\n value={description}\n onChange={(e) => setDescription(e.target.value)}\n placeholder={t(\n 'bigconsole.dashboards.createDialog.field.descriptionPlaceholder',\n 'Enter a brief description for this dashboard'\n )}\n rows={3}\n disabled={isCreating \|\| installing}\n style={{\n fontSize: 'var(--font-size-body-sm)',\n resize: 'none',\n }}\n />\n </div>\n\n {/ Tags Field /}\n <div>\n <label\n htmlFor=\"dashboard-tags\"\n style={{\n display: 'flex',\n alignItems: 'center',\n gap: 'var(--space-iconGap)',\n fontSize: 'var(--font-size-body-sm)',\n fontWeight: 'var(--font-weight-semibold)',\n color: 'var(--color-text-primary)',\n marginBottom: 'var(--space-controlGap)',\n }}\n >\n <Tag style={{ height: 'var(--size-icon-sm)', width: 'var(--size-icon-sm)' }} />\n {t('bigconsole.dashboards.createDialog.field.tags', 'Tags')}\n <span\n style={{\n color: 'var(--color-text-muted)',\n fontWeight: 'var(--font-weight-regular)',\n }}\n >\n {t('bigconsole.dashboards.createDialog.field.tagsOptional', '(optional, max 10)')}\n </span>\n </label>\n {/ Tag chips display /}\n {tags.length > 0 && (\n <div\n style={{\n display: 'flex',\n flexWrap: 'wrap',\n gap: 'var(--space-controlGap)',\n marginBottom: 'var(--space-controlGap)',\n }}\n >\n {tags.map((tag) => (\n <Badge\n key={tag}\n variant=\"secondary\"\n style={{\n display: 'flex',\n alignItems: 'center',\n gap: '4px',\n paddingRight: '4px',\n }}\n >\n {tag}\n <button\n type=\"button\"\n onClick={() => handleRemoveTag(tag)}\n disabled={isCreating \|\| installing}\n style={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n background: 'none',\n border: 'none',\n cursor: 'pointer',\n padding: '2px',\n borderRadius: '50%',\n color: 'inherit',\n opacity: 0.7,\n }}\n onMouseOver={(e) => (e.currentTarget.style.opacity = '1')}\n onMouseOut={(e) => (e.currentTarget.style.opacity = '0.7')}\n >\n <X style={{ height: '12px', width: '12px' }} />\n </button>\n </Badge>\n ))}\n </div>\n )}\n {/ Tag input /}\n <div style={{ display: 'flex', gap: 'var(--space-controlGap)' }}>\n <Input\n id=\"dashboard-tags\"\n type=\"text\"\n value={tagInput}\n onChange={(e) => setTagInput(e.target.value)}\n onKeyDown={handleTagKeyDown}\n placeholder={\n tags.length >= 10\n ? t('bigconsole.dashboards.createDialog.field.tagsMaxReached', 'Max tags reached')\n : t(\n 'bigconsole.dashboards.createDialog.field.tagsInputPlaceholder',\n 'Type a tag and press Enter'\n )\n }\n disabled={isCreating \|\| installing \|\| tags.length >= 10}\n style={{\n flex: 1,\n height: 'var(--size-controlHeight-md)',\n fontSize: 'var(--font-size-body-sm)',\n }}\n />\n <Button\n type=\"button\"\n variant=\"outline\"\n onClick={handleAddTag}\n disabled={isCreating \|\| installing \|\| !tagInput.trim() \|\| tags.length >= 10}\n style={{ height: 'var(--size-controlHeight-md)' }}\n >\n {t('bigconsole.dashboards.createDialog.action.addTag', 'Add')}\n </Button>\n </div>\n <p\n style={{\n // `--font-size-body-xs` is not a real token — the declaration is\n // dropped and the hint inherits body size. `--font-size-xs` is.\n fontSize: 'var(--font-size-xs)',\n color: 'var(--color-text-muted)',\n marginTop: 'var(--space-controlGap)',\n }}\n >\n {t('bigconsole.dashboards.createDialog.field.tagsHelp', 'Press Enter to add a tag, or click Add')}\n </p>\n </div>\n </Section>\n </div>\n\n {/ Footer */}\n <DialogFooter\n style={{\n padding: 'var(--space-formGap) var(--space-pagePadding)',\n borderTop: '1px solid var(--color-border)',\n backgroundColor: 'var(--color-bg-sunken)',\n display: 'flex',\n justifyContent: 'flex-end',\n gap: 'var(--space-controlGap)',\n }}\n >\n <Button\n type=\"button\"\n variant=\"outline\"\n onClick={onClose}\n disabled={isCreating \|\| installing}\n style={{ height: 'var(--size-controlHeight-md)' }}\n >\n {t('bigconsole.dashboards.createDialog.action.cancel', 'Cancel')}\n </Button>\n <Button\n type=\"submit\"\n disabled={\n isCreating \|\|\n installing \|\|\n !name.trim() \|\|\n (mode === 'template' && (!selectedTemplate \|\| !ownedContent \|\| contentLoading))\n }\n style={{\n height: 'var(--size-controlHeight-md)',\n backgroundColor: 'var(--color-action-primary-bg)',\n }}\n >\n {isCreating \|\| installing ? (\n <span style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-iconGap)' }}>\n <Spinner style={{ height: 'var(--size-icon-sm)', width: 'var(--size-icon-sm)' }} />\n {t('bigconsole.dashboards.createDialog.action.creating', 'Creating...')}\n </span>\n ) : (\n <span style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-iconGap)' }}>\n <Plus style={{ height: 'var(--size-icon-sm)', width: 'var(--size-icon-sm)' }} />\n {t('bigconsole.dashboards.createDialog.action.create', 'Create Dashboard')}\n </span>\n )}\n </Button>\n </DialogFooter>\n </form>\n </DialogContent>\n </Dialog>\n );\n});\n\nexport default CreateDashboardDialog;\n"],"mappings":"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"}
1	+ {"version":3,"file":"CreateDashboardDialog.js","names":[],"sources":["../../../../src/bigconsole/components/dashboard/CreateDashboardDialog.tsx"],"sourcesContent":["/*\n CreateDashboardDialog Component\n \n Modal dialog for creating a new dashboard with name and description.\n * Uses fe-libs shared UI components and semantic tokens for consistent styling.\n * Phase 2: Added TemplatePicker integration for creating from templates.\n /\n\nimport { type FC, memo, useState, useCallback, useEffect, useRef, type KeyboardEvent } from 'react';\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from '@burdenoff/fe-libs/ui';\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport { Input } from '@burdenoff/fe-libs/ui';\nimport { Textarea } from '@burdenoff/fe-libs/ui';\nimport { Spinner } from '@burdenoff/fe-libs/ui';\nimport { Badge } from '@burdenoff/fe-libs/ui';\nimport { Plus, LayoutDashboard, Copy, X, Tag } from 'lucide-react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { StoreTemplatePicker } from './StoreTemplatePicker';\nimport { TemplateInstallOptions } from './TemplateInstallOptions';\nimport { TemplateLayoutPreview } from './TemplateLayoutPreview';\nimport { templateInputDefaults, templateInputError } from '../../utils/templateInstallInputs';\nimport type { DashboardTemplateContent } from '../../hooks/useStoreDashboardTemplates';\nimport { useActiveContext } from '@burdenoff/fe-libs/shared/providers/shell/ActiveContextProvider';\nimport { Section } from '../common';\nimport { useStoreDashboardTemplates, type StoreDashboardTemplate } from '../../hooks/useStoreDashboardTemplates';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface CreateDashboardDialogProps {\n isOpen: boolean;\n isCreating?: boolean;\n onClose: () => void;\n onCreate: (data: {\n name: string;\n description: string;\n category: string;\n tags?: string[];\n templateId?: string;\n }) => void \| Promise<void>;\n /* Whether to show the template picker option /\n showTemplates?: boolean;\n /\n Called after a store template has been installed. Receives the new\n * dashboard id and how many widgets still need a data source, so the host can\n * navigate and surface the \"connect your data\" prompts.\n /\n onTemplateInstalled?: (result: { dashboardId: string; widgetsNeedingData: number }) => void;\n}\n\ntype CreateMode = 'blank' \| 'template';\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const CreateDashboardDialog: FC<CreateDashboardDialogProps> = memo(function CreateDashboardDialog({\n isOpen,\n isCreating = false,\n onClose,\n onCreate,\n showTemplates = true,\n onTemplateInstalled,\n}) {\n const { t } = useI18n();\n const {\n templates,\n loading: templatesLoading,\n error: templatesError,\n fetchTemplateContent,\n installTemplate,\n } = useStoreDashboardTemplates({ autoLoad: showTemplates });\n const [installing, setInstalling] = useState(false);\n const { workspaceId } = useActiveContext();\n const activeWorkspaceRef = useRef(workspaceId);\n activeWorkspaceRef.current = workspaceId;\n const [templateContent, setTemplateContent] = useState<DashboardTemplateContent \| null>(null);\n const [contentOwner, setContentOwner] = useState<string \| null>(null);\n const [contentLoading, setContentLoading] = useState(false);\n const [dataSinkBindings, setDataSinkBindings] = useState<Record<string, string>>({});\n const [inputValues, setInputValues] = useState<Record<string, unknown>>({});\n const [mode, setMode] = useState<CreateMode>('blank');\n const [name, setName] = useState('');\n const [description, setDescription] = useState('');\n const [tags, setTags] = useState<string[]>([]);\n const [tagInput, setTagInput] = useState('');\n const [selectedTemplate, setSelectedTemplate] = useState<StoreDashboardTemplate \| null>(null);\n const [error, setError] = useState<string \| null>(null);\n const nameInputRef = useRef<HTMLInputElement>(null);\n const ownedContent = contentOwner === `${selectedTemplate?.id}:${workspaceId}` ? templateContent : null;\n\n // Reset form when dialog opens\n useEffect(() => {\n if (isOpen) {\n setMode('blank');\n setName('');\n setDescription('');\n setTags([]);\n setTagInput('');\n setSelectedTemplate(null);\n setError(null);\n setTimeout(() => {\n nameInputRef.current?.focus();\n }, 100);\n }\n }, [isOpen]);\n\n // Handle adding a tag\n const handleAddTag = useCallback(() => {\n const trimmedTag = tagInput.trim().toLowerCase();\n if (trimmedTag && !tags.includes(trimmedTag) && tags.length < 10) {\n setTags((prev) => [...prev, trimmedTag]);\n setTagInput('');\n }\n }, [tagInput, tags]);\n\n useEffect(() => {\n let cancelled = false;\n setTemplateContent(null);\n setDataSinkBindings({});\n setInputValues({});\n setContentLoading(Boolean(selectedTemplate));\n if (!selectedTemplate \|\| !isOpen) return;\n void fetchTemplateContent(selectedTemplate.id).then((content) => {\n if (cancelled) return;\n setTemplateContent(content);\n setContentOwner(`${selectedTemplate.id}:${workspaceId}`);\n setContentLoading(false);\n setInputValues(content ? templateInputDefaults(content.requiredInputs) : {});\n if (!content)\n setError(\n t(\n 'bigconsole.dashboards.createDialog.error.noDefinition',\n 'This template has no dashboard definition attached and cannot be installed.'\n )\n );\n });\n return () => {\n cancelled = true;\n };\n }, [selectedTemplate, fetchTemplateContent, workspaceId, isOpen, t]);\n\n // Handle removing a tag\n const handleRemoveTag = useCallback((tagToRemove: string) => {\n setTags((prev) => prev.filter((tag) => tag !== tagToRemove));\n }, []);\n\n // Handle tag input key press\n const handleTagKeyDown = useCallback(\n (e: KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n handleAddTag();\n } else if (e.key === 'Backspace' && !tagInput && tags.length > 0) {\n // Remove last tag when backspace is pressed on empty input\n setTags((prev) => prev.slice(0, -1));\n }\n },\n [handleAddTag, tagInput, tags.length]\n );\n\n // Handle template selection\n const handleTemplateSelect = useCallback((template: StoreDashboardTemplate) => {\n setSelectedTemplate(template);\n setError(null);\n // Pre-fill name and description from template\n setName(template.name);\n setDescription(template.description \|\| '');\n }, []);\n\n // Handle form submission\n const handleSubmit = useCallback(\n async (e: React.FormEvent) => {\n e.preventDefault();\n\n // For template mode without selection, show error\n if (mode === 'template' && !selectedTemplate) {\n setError(t('bigconsole.dashboards.createDialog.error.selectTemplate', 'Please select a template'));\n return;\n }\n\n const trimmedName = name.trim();\n if (!trimmedName) {\n setError(t('bigconsole.dashboards.createDialog.error.nameRequired', 'Dashboard name is required'));\n nameInputRef.current?.focus();\n return;\n }\n\n if (trimmedName.length < 3) {\n setError(\n t('bigconsole.dashboards.createDialog.error.nameTooShort', 'Dashboard name must be at least 3 characters')\n );\n nameInputRef.current?.focus();\n return;\n }\n\n if (trimmedName.length > 100) {\n setError(\n t('bigconsole.dashboards.createDialog.error.nameTooLong', 'Dashboard name must be less than 100 characters')\n );\n nameInputRef.current?.focus();\n return;\n }\n\n setError(null);\n\n // Store templates are installed here rather than through onCreate: the\n // install carries data-sink bindings and returns which slots are still\n // unconnected, neither of which the plain create path models.\n if (mode === 'template' && selectedTemplate) {\n setInstalling(true);\n try {\n const content = await fetchTemplateContent(selectedTemplate.id);\n if (activeWorkspaceRef.current !== workspaceId) {\n setError(\n t(\n 'bigconsole.dashboards.templateSetup.workspaceChanged',\n 'The workspace changed. Review the template setup before creating your dashboard.'\n )\n );\n return;\n }\n if (!content) {\n setError(\n t(\n 'bigconsole.dashboards.createDialog.error.noDefinition',\n 'This template has no dashboard definition attached and cannot be installed.'\n )\n );\n return;\n }\n\n const inputError = templateInputError(content.requiredInputs, inputValues, t);\n if (inputError) {\n setError(inputError);\n return;\n }\n const result = await installTemplate({\n templateId: selectedTemplate.id,\n templateName: selectedTemplate.name,\n content,\n name: trimmedName,\n description: description.trim(),\n tags,\n dataSinkBindings: Object.entries(dataSinkBindings)\n .filter(([, id]) => id)\n .map(([slot, dataSinkId]) => ({ slot, dataSinkId })),\n inputValues,\n });\n\n if (!result.success) {\n setError(\n result.errorMessage ??\n t('bigconsole.dashboards.createDialog.error.installFailed', 'Failed to create dashboard from template.')\n );\n return;\n }\n\n if (result.dashboardId) {\n onTemplateInstalled?.({\n dashboardId: result.dashboardId,\n widgetsNeedingData: result.widgetsNeedingData,\n });\n }\n onClose();\n } catch (err) {\n setError(\n err instanceof Error\n ? err.message\n : t('bigconsole.dashboards.createDialog.error.installFailed', 'Failed to create dashboard from template.')\n );\n } finally {\n setInstalling(false);\n }\n return;\n }\n\n try {\n await onCreate({\n name: trimmedName,\n description: description.trim(),\n category: 'CUSTOM',\n tags: tags.length > 0 ? tags : undefined,\n });\n } catch (err) {\n setError(\n err instanceof Error\n ? err.message\n : t(\n 'bigconsole.dashboards.createDialog.error.createFailed',\n 'Failed to create dashboard. Please try again.'\n )\n );\n }\n },\n [\n name,\n description,\n tags,\n mode,\n selectedTemplate,\n workspaceId,\n dataSinkBindings,\n inputValues,\n onCreate,\n onClose,\n fetchTemplateContent,\n installTemplate,\n onTemplateInstalled,\n t,\n ]\n );\n\n return (\n <Dialog open={isOpen} onOpenChange={(open) => !open && !isCreating && !installing && onClose()}>\n <DialogContent style={{ maxWidth: mode === 'template' ? '900px' : '480px', width: '100%', padding: 0 }}>\n {/ Header /}\n <DialogHeader style={{ padding: 'var(--space-pagePadding) var(--space-pagePadding) 0' }}>\n <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-formGap)' }}>\n <div\n style={{\n display: 'flex',\n height: 'var(--size-controlHeight-lg)',\n width: 'var(--size-controlHeight-lg)',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n borderRadius: 'var(--radius-card)',\n backgroundColor: 'var(--color-bg-accentSubtle)',\n }}\n >\n <LayoutDashboard\n aria-hidden=\"true\"\n style={{\n height: 'var(--size-icon-lg)',\n width: 'var(--size-icon-lg)',\n color: 'var(--color-action-primary-bg)',\n }}\n />\n </div>\n <div>\n <DialogTitle\n style={{\n fontSize: 'var(--font-size-heading-h4)',\n fontWeight: 'var(--font-weight-bold)',\n color: 'var(--color-text-primary)',\n margin: 0,\n }}\n >\n {t('bigconsole.dashboards.createDialog.title', 'Create New Dashboard')}\n </DialogTitle>\n <DialogDescription\n style={{\n fontSize: 'var(--font-size-body-sm)',\n color: 'var(--color-text-secondary)',\n margin: 'var(--space-controlGap) 0 0 0',\n }}\n >\n {t('bigconsole.dashboards.createDialog.subtitle', 'Create a new dashboard to visualize your data')}\n </DialogDescription>\n </div>\n </div>\n </DialogHeader>\n\n <form onSubmit={handleSubmit}>\n {/ Mode Selection Tabs /}\n {showTemplates && (\n <div style={{ padding: 'var(--space-pagePadding) var(--space-pagePadding) 0' }}>\n <div\n role=\"group\"\n aria-label=\"How to start\"\n style={{\n display: 'flex',\n flexWrap: 'wrap',\n gap: 'var(--space-controlGap)',\n padding: 'var(--space-controlGap)',\n backgroundColor: 'var(--color-bg-sunken)',\n borderRadius: 'var(--radius-button)',\n }}\n >\n <button\n type=\"button\"\n disabled={isCreating \|\| installing}\n onClick={() => {\n setMode('blank');\n setSelectedTemplate(null);\n }}\n style={{\n flex: 1,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n gap: 'var(--space-iconGap)',\n padding: 'var(--space-controlGap) var(--space-formGap)',\n borderRadius: 'var(--radius-button)',\n border: 'none',\n backgroundColor: mode === 'blank' ? 'var(--color-bg-surface)' : 'transparent',\n color: mode === 'blank' ? 'var(--color-text-primary)' : 'var(--color-text-secondary)',\n fontWeight: mode === 'blank' ? 'var(--font-weight-semibold)' : 'var(--font-weight-regular)',\n fontSize: 'var(--font-size-body-sm)',\n cursor: 'pointer',\n boxShadow: mode === 'blank' ? 'var(--shadow-elevation-1)' : 'none',\n transition: 'all 0.15s ease',\n }}\n >\n <Plus style={{ height: 'var(--size-icon-sm)', width: 'var(--size-icon-sm)' }} />\n {t('bigconsole.dashboards.createDialog.tab.blank', 'Blank Dashboard')}\n </button>\n <button\n type=\"button\"\n disabled={isCreating \|\| installing}\n onClick={() => setMode('template')}\n style={{\n flex: 1,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n gap: 'var(--space-iconGap)',\n padding: 'var(--space-controlGap) var(--space-formGap)',\n borderRadius: 'var(--radius-button)',\n border: 'none',\n backgroundColor: mode === 'template' ? 'var(--color-bg-surface)' : 'transparent',\n color: mode === 'template' ? 'var(--color-text-primary)' : 'var(--color-text-secondary)',\n fontWeight: mode === 'template' ? 'var(--font-weight-semibold)' : 'var(--font-weight-regular)',\n fontSize: 'var(--font-size-body-sm)',\n cursor: 'pointer',\n boxShadow: mode === 'template' ? 'var(--shadow-elevation-1)' : 'none',\n transition: 'all 0.15s ease',\n }}\n >\n <Copy style={{ height: 'var(--size-icon-sm)', width: 'var(--size-icon-sm)' }} />\n {t('bigconsole.dashboards.createDialog.tab.template', 'From Template')}\n </button>\n </div>\n </div>\n )}\n\n {/ Template Picker (when in template mode) /}\n {mode === 'template' && (\n <div style={{ padding: 'var(--space-pagePadding)', maxHeight: '400px', overflowY: 'auto' }}>\n <StoreTemplatePicker\n templates={templates}\n loading={templatesLoading}\n error={templatesError}\n selectedTemplateId={selectedTemplate?.id}\n onSelect={handleTemplateSelect}\n />\n </div>\n )}\n\n {mode === 'template' && selectedTemplate && (\n <div style={{ padding: 'var(--space-pagePadding)' }}>\n {contentLoading && <Spinner />}\n {ownedContent && (\n <>\n <TemplateLayoutPreview content={ownedContent} />\n <TemplateInstallOptions\n content={ownedContent}\n bindings={dataSinkBindings}\n onBindingChange={(slot, id) => setDataSinkBindings((current) => ({ ...current, [slot]: id }))}\n inputValues={inputValues}\n onInputChange={(name, value) => setInputValues((current) => ({ ...current, [name]: value }))}\n disabled={isCreating \|\| installing}\n />\n </>\n )}\n </div>\n )}\n\n {/ Form Content /}\n <div style={{ padding: 'var(--space-pagePadding)' }}>\n {/\n The fields carry no surface of their own — the dialog is already a\n raised surface — but they still need a name, so the group is a `bare`\n section. It gives the form a heading screen readers can land on and\n tells the eye where the template picker ends and the form begins.\n /}\n <Section\n headingLevel={3}\n emphasis=\"bare\"\n padding=\"none\"\n title=\"Dashboard details\"\n description=\"Name it now — everything else can change later.\"\n data-testid=\"create-dashboard-details\"\n >\n {/ Name Field /}\n <div style={{ marginBottom: 'var(--space-formGap)' }}>\n <label\n htmlFor=\"dashboard-name\"\n style={{\n display: 'block',\n fontSize: 'var(--font-size-body-sm)',\n fontWeight: 'var(--font-weight-semibold)',\n color: 'var(--color-text-primary)',\n marginBottom: 'var(--space-controlGap)',\n }}\n >\n {t('bigconsole.dashboards.createDialog.field.name', 'Dashboard Name')}\n <span style={{ color: 'var(--color-status-error-text)', marginLeft: 'var(--space-controlGap)' }}>\n \n </span>\n </label>\n <Input\n ref={nameInputRef}\n id=\"dashboard-name\"\n type=\"text\"\n value={name}\n onChange={(e) => {\n setName(e.target.value);\n if (error) setError(null);\n }}\n placeholder={t('bigconsole.dashboards.createDialog.field.namePlaceholder', 'Enter dashboard name')}\n disabled={isCreating \|\| installing}\n style={{\n height: 'var(--size-controlHeight-md)',\n fontSize: 'var(--font-size-body-sm)',\n borderColor: error ? 'var(--color-status-error-border)' : undefined,\n }}\n />\n {error && (\n <p\n style={{\n fontSize: 'var(--font-size-body-sm)',\n color: 'var(--color-status-error-text)',\n marginTop: 'var(--space-controlGap)',\n fontWeight: 'var(--font-weight-medium)',\n }}\n >\n {error}\n </p>\n )}\n </div>\n\n {/* Description Field /}\n <div style={{ marginBottom: 'var(--space-formGap)' }}>\n <label\n htmlFor=\"dashboard-description\"\n style={{\n display: 'block',\n fontSize: 'var(--font-size-body-sm)',\n fontWeight: 'var(--font-weight-semibold)',\n color: 'var(--color-text-primary)',\n marginBottom: 'var(--space-controlGap)',\n }}\n >\n {t('bigconsole.dashboards.createDialog.field.description', 'Description')}\n <span\n style={{\n color: 'var(--color-text-muted)',\n fontWeight: 'var(--font-weight-regular)',\n marginLeft: 'var(--space-controlGap)',\n }}\n >\n {t('bigconsole.dashboards.createDialog.field.optional', '(optional)')}\n </span>\n </label>\n <Textarea\n id=\"dashboard-description\"\n value={description}\n onChange={(e) => setDescription(e.target.value)}\n placeholder={t(\n 'bigconsole.dashboards.createDialog.field.descriptionPlaceholder',\n 'Enter a brief description for this dashboard'\n )}\n rows={3}\n disabled={isCreating \|\| installing}\n style={{\n fontSize: 'var(--font-size-body-sm)',\n resize: 'none',\n }}\n />\n </div>\n\n {/ Tags Field /}\n <div>\n <label\n htmlFor=\"dashboard-tags\"\n style={{\n display: 'flex',\n alignItems: 'center',\n gap: 'var(--space-iconGap)',\n fontSize: 'var(--font-size-body-sm)',\n fontWeight: 'var(--font-weight-semibold)',\n color: 'var(--color-text-primary)',\n marginBottom: 'var(--space-controlGap)',\n }}\n >\n <Tag style={{ height: 'var(--size-icon-sm)', width: 'var(--size-icon-sm)' }} />\n {t('bigconsole.dashboards.createDialog.field.tags', 'Tags')}\n <span\n style={{\n color: 'var(--color-text-muted)',\n fontWeight: 'var(--font-weight-regular)',\n }}\n >\n {t('bigconsole.dashboards.createDialog.field.tagsOptional', '(optional, max 10)')}\n </span>\n </label>\n {/ Tag chips display /}\n {tags.length > 0 && (\n <div\n style={{\n display: 'flex',\n flexWrap: 'wrap',\n gap: 'var(--space-controlGap)',\n marginBottom: 'var(--space-controlGap)',\n }}\n >\n {tags.map((tag) => (\n <Badge\n key={tag}\n variant=\"secondary\"\n style={{\n display: 'flex',\n alignItems: 'center',\n gap: '4px',\n paddingRight: '4px',\n }}\n >\n {tag}\n <button\n type=\"button\"\n onClick={() => handleRemoveTag(tag)}\n disabled={isCreating \|\| installing}\n style={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n background: 'none',\n border: 'none',\n cursor: 'pointer',\n padding: '2px',\n borderRadius: '50%',\n color: 'inherit',\n opacity: 0.7,\n }}\n onMouseOver={(e) => (e.currentTarget.style.opacity = '1')}\n onMouseOut={(e) => (e.currentTarget.style.opacity = '0.7')}\n >\n <X style={{ height: '12px', width: '12px' }} />\n </button>\n </Badge>\n ))}\n </div>\n )}\n {/ Tag input /}\n <div style={{ display: 'flex', gap: 'var(--space-controlGap)' }}>\n <Input\n id=\"dashboard-tags\"\n type=\"text\"\n value={tagInput}\n onChange={(e) => setTagInput(e.target.value)}\n onKeyDown={handleTagKeyDown}\n placeholder={\n tags.length >= 10\n ? t('bigconsole.dashboards.createDialog.field.tagsMaxReached', 'Max tags reached')\n : t(\n 'bigconsole.dashboards.createDialog.field.tagsInputPlaceholder',\n 'Type a tag and press Enter'\n )\n }\n disabled={isCreating \|\| installing \|\| tags.length >= 10}\n style={{\n flex: 1,\n height: 'var(--size-controlHeight-md)',\n fontSize: 'var(--font-size-body-sm)',\n }}\n />\n <Button\n type=\"button\"\n variant=\"outline\"\n onClick={handleAddTag}\n disabled={isCreating \|\| installing \|\| !tagInput.trim() \|\| tags.length >= 10}\n style={{ height: 'var(--size-controlHeight-md)' }}\n >\n {t('bigconsole.dashboards.createDialog.action.addTag', 'Add')}\n </Button>\n </div>\n <p\n style={{\n // `--font-size-body-xs` is not a real token — the declaration is\n // dropped and the hint inherits body size. `--font-size-xs` is.\n fontSize: 'var(--font-size-xs)',\n color: 'var(--color-text-muted)',\n marginTop: 'var(--space-controlGap)',\n }}\n >\n {t('bigconsole.dashboards.createDialog.field.tagsHelp', 'Press Enter to add a tag, or click Add')}\n </p>\n </div>\n </Section>\n </div>\n\n {/ Footer */}\n <DialogFooter\n style={{\n padding: 'var(--space-formGap) var(--space-pagePadding)',\n borderTop: '1px solid var(--color-border)',\n backgroundColor: 'var(--color-bg-sunken)',\n display: 'flex',\n justifyContent: 'flex-end',\n gap: 'var(--space-controlGap)',\n }}\n >\n <Button\n type=\"button\"\n variant=\"outline\"\n onClick={onClose}\n disabled={isCreating \|\| installing}\n style={{ height: 'var(--size-controlHeight-md)' }}\n >\n {t('bigconsole.dashboards.createDialog.action.cancel', 'Cancel')}\n </Button>\n <Button\n type=\"submit\"\n disabled={\n isCreating \|\|\n installing \|\|\n !name.trim() \|\|\n (mode === 'template' && (!selectedTemplate \|\| !ownedContent \|\| contentLoading))\n }\n style={{\n height: 'var(--size-controlHeight-md)',\n backgroundColor: 'var(--color-action-primary-bg)',\n }}\n >\n {isCreating \|\| installing ? (\n <span style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-iconGap)' }}>\n <Spinner style={{ height: 'var(--size-icon-sm)', width: 'var(--size-icon-sm)' }} />\n {t('bigconsole.dashboards.createDialog.action.creating', 'Creating...')}\n </span>\n ) : (\n <span style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-iconGap)' }}>\n <Plus style={{ height: 'var(--size-icon-sm)', width: 'var(--size-icon-sm)' }} />\n {t('bigconsole.dashboards.createDialog.action.create', 'Create Dashboard')}\n </span>\n )}\n </Button>\n </DialogFooter>\n </form>\n </DialogContent>\n </Dialog>\n );\n});\n\nexport default CreateDashboardDialog;\n"],"mappings":";;;;;;;;;;;;;;AAgEA,IAAa,IAAwD,EAAK,SAA+B,EACvG,WACA,gBAAa,IACb,YACA,aACA,mBAAgB,IAChB,0BACC;CACD,IAAM,EAAE,SAAM,IAAS,EACjB,EACJ,eACA,SAAS,IACT,OAAO,GACP,yBACA,uBACE,GAA2B,EAAE,UAAU,GAAe,CAAC,EACrD,CAAC,GAAY,KAAiB,EAAS,GAAM,EAC7C,EAAE,mBAAgB,IAAkB,EACpC,IAAqB,EAAO,EAAY;AAC9C,GAAmB,UAAU;CAC7B,IAAM,CAAC,IAAiB,KAAsB,EAA0C,KAAK,EACvF,CAAC,IAAc,MAAmB,EAAwB,KAAK,EAC/D,CAAC,GAAgB,KAAqB,EAAS,GAAM,EACrD,CAAC,GAAkB,KAAuB,EAAiC,EAAE,CAAC,EAC9E,CAAC,GAAa,KAAkB,EAAkC,EAAE,CAAC,EACrE,CAAC,GAAM,KAAW,EAAqB,QAAQ,EAC/C,CAAC,GAAM,KAAW,EAAS,GAAG,EAC9B,CAAC,GAAa,KAAkB,EAAS,GAAG,EAC5C,CAAC,GAAM,KAAW,EAAmB,EAAE,CAAC,EACxC,CAAC,GAAU,KAAe,EAAS,GAAG,EACtC,CAAC,GAAkB,KAAuB,EAAwC,KAAK,EACvF,CAAC,GAAO,KAAY,EAAwB,KAAK,EACjD,IAAe,EAAyB,KAAK,EAC7C,IAAe,OAAiB,GAAG,GAAkB,GAAG,GAAG,MAAgB,KAAkB;AAGnG,SAAgB;AACd,EAAI,MACF,EAAQ,QAAQ,EAChB,EAAQ,GAAG,EACX,EAAe,GAAG,EAClB,EAAQ,EAAE,CAAC,EACX,EAAY,GAAG,EACf,EAAoB,KAAK,EACzB,EAAS,KAAK,EACd,iBAAiB;AACf,KAAa,SAAS,OAAO;KAC5B,IAAI;IAER,CAAC,EAAO,CAAC;CAGZ,IAAM,IAAe,QAAkB;EACrC,IAAM,IAAa,EAAS,MAAM,CAAC,aAAa;AAChD,EAAI,KAAc,CAAC,EAAK,SAAS,EAAW,IAAI,EAAK,SAAS,OAC5D,GAAS,MAAS,CAAC,GAAG,GAAM,EAAW,CAAC,EACxC,EAAY,GAAG;IAEhB,CAAC,GAAU,EAAK,CAAC;AAEpB,SAAgB;EACd,IAAI,IAAY;AAChB,QAAmB,KAAK,EACxB,EAAoB,EAAE,CAAC,EACvB,EAAe,EAAE,CAAC,EAClB,EAAkB,EAAQ,EAAkB,EACxC,GAAC,KAAoB,CAAC,GAe1B,QAdK,EAAqB,EAAiB,GAAG,CAAC,MAAM,MAAY;AAC3D,SACJ,EAAmB,EAAQ,EAC3B,GAAgB,GAAG,EAAiB,GAAG,GAAG,IAAc,EACxD,EAAkB,GAAM,EACxB,EAAe,IAAU,GAAsB,EAAQ,eAAe,GAAG,EAAE,CAAC,EACvE,KACH,EACE,EACE,yDACA,8EACD,CACF;IACH,QACW;AACX,OAAY;;IAEb;EAAC;EAAkB;EAAsB;EAAa;EAAQ;EAAE,CAAC;CAGpE,IAAM,KAAkB,GAAa,MAAwB;AAC3D,KAAS,MAAS,EAAK,QAAQ,MAAQ,MAAQ,EAAY,CAAC;IAC3D,EAAE,CAAC,EAGA,KAAmB,GACtB,MAAuC;AACtC,EAAI,EAAE,QAAQ,WACZ,EAAE,gBAAgB,EAClB,GAAc,IACL,EAAE,QAAQ,eAAe,CAAC,KAAY,EAAK,SAAS,KAE7D,GAAS,MAAS,EAAK,MAAM,GAAG,GAAG,CAAC;IAGxC;EAAC;EAAc;EAAU,EAAK;EAAO,CACtC,EAGK,KAAuB,GAAa,MAAqC;AAK7E,EAJA,EAAoB,EAAS,EAC7B,EAAS,KAAK,EAEd,EAAQ,EAAS,KAAK,EACtB,EAAe,EAAS,eAAe,GAAG;IACzC,EAAE,CAAC,EAGA,KAAe,EACnB,OAAO,MAAuB;AAI5B,MAHA,EAAE,gBAAgB,EAGd,MAAS,cAAc,CAAC,GAAkB;AAC5C,KAAS,EAAE,2DAA2D,2BAA2B,CAAC;AAClG;;EAGF,IAAM,IAAc,EAAK,MAAM;AAC/B,MAAI,CAAC,GAAa;AAEhB,GADA,EAAS,EAAE,yDAAyD,6BAA6B,CAAC,EAClG,EAAa,SAAS,OAAO;AAC7B;;AAGF,MAAI,EAAY,SAAS,GAAG;AAI1B,GAHA,EACE,EAAE,yDAAyD,+CAA+C,CAC3G,EACD,EAAa,SAAS,OAAO;AAC7B;;AAGF,MAAI,EAAY,SAAS,KAAK;AAI5B,GAHA,EACE,EAAE,wDAAwD,kDAAkD,CAC7G,EACD,EAAa,SAAS,OAAO;AAC7B;;AAQF,MALA,EAAS,KAAK,EAKV,MAAS,cAAc,GAAkB;AAC3C,KAAc,GAAK;AACnB,OAAI;IACF,IAAM,IAAU,MAAM,EAAqB,EAAiB,GAAG;AAC/D,QAAI,EAAmB,YAAY,GAAa;AAC9C,OACE,EACE,wDACA,mFACD,CACF;AACD;;AAEF,QAAI,CAAC,GAAS;AACZ,OACE,EACE,yDACA,8EACD,CACF;AACD;;IAGF,IAAM,IAAa,GAAmB,EAAQ,gBAAgB,GAAa,EAAE;AAC7E,QAAI,GAAY;AACd,OAAS,EAAW;AACpB;;IAEF,IAAM,IAAS,MAAM,EAAgB;KACnC,YAAY,EAAiB;KAC7B,cAAc,EAAiB;KAC/B;KACA,MAAM;KACN,aAAa,EAAY,MAAM;KAC/B;KACA,kBAAkB,OAAO,QAAQ,EAAiB,CAC/C,QAAQ,GAAG,OAAQ,EAAG,CACtB,KAAK,CAAC,GAAM,QAAiB;MAAE;MAAM;MAAY,EAAE;KACtD;KACD,CAAC;AAEF,QAAI,CAAC,EAAO,SAAS;AACnB,OACE,EAAO,gBACL,EAAE,0DAA0D,4CAA4C,CAC3G;AACD;;AASF,IANI,EAAO,eACT,IAAsB;KACpB,aAAa,EAAO;KACpB,oBAAoB,EAAO;KAC5B,CAAC,EAEJ,GAAS;YACF,GAAK;AACZ,MACE,aAAe,QACX,EAAI,UACJ,EAAE,0DAA0D,4CAA4C,CAC7G;aACO;AACR,MAAc,GAAM;;AAEtB;;AAGF,MAAI;AACF,SAAM,EAAS;IACb,MAAM;IACN,aAAa,EAAY,MAAM;IAC/B,UAAU;IACV,MAAM,EAAK,SAAS,IAAI,IAAO,KAAA;IAChC,CAAC;WACK,GAAK;AACZ,KACE,aAAe,QACX,EAAI,UACJ,EACE,yDACA,gDACD,CACN;;IAGL;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AAED,QACE,kBAAC,IAAD;EAAQ,MAAM;EAAQ,eAAe,MAAS,CAAC,KAAQ,CAAC,KAAc,CAAC,KAAc,GAAS;YAC5F,kBAAC,IAAD;GAAe,OAAO;IAAE,UAAU,MAAS,aAAa,UAAU;IAAS,OAAO;IAAQ,SAAS;IAAG;aAAtG,CAEE,kBAAC,IAAD;IAAc,OAAO,EAAE,SAAS,uDAAuD;cACrF,kBAAC,OAAD;KAAK,OAAO;MAAE,SAAS;MAAQ,YAAY;MAAU,KAAK;MAAwB;eAAlF,CACE,kBAAC,OAAD;MACE,OAAO;OACL,SAAS;OACT,QAAQ;OACR,OAAO;OACP,YAAY;OACZ,gBAAgB;OAChB,YAAY;OACZ,cAAc;OACd,iBAAiB;OAClB;gBAED,kBAAC,IAAD;OACE,eAAY;OACZ,OAAO;QACL,QAAQ;QACR,OAAO;QACP,OAAO;QACR;OACD,CAAA;MACE,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,GAAD;MACE,OAAO;OACL,UAAU;OACV,YAAY;OACZ,OAAO;OACP,QAAQ;OACT;gBAEA,EAAE,4CAA4C,uBAAuB;MAC1D,CAAA,EACd,kBAAC,IAAD;MACE,OAAO;OACL,UAAU;OACV,OAAO;OACP,QAAQ;OACT;gBAEA,EAAE,+CAA+C,gDAAgD;MAChF,CAAA,CAChB,EAAA,CAAA,CACF;;IACO,CAAA,EAEf,kBAAC,QAAD;IAAM,UAAU;cAAhB;KAEG,KACC,kBAAC,OAAD;MAAK,OAAO,EAAE,SAAS,uDAAuD;gBAC5E,kBAAC,OAAD;OACE,MAAK;OACL,cAAW;OACX,OAAO;QACL,SAAS;QACT,UAAU;QACV,KAAK;QACL,SAAS;QACT,iBAAiB;QACjB,cAAc;QACf;iBAVH,CAYE,kBAAC,UAAD;QACE,MAAK;QACL,UAAU,KAAc;QACxB,eAAe;AAEb,SADA,EAAQ,QAAQ,EAChB,EAAoB,KAAK;;QAE3B,OAAO;SACL,MAAM;SACN,SAAS;SACT,YAAY;SACZ,gBAAgB;SAChB,KAAK;SACL,SAAS;SACT,cAAc;SACd,QAAQ;SACR,iBAAiB,MAAS,UAAU,4BAA4B;SAChE,OAAO,MAAS,UAAU,8BAA8B;SACxD,YAAY,MAAS,UAAU,gCAAgC;SAC/D,UAAU;SACV,QAAQ;SACR,WAAW,MAAS,UAAU,8BAA8B;SAC5D,YAAY;SACb;kBAvBH,CAyBE,kBAAC,GAAD,EAAM,OAAO;SAAE,QAAQ;SAAuB,OAAO;SAAuB,EAAI,CAAA,EAC/E,EAAE,gDAAgD,kBAAkB,CAC9D;WACT,kBAAC,UAAD;QACE,MAAK;QACL,UAAU,KAAc;QACxB,eAAe,EAAQ,WAAW;QAClC,OAAO;SACL,MAAM;SACN,SAAS;SACT,YAAY;SACZ,gBAAgB;SAChB,KAAK;SACL,SAAS;SACT,cAAc;SACd,QAAQ;SACR,iBAAiB,MAAS,aAAa,4BAA4B;SACnE,OAAO,MAAS,aAAa,8BAA8B;SAC3D,YAAY,MAAS,aAAa,gCAAgC;SAClE,UAAU;SACV,QAAQ;SACR,WAAW,MAAS,aAAa,8BAA8B;SAC/D,YAAY;SACb;kBApBH,CAsBE,kBAAC,IAAD,EAAM,OAAO;SAAE,QAAQ;SAAuB,OAAO;SAAuB,EAAI,CAAA,EAC/E,EAAE,mDAAmD,gBAAgB,CAC/D;UACL;;MACF,CAAA;KAIP,MAAS,cACR,kBAAC,OAAD;MAAK,OAAO;OAAE,SAAS;OAA4B,WAAW;OAAS,WAAW;OAAQ;gBACxF,kBAAC,GAAD;OACa;OACX,SAAS;OACT,OAAO;OACP,oBAAoB,GAAkB;OACtC,UAAU;OACV,CAAA;MACE,CAAA;KAGP,MAAS,cAAc,KACtB,kBAAC,OAAD;MAAK,OAAO,EAAE,SAAS,4BAA4B;gBAAnD,CACG,KAAkB,kBAAC,GAAD,EAAW,CAAA,EAC7B,KACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAuB,SAAS,GAAgB,CAAA,EAChD,kBAAC,GAAD;OACE,SAAS;OACT,UAAU;OACV,kBAAkB,GAAM,MAAO,GAAqB,OAAa;QAAE,GAAG;SAAU,IAAO;QAAI,EAAE;OAChF;OACb,gBAAgB,GAAM,MAAU,GAAgB,OAAa;QAAE,GAAG;SAAU,IAAO;QAAO,EAAE;OAC5F,UAAU,KAAc;OACxB,CAAA,CACD,EAAA,CAAA,CAED;;KAIR,kBAAC,OAAD;MAAK,OAAO,EAAE,SAAS,4BAA4B;gBAOjD,kBAAC,GAAD;OACE,cAAc;OACd,UAAS;OACT,SAAQ;OACR,OAAM;OACN,aAAY;OACZ,eAAY;iBANd;QASE,kBAAC,OAAD;SAAK,OAAO,EAAE,cAAc,wBAAwB;mBAApD;UACE,kBAAC,SAAD;WACE,SAAQ;WACR,OAAO;YACL,SAAS;YACT,UAAU;YACV,YAAY;YACZ,OAAO;YACP,cAAc;YACf;qBARH,CAUG,EAAE,iDAAiD,iBAAiB,EACrE,kBAAC,QAAD;YAAM,OAAO;aAAE,OAAO;aAAkC,YAAY;aAA2B;sBAAE;YAE1F,CAAA,CACD;;UACR,kBAAC,GAAD;WACE,KAAK;WACL,IAAG;WACH,MAAK;WACL,OAAO;WACP,WAAW,MAAM;AAEf,YADA,EAAQ,EAAE,OAAO,MAAM,EACnB,KAAO,EAAS,KAAK;;WAE3B,aAAa,EAAE,4DAA4D,uBAAuB;WAClG,UAAU,KAAc;WACxB,OAAO;YACL,QAAQ;YACR,UAAU;YACV,aAAa,IAAQ,qCAAqC,KAAA;YAC3D;WACD,CAAA;UACD,KACC,kBAAC,KAAD;WACE,OAAO;YACL,UAAU;YACV,OAAO;YACP,WAAW;YACX,YAAY;YACb;qBAEA;WACC,CAAA;UAEF;;QAGN,kBAAC,OAAD;SAAK,OAAO,EAAE,cAAc,wBAAwB;mBAApD,CACE,kBAAC,SAAD;UACE,SAAQ;UACR,OAAO;WACL,SAAS;WACT,UAAU;WACV,YAAY;WACZ,OAAO;WACP,cAAc;WACf;oBARH,CAUG,EAAE,wDAAwD,cAAc,EACzE,kBAAC,QAAD;WACE,OAAO;YACL,OAAO;YACP,YAAY;YACZ,YAAY;YACb;qBAEA,EAAE,qDAAqD,aAAa;WAChE,CAAA,CACD;aACR,kBAAC,IAAD;UACE,IAAG;UACH,OAAO;UACP,WAAW,MAAM,EAAe,EAAE,OAAO,MAAM;UAC/C,aAAa,EACX,mEACA,+CACD;UACD,MAAM;UACN,UAAU,KAAc;UACxB,OAAO;WACL,UAAU;WACV,QAAQ;WACT;UACD,CAAA,CACE;;QAGN,kBAAC,OAAD,EAAA,UAAA;SACE,kBAAC,SAAD;UACE,SAAQ;UACR,OAAO;WACL,SAAS;WACT,YAAY;WACZ,KAAK;WACL,UAAU;WACV,YAAY;WACZ,OAAO;WACP,cAAc;WACf;oBAVH;WAYE,kBAAC,IAAD,EAAK,OAAO;YAAE,QAAQ;YAAuB,OAAO;YAAuB,EAAI,CAAA;WAC9E,EAAE,iDAAiD,OAAO;WAC3D,kBAAC,QAAD;YACE,OAAO;aACL,OAAO;aACP,YAAY;aACb;sBAEA,EAAE,yDAAyD,qBAAqB;YAC5E,CAAA;WACD;;SAEP,EAAK,SAAS,KACb,kBAAC,OAAD;UACE,OAAO;WACL,SAAS;WACT,UAAU;WACV,KAAK;WACL,cAAc;WACf;oBAEA,EAAK,KAAK,MACT,kBAAC,IAAD;WAEE,SAAQ;WACR,OAAO;YACL,SAAS;YACT,YAAY;YACZ,KAAK;YACL,cAAc;YACf;qBARH,CAUG,GACD,kBAAC,UAAD;YACE,MAAK;YACL,eAAe,GAAgB,EAAI;YACnC,UAAU,KAAc;YACxB,OAAO;aACL,SAAS;aACT,YAAY;aACZ,gBAAgB;aAChB,YAAY;aACZ,QAAQ;aACR,QAAQ;aACR,SAAS;aACT,cAAc;aACd,OAAO;aACP,SAAS;aACV;YACD,cAAc,MAAO,EAAE,cAAc,MAAM,UAAU;YACrD,aAAa,MAAO,EAAE,cAAc,MAAM,UAAU;sBAEpD,kBAAC,IAAD,EAAG,OAAO;aAAE,QAAQ;aAAQ,OAAO;aAAQ,EAAI,CAAA;YACxC,CAAA,CACH;aA/BD,EA+BC,CACR;UACE,CAAA;SAGR,kBAAC,OAAD;UAAK,OAAO;WAAE,SAAS;WAAQ,KAAK;WAA2B;oBAA/D,CACE,kBAAC,GAAD;WACE,IAAG;WACH,MAAK;WACL,OAAO;WACP,WAAW,MAAM,EAAY,EAAE,OAAO,MAAM;WAC5C,WAAW;WACX,aACE,EAAK,UAAU,KACX,EAAE,2DAA2D,mBAAmB,GAChF,EACE,iEACA,6BACD;WAEP,UAAU,KAAc,KAAc,EAAK,UAAU;WACrD,OAAO;YACL,MAAM;YACN,QAAQ;YACR,UAAU;YACX;WACD,CAAA,EACF,kBAAC,GAAD;WACE,MAAK;WACL,SAAQ;WACR,SAAS;WACT,UAAU,KAAc,KAAc,CAAC,EAAS,MAAM,IAAI,EAAK,UAAU;WACzE,OAAO,EAAE,QAAQ,gCAAgC;qBAEhD,EAAE,oDAAoD,MAAM;WACtD,CAAA,CACL;;SACN,kBAAC,KAAD;UACE,OAAO;WAGL,UAAU;WACV,OAAO;WACP,WAAW;WACZ;oBAEA,EAAE,qDAAqD,yCAAyC;UAC/F,CAAA;SACA,EAAA,CAAA;QACE;;MACN,CAAA;KAGN,kBAAC,IAAD;MACE,OAAO;OACL,SAAS;OACT,WAAW;OACX,iBAAiB;OACjB,SAAS;OACT,gBAAgB;OAChB,KAAK;OACN;gBARH,CAUE,kBAAC,GAAD;OACE,MAAK;OACL,SAAQ;OACR,SAAS;OACT,UAAU,KAAc;OACxB,OAAO,EAAE,QAAQ,gCAAgC;iBAEhD,EAAE,oDAAoD,SAAS;OACzD,CAAA,EACT,kBAAC,GAAD;OACE,MAAK;OACL,UACE,KACA,KACA,CAAC,EAAK,MAAM,IACX,MAAS,eAAe,CAAC,KAAoB,CAAC,KAAgB;OAEjE,OAAO;QACL,QAAQ;QACR,iBAAiB;QAClB;iBAEA,KAAc,IACb,kBAAC,QAAD;QAAM,OAAO;SAAE,SAAS;SAAQ,YAAY;SAAU,KAAK;SAAwB;kBAAnF,CACE,kBAAC,GAAD,EAAS,OAAO;SAAE,QAAQ;SAAuB,OAAO;SAAuB,EAAI,CAAA,EAClF,EAAE,sDAAsD,cAAc,CAClE;YAEP,kBAAC,QAAD;QAAM,OAAO;SAAE,SAAS;SAAQ,YAAY;SAAU,KAAK;SAAwB;kBAAnF,CACE,kBAAC,GAAD,EAAM,OAAO;SAAE,QAAQ;SAAuB,OAAO;SAAuB,EAAI,CAAA,EAC/E,EAAE,oDAAoD,mBAAmB,CACrE;;OAEF,CAAA,CACI;;KACV;MACO;;EACT,CAAA;EAEX"}

package/dist/bigconsole/components/dashboard/DashboardCanvas.js CHANGED Viewed

@@ -33,8 +33,8 @@ import { memo as p, useCallback as m, useEffect as de, useMemo as fe, useRef as
 import { usePermissions as pe } from "@burdenoff/fe-libs/shared/providers/shell";
 import { Plus as me } from "lucide-react";
 import { Button as _ } from "@burdenoff/fe-libs/ui";
-import { jsx as v, jsxs as y } from "react/jsx-runtime";
 import { useI18n as he } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
 //#region src/bigconsole/components/dashboard/DashboardCanvas.tsx
 var b = p(function({ dashboardId: p, pageId: b, title: x, onPaste: ge, onSave: _e, isSaving: ve = !1, onExport: ye, onPublishTemplate: be, pages: S = [], activePageId: xe, onPageChange: Se, onPagesReorder: C, onPageAdd: Ce, onPageRename: we, onPageDuplicate: Te, onPageDelete: Ee, showFilters: De = !0, showPageTabs: Oe = !0, enableCrossFilter: ke = !0 }) {
 	let { t: w } = he(), T = h(null), E = h(null), [D, Ae] = g(1200), [je, O] = g(!1), [k, A] = g(null), [j, M] = g(!1), [Me, N] = g(null), [P, Ne] = g(null), F = t((e) => e.viewMode === "edit"), I = t((e) => e.currentDashboard), L = I?.pages.find((e) => e.id === b)?.gridColumns ?? 12, { updateDashboard: R } = c({ skipFetch: !0 }), { hasPermission: Pe } = pe(), Fe = Pe(u.DASHBOARD_UPDATE), Ie = P?.id === p ? P.value : I?.id === p ? I.visibility : void 0, Le = m(async (e) => {
@@ -62,7 +62,7 @@ var b = p(function({ dashboardId: p, pageId: b, title: x, onPaste: ge, onSave: _
 	}, [K]), { createWidget: q } = s(b, p, { skipFetch: !0 }), J = e((e) => e.widgets), Y = fe(() => {
 		let e = Array.from(J.values());
 		return b ? e.filter((e) => e.pageId === b) : e;
-	}, [J, b]), He = e((e) => e.selectedWidgetId), X = e((e) => e.selectWidget), Z = e((e) => e.addWidget), Q = e((e) => e.updateWidgetPosition), Ue = e((e) => e.configPanelOpen), We = e((e) => e.closeConfigPanel);
+	}, [J, b]), He = e((e) => e.selectedWidgetId), X = e((e) => e.selectWidget), Ue = e((e) => e.addWidget), Z = e((e) => e.updateWidgetPosition), We = e((e) => e.configPanelOpen), Ge = e((e) => e.closeConfigPanel);
 	de(() => {
 		let e = T.current;
 		if (!e) return;
@@ -75,18 +75,18 @@ var b = p(function({ dashboardId: p, pageId: b, title: x, onPaste: ge, onSave: _
 		}
 		return window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
 	}, []);
-	let Ge = m((e) => {
+	let Ke = m((e) => {
 		e.forEach((e) => {
-			Q(e.i, {
+			Z(e.i, {
 				x: e.x,
 				y: e.y,
 				width: e.w,
 				height: e.h
 			});
 		});
-	}, [Q]), Ke = m((e) => {
+	}, [Z]), qe = m((e) => {
 		X(e);
-	}, [X]), $ = m(async (e, t) => {
+	}, [X]), Q = m(async (e, t) => {
 		A(null);
 		let n = t?.definition || (e.type ? a(e.type) : null), r = d(), i = {
 			width: Math.min(n?.defaultSize?.width ?? 4, L),
@@ -147,21 +147,21 @@ var b = p(function({ dashboardId: p, pageId: b, title: x, onPaste: ge, onSave: _
 			createdAt: (/* @__PURE__ */ new Date()).toISOString(),
 			updatedAt: (/* @__PURE__ */ new Date()).toISOString()
 		};
-		Z(c), X(c.id);
+		Ue(c), X(c.id);
 	}, [
 		p,
 		b,
 		q,
-		Z,
+		Ue,
 		X,
 		Y,
 		L,
 		w
-	]), qe = m((e) => {
+	]), Je = m((e) => {
 		M(!0), N(e);
-	}, []), Je = m(() => {
+	}, []), Ye = m(() => {
 		M(!1), N(null);
-	}, []), Ye = m((e) => {
+	}, []), Xe = m((e) => {
 		e.preventDefault(), M(!1), N(null);
 		try {
 			let t = e.dataTransfer.getData("application/json");
@@ -187,7 +187,7 @@ var b = p(function({ dashboardId: p, pageId: b, title: x, onPaste: ge, onSave: _
 				width: c.width,
 				height: c.height
 			};
-			$({
+			Q({
 				type: r.type,
 				title: r.name || i.name,
 				config: r.defaultConfig || i.defaultConfig
@@ -200,20 +200,20 @@ var b = p(function({ dashboardId: p, pageId: b, title: x, onPaste: ge, onSave: _
 		}
 	}, [
 		D,
-		$,
+		Q,
 		L
-	]), Xe = m((e) => {
+	]), Ze = m((e) => {
 		e.preventDefault(), e.dataTransfer.dropEffect = "copy";
-	}, []), Ze = m((e, t) => {
+	}, []), Qe = m((e, t) => {
 		let n = t || a(e);
-		$({
+		Q({
 			type: e,
 			title: n.name,
 			config: n.defaultConfig
 		});
-	}, [$]), Qe = m(() => {
+	}, [Q]), $e = m(() => {
 		W();
-	}, [W]), $e = m(() => {
+	}, [W]), et = m(() => {
 		U && W(), window.requestAnimationFrame(() => {
 			let e = w("bigconsole.dashboards.widgetPalette.searchPlaceholder", "Search widgets...");
 			document.querySelector(`input[placeholder="${e}"]`)?.focus();
@@ -222,7 +222,7 @@ var b = p(function({ dashboardId: p, pageId: b, title: x, onPaste: ge, onSave: _
 		U,
 		W,
 		w
-	]), { exportPNG: et, exportPDF: tt, isExporting: nt } = l({
+	]), { exportPNG: tt, exportPDF: $, isExporting: nt } = l({
 		containerRef: E,
 		name: x || "dashboard"
 	});
@@ -232,8 +232,8 @@ var b = p(function({ dashboardId: p, pageId: b, title: x, onPaste: ge, onSave: _
 			/* @__PURE__ */ v(te, {
 				dashboardId: p,
 				title: x,
-				onAddWidget: $e,
-				onTogglePalette: Qe,
+				onAddWidget: et,
+				onTogglePalette: $e,
 				isPaletteOpen: G,
 				onPaste: ge,
 				onSave: _e,
@@ -241,11 +241,11 @@ var b = p(function({ dashboardId: p, pageId: b, title: x, onPaste: ge, onSave: _
 				onExport: ye,
 				onPublishTemplate: be,
 				onExportImage: m(() => {
-					et();
-				}, [et]),
-				onExportPdf: m(() => {
 					tt();
 				}, [tt]),
+				onExportPdf: m(() => {
+					$();
+				}, [$]),
 				isExportingImage: nt,
 				onShare: () => O(!0)
 			}),
@@ -295,13 +295,13 @@ var b = p(function({ dashboardId: p, pageId: b, title: x, onPaste: ge, onSave: _
 			}),
 			/* @__PURE__ */ y("div", {
 				"data-testid": "dashboard-canvas-panes",
-				className: `flex flex-1 min-w-0 overflow-hidden ${Ue ? "lg:mr-[var(--bc-inspector-width,420px)]" : ""}`,
+				className: `flex flex-1 min-w-0 overflow-hidden ${We ? "lg:mr-[var(--bc-inspector-width,420px)]" : ""}`,
 				children: [F && /* @__PURE__ */ v(se, {
 					isOpen: G,
-					onClose: Qe,
-					onWidgetSelect: Ze,
-					onDragStart: qe,
-					onDragEnd: Je,
+					onClose: $e,
+					onWidgetSelect: Qe,
+					onDragStart: Je,
+					onDragEnd: Ye,
 					installedWidgets: Re,
 					installedWidgetsLoading: ze,
 					definitions: Be
@@ -312,8 +312,8 @@ var b = p(function({ dashboardId: p, pageId: b, title: x, onPaste: ge, onSave: _
 					"data-section-emphasis": "primary",
 					"data-testid": "dashboard-board",
 					className: "relative min-w-0 flex-1 overflow-auto border-2 border-transparent bg-bg-sunken motion-safe:transition-[border-color,background-color]",
-					onDrop: Ye,
-					onDragOver: Xe,
+					onDrop: Xe,
+					onDragOver: Ze,
 					onClick: () => {
 						F && X(null);
 					},
@@ -365,8 +365,8 @@ var b = p(function({ dashboardId: p, pageId: b, title: x, onPaste: ge, onSave: _
 								cols: L,
 								isEditMode: F,
 								width: D,
-								onLayoutChange: Ge,
-								onWidgetSelect: Ke,
+								onLayoutChange: Ke,
+								onWidgetSelect: qe,
 								selectedWidgetId: He
 							})
 						}) : /* @__PURE__ */ v("div", {
@@ -379,7 +379,7 @@ var b = p(function({ dashboardId: p, pageId: b, title: x, onPaste: ge, onSave: _
 								title: w("bigconsole.dashboards.canvas.noWidgetsTitle", "No widgets yet"),
 								description: w("bigconsole.dashboards.canvas.noWidgetsDescription", "Add widgets to build your dashboard. Click the \"Add Widget\" button to get started."),
 								children: F && /* @__PURE__ */ y(_, {
-									onClick: $e,
+									onClick: et,
 									children: [/* @__PURE__ */ v(me, { className: "size-4" }), w("bigconsole.dashboards.canvas.addWidget", "Add Widget")]
 								})
 							})
@@ -388,8 +388,8 @@ var b = p(function({ dashboardId: p, pageId: b, title: x, onPaste: ge, onSave: _
 				})]
 			}),
 			/* @__PURE__ */ v(ue, {
-				isOpen: Ue,
-				onClose: We
+				isOpen: We,
+				onClose: Ge
 			}),
 			/* @__PURE__ */ v(oe, {
 				dashboardId: p,

package/dist/bigconsole/components/dashboard/DashboardCanvas.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DashboardCanvas.js","names":[],"sources":["../../../../src/bigconsole/components/dashboard/DashboardCanvas.tsx"],"sourcesContent":["/*\n DashboardCanvas Component\n \n Main canvas for dashboard with grid layout and widget rendering.\n * Phase 2: Added GlobalFiltersBar and PageTabsManager integration.\n * Phase 3: Added WidgetPalette sidebar for drag-and-drop widget creation.\n /\n\nimport { type FC, memo, useRef, useState, useCallback, useEffect, useMemo } from 'react';\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport { Plus } from 'lucide-react';\nimport type { Layout } from 'react-grid-layout';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport type { DashboardVisibility, Widget, WidgetType } from '../../types';\nimport { BIGCONSOLE_PERMISSIONS } from '../../../constants/permissions';\nimport { useDashboardStore, useWidgetStore } from '../../store';\nimport { useDashboardOperations } from '../../hooks/useDashboardOperations';\nimport { useWidgetOperations } from '../../hooks/useWidgetOperations';\nimport { useInstalledWidgets } from '../../hooks/useInstalledWidgets';\nimport { useWidgetCatalog } from '../../hooks/useWidgetCatalog';\nimport { useDashboardImageExport } from '../../hooks/useDashboardImageExport';\nimport { useBigConsole } from '../../context';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { Section } from '../common';\nimport { DashboardGrid } from './DashboardGrid';\nimport { loadBigConsoleSettings } from '../../hooks/useBigConsoleSettings';\nimport { DashboardToolbar } from './DashboardToolbar';\nimport { GlobalFiltersBar } from './GlobalFiltersBar';\nimport { LiveBoardBanner } from './LiveBoardBanner';\nimport { TemplateSetupBanner } from './TemplateSetupBanner';\nimport { PageTabsManager, type DashboardPageTab } from './PageTabsManager';\nimport { ShareDialog } from './ShareDialog';\nimport { WidgetPalette } from './WidgetPalette';\nimport { WidgetInspector } from '../builder';\nimport { getWidgetDefinition, type WidgetDefinition } from '../widgets/WidgetRegistry';\n// Phase 2: Cross-filtering context\nimport { CrossFilterProvider } from '../../contexts';\n// Smart widget positioning\nimport { findNextAvailablePosition, calculatePositionFromDrop } from '../../utils/widgetPositioning';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface DashboardCanvasProps {\n /* Dashboard ID /\n dashboardId: string;\n /* Page ID (for loading widgets) /\n pageId?: string;\n /* Dashboard title /\n title?: string;\n /* Callback to paste widget /\n onPaste?: () => void;\n /* Callback when dashboard is saved /\n onSave?: () => void;\n /* Whether save is in progress /\n isSaving?: boolean;\n /* Callback to export dashboard /\n onExport?: () => void;\n onPublishTemplate?: () => void;\n /* Dashboard pages for PageTabsManager /\n pages?: DashboardPageTab[];\n /* Active page ID /\n activePageId?: string;\n /* Callback when page changes /\n onPageChange?: (pageId: string) => void;\n /* Callback when pages are reordered /\n onPagesReorder?: (pages: DashboardPageTab[]) => void;\n /* Callback when page is added /\n onPageAdd?: () => void;\n /* Callback when page is renamed /\n onPageRename?: (pageId: string, newName: string) => void;\n /* Callback when page is duplicated /\n onPageDuplicate?: (pageId: string) => void;\n /* Callback when page is deleted /\n onPageDelete?: (pageId: string) => void;\n /* Whether to show global filters bar /\n showFilters?: boolean;\n /* Whether to show page tabs /\n showPageTabs?: boolean;\n /* Whether to enable cross-filtering (widget clicks update filters) /\n enableCrossFilter?: boolean;\n}\n\ninterface WidgetPlacement {\n position: { x: number; y: number; width: number; height: number };\n definition?: WidgetDefinition \| null;\n}\n\ninterface PaletteDropData {\n type: WidgetType;\n name?: string;\n category?: WidgetDefinition['category'];\n defaultConfig?: Record<string, unknown>;\n defaultSize?: WidgetDefinition['defaultSize'];\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const DashboardCanvas: FC<DashboardCanvasProps> = memo(function DashboardCanvas({\n dashboardId,\n pageId,\n title,\n onPaste,\n onSave,\n isSaving = false,\n onExport,\n onPublishTemplate,\n pages = [],\n activePageId,\n onPageChange,\n onPagesReorder,\n onPageAdd,\n onPageRename,\n onPageDuplicate,\n onPageDelete,\n showFilters = true,\n showPageTabs = true,\n enableCrossFilter = true,\n}) {\n const { t } = useI18n();\n const containerRef = useRef<HTMLDivElement>(null);\n // Inner board element (the grid surface) — rasterized for PNG/PDF board-pack export.\n const boardRef = useRef<HTMLDivElement>(null);\n const [containerWidth, setContainerWidth] = useState(1200);\n const [isShareDialogOpen, setIsShareDialogOpen] = useState(false);\n const [widgetCreateError, setWidgetCreateError] = useState<string \| null>(null);\n const [isDraggingWidget, setIsDraggingWidget] = useState(false);\n const [dragWidgetType, setDragWidgetType] = useState<WidgetType \| null>(null);\n /\n Locally confirmed general-access level, keyed by the dashboard it belongs\n * to. Kept out of the dashboard store on purpose: `setCurrentDashboard` also\n * resets the active page and clears undo history, which changing a share\n * setting must not do.\n /\n const [visibilityOverride, setVisibilityOverride] = useState<{ id: string; value: DashboardVisibility } \| null>(null);\n\n // Store state\n const isEditMode = useDashboardStore((state) => state.viewMode === 'edit');\n const currentDashboard = useDashboardStore((state) => state.currentDashboard);\n const gridColumns = currentDashboard?.pages.find((page) => page.id === pageId)?.gridColumns ?? 12;\n\n // Mutation only — `skipFetch` keeps this from pulling the whole dashboard list.\n const { updateDashboard } = useDashboardOperations({ skipFetch: true });\n const { hasPermission } = usePermissions();\n const canUpdateDashboard = hasPermission(BIGCONSOLE_PERMISSIONS.DASHBOARD_UPDATE);\n\n /\n General access for the board currently on screen. Only surfaced when the\n * loaded dashboard IS this one and its `visibility` came back from the\n * server — the share dialog hides the control otherwise rather than showing\n * a default that may not match reality.\n /\n const dashboardVisibility: DashboardVisibility \| undefined =\n visibilityOverride?.id === dashboardId\n ? visibilityOverride.value\n : currentDashboard?.id === dashboardId\n ? currentDashboard.visibility\n : undefined;\n\n const handleVisibilityChange = useCallback(\n async (visibility: DashboardVisibility) => {\n // `updateDashboard` swallows Apollo errors and resolves to null, so null\n // is the failure signal the dialog needs in order to report it.\n const updated = await updateDashboard({ id: dashboardId, visibility });\n if (!updated) {\n throw new Error('The dashboard service did not accept the change.');\n }\n setVisibilityOverride({ id: dashboardId, value: updated.visibility ?? visibility });\n },\n [dashboardId, updateDashboard]\n );\n\n // Fetch installed widgets only in edit mode — the palette and add-widget dialog\n // are not usable in read-only view, so skip the request for viewer-only sessions.\n const { workspaceId, apiGatewayUrl, authToken } = useBigConsole();\n const { installedWidgets, loading: installedWidgetsLoading } = useInstalledWidgets({\n workspaceId,\n apiGatewayUrl,\n authToken,\n enabled: isEditMode,\n });\n // Built-in widget catalog from the backend (getWidgetTypes); falls back to the\n // bundled registry while loading or if the supergraph hasn't adopted it yet.\n const { definitions: widgetCatalog } = useWidgetCatalog({\n workspaceId,\n apiGatewayUrl,\n authToken,\n enabled: isEditMode,\n });\n const zoomLevel = useDashboardStore((state) => state.zoomLevel);\n const sidebarCollapsed = useDashboardStore((state) => state.sidebarCollapsed);\n const toggleSidebar = useDashboardStore((state) => state.toggleSidebar);\n const isPaletteOpen = !sidebarCollapsed;\n const setGlobalFilterValues = useDashboardStore((state) => state.setGlobalFilterValues);\n\n // Handle filter changes - update store for widget access\n const handleFilterChange = useCallback(\n (filterValues: Record<string, unknown>) => {\n // Update global filter values in dashboard store\n setGlobalFilterValues(filterValues);\n\n // Widgets can now access filter values via useGlobalFilterValues() hook\n // When backend supports filter parameters, widget queries will include these values\n },\n [setGlobalFilterValues]\n );\n\n // Widget operations hook (connects to backend) - skipFetch since parent page fetches\n const { createWidget: createWidgetApi } = useWidgetOperations(pageId, dashboardId, { skipFetch: true });\n\n const widgetsMap = useWidgetStore((state) => state.widgets);\n // Filter widgets to only show widgets for the current page\n const widgetsArray = useMemo(() => {\n const allWidgets = Array.from(widgetsMap.values());\n if (!pageId) return allWidgets;\n return allWidgets.filter((widget) => widget.pageId === pageId);\n }, [widgetsMap, pageId]);\n const selectedWidgetId = useWidgetStore((state) => state.selectedWidgetId);\n const selectWidget = useWidgetStore((state) => state.selectWidget);\n const addWidgetToStore = useWidgetStore((state) => state.addWidget);\n const updateWidgetPosition = useWidgetStore((state) => state.updateWidgetPosition);\n const configPanelOpen = useWidgetStore((state) => state.configPanelOpen);\n const closeConfigPanel = useWidgetStore((state) => state.closeConfigPanel);\n\n // Keep react-grid-layout's explicit width in sync with the actual canvas.\n // A ResizeObserver is required because opening the docked inspector or widget\n // palette resizes this element without resizing the browser window.\n useEffect(() => {\n const container = containerRef.current;\n if (!container) return;\n\n const updateWidth = () => {\n setContainerWidth(container.offsetWidth);\n };\n\n updateWidth();\n\n if (typeof ResizeObserver !== 'undefined') {\n const observer = new ResizeObserver(updateWidth);\n observer.observe(container);\n return () => observer.disconnect();\n }\n\n window.addEventListener('resize', updateWidth);\n return () => window.removeEventListener('resize', updateWidth);\n }, []);\n\n // Handle layout change\n const handleLayoutChange = useCallback(\n (layout: Layout[]) => {\n layout.forEach((item) => {\n updateWidgetPosition(item.i, {\n x: item.x,\n y: item.y,\n width: item.w,\n height: item.h,\n });\n });\n },\n [updateWidgetPosition]\n );\n\n // Handle widget select\n const handleWidgetSelect = useCallback(\n (widgetId: string) => {\n selectWidget(widgetId);\n },\n [selectWidget]\n );\n\n // Create with defaults, select the result, then configure it in the inspector.\n const handleAddWidget = useCallback(\n async (widgetData: Partial<Widget>, placement?: WidgetPlacement) => {\n setWidgetCreateError(null);\n const definition = placement?.definition \|\| (widgetData.type ? getWidgetDefinition(widgetData.type) : null);\n const defaults = loadBigConsoleSettings();\n const widgetSize = {\n width: Math.min(definition?.defaultSize?.width ?? 4, gridColumns),\n height: defaults.defaultWidgetHeight,\n };\n\n let position: { x: number; y: number; width: number; height: number };\n if (placement?.position) {\n position = placement.position;\n } else {\n // Use smart placement algorithm - horizontal first, then next row\n const { x, y } = findNextAvailablePosition(widgetsArray, widgetSize, { cols: gridColumns });\n position = {\n x,\n y,\n width: widgetSize.width,\n height: widgetSize.height,\n };\n }\n\n // Preserve legacy binding fields when creating from imported/default data.\n const extendedData = widgetData as Partial<Widget> & { dataSinkId?: string; parserId?: string };\n\n // Try to create via API first\n if (pageId) {\n const widget = await createWidgetApi({\n pageId,\n dashboardId,\n type: widgetData.type!,\n title: widgetData.title \|\| t('bigconsole.dashboards.canvas.untitledWidget', 'Untitled Widget'),\n description: widgetData.description,\n // v2.0: Renderer and template support\n renderer: widgetData.renderer,\n template: widgetData.template,\n config: widgetData.config \|\| {},\n position,\n refreshInterval: widgetData.refreshInterval ?? defaults.defaultRefreshInterval,\n // v2.0: Data source fields (DataSink → Parser → Widget)\n dataSinkId: extendedData.dataSinkId,\n parserId: extendedData.parserId,\n });\n\n if (widget) {\n selectWidget(widget.id);\n return;\n }\n\n setWidgetCreateError(\n t(\n 'bigconsole.dashboards.canvas.widgetCreateError',\n 'Could not create the widget. Check the connection and try again.'\n )\n );\n return;\n }\n\n // Fallback to local store if API fails or no pageId\n const newWidget: Widget = {\n id: crypto.randomUUID(),\n dashboardId,\n pageId: pageId \|\| 'local',\n type: widgetData.type!,\n title: widgetData.title \|\| t('bigconsole.dashboards.canvas.untitledWidget', 'Untitled Widget'),\n description: widgetData.description,\n // v2.0: Renderer and template support\n renderer: widgetData.renderer,\n template: widgetData.template,\n refreshInterval: widgetData.refreshInterval ?? defaults.defaultRefreshInterval,\n config: widgetData.config \|\| {},\n position,\n positionX: position.x,\n positionY: position.y,\n positionWidth: position.width,\n positionHeight: position.height,\n // v2.0: Data source fields (DataSink → Parser → Widget)\n dataSinkId: extendedData.dataSinkId,\n parserId: extendedData.parserId,\n translations: [],\n createdAt: new Date().toISOString(),\n updatedAt: new Date().toISOString(),\n };\n\n addWidgetToStore(newWidget);\n selectWidget(newWidget.id);\n },\n [dashboardId, pageId, createWidgetApi, addWidgetToStore, selectWidget, widgetsArray, gridColumns, t]\n );\n\n // Handle drag start from palette\n const handlePaletteDragStart = useCallback((type: WidgetType) => {\n setIsDraggingWidget(true);\n setDragWidgetType(type);\n }, []);\n\n // Handle drag end from palette\n const handlePaletteDragEnd = useCallback(() => {\n setIsDraggingWidget(false);\n setDragWidgetType(null);\n }, []);\n\n // Handle drop on canvas - create immediately with defaults.\n const handleCanvasDrop = useCallback(\n (e: React.DragEvent) => {\n e.preventDefault();\n setIsDraggingWidget(false);\n setDragWidgetType(null);\n\n try {\n const data = e.dataTransfer.getData('application/json');\n if (!data) return;\n\n const parsedData: unknown = JSON.parse(data);\n if (!parsedData \|\| typeof parsedData !== 'object' \|\| !('type' in parsedData)) return;\n const widgetData = parsedData as PaletteDropData;\n const definition = getWidgetDefinition(widgetData.type);\n\n // If the dropped data includes defaultConfig (from WidgetPalette drag serialization),\n // reconstruct a full WidgetDefinition so installed/store widget identity is preserved.\n let droppedDefinition: WidgetDefinition \| null = null;\n if (widgetData.defaultConfig && widgetData.category) {\n droppedDefinition = {\n ...definition,\n name: widgetData.name \|\| definition.name,\n category: widgetData.category,\n defaultConfig: widgetData.defaultConfig,\n defaultSize: widgetData.defaultSize \|\| definition.defaultSize,\n };\n }\n\n // Calculate drop position relative to canvas\n const canvasRect = containerRef.current?.getBoundingClientRect();\n if (!canvasRect) return;\n\n // Use utility to calculate grid position from drop coordinates\n const widgetSize = {\n width: Math.min(definition.defaultSize.width, gridColumns),\n height: loadBigConsoleSettings().defaultWidgetHeight,\n };\n\n const { x: gridX, y: gridY } = calculatePositionFromDrop(\n e.clientX,\n e.clientY,\n canvasRect,\n containerWidth,\n widgetSize,\n { cols: gridColumns }\n );\n\n const position = {\n x: gridX,\n y: gridY,\n width: widgetSize.width,\n height: widgetSize.height,\n };\n\n void handleAddWidget(\n {\n type: widgetData.type,\n title: widgetData.name \|\| definition.name,\n config: widgetData.defaultConfig \|\| definition.defaultConfig,\n },\n { position, definition: droppedDefinition }\n );\n } catch (error) {\n console.error('Failed to handle widget drop:', error);\n }\n },\n [containerWidth, handleAddWidget, gridColumns]\n );\n\n // Handle drag over to allow drop\n const handleCanvasDragOver = useCallback((e: React.DragEvent) => {\n e.preventDefault();\n e.dataTransfer.dropEffect = 'copy';\n }, []);\n\n // Handle widget select from palette (quick add without drag)\n const handlePaletteWidgetSelect = useCallback(\n (type: WidgetType, paletteDefinition?: WidgetDefinition) => {\n const definition = paletteDefinition \|\| getWidgetDefinition(type);\n handleAddWidget({\n type,\n title: definition.name,\n config: definition.defaultConfig,\n });\n },\n [handleAddWidget]\n );\n\n // Toggle palette\n const togglePalette = useCallback(() => {\n toggleSidebar();\n }, [toggleSidebar]);\n\n const openWidgetPalette = useCallback(() => {\n if (sidebarCollapsed) toggleSidebar();\n window.requestAnimationFrame(() => {\n const searchPlaceholder = t('bigconsole.dashboards.widgetPalette.searchPlaceholder', 'Search widgets...');\n document.querySelector<HTMLInputElement>(`input[placeholder=\"${searchPlaceholder}\"]`)?.focus();\n });\n }, [sidebarCollapsed, toggleSidebar, t]);\n\n // Board-pack export (PNG + PDF) — rasterizes the inner board element.\n const {\n exportPNG,\n exportPDF,\n isExporting: isExportingImage,\n } = useDashboardImageExport({ containerRef: boardRef, name: title \|\| 'dashboard' });\n const handleExportImage = useCallback(() => {\n void exportPNG();\n }, [exportPNG]);\n const handleExportPdf = useCallback(() => {\n void exportPDF();\n }, [exportPDF]);\n\n return (\n <div className=\"flex flex-col h-full min-w-0 overflow-hidden\">\n {/ Toolbar /}\n <DashboardToolbar\n dashboardId={dashboardId}\n title={title}\n onAddWidget={openWidgetPalette}\n onTogglePalette={togglePalette}\n isPaletteOpen={isPaletteOpen}\n onPaste={onPaste}\n onSave={onSave}\n isSaving={isSaving}\n onExport={onExport}\n onPublishTemplate={onPublishTemplate}\n onExportImage={handleExportImage}\n onExportPdf={handleExportPdf}\n isExportingImage={isExportingImage}\n onShare={() => setIsShareDialogOpen(true)}\n />\n\n {widgetCreateError && (\n <div role=\"alert\" className=\"mx-card-padding mt-control-gap flex-shrink-0\">\n {/ The section title has no catalog key — BOFF-6004 translated only the\n message and the Dismiss action — so it stays a literal until a key\n lands in src/translations/en.ts. /}\n <Section\n tone=\"danger\"\n padding=\"compact\"\n headingLevel={3}\n data-testid=\"widget-create-error\"\n title=\"Widget not created\"\n description={widgetCreateError}\n actions={\n <Button variant=\"outline\" size=\"sm\" onClick={() => setWidgetCreateError(null)}>\n {t('bigconsole.dashboards.canvas.dismiss', 'Dismiss')}\n </Button>\n }\n />\n </div>\n )}\n\n {/ Live wall-board freshness banner — renders only when the page has\n auto-refreshing widgets (e.g. the Live Bed Board) and not in edit mode. /}\n <TemplateSetupBanner widgets={widgetsArray} isEditMode={isEditMode} />\n <LiveBoardBanner widgets={widgetsArray} isEditMode={isEditMode} />\n\n {/ Global Filters Bar /}\n {showFilters && <GlobalFiltersBar dashboardId={dashboardId} onFilterChange={handleFilterChange} collapsible />}\n\n {/ Page Tabs - always show in edit mode so user can add first page /}\n {showPageTabs && (isEditMode \|\| pages.length > 0) && (\n <PageTabsManager\n pages={pages}\n activePageId={activePageId \|\| pages[0]?.id}\n editable={isEditMode}\n onPageSelect={onPageChange \|\| (() => {})}\n onPagesReorder={\n onPagesReorder\n ? (pageIds) => {\n // Convert string[] to DashboardPageTab[] for the callback\n const reorderedPages = pageIds.map((id) => pages.find((p) => p.id === id)!).filter(Boolean);\n onPagesReorder(reorderedPages);\n }\n : undefined\n }\n onPageCreate={onPageAdd}\n onPageRename={onPageRename}\n onPageDuplicate={onPageDuplicate}\n onPageDelete={onPageDelete}\n />\n )}\n\n {/ Main content area with palette and canvas.\n When the properties inspector is open we reserve equal space on the\n right so the (fixed, non-modal) panel docks beside the canvas instead\n of overlaying the selected widget. /}\n <div\n data-testid=\"dashboard-canvas-panes\"\n className={`flex flex-1 min-w-0 overflow-hidden ${\n // Only reserve the inspector gutter where there is room for both. The\n // panel is `min(420px, 100vw)` wide, so below `lg` it overlays the\n // board instead — reserving 420px there left the canvas a sliver.\n configPanelOpen ? 'lg:mr-[var(--bc-inspector-width,420px)]' : ''\n }`}\n >\n {/ Widget Palette Sidebar /}\n {isEditMode && (\n <WidgetPalette\n isOpen={isPaletteOpen}\n onClose={togglePalette}\n onWidgetSelect={handlePaletteWidgetSelect}\n onDragStart={handlePaletteDragStart}\n onDragEnd={handlePaletteDragEnd}\n installedWidgets={installedWidgets}\n installedWidgetsLoading={installedWidgetsLoading}\n definitions={widgetCatalog}\n />\n )}\n\n {/\n The board. This is the one `primary` region on the route — everything\n above it is bare chrome or a compact status strip, so the widgets are\n what the eye lands on. It keeps the recessed canvas surface on purpose:\n the widgets are the raised cards, the board is the well they sit in.\n The drop border is always 2px (transparent when idle) so drag-over\n highlights without nudging the whole board.\n /}\n <div\n ref={containerRef}\n role=\"region\"\n aria-label=\"Dashboard board\"\n data-section-emphasis=\"primary\"\n data-testid=\"dashboard-board\"\n className=\"relative min-w-0 flex-1 overflow-auto border-2 border-transparent bg-bg-sunken motion-safe:transition-[border-color,background-color]\"\n onDrop={handleCanvasDrop}\n onDragOver={handleCanvasDragOver}\n onClick={() => {\n if (isEditMode) {\n selectWidget(null);\n }\n }}\n style={\n isDraggingWidget\n ? {\n borderStyle: 'dashed',\n borderColor: 'var(--color-action-primary-bg)',\n backgroundColor: 'var(--color-bg-accentSubtle)',\n }\n : undefined\n }\n >\n {/ Drop zone indicator /}\n {isDraggingWidget && (\n <div\n style={{\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n padding: 'var(--space-pagePadding)',\n backgroundColor: 'var(--color-bg-surface)',\n borderRadius: 'var(--radius-card)',\n boxShadow: 'var(--shadow-elevation-2)',\n textAlign: 'center',\n pointerEvents: 'none',\n zIndex: 100,\n }}\n >\n <p style={{ fontSize: 'var(--font-size-body-md)', color: 'var(--color-text-primary)', margin: 0 }}>\n {t('bigconsole.dashboards.canvas.dropToAddBefore', 'Drop to add')} <strong>{dragWidgetType}</strong>{' '}\n {t('bigconsole.dashboards.canvas.dropToAddAfter', 'widget')}\n </p>\n </div>\n )}\n\n <div\n ref={boardRef}\n className=\"min-h-full origin-top-left transition-transform\"\n style={{\n transform: `scale(${zoomLevel / 100})`,\n width: `${100 / (zoomLevel / 100)}%`,\n }}\n >\n {widgetsArray.length > 0 ? (\n <CrossFilterProvider\n enabled={enableCrossFilter}\n onCrossFilter={(_filters) => {\n // Cross-filter applied - widget queries can access filter values\n }}\n >\n <DashboardGrid\n widgets={widgetsArray}\n cols={gridColumns}\n isEditMode={isEditMode}\n width={containerWidth}\n onLayoutChange={handleLayoutChange}\n onWidgetSelect={handleWidgetSelect}\n selectedWidgetId={selectedWidgetId}\n />\n </CrossFilterProvider>\n ) : (\n <div className=\"flex min-h-[min(400px,60vh)] items-center justify-center p-card-padding\">\n <Section\n headingLevel={3}\n className=\"w-full max-w-md\"\n data-testid=\"dashboard-empty-board\"\n headerClassName=\"mb-form-gap\"\n title={t('bigconsole.dashboards.canvas.noWidgetsTitle', 'No widgets yet')}\n description={t(\n 'bigconsole.dashboards.canvas.noWidgetsDescription',\n 'Add widgets to build your dashboard. Click the \"Add Widget\" button to get started.'\n )}\n >\n {isEditMode && (\n <Button onClick={openWidgetPalette}>\n <Plus className=\"size-4\" />\n {t('bigconsole.dashboards.canvas.addWidget', 'Add Widget')}\n </Button>\n )}\n </Section>\n </div>\n )}\n </div>\n </div>\n </div>\n\n {/ Properties Panel /}\n <WidgetInspector isOpen={configPanelOpen} onClose={closeConfigPanel} />\n\n {/ Share Dialog */}\n <ShareDialog\n dashboardId={dashboardId}\n dashboardName={title \|\| t('bigconsole.dashboards.canvas.dashboardFallbackName', 'Dashboard')}\n isOpen={isShareDialogOpen}\n onClose={() => setIsShareDialogOpen(false)}\n visibility={dashboardVisibility}\n onVisibilityChange={handleVisibilityChange}\n canChangeVisibility={canUpdateDashboard}\n />\n </div>\n );\n});\n\nexport default DashboardCanvas;\n"],"mappings":"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"}
1	+ {"version":3,"file":"DashboardCanvas.js","names":[],"sources":["../../../../src/bigconsole/components/dashboard/DashboardCanvas.tsx"],"sourcesContent":["/*\n DashboardCanvas Component\n \n Main canvas for dashboard with grid layout and widget rendering.\n * Phase 2: Added GlobalFiltersBar and PageTabsManager integration.\n * Phase 3: Added WidgetPalette sidebar for drag-and-drop widget creation.\n /\n\nimport { type FC, memo, useRef, useState, useCallback, useEffect, useMemo } from 'react';\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport { Plus } from 'lucide-react';\nimport type { Layout } from 'react-grid-layout';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport type { DashboardVisibility, Widget, WidgetType } from '../../types';\nimport { BIGCONSOLE_PERMISSIONS } from '../../../constants/permissions';\nimport { useDashboardStore, useWidgetStore } from '../../store';\nimport { useDashboardOperations } from '../../hooks/useDashboardOperations';\nimport { useWidgetOperations } from '../../hooks/useWidgetOperations';\nimport { useInstalledWidgets } from '../../hooks/useInstalledWidgets';\nimport { useWidgetCatalog } from '../../hooks/useWidgetCatalog';\nimport { useDashboardImageExport } from '../../hooks/useDashboardImageExport';\nimport { useBigConsole } from '../../context';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { Section } from '../common';\nimport { DashboardGrid } from './DashboardGrid';\nimport { loadBigConsoleSettings } from '../../hooks/useBigConsoleSettings';\nimport { DashboardToolbar } from './DashboardToolbar';\nimport { GlobalFiltersBar } from './GlobalFiltersBar';\nimport { LiveBoardBanner } from './LiveBoardBanner';\nimport { TemplateSetupBanner } from './TemplateSetupBanner';\nimport { PageTabsManager, type DashboardPageTab } from './PageTabsManager';\nimport { ShareDialog } from './ShareDialog';\nimport { WidgetPalette } from './WidgetPalette';\nimport { WidgetInspector } from '../builder';\nimport { getWidgetDefinition, type WidgetDefinition } from '../widgets/WidgetRegistry';\n// Phase 2: Cross-filtering context\nimport { CrossFilterProvider } from '../../contexts';\n// Smart widget positioning\nimport { findNextAvailablePosition, calculatePositionFromDrop } from '../../utils/widgetPositioning';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface DashboardCanvasProps {\n /* Dashboard ID /\n dashboardId: string;\n /* Page ID (for loading widgets) /\n pageId?: string;\n /* Dashboard title /\n title?: string;\n /* Callback to paste widget /\n onPaste?: () => void;\n /* Callback when dashboard is saved /\n onSave?: () => void;\n /* Whether save is in progress /\n isSaving?: boolean;\n /* Callback to export dashboard /\n onExport?: () => void;\n onPublishTemplate?: () => void;\n /* Dashboard pages for PageTabsManager /\n pages?: DashboardPageTab[];\n /* Active page ID /\n activePageId?: string;\n /* Callback when page changes /\n onPageChange?: (pageId: string) => void;\n /* Callback when pages are reordered /\n onPagesReorder?: (pages: DashboardPageTab[]) => void;\n /* Callback when page is added /\n onPageAdd?: () => void;\n /* Callback when page is renamed /\n onPageRename?: (pageId: string, newName: string) => void;\n /* Callback when page is duplicated /\n onPageDuplicate?: (pageId: string) => void;\n /* Callback when page is deleted /\n onPageDelete?: (pageId: string) => void;\n /* Whether to show global filters bar /\n showFilters?: boolean;\n /* Whether to show page tabs /\n showPageTabs?: boolean;\n /* Whether to enable cross-filtering (widget clicks update filters) /\n enableCrossFilter?: boolean;\n}\n\ninterface WidgetPlacement {\n position: { x: number; y: number; width: number; height: number };\n definition?: WidgetDefinition \| null;\n}\n\ninterface PaletteDropData {\n type: WidgetType;\n name?: string;\n category?: WidgetDefinition['category'];\n defaultConfig?: Record<string, unknown>;\n defaultSize?: WidgetDefinition['defaultSize'];\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const DashboardCanvas: FC<DashboardCanvasProps> = memo(function DashboardCanvas({\n dashboardId,\n pageId,\n title,\n onPaste,\n onSave,\n isSaving = false,\n onExport,\n onPublishTemplate,\n pages = [],\n activePageId,\n onPageChange,\n onPagesReorder,\n onPageAdd,\n onPageRename,\n onPageDuplicate,\n onPageDelete,\n showFilters = true,\n showPageTabs = true,\n enableCrossFilter = true,\n}) {\n const { t } = useI18n();\n const containerRef = useRef<HTMLDivElement>(null);\n // Inner board element (the grid surface) — rasterized for PNG/PDF board-pack export.\n const boardRef = useRef<HTMLDivElement>(null);\n const [containerWidth, setContainerWidth] = useState(1200);\n const [isShareDialogOpen, setIsShareDialogOpen] = useState(false);\n const [widgetCreateError, setWidgetCreateError] = useState<string \| null>(null);\n const [isDraggingWidget, setIsDraggingWidget] = useState(false);\n const [dragWidgetType, setDragWidgetType] = useState<WidgetType \| null>(null);\n /\n Locally confirmed general-access level, keyed by the dashboard it belongs\n * to. Kept out of the dashboard store on purpose: `setCurrentDashboard` also\n * resets the active page and clears undo history, which changing a share\n * setting must not do.\n /\n const [visibilityOverride, setVisibilityOverride] = useState<{ id: string; value: DashboardVisibility } \| null>(null);\n\n // Store state\n const isEditMode = useDashboardStore((state) => state.viewMode === 'edit');\n const currentDashboard = useDashboardStore((state) => state.currentDashboard);\n const gridColumns = currentDashboard?.pages.find((page) => page.id === pageId)?.gridColumns ?? 12;\n\n // Mutation only — `skipFetch` keeps this from pulling the whole dashboard list.\n const { updateDashboard } = useDashboardOperations({ skipFetch: true });\n const { hasPermission } = usePermissions();\n const canUpdateDashboard = hasPermission(BIGCONSOLE_PERMISSIONS.DASHBOARD_UPDATE);\n\n /\n General access for the board currently on screen. Only surfaced when the\n * loaded dashboard IS this one and its `visibility` came back from the\n * server — the share dialog hides the control otherwise rather than showing\n * a default that may not match reality.\n /\n const dashboardVisibility: DashboardVisibility \| undefined =\n visibilityOverride?.id === dashboardId\n ? visibilityOverride.value\n : currentDashboard?.id === dashboardId\n ? currentDashboard.visibility\n : undefined;\n\n const handleVisibilityChange = useCallback(\n async (visibility: DashboardVisibility) => {\n // `updateDashboard` swallows Apollo errors and resolves to null, so null\n // is the failure signal the dialog needs in order to report it.\n const updated = await updateDashboard({ id: dashboardId, visibility });\n if (!updated) {\n throw new Error('The dashboard service did not accept the change.');\n }\n setVisibilityOverride({ id: dashboardId, value: updated.visibility ?? visibility });\n },\n [dashboardId, updateDashboard]\n );\n\n // Fetch installed widgets only in edit mode — the palette and add-widget dialog\n // are not usable in read-only view, so skip the request for viewer-only sessions.\n const { workspaceId, apiGatewayUrl, authToken } = useBigConsole();\n const { installedWidgets, loading: installedWidgetsLoading } = useInstalledWidgets({\n workspaceId,\n apiGatewayUrl,\n authToken,\n enabled: isEditMode,\n });\n // Built-in widget catalog from the backend (getWidgetTypes); falls back to the\n // bundled registry while loading or if the supergraph hasn't adopted it yet.\n const { definitions: widgetCatalog } = useWidgetCatalog({\n workspaceId,\n apiGatewayUrl,\n authToken,\n enabled: isEditMode,\n });\n const zoomLevel = useDashboardStore((state) => state.zoomLevel);\n const sidebarCollapsed = useDashboardStore((state) => state.sidebarCollapsed);\n const toggleSidebar = useDashboardStore((state) => state.toggleSidebar);\n const isPaletteOpen = !sidebarCollapsed;\n const setGlobalFilterValues = useDashboardStore((state) => state.setGlobalFilterValues);\n\n // Handle filter changes - update store for widget access\n const handleFilterChange = useCallback(\n (filterValues: Record<string, unknown>) => {\n // Update global filter values in dashboard store\n setGlobalFilterValues(filterValues);\n\n // Widgets can now access filter values via useGlobalFilterValues() hook\n // When backend supports filter parameters, widget queries will include these values\n },\n [setGlobalFilterValues]\n );\n\n // Widget operations hook (connects to backend) - skipFetch since parent page fetches\n const { createWidget: createWidgetApi } = useWidgetOperations(pageId, dashboardId, { skipFetch: true });\n\n const widgetsMap = useWidgetStore((state) => state.widgets);\n // Filter widgets to only show widgets for the current page\n const widgetsArray = useMemo(() => {\n const allWidgets = Array.from(widgetsMap.values());\n if (!pageId) return allWidgets;\n return allWidgets.filter((widget) => widget.pageId === pageId);\n }, [widgetsMap, pageId]);\n const selectedWidgetId = useWidgetStore((state) => state.selectedWidgetId);\n const selectWidget = useWidgetStore((state) => state.selectWidget);\n const addWidgetToStore = useWidgetStore((state) => state.addWidget);\n const updateWidgetPosition = useWidgetStore((state) => state.updateWidgetPosition);\n const configPanelOpen = useWidgetStore((state) => state.configPanelOpen);\n const closeConfigPanel = useWidgetStore((state) => state.closeConfigPanel);\n\n // Keep react-grid-layout's explicit width in sync with the actual canvas.\n // A ResizeObserver is required because opening the docked inspector or widget\n // palette resizes this element without resizing the browser window.\n useEffect(() => {\n const container = containerRef.current;\n if (!container) return;\n\n const updateWidth = () => {\n setContainerWidth(container.offsetWidth);\n };\n\n updateWidth();\n\n if (typeof ResizeObserver !== 'undefined') {\n const observer = new ResizeObserver(updateWidth);\n observer.observe(container);\n return () => observer.disconnect();\n }\n\n window.addEventListener('resize', updateWidth);\n return () => window.removeEventListener('resize', updateWidth);\n }, []);\n\n // Handle layout change\n const handleLayoutChange = useCallback(\n (layout: Layout[]) => {\n layout.forEach((item) => {\n updateWidgetPosition(item.i, {\n x: item.x,\n y: item.y,\n width: item.w,\n height: item.h,\n });\n });\n },\n [updateWidgetPosition]\n );\n\n // Handle widget select\n const handleWidgetSelect = useCallback(\n (widgetId: string) => {\n selectWidget(widgetId);\n },\n [selectWidget]\n );\n\n // Create with defaults, select the result, then configure it in the inspector.\n const handleAddWidget = useCallback(\n async (widgetData: Partial<Widget>, placement?: WidgetPlacement) => {\n setWidgetCreateError(null);\n const definition = placement?.definition \|\| (widgetData.type ? getWidgetDefinition(widgetData.type) : null);\n const defaults = loadBigConsoleSettings();\n const widgetSize = {\n width: Math.min(definition?.defaultSize?.width ?? 4, gridColumns),\n height: defaults.defaultWidgetHeight,\n };\n\n let position: { x: number; y: number; width: number; height: number };\n if (placement?.position) {\n position = placement.position;\n } else {\n // Use smart placement algorithm - horizontal first, then next row\n const { x, y } = findNextAvailablePosition(widgetsArray, widgetSize, { cols: gridColumns });\n position = {\n x,\n y,\n width: widgetSize.width,\n height: widgetSize.height,\n };\n }\n\n // Preserve legacy binding fields when creating from imported/default data.\n const extendedData = widgetData as Partial<Widget> & { dataSinkId?: string; parserId?: string };\n\n // Try to create via API first\n if (pageId) {\n const widget = await createWidgetApi({\n pageId,\n dashboardId,\n type: widgetData.type!,\n title: widgetData.title \|\| t('bigconsole.dashboards.canvas.untitledWidget', 'Untitled Widget'),\n description: widgetData.description,\n // v2.0: Renderer and template support\n renderer: widgetData.renderer,\n template: widgetData.template,\n config: widgetData.config \|\| {},\n position,\n refreshInterval: widgetData.refreshInterval ?? defaults.defaultRefreshInterval,\n // v2.0: Data source fields (DataSink → Parser → Widget)\n dataSinkId: extendedData.dataSinkId,\n parserId: extendedData.parserId,\n });\n\n if (widget) {\n selectWidget(widget.id);\n return;\n }\n\n setWidgetCreateError(\n t(\n 'bigconsole.dashboards.canvas.widgetCreateError',\n 'Could not create the widget. Check the connection and try again.'\n )\n );\n return;\n }\n\n // Fallback to local store if API fails or no pageId\n const newWidget: Widget = {\n id: crypto.randomUUID(),\n dashboardId,\n pageId: pageId \|\| 'local',\n type: widgetData.type!,\n title: widgetData.title \|\| t('bigconsole.dashboards.canvas.untitledWidget', 'Untitled Widget'),\n description: widgetData.description,\n // v2.0: Renderer and template support\n renderer: widgetData.renderer,\n template: widgetData.template,\n refreshInterval: widgetData.refreshInterval ?? defaults.defaultRefreshInterval,\n config: widgetData.config \|\| {},\n position,\n positionX: position.x,\n positionY: position.y,\n positionWidth: position.width,\n positionHeight: position.height,\n // v2.0: Data source fields (DataSink → Parser → Widget)\n dataSinkId: extendedData.dataSinkId,\n parserId: extendedData.parserId,\n translations: [],\n createdAt: new Date().toISOString(),\n updatedAt: new Date().toISOString(),\n };\n\n addWidgetToStore(newWidget);\n selectWidget(newWidget.id);\n },\n [dashboardId, pageId, createWidgetApi, addWidgetToStore, selectWidget, widgetsArray, gridColumns, t]\n );\n\n // Handle drag start from palette\n const handlePaletteDragStart = useCallback((type: WidgetType) => {\n setIsDraggingWidget(true);\n setDragWidgetType(type);\n }, []);\n\n // Handle drag end from palette\n const handlePaletteDragEnd = useCallback(() => {\n setIsDraggingWidget(false);\n setDragWidgetType(null);\n }, []);\n\n // Handle drop on canvas - create immediately with defaults.\n const handleCanvasDrop = useCallback(\n (e: React.DragEvent) => {\n e.preventDefault();\n setIsDraggingWidget(false);\n setDragWidgetType(null);\n\n try {\n const data = e.dataTransfer.getData('application/json');\n if (!data) return;\n\n const parsedData: unknown = JSON.parse(data);\n if (!parsedData \|\| typeof parsedData !== 'object' \|\| !('type' in parsedData)) return;\n const widgetData = parsedData as PaletteDropData;\n const definition = getWidgetDefinition(widgetData.type);\n\n // If the dropped data includes defaultConfig (from WidgetPalette drag serialization),\n // reconstruct a full WidgetDefinition so installed/store widget identity is preserved.\n let droppedDefinition: WidgetDefinition \| null = null;\n if (widgetData.defaultConfig && widgetData.category) {\n droppedDefinition = {\n ...definition,\n name: widgetData.name \|\| definition.name,\n category: widgetData.category,\n defaultConfig: widgetData.defaultConfig,\n defaultSize: widgetData.defaultSize \|\| definition.defaultSize,\n };\n }\n\n // Calculate drop position relative to canvas\n const canvasRect = containerRef.current?.getBoundingClientRect();\n if (!canvasRect) return;\n\n // Use utility to calculate grid position from drop coordinates\n const widgetSize = {\n width: Math.min(definition.defaultSize.width, gridColumns),\n height: loadBigConsoleSettings().defaultWidgetHeight,\n };\n\n const { x: gridX, y: gridY } = calculatePositionFromDrop(\n e.clientX,\n e.clientY,\n canvasRect,\n containerWidth,\n widgetSize,\n { cols: gridColumns }\n );\n\n const position = {\n x: gridX,\n y: gridY,\n width: widgetSize.width,\n height: widgetSize.height,\n };\n\n void handleAddWidget(\n {\n type: widgetData.type,\n title: widgetData.name \|\| definition.name,\n config: widgetData.defaultConfig \|\| definition.defaultConfig,\n },\n { position, definition: droppedDefinition }\n );\n } catch (error) {\n console.error('Failed to handle widget drop:', error);\n }\n },\n [containerWidth, handleAddWidget, gridColumns]\n );\n\n // Handle drag over to allow drop\n const handleCanvasDragOver = useCallback((e: React.DragEvent) => {\n e.preventDefault();\n e.dataTransfer.dropEffect = 'copy';\n }, []);\n\n // Handle widget select from palette (quick add without drag)\n const handlePaletteWidgetSelect = useCallback(\n (type: WidgetType, paletteDefinition?: WidgetDefinition) => {\n const definition = paletteDefinition \|\| getWidgetDefinition(type);\n handleAddWidget({\n type,\n title: definition.name,\n config: definition.defaultConfig,\n });\n },\n [handleAddWidget]\n );\n\n // Toggle palette\n const togglePalette = useCallback(() => {\n toggleSidebar();\n }, [toggleSidebar]);\n\n const openWidgetPalette = useCallback(() => {\n if (sidebarCollapsed) toggleSidebar();\n window.requestAnimationFrame(() => {\n const searchPlaceholder = t('bigconsole.dashboards.widgetPalette.searchPlaceholder', 'Search widgets...');\n document.querySelector<HTMLInputElement>(`input[placeholder=\"${searchPlaceholder}\"]`)?.focus();\n });\n }, [sidebarCollapsed, toggleSidebar, t]);\n\n // Board-pack export (PNG + PDF) — rasterizes the inner board element.\n const {\n exportPNG,\n exportPDF,\n isExporting: isExportingImage,\n } = useDashboardImageExport({ containerRef: boardRef, name: title \|\| 'dashboard' });\n const handleExportImage = useCallback(() => {\n void exportPNG();\n }, [exportPNG]);\n const handleExportPdf = useCallback(() => {\n void exportPDF();\n }, [exportPDF]);\n\n return (\n <div className=\"flex flex-col h-full min-w-0 overflow-hidden\">\n {/ Toolbar /}\n <DashboardToolbar\n dashboardId={dashboardId}\n title={title}\n onAddWidget={openWidgetPalette}\n onTogglePalette={togglePalette}\n isPaletteOpen={isPaletteOpen}\n onPaste={onPaste}\n onSave={onSave}\n isSaving={isSaving}\n onExport={onExport}\n onPublishTemplate={onPublishTemplate}\n onExportImage={handleExportImage}\n onExportPdf={handleExportPdf}\n isExportingImage={isExportingImage}\n onShare={() => setIsShareDialogOpen(true)}\n />\n\n {widgetCreateError && (\n <div role=\"alert\" className=\"mx-card-padding mt-control-gap flex-shrink-0\">\n {/ The section title has no catalog key — BOFF-6004 translated only the\n message and the Dismiss action — so it stays a literal until a key\n lands in src/translations/en.ts. /}\n <Section\n tone=\"danger\"\n padding=\"compact\"\n headingLevel={3}\n data-testid=\"widget-create-error\"\n title=\"Widget not created\"\n description={widgetCreateError}\n actions={\n <Button variant=\"outline\" size=\"sm\" onClick={() => setWidgetCreateError(null)}>\n {t('bigconsole.dashboards.canvas.dismiss', 'Dismiss')}\n </Button>\n }\n />\n </div>\n )}\n\n {/ Live wall-board freshness banner — renders only when the page has\n auto-refreshing widgets (e.g. the Live Bed Board) and not in edit mode. /}\n <TemplateSetupBanner widgets={widgetsArray} isEditMode={isEditMode} />\n <LiveBoardBanner widgets={widgetsArray} isEditMode={isEditMode} />\n\n {/ Global Filters Bar /}\n {showFilters && <GlobalFiltersBar dashboardId={dashboardId} onFilterChange={handleFilterChange} collapsible />}\n\n {/ Page Tabs - always show in edit mode so user can add first page /}\n {showPageTabs && (isEditMode \|\| pages.length > 0) && (\n <PageTabsManager\n pages={pages}\n activePageId={activePageId \|\| pages[0]?.id}\n editable={isEditMode}\n onPageSelect={onPageChange \|\| (() => {})}\n onPagesReorder={\n onPagesReorder\n ? (pageIds) => {\n // Convert string[] to DashboardPageTab[] for the callback\n const reorderedPages = pageIds.map((id) => pages.find((p) => p.id === id)!).filter(Boolean);\n onPagesReorder(reorderedPages);\n }\n : undefined\n }\n onPageCreate={onPageAdd}\n onPageRename={onPageRename}\n onPageDuplicate={onPageDuplicate}\n onPageDelete={onPageDelete}\n />\n )}\n\n {/ Main content area with palette and canvas.\n When the properties inspector is open we reserve equal space on the\n right so the (fixed, non-modal) panel docks beside the canvas instead\n of overlaying the selected widget. /}\n <div\n data-testid=\"dashboard-canvas-panes\"\n className={`flex flex-1 min-w-0 overflow-hidden ${\n // Only reserve the inspector gutter where there is room for both. The\n // panel is `min(420px, 100vw)` wide, so below `lg` it overlays the\n // board instead — reserving 420px there left the canvas a sliver.\n configPanelOpen ? 'lg:mr-[var(--bc-inspector-width,420px)]' : ''\n }`}\n >\n {/ Widget Palette Sidebar /}\n {isEditMode && (\n <WidgetPalette\n isOpen={isPaletteOpen}\n onClose={togglePalette}\n onWidgetSelect={handlePaletteWidgetSelect}\n onDragStart={handlePaletteDragStart}\n onDragEnd={handlePaletteDragEnd}\n installedWidgets={installedWidgets}\n installedWidgetsLoading={installedWidgetsLoading}\n definitions={widgetCatalog}\n />\n )}\n\n {/\n The board. This is the one `primary` region on the route — everything\n above it is bare chrome or a compact status strip, so the widgets are\n what the eye lands on. It keeps the recessed canvas surface on purpose:\n the widgets are the raised cards, the board is the well they sit in.\n The drop border is always 2px (transparent when idle) so drag-over\n highlights without nudging the whole board.\n /}\n <div\n ref={containerRef}\n role=\"region\"\n aria-label=\"Dashboard board\"\n data-section-emphasis=\"primary\"\n data-testid=\"dashboard-board\"\n className=\"relative min-w-0 flex-1 overflow-auto border-2 border-transparent bg-bg-sunken motion-safe:transition-[border-color,background-color]\"\n onDrop={handleCanvasDrop}\n onDragOver={handleCanvasDragOver}\n onClick={() => {\n if (isEditMode) {\n selectWidget(null);\n }\n }}\n style={\n isDraggingWidget\n ? {\n borderStyle: 'dashed',\n borderColor: 'var(--color-action-primary-bg)',\n backgroundColor: 'var(--color-bg-accentSubtle)',\n }\n : undefined\n }\n >\n {/ Drop zone indicator /}\n {isDraggingWidget && (\n <div\n style={{\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n padding: 'var(--space-pagePadding)',\n backgroundColor: 'var(--color-bg-surface)',\n borderRadius: 'var(--radius-card)',\n boxShadow: 'var(--shadow-elevation-2)',\n textAlign: 'center',\n pointerEvents: 'none',\n zIndex: 100,\n }}\n >\n <p style={{ fontSize: 'var(--font-size-body-md)', color: 'var(--color-text-primary)', margin: 0 }}>\n {t('bigconsole.dashboards.canvas.dropToAddBefore', 'Drop to add')} <strong>{dragWidgetType}</strong>{' '}\n {t('bigconsole.dashboards.canvas.dropToAddAfter', 'widget')}\n </p>\n </div>\n )}\n\n <div\n ref={boardRef}\n className=\"min-h-full origin-top-left transition-transform\"\n style={{\n transform: `scale(${zoomLevel / 100})`,\n width: `${100 / (zoomLevel / 100)}%`,\n }}\n >\n {widgetsArray.length > 0 ? (\n <CrossFilterProvider\n enabled={enableCrossFilter}\n onCrossFilter={(_filters) => {\n // Cross-filter applied - widget queries can access filter values\n }}\n >\n <DashboardGrid\n widgets={widgetsArray}\n cols={gridColumns}\n isEditMode={isEditMode}\n width={containerWidth}\n onLayoutChange={handleLayoutChange}\n onWidgetSelect={handleWidgetSelect}\n selectedWidgetId={selectedWidgetId}\n />\n </CrossFilterProvider>\n ) : (\n <div className=\"flex min-h-[min(400px,60vh)] items-center justify-center p-card-padding\">\n <Section\n headingLevel={3}\n className=\"w-full max-w-md\"\n data-testid=\"dashboard-empty-board\"\n headerClassName=\"mb-form-gap\"\n title={t('bigconsole.dashboards.canvas.noWidgetsTitle', 'No widgets yet')}\n description={t(\n 'bigconsole.dashboards.canvas.noWidgetsDescription',\n 'Add widgets to build your dashboard. Click the \"Add Widget\" button to get started.'\n )}\n >\n {isEditMode && (\n <Button onClick={openWidgetPalette}>\n <Plus className=\"size-4\" />\n {t('bigconsole.dashboards.canvas.addWidget', 'Add Widget')}\n </Button>\n )}\n </Section>\n </div>\n )}\n </div>\n </div>\n </div>\n\n {/ Properties Panel /}\n <WidgetInspector isOpen={configPanelOpen} onClose={closeConfigPanel} />\n\n {/ Share Dialog */}\n <ShareDialog\n dashboardId={dashboardId}\n dashboardName={title \|\| t('bigconsole.dashboards.canvas.dashboardFallbackName', 'Dashboard')}\n isOpen={isShareDialogOpen}\n onClose={() => setIsShareDialogOpen(false)}\n visibility={dashboardVisibility}\n onVisibilityChange={handleVisibilityChange}\n canChangeVisibility={canUpdateDashboard}\n />\n </div>\n );\n});\n\nexport default DashboardCanvas;\n"],"mappings":"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"}