@burdenoff/microfe-bigconsole 2026.510.54

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

@@ -0,0 +1 @@
+{"version":3,"file":"TemplatePicker.js","names":[],"sources":["../../../../../src/bigconsole/components/dashboard/TemplatePicker/TemplatePicker.tsx"],"sourcesContent":["/**\n * TemplatePicker Component\n *\n * Grid/List view for browsing and selecting dashboard templates.\n */\n\nimport React, { useState, useEffect, useCallback } from 'react';\nimport {\n  useDashboardTemplates,\n  type DashboardTemplateListItem,\n  type DashboardCategory,\n  type TemplateComplexity,\n} from '../../../hooks';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface TemplatePickerProps {\n  /** Modal mode: whether the modal is open */\n  isOpen?: boolean;\n  /** Modal mode: callback to close the modal */\n  onClose?: () => void;\n  /** Modal mode: callback when template is selected with name and placeholders */\n  onSelectTemplate?: (templateId: string, name: string, placeholderValues: Record<string, unknown>) => void;\n  /** Embedded mode: currently selected template ID */\n  selectedTemplateId?: string;\n  /** Embedded mode: callback when template is selected */\n  onSelect?: (template: DashboardTemplateListItem) => void;\n  /** Embedded mode: compact display without modal wrapper */\n  compact?: boolean;\n}\n\n// ============================================================================\n// Constants\n// ============================================================================\n\nconst CATEGORY_LABELS: Record<DashboardCategory, string> = {\n  ANALYTICS: 'Analytics',\n  OPERATIONS: 'Operations',\n  SALES: 'Sales',\n  MARKETING: 'Marketing',\n  FINANCE: 'Finance',\n  HR: 'Human Resources',\n  CUSTOM: 'Custom',\n};\n\nconst COMPLEXITY_COLORS: Record<TemplateComplexity, string> = {\n  BEGINNER: '#22c55e',\n  INTERMEDIATE: '#f59e0b',\n  ADVANCED: '#ef4444',\n};\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport function TemplatePicker({\n  isOpen,\n  onClose,\n  onSelectTemplate,\n  selectedTemplateId,\n  onSelect,\n  compact = false,\n}: TemplatePickerProps) {\n  const { templates, featuredTemplates, categories, loading, fetchTemplates, fetchFeaturedTemplates, searchTemplates } =\n    useDashboardTemplates();\n\n  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');\n  const [searchQuery, setSearchQuery] = useState('');\n  const [selectedCategory, setSelectedCategory] = useState<DashboardCategory | ''>('');\n  const [selectedComplexity, setSelectedComplexity] = useState<TemplateComplexity | ''>('');\n  const [selectedTemplate, setSelectedTemplate] = useState<DashboardTemplateListItem | null>(null);\n  const [showDetailsModal, setShowDetailsModal] = useState(false);\n  const [dashboardName, setDashboardName] = useState('');\n  const [placeholderValues, setPlaceholderValues] = useState<Record<string, unknown>>({});\n\n  // Determine if we should be active (modal mode uses isOpen, compact mode is always active)\n  const isActive = compact || isOpen;\n\n  // Fetch templates on mount/activation\n  useEffect(() => {\n    if (isActive) {\n      fetchTemplates();\n      fetchFeaturedTemplates();\n    }\n  }, [isActive, fetchTemplates, fetchFeaturedTemplates]);\n\n  // Handle search\n  useEffect(() => {\n    if (searchQuery) {\n      const debounce = setTimeout(() => {\n        searchTemplates(searchQuery, selectedCategory || undefined, selectedComplexity || undefined);\n      }, 300);\n      return () => clearTimeout(debounce);\n    } else if (isActive) {\n      fetchTemplates({\n        category: selectedCategory || undefined,\n        complexity: selectedComplexity || undefined,\n      });\n    }\n  }, [searchQuery, selectedCategory, selectedComplexity, isActive, searchTemplates, fetchTemplates]);\n\n  // Handle template selection\n  const handleSelectTemplate = useCallback(\n    (template: DashboardTemplateListItem) => {\n      // In compact/embedded mode, just call onSelect\n      if (compact && onSelect) {\n        onSelect(template);\n        return;\n      }\n\n      // In modal mode, show details modal\n      setSelectedTemplate(template);\n      setDashboardName(`${template.name} Dashboard`);\n      setShowDetailsModal(true);\n    },\n    [compact, onSelect]\n  );\n\n  // Handle create from template\n  const handleCreateFromTemplate = useCallback(async () => {\n    if (!selectedTemplate || !dashboardName.trim()) return;\n\n    onSelectTemplate?.(selectedTemplate.id, dashboardName.trim(), placeholderValues);\n    setShowDetailsModal(false);\n    setSelectedTemplate(null);\n    setDashboardName('');\n    setPlaceholderValues({});\n    onClose?.();\n  }, [selectedTemplate, dashboardName, placeholderValues, onSelectTemplate, onClose]);\n\n  // Render star rating\n  const renderRating = (rating: number | undefined, count: number) => {\n    if (!rating) return null;\n    return (\n      <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>\n        <span style={{ color: '#f59e0b' }}>★</span>\n        <span style={{ fontSize: '12px', color: 'var(--text-secondary)' }}>\n          {rating.toFixed(1)} ({count})\n        </span>\n      </div>\n    );\n  };\n\n  if (!isActive) return null;\n\n  const displayTemplates = searchQuery || selectedCategory || selectedComplexity ? templates : featuredTemplates;\n\n  // Compact/Embedded mode - render just the content without modal wrapper\n  if (compact) {\n    return (\n      <div>\n        {/* Compact Filters Bar */}\n        <div style={{ display: 'flex', gap: '8px', marginBottom: '12px', flexWrap: 'wrap' }}>\n          <input\n            type=\"text\"\n            value={searchQuery}\n            onChange={(e) => setSearchQuery(e.target.value)}\n            placeholder=\"Search templates...\"\n            style={{\n              flex: '1 1 150px',\n              padding: '6px 10px',\n              border: '1px solid var(--border-color)',\n              borderRadius: '4px',\n              fontSize: '12px',\n            }}\n          />\n          <select\n            value={selectedCategory}\n            onChange={(e) => setSelectedCategory(e.target.value as DashboardCategory | '')}\n            style={{\n              padding: '6px 10px',\n              border: '1px solid var(--border-color)',\n              borderRadius: '4px',\n              fontSize: '12px',\n              backgroundColor: 'var(--bg-primary)',\n            }}\n          >\n            <option value=\"\">All Categories</option>\n            {categories.map((cat) => (\n              <option key={cat} value={cat}>\n                {CATEGORY_LABELS[cat]}\n              </option>\n            ))}\n          </select>\n        </div>\n\n        {/* Compact Template Grid */}\n        {loading && displayTemplates.length === 0 ? (\n          <div style={{ textAlign: 'center', padding: '20px', color: 'var(--text-secondary)', fontSize: '13px' }}>\n            Loading templates...\n          </div>\n        ) : displayTemplates.length === 0 ? (\n          <div style={{ textAlign: 'center', padding: '20px', color: 'var(--text-secondary)', fontSize: '13px' }}>\n            No templates found\n          </div>\n        ) : (\n          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: '12px' }}>\n            {displayTemplates.map((template) => (\n              <CompactTemplateCard\n                key={template.id}\n                template={template}\n                isSelected={selectedTemplateId === template.id}\n                onSelect={() => handleSelectTemplate(template)}\n              />\n            ))}\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  // Modal mode - full modal wrapper\n  return (\n    <div\n      style={{\n        position: 'fixed',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        backgroundColor: 'rgba(0, 0, 0, 0.5)',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        zIndex: 9999,\n      }}\n      onClick={onClose}\n    >\n      <div\n        style={{\n          width: '90%',\n          maxWidth: '1000px',\n          maxHeight: '85vh',\n          backgroundColor: 'var(--bg-primary)',\n          borderRadius: '12px',\n          boxShadow: '0 8px 32px rgba(0, 0, 0, 0.2)',\n          overflow: 'hidden',\n          display: 'flex',\n          flexDirection: 'column',\n        }}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {/* Header */}\n        <div\n          style={{\n            padding: '20px 24px',\n            borderBottom: '1px solid var(--border-color)',\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'space-between',\n          }}\n        >\n          <div>\n            <h2 style={{ margin: 0, fontSize: '20px', fontWeight: 600 }}>Choose a Template</h2>\n            <p style={{ margin: '4px 0 0', fontSize: '13px', color: 'var(--text-secondary)' }}>\n              Start with a pre-built dashboard template\n            </p>\n          </div>\n          <button\n            onClick={onClose}\n            style={{\n              background: 'none',\n              border: 'none',\n              fontSize: '24px',\n              cursor: 'pointer',\n              color: 'var(--text-secondary)',\n            }}\n          >\n            x\n          </button>\n        </div>\n\n        {/* Filters Bar */}\n        <div\n          style={{\n            padding: '16px 24px',\n            borderBottom: '1px solid var(--border-color)',\n            display: 'flex',\n            gap: '12px',\n            alignItems: 'center',\n            flexWrap: 'wrap',\n          }}\n        >\n          {/* Search */}\n          <input\n            type=\"text\"\n            value={searchQuery}\n            onChange={(e) => setSearchQuery(e.target.value)}\n            placeholder=\"Search templates...\"\n            style={{\n              flex: '1 1 200px',\n              padding: '8px 12px',\n              border: '1px solid var(--border-color)',\n              borderRadius: '6px',\n              fontSize: '13px',\n            }}\n          />\n\n          {/* Category Filter */}\n          <select\n            value={selectedCategory}\n            onChange={(e) => setSelectedCategory(e.target.value as DashboardCategory | '')}\n            style={{\n              padding: '8px 12px',\n              border: '1px solid var(--border-color)',\n              borderRadius: '6px',\n              fontSize: '13px',\n              backgroundColor: 'var(--bg-primary)',\n            }}\n          >\n            <option value=\"\">All Categories</option>\n            {categories.map((cat) => (\n              <option key={cat} value={cat}>\n                {CATEGORY_LABELS[cat]}\n              </option>\n            ))}\n          </select>\n\n          {/* Complexity Filter */}\n          <select\n            value={selectedComplexity}\n            onChange={(e) => setSelectedComplexity(e.target.value as TemplateComplexity | '')}\n            style={{\n              padding: '8px 12px',\n              border: '1px solid var(--border-color)',\n              borderRadius: '6px',\n              fontSize: '13px',\n              backgroundColor: 'var(--bg-primary)',\n            }}\n          >\n            <option value=\"\">All Levels</option>\n            <option value=\"BEGINNER\">Beginner</option>\n            <option value=\"INTERMEDIATE\">Intermediate</option>\n            <option value=\"ADVANCED\">Advanced</option>\n          </select>\n\n          {/* View Toggle */}\n          <div style={{ display: 'flex', border: '1px solid var(--border-color)', borderRadius: '6px' }}>\n            <button\n              onClick={() => setViewMode('grid')}\n              style={{\n                padding: '8px 12px',\n                backgroundColor: viewMode === 'grid' ? 'var(--bg-secondary)' : 'transparent',\n                border: 'none',\n                cursor: 'pointer',\n                fontSize: '13px',\n              }}\n            >\n              Grid\n            </button>\n            <button\n              onClick={() => setViewMode('list')}\n              style={{\n                padding: '8px 12px',\n                backgroundColor: viewMode === 'list' ? 'var(--bg-secondary)' : 'transparent',\n                border: 'none',\n                cursor: 'pointer',\n                fontSize: '13px',\n              }}\n            >\n              List\n            </button>\n          </div>\n        </div>\n\n        {/* Templates Content */}\n        <div style={{ flex: 1, overflowY: 'auto', padding: '24px' }}>\n          {loading && displayTemplates.length === 0 ? (\n            <div style={{ textAlign: 'center', padding: '40px', color: 'var(--text-secondary)' }}>\n              Loading templates...\n            </div>\n          ) : displayTemplates.length === 0 ? (\n            <div style={{ textAlign: 'center', padding: '40px', color: 'var(--text-secondary)' }}>\n              No templates found. Try adjusting your filters.\n            </div>\n          ) : viewMode === 'grid' ? (\n            <div\n              style={{\n                display: 'grid',\n                gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',\n                gap: '20px',\n              }}\n            >\n              {displayTemplates.map((template) => (\n                <TemplateCard\n                  key={template.id}\n                  template={template}\n                  onSelect={() => handleSelectTemplate(template)}\n                  renderRating={renderRating}\n                />\n              ))}\n            </div>\n          ) : (\n            <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>\n              {displayTemplates.map((template) => (\n                <TemplateListItem\n                  key={template.id}\n                  template={template}\n                  onSelect={() => handleSelectTemplate(template)}\n                  renderRating={renderRating}\n                />\n              ))}\n            </div>\n          )}\n        </div>\n\n        {/* Footer */}\n        <div\n          style={{\n            padding: '16px 24px',\n            borderTop: '1px solid var(--border-color)',\n            display: 'flex',\n            justifyContent: 'space-between',\n            alignItems: 'center',\n          }}\n        >\n          <span style={{ fontSize: '13px', color: 'var(--text-secondary)' }}>\n            {displayTemplates.length} templates available\n          </span>\n          <button\n            onClick={onClose}\n            style={{\n              padding: '10px 20px',\n              backgroundColor: 'transparent',\n              border: '1px solid var(--border-color)',\n              borderRadius: '6px',\n              cursor: 'pointer',\n              fontSize: '14px',\n            }}\n          >\n            Cancel\n          </button>\n        </div>\n      </div>\n\n      {/* Template Details Modal */}\n      {showDetailsModal && selectedTemplate && (\n        <div\n          style={{\n            position: 'fixed',\n            top: 0,\n            left: 0,\n            right: 0,\n            bottom: 0,\n            backgroundColor: 'rgba(0, 0, 0, 0.5)',\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            zIndex: 10000,\n          }}\n          onClick={() => setShowDetailsModal(false)}\n        >\n          <div\n            style={{\n              width: '500px',\n              backgroundColor: 'var(--bg-primary)',\n              borderRadius: '12px',\n              boxShadow: '0 8px 32px rgba(0, 0, 0, 0.2)',\n              overflow: 'hidden',\n            }}\n            onClick={(e) => e.stopPropagation()}\n          >\n            <div\n              style={{\n                padding: '20px 24px',\n                borderBottom: '1px solid var(--border-color)',\n              }}\n            >\n              <h3 style={{ margin: 0, fontSize: '18px', fontWeight: 600 }}>Create from Template</h3>\n              <p style={{ margin: '4px 0 0', fontSize: '13px', color: 'var(--text-secondary)' }}>\n                {selectedTemplate.name}\n              </p>\n            </div>\n            <div style={{ padding: '24px' }}>\n              <div style={{ marginBottom: '20px' }}>\n                <label\n                  style={{\n                    display: 'block',\n                    marginBottom: '8px',\n                    fontSize: '13px',\n                    fontWeight: 500,\n                  }}\n                >\n                  Dashboard Name *\n                </label>\n                <input\n                  type=\"text\"\n                  value={dashboardName}\n                  onChange={(e) => setDashboardName(e.target.value)}\n                  placeholder=\"Enter dashboard name...\"\n                  style={{\n                    width: '100%',\n                    padding: '10px 12px',\n                    border: '1px solid var(--border-color)',\n                    borderRadius: '6px',\n                    fontSize: '14px',\n                  }}\n                />\n              </div>\n\n              {/* Template Info */}\n              <div\n                style={{\n                  padding: '16px',\n                  backgroundColor: 'var(--bg-secondary)',\n                  borderRadius: '8px',\n                }}\n              >\n                <div style={{ fontSize: '13px', color: 'var(--text-secondary)', marginBottom: '8px' }}>\n                  Template Details\n                </div>\n                <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px' }}>\n                  <div>\n                    <div style={{ fontSize: '11px', color: 'var(--text-tertiary)' }}>Category</div>\n                    <div style={{ fontSize: '13px' }}>{CATEGORY_LABELS[selectedTemplate.category]}</div>\n                  </div>\n                  <div>\n                    <div style={{ fontSize: '11px', color: 'var(--text-tertiary)' }}>Complexity</div>\n                    <div\n                      style={{\n                        fontSize: '13px',\n                        color: COMPLEXITY_COLORS[selectedTemplate.complexity],\n                      }}\n                    >\n                      {selectedTemplate.complexity}\n                    </div>\n                  </div>\n                  <div>\n                    <div style={{ fontSize: '11px', color: 'var(--text-tertiary)' }}>Used</div>\n                    <div style={{ fontSize: '13px' }}>{selectedTemplate.usageCount} times</div>\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              style={{\n                padding: '16px 24px',\n                borderTop: '1px solid var(--border-color)',\n                display: 'flex',\n                justifyContent: 'flex-end',\n                gap: '12px',\n              }}\n            >\n              <button\n                onClick={() => setShowDetailsModal(false)}\n                style={{\n                  padding: '10px 20px',\n                  backgroundColor: 'transparent',\n                  border: '1px solid var(--border-color)',\n                  borderRadius: '6px',\n                  cursor: 'pointer',\n                  fontSize: '14px',\n                }}\n              >\n                Cancel\n              </button>\n              <button\n                onClick={handleCreateFromTemplate}\n                disabled={!dashboardName.trim()}\n                style={{\n                  padding: '10px 20px',\n                  backgroundColor: dashboardName.trim() ? 'var(--primary)' : 'var(--bg-tertiary)',\n                  color: dashboardName.trim() ? 'white' : 'var(--text-secondary)',\n                  border: 'none',\n                  borderRadius: '6px',\n                  cursor: dashboardName.trim() ? 'pointer' : 'not-allowed',\n                  fontSize: '14px',\n                  fontWeight: 500,\n                }}\n              >\n                Create Dashboard\n              </button>\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\n// ============================================================================\n// Sub-components\n// ============================================================================\n\ninterface TemplateCardProps {\n  template: DashboardTemplateListItem;\n  onSelect: () => void;\n  renderRating: (rating: number | undefined, count: number) => React.ReactNode;\n}\n\nfunction TemplateCard({ template, onSelect, renderRating }: TemplateCardProps) {\n  return (\n    <div\n      onClick={onSelect}\n      style={{\n        backgroundColor: 'var(--bg-secondary)',\n        border: '1px solid var(--border-color)',\n        borderRadius: '10px',\n        overflow: 'hidden',\n        cursor: 'pointer',\n        transition: 'transform 0.15s, box-shadow 0.15s',\n      }}\n      onMouseOver={(e) => {\n        (e.currentTarget as HTMLDivElement).style.transform = 'translateY(-2px)';\n        (e.currentTarget as HTMLDivElement).style.boxShadow = '0 4px 12px rgba(0,0,0,0.1)';\n      }}\n      onMouseOut={(e) => {\n        (e.currentTarget as HTMLDivElement).style.transform = 'none';\n        (e.currentTarget as HTMLDivElement).style.boxShadow = 'none';\n      }}\n    >\n      {/* Thumbnail */}\n      <div\n        style={{\n          height: '140px',\n          backgroundColor: 'var(--bg-tertiary)',\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          borderBottom: '1px solid var(--border-color)',\n        }}\n      >\n        {template.previewUrl ? (\n          <img\n            src={template.previewUrl}\n            alt={template.name}\n            style={{ width: '100%', height: '100%', objectFit: 'cover' }}\n          />\n        ) : (\n          <span style={{ fontSize: '40px', color: 'var(--text-tertiary)' }}>📊</span>\n        )}\n      </div>\n\n      {/* Content */}\n      <div style={{ padding: '16px' }}>\n        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: '8px' }}>\n          <h3 style={{ margin: 0, fontSize: '14px', fontWeight: 600, lineHeight: '1.3' }}>{template.name}</h3>\n          {template.isFeatured && (\n            <span\n              style={{\n                fontSize: '9px',\n                padding: '2px 6px',\n                backgroundColor: '#fef3c7',\n                color: '#92400e',\n                borderRadius: '4px',\n                fontWeight: 600,\n                flexShrink: 0,\n              }}\n            >\n              FEATURED\n            </span>\n          )}\n        </div>\n\n        {template.description && (\n          <p\n            style={{\n              margin: '8px 0 0',\n              fontSize: '12px',\n              color: 'var(--text-secondary)',\n              lineHeight: '1.4',\n              display: '-webkit-box',\n              WebkitLineClamp: 2,\n              WebkitBoxOrient: 'vertical',\n              overflow: 'hidden',\n            }}\n          >\n            {template.description}\n          </p>\n        )}\n\n        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginTop: '12px', flexWrap: 'wrap' }}>\n          <span\n            style={{\n              fontSize: '10px',\n              padding: '2px 6px',\n              backgroundColor: 'var(--bg-tertiary)',\n              borderRadius: '4px',\n              color: 'var(--text-secondary)',\n            }}\n          >\n            {CATEGORY_LABELS[template.category]}\n          </span>\n          <span\n            style={{\n              fontSize: '10px',\n              padding: '2px 6px',\n              backgroundColor: `${COMPLEXITY_COLORS[template.complexity]}20`,\n              color: COMPLEXITY_COLORS[template.complexity],\n              borderRadius: '4px',\n              fontWeight: 500,\n            }}\n          >\n            {template.complexity}\n          </span>\n          {renderRating(template.rating, template.ratingCount)}\n        </div>\n      </div>\n    </div>\n  );\n}\n\ninterface TemplateListItemProps {\n  template: DashboardTemplateListItem;\n  onSelect: () => void;\n  renderRating: (rating: number | undefined, count: number) => React.ReactNode;\n}\n\nfunction TemplateListItem({ template, onSelect, renderRating }: TemplateListItemProps) {\n  return (\n    <div\n      onClick={onSelect}\n      style={{\n        display: 'flex',\n        alignItems: 'center',\n        gap: '16px',\n        padding: '16px',\n        backgroundColor: 'var(--bg-secondary)',\n        border: '1px solid var(--border-color)',\n        borderRadius: '8px',\n        cursor: 'pointer',\n        transition: 'background-color 0.15s',\n      }}\n    >\n      {/* Thumbnail */}\n      <div\n        style={{\n          width: '80px',\n          height: '60px',\n          backgroundColor: 'var(--bg-tertiary)',\n          borderRadius: '6px',\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          flexShrink: 0,\n        }}\n      >\n        {template.previewUrl ? (\n          <img\n            src={template.previewUrl}\n            alt={template.name}\n            style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: '6px' }}\n          />\n        ) : (\n          <span style={{ fontSize: '24px', color: 'var(--text-tertiary)' }}>📊</span>\n        )}\n      </div>\n\n      {/* Content */}\n      <div style={{ flex: 1, minWidth: 0 }}>\n        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>\n          <h3 style={{ margin: 0, fontSize: '14px', fontWeight: 600 }}>{template.name}</h3>\n          {template.isFeatured && (\n            <span\n              style={{\n                fontSize: '9px',\n                padding: '2px 6px',\n                backgroundColor: '#fef3c7',\n                color: '#92400e',\n                borderRadius: '4px',\n                fontWeight: 600,\n              }}\n            >\n              FEATURED\n            </span>\n          )}\n        </div>\n        {template.description && (\n          <p\n            style={{\n              margin: '4px 0 0',\n              fontSize: '12px',\n              color: 'var(--text-secondary)',\n              whiteSpace: 'nowrap',\n              overflow: 'hidden',\n              textOverflow: 'ellipsis',\n            }}\n          >\n            {template.description}\n          </p>\n        )}\n        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginTop: '8px' }}>\n          <span\n            style={{\n              fontSize: '10px',\n              padding: '2px 6px',\n              backgroundColor: 'var(--bg-tertiary)',\n              borderRadius: '4px',\n            }}\n          >\n            {CATEGORY_LABELS[template.category]}\n          </span>\n          <span\n            style={{\n              fontSize: '10px',\n              padding: '2px 6px',\n              backgroundColor: `${COMPLEXITY_COLORS[template.complexity]}20`,\n              color: COMPLEXITY_COLORS[template.complexity],\n              borderRadius: '4px',\n            }}\n          >\n            {template.complexity}\n          </span>\n          {renderRating(template.rating, template.ratingCount)}\n          <span style={{ fontSize: '11px', color: 'var(--text-tertiary)' }}>{template.usageCount} uses</span>\n        </div>\n      </div>\n\n      {/* Action */}\n      <button\n        style={{\n          padding: '8px 16px',\n          backgroundColor: 'var(--primary)',\n          color: 'white',\n          border: 'none',\n          borderRadius: '6px',\n          cursor: 'pointer',\n          fontSize: '13px',\n          fontWeight: 500,\n          flexShrink: 0,\n        }}\n      >\n        Use Template\n      </button>\n    </div>\n  );\n}\n\n// Compact template card for embedded mode\ninterface CompactTemplateCardProps {\n  template: DashboardTemplateListItem;\n  isSelected: boolean;\n  onSelect: () => void;\n}\n\nfunction CompactTemplateCard({ template, isSelected, onSelect }: CompactTemplateCardProps) {\n  return (\n    <div\n      onClick={onSelect}\n      style={{\n        backgroundColor: isSelected ? 'var(--color-action-primary-bg-subtle, #e0f2fe)' : 'var(--bg-secondary)',\n        border: `2px solid ${isSelected ? 'var(--color-action-primary-border, #3b82f6)' : 'var(--border-color)'}`,\n        borderRadius: '8px',\n        overflow: 'hidden',\n        cursor: 'pointer',\n        transition: 'all 0.15s ease',\n      }}\n    >\n      {/* Thumbnail */}\n      <div\n        style={{\n          height: '80px',\n          backgroundColor: 'var(--bg-tertiary)',\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          borderBottom: '1px solid var(--border-color)',\n        }}\n      >\n        {template.previewUrl ? (\n          <img\n            src={template.previewUrl}\n            alt={template.name}\n            style={{ width: '100%', height: '100%', objectFit: 'cover' }}\n          />\n        ) : (\n          <span style={{ fontSize: '28px', color: 'var(--text-tertiary)' }}>📊</span>\n        )}\n      </div>\n\n      {/* Content */}\n      <div style={{ padding: '10px' }}>\n        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '4px' }}>\n          <h4\n            style={{\n              margin: 0,\n              fontSize: '12px',\n              fontWeight: 600,\n              whiteSpace: 'nowrap',\n              overflow: 'hidden',\n              textOverflow: 'ellipsis',\n            }}\n          >\n            {template.name}\n          </h4>\n          {isSelected && (\n            <span style={{ color: 'var(--color-action-primary-text, #3b82f6)', fontSize: '14px' }}>✓</span>\n          )}\n        </div>\n        <div style={{ display: 'flex', gap: '4px', marginTop: '6px', flexWrap: 'wrap' }}>\n          <span\n            style={{\n              fontSize: '9px',\n              padding: '1px 4px',\n              backgroundColor: 'var(--bg-tertiary)',\n              borderRadius: '3px',\n              color: 'var(--text-secondary)',\n            }}\n          >\n            {CATEGORY_LABELS[template.category]}\n          </span>\n          <span\n            style={{\n              fontSize: '9px',\n              padding: '1px 4px',\n              backgroundColor: `${COMPLEXITY_COLORS[template.complexity]}20`,\n              color: COMPLEXITY_COLORS[template.complexity],\n              borderRadius: '3px',\n            }}\n          >\n            {template.complexity}\n          </span>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default TemplatePicker;\n"],"mappings":"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"}

