@burdenoff/microfe-bigconsole 2026.924.2 → 2026.924.3

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 { 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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"}
+{"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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"}

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

@@ -3,10 +3,10 @@ import { useDashboardStore as t } from "../../store/dashboardStore.js";
 import "../../store/index.js";
 import { CrossFilterProvider as n } from "../../contexts/CrossFilterContext.js";
 import "../../contexts/index.js";
-import { Section as r } from "../common/Section.js";
-import "../common/index.js";
-import { useBigConsole as i } from "../../context/BigConsoleContext.js";
+import { useBigConsole as r } from "../../context/BigConsoleContext.js";
 import "../../context/index.js";
+import { Section as i } from "../common/Section.js";
+import "../common/index.js";
 import { getWidgetDefinition as a } from "../widgets/WidgetRegistry.js";
 import o from "../../hooks/useWidgetCatalog.js";
 import s from "../../hooks/useWidgetOperations.js";
@@ -31,9 +31,9 @@ import "../builder/index.js";
 import { memo as f, useCallback as p, useEffect as de, useMemo as fe, useRef as m, useState as h } from "react";
 import { usePermissions as pe } from "@burdenoff/fe-libs/shared/providers/shell";
 import { Plus as me } from "lucide-react";
-import { useI18n as he } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 import { Button as g } from "@burdenoff/fe-libs/ui";
 import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import { useI18n as he } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 //#region src/bigconsole/components/dashboard/DashboardCanvas.tsx
 var y = f(function({ dashboardId: f, pageId: y, title: b, onPaste: ge, onSave: _e, isSaving: ve = !1, onExport: ye, onPublishTemplate: be, pages: x = [], activePageId: xe, onPageChange: Se, onPagesReorder: S, onPageAdd: Ce, onPageRename: we, onPageDuplicate: Te, onPageDelete: Ee, showFilters: De = !0, showPageTabs: Oe = !0, enableCrossFilter: ke = !0 }) {
 	let { t: C } = he(), w = m(null), T = m(null), [E, Ae] = h(1200), [je, D] = h(!1), [O, k] = h(null), [A, j] = h(!1), [Me, M] = h(null), [N, Ne] = h(null), P = t((e) => e.viewMode === "edit"), F = t((e) => e.currentDashboard), { updateDashboard: I } = c({ skipFetch: !0 }), { hasPermission: Pe } = pe(), Fe = Pe(u.DASHBOARD_UPDATE), Ie = N?.id === f ? N.value : F?.id === f ? F.visibility : void 0, Le = p(async (e) => {
@@ -46,7 +46,7 @@ var y = f(function({ dashboardId: f, pageId: y, title: b, onPaste: ge, onSave: _
 			id: f,
 			value: t.visibility ?? e
 		});
-	}, [f, I]), { workspaceId: L, apiGatewayUrl: R, authToken: z } = i(), { installedWidgets: Re, loading: ze } = d({
+	}, [f, I]), { workspaceId: L, apiGatewayUrl: R, authToken: z } = r(), { installedWidgets: Re, loading: ze } = d({
 		workspaceId: L,
 		apiGatewayUrl: R,
 		authToken: z,
@@ -246,7 +246,7 @@ var y = f(function({ dashboardId: f, pageId: y, title: b, onPaste: ge, onSave: _
 			O && /* @__PURE__ */ _("div", {
 				role: "alert",
 				className: "mx-card-padding mt-control-gap flex-shrink-0",
-				children: /* @__PURE__ */ _(r, {
+				children: /* @__PURE__ */ _(i, {
 					tone: "danger",
 					padding: "compact",
 					headingLevel: 3,
@@ -364,7 +364,7 @@ var y = f(function({ dashboardId: f, pageId: y, title: b, onPaste: ge, onSave: _
 							})
 						}) : /* @__PURE__ */ _("div", {
 							className: "flex min-h-[min(400px,60vh)] items-center justify-center p-card-padding",
-							children: /* @__PURE__ */ _(r, {
+							children: /* @__PURE__ */ _(i, {
 								headingLevel: 3,
 								className: "w-full max-w-md",
 								"data-testid": "dashboard-empty-board",

package/dist/bigconsole/components/dashboard/DashboardStatusPill.js

@@ -0,0 +1,53 @@
+import { useTr as e } from "../../../shared/hooks/useTr.js";
+import { memo as t, useCallback as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/bigconsole/components/dashboard/DashboardStatusPill.tsx
+var a = {
+	PUBLISHED: "var(--color-status-success-bg)",
+	DRAFT: "var(--color-text-muted)",
+	ARCHIVED: "var(--color-status-warning-bg)"
+};
+function o() {
+	let t = e();
+	return n((e) => {
+		switch (e) {
+			case "PUBLISHED": return t("bigconsole.dashboards.status.published", "Published");
+			case "ARCHIVED": return t("bigconsole.dashboards.status.archived", "Archived");
+			default: return t("bigconsole.dashboards.status.draft", "Draft");
+		}
+	}, [t]);
+}
+var s = t(function({ status: e, label: t }) {
+	return /* @__PURE__ */ i("span", {
+		"data-testid": "dashboard-status",
+		style: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: "var(--space-iconGap)",
+			padding: "2px 8px",
+			borderRadius: "var(--radius-pill)",
+			backgroundColor: "var(--color-bg-sunken)",
+			border: "1px solid var(--color-border-subtle)",
+			fontSize: "10px",
+			fontWeight: "var(--font-weight-semibold)",
+			textTransform: "uppercase",
+			letterSpacing: "0.02em",
+			color: "var(--color-text-secondary)",
+			whiteSpace: "nowrap"
+		},
+		children: [/* @__PURE__ */ r("span", {
+			"aria-hidden": "true",
+			style: {
+				width: 6,
+				height: 6,
+				borderRadius: "50%",
+				backgroundColor: a[e],
+				flexShrink: 0
+			}
+		}), t]
+	});
+});
+//#endregion
+export { s as default, o as useDashboardStatusLabel };
+
+//# sourceMappingURL=DashboardStatusPill.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardStatusPill.js","names":[],"sources":["../../../../src/bigconsole/components/dashboard/DashboardStatusPill.tsx"],"sourcesContent":["/**\n * DashboardStatusPill\n *\n * Compact lifecycle badge for a dashboard (Draft / Published / Archived).\n * Shared by the Dashboards list and the Overview's recent dashboards so the\n * same state always reads the same way.\n */\n\nimport { type FC, memo, useCallback } from 'react';\nimport { useTr } from '../../../shared/hooks/useTr';\nimport type { DashboardListStatus } from '../../hooks/useDashboardOperations';\n\n/**\n * Lifecycle status of a dashboard.\n *\n * Backed by `Dashboard.status` (DashboardStatus: DRAFT | PUBLISHED | ARCHIVED).\n * Whether a board is a published surface or still a draft is the fact a list of\n * boards is most often scanned for.\n */\nconst DASHBOARD_STATUS_DOT: Record<DashboardListStatus, string> = {\n  PUBLISHED: 'var(--color-status-success-bg)',\n  DRAFT: 'var(--color-text-muted)',\n  ARCHIVED: 'var(--color-status-warning-bg)',\n};\n\n/** Translated label for a dashboard lifecycle status. */\nexport function useDashboardStatusLabel(): (status: DashboardListStatus) => string {\n  const tr = useTr();\n  return useCallback(\n    (status: DashboardListStatus) => {\n      switch (status) {\n        case 'PUBLISHED':\n          return tr('bigconsole.dashboards.status.published', 'Published');\n        case 'ARCHIVED':\n          return tr('bigconsole.dashboards.status.archived', 'Archived');\n        default:\n          return tr('bigconsole.dashboards.status.draft', 'Draft');\n      }\n    },\n    [tr]\n  );\n}\n\nexport interface DashboardStatusPillProps {\n  status: DashboardListStatus;\n  label: string;\n}\n\nexport const DashboardStatusPill: FC<DashboardStatusPillProps> = memo(function DashboardStatusPill({ status, label }) {\n  return (\n    <span\n      data-testid=\"dashboard-status\"\n      style={{\n        display: 'inline-flex',\n        alignItems: 'center',\n        gap: 'var(--space-iconGap)',\n        padding: '2px 8px',\n        borderRadius: 'var(--radius-pill)',\n        backgroundColor: 'var(--color-bg-sunken)',\n        border: '1px solid var(--color-border-subtle)',\n        fontSize: '10px',\n        fontWeight: 'var(--font-weight-semibold)',\n        textTransform: 'uppercase',\n        letterSpacing: '0.02em',\n        color: 'var(--color-text-secondary)',\n        whiteSpace: 'nowrap',\n      }}\n    >\n      <span\n        aria-hidden=\"true\"\n        style={{\n          width: 6,\n          height: 6,\n          borderRadius: '50%',\n          backgroundColor: DASHBOARD_STATUS_DOT[status],\n          flexShrink: 0,\n        }}\n      />\n      {label}\n    </span>\n  );\n});\n\nexport default DashboardStatusPill;\n"],"mappings":";;;;AAmBA,IAAM,IAA4D;CAChE,WAAW;CACX,OAAO;CACP,UAAU;CACX;AAGD,SAAgB,IAAmE;CACjF,IAAM,IAAK,GAAO;AAClB,QAAO,GACJ,MAAgC;AAC/B,UAAQ,GAAR;GACE,KAAK,YACH,QAAO,EAAG,0CAA0C,YAAY;GAClE,KAAK,WACH,QAAO,EAAG,yCAAyC,WAAW;GAChE,QACE,QAAO,EAAG,sCAAsC,QAAQ;;IAG9D,CAAC,EAAG,CACL;;AAQH,IAAa,IAAoD,EAAK,SAA6B,EAAE,WAAQ,YAAS;AACpH,QACE,kBAAC,QAAD;EACE,eAAY;EACZ,OAAO;GACL,SAAS;GACT,YAAY;GACZ,KAAK;GACL,SAAS;GACT,cAAc;GACd,iBAAiB;GACjB,QAAQ;GACR,UAAU;GACV,YAAY;GACZ,eAAe;GACf,eAAe;GACf,OAAO;GACP,YAAY;GACb;YAhBH,CAkBE,kBAAC,QAAD;GACE,eAAY;GACZ,OAAO;IACL,OAAO;IACP,QAAQ;IACR,cAAc;IACd,iBAAiB,EAAqB;IACtC,YAAY;IACb;GACD,CAAA,EACD,EACI;;EAET"}

package/dist/bigconsole/components/dashboard/DashboardToolbar.js

@@ -10,15 +10,15 @@ import { memo as a, useCallback as o } from "react";
 import { PermissionButton as s } from "@burdenoff/fe-libs/shared/components";
 import { usePermissions as c } from "@burdenoff/fe-libs/shared/providers/shell";
 import { Clipboard as l, Download as u, Eye as d, FileText as f, Image as p, Minus as m, PanelLeft as h, PanelLeftClose as g, Pencil as _, Plus as v, RotateCcw as y, Save as b, Share2 as x, Store as S } from "lucide-react";
-import { useI18n as C } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { Button as w, Spinner as T, Tooltip as E, TooltipContent as D, TooltipProvider as O, TooltipTrigger as k } from "@burdenoff/fe-libs/ui";
-import { Fragment as A, jsx as j, jsxs as M } from "react/jsx-runtime";
+import { Button as C, Spinner as w, Tooltip as T, TooltipContent as E, TooltipProvider as D, TooltipTrigger as O } from "@burdenoff/fe-libs/ui";
+import { Fragment as k, jsx as A, jsxs as j } from "react/jsx-runtime";
+import { useI18n as M } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 //#region src/bigconsole/components/dashboard/DashboardToolbar.tsx
 var N = a(function({ dashboardId: a, title: N, onAddWidget: P, onTogglePalette: F, isPaletteOpen: I = !1, onPaste: L, onSave: R, isSaving: z = !1, onExport: B, onPublishTemplate: V, onExportImage: H, onExportPdf: U, isExportingImage: W = !1, onShare: G }) {
-	let { hasPermission: K } = c(), { t: q } = C(), J = t((e) => e.viewMode === "edit"), Y = t((e) => e.toggleViewMode), X = t((e) => e.zoomLevel), Z = t((e) => e.setZoomLevel), Q = !!e((e) => e.clipboardWidgetId), $ = o(() => {
+	let { hasPermission: K } = c(), { t: q } = M(), J = t((e) => e.viewMode === "edit"), Y = t((e) => e.toggleViewMode), X = t((e) => e.zoomLevel), Z = t((e) => e.setZoomLevel), Q = !!e((e) => e.clipboardWidgetId), $ = o(() => {
 		Q && L && L();
 	}, [Q, L]);
-	return /* @__PURE__ */ j(O, { children: /* @__PURE__ */ M(n, {
+	return /* @__PURE__ */ A(D, { children: /* @__PURE__ */ j(n, {
 		emphasis: "bare",
 		padding: "none",
 		"aria-label": N ? `Board toolbar — ${N}` : "Board toolbar",
@@ -26,156 +26,156 @@ var N = a(function({ dashboardId: a, title: N, onAddWidget: P, onTogglePalette:
 		className: "flex-shrink-0 border-b border-[var(--color-border-subtle)] bg-bg-surface px-4 py-2",
 		bodyClassName: "flex flex-wrap items-center justify-between gap-x-4 gap-y-2",
 		children: [
-			/* @__PURE__ */ j("div", {
+			/* @__PURE__ */ A("div", {
 				className: "flex min-w-0 items-center gap-4",
-				children: a && /* @__PURE__ */ j(i, { dashboardId: a })
+				children: a && /* @__PURE__ */ A(i, { dashboardId: a })
 			}),
-			/* @__PURE__ */ M("div", {
+			/* @__PURE__ */ j("div", {
 				role: "group",
 				"aria-label": "Zoom",
 				className: "flex min-w-0 items-center gap-1 border-l border-[var(--color-border-subtle)] pl-4",
 				children: [
-					/* @__PURE__ */ M(E, { children: [/* @__PURE__ */ j(k, {
+					/* @__PURE__ */ j(T, { children: [/* @__PURE__ */ A(O, {
 						asChild: !0,
-						children: /* @__PURE__ */ j(w, {
+						children: /* @__PURE__ */ A(C, {
 							variant: "ghost",
 							size: "icon-sm",
 							onClick: () => Z(Math.max(50, X - 10)),
 							disabled: X <= 50,
-							children: /* @__PURE__ */ j(m, { className: "size-4" })
+							children: /* @__PURE__ */ A(m, { className: "size-4" })
 						})
-					}), /* @__PURE__ */ j(D, { children: q("bigconsole.dashboards.toolbar.zoomOut", "Zoom out") })] }),
-					/* @__PURE__ */ M("span", {
+					}), /* @__PURE__ */ A(E, { children: q("bigconsole.dashboards.toolbar.zoomOut", "Zoom out") })] }),
+					/* @__PURE__ */ j("span", {
 						className: "text-sm text-text-secondary w-12 text-center",
 						children: [X, "%"]
 					}),
-					/* @__PURE__ */ M(E, { children: [/* @__PURE__ */ j(k, {
+					/* @__PURE__ */ j(T, { children: [/* @__PURE__ */ A(O, {
 						asChild: !0,
-						children: /* @__PURE__ */ j(w, {
+						children: /* @__PURE__ */ A(C, {
 							variant: "ghost",
 							size: "icon-sm",
 							onClick: () => Z(Math.min(200, X + 10)),
 							disabled: X >= 200,
-							children: /* @__PURE__ */ j(v, { className: "size-4" })
+							children: /* @__PURE__ */ A(v, { className: "size-4" })
 						})
-					}), /* @__PURE__ */ j(D, { children: q("bigconsole.dashboards.toolbar.zoomIn", "Zoom in") })] }),
-					/* @__PURE__ */ M(E, { children: [/* @__PURE__ */ j(k, {
+					}), /* @__PURE__ */ A(E, { children: q("bigconsole.dashboards.toolbar.zoomIn", "Zoom in") })] }),
+					/* @__PURE__ */ j(T, { children: [/* @__PURE__ */ A(O, {
 						asChild: !0,
-						children: /* @__PURE__ */ M(w, {
+						children: /* @__PURE__ */ j(C, {
 							variant: "ghost",
 							size: "sm",
 							onClick: () => Z(100),
-							children: [/* @__PURE__ */ j(y, { className: "size-3.5 mr-1" }), q("bigconsole.dashboards.toolbar.reset", "Reset")]
+							children: [/* @__PURE__ */ A(y, { className: "size-3.5 mr-1" }), q("bigconsole.dashboards.toolbar.reset", "Reset")]
 						})
-					}), /* @__PURE__ */ j(D, { children: q("bigconsole.dashboards.toolbar.resetZoomTooltip", "Reset zoom to 100%") })] })
+					}), /* @__PURE__ */ A(E, { children: q("bigconsole.dashboards.toolbar.resetZoomTooltip", "Reset zoom to 100%") })] })
 				]
 			}),
-			/* @__PURE__ */ M("div", {
+			/* @__PURE__ */ j("div", {
 				role: "group",
 				"aria-label": "Board actions",
 				className: "flex min-w-0 flex-wrap items-center justify-end gap-2 border-l border-[var(--color-border-subtle)] pl-4",
 				children: [
-					J && /* @__PURE__ */ M(A, { children: [
-						F && /* @__PURE__ */ M(E, { children: [/* @__PURE__ */ j(k, {
+					J && /* @__PURE__ */ j(k, { children: [
+						F && /* @__PURE__ */ j(T, { children: [/* @__PURE__ */ A(O, {
 							asChild: !0,
-							children: /* @__PURE__ */ M(w, {
+							children: /* @__PURE__ */ j(C, {
 								variant: I ? "secondary" : "outline",
 								size: "sm",
 								onClick: F,
-								children: [j(I ? g : h, { className: "size-4" }), q("bigconsole.dashboards.toolbar.widgets", "Widgets")]
+								children: [A(I ? g : h, { className: "size-4" }), q("bigconsole.dashboards.toolbar.widgets", "Widgets")]
 							})
-						}), /* @__PURE__ */ j(D, { children: I ? q("bigconsole.dashboards.toolbar.hidePalette", "Hide widget palette") : q("bigconsole.dashboards.toolbar.showPalette", "Show widget palette for drag & drop") })] }),
-						/* @__PURE__ */ M(E, { children: [/* @__PURE__ */ j(k, {
+						}), /* @__PURE__ */ A(E, { children: I ? q("bigconsole.dashboards.toolbar.hidePalette", "Hide widget palette") : q("bigconsole.dashboards.toolbar.showPalette", "Show widget palette for drag & drop") })] }),
+						/* @__PURE__ */ j(T, { children: [/* @__PURE__ */ A(O, {
 							asChild: !0,
-							children: /* @__PURE__ */ M(w, {
+							children: /* @__PURE__ */ j(C, {
 								variant: "ghost",
 								size: "sm",
 								onClick: $,
 								disabled: !Q,
-								children: [/* @__PURE__ */ j(l, { className: "size-4" }), q("bigconsole.dashboards.toolbar.paste", "Paste")]
+								children: [/* @__PURE__ */ A(l, { className: "size-4" }), q("bigconsole.dashboards.toolbar.paste", "Paste")]
 							})
-						}), /* @__PURE__ */ j(D, { children: q("bigconsole.dashboards.toolbar.pasteTooltip", "Paste widget from clipboard") })] }),
-						/* @__PURE__ */ j(s, {
+						}), /* @__PURE__ */ A(E, { children: q("bigconsole.dashboards.toolbar.pasteTooltip", "Paste widget from clipboard") })] }),
+						/* @__PURE__ */ A(s, {
 							permission: r.WIDGET_CREATE,
 							deniedBehavior: "hide",
-							children: /* @__PURE__ */ M(w, {
+							children: /* @__PURE__ */ j(C, {
 								size: "sm",
 								onClick: P,
-								children: [/* @__PURE__ */ j(v, { className: "size-4" }), q("bigconsole.dashboards.toolbar.addWidget", "Add Widget")]
+								children: [/* @__PURE__ */ A(v, { className: "size-4" }), q("bigconsole.dashboards.toolbar.addWidget", "Add Widget")]
 							})
 						})
 					] }),
-					/* @__PURE__ */ j(w, {
+					/* @__PURE__ */ A(C, {
 						variant: J ? "secondary" : "outline",
 						size: "sm",
 						onClick: Y,
-						children: J ? /* @__PURE__ */ M(A, { children: [/* @__PURE__ */ j(d, { className: "size-4" }), q("bigconsole.dashboards.toolbar.preview", "Preview")] }) : /* @__PURE__ */ M(A, { children: [/* @__PURE__ */ j(_, { className: "size-4" }), q("bigconsole.dashboards.toolbar.edit", "Edit")] })
+						children: J ? /* @__PURE__ */ j(k, { children: [/* @__PURE__ */ A(d, { className: "size-4" }), q("bigconsole.dashboards.toolbar.preview", "Preview")] }) : /* @__PURE__ */ j(k, { children: [/* @__PURE__ */ A(_, { className: "size-4" }), q("bigconsole.dashboards.toolbar.edit", "Edit")] })
 					}),
-					R && /* @__PURE__ */ j(w, {
+					R && /* @__PURE__ */ A(C, {
 						variant: "outline",
 						size: "sm",
 						onClick: R,
 						disabled: z,
-						children: z ? /* @__PURE__ */ M(A, { children: [/* @__PURE__ */ j(T, { className: "size-4" }), q("bigconsole.dashboards.toolbar.saving", "Saving...")] }) : /* @__PURE__ */ M(A, { children: [/* @__PURE__ */ j(b, { className: "size-4" }), q("bigconsole.dashboards.toolbar.save", "Save")] })
+						children: z ? /* @__PURE__ */ j(k, { children: [/* @__PURE__ */ A(w, { className: "size-4" }), q("bigconsole.dashboards.toolbar.saving", "Saving...")] }) : /* @__PURE__ */ j(k, { children: [/* @__PURE__ */ A(b, { className: "size-4" }), q("bigconsole.dashboards.toolbar.save", "Save")] })
 					}),
-					G && /* @__PURE__ */ j(s, {
+					G && /* @__PURE__ */ A(s, {
 						permission: r.DASHBOARD_SHARE,
 						deniedBehavior: "hide",
-						children: /* @__PURE__ */ M(E, { children: [/* @__PURE__ */ j(k, {
+						children: /* @__PURE__ */ j(T, { children: [/* @__PURE__ */ A(O, {
 							asChild: !0,
-							children: /* @__PURE__ */ M(w, {
+							children: /* @__PURE__ */ j(C, {
 								variant: "outline",
 								size: "sm",
 								onClick: G,
-								children: [/* @__PURE__ */ j(x, { className: "size-4" }), q("bigconsole.dashboards.toolbar.share", "Share")]
+								children: [/* @__PURE__ */ A(x, { className: "size-4" }), q("bigconsole.dashboards.toolbar.share", "Share")]
 							})
-						}), /* @__PURE__ */ j(D, { children: q("bigconsole.dashboards.toolbar.shareTooltip", "Share dashboard with others") })] })
+						}), /* @__PURE__ */ A(E, { children: q("bigconsole.dashboards.toolbar.shareTooltip", "Share dashboard with others") })] })
 					}),
-					V && /* @__PURE__ */ j(s, {
+					V && /* @__PURE__ */ A(s, {
 						permission: r.DASHBOARD_PUBLISH,
 						deniedBehavior: "hide",
-						children: /* @__PURE__ */ M(E, { children: [/* @__PURE__ */ j(k, {
+						children: /* @__PURE__ */ j(T, { children: [/* @__PURE__ */ A(O, {
 							asChild: !0,
-							children: /* @__PURE__ */ M(w, {
+							children: /* @__PURE__ */ j(C, {
 								variant: "outline",
 								size: "sm",
 								onClick: V,
-								children: [/* @__PURE__ */ j(S, { className: "size-4" }), /* @__PURE__ */ j("span", {
+								children: [/* @__PURE__ */ A(S, { className: "size-4" }), /* @__PURE__ */ A("span", {
 									className: "hidden sm:inline",
 									children: q("bigconsole.dashboards.toolbar.publish", "Publish")
 								})]
 							})
-						}), /* @__PURE__ */ j(D, { children: q("bigconsole.dashboards.toolbar.publishTooltip", "Publish this dashboard as a reusable template") })] })
+						}), /* @__PURE__ */ A(E, { children: q("bigconsole.dashboards.toolbar.publishTooltip", "Publish this dashboard as a reusable template") })] })
 					}),
-					B && /* @__PURE__ */ M(E, { children: [/* @__PURE__ */ j(k, {
+					B && /* @__PURE__ */ j(T, { children: [/* @__PURE__ */ A(O, {
 						asChild: !0,
-						children: /* @__PURE__ */ M(w, {
+						children: /* @__PURE__ */ j(C, {
 							variant: "outline",
 							size: "sm",
 							onClick: B,
-							children: [/* @__PURE__ */ j(u, { className: "size-4" }), q("bigconsole.dashboards.toolbar.export", "Export")]
+							children: [/* @__PURE__ */ A(u, { className: "size-4" }), q("bigconsole.dashboards.toolbar.export", "Export")]
 						})
-					}), /* @__PURE__ */ j(D, { children: q("bigconsole.dashboards.toolbar.exportTooltip", "Export dashboard to JSON") })] }),
-					H && /* @__PURE__ */ M(E, { children: [/* @__PURE__ */ j(k, {
+					}), /* @__PURE__ */ A(E, { children: q("bigconsole.dashboards.toolbar.exportTooltip", "Export dashboard to JSON") })] }),
+					H && /* @__PURE__ */ j(T, { children: [/* @__PURE__ */ A(O, {
 						asChild: !0,
-						children: /* @__PURE__ */ j(w, {
+						children: /* @__PURE__ */ A(C, {
 							variant: "outline",
 							size: "icon-sm",
 							onClick: H,
 							disabled: W,
-							children: j(W ? T : p, { className: "size-4" })
+							children: A(W ? w : p, { className: "size-4" })
 						})
-					}), /* @__PURE__ */ j(D, { children: q("bigconsole.dashboards.toolbar.exportPngTooltip", "Export board as PNG image") })] }),
-					U && /* @__PURE__ */ M(E, { children: [/* @__PURE__ */ j(k, {
+					}), /* @__PURE__ */ A(E, { children: q("bigconsole.dashboards.toolbar.exportPngTooltip", "Export board as PNG image") })] }),
+					U && /* @__PURE__ */ j(T, { children: [/* @__PURE__ */ A(O, {
 						asChild: !0,
-						children: /* @__PURE__ */ j(w, {
+						children: /* @__PURE__ */ A(C, {
 							variant: "outline",
 							size: "icon-sm",
 							onClick: U,
 							disabled: W,
-							children: /* @__PURE__ */ j(f, { className: "size-4" })
+							children: /* @__PURE__ */ A(f, { className: "size-4" })
 						})
-					}), /* @__PURE__ */ j(D, { children: q("bigconsole.dashboards.toolbar.exportPdfTooltip", "Export board as PDF") })] })
+					}), /* @__PURE__ */ A(E, { children: q("bigconsole.dashboards.toolbar.exportPdfTooltip", "Export board as PDF") })] })
 				]
 			})
 		]