@burdenoff/microfe-bigconsole 2026.805.3 → 2026.812.2

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

@@ -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 { 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 [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\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  // 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    // 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 (!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 result = await installTemplate({\n            templateId: selectedTemplate.id,\n            templateName: selectedTemplate.name,\n            content,\n            name: trimmedName,\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      onCreate,\n      onClose,\n      fetchTemplateContent,\n      installTemplate,\n      onTemplateInstalled,\n      t,\n    ]\n  );\n\n  return (\n    <Dialog open={isOpen} onOpenChange={(open) => !open && !isCreating && onClose()}>\n      <DialogContent\n        style={{ maxWidth: mode === 'template' ? '900px' : '480px', padding: 0, transition: 'max-width 0.2s ease' }}\n      >\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                borderRadius: 'var(--radius-card)',\n                backgroundColor: 'var(--color-action-primary-bg)',\n                boxShadow: 'var(--shadow-elevation-2)',\n              }}\n            >\n              <LayoutDashboard\n                style={{\n                  height: 'var(--size-icon-lg)',\n                  width: 'var(--size-icon-lg)',\n                  color: 'var(--color-action-primary-text)',\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                style={{\n                  display: 'flex',\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                  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                  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          {/* Form Content */}\n          <div style={{ padding: 'var(--space-pagePadding)' }}>\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('bigconsole.dashboards.createDialog.field.tagsInputPlaceholder', 'Type a tag and press Enter')\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                  fontSize: 'var(--font-size-body-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          </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={isCreating || installing || !name.trim()}\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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"}
+{"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 { 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 [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\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  // 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    // 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 (!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 result = await installTemplate({\n            templateId: selectedTemplate.id,\n            templateName: selectedTemplate.name,\n            content,\n            name: trimmedName,\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      onCreate,\n      onClose,\n      fetchTemplateContent,\n      installTemplate,\n      onTemplateInstalled,\n      t,\n    ]\n  );\n\n  return (\n    <Dialog open={isOpen} onOpenChange={(open) => !open && !isCreating && 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                  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                  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          {/* 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={isCreating || installing || !name.trim()}\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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"}