package/dist/bigconsole/components/dashboard/TemplatePicker/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * TemplatePicker Components
+ */
+export { TemplatePicker, type TemplatePickerProps } from './TemplatePicker';
+export { default } from './TemplatePicker';
+//# sourceMappingURL=index.d.ts.map

package/dist/bigconsole/components/dashboard/TemplatePicker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/bigconsole/components/dashboard/TemplatePicker/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5E,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/bigconsole/components/dashboard/TemplatePicker/index.js

@@ -0,0 +1 @@
+import "./TemplatePicker.js";

package/dist/bigconsole/components/dashboard/WidgetPalette.d.ts

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import { WidgetDefinition } from '../widgets/WidgetRegistry';
+import { WidgetType } from '../../types';
+
+export interface WidgetPaletteProps {
+    /** Whether the palette is open */
+    isOpen: boolean;
+    /** Callback to close the palette */
+    onClose: () => void;
+    /** Callback when a widget is selected (for quick add without drag) */
+    onWidgetSelect?: (type: WidgetType, definition?: WidgetDefinition) => void;
+    /** Callback when drag starts */
+    onDragStart?: (type: WidgetType, definition: WidgetDefinition) => void;
+    /** Callback when drag ends */
+    onDragEnd?: () => void;
+    /** Installed widgets from the store (fetched by parent) */
+    installedWidgets?: WidgetDefinition[];
+    /** Whether installed widgets are still loading */
+    installedWidgetsLoading?: boolean;
+}
+export declare const WidgetPalette: FC<WidgetPaletteProps>;
+export default WidgetPalette;
+//# sourceMappingURL=WidgetPalette.d.ts.map

package/dist/bigconsole/components/dashboard/WidgetPalette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetPalette.d.ts","sourceRoot":"","sources":["../../../../src/bigconsole/components/dashboard/WidgetPalette.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,KAAK,EAAE,EAAwC,MAAM,OAAO,CAAC;AA4BtE,OAAO,EAAqC,KAAK,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACrG,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,aAAa,CAAC;AAkC9D,MAAM,WAAW,kBAAkB;IACjC,kCAAkC;IAClC,MAAM,EAAE,OAAO,CAAC;IAChB,oCAAoC;IACpC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,sEAAsE;IACtE,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,UAAU,CAAC,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC3E,gCAAgC;IAChC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACvE,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,2DAA2D;IAC3D,gBAAgB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACtC,kDAAkD;IAClD,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;AAgQD,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAiQ/C,CAAC;AAEH,eAAe,aAAa,CAAC"}

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

@@ -0,0 +1,462 @@
+import { getWidgetCategories as e, getWidgetKey as t } from "../widgets/WidgetRegistry.js";
+import { memo as n, useCallback as r, useMemo as i, useState as a } from "react";
+import { Activity as o, BarChart3 as s, Calendar as c, ChevronDown as l, ChevronRight as u, Columns as d, ExternalLink as f, FileText as p, Filter as m, Gauge as h, GitBranch as g, Grid3x3 as _, GripVertical as v, Layers as y, LayoutDashboard as b, List as x, MapPin as S, Puzzle as C, Search as w, Table as T, TrendingUp as E, Type as D, X as O } from "lucide-react";
+import { jsx as k, jsxs as A } from "react/jsx-runtime";
+import { Input as j } from "@burdenoff/fe-libs/ui";
+//#region src/bigconsole/components/dashboard/WidgetPalette.tsx
+var M = {
+	TrendingUp: E,
+	BarChart3: s,
+	Filter: m,
+	Table: T,
+	Grid3x3: _,
+	Gauge: h,
+	Activity: o,
+	List: x,
+	FileText: p,
+	Type: D,
+	ExternalLink: f,
+	MapPin: S,
+	Calendar: c,
+	Columns: d,
+	GitBranch: g,
+	Puzzle: C,
+	LayoutDashboard: b
+};
+function N(e) {
+	return M[e] || C;
+}
+var P = {
+	container: {
+		width: "300px",
+		height: "100%",
+		backgroundColor: "var(--color-bg-surface)",
+		borderRight: "1px solid var(--color-border)",
+		display: "flex",
+		flexDirection: "column",
+		flexShrink: 0,
+		overflow: "hidden",
+		position: "relative"
+	},
+	header: {
+		padding: "var(--space-formGap)",
+		borderBottom: "1px solid var(--color-border)",
+		backgroundColor: "var(--color-bg-sunken)",
+		flexShrink: 0
+	},
+	headerTop: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		marginBottom: "var(--space-controlGap)"
+	},
+	headerTitle: {
+		display: "flex",
+		alignItems: "center",
+		gap: "var(--space-iconGap)"
+	},
+	headerIcon: {
+		width: "32px",
+		height: "32px",
+		borderRadius: "var(--radius-button)",
+		backgroundColor: "var(--color-action-primary-bg)",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center"
+	},
+	title: {
+		fontSize: "var(--font-size-body-md)",
+		fontWeight: "var(--font-weight-semibold)",
+		color: "var(--color-text-primary)",
+		margin: 0
+	},
+	subtitle: {
+		fontSize: "var(--font-size-body-xs)",
+		color: "var(--color-text-muted)",
+		margin: "2px 0 0 0"
+	},
+	closeButton: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		width: "28px",
+		height: "28px",
+		border: "none",
+		background: "transparent",
+		borderRadius: "var(--radius-button)",
+		cursor: "pointer",
+		color: "var(--color-text-secondary)",
+		transition: "background-color 0.15s"
+	},
+	searchContainer: { position: "relative" },
+	searchIcon: {
+		position: "absolute",
+		left: "10px",
+		top: "50%",
+		transform: "translateY(-50%)",
+		width: "16px",
+		height: "16px",
+		color: "var(--color-text-muted)",
+		pointerEvents: "none"
+	},
+	searchInput: {
+		width: "100%",
+		paddingLeft: "36px",
+		height: "var(--size-controlHeight-sm)",
+		fontSize: "var(--font-size-body-sm)"
+	},
+	content: {
+		flex: "1 1 0",
+		minHeight: 0,
+		overflow: "hidden",
+		position: "relative"
+	},
+	scrollArea: {
+		position: "absolute",
+		top: 0,
+		left: 0,
+		right: 0,
+		bottom: 0,
+		overflowY: "auto",
+		overflowX: "hidden",
+		padding: "var(--space-controlGap)"
+	},
+	categoryContainer: { marginBottom: "var(--space-controlGap)" },
+	categoryHeader: {
+		width: "100%",
+		display: "flex",
+		alignItems: "center",
+		gap: "var(--space-iconGap)",
+		padding: "var(--space-controlGap) var(--space-iconGap)",
+		border: "none",
+		background: "transparent",
+		cursor: "pointer",
+		borderRadius: "var(--radius-button)",
+		transition: "background-color 0.15s"
+	},
+	categoryChevron: {
+		width: "16px",
+		height: "16px",
+		color: "var(--color-text-muted)",
+		flexShrink: 0
+	},
+	categoryLabel: {
+		flex: 1,
+		textAlign: "left",
+		fontSize: "var(--font-size-body-xs)",
+		fontWeight: "var(--font-weight-semibold)",
+		color: "var(--color-text-secondary)",
+		textTransform: "uppercase",
+		letterSpacing: "0.05em"
+	},
+	categoryCount: {
+		fontSize: "var(--font-size-body-xs)",
+		color: "var(--color-text-muted)",
+		backgroundColor: "var(--color-bg-sunken)",
+		padding: "2px 8px",
+		borderRadius: "var(--radius-full)"
+	},
+	widgetList: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "4px",
+		marginTop: "var(--space-controlGap)",
+		paddingLeft: "4px"
+	},
+	widgetCard: {
+		display: "flex",
+		alignItems: "center",
+		gap: "var(--space-iconGap)",
+		padding: "var(--space-controlGap)",
+		borderRadius: "var(--radius-card)",
+		cursor: "grab",
+		backgroundColor: "var(--color-bg-surface)",
+		border: "1px solid var(--color-border)",
+		transition: "all 0.15s ease"
+	},
+	widgetCardHover: {
+		backgroundColor: "var(--color-bg-hover)",
+		borderColor: "var(--color-action-primary-border)",
+		boxShadow: "var(--shadow-elevation-1)"
+	},
+	dragHandle: {
+		width: "16px",
+		height: "16px",
+		color: "var(--color-text-muted)",
+		opacity: .5,
+		flexShrink: 0
+	},
+	widgetIcon: {
+		width: "36px",
+		height: "36px",
+		borderRadius: "var(--radius-button)",
+		backgroundColor: "var(--color-bg-sunken)",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		flexShrink: 0
+	},
+	widgetIconInner: {
+		width: "18px",
+		height: "18px",
+		color: "var(--color-action-primary-bg)"
+	},
+	widgetText: {
+		flex: 1,
+		minWidth: 0,
+		overflow: "hidden"
+	},
+	widgetName: {
+		fontSize: "var(--font-size-body-sm)",
+		fontWeight: "var(--font-weight-medium)",
+		color: "var(--color-text-primary)",
+		whiteSpace: "nowrap",
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		marginBottom: "2px"
+	},
+	widgetDescription: {
+		fontSize: "var(--font-size-body-xs)",
+		color: "var(--color-text-muted)",
+		lineHeight: 1.3,
+		overflow: "hidden",
+		display: "-webkit-box",
+		WebkitLineClamp: 2,
+		WebkitBoxOrient: "vertical"
+	},
+	emptyState: {
+		textAlign: "center",
+		padding: "var(--space-pagePadding)"
+	},
+	emptyIcon: {
+		width: "48px",
+		height: "48px",
+		borderRadius: "var(--radius-card)",
+		backgroundColor: "var(--color-bg-sunken)",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		margin: "0 auto var(--space-formGap)"
+	},
+	emptyText: {
+		fontSize: "var(--font-size-body-sm)",
+		color: "var(--color-text-muted)",
+		margin: 0
+	},
+	clearButton: {
+		marginTop: "var(--space-controlGap)",
+		padding: "var(--space-controlGap) var(--space-formGap)",
+		fontSize: "var(--font-size-body-xs)",
+		fontWeight: "var(--font-weight-medium)",
+		color: "var(--color-action-primary-text)",
+		backgroundColor: "var(--color-action-primary-bg)",
+		border: "none",
+		borderRadius: "var(--radius-button)",
+		cursor: "pointer"
+	},
+	footer: {
+		padding: "var(--space-controlGap) var(--space-formGap)",
+		borderTop: "1px solid var(--color-border)",
+		backgroundColor: "var(--color-bg-sunken)",
+		flexShrink: 0
+	},
+	footerText: {
+		fontSize: "var(--font-size-body-xs)",
+		color: "var(--color-text-muted)",
+		margin: 0,
+		textAlign: "center"
+	}
+}, F = n(function({ isOpen: n, onClose: o, onWidgetSelect: s, onDragStart: c, onDragEnd: d, installedWidgets: f = [], installedWidgetsLoading: p = !1 }) {
+	let [m, h] = a(""), [g, _] = a(new Set([
+		"KPI",
+		"Visualization",
+		"Data",
+		"Content",
+		"Temporal",
+		"Custom",
+		"Installed"
+	])), [b, x] = a(null), S = i(() => e().map((e) => e.category === "Installed" ? {
+		...e,
+		widgets: f
+	} : e).filter((e) => e.category !== "Installed" || e.widgets.length > 0), [f]), C = i(() => {
+		if (!m.trim()) return S;
+		let e = m.toLowerCase();
+		return S.map((t) => ({
+			...t,
+			widgets: t.widgets.filter((t) => t.name.toLowerCase().includes(e) || t.description.toLowerCase().includes(e) || t.tags.some((t) => t.includes(e)))
+		})).filter((e) => e.widgets.length > 0);
+	}, [S, m]), T = r((e) => {
+		_((t) => {
+			let n = new Set(t);
+			return n.has(e) ? n.delete(e) : n.add(e), n;
+		});
+	}, []), E = r((e, t) => {
+		e.dataTransfer.setData("application/json", JSON.stringify({
+			type: t.type,
+			name: t.name,
+			defaultSize: t.defaultSize,
+			defaultConfig: t.defaultConfig,
+			category: t.category
+		})), e.dataTransfer.effectAllowed = "copy";
+		let n = document.createElement("div");
+		n.style.cssText = "\n        position: absolute;\n        top: -1000px;\n        left: -1000px;\n        padding: 8px 12px;\n        background: var(--color-bg-surface);\n        border: 2px solid var(--color-action-primary-bg);\n        border-radius: 8px;\n        font-size: 14px;\n        font-weight: 500;\n        color: var(--color-text-primary);\n        box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n      ", n.textContent = t.name, document.body.appendChild(n), e.dataTransfer.setDragImage(n, 0, 0), setTimeout(() => {
+			document.body.removeChild(n);
+		}, 0), c?.(t.type, t);
+	}, [c]), D = r(() => {
+		d?.();
+	}, [d]), M = r((e) => {
+		s?.(e.type, e);
+	}, [s]);
+	return n ? /* @__PURE__ */ A("div", {
+		style: P.container,
+		children: [
+			/* @__PURE__ */ A("div", {
+				style: P.header,
+				children: [/* @__PURE__ */ A("div", {
+					style: P.headerTop,
+					children: [/* @__PURE__ */ A("div", {
+						style: P.headerTitle,
+						children: [/* @__PURE__ */ k("div", {
+							style: P.headerIcon,
+							children: /* @__PURE__ */ k(y, { style: {
+								width: "18px",
+								height: "18px",
+								color: "var(--color-action-primary-text)"
+							} })
+						}), /* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("h3", {
+							style: P.title,
+							children: "Widgets"
+						}), /* @__PURE__ */ k("p", {
+							style: P.subtitle,
+							children: "Drag or click to add"
+						})] })]
+					}), /* @__PURE__ */ k("button", {
+						type: "button",
+						onClick: o,
+						style: P.closeButton,
+						onMouseOver: (e) => e.currentTarget.style.backgroundColor = "var(--color-bg-hover)",
+						onMouseOut: (e) => e.currentTarget.style.backgroundColor = "transparent",
+						children: /* @__PURE__ */ k(O, { style: {
+							width: "16px",
+							height: "16px"
+						} })
+					})]
+				}), /* @__PURE__ */ A("div", {
+					style: P.searchContainer,
+					children: [/* @__PURE__ */ k(w, { style: P.searchIcon }), /* @__PURE__ */ k(j, {
+						type: "text",
+						placeholder: "Search widgets...",
+						value: m,
+						onChange: (e) => h(e.target.value),
+						style: P.searchInput
+					})]
+				})]
+			}),
+			/* @__PURE__ */ k("div", {
+				style: P.content,
+				children: /* @__PURE__ */ A("div", {
+					style: P.scrollArea,
+					children: [C.map((e) => /* @__PURE__ */ A("div", {
+						style: P.categoryContainer,
+						children: [/* @__PURE__ */ A("button", {
+							type: "button",
+							onClick: () => T(e.category),
+							style: P.categoryHeader,
+							onMouseOver: (e) => e.currentTarget.style.backgroundColor = "var(--color-bg-hover)",
+							onMouseOut: (e) => e.currentTarget.style.backgroundColor = "transparent",
+							children: [
+								g.has(e.category) ? /* @__PURE__ */ k(l, { style: P.categoryChevron }) : /* @__PURE__ */ k(u, { style: P.categoryChevron }),
+								/* @__PURE__ */ k("span", {
+									style: P.categoryLabel,
+									children: e.label
+								}),
+								/* @__PURE__ */ k("span", {
+									style: P.categoryCount,
+									children: e.widgets.length
+								})
+							]
+						}), g.has(e.category) && /* @__PURE__ */ A("div", {
+							style: P.widgetList,
+							children: [p && e.category === "Installed" && /* @__PURE__ */ k("div", {
+								style: {
+									fontSize: "var(--font-size-body-xs)",
+									color: "var(--color-text-muted)",
+									padding: "var(--space-controlGap)"
+								},
+								children: "Loading..."
+							}), e.widgets.map((e) => {
+								let n = N(e.icon), r = t(e), i = b === r;
+								return /* @__PURE__ */ A("div", {
+									draggable: !0,
+									onDragStart: (t) => E(t, e),
+									onDragEnd: D,
+									onClick: () => M(e),
+									onMouseEnter: () => x(r),
+									onMouseLeave: () => x(null),
+									style: {
+										...P.widgetCard,
+										...i ? P.widgetCardHover : {}
+									},
+									children: [
+										/* @__PURE__ */ k(v, { style: P.dragHandle }),
+										/* @__PURE__ */ k("div", {
+											style: P.widgetIcon,
+											children: /* @__PURE__ */ k(n, { style: P.widgetIconInner })
+										}),
+										/* @__PURE__ */ A("div", {
+											style: P.widgetText,
+											children: [/* @__PURE__ */ k("div", {
+												style: P.widgetName,
+												children: e.name
+											}), /* @__PURE__ */ k("div", {
+												style: P.widgetDescription,
+												children: e.description
+											})]
+										})
+									]
+								}, r);
+							})]
+						})]
+					}, e.category)), C.length === 0 && /* @__PURE__ */ A("div", {
+						style: P.emptyState,
+						children: [
+							/* @__PURE__ */ k("div", {
+								style: P.emptyIcon,
+								children: /* @__PURE__ */ k(w, { style: {
+									width: "24px",
+									height: "24px",
+									color: "var(--color-text-muted)"
+								} })
+							}),
+							/* @__PURE__ */ A("p", {
+								style: P.emptyText,
+								children: [
+									"No widgets found for \"",
+									/* @__PURE__ */ k("strong", { children: m }),
+									"\""
+								]
+							}),
+							/* @__PURE__ */ k("button", {
+								type: "button",
+								onClick: () => h(""),
+								style: P.clearButton,
+								children: "Clear search"
+							})
+						]
+					})]
+				})
+			}),
+			/* @__PURE__ */ k("div", {
+				style: P.footer,
+				children: /* @__PURE__ */ k("p", {
+					style: P.footerText,
+					children: "Drag widgets to position them on the canvas"
+				})
+			})
+		]
+	}) : null;
+});
+//#endregion
+export { F as default };
+
+//# sourceMappingURL=WidgetPalette.js.